refactor: refs #6346 wagons to VnTable

src/pages/Wagon/Type/WagonTypeList.vue

@@ -2,14 +2,13 @@
 import { ref, computed } from 'vue';
 import axios from 'axios';
 import { useQuasar } from 'quasar';
-import VnPaginate from 'src/components/ui/VnPaginate.vue';
 import { useArrayData } from 'src/composables/useArrayData';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
-import CardList from 'components/ui/CardList.vue';
 import FormModelPopup from 'src/components/FormModelPopup.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnRow from 'src/components/ui/VnRow.vue';
+import VnTable from 'src/components/VnTable/VnTable.vue';
 
 const quasar = useQuasar();
 const arrayData = useArrayData('WagonTypeList');
@@ -17,7 +16,7 @@ const store = arrayData.store;
 const dialog = ref();
 const { push } = useRouter();
 const { t } = useI18n();
-const paginate = ref();
+const tableRef = ref();
 
 const initialData = computed(() => {
     return {
@@ -25,10 +24,46 @@ const initialData = computed(() => {
     };
 });
 
-function reloadData() {
+const columns = computed(() => [
-    initialData.value.name = null;
+    {
-    paginate.value.fetch();
+        align: 'left',
-}
+        name: 'id',
+        label: t('ID'),
+        isId: true,
+        cardVisible: true,
+    },
+    {
+        align: 'left',
+        name: 'name',
+        label: t('Name'),
+        isTitle: true,
+    },
+    {
+        align: 'left',
+        name: 'divisible',
+        label: t('Divisible'),
+        cardVisible: true,
+        component: 'checkbox',
+    },
+    {
+        align: 'right',
+        name: 'tableActions',
+        actions: [
+            {
+                title: t('components.smartCard.openCard'),
+                icon: 'arrow_forward',
+                isPrimary: true,
+                action: (row) => navigate(row.id, row.name),
+            },
+            {
+                title: t('wagon.list.remove'),
+                icon: 'delete',
+                isPrimary: true,
+                action: (row) => remove(row),
+            },
+        ],
+    },
+]);
 
 function navigate(id, name) {
     push({ path: `/wagon/type/${id}/edit`, query: { name } });
@@ -41,51 +76,25 @@ async function remove(row) {
         type: 'positive',
     });
     store.data.splice(store.data.indexOf(row), 1);
+    window.location.reload();
 }
 </script>
 
 <template>
     <QPage class="column items-center q-pa-md">
-        <div class="vn-card-list">
+        <VnTable
-            <VnPaginate
+            ref="tableRef"
-                ref="paginate"
             data-key="WagonTypeList"
             url="WagonTypes"
-                order="id DESC"
+            :columns="columns"
             auto-load
+            order="id DESC"
+            :right-search="false"
+            :column-search="false"
+            :default-mode="'card'"
+            :disable-option="{ table: true }"
         >
-                <template #body="{ rows }">
+        </VnTable>
-                    <CardList
-                        v-for="row of rows"
-                        :key="row.id"
-                        :title="(row.name || '').toString()"
-                        :id="row.id"
-                        @click="navigate(row.id, row.name)"
-                    >
-                        <template #list-items>
-                            <QCheckbox
-                                :label="t('Divisble')"
-                                :model-value="row.divisible"
-                                disable
-                            />
-                        </template>
-                        <template #actions>
-                            <QBtn
-                                :label="t('components.smartCard.openCard')"
-                                @click.stop="navigate(row.id, row.name)"
-                                outline
-                            />
-                            <QBtn
-                                :label="t('wagon.list.remove')"
-                                @click.stop="remove(row)"
-                                color="primary"
-                                style="margin-top: 15px"
-                            />
-                        </template>
-                    </CardList>
-                </template>
-            </VnPaginate>
-        </div>
         <QPageSticky :offset="[18, 18]">
             <QBtn @click.stop="dialog.show()" color="primary" fab icon="add" shortcut="+">
                 <QDialog ref="dialog">
@@ -94,7 +103,7 @@ async function remove(row) {
                         url-create="WagonTypes"
                         model="WagonType"
                         :form-initial-data="initialData"
-                        @on-data-saved="reloadData()"
+                        @on-data-saved="window.location.reload()"
                         auto-load
                     >
                         <template #form-inputs="{ data }">

src/pages/Wagon/WagonList.vue

@@ -1,12 +1,13 @@
 <script setup>
 import axios from 'axios';
 import { useQuasar } from 'quasar';
-import VnPaginate from 'src/components/ui/VnPaginate.vue';
 import { useArrayData } from 'src/composables/useArrayData';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
-import CardList from 'components/ui/CardList.vue';
+import VnTable from 'src/components/VnTable/VnTable.vue';
-import VnLv from 'components/ui/VnLv.vue';
+import { computed } from 'vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
+import VnInput from 'src/components/common/VnInput.vue';
 
 const quasar = useQuasar();
 const arrayData = useArrayData('WagonList');
@@ -23,14 +24,56 @@ const filter = {
     },
 };
 
+const columns = computed(() => [
+    {
+        align: 'left',
+        name: 'label',
+        label: t('Label'),
+        isTitle: true,
+    },
+    {
+        align: 'left',
+        name: 'plate',
+        label: t('wagon.list.plate'),
+        cardVisible: true,
+    },
+    {
+        align: 'left',
+        name: 'volume',
+        label: t('wagon.list.volume'),
+        cardVisible: true,
+    },
+    {
+        align: 'left',
+        name: 'name',
+        label: t('wagon.list.type'),
+        cardVisible: true,
+        format: (row) => row?.type?.name,
+    },
+    {
+        align: 'right',
+        name: 'tableActions',
+        actions: [
+            {
+                title: t('components.smartCard.openCard'),
+                icon: 'arrow_forward',
+                isPrimary: true,
+                action: (row) => navigate(row.id),
+            },
+            {
+                title: t('wagon.list.remove'),
+                icon: 'delete',
+                isPrimary: true,
+                action: (row) => remove(row),
+            },
+        ],
+    },
+]);
+
 function navigate(id) {
     router.push({ path: `/wagon/${id}/edit` });
 }
 
-function create() {
-    router.push({ path: `/wagon/create` });
-}
-
 async function remove(row) {
     try {
         await axios.delete(`Wagons/${row.id}`).then(async () => {
@@ -39,6 +82,7 @@ async function remove(row) {
                 type: 'positive',
             });
             store.data.splice(store.data.indexOf(row), 1);
+            window.location.reload();
         });
     } catch (error) {
         //
@@ -48,53 +92,83 @@ async function remove(row) {
 
 <template>
     <QPage class="column items-center q-pa-md">
-        <div class="vn-card-list">
+        <VnTable
-            <VnPaginate
+            ref="tableRef"
             data-key="WagonList"
-                url="/Wagons"
+            url="Wagons"
-                order="id DESC"
             :filter="filter"
+            :columns="columns"
             auto-load
+            order="id DESC"
+            :right-search="false"
+            :column-search="false"
+            :default-mode="'card'"
+            :disable-option="{ table: true }"
+            :create="{
+                urlCreate: 'Wagons',
+                title: t('Create new wagon'),
+                onDataSaved: () => {
+                    window.location.reload();
+                },
+                formInitialData: {},
+            }"
         >
-                <template #body="{ rows }">
+            <template #more-create-dialog="{ data }">
-                    <CardList
+                <VnInput
-                        v-for="row of rows"
+                    filled
-                        :key="row.id"
+                    v-model="data.label"
-                        :title="(row.label || '').toString()"
+                    :label="t('wagon.create.label')"
-                        :id="row.id"
+                    type="number"
-                        @click="navigate(row.id)"
+                    min="0"
+                    :rules="[(val) => !!val || t('wagon.warnings.labelNotEmpty')]"
+                />
+                <VnInput
+                    filled
+                    v-model="data.plate"
+                    :label="t('wagon.create.plate')"
+                    :rules="[(val) => !!val || t('wagon.warnings.plateNotEmpty')]"
+                />
+                <VnInput
+                    filled
+                    v-model="data.volume"
+                    :label="t('wagon.create.volume')"
+                    type="number"
+                    min="0"
+                    :rules="[(val) => !!val || t('wagon.warnings.volumeNotEmpty')]"
+                />
+                <VnSelect
+                    url="WagonTypes"
+                    filled
+                    v-model="data.typeFk"
+                    use-input
+                    fill-input
+                    hide-selected
+                    input-debounce="0"
+                    option-label="name"
+                    option-value="id"
+                    emit-value
+                    map-options
+                    :label="t('wagon.create.type')"
+                    :options="filteredWagonTypes"
+                    :rules="[(val) => !!val || t('wagon.warnings.typeNotEmpty')]"
+                    @filter="filterType"
                 >
-                        <template #list-items>
+                    <template v-if="data.typeFk" #append>
-                            <VnLv
+                        <QIcon
-                                :label="t('wagon.list.plate')"
+                            name="cancel"
-                                :title-label="t('wagon.list.plate')"
+                            @click.stop.prevent="data.typeFk = null"
-                                :value="row.plate"
+                            class="cursor-pointer"
-                            />
-                            <VnLv :label="t('wagon.list.volume')" :value="row?.volume" />
-                            <VnLv
-                                :label="t('wagon.list.type')"
-                                :value="row?.type?.name"
                         />
                     </template>
-                        <template #actions>
+                    <template #no-option>
-                            <QBtn
+                        <QItem>
-                                :label="t('components.smartCard.openCard')"
+                            <QItemSection class="text-grey">
-                                @click.stop="navigate(row.id)"
+                                {{ t('wagon.warnings.noData') }}
-                                outline
+                            </QItemSection>
-                            />
+                        </QItem>
-                            <QBtn
-                                :label="t('wagon.list.remove')"
-                                @click.stop="remove(row)"
-                                color="primary"
-                                style="margin-top: 15px"
-                            />
                     </template>
-                    </CardList>
+                </VnSelect>
             </template>
-            </VnPaginate>
+        </VnTable>
-        </div>
-        <QPageSticky position="bottom-right" :offset="[18, 18]">
-            <QBtn @click="create" fab icon="add" color="primary" shortcut="+" />
-        </QPageSticky>
     </QPage>
 </template>