155 lines
5.5 KiB
Vue
155 lines
5.5 KiB
Vue
<script setup>
|
|
import { ref, computed } from 'vue';
|
|
import { useRoute } from 'vue-router';
|
|
import { useI18n } from 'vue-i18n';
|
|
|
|
import FetchData from 'components/FetchData.vue';
|
|
import CrudModel from 'components/CrudModel.vue';
|
|
import VnInput from 'src/components/common/VnInput.vue';
|
|
import VnSelect from 'src/components/common/VnSelect.vue';
|
|
|
|
const { params } = useRoute();
|
|
const { t } = useI18n();
|
|
|
|
const entryObservationsRef = ref(null);
|
|
const entryObservationsOptions = ref([]);
|
|
const selected = ref([]);
|
|
|
|
const sortEntryObservationOptions = (data) => {
|
|
entryObservationsOptions.value = [...data].sort((a, b) =>
|
|
a.description.localeCompare(b.description)
|
|
);
|
|
};
|
|
|
|
const columns = computed(() => [
|
|
{
|
|
name: 'observationType',
|
|
label: t('entry.notes.observationType'),
|
|
field: (row) => row.observationTypeFk,
|
|
sortable: true,
|
|
options: entryObservationsOptions.value,
|
|
required: true,
|
|
model: 'observationTypeFk',
|
|
optionValue: 'id',
|
|
optionLabel: 'description',
|
|
tabIndex: 1,
|
|
align: 'left',
|
|
},
|
|
{
|
|
name: 'description',
|
|
label: t('globals.description'),
|
|
field: (row) => row.description,
|
|
tabIndex: 2,
|
|
align: 'left',
|
|
},
|
|
]);
|
|
</script>
|
|
<template>
|
|
<FetchData
|
|
url="ObservationTypes"
|
|
@on-fetch="(data) => sortEntryObservationOptions(data)"
|
|
auto-load
|
|
/>
|
|
<CrudModel
|
|
data-key="EntryAccount"
|
|
url="EntryObservations"
|
|
model="EntryAccount"
|
|
:filter="{
|
|
fields: ['id', 'entryFk', 'observationTypeFk', 'description'],
|
|
where: { entryFk: params.id },
|
|
}"
|
|
ref="entryObservationsRef"
|
|
:data-required="{ entryFk: params.id }"
|
|
v-model:selected="selected"
|
|
auto-load
|
|
>
|
|
<template #body="{ rows, validate }">
|
|
<QTable
|
|
v-model:selected="selected"
|
|
:columns="columns"
|
|
:rows="rows"
|
|
:pagination="{ rowsPerPage: 0 }"
|
|
row-key="$index"
|
|
selection="multiple"
|
|
hide-pagination
|
|
:grid="$q.screen.lt.md"
|
|
table-header-class="text-left"
|
|
>
|
|
<template #body-cell-observationType="{ row, col }">
|
|
<QTd>
|
|
<VnSelect
|
|
v-model="row[col.model]"
|
|
:options="col.options"
|
|
:option-value="col.optionValue"
|
|
:option-label="col.optionLabel"
|
|
:autofocus="col.tabIndex == 1"
|
|
input-debounce="0"
|
|
hide-selected
|
|
:required="true"
|
|
/>
|
|
</QTd>
|
|
</template>
|
|
<template #body-cell-description="{ row, col }">
|
|
<QTd>
|
|
<VnInput
|
|
:label="t('globals.description')"
|
|
v-model="row[col.name]"
|
|
:rules="validate('EntryObservation.description')"
|
|
/>
|
|
</QTd>
|
|
</template>
|
|
<template #item="props">
|
|
<div class="q-pa-xs col-xs-12 col-sm-6 grid-style-transition">
|
|
<QCard bordered flat>
|
|
<QCardSection>
|
|
<QCheckbox v-model="props.selected" dense />
|
|
</QCardSection>
|
|
<QSeparator />
|
|
<QList dense>
|
|
<QItem>
|
|
<QItemSection>
|
|
<VnSelect
|
|
v-model="props.row.observationTypeFk"
|
|
:options="entryObservationsOptions"
|
|
option-value="id"
|
|
option-label="description"
|
|
input-debounce="0"
|
|
hide-selected
|
|
:required="true"
|
|
/>
|
|
</QItemSection>
|
|
</QItem>
|
|
<QItem>
|
|
<QItemSection>
|
|
<VnInput
|
|
:label="t('globals.description')"
|
|
v-model="props.row.description"
|
|
:rules="
|
|
validate('EntryObservation.description')
|
|
"
|
|
/>
|
|
</QItemSection>
|
|
</QItem>
|
|
</QList>
|
|
</QCard>
|
|
</div>
|
|
</template>
|
|
</QTable>
|
|
</template>
|
|
</CrudModel>
|
|
<QPageSticky position="bottom-right" :offset="[25, 25]">
|
|
<QBtn
|
|
fab
|
|
color="primary"
|
|
icon="add"
|
|
shortcut="+"
|
|
@click="entryObservationsRef.insert()"
|
|
/>
|
|
</QPageSticky>
|
|
</template>
|
|
<i18n>
|
|
es:
|
|
Add note: Añadir nota
|
|
Remove note: Quitar nota
|
|
</i18n>
|