verdnatura/salix-front
verdnatura
/
salix-front
1
2
Fork 1
Code Issues Pull Requests 63 Releases Wiki Activity

refactor: #6946 add table and floating button
gitea/salix-front/pipeline/pr-dev This commit looks good Details

This commit is contained in:
jcasado 2024-03-20 12:50:47 +01:00
parent 02574ec42d
commit 2f27b8537c
2 changed files with 105 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/ui/VnRow.vue
View File

@ -1,17 +1,17 @@
<template>
<div id="row" class="q-gutter-md q-mb-md">
<div class="vn-row q-gutter-md q-mb-md">
<slot></slot>
</div>
</template>
<style lang="scss" scopped>
#row {
.vn-row {
display: flex;
> * {
flex: 1;
}
}
@media screen and (max-width: 800px) {
#row {
.vn-row {
flex-direction: column;
}
}

156
src/pages/Entry/Card/EntryNotes.vue
View File

@ -1,19 +1,19 @@
<script setup>
import { ref, onMounted } from 'vue';
import { ref, computed, onMounted } 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 VnRow from 'components/ui/VnRow.vue';
import VnInput from 'src/components/common/VnInput.vue';
import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
const route = useRoute();
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) =>
@ -24,6 +24,29 @@ const sortEntryObservationOptions = (data) => {
onMounted(() => {
if (entryObservationsRef.value) entryObservationsRef.value.reload();
});
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
@ -37,65 +60,90 @@ onMounted(() => {
model="EntryAccount"
:filter="{
fields: ['id', 'entryFk', 'observationTypeFk', 'description'],
where: { entryFk: route.params.id },
where: { entryFk: params.id },
}"
ref="entryObservationsRef"
:default-remove="false"
:data-required="{ entryFk: route.params.id }"
:data-required="{ entryFk: params.id }"
v-model:selected="selected"
>
<template #body="{ rows, validate }">
<QCard class="q-pa-md">
<VnRow
v-for="(row, index) in rows"
:key="index"
class="row q-gutter-md q-mb-md"
>
<VnSelectFilter
:label="t('entry.notes.observationType')"
v-model="row.observationTypeFk"
:options="entryObservationsOptions"
:disable="!!row.id"
option-label="description"
option-value="id"
hide-selected
/>
<VnInput
:label="t('globals.description')"
v-model="row.description"
:rules="validate('EntryObservation.description')"
/>
<div class="row justify-center items-center">
<QIcon
name="delete"
size="sm"
class="cursor-pointer"
color="primary"
@click="entryObservationsRef.remove([row])"
>
<QTooltip>
{{ t('Remove note') }}
</QTooltip>
</QIcon>
<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>
<VnSelectFilter
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>
<VnSelectFilter
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>
</VnRow>
<QIcon
name="add"
size="sm"
class="cursor-pointer"
color="primary"
@click="entryObservationsRef.insert()"
>
<QTooltip>
{{ t('Add note') }}
</QTooltip>
</QIcon>
</QCard>
</template>
</QTable>
</template>
</CrudModel>
<QPageSticky position="bottom-right" :offset="[25, 25]">
<QBtn fab color="primary" icon="add" @click="entryObservationsRef.insert()" />
</QPageSticky>
</template>
<i18n>
es:
Add note: Añadir nota