80 lines
2.5 KiB
Vue
80 lines
2.5 KiB
Vue
<template>
|
|
<div class="card mb-3 shadow">
|
|
<div class="card-header d-flex justify-content-between align-items-center">
|
|
<span>New document</span>
|
|
<a class="close" @click="() => $emit('cancel')">❌</a>
|
|
</div>
|
|
<ul class="list-group list-group-flush">
|
|
<li class="list-group-item"><ViewLocationLookup :client="client" :dfn="dfn" label="Visit" v-model="x_location" /></li>
|
|
<li class="list-group-item"><ViewDocTitleLookup :client="client" label="Title" v-model="x_title" /></li>
|
|
<li class="list-group-item"><ViewUserLookup :client="client" label="Author" v-model="x_author" /></li>
|
|
<li class="list-group-item"><DateTimePicker v-model="x_datetime" /></li>
|
|
</ul>
|
|
<div class="card-footer btn-group" role="group"><button class="btn btn-primary" :disabled="!((x_location) && (x_location.IEN) && (x_title) && (x_author))" @click="() => $emit('submit', { location: x_location, title: x_title, author: x_author, datetime: fmdatetime(x_datetime) })">Create</button></div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
a.close {
|
|
cursor: default;
|
|
text-decoration: none;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
import { strptime, strftime } from './fmdatetime.mjs';
|
|
|
|
import ViewLocationLookup from './ViewLocationLookup.vue';
|
|
import ViewDocTitleLookup from './ViewDocTitleLookup.vue';
|
|
import ViewUserLookup from './ViewUserLookup.vue';
|
|
import DateTimePicker from './DateTimePicker.vue';
|
|
|
|
export default {
|
|
components: {
|
|
ViewLocationLookup, ViewDocTitleLookup, ViewUserLookup, DateTimePicker
|
|
},
|
|
props: {
|
|
client: Object,
|
|
dfn: String,
|
|
location: String,
|
|
title: String,
|
|
author: String,
|
|
datetime: {
|
|
type: String,
|
|
default: 'N'
|
|
}
|
|
},
|
|
emits: {
|
|
'cancel': null,
|
|
'submit': Object,
|
|
'update:location': String,
|
|
'update:title': String,
|
|
'update:author': String,
|
|
'update:datetime': String
|
|
},
|
|
data() {
|
|
return {
|
|
x_location: this.location,
|
|
x_title: this.title,
|
|
x_author: this.author,
|
|
x_datetime: this.datetime
|
|
};
|
|
},
|
|
watch: {
|
|
location(value) { this.x_location = value; },
|
|
x_location(value) { this.$emit('update:location', value); },
|
|
title(value) { this.x_title = value; },
|
|
x_title(value) { this.$emit('update:title', value); },
|
|
author(value) { this.x_author = value; },
|
|
x_author(value) { this.$emit('update:author', value); },
|
|
datetime(value) { this.x_datetime = value; },
|
|
x_datetime(value) { this.$emit('update:datetime', value); }
|
|
},
|
|
methods: {
|
|
fmdatetime(datetime) {
|
|
return strftime(strptime(datetime));
|
|
}
|
|
}
|
|
};
|
|
</script>
|