chamomind/jws-frontend
chamomind/jws-frontend
7
0
Fork 0
Code Issues Projects Releases Packages 1 Wiki Activity Actions

fix: adjust component (person card & customer info)

Browse source
This commit is contained in:
puriphatt 2024-07-18 09:11:41 +00:00
parent 915cb8af80
commit aa5ad5ca70
2 changed files with 27 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

33
src/components/03_customer-management/CustomerInfoComponent.vue
View file

@ -8,7 +8,6 @@ import useOptionStore from 'src/stores/options';
import { Status } from 'src/stores/types';
import { CustomerBranch, CustomerType } from 'src/stores/customer/types';
import AppBox from 'components/app/AppBox.vue';
import BranchCardCustomer from 'components/03_customer-management/BranchCardCustomer.vue';
import PaginationComponent from 'src/components/PaginationComponent.vue';
import NoData from 'components/NoData.vue';
@ -87,9 +86,12 @@ watch(currentStatus, async () => {
</script>
<template>
<div class="bordered surface-1 col column surface-2">
<div class="row no-wrap justify-between bordered-b surface-3">
<div class="row items-center">
<div
class="bordered surface-1 col column surface-2 rounded"
style="overflow: hidden"
>
<div class="row justify-between bordered-b surface-3 full-width">
<div class="row items-center col-12 col-sm">
<q-btn
round
icon="mdi-arrow-left"
@ -128,21 +130,27 @@ watch(currentStatus, async () => {
</div>
</div>
</div>
<div class="row items-center q-px-md">
<div class="row items-center q-px-md col-12 col-sm q-py-sm no-wrap">
<q-btn
id="btn-add-customer"
dense
padding="8px 16px"
unelevated
:label="'+ ' + $t('formDialogTitleCreateSubBranch')"
padding="4px 16px"
@click="$emit('dialog')"
style="background-color: var(--cyan-6); color: white"
style="
background-color: var(--cyan-6);
color: white;
white-space: nowrap;
"
/>
<q-separator vertical inset class="q-mx-md" />
<q-input
style="width: 250px"
outlined
dense
class="col"
:label="$t('search')"
:bg-color="$q.dark.isActive ? 'dark' : 'white'"
v-model="inputSearch"
@ -158,7 +166,7 @@ watch(currentStatus, async () => {
size="sm"
:color="$q.dark.isActive ? 'dark' : 'white'"
:text-color="$q.dark.isActive ? 'white' : 'dark'"
class="bordered rounded q-ml-md"
class="bordered rounded q-ml-sm"
unelevated
>
<q-menu class="bordered">
@ -199,7 +207,7 @@ watch(currentStatus, async () => {
>
<NoData v-if="totalBranch === 0" :not-found="!!inputSearch" />
<div v-for="(br, i) in branch" :key="i" class="col-4">
<div v-for="(br, i) in branch" :key="i" class="col-md-6 col-12">
<BranchCardCustomer
class="surface-1"
:inactive="br.status === 'INACTIVE'"
@ -221,9 +229,8 @@ watch(currentStatus, async () => {
</div>
</div>
<div class="row justify-between items-center q-px-md">
<div class="row col-4 items-center"></div>
<div class="app-text-muted">
<div class="row justify-between items-center q-px-md q-py-sm">
<div class="app-text-muted col offset-md-4">
{{
$t('recordsPage', {
resultcurrentPage: branch?.length,

11
src/components/home/PersonCard.vue
View file

@ -46,12 +46,14 @@ defineEmits<{
>
<div class="column items-center">
<!-- kebab menu -->
<div class="full-width flex" v-if="!noAction">
<div class="full-width flex no-wrap" v-if="!noAction">
<div style="margin-right: auto">
<span
class="tags"
v-for="v in tag"
:key="v.value"
:class="{ [`tags__${v.color}`]: true }"
style="text-wrap: nowrap"
>
{{ v.value }}
</span>
@ -155,7 +157,6 @@ defineEmits<{
</div>
<!-- profile -->
<AppCircle
bordered
class="avatar"
@ -184,8 +185,10 @@ defineEmits<{
</AppCircle>
<!-- name symbol -->
<span class="items-center row">
{{ data.name }}
<span class="items-center text-center row full-width">
<span class="col ellipsis" style="width: 0">
{{ data.name }}
</span>
<Icon
v-if="data.male || data.female"
class="q-pl-xs"