init git

2024-06-16 00:22:14 +04:30
commit ec84dfd222
322 changed files with 77942 additions and 0 deletions
@@ -0,0 +1,156 @@
+<template>
+    <DataTable :value="muchSell" class="seller-best-selling" :responsiveLayout="rl">
+        <template #header>
+            <h2>{{ $t('bestsellingPorducts') }}</h2>
+            <Dropdown v-model="period" :options="options" optionValue="value" optionLabel="label">
+                <template #dropdownicon>
+                    <i class="isax isax-arrow-bottom" />
+                </template>
+            </Dropdown>
+        </template>
+        <Column v-for="(col, i) in columns[device]" :key="i" v-bind="col"
+            class="!text-center [&:first-child_button]:hidden">
+            <template #body="{ data, field }">
+                <img v-if="device == 'desktop' && i === 1" :src="field(data)" alt="">
+                <template v-else>
+                    <span>{{ field(data) }}</span>
+                    <Button v-if="device == 'mobile'" :label="$t('moreDetails')" icon="isax isax-arrow-left-2" link  @click="show(data)"/>
+                </template>
+            </template>
+        </Column>
+
+        <template #empty>
+            <p>{{ $t('notFound') }}</p>
+        </template>
+    </DataTable>
+</template>
+
+<script setup>
+import PanelSellerDialogDetailsBestSelling from './dialog/details/BestSelling.vue'
+
+const { device, dialog, t } = inject('service')
+const rl = computed(() => device.value == 'mobile' ? 'stack' : '')
+
+const { muchSell = [] } = inject('data')
+
+const columns = reactive({
+    desktop: [
+        { header: t('row'), field: (data) => muchSell.indexOf(data) + 1 },
+        { header: t('image'), field: (data) => data.product.coverImage },
+        { header: t('productTitle'), field: (data) => data.product.title },
+        { header: t('salesPrice'), field: (data) => numberFormat(data.total) + ' ' + t('priceUnit') },
+        { header: t('inventory'), field: (data) => data.quantity },
+    ],
+    mobile: [
+        { field: (data) => data.product.title },
+        { field: (data) => numberFormat(data.total) + ' ' + t('priceUnit') },
+    ]
+})
+
+const options = reactive([
+    { label: t('thisWeek'), value: 'weekly' }
+])
+const period = ref('weekly')
+
+const show = (data) => {
+    dialog.show(PanelSellerDialogDetailsBestSelling, data)
+}
+
+const numberFormat = (number) =>
+    new Intl.NumberFormat('fa-IR', { maximumSignificantDigits: 3 }).format(number)
+</script>
+
+<style lang="scss">
+.seller-best-selling {
+    @apply rtl border-2 border-[#E5E5E5] rounded-[0.6rem] overflow-hidden w-full;
+
+    .p-datatable-header {
+        @apply flex items-center justify-between bg-white pt-3 pl-3 pr-[1.1rem] pb-[1.1rem] lg:py-2.5 lg:px-5;
+
+        h2 {
+            @apply text-[#333333] text-sm lg:text-lg font-medium font-vazir;
+        }
+
+        .p-dropdown {
+            @apply w-[5.6rem] h-[2.4rem] lg:w-[6.5rem] lg:h-[2.6rem] bg-[#F2F2F2] rounded-[0.6rem] text-[#5D5D5D] border-none;
+
+            .p-dropdown-trigger {
+                @apply w-max translate-x-2;
+
+                i {
+                    @apply text-base lg:text-lg;
+                }
+            }
+
+
+            span {
+                @apply p-3 h-max w-max pl-0 font-vazir text-xs lg:text-sm #{!important};
+            }
+        }
+    }
+
+    .p-datatable-wrapper {
+        @apply max-lg:overflow-hidden #{!important};
+
+        .p-datatable-table {
+            @apply border-separate border-spacing-y-[0.8rem] px-[1.1rem] py-3;
+
+            .p-datatable-thead {
+                @apply w-full h-[3.1rem] lg:px-5 max-lg:hidden;
+
+                th {
+                    @apply text-[#5D5D5D] text-base font-normal font-vazir bg-[#F2F2F2];
+                    @apply first:rounded-r-[0.6rem] last:rounded-l-[0.6rem];
+                }
+            }
+
+            .p-datatable-tbody {
+                @apply lg:translate-y-1.5;
+
+                tr {
+                    @apply w-full rounded-[0.6rem] bg-transparent shadow-[0px_0px_6px_#0000001f];
+
+                    td {
+                        @apply max-lg:w-full max-lg:px-3 text-right lg:text-center;
+                        @apply lg:first:rounded-r-[0.6rem] lg:last:rounded-l-[0.6rem] py-0 lg:h-[4.5rem];
+
+                        &>span {
+                            @apply max-lg:py-3 min-h-[3.8rem] flex items-center text-xs lg:text-base text-[#333333] font-vazir;
+                        }
+
+                        img {
+                            @apply w-[3.75rem] h-[3.75rem];
+                        }
+
+                        @media(max-width: 1024px) {
+                            &>button {
+                                @apply -m-3 mr-auto #{!important};
+
+                                .p-button-label {
+                                    @apply text-xs font-medium font-vazir whitespace-nowrap #{!important};
+                                }
+
+                                .p-button-icon {
+                                    @apply text-sm mr-1;
+                                }
+                            }
+
+                            &:first-child span {
+                                @apply w-full border-b py-3;
+                            }
+
+                            .p-column-title {
+                                @apply hidden #{!important};
+                            }
+                        }
+                    }
+                }
+
+                .p-datatable-emptymessage p {
+                    @apply lg:h-[3.8rem] flex justify-center items-center
+                }
+            }
+        }
+    }
+}
+</style>