dlearn-admin/src/views/Videos.vue

<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>