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,23 +447,29 @@ 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">
-        <QTable
+        <VnPaginate
-            :rows="rows"
+            data-key="ItemList"
-            :columns="columns"
+            url="Items/filter"
-            row-key="id"
+            :order="['isActive DESC', 'name', 'id']"
-            :pagination="{ rowsPerPage: 0 }"
+            :limit="12"
-            class="full-width q-mt-md"
+            :offset="50"
-            :visible-columns="visibleColumns"
+            auto-load
-            :no-data-label="t('globals.noResults')"
-            @row-click="(_, row) => redirectToItemSummary(row.id)"
         >
-            <!-- <template #top-row="{ cols }">
+            <template #body="{ rows }">
+                <QTable
+                    :rows="rows"
+                    :columns="columns"
+                    row-key="id"
+                    :pagination="{ rowsPerPage: 0 }"
+                    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 }">
                 <QTr>
                     <QTd />
                     <QTd
@@ -475,75 +488,84 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                     </QTd>
                 </QTr>
             </template> -->
-            <template #body-cell-picture="{ row }">
+                    <template #body-cell-picture="{ row }">
-                <QTd>
+                        <QTd>
-                    <QImg
+                            <QImg
-                        :src="`/api/Images/catalog/50x50/${row.id}/download?access_token=${token}`"
+                                :src="`/api/Images/catalog/50x50/${row.id}/download?access_token=${token}`"
-                        spinner-color="primary"
+                                spinner-color="primary"
-                        :ratio="1"
+                                :ratio="1"
-                        height="50px"
+                                height="50px"
-                        width="50px"
+                                width="50px"
-                        class="image"
+                                class="image"
-                    />
+                            />
-                </QTd>
+                        </QTd>
+                    </template>
+                    <template #body-cell-id="{ row }">
+                        <QTd @click.stop>
+                            <QBtn flat color="primary">
+                                {{ row.id }}
+                            </QBtn>
+                            <ItemDescriptorProxy :id="row.id" />
+                        </QTd>
+                    </template>
+                    <template #body-cell-userName="{ row }">
+                        <QTd @click.stop>
+                            <QBtn flat color="primary" dense>
+                                {{ row.userName }}
+                            </QBtn>
+                            <WorkerDescriptorProxy :id="row.buyerFk" />
+                        </QTd>
+                    </template>
+                    <template #body-cell-description="{ row }">
+                        <QTd class="col">
+                            <span>{{ row.name }} {{ row.subName }}</span>
+                            <fetched-tags :item="row" :max-length="6" />
+                        </QTd>
+                    </template>
+                    <template #body-cell-isActive="{ row }">
+                        <QTd>
+                            <QCheckbox :model-value="!!row.isActive" disable />
+                        </QTd>
+                    </template>
+                    <template #body-cell-actions="{ row }">
+                        <QTd>
+                            <QIcon
+                                @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('Clone') }}
+                                </QTooltip>
+                            </QIcon>
+                            <QIcon
+                                @click.stop="viewSummary(row.id, ItemSummary)"
+                                class="q-ml-md"
+                                color="primary"
+                                name="preview"
+                                size="sm"
+                            >
+                                <QTooltip class="text-no-wrap">
+                                    {{ t('Preview') }}
+                                </QTooltip>
+                            </QIcon>
+                        </QTd>
+                    </template>
+                </QTable>
             </template>
-            <template #body-cell-id="{ row }">
+        </VnPaginate>
-                <QTd @click.stop>
+
-                    <QBtn flat color="primary">
-                        {{ row.id }}
-                    </QBtn>
-                    <ItemDescriptorProxy :id="row.id" />
-                </QTd>
-            </template>
-            <template #body-cell-userName="{ row }">
-                <QTd @click.stop>
-                    <QBtn flat color="primary" dense>
-                        {{ row.userName }}
-                    </QBtn>
-                    <WorkerDescriptorProxy :id="row.buyerFk" />
-                </QTd>
-            </template>
-            <template #body-cell-description="{ row }">
-                <QTd class="col">
-                    <span>{{ row.name }} {{ row.subName }}</span>
-                    <fetched-tags :item="row" :max-length="6" />
-                </QTd>
-            </template>
-            <template #body-cell-isActive="{ row }">
-                <QTd>
-                    <QCheckbox :model-value="!!row.isActive" disable />
-                </QTd>
-            </template>
-            <template #body-cell-actions="{ row }">
-                <QTd>
-                    <QIcon
-                        @click.stop="cloneRow()"
-                        class="q-ml-sm"
-                        color="primary"
-                        name="vn:clone"
-                        size="sm"
-                    >
-                        <QTooltip>
-                            {{ t('Preview') }}
-                        </QTooltip>
-                    </QIcon>
-                    <QIcon
-                        @click.stop="viewSummary(row.id, ItemSummary)"
-                        class="q-ml-md"
-                        color="primary"
-                        name="preview"
-                        size="sm"
-                    >
-                        <QTooltip>
-                            {{ t('Preview') }}
-                        </QTooltip>
-                    </QIcon>
-                </QTd>
-            </template>
-        </QTable>
         <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>