250 lines
9.6 KiB
Vue
250 lines
9.6 KiB
Vue
<script setup>
|
|
import { ProductService } from '@/service/ProductService';
|
|
import { FilterMatchMode } from '@primevue/core/api';
|
|
import { useToast } from 'primevue/usetoast';
|
|
import { onMounted, ref, watch } from 'vue';
|
|
import { BelongingService } from '@/service/BelongingService';
|
|
import { useRouter, useRoute } from 'vue-router';
|
|
import Chip from 'primevue/chip';
|
|
import InputIcon from 'primevue/inputicon';
|
|
import IconField from 'primevue/iconfield';
|
|
import LoadingCheck from '@/components/LoadingCheck.vue';
|
|
|
|
onMounted(() => {
|
|
loadData();
|
|
});
|
|
|
|
const toast = useToast();
|
|
const dt = ref();
|
|
const belongings = ref();
|
|
const productDialog = ref(false);
|
|
const deleteProductDialog = ref(false);
|
|
const deleteProductsDialog = ref(false);
|
|
const belonging = ref({});
|
|
const selectedBelongings = ref();
|
|
const filters = ref({
|
|
global: { value: null, matchMode: FilterMatchMode.CONTAINS }
|
|
});
|
|
const submitted = ref(false);
|
|
|
|
function hideDialog() {
|
|
productDialog.value = false;
|
|
submitted.value = false;
|
|
}
|
|
|
|
const router = useRouter();
|
|
|
|
function editBelonging(belongingId) {
|
|
router.push('/belonging/edit-belonging/' + belongingId);
|
|
}
|
|
|
|
const route = useRoute();
|
|
const searchPhrase = ref(route.query.query);
|
|
const page = ref(Number(route.query.page) || 1);
|
|
const per_page = ref(Number(route.query.per_page) || 20);
|
|
const totalCount = ref(0);
|
|
const pagesCount = ref(0);
|
|
|
|
let searchTimeout;
|
|
|
|
// Update your search watcher
|
|
watch(searchPhrase, (newPhrase, oldPhrase) => {
|
|
if (newPhrase !== oldPhrase) {
|
|
// Debounce search to avoid too many requests
|
|
if (searchTimeout) clearTimeout(searchTimeout);
|
|
searchTimeout = setTimeout(() => {
|
|
router.push({
|
|
query: {
|
|
...route.query,
|
|
query: newPhrase || undefined,
|
|
page: 1 // Reset to first page on new search
|
|
}
|
|
});
|
|
}, 300);
|
|
}
|
|
});
|
|
|
|
watch(
|
|
() => route.query,
|
|
() => {
|
|
page.value = Number(route.query.page) || 1;
|
|
per_page.value = Number(route.query.per_page) || 20;
|
|
searchPhrase.value = route.query.query || '';
|
|
loadData();
|
|
},
|
|
{ deep: true }
|
|
);
|
|
const handleRemoveSearch = () => {
|
|
removeFromQuery('searchPhrase'); // Ensure 'searchPhrase' is the correct key
|
|
searchPhrase.value = '';
|
|
};
|
|
|
|
const removeFromQuery = (queryToRemove) => {
|
|
const newQuery = { ...route.query };
|
|
|
|
delete newQuery[queryToRemove];
|
|
|
|
router.replace({ query: newQuery }).catch((err) => {
|
|
if (err.name !== 'NavigationDuplicated') {
|
|
console.error(err);
|
|
}
|
|
});
|
|
};
|
|
|
|
const onPageChange = (event) => {
|
|
const newPage = event.page + 1;
|
|
const newPerPage = event.rows;
|
|
|
|
if (page.value !== newPage || per_page.value !== newPerPage) {
|
|
router.push({
|
|
query: {
|
|
...route.query,
|
|
page: newPage,
|
|
per_page: newPerPage
|
|
}
|
|
});
|
|
}
|
|
};
|
|
|
|
const loadData = () => {
|
|
BelongingService.searchBelongings(route.query)
|
|
.then((response) => {
|
|
console.log('response', response);
|
|
belongings.value = response.belongings || response;
|
|
totalCount.value = response.totalCount || response.length || 0;
|
|
pagesCount.value = Math.ceil(totalCount.value / per_page.value);
|
|
})
|
|
.catch((error) => {
|
|
toast.add({ severity: 'error', summary: 'Error', detail: 'Failed to load data', life: 3000 });
|
|
console.error('Error loading data:', error);
|
|
});
|
|
};
|
|
|
|
const loading = ref(false);
|
|
const indexingFinished = ref(false);
|
|
const indexingMessage = ref('در حال ایندکس...');
|
|
const animationKey = ref(0);
|
|
|
|
// Function to handle indexing
|
|
const indexBelongings = async () => {
|
|
loading.value = true;
|
|
indexingFinished.value = false;
|
|
|
|
try {
|
|
// Your indexing logic here
|
|
// await new Promise((resolve) => setTimeout(resolve, 2000)); // Simulate API call
|
|
await BelongingService.indexBelongings();
|
|
// When indexing completes
|
|
indexingFinished.value = true;
|
|
indexingMessage.value = 'ایندکس با موفقیت انجام شد';
|
|
} catch (error) {
|
|
indexingMessage.value = 'خطا در ایندکس';
|
|
} finally {
|
|
// Reset after some time
|
|
setTimeout(() => {
|
|
loading.value = false;
|
|
animationKey.value++; // Force re-render of animation
|
|
}, 3000);
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<div class="card">
|
|
<Toolbar class="mb-6">
|
|
<template #start>
|
|
<Button label="ساخت دارایی جدید" icon="pi pi-plus" severity="secondary" class="mr-2 mx-3" @click="router.push('/belonging/create-belonging')" />
|
|
<Button @click="indexBelongings" :disabled="loading" severity="secondary mx-3" class="indexing-button">
|
|
<div class="button-content">
|
|
<div v-if="!loading">ایندکس کردن محصولات</div>
|
|
<div v-else class="loading-content flex">
|
|
<LoadingCheck :key="animationKey" :is-complete="indexingFinished" />
|
|
<Transition enter-active-class="animate__animated animate__fadeIn animate__fast" leave-active-class="animate__animated animate__fadeOut animate__fast" mode="out-in">
|
|
<div :key="indexingMessage">{{ indexingMessage }}</div>
|
|
</Transition>
|
|
</div>
|
|
</div>
|
|
</Button>
|
|
</template>
|
|
|
|
<template #end> </template>
|
|
</Toolbar>
|
|
|
|
<DataTable
|
|
ref="dt"
|
|
v-model:selection="selectedBelongings"
|
|
:value="belongings"
|
|
dataKey="id"
|
|
:paginator="true"
|
|
:rows="per_page"
|
|
:filters="filters"
|
|
:total-records="totalCount"
|
|
:current-page="page - 1"
|
|
@page="onPageChange($event)"
|
|
paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
|
|
:rowsPerPageOptions="[20, 40, 80]"
|
|
currentPageReportTemplate="نمایش {first} تا {last} از {totalRecords} دارایی"
|
|
>
|
|
<template #header>
|
|
<div class="flex flex-wrap gap-2 items-center justify-start">
|
|
<h4 class="m-0">مدیریت اموال</h4>
|
|
<IconField>
|
|
<InputIcon>
|
|
<i class="pi pi-search" />
|
|
</InputIcon>
|
|
<InputText v-model="searchPhrase" placeholder="جستجو..." />
|
|
</IconField>
|
|
</div>
|
|
<Chip v-if="searchPhrase" class="mx-2" :label="searchPhrase" removable @remove="handleRemoveSearch" />
|
|
</template>
|
|
|
|
<Column selectionMode="multiple" style="width: 3rem" :exportable="false"></Column>
|
|
<Column header="تصویر">
|
|
<template #body="slotProps">
|
|
<img :src="`${slotProps.data.imageUrl}`" :alt="slotProps.data.name" class="rounded" style="max-width: 64px" />
|
|
</template>
|
|
</Column>
|
|
<Column field="belongingCode" header="کد" style="min-width: 4rem"></Column>
|
|
<Column field="name" header="نام" sortable style="min-width: 16rem"></Column>
|
|
<Column field="category" header="دسته بندی" sortable style="min-width: 6rem">
|
|
<template #body="slotProps">
|
|
{{ slotProps.data.category?.nativeName || slotProps.data.nativeCategory }}
|
|
</template>
|
|
</Column>
|
|
<Column :exportable="false" style="min-width: 12rem">
|
|
<template #body="slotProps">
|
|
<Button icon="pi pi-pencil" outlined rounded class="mr-2 mx-3" @click="editBelonging(slotProps.data._id)" />
|
|
<Button icon="pi pi-trash" outlined rounded severity="danger" class="mx-3" @click="confirmDeleteProduct(slotProps.data)" />
|
|
</template>
|
|
</Column>
|
|
</DataTable>
|
|
</div>
|
|
|
|
<Dialog v-model:visible="deleteProductDialog" :style="{ width: '450px' }" header="Confirm" :modal="true">
|
|
<div class="flex items-center gap-4">
|
|
<i class="pi pi-exclamation-triangle !text-3xl" />
|
|
<span v-if="product"
|
|
>Are you sure you want to delete <b>{{ product.name }}</b
|
|
>?</span
|
|
>
|
|
</div>
|
|
<template #footer>
|
|
<Button label="خیر" icon="pi pi-times" text @click="deleteProductDialog = false" />
|
|
<Button label="بله" icon="pi pi-check" @click="deleteProduct" />
|
|
</template>
|
|
</Dialog>
|
|
|
|
<Dialog v-model:visible="deleteProductsDialog" :style="{ width: '450px' }" header="Confirm" :modal="true">
|
|
<div class="flex items-center gap-4">
|
|
<i class="pi pi-exclamation-triangle !text-3xl" />
|
|
<span v-if="product">Are you sure you want to delete the selected products?</span>
|
|
</div>
|
|
<template #footer>
|
|
<Button label="No" icon="pi pi-times" text @click="deleteProductsDialog = false" />
|
|
<Button label="Yes" icon="pi pi-check" text @click="deleteselectedBelongings" />
|
|
</template>
|
|
</Dialog>
|
|
</div>
|
|
</template>
|