refactor: เพิ่ม icon เพศ
This commit is contained in:
Net
parent
912faf481d
commit
d7e24e9641
1 changed files with 53 additions and 27 deletions
|
|
@ -1,6 +1,7 @@
|
|||
<script setup lang="ts">
|
||||
import { computed, ref, watch, toRaw } from 'vue';
|
||||
import type { QTableProps } from 'quasar';
|
||||
import { Status } from 'src/stores/types';
|
||||
|
||||
import useCustomerStore from 'src/stores/customer';
|
||||
import useEmployeeStore from 'src/stores/employee';
|
||||
|
|
@ -8,8 +9,6 @@ import useOptionStore from 'src/stores/options';
|
|||
import useMyBranchStore from 'src/stores/my-branch';
|
||||
import useUserStore from 'src/stores/user';
|
||||
|
||||
import { Status } from 'src/stores/types';
|
||||
|
||||
import ButtonAddComponent from 'src/components/ButtonAddCompoent.vue';
|
||||
import PersonCard from 'components/home/PersonCard.vue';
|
||||
import UsersDetailCardComponent from 'src/components/UsersDetailCardComponent.vue';
|
||||
|
|
@ -666,8 +665,7 @@ function onCloseBranch() {
|
|||
}
|
||||
|
||||
function clearForm() {
|
||||
|
||||
profileFile.value = undefined;
|
||||
profileFile.value = undefined;
|
||||
|
||||
dialogInputForm.value = false;
|
||||
formData.value = {
|
||||
|
|
@ -961,9 +959,7 @@ async function toggleStatusCustomer(id: string, status: boolean) {
|
|||
}
|
||||
|
||||
async function onSubmitEdit(id: string) {
|
||||
|
||||
if (selectorLabel.value === 'EMPLOYER') {
|
||||
|
||||
if (!formData.value) return;
|
||||
|
||||
const tempValue: CustomerUpdate = {
|
||||
|
|
@ -975,15 +971,11 @@ async function onSubmitEdit(id: string) {
|
|||
customerBranch: formData.value.customerBranch,
|
||||
taxNo: formData.value.taxNo,
|
||||
personName: formData.value.personName,
|
||||
image: profileFile.value ,
|
||||
image: profileFile.value,
|
||||
};
|
||||
|
||||
|
||||
|
||||
if (tempValue.status === 'CREATED') delete tempValue['status'];
|
||||
|
||||
|
||||
|
||||
await editById(id, tempValue);
|
||||
infoDrawer.value = false;
|
||||
fetchListCustomer();
|
||||
|
|
@ -1885,7 +1877,6 @@ watch([inputSearch, currentStatus], async () => {
|
|||
<q-td v-if="fieldSelected.includes('customerName')">
|
||||
<div class="row items-center">
|
||||
<div
|
||||
:class="{}"
|
||||
style="
|
||||
width: 50px;
|
||||
display: flex;
|
||||
|
|
@ -2128,8 +2119,8 @@ watch([inputSearch, currentStatus], async () => {
|
|||
? `${props.row.customerName} `.trim()
|
||||
: `${props.row.customerNameEN} `.trim(),
|
||||
img: props.row.imageUrl,
|
||||
male: props.row.gender === 'male',
|
||||
female: props.row.gender === 'female',
|
||||
male: undefined,
|
||||
female: undefined,
|
||||
detail: [
|
||||
{
|
||||
icon: 'mdi-cellphone',
|
||||
|
|
@ -2141,6 +2132,20 @@ watch([inputSearch, currentStatus], async () => {
|
|||
},
|
||||
],
|
||||
}"
|
||||
:tag="[
|
||||
{
|
||||
color:
|
||||
{
|
||||
CORP: 'purple',
|
||||
PERS: 'green',
|
||||
}[props.row.customerType as string] || 'CORP',
|
||||
value: $t(
|
||||
props.row.customerType === 'CORP'
|
||||
? 'customerLegalEntity'
|
||||
: 'customerNaturalPerson',
|
||||
),
|
||||
},
|
||||
]"
|
||||
:disabled="props.row.status === 'INACTIVE'"
|
||||
@history="openHistory(props.row.id)"
|
||||
@update-card="
|
||||
|
|
@ -2335,12 +2340,6 @@ watch([inputSearch, currentStatus], async () => {
|
|||
</template>
|
||||
</q-img>
|
||||
</q-avatar>
|
||||
|
||||
<!-- <q-icon
|
||||
size="md"
|
||||
style="scale: 0.8"
|
||||
:name="props.row.imageUrl"
|
||||
/> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
|
|
@ -2349,6 +2348,19 @@ watch([inputSearch, currentStatus], async () => {
|
|||
`${props.row.firstName} ${props.row.lastName}` ||
|
||||
'-'
|
||||
}}
|
||||
|
||||
<q-icon
|
||||
class="q-pl-xs"
|
||||
:class="{
|
||||
'symbol-gender': props.row.gender,
|
||||
'symbol-gender__male':
|
||||
props.row.gender === 'male',
|
||||
'symbol-gender__female':
|
||||
props.row.gender === 'female',
|
||||
}"
|
||||
:name="`mdi-gender-${props.row.gender === 'male' ? 'male' : 'female'}`"
|
||||
width="24px"
|
||||
/>
|
||||
</div>
|
||||
<div class="col app-text-muted">
|
||||
{{
|
||||
|
|
@ -2360,7 +2372,7 @@ watch([inputSearch, currentStatus], async () => {
|
|||
</div>
|
||||
</q-td>
|
||||
<q-td v-if="fieldSelected.includes('type')">
|
||||
<span class="tags tags__parimary">
|
||||
<span class="tags tags__pink">
|
||||
{{ $t('EMPLOYEE') }}
|
||||
</span>
|
||||
</q-td>
|
||||
|
|
@ -2569,6 +2581,12 @@ watch([inputSearch, currentStatus], async () => {
|
|||
},
|
||||
],
|
||||
}"
|
||||
:tag="[
|
||||
{
|
||||
color: 'pink',
|
||||
value: $t('EMPLOYEE'),
|
||||
},
|
||||
]"
|
||||
:disabled="props.row.status === 'INACTIVE'"
|
||||
@history="openHistory(props.row.id)"
|
||||
@update-card="
|
||||
|
|
@ -3994,8 +4012,8 @@ watch([inputSearch, currentStatus], async () => {
|
|||
padding-inline: var(--size-2);
|
||||
}
|
||||
|
||||
.tags__parimary {
|
||||
--_color: var(--blue-6-hsl);
|
||||
.tags__pink {
|
||||
--_color: var(--pink-6-hsl);
|
||||
}
|
||||
|
||||
.tags__purple {
|
||||
|
|
@ -4006,10 +4024,6 @@ watch([inputSearch, currentStatus], async () => {
|
|||
--_color: var(--teal-10-hsl);
|
||||
}
|
||||
|
||||
.dark .tags__parimary {
|
||||
--_color: var(--blue-12-hsl);
|
||||
}
|
||||
|
||||
.dark .tags__purple {
|
||||
--_color: var(--violet-10-hsl);
|
||||
}
|
||||
|
|
@ -4054,4 +4068,16 @@ watch([inputSearch, currentStatus], async () => {
|
|||
color: hsla(var(--_branch-card-bg) / 1);
|
||||
}
|
||||
}
|
||||
|
||||
& .symbol-gender {
|
||||
color: hsla(var(--_fg));
|
||||
|
||||
&.symbol-gender__male {
|
||||
--_fg: var(--gender-male);
|
||||
}
|
||||
|
||||
&.symbol-gender__female {
|
||||
--_fg: var(--gender-female);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue