refactor: handle color badge

This commit is contained in:
Thanaphon Frappet 2024-11-08 11:13:18 +07:00
parent 1aaaa5f2a6
commit 9e70383d3b

View file

@ -1,12 +1,18 @@
<script lang="ts" setup>
import { QTableProps } from 'quasar';
import { QuotationPayload } from 'src/stores/quotations/types';
import { dateFormat } from 'src/utils/datetime';
import BadgeComponent from 'components/BadgeComponent.vue';
import KebabAction from 'components/shared/KebabAction.vue';
import { setLocale, calculateAge, dateFormat } from 'src/utils/datetime';
import useOptionStore from 'src/stores/options';
const optionStore = useOptionStore();
const hslaColors: Record<string, string> = {
Issued: '--orange-5-hsl',
Accepted: '--pink-6-hsl',
Expired: '--cyan-7-hsl',
PaymentInProcess: '--purple-7-hsl',
PaymentSuccess: '--orange-11-hsl',
ProcessComplete: '--blue-10-hsl',
};
const props = withDefaults(
defineProps<{
@ -35,7 +41,7 @@ function quotationStatus(value: string) {
if (value === 'Issued') return 'quotation.status.Issued';
if (value === 'Accepted') return 'quotation.status.Accepted';
if (value === 'Expired') return 'quotation.status.Expired';
if (value === 'PaymentInProcess') return 'quotation.status.PaymentInProcess';
if (value === 'PaymentInProcess') return 'quotation.status.Invoice';
if (value === 'PaymentSuccess') return 'quotation.status.PaymentSuccess';
if (value === 'ProcessComplete') return 'quotation.status.ProcessComplete';
return '';
@ -109,6 +115,7 @@ defineEmits<{
<q-td v-if="visibleColumns.includes('status')">
<BadgeComponent
:title="$t(quotationStatus(props.row.quotationStatus))"
:hsla-color="hslaColors[props.row.quotationStatus] || ''"
/>
</q-td>