forked from verdnatura/salix-front
125 lines
4.3 KiB
Vue
125 lines
4.3 KiB
Vue
<script setup>
|
|
import { ref, watch, computed, reactive } from 'vue';
|
|
import { useRoute } from 'vue-router';
|
|
import { useI18n } from 'vue-i18n';
|
|
|
|
import CrudModel from 'components/CrudModel.vue';
|
|
import VnRow from 'components/ui/VnRow.vue';
|
|
import VnInput from 'src/components/common/VnInput.vue';
|
|
import VnSelect from 'src/components/common/VnSelect.vue';
|
|
import FetchData from 'components/FetchData.vue';
|
|
|
|
import { useArrayData } from 'src/composables/useArrayData';
|
|
|
|
const route = useRoute();
|
|
const { t } = useI18n();
|
|
const ticketNotesCrudRef = ref(null);
|
|
const observationTypes = ref([]);
|
|
const arrayData = useArrayData('TicketNotes');
|
|
const { store } = arrayData;
|
|
const isSaving = ref(false);
|
|
|
|
const crudModelFilter = reactive({
|
|
where: { ticketFk: route.params.id },
|
|
fields: ['id', 'ticketFk', 'observationTypeFk', 'description'],
|
|
});
|
|
|
|
const crudModelRequiredData = computed(() => ({ ticketFk: route.params.id }));
|
|
|
|
watch(
|
|
() => route.params.id,
|
|
async () => {
|
|
crudModelFilter.where.ticketFk = route.params.id;
|
|
store.filter = crudModelFilter;
|
|
await ticketNotesCrudRef.value.reload();
|
|
}
|
|
);
|
|
function handleDelete(row) {
|
|
ticketNotesCrudRef.value.remove([row]);
|
|
}
|
|
|
|
async function handleSave() {
|
|
if (!isSaving.value) {
|
|
isSaving.value = true;
|
|
await ticketNotesCrudRef.value?.saveChanges();
|
|
isSaving.value = false;
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<FetchData
|
|
@on-fetch="(data) => (observationTypes = data)"
|
|
auto-load
|
|
url="ObservationTypes"
|
|
/>
|
|
<div class="flex justify-center">
|
|
<CrudModel
|
|
ref="ticketNotesCrudRef"
|
|
data-key="TicketNotes"
|
|
url="TicketObservations"
|
|
model="TicketNotes"
|
|
:filter="crudModelFilter"
|
|
:data-required="crudModelRequiredData"
|
|
:default-remove="false"
|
|
auto-load
|
|
style="max-width: 800px"
|
|
>
|
|
<template #body="{ rows }">
|
|
<QCard class="q-px-lg q-py-md">
|
|
<div
|
|
v-for="(row, index) in rows"
|
|
:key="index"
|
|
class="q-mb-md row items-center q-gutter-x-md"
|
|
>
|
|
<VnSelect
|
|
:label="t('ticketNotes.observationType')"
|
|
:options="observationTypes"
|
|
hide-selected
|
|
option-label="description"
|
|
option-value="id"
|
|
v-model="row.observationTypeFk"
|
|
:disable="!!row.id"
|
|
data-cy="ticketNotesObservationType"
|
|
/>
|
|
<VnInput
|
|
:label="t('basicData.description')"
|
|
v-model="row.description"
|
|
class="col"
|
|
@keyup.enter="handleSave"
|
|
data-cy="ticketNotesDescription"
|
|
/>
|
|
<QIcon
|
|
name="delete"
|
|
size="sm"
|
|
class="cursor-pointer"
|
|
color="primary"
|
|
@click="handleDelete(row)"
|
|
data-cy="ticketNotesRemoveNoteBtn"
|
|
>
|
|
<QTooltip>
|
|
{{ t('ticketNotes.removeNote') }}
|
|
</QTooltip>
|
|
</QIcon>
|
|
</div>
|
|
<VnRow v-if="observationTypes.length > rows.length">
|
|
<QBtn
|
|
icon="add_circle"
|
|
shortcut="+"
|
|
flat
|
|
class="fill-icon-on-hover q-ml-md"
|
|
color="primary"
|
|
@click="ticketNotesCrudRef.insert()"
|
|
data-cy="ticketNotesAddNoteBtn"
|
|
>
|
|
<QTooltip>
|
|
{{ t('ticketNotes.addNote') }}
|
|
</QTooltip>
|
|
</QBtn>
|
|
</VnRow>
|
|
</QCard>
|
|
</template>
|
|
</CrudModel>
|
|
</div>
|
|
</template>
|