anahita-front/components/panel/seller/BestSelling.vue

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