mohadese namavar
122 lines
3.3 KiB
Vue
122 lines
3.3 KiB
Vue
<template>
|
|
<NuxtLayout :name="device" :config="config">
|
|
<main class="panel-factors">
|
|
<div>
|
|
<form>
|
|
<i class="isax isax-search-normal-1" />
|
|
<input v-model="filters.q" :placeholder="$t('search')" />
|
|
<Button icon="isax isax-setting-4" severity="secondary" text rounded @click="showFilters" />
|
|
</form>
|
|
<aside v-if="lastFactors?.length > 0">
|
|
<h2>{{ $t("recentFactors") }}</h2>
|
|
<ul>
|
|
<li v-for="(factor, i) in lastFactors" :key="i">
|
|
<PanelRecentFactorItem :data="factor" />
|
|
</li>
|
|
</ul>
|
|
</aside>
|
|
</div>
|
|
<div>
|
|
<PanelSalesFactor :data="factor" />
|
|
</div>
|
|
</main>
|
|
</NuxtLayout>
|
|
</template>
|
|
|
|
<script setup>
|
|
const { device, dialog, popup, t } = inject('service');
|
|
const config = reactive({
|
|
desktop: { toolbar: true }, mobile: { header: { back: true, title: t('factors') } },
|
|
})
|
|
|
|
const { meta, query } = useRoute()
|
|
const { page = 1 } = query
|
|
|
|
|
|
const lastFactors = ref([])
|
|
const factor = ref([])
|
|
const filters = ref({});
|
|
|
|
const route = useRoute()
|
|
const id = route.params.id || 1
|
|
|
|
const { status, data, error } = await useFetch(`/api/orders/id/${id}`, {
|
|
headers: {
|
|
Authorization: useCookie('token')
|
|
}
|
|
})
|
|
|
|
if (status.value == 'success') {
|
|
lastFactors.value = data.value.lastFactors
|
|
factor.value = data.value.factor
|
|
|
|
} else throw createError(error.value)
|
|
|
|
const component = resolveComponent('PanelFactorFilters')
|
|
|
|
const showFilters = (e) => {
|
|
if (device.value == 'desktop') {
|
|
popup.value.is = component
|
|
popup.value.toggle(e)
|
|
} else if (device.value == 'mobile')
|
|
dialog.show(component)
|
|
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.panel-factors {
|
|
@apply w-full lg:container relative;
|
|
@apply pt-8 pb-20 lg:pt-14 lg:pb-[7.5rem] lg:min-h-screen;
|
|
|
|
&>div:nth-of-type(1) {
|
|
@apply flex flex-col md:flex-row justify-between gap-6 max-lg:px-6;
|
|
|
|
&>form {
|
|
@apply w-full md:max-w-[38rem] h-[2.9rem] bg-[#FAFAFA] rounded-[0.6rem] flex items-center pr-4;
|
|
|
|
i {
|
|
@apply text-lg;
|
|
}
|
|
|
|
input {
|
|
@apply h-full px-2 bg-transparent grow outline-none;
|
|
|
|
&::placeholder {
|
|
@apply text-neutral-400 text-lg font-vazir;
|
|
}
|
|
}
|
|
|
|
&>button {
|
|
@apply h-full;
|
|
|
|
.p-button-icon {
|
|
@apply text-2xl;
|
|
}
|
|
}
|
|
}
|
|
|
|
&>aside {
|
|
@apply max-w-full w-max flex flex-col gap-[1.1rem] lg:gap-12;
|
|
|
|
h2 {
|
|
@apply text-[#333333] text-base lg:text-xl font-bold font-vazir max-lg:pr-2.5;
|
|
}
|
|
|
|
ul {
|
|
@apply flex justify-around flex-wrap md:flex-col gap-3 p-3 bg-[#FAFAFA] rounded-[0.6rem] overflow-hidden;
|
|
}
|
|
}
|
|
}
|
|
|
|
&>div:nth-of-type(2) {
|
|
@apply max-w-full overflow-x-auto left-[20.8rem] right-6 lg:left-[19.3rem] lg:right-0 md:absolute top-full md:top-[5.3rem] lg:pb-4;
|
|
@apply p-1 mt-[2.6rem];
|
|
|
|
&::-webkit-scrollbar {
|
|
@apply max-lg:hidden;
|
|
}
|
|
}
|
|
}
|
|
</style>
|