Merge pull request '#6946 add table and floating button' (!248) from 6946-refactorEntryNotes into dev

Reviewed-on: #248
Reviewed-by: Jorge Penades <jorgep@verdnatura.es>

src/components/ui/VnRow.vue

@@ -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;
     }
 }

src/pages/Entry/Card/EntryNotes.vue

@@ -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: params.id }"
-        :data-required="{ entryFk: route.params.id }"
+        v-model:selected="selected"
     >
         <template #body="{ rows, validate }">
-            <QCard class="q-pa-md">
+            <QTable
-                <VnRow
+                v-model:selected="selected"
-                    v-for="(row, index) in rows"
+                :columns="columns"
-                    :key="index"
+                :rows="rows"
-                    class="row q-gutter-md q-mb-md"
+                :pagination="{ rowsPerPage: 0 }"
-                >
+                row-key="$index"
-                    <VnSelectFilter
+                selection="multiple"
-                        :label="t('entry.notes.observationType')"
+                hide-pagination
-                        v-model="row.observationTypeFk"
+                :grid="$q.screen.lt.md"
-                        :options="entryObservationsOptions"
+                table-header-class="text-left"
-                        :disable="!!row.id"
+            >
-                        option-label="description"
+                <template #body-cell-observationType="{ row, col }">
-                        option-value="id"
+                    <QTd>
-                        hide-selected
+                        <VnSelectFilter
-                    />
+                            v-model="row[col.model]"
-
+                            :options="col.options"
-                    <VnInput
+                            :option-value="col.optionValue"
-                        :label="t('globals.description')"
+                            :option-label="col.optionLabel"
-                        v-model="row.description"
+                            :autofocus="col.tabIndex == 1"
-                        :rules="validate('EntryObservation.description')"
+                            input-debounce="0"
-                    />
+                            hide-selected
-
+                            :required="true"
-                    <div class="row justify-center items-center">
+                        />
-                        <QIcon
+                    </QTd>
-                            name="delete"
+                </template>
-                            size="sm"
+                <template #body-cell-description="{ row, col }">
-                            class="cursor-pointer"
+                    <QTd>
-                            color="primary"
+                        <VnInput
-                            @click="entryObservationsRef.remove([row])"
+                            :label="t('globals.description')"
-                        >
+                            v-model="row[col.name]"
-                            <QTooltip>
+                            :rules="validate('EntryObservation.description')"
-                                {{ t('Remove note') }}
+                        />
-                            </QTooltip>
+                    </QTd>
-                        </QIcon>
+                </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>
+                </template>
-                <QIcon
+            </QTable>
-                    name="add"
-                    size="sm"
-                    class="cursor-pointer"
-                    color="primary"
-                    @click="entryObservationsRef.insert()"
-                >
-                    <QTooltip>
-                        {{ t('Add note') }}
-                    </QTooltip>
-                </QIcon>
-            </QCard>
         </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