Add pagination and table actions

src/pages/Item/ItemList.vue

@@ -11,6 +11,7 @@ import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
 import ItemDescriptorProxy from '../Item/Card/ItemDescriptorProxy.vue';
 import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
 import ItemSummary from '../Item/Card/ItemSummary.vue';
+import VnPaginate from 'components/ui/VnPaginate.vue';
 
 import { useStateStore } from 'stores/useStateStore';
 import { toDate, toCurrency } from 'src/filters';
@@ -18,13 +19,16 @@ import { useSession } from 'composables/useSession';
 import { dashIfEmpty } from 'src/filters';
 import { useArrayData } from 'composables/useArrayData';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
+import { useVnConfirm } from 'composables/useVnConfirm';
+import axios from 'axios';
 
 const router = useRouter();
-const session = useSession();
+const { getTokenMultimedia } = useSession();
-const token = session.getToken();
+const token = getTokenMultimedia();
 const stateStore = useStateStore();
 const { t } = useI18n();
 const { viewSummary } = useSummaryDialog();
+const { openConfirmationModal } = useVnConfirm();
 
 const itemTypesOptions = ref([]);
 const originsOptions = ref([]);
@@ -66,13 +70,6 @@ const exprBuilder = (param, value) => {
 };
 
 const params = reactive({});
-const arrayData = useArrayData('ItemList', {
-    url: 'Items/filter',
-    order: ['isActive DESC', 'name', 'id'],
-    exprBuilder: exprBuilder,
-});
-const store = arrayData.store;
-const rows = computed(() => store.data);
 
 // const getInputEvents = (col) => {
 //     return col.columnFilter.type === 'select'
@@ -389,15 +386,25 @@ const redirectToItemSummary = (id) => {
 //     }
 // };
 
-const cloneRow = () => {
+const cloneItem = async (itemFk) => {
-    console.log('cloneRow');
+    try {
+        console.log('cloneRow: ', itemFk);
+        const { data } = await axios.post(`Items/${itemFk}/clone`);
+        if (!data) return;
+        router.push({ name: 'ItemTags', params: { id: data.id } });
+    } catch (err) {
+        console.error('Error cloning row', err);
+    }
+};
+
+const test = (ev) => {
+    console.log('test: ', ev);
 };
 
 onMounted(async () => {
     stateStore.rightDrawer = true;
     const filteredColumns = columns.value.filter((col) => col.name !== 'picture');
     allColumnNames.value = filteredColumns.map((col) => col.name);
-    await arrayData.fetch({ append: false });
 });
 
 onUnmounted(() => (stateStore.rightDrawer = false));
@@ -440,12 +447,16 @@ onUnmounted(() => (stateStore.rightDrawer = false));
         <QSpace />
         <div id="st-actions"></div>
     </QToolbar>
-    <!-- <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
-        <QScrollArea class="fit text-grey-8">
-            <EntryLatestBuysFilter data-key="EntryLatestBuys" :tags="tags" />
-        </QScrollArea>
-    </QDrawer> -->
     <QPage class="column items-center q-pa-md">
+        <VnPaginate
+            data-key="ItemList"
+            url="Items/filter"
+            :order="['isActive DESC', 'name', 'id']"
+            :limit="12"
+            :offset="50"
+            auto-load
+        >
+            <template #body="{ rows }">
                 <QTable
                     :rows="rows"
                     :columns="columns"
@@ -454,6 +465,8 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                     class="full-width q-mt-md"
                     :visible-columns="visibleColumns"
                     :no-data-label="t('globals.noResults')"
+                    virtual-scroll
+                    @virtual-scroll="test"
                     @row-click="(_, row) => redirectToItemSummary(row.id)"
                 >
                     <!-- <template #top-row="{ cols }">
@@ -517,14 +530,20 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                     <template #body-cell-actions="{ row }">
                         <QTd>
                             <QIcon
-                        @click.stop="cloneRow()"
+                                @click.stop="
+                                    openConfirmationModal(
+                                        t(`All it's properties will be copied`),
+                                        t('Do you want to clone this item?'),
+                                        () => cloneItem(row.id)
+                                    )
+                                "
                                 class="q-ml-sm"
                                 color="primary"
                                 name="vn:clone"
                                 size="sm"
                             >
                                 <QTooltip>
-                            {{ t('Preview') }}
+                                    {{ t('Clone') }}
                                 </QTooltip>
                             </QIcon>
                             <QIcon
@@ -534,16 +553,19 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                                 name="preview"
                                 size="sm"
                             >
-                        <QTooltip>
+                                <QTooltip class="text-no-wrap">
                                     {{ t('Preview') }}
                                 </QTooltip>
                             </QIcon>
                         </QTd>
                     </template>
                 </QTable>
+            </template>
+        </VnPaginate>
+
         <QPageSticky :offset="[20, 20]">
             <QBtn @click="redirectToItemCreate()" color="primary" fab icon="add" />
-            <QTooltip>
+            <QTooltip class="text-no-wrap">
                 {{ t('New item') }}
             </QTooltip>
         </QPageSticky>
@@ -553,4 +575,8 @@ onUnmounted(() => (stateStore.rightDrawer = false));
 <i18n>
 es:
     New item: Nuevo artículo
+    All it's properties will be copied: Todas sus propiedades serán copiadas
+    Do you want to clone this item?: ¿Desea clonar este artículo?
+    Clone: Clonar
+    Preview: Vista previa
 </i18n>