refactor: by data to itemCard

This commit is contained in:
Net 2024-09-06 11:11:28 +07:00
parent 9c8cae5273
commit 53ae34aaa8
2 changed files with 33 additions and 25 deletions

View file

@ -53,14 +53,17 @@ const utilsStore = useUtilsStore();
const modelCreateTypeBranch = ref<boolean>(false); const modelCreateTypeBranch = ref<boolean>(false);
const typeBranchItem = [ const typeBranchItem = [
{ {
icon: 'mdi-home-group', icon: 'material-symbols:home-work-outline',
text: 'Virtual Branch', text: t('branch.card.branchLabel'),
color: 'var(--blue-6)', iconColor: '--purple-8',
color: 'var(--purple-6-hsl)',
}, },
{ {
icon: 'mdi-home-group', icon: 'mdi-home-group',
text: 'Branch', text: t('branch.card.branchVirtual'),
color: 'var(--purple-6)', iconColor: '--blue-8',
color: 'var(--blue-6-hsl)',
}, },
]; ];
const holdDialog = ref(false); const holdDialog = ref(false);
@ -2064,22 +2067,24 @@ watch(currentHq, () => {
hide-footer hide-footer
no-app-box no-app-box
width="40vw" width="40vw"
height="300px" height="250px"
:close="() => (modelCreateTypeBranch = false)" :close="() => (modelCreateTypeBranch = false)"
> >
<div class="full-height row q-pa-md"> <div class="full-height row q-pa-md" style="gap: 16px">
<ItemCard <ItemCard
v-for="i in typeBranchItem" v-for="(value, index) in typeBranchItem"
class="col q-mx-sm -full-height" class="col full-height"
:key="i.text" :key="value.text"
:icon="i.icon" :icon="value.icon"
:text="i.text" :text="value.text"
:color="i.color" :icon-color="value.iconColor"
:bg-color="value.color"
:index="index"
@trigger=" @trigger="
() => { () => {
modelCreateTypeBranch = false; modelCreateTypeBranch = false;
if (i.text === 'Virtual Branch') { if (value.text === 'Virtual Branch') {
formData.virtual = true; formData.virtual = true;
} else { } else {
formData.virtual = false; formData.virtual = false;

View file

@ -167,12 +167,14 @@ const dialogCreateCustomerItem = [
{ {
icon: 'mdi:office-building', icon: 'mdi:office-building',
text: 'customer.employerLegalEntity', text: 'customer.employerLegalEntity',
color: 'var(--purple-8)', iconColor: '--purple-10',
color: 'var(--purple-8-hsl)',
}, },
{ {
icon: 'heroicons:user-solid', icon: 'heroicons:user-solid',
text: 'customer.employerNaturalPerson', text: 'customer.employerNaturalPerson',
color: 'var(--green-9)', iconColor: '--green-11',
color: 'var(--green-9-hsl)',
}, },
]; ];
@ -703,7 +705,7 @@ watch(
}, },
); );
const emptyCreateDialog = ref(false); const emptyCreateDialog = ref(true);
</script> </script>
<template> <template>
@ -1672,22 +1674,23 @@ const emptyCreateDialog = ref(false);
:title="$t('customer.employerType')" :title="$t('customer.employerType')"
hide-footer hide-footer
no-app-box no-app-box
width="60vw" width="40vw"
height="300px" height="250px"
:close="() => (emptyCreateDialog = false)" :close="() => (emptyCreateDialog = false)"
> >
<div class="full-height row q-pa-md"> <div class="full-height row q-pa-md">
<ItemCard <ItemCard
class="col q-mx-sm full-height" class="col q-mx-sm full-height"
v-for="i in dialogCreateCustomerItem" v-for="value in dialogCreateCustomerItem"
:key="i.text" :key="value.text"
:icon="i.icon" :icon="value.icon"
:text="i.text" :text="value.text"
:color="i.color" :icon-color="value.iconColor"
:bg-color="value.color"
@trigger=" @trigger="
() => { () => {
createCustomerForm( createCustomerForm(
i.text === 'customer.employerLegalEntity' ? 'CORP' : 'PERS', value.text === 'customer.employerLegalEntity' ? 'CORP' : 'PERS',
); );
emptyCreateDialog = false; emptyCreateDialog = false;
} }