...

src/views/pages/Belonging/ListBelongings.vue

@@ -4,6 +4,7 @@ import { FilterMatchMode } from '@primevue/core/api';
 import { useToast } from 'primevue/usetoast';
 import { onMounted, ref } from 'vue';
 import { BelongingService } from '@/service/BelongingService';
+import { useRouter } from 'vue-router';
 
 onMounted(() => {
     BelongingService.getAllBelongings().then((data) => (belongings.value = data));
@@ -15,22 +16,12 @@ const belongings = ref();
 const productDialog = ref(false);
 const deleteProductDialog = ref(false);
 const deleteProductsDialog = ref(false);
-const product = ref({});
+const belonging = ref({});
 const selectedBelongings = ref();
 const filters = ref({
     global: { value: null, matchMode: FilterMatchMode.CONTAINS }
 });
 const submitted = ref(false);
-const statuses = ref([
-    { label: 'INSTOCK', value: 'instock' },
-    { label: 'LOWSTOCK', value: 'lowstock' },
-    { label: 'OUTOFSTOCK', value: 'outofstock' }
-]);
-
-function formatCurrency(value) {
-    if (value) return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
-    return;
-}
 
 function openNew() {
     product.value = {};
@@ -65,9 +56,10 @@ function saveProduct() {
     }
 }
 
-function editProduct(prod) {
-    product.value = { ...prod };
-    productDialog.value = true;
+const router = useRouter();
+
+function editBelonging(belongingId) {
+    router.push('/belonging/edit-belonging/' + belongingId);
 }
 
 function confirmDeleteProduct(prod) {
@@ -112,7 +104,7 @@ function confirmDeleteSelected() {
 }
 
 function deleteSelectedBelongings() {
-    products.value = products.value.filter((val) => !selectedBelongings.value.includes(val));
+    belonging.value = belonging.value.filter((val) => !selectedBelongings.value.includes(val));
     deleteProductsDialog.value = false;
     selectedBelongings.value = null;
     toast.add({ severity: 'success', summary: 'Successful', detail: 'Products Deleted', life: 3000 });
@@ -144,8 +136,7 @@ function getStatusLabel(status) {
                     <Button label="حذف دارایی" icon="pi pi-trash" severity="secondary" @click="confirmDeleteSelected" :disabled="!selectedBelongings || !selectedBelongings.length" />
                 </template>
 
-                <template #end>
-                </template>
+                <template #end> </template>
             </Toolbar>
 
             <DataTable
@@ -175,20 +166,20 @@ function getStatusLabel(status) {
                 <Column selectionMode="multiple" style="width: 3rem" :exportable="false"></Column>
                 <Column header="تصویر">
                     <template #body="slotProps">
-                        <img :src="`https://primefaces.org/cdn/primevue/images/product/${slotProps.data.image}`" :alt="slotProps.data.image" class="rounded" style="width: 64px" />
+                        <img :src="`${slotProps.data.mainImageUrl}`" :alt="slotProps.data.name" class="rounded" style="width: 64px" />
                     </template>
                 </Column>
                 <Column field="belongingCode" header="کد" style="min-width: 12rem"></Column>
                 <Column field="name" header="نام" sortable style="min-width: 16rem"></Column>
                 <Column field="category" header="دسته بندی" sortable style="min-width: 10rem">
                     <template #body="slotProps">
-                        {{ slotProps.data.nativeName }}
+                        {{ slotProps.data.category.nativeName }}
                     </template>
                 </Column>
                 <Column :exportable="false" style="min-width: 12rem">
                     <template #body="slotProps">
-                        <Button icon="pi pi-pencil" outlined rounded class="mr-2" @click="editProduct(slotProps.data)" />
-                        <Button icon="pi pi-trash" outlined rounded severity="danger" @click="confirmDeleteProduct(slotProps.data)" />
+                        <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>
@@ -196,7 +187,7 @@ function getStatusLabel(status) {
 
         <Dialog v-model:visible="productDialog" :style="{ width: '450px' }" header="Product Details" :modal="true">
             <div class="flex flex-col gap-6">
-                <img v-if="product.image" :src="`https://primefaces.org/cdn/primevue/images/product/${product.image}`" :alt="product.image" class="block m-auto pb-4" />
+                <img v-if="belonging.image" :src="`https://primefaces.org/cdn/primevue/images/product/${product.image}`" :alt="product.image" class="block m-auto pb-4" />
                 <div>
                     <label for="name" class="block font-bold mb-3">Name</label>
                     <InputText id="name" v-model.trim="product.name" required="true" autofocus :invalid="submitted && !product.name" fluid />
@@ -255,13 +246,13 @@ function getStatusLabel(status) {
             <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
+                    >Are you sure you want to delete <b>{{ product.name }}</b
+                    >?</span
                 >
             </div>
             <template #footer>
-                <Button label="No" icon="pi pi-times" text @click="deleteProductDialog = false" />
-                <Button label="Yes" icon="pi pi-check" @click="deleteProduct" />
+                <Button label="خیر" icon="pi pi-times" text @click="deleteProductDialog = false" />
+                <Button label="بله" icon="pi pi-check" @click="deleteProduct" />
             </template>
         </Dialog>