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

<template>
    <DataTable :expandedRows="[]" :value="pendingProducts" class="seller-upcoming" :responsiveLayout="rl">
        <template #header>
            <h2>{{ $t('upcomingShipments') }}</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="[&:first-child_button]:hidden">
            <template #body="{ data, field }">
                <span>{{ field(data) }}</span>
                <Button v-if="device == 'mobile'" :label="$t('moreDetails')" icon="isax isax-arrow-left-2"
                    link @click="show(data)"  />
            </template>
        </Column>
        <Column v-if="device == 'desktop'" expander />

        <template #expansion="{ data }">
            <ul>
                <li>
                    <span v-if="data.quantity > 1">
                        {{ data.quantity }}x
                    </span>
                    <img :src="data.product.coverImage">
                </li>
            </ul>
            <Button :label="$t('showFactor')" icon="isax isax-receipt-item" iconPos="right" link />
        </template>

        <template #empty>
            <p>{{ $t('notFound') }}</p>
        </template>
    </DataTable>
</template>

<script setup>
import PanelSellerDialogDetailsOrder from './dialog/details/Order.vue'

const { t, device, dialog } = inject('service')
const rl = computed(() => device.value == 'mobile' ? 'stack' : '')

const { pendingProducts = [] } = inject('data')

const columns = reactive({
    desktop: [
        { header: t('row'), field: (item) => pendingProducts.indexOf(item) + 1 },
        { header: t('purchaseDate'), field: (item) => new Date(item.orderDate).toLocaleDateString() },
        { header: t('postageDate'), field: (item) => new Date(item.sendDate).toLocaleDateString() },
        { header: t('price'), field: (item) => new Intl.NumberFormat('fa-IR', { maximumSignificantDigits: 3 }).format(item.price) },
    ],
    mobile: [
        { field: (item) => item.product.title },
        { field: (item) => new Date(item.sendDate).toLocaleDateString() },
    ]
})

const options = reactive([
    { label: t('thisWeek'), value: 'weekly' }
])
const period = ref('weekly')

const show = (data) => {
    dialog.show(PanelSellerDialogDetailsOrder, data)
}
</script>

<style lang="scss">
.seller-upcoming {
    @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] 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 max-lg:h-[7.5rem] bg-transparent relative #{!important};

                    &:not(.p-datatable-row-expansion)::after {
                        @apply content-['_'] absolute inset-x-0 z-0 max-lg:inset-y-0 lg:h-[3.8rem] rounded-[0.6rem];
                        @apply shadow-[0px_0px_6px_#0000001f];
                    }


                    td {
                        @apply max-lg:w-full max-lg:px-3 text-right last:text-left #{!important};
                        @apply lg:first:rounded-r-[0.6rem] lg:last:rounded-l-[0.6rem] py-0 align-top lg:border-none;

                        &>span {
                            @apply max-lg:py-3 min-h-[3.8rem] flex items-center text-xs lg:text-base text-[#333333] font-vazir;
                        }

                        .p-row-toggler {
                            @apply mt-3.5 z-10;
                        }

                        @media(max-width: 1024px) {
                            &>button {
                                @apply z-[1] -m-3 mr-auto #{!important};

                                .p-button-label {
                                    @apply text-xs font-medium font-vazir;
                                }

                                .p-button-icon {
                                    @apply text-sm mr-1;
                                }
                            }

                            &:first-child span {
                                @apply max-lg:w-full max-lg:border-b;
                            }

                            .p-column-title {
                                @apply hidden #{!important};
                            }
                        }

                    }


                    &.p-datatable-row-expansion {
                        @keyframes fade {
                            from {
                                opacity: 0;
                            }

                            to {
                                opacity: 1;
                            }
                        }

                        animation: fade 0.2s ease 0.1s forwards;
                        @apply opacity-0 -translate-y-3 shadow-none;

                        ul {
                            @apply flex items-center gap-[1.1rem] rtl h-[9.9rem] border-y border-[#E5E5E5];

                            li {
                                @apply flex flex-col items-center justify-end h-[7.3rem] gap-3;

                                span {
                                    @apply text-[#333333] text-base font-normal font-poppins
                                }

                                img {
                                    @apply w-20 h-20;
                                }
                            }
                        }

                        button {
                            @apply float-left;
                        }
                    }


                    &:has(+.p-datatable-row-expansion)::after {
                        @apply h-[17.5rem] transition-[height];
                    }

                }

                .p-datatable-emptymessage p {
                    @apply lg:h-[3.8rem] flex justify-center items-center
                }

            }
        }
    }
}
</style>