forked from verdnatura/salix-front
Add pagination and table actions
This commit is contained in:
parent
4da540fc9c
commit
64ff5e4446
|
|
@ -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,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
|
||||
: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')"
|
||||
@row-click="(_, row) => redirectToItemSummary(row.id)"
|
||||
<VnPaginate
|
||||
data-key="ItemList"
|
||||
url="Items/filter"
|
||||
:order="['isActive DESC', 'name', 'id']"
|
||||
:limit="12"
|
||||
:offset="50"
|
||||
auto-load
|
||||
>
|
||||
<!-- <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 }">
|
||||
<QTd>
|
||||
<QImg
|
||||
:src="`/api/Images/catalog/50x50/${row.id}/download?access_token=${token}`"
|
||||
spinner-color="primary"
|
||||
:ratio="1"
|
||||
height="50px"
|
||||
width="50px"
|
||||
class="image"
|
||||
/>
|
||||
</QTd>
|
||||
<template #body-cell-picture="{ row }">
|
||||
<QTd>
|
||||
<QImg
|
||||
:src="`/api/Images/catalog/50x50/${row.id}/download?access_token=${token}`"
|
||||
spinner-color="primary"
|
||||
:ratio="1"
|
||||
height="50px"
|
||||
width="50px"
|
||||
class="image"
|
||||
/>
|
||||
</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 }">
|
||||
<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>
|
||||
</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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue