boursecu_user/src/views/base/home/desktop/components/DesktopQuickActionsGrid.vue

<script setup lang="ts">
import { computed } from 'vue'
import router from '@/router'
import { useSettingsStore } from '@/store/settingsStore'
import { getBoursecuActionIconSrc } from '@/utils/config'
import HomeQuickActionBox from '../../components/HomeQuickActionBox.vue'
import DesktopHomeCard from './DesktopHomeCard.vue'
import { boursecuQuickActions } from '../../layouts/configs/boursecuQuickActions'
import type { HomeQuickActionItem } from '../../layouts/types'

const props = withDefaults(
  defineProps<{
    actions?: HomeQuickActionItem[]
  }>(),
  {
    actions: undefined,
  },
)

const settingsStore = useSettingsStore()

const resolvedActions = computed(() => {
  if (props.actions) return props.actions

  const list = [...boursecuQuickActions]
  if (settingsStore.isSettingTruthy('enable_product_funds')) {
    list.push({
      id: 'piggy',
      label: 'قلک',
      icon: 'vuesax-linear:safe-home',
      iconSrc: getBoursecuActionIconSrc('piggy'),
      route: { name: 'piggy' },
    })
  }
  return list
})

function handleClick(action: HomeQuickActionItem) {
  if (action.handler) {
    action.handler()
    return
  }
  if (action.route) {
    router.push(action.route)
  }
}
</script>

<template>
  <DesktopHomeCard title="دسترسی سریع">
    <div class="grid grid-cols-2 gap-3 sm:grid-cols-3 xl:grid-cols-6">
      <HomeQuickActionBox
        v-for="action in resolvedActions"
        :key="action.id"
        :action="action"
        class="home-desktop-quick-action"
        @click="handleClick(action)"
      />
    </div>
  </DesktopHomeCard>
</template>

<style scoped>
:deep(.home-desktop-quick-action) {
  min-height: 108px;
}
</style>