Add pagination and table actions

This commit is contained in:
William Buezas 2024-04-08 11:40:44 -03:00
parent 4da540fc9c
commit 64ff5e4446
1 changed files with 119 additions and 93 deletions

View File

@ -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 token = session.getToken();
const { getTokenMultimedia } = useSession();
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 = () => {
console.log('cloneRow');
const cloneItem = async (itemFk) => {
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>