Manager

Back Back Up Advanced Editor

{{ $t('settings.custom_fields.add_custom_field') }}
        </template>
      </BaseButton>
    </template>

<template #cell-model_type="{ row }">
        {{ getModelType(row.data.model_type) }}
      </template>

<template #cell-is_required="{ row }">
        <BaseBadge
          :bg-color="
            utils.getBadgeStatusColor(row.data.is_required ? 'YES' : 'NO')
              .bgColor
          "
          :color="
            utils.getBadgeStatusColor(row.data.is_required ? 'YES' : 'NO').color
          "
        >
          {{
            row.data.is_required
              ? $t('settings.custom_fields.yes')
              : $t('settings.custom_fields.no').replace('_', ' ')
          }}
        </BaseBadge>
      </template>

const modalStore = useModalStore()
const customFieldStore = useCustomFieldStore()
const userStore = useUserStore()

const utils = inject('utils')
const { t } = useI18n()

const table = ref(null)

const customFieldsColumns = computed(() => {
  return [
    {
      key: 'name',
      label: t('settings.custom_fields.name'),
      thClass: 'extra',
      tdClass: 'font-medium text-gray-900',
    },
    {
      key: 'model_type',
      label: t('settings.custom_fields.model'),
    },
    {
      key: 'type',
      label: t('settings.custom_fields.type'),
    },
    {
      key: 'is_required',
      label: t('settings.custom_fields.required'),
    },
    {
      key: 'actions',
      label: '',
      tdClass: 'text-right text-sm font-medium',
      sortable: false,
    },
  ]
})

async function fetchData({ page, filter, sort }) {
  let data = {
    orderByField: sort.fieldName || 'created_at',
    orderBy: sort.order || 'desc',
    page,
  }

let response = await customFieldStore.fetchCustomFields(data)

return {
    data: response.data.data,
    pagination: {
      totalPages: response.data.meta.last_page,
      currentPage: page,
      limit: 5,
      totalCount: response.data.meta.total,
    },
  }
}

function addCustomField() {
  modalStore.openModal({
    title: t('settings.custom_fields.add_custom_field'),
    componentName: 'CustomFieldModal',
    size: 'sm',
    refreshData: table.value && table.value.refresh,
  })
}

async function refreshTable() {
  table.value && table.value.refresh()
}

function getModelType(type) {
  switch (type) {
    case 'Customer':
      return t('settings.custom_fields.model_type.customer')
    case 'Invoice':
      return t('settings.custom_fields.model_type.invoice')
    case 'Estimate':
      return t('settings.custom_fields.model_type.estimate')
    case 'Expense':
      return t('settings.custom_fields.model_type.expense')
    case 'Payment':
      return t('settings.custom_fields.model_type.payment')
    default:
      return type
  }
}
</script>