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

refactor: detail layout

Browse source
This commit is contained in:
Methapon2001 2024-04-11 17:21:30 +07:00
parent 634220bd24
commit cc69713602
2 changed files with 105 additions and 135 deletions
Download patch file Download diff file Expand all files Collapse all files

110
src/components/01_branch-management/CardDetailsComponent.vue
View file

@ -36,77 +36,53 @@ defineProps<{
<div class="row"> <div class="row">
<div class="col q-pa-sm card-details-variable"> <div class="col q-pa-sm card-details-variable">
<AppBox class="bordered column q-pa-sm" bordered> <AppBox class="bordered row q-pa-sm" bordered>
<div class="row card-details-row-height"> <div class="col-4 color-text-static">รหัสสาขา</div>
<div class="col-3 color-text-static">รหัสสาขา</div> <div class="col-8">{{ data?.code }}</div>
<div class="col-2">{{ data?.code }}</div> <div class="col-4 color-text-static">เลขประชำตัวผู้เสียภาษี</div>
<div class="col-4 color-text-static">เลขประชำตัวผู้เสียภาษี</div> <div class="col-8">{{ data?.taxNo }}</div>
<div class="col-3">{{ data?.taxNo }}</div> <div class="col-4 color-text-static">ชื่อสาขา ภาษาไทย</div>
</div> <div class="col-8">{{ data?.name }}</div>
<div class="row card-details-row-height"> <div class="col-4 color-text-static">ชื่อสาขา ภาษาอังกฤษ</div>
<div class="col-3 color-text-static">ชื่อสาขา ภาษาไทย</div> <div class="col-8">{{ data?.nameEN }}</div>
<div class="col-2">{{ data?.name }}</div>
<div class="col-4 color-text-static">ชื่อสาขา ภาษาอังกฤษ</div> <div
<div class="col-3">{{ data?.nameEN }}</div> class="color-card-text-code col-12 q-my-md text-weight-bold"
:class="{ dark: $q.dark.isActive }"
>
ที่อยู่สาขา
</div> </div>
<div class="row q-pt-sm q-pb-md card-details-row-height"> <div class="col-3 color-text-static">ที่อยู่</div>
<div <div class="col-9">{{ data?.address }}</div>
class="col color-card-text-code" <div class="col-3 color-text-static">แขวง/ตำบล</div>
:class="{ dark: $q.dark.isActive }" <div class="col-3">
> {{ data?.subDistrict?.name }}
ที่อยู่สาขา </div>
</div> <div class="col-3 color-text-static">เขต/อำเภอ</div>
<div class="col-3">{{ data?.district?.name }}</div>
<div class="col-3 color-text-static">จังหวัด</div>
<div class="col-3">{{ data?.province?.name }}</div>
<div class="col-3 color-text-static">รหัสไปรษณีย์</div>
<div class="col-3">{{ data?.zipCode }}</div>
<div
class="color-card-text-code col-12 q-my-md text-weight-bold"
:class="{ dark: $q.dark.isActive }"
>
ที่อยู่สาขา ENG
</div> </div>
<div class="row card-details-row-height"> <div class="col-3 color-text-static">Address</div>
<div class="col-3 color-text-static">ที่อยู่</div> <div class="col-9">{{ data?.addressEN }}</div>
<div class="col-2">{{ data?.address }}</div> <div class="col-3 color-text-static">Subdistrict</div>
<div class="col-4 color-text-static">แขวง/ตำบล</div> <div class="col-3">{{ data?.subDistrict?.nameEN }}</div>
<div class="col-3"> <div class="col-3 color-text-static">District</div>
{{ data?.subDistrict?.name }} <div class="col-3">{{ data?.district?.nameEN }}</div>
</div> <div class="col-3 color-text-static">Province</div>
</div> <div class="col-3">{{ data?.province?.nameEN }}</div>
<div class="col-3 color-text-static">Zip code</div>
<div class="row card-details-row-height"> <div class="col-3">{{ data?.zipCode }}</div>
<div class="col-3 color-text-static">เขต/อำเภอ</div>
<div class="col-2">{{ data?.district?.name }}</div>
<div class="col-4 color-text-static">จังหวัด</div>
<div class="col-3">{{ data?.province?.name }}</div>
</div>
<div class="row card-details-row-height">
<div class="col-3 color-text-static">รหัสไปรษณีย์</div>
<div class="col-2">{{ data?.zipCode }}</div>
</div>
<div class="row q-pt-sm q-pb-md card-details-row-height">
<div
class="col color-card-text-code"
:class="{ dark: $q.dark.isActive }"
>
ที่อยู่สาขา ENG
</div>
</div>
<div class="row card-details-row-height">
<div class="col-3 color-text-static">Address</div>
<div class="col-2">{{ data?.addressEN }}</div>
<div class="col-4 color-text-static">Subdistrict</div>
<div class="col-3">{{ data?.subDistrict?.nameEN }}</div>
</div>
<div class="row card-details-row-height">
<div class="col-3 color-text-static">District</div>
<div class="col-2">{{ data?.district?.nameEN }}</div>
<div class="col-4 color-text-static">Province</div>
<div class="col-3">{{ data?.province?.nameEN }}</div>
</div>
<div class="row card-details-row-height">
<div class="col-3 color-text-static">Zip code</div>
<div class="col-2">{{ data?.zipCode }}</div>
</div>
</AppBox> </AppBox>
</div> </div>

130
src/components/01_branch-management/DetailBranchDrawerComponent.vue
View file

@ -57,77 +57,53 @@ const open = defineModel('open', { type: Boolean, default: false });
</q-toolbar> </q-toolbar>
<section class="q-mb-md"> <section class="q-mb-md">
<AppBox class="column q-pa-sm" bordered> <AppBox class="row q-pa-sm" bordered>
<div class="row card-details-row-height"> <div class="col-4 color-text-static">รหัสสาขา</div>
<div class="col-3 color-text-static">รหัสสาขา</div> <div class="col-8">{{ data?.code }}</div>
<div class="col-2">{{ data?.code }}</div> <div class="col-4 color-text-static">เลขประชำตัวผู้เสียภาษี</div>
<div class="col-4 color-text-static">เลขประชำตัวผู้เสียภาษี</div> <div class="col-8">{{ data?.taxNo }}</div>
<div class="col-3">{{ data?.taxNo }}</div> <div class="col-4 color-text-static">ชื่อสาขา ภาษาไทย</div>
</div> <div class="col-8">{{ data?.name }}</div>
<div class="row card-details-row-height"> <div class="col-4 color-text-static">ชื่อสาขา ภาษาอังกฤษ</div>
<div class="col-3 color-text-static">ชื่อสาขา ภาษาไทย</div> <div class="col-8">{{ data?.nameEN }}</div>
<div class="col-2">{{ data?.name }}</div>
<div class="col-4 color-text-static">ชื่อสาขา ภาษาอังกฤษ</div> <div
<div class="col-3">{{ data?.nameEN }}</div> class="color-card-text-code col-12 q-my-md text-weight-bolder"
:class="{ dark: $q.dark.isActive }"
>
ที่อยู่สาขา
</div> </div>
<div class="row q-pt-sm q-pb-md card-details-row-height"> <div class="col-3 color-text-static">ที่อยู่</div>
<div <div class="col-9">{{ data?.address }}</div>
class="col color-card-text-code" <div class="col-3 color-text-static">แขวง/ตำบล</div>
:class="{ dark: $q.dark.isActive }" <div class="col-3">
> {{ data?.subDistrict?.name }}
ที่อยู่สาขา </div>
</div> <div class="col-3 color-text-static">เขต/อำเภอ</div>
<div class="col-3">{{ data?.district?.name }}</div>
<div class="col-3 color-text-static">จังหวัด</div>
<div class="col-3">{{ data?.province?.name }}</div>
<div class="col-3 color-text-static">รหัสไปรษณีย์</div>
<div class="col-3">{{ data?.zipCode }}</div>
<div
class="color-card-text-code col-12 q-my-md"
:class="{ dark: $q.dark.isActive }"
>
ที่อยู่สาขา ENG
</div> </div>
<div class="row card-details-row-height"> <div class="col-3 color-text-static">Address</div>
<div class="col-3 color-text-static">ที่อยู่</div> <div class="col-9">{{ data?.addressEN }}</div>
<div class="col-2">{{ data?.address }}</div> <div class="col-3 color-text-static">Subdistrict</div>
<div class="col-4 color-text-static">แขวง/ตำบล</div> <div class="col-3">{{ data?.subDistrict?.nameEN }}</div>
<div class="col-3"> <div class="col-3 color-text-static">District</div>
{{ data?.subDistrict?.name }} <div class="col-3">{{ data?.district?.nameEN }}</div>
</div> <div class="col-3 color-text-static">Province</div>
</div> <div class="col-3">{{ data?.province?.nameEN }}</div>
<div class="col-3 color-text-static">Zip code</div>
<div class="row card-details-row-height"> <div class="col-3">{{ data?.zipCode }}</div>
<div class="col-3 color-text-static">เขต/อำเภอ</div>
<div class="col-2">{{ data?.district?.name }}</div>
<div class="col-4 color-text-static">จังหวัด</div>
<div class="col-3">{{ data?.province?.name }}</div>
</div>
<div class="row card-details-row-height">
<div class="col-3 color-text-static">รหัสไปรษณีย์</div>
<div class="col-2">{{ data?.zipCode }}</div>
</div>
<div class="row q-pt-sm q-pb-md card-details-row-height">
<div
class="col color-card-text-code"
:class="{ dark: $q.dark.isActive }"
>
ที่อยู่สาขา ENG
</div>
</div>
<div class="row card-details-row-height">
<div class="col-3 color-text-static">Address</div>
<div class="col-2">{{ data?.addressEN }}</div>
<div class="col-4 color-text-static">Subdistrict</div>
<div class="col-3">{{ data?.subDistrict?.nameEN }}</div>
</div>
<div class="row card-details-row-height">
<div class="col-3 color-text-static">District</div>
<div class="col-2">{{ data?.district?.nameEN }}</div>
<div class="col-4 color-text-static">Province</div>
<div class="col-3">{{ data?.province?.nameEN }}</div>
</div>
<div class="row card-details-row-height">
<div class="col-3 color-text-static">Zip code</div>
<div class="col-2">{{ data?.zipCode }}</div>
</div>
</AppBox> </AppBox>
</section> </section>
@ -172,4 +148,22 @@ const open = defineModel('open', { type: Boolean, default: false });
</q-drawer> </q-drawer>
</template> </template>
<style scoped></style> <style scoped>
.color-card-text-code {
--_color-card-text-code: var(--gray-12);
color: var(--_color-card-text-code);
&.dark {
--_color-card-text-code: var(--cyan-6);
}
}
.color-text-static {
--_details-text-static-color: var(--gray-6);
color: var(--_details-text-static-color);
}
.card-details-row-height {
height: 40px;
}
</style>