feat: refs #7874 select observation type
This commit is contained in:
parent
68ebda625b
commit
709a662ceb
|
|
@ -1,6 +1,6 @@
|
|||
<script setup>
|
||||
import axios from 'axios';
|
||||
import { ref } from 'vue';
|
||||
import { ref, reactive } from 'vue';
|
||||
import { onBeforeRouteLeave } from 'vue-router';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useQuasar } from 'quasar';
|
||||
|
|
@ -12,36 +12,39 @@ import VnPaginate from 'components/ui/VnPaginate.vue';
|
|||
import VnUserLink from 'components/ui/VnUserLink.vue';
|
||||
import VnConfirm from 'components/ui/VnConfirm.vue';
|
||||
import VnAvatar from 'components/ui/VnAvatar.vue';
|
||||
import VnRow from './VnRow.vue';
|
||||
import VnSelect from '../common/VnSelect.vue';
|
||||
import FetchData from '../FetchData.vue';
|
||||
import VnInput from '../common/VnInput.vue';
|
||||
|
||||
const $props = defineProps({
|
||||
url: { type: String, default: null },
|
||||
filter: { type: Object, default: () => {} },
|
||||
body: { type: Object, default: () => {} },
|
||||
addNote: { type: Boolean, default: false },
|
||||
selectType: { type: Boolean, default: false },
|
||||
});
|
||||
|
||||
const { t } = useI18n();
|
||||
const state = useState();
|
||||
const quasar = useQuasar();
|
||||
const currentUser = ref(state.getUser());
|
||||
const newNote = ref('');
|
||||
const newNote = reactive({ text: '', observationTypeFk: null });
|
||||
const observationTypes = ref([]);
|
||||
const vnPaginateRef = ref();
|
||||
function handleKeyUp(event) {
|
||||
if (event.key === 'Enter') {
|
||||
event.preventDefault();
|
||||
if (!event.shiftKey) insert();
|
||||
}
|
||||
}
|
||||
|
||||
async function insert() {
|
||||
const body = $props.body;
|
||||
const newBody = { ...body, ...{ text: newNote.value } };
|
||||
const newBody = {
|
||||
...body,
|
||||
...{ text: newNote.text, observationTypeFk: newNote.observationTypeFk },
|
||||
};
|
||||
await axios.post($props.url, newBody);
|
||||
await vnPaginateRef.value.fetch();
|
||||
newNote.value = '';
|
||||
}
|
||||
|
||||
onBeforeRouteLeave((to, from, next) => {
|
||||
if (newNote.value)
|
||||
if (newNote.text)
|
||||
quasar.dialog({
|
||||
component: VnConfirm,
|
||||
componentProps: {
|
||||
|
|
@ -54,6 +57,12 @@ onBeforeRouteLeave((to, from, next) => {
|
|||
});
|
||||
</script>
|
||||
<template>
|
||||
<FetchData
|
||||
url="ObservationTypes"
|
||||
:filter="{ fields: ['id', 'description'] }"
|
||||
:auto-load="selectType"
|
||||
@on-fetch="(data) => observationTypes.push(...data)"
|
||||
/>
|
||||
<QCard class="q-pa-xs q-mb-xl full-width" v-if="$props.addNote">
|
||||
<QCardSection horizontal>
|
||||
<VnAvatar :worker-id="currentUser.id" size="md" />
|
||||
|
|
@ -62,17 +71,25 @@ onBeforeRouteLeave((to, from, next) => {
|
|||
{{ t('globals.now') }}
|
||||
</div>
|
||||
</QCardSection>
|
||||
<QCardSection class="q-pa-xs q-my-none q-py-none" horizontal>
|
||||
<QInput
|
||||
v-model="newNote"
|
||||
class="full-width"
|
||||
<QCardSection class="q-px-xs q-my-none q-py-none">
|
||||
<VnRow class="full-width">
|
||||
<VnSelect
|
||||
:label="t('Observation type')"
|
||||
v-if="selectType"
|
||||
url="ObservationTypes"
|
||||
v-model="newNote.observationTypeFk"
|
||||
option-label="description"
|
||||
style="flex: 0.15; margin-left: 0"
|
||||
/>
|
||||
<VnInput
|
||||
v-model.trim="newNote.text"
|
||||
type="textarea"
|
||||
:label="t('Add note here...')"
|
||||
filled
|
||||
size="lg"
|
||||
autogrow
|
||||
autofocus
|
||||
@keyup="handleKeyUp"
|
||||
@keyup.enter="insert"
|
||||
clearable
|
||||
>
|
||||
<template #append>
|
||||
|
|
@ -84,7 +101,8 @@ onBeforeRouteLeave((to, from, next) => {
|
|||
@click="insert"
|
||||
/>
|
||||
</template>
|
||||
</QInput>
|
||||
</VnInput>
|
||||
</VnRow>
|
||||
</QCardSection>
|
||||
</QCard>
|
||||
<VnPaginate
|
||||
|
|
@ -98,6 +116,10 @@ onBeforeRouteLeave((to, from, next) => {
|
|||
class="show"
|
||||
v-bind="$attrs"
|
||||
search-url="notes"
|
||||
@on-fetch="
|
||||
newNote.text = '';
|
||||
newNote.observationTypeFk = null;
|
||||
"
|
||||
>
|
||||
<template #body="{ rows }">
|
||||
<TransitionGroup name="list" tag="div" class="column items-center full-width">
|
||||
|
|
@ -111,17 +133,38 @@ onBeforeRouteLeave((to, from, next) => {
|
|||
:descriptor="false"
|
||||
:worker-id="note.workerFk"
|
||||
size="md"
|
||||
:title="note.worker?.user.nickname"
|
||||
/>
|
||||
<div class="full-width row justify-between q-pa-xs">
|
||||
<VnUserLink
|
||||
:name="`${note.worker.user.nickname}`"
|
||||
:worker-id="note.worker.id"
|
||||
/>
|
||||
{{ toDateHourMin(note.created) }}
|
||||
<span v-text="toDateHourMin(note.created)" />
|
||||
</div>
|
||||
</QCardSection>
|
||||
<QCardSection class="q-pa-xs q-my-none q-py-none">
|
||||
{{ note.text }}
|
||||
<VnRow>
|
||||
<VnSelect
|
||||
:label="t('Observation type')"
|
||||
v-if="selectType && note.observationTypeFk"
|
||||
url="ObservationTypes"
|
||||
v-model="note.observationTypeFk"
|
||||
option-label="description"
|
||||
style="flex: 0.15"
|
||||
dense
|
||||
readonly
|
||||
:is-clearable="false"
|
||||
/>
|
||||
<span
|
||||
:style="{
|
||||
flex: 0.85,
|
||||
'align-self':
|
||||
selectType & $q.screen.gt.xs ? 'end' : 'baseline',
|
||||
}"
|
||||
v-text="note.text"
|
||||
/>
|
||||
</VnRow>
|
||||
</QCardSection>
|
||||
</QCard>
|
||||
</TransitionGroup>
|
||||
|
|
@ -156,5 +199,5 @@ onBeforeRouteLeave((to, from, next) => {
|
|||
Add note here...: Añadir nota aquí...
|
||||
New note: Nueva nota
|
||||
Save (Enter): Guardar (Intro)
|
||||
|
||||
Observation type: Tipo de observación
|
||||
</i18n>
|
||||
|
|
|
|||
|
|
@ -22,5 +22,6 @@ const noteFilter = computed(() => {
|
|||
:filter="noteFilter"
|
||||
:body="{ clientFk: route.params.id }"
|
||||
style="overflow-y: auto"
|
||||
:select-type="true"
|
||||
/>
|
||||
</template>
|
||||
|
|
|
|||
Loading…
Reference in New Issue