complete ticket section

2024-06-28 15:44:08 +03:30
parent 6b6b6d53aa
commit d2734cddee
14 changed files with 948 additions and 106 deletions
@@ -0,0 +1,195 @@
+<template>
+    <Panel :header="$t('مدیریت ویدیو ها')">
+ 
+      <DataTable :value="store.items">
+        <Column class="w-16" :header="$t('image')">
+          <template #body="{ data: { image } }">
+            <Avatar
+              :image="image"
+              size="large"
+              shape="circle"
+              class="transition-transform hover:scale-150"
+            />
+          </template>
+        </Column>
+        <Column field="name" :header="$t('name')" />
+        <Column
+          :field="({ categories }) => categories[0].name"
+          :header="$t('category')"
+        />
+  
+        <Column field="price" :header="$t('price')" />
+        <Column
+          :field="({ createdAt }) => jDate(createdAt)"
+          :header="$t('createdAt')"
+          class="w-28"
+        />
+        <Column
+          :field="({ updatedAt }) => jDate(updatedAt)"
+          :header="$t('updatedAt')"
+          class="w-32 text-center"
+        />
+        <Column field="averageRating" :header="$t('امتیاز')" />
+  
+        <Column :header="$t('options')" headerClass="w-32">
+          <template #body="{ data }">
+            <div class="flex justify-end">
+              <Button icon="pi pi-eye" rounded text severity="secondary" @click="show(data)" />
+              <Button
+                icon="pi pi-pencil"
+                rounded
+                text
+                severity="secondary"
+                @click="edit(data)"
+              />
+            
+          
+            </div>
+          </template>
+        </Column>
+  
+        <template #empty>
+          <p>{{ store.fetching ? $t("loading") : $t("emptyTable") }}</p>
+        </template>
+        <template #footer>
+          <Pagination :total="store.total" />
+        </template>
+      </DataTable>
+      <Galleria
+        v-model:visible="galleryVes"
+        :value="gallery"
+        :numVisible="5"
+        containerClass="w-1/2"
+        circular
+        fullScreen
+        showItemNavigators
+        :showThumbnailNavigators="false"
+      >
+        <template #item="{ item: { itemImageSrc, alt } }">
+          <img :src="itemImageSrc" :alt="alt" class="w-full block" />
+        </template>
+      </Galleria>
+      <Column headerClass="w-32">
+        <template #body="{ data }">
+          <div class="flex justify-end">
+            <Button
+              icon="pi pi-eye"
+              rounded
+              text
+              severity="secondary"
+              @click="show(data)"
+            />
+          </div>
+        </template>
+      </Column>
+    </Panel>
+  </template>
+  
+  <script setup>
+  import { useProductsStore } from '@/stores/products';
+  import { jDate } from '@/utils/jDate';
+  import { numberFormat } from '@/utils/numberFormat';
+  import { defineAsyncComponent, inject, onBeforeMount, ref, watchEffect } from 'vue';
+  import { useRoute, useRouter } from 'vue-router';
+  
+  const ProductForm = defineAsyncComponent(() => import('../components/ProductForm.vue'));
+  const ProductDetails = defineAsyncComponent(() => import('../components/ProductDetails.vue'));
+  
+  const { toast, dialog, confirm, t } = inject('service')
+  
+  var gallery = []
+  const galleryVes = ref(false)
+  const openGallery = (images =>{
+      gallery = []
+      images.map(image =>{
+          gallery.push({itemImageSrc:image, alt:"product"})
+      })
+      galleryVes.value = true
+  
+  })
+  const show = (product) => {
+      dialog.open(ProductDetails, {
+          props: { modal: true, closable: true, header: t('productDetails') },
+          data: {
+              product
+          }
+      });
+  }
+  const UserDetails = defineAsyncComponent(() => import('../components/UserDetails.vue'));
+  
+  const store = useProductsStore()
+  const route = useRoute()
+  const router = useRouter()
+
+  const edit = (data) =>{
+    router.push(`/videos/${data._id}`)
+  }
+  
+  
+  const remove = (data) => {
+      console.log('done', data._id)
+      confirm.require({
+          message: t('Are you sure you want to proceed?'),
+          header: t('Danger Zone'),
+          icon: 'pi pi-info-circle',
+          acceptClass: 'p-button-danger p-button-sm',
+          rejectClass: 'p-button-secondary p-button-outlined p-button-sm',
+          rejectLabel: t('cancel'),
+          acceptLabel: t('beOmitted'),
+          defaultFocus: 'reject',
+          accept: async () => {
+        const deleted = await store.delete(data._id)
+        console.log(deleted);
+        await store.index()
+          }
+  //             product.removing = true
+  
+  //             const { status, data } = await store.remove(product._id);
+  
+  //             product.removing = false
+  
+  //             if (status === 200)
+  //                 toast.add({
+  //                     severity: 'success', summary: t('successful'), detail: t('destroySuccessfully'), life: 3000
+  //                 });
+  //             else
+  //                 toast.add({
+  //                     severity: 'error', summary: t('error'), detail: data.msg, life: 3000
+  //                 });
+  
+  //         },
+     });
+  }
+  
+  
+  
+  
+  
+  watchEffect(async() => {
+      const { page = 1, pageSize = 10 } = route.query
+    await store.index(page, pageSize)
+  console.log(store.items[2].image);
+  console.log(String.fromCharCode(store.items[2].image)).join('');
+      // store.items.forEach((product) => {
+      //     product.status = { value: t('active'), severity: 'success' };
+      // })
+  
+  })
+  
+  const accepter = async (id,confirmToShow)=>{
+      const { status, data } = await store.confirm(id, {confirmToShow});
+  
+  
+  if (status === 200)
+      toast.add({
+          severity: 'success', summary: t('successful'), detail: t('destroySuccessfully'), life: 3000
+      });
+  else
+      toast.add({
+          severity: 'error', summary: t('error'), detail: data.msg, life: 3000
+      });
+  }
+  </script>
+  
+  <style lang="scss" scoped></style>
+