boursecu_user/src/views/base/home/layouts/sections/BoursecuQuickActionsSection.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 { boursecuQuickActions } from '../configs/boursecuQuickActions'
import type { HomeQuickActionItem } from '../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>
  <div class="grid grid-cols-3 gap-3 mt-4">
    <HomeQuickActionBox
      v-for="action in resolvedActions"
      :key="action.id"
      :action="action"
      @click="handleClick(action)"
    />
  </div>
</template>