78 lines
2.4 KiB
Vue
78 lines
2.4 KiB
Vue
<script setup lang="ts">
|
|
import { computed, onMounted, ref } from 'vue'
|
|
import { useRouter } from 'vue-router'
|
|
import { useCatalogStore } from '@/stores/catalog'
|
|
import { useCartStore } from '@/stores/cart'
|
|
import IconParLogo from '@/components/icons/IconParLogo.vue'
|
|
import IconFamBaftLogo from '@/components/icons/IconFamBaftLogo.vue'
|
|
import MobileCompanySelect from '@/views/companies/components/MobileCompanySelect.vue'
|
|
import DesktopHomeDashboard from '@/views/companies/components/DesktopHomeDashboard.vue'
|
|
import type { Company } from '@/types'
|
|
import { useGoBack } from '@/composables/useGoBack'
|
|
import PageSkeleton from '@/components/ui/PageSkeleton.vue'
|
|
|
|
const router = useRouter()
|
|
const { goBack } = useGoBack('/')
|
|
const catalogStore = useCatalogStore()
|
|
const cartStore = useCartStore()
|
|
const loading = ref(true)
|
|
|
|
const companies = computed(() => catalogStore.getActiveCompanies())
|
|
|
|
const displayMeta: Record<string, { description: string; logo: typeof IconParLogo }> = {
|
|
par: { description: 'تولید و عرضه انواع پارچه', logo: IconParLogo },
|
|
'fam-baft': { description: 'تولید و عرضه انواع پارچه', logo: IconFamBaftLogo },
|
|
}
|
|
|
|
onMounted(async () => {
|
|
await catalogStore.loadCompanies()
|
|
loading.value = false
|
|
})
|
|
|
|
function selectCompany(companyId: string) {
|
|
const company = catalogStore.getCompany(companyId)
|
|
if (!company) return
|
|
|
|
cartStore.selectCompany(company)
|
|
router.push(`/companies/${companyId}/catalogs`)
|
|
}
|
|
|
|
function cardVariant(slug: string) {
|
|
return slug === 'par' ? 'par' : 'fam-baft'
|
|
}
|
|
|
|
function companyDescription(company: Company) {
|
|
return displayMeta[company.slug]?.description ?? company.description
|
|
}
|
|
|
|
function companyLogo(slug: string) {
|
|
return displayMeta[slug]?.logo ?? IconParLogo
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div v-if="loading" class="page page__scroll">
|
|
<PageSkeleton variant="cards" />
|
|
</div>
|
|
<template v-else>
|
|
<MobileCompanySelect
|
|
class="mobile-only"
|
|
:companies="companies"
|
|
:card-variant="cardVariant"
|
|
:company-description="companyDescription"
|
|
:company-logo="companyLogo"
|
|
@select="selectCompany"
|
|
@back="goBack"
|
|
/>
|
|
|
|
<DesktopHomeDashboard
|
|
class="desktop-only"
|
|
:companies="companies"
|
|
:card-variant="cardVariant"
|
|
:company-description="companyDescription"
|
|
:company-logo="companyLogo"
|
|
@select="selectCompany"
|
|
/>
|
|
</template>
|
|
</template>
|