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

refactor: full address on table

Browse source
This commit is contained in:
puriphatt 2024-09-18 14:29:32 +07:00
parent 286fe5bd31
commit d142991eb0
4 changed files with 112 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

52
src/components/shared/SelectInput.vue Normal file
View file

@ -0,0 +1,52 @@
<script lang="ts" setup>
import { ref } from 'vue';
import { selectFilterOptionRefMod } from 'src/stores/utils';
const model = defineModel<string | Date | null>();
const option = defineModel<[]>('option', { default: [] });
const props = defineProps<{
id?: string;
readonly?: boolean;
clearable?: boolean;
label?: string;
rules?: ((value: string) => string | true)[];
disabledDates?: string[] | Date[] | ((date: Date) => boolean);
}>();
const options = ref<Record<string, unknown>[]>([]);
let typeBusinessFilter = selectFilterOptionRefMod(option, options, 'label');
</script>
<template>
<q-select
outlined
clearable
use-input
fill-input
emit-value
map-options
hide-selected
hide-bottom-space
:hide-dropdown-icon="readonly"
input-debounce="0"
option-value="value"
option-label="label"
v-model="model"
class="col-md-6 col-12"
dense
:readonly="readonly"
:label="label"
:options="options"
:for="`${prefixId}-select-business-type`"
@filter="typeBusinessFilter"
:rules="[(val: string) => !!val || $t('form.error.required')]"
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
{{ $t('general.noData') }}
</q-item-section>
</q-item>
</template>
</q-select>
</template>

58
src/pages/01_branch-management/MainPage.vue
View file

@ -348,6 +348,12 @@ const defaultFormData = {
subDistrictId: '',
districtId: '',
provinceId: '',
moo: '',
mooEN: '',
soi: '',
soiEN: '',
street: '',
streetEN: '',
lineId: '',
webUrl: '',
virtual: false,
@ -450,6 +456,12 @@ async function fetchBranchById(id: string) {
webUrl: res.webUrl,
virtual: res.virtual,
selectedImage: res.selectedImage,
moo: res.moo,
mooEN: res.mooEN,
soi: res.soi,
soiEN: res.soiEN,
street: res.street,
streetEN: res.streetEN,
permitExpireDate: new Date(res.permitExpireDate),
permitIssueDate: new Date(res.permitIssueDate),
@ -571,7 +583,6 @@ async function triggerEdit(
currentId.value = id;
if (!currentRecord) return;
currentEdit.value = {
@ -1296,7 +1307,7 @@ watch(currentHq, () => {
() => {
if (
props.row.isHeadOffice &&
props.row._count.branch !== 0
props.row._count?.branch !== 0
) {
fieldSelectedBranch.value = '';
inputSearch = '';
@ -1408,19 +1419,25 @@ watch(currentHq, () => {
<q-td v-if="fieldSelected.includes('branchLabelTel')">
{{
props.row.contact !== undefined
? props.row.contact[0]?.telephoneNo
? props.row.contact[0]?.telephoneNo || '-'
: '-'
}}
</q-td>
<q-td v-if="fieldSelected.includes('contactName')">
{{ props.row.contactName }}
{{ props.row.contactName || '-' }}
</q-td>
<q-td
v-if="fieldSelected.includes('branchLabelAddress')"
>
{{ props.row.address }}
{{
locale === 'eng'
? `${props.row.addressEN} ${props.row.mooEN && `Moo ${props.row.mooEN}`} ${props.row.soiEN && `Soi ${props.row.soiEN}`} ${props.row.streetEN && `${props.row.streetEN} Street`} ${props.row.subDistrict.nameEN} ${props.row.district.nameEN} ${props.row.province.nameEN} ${props.row.subDistrict.zipCode}` ||
'-'
: `${props.row.address} ${props.row.moo && `หมู่ ${props.row.moo}`} ${props.row.soi && `ซอย ${props.row.soi}`} ${props.row.street && `ถนน ${props.row.street}`} ต.${props.row.subDistrict.name} อ.${props.row.district.name} จ.${props.row.province.name} ${props.row.subDistrict.zipCode}` ||
'-'
}}
</q-td>
<q-td>
<KebabAction
@ -1485,13 +1502,13 @@ watch(currentHq, () => {
:virtual-branch="props.row.virtual"
:id="`branch-card-${props.row.name}`"
:class="{
'cursor-pointer': props.row._count.branch !== 0,
'cursor-pointer': props.row._count?.branch !== 0,
}"
@click="
() => {
if (
props.row.isHeadOffice &&
props.row._count.branch !== 0
props.row._count?.branch !== 0
) {
fieldSelectedBranch.value = '';
inputSearch = '';
@ -1524,14 +1541,16 @@ watch(currentHq, () => {
? props.row.nameEN
: props.row.name,
taxNo: props.row.taxNo,
branchLabelTel: props.row.contact
.map((c: BranchContact) => c.telephoneNo)
.join(','),
contactName: props.row.contactName,
branchLabelTel:
props.row.contact &&
props.row.contact
.map((c: BranchContact) => c.telephoneNo || '-')
.join(','),
contactName: props.row.contactName || '-',
branchLabelAddress:
$i18n.locale === 'eng'
? `${props.row.addressEN || ''} ${props.row.subDistrict?.nameEN || ''} ${props.row.district?.nameEN || ''} ${props.row.province?.nameEN || ''}`
: `${props.row.address || ''} ${props.row.subDistrict?.name || ''} ${props.row.district?.name || ''} ${props.row.province?.name || ''}`,
? `${props.row.addressEN} ${props.row.mooEN && `Moo ${props.row.mooEN}`} ${props.row.soiEN && `Soi ${props.row.soiEN}`} ${props.row.streetEN && `${props.row.streetEN} Street`} ${props.row.subDistrict.nameEN} ${props.row.district.nameEN} ${props.row.province.nameEN} ${props.row.subDistrict.zipCode}`
: `${props.row.address} ${props.row.moo && `หมู่ ${props.row.moo}`} ${props.row.soi && `ซอย ${props.row.soi}`} ${props.row.street && `ถนน ${props.row.street}`} ต.${props.row.subDistrict.name} อ.${props.row.district.name} จ.${props.row.province.name} ${props.row.subDistrict.zipCode}`,
branchImgUrl: `/branch/${props.row.id}/branch`,
}"
:field-selected="fieldSelected"
@ -1876,7 +1895,12 @@ watch(currentHq, () => {
v-model:province-id="formData.provinceId"
v-model:district-id="formData.districtId"
v-model:sub-district-id="formData.subDistrictId"
v-model:zip-code="formData.zipCode"
v-model:moo="formData.moo"
v-model:mooEN="formData.mooEN"
v-model:soi="formData.soi"
v-model:soiEN="formData.soiEN"
v-model:street="formData.street"
v-model:streetEN="formData.streetEN"
:readonly="formType === 'view'"
/>
<FormLocation
@ -2235,6 +2259,12 @@ watch(currentHq, () => {
v-model:province-id="formData.provinceId"
v-model:district-id="formData.districtId"
v-model:sub-district-id="formData.subDistrictId"
v-model:moo="formData.moo"
v-model:mooEN="formData.mooEN"
v-model:soi="formData.soi"
v-model:soiEN="formData.soiEN"
v-model:street="formData.street"
v-model:streetEN="formData.streetEN"
v-model:zip-code="formData.zipCode"
class="q-mb-xl"
/>

10
src/pages/03_customer-management/MainPage.vue
View file

@ -1269,11 +1269,9 @@ const emptyCreateDialog = ref(false);
<q-td v-if="fieldSelected.includes('address')">
{{
props.row.branch.length !== 0
? props.row.branch[0].address !== null
? `${props.row.branch[0].address} ${props.row.branch[0].moo} ${props.row.branch[0].soi} ${props.row.branch[0].street} จ.${props.row.branch[0].province.name} อ.${props.row.branch[0].district.name} ต.${props.row.branch[0].subDistrict.name} ${props.row.branch[0].subDistrict.zipCode}`
: '-'
: '-'
locale === 'eng'
? `${props.row.branch[0].addressEN} ${props.row.branch[0].mooEN} ${props.row.branch[0].soiEN} ${props.row.branch[0].streetEN} ${props.row.branch[0].subDistrict.nameEN} ${props.row.branch[0].district.nameEN} ${props.row.branch[0].province.nameEN} ${props.row.branch[0].subDistrict.zipCode}`
: `${props.row.branch[0].address} ${props.row.branch[0].moo} ${props.row.branch[0].soi} ${props.row.branch[0].street} ต.${props.row.branch[0].subDistrict.name} อ.${props.row.branch[0].district.name} จ.${props.row.branch[0].province.name} ${props.row.branch[0].subDistrict.zipCode}`
}}
</q-td>
@ -1532,7 +1530,7 @@ const emptyCreateDialog = ref(false);
props.row.branch[0].jobPosition,
)
: key === 'officeTel'
? props.row.branch[0].officeTel
? props.row.branch[0].officeTel || '-'
: ''
}}
</span>

12
src/stores/branch/types.ts
View file

@ -41,6 +41,12 @@ export type Branch = {
provinceId: string | null;
addressEN: string;
address: string;
moo?: string;
mooEN?: string;
soi?: string;
soiEN?: string;
street?: string;
streetEN?: string;
nameEN: string;
name: string;
taxNo: string;
@ -70,6 +76,12 @@ export type BranchCreate = {
name: string;
addressEN: string;
address: string;
moo?: string;
mooEN?: string;
soi?: string;
soiEN?: string;
street?: string;
streetEN?: string;
zipCode: string;
email: string;
longitude: string;