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

Merge branch 'ui-new' of frappet.github.com:Frappet/jws-frontend into ui-new

Browse source
This commit is contained in:
oat_dev 2024-07-08 17:17:47 +07:00
commit bedc4a8b4c
13 changed files with 513 additions and 83 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/components/04_product-service/BasicInfoProduct.vue
View file

@ -82,7 +82,7 @@ onMounted(async () => {
<q-input
for="input-name"
:dense="dense"
:outlined="!readonly"
outlined
:readonly="readonly"
:borderless="readonly"
hide-bottom-space
@ -94,7 +94,7 @@ onMounted(async () => {
<q-input
for="input-detail"
:dense="dense"
:outlined="!readonly"
outlined
:readonly="readonly"
:borderless="readonly"
hide-bottom-space
@ -108,7 +108,7 @@ onMounted(async () => {
<div class="col-12">
<q-field
class="full-width"
:outlined="!readonly"
outlined
:readonly="readonly"
:borderless="readonly"
:label="$t('detail')"
@ -138,7 +138,7 @@ onMounted(async () => {
<q-input
for="input-process"
:dense="dense"
:outlined="!readonly"
outlined
:readonly="readonly"
:borderless="readonly"
hide-bottom-space

6
src/components/04_product-service/PriceDataComponent.vue
View file

@ -17,7 +17,7 @@ defineProps<{
<div class="col-9 row q-col-gutter-md">
<q-input
:dense="dense"
:outlined="!readonly"
outlined
:readonly="readonly"
:borderless="readonly"
hide-bottom-space
@ -28,7 +28,7 @@ defineProps<{
<q-input
:dense="dense"
:outlined="!readonly"
outlined
:readonly="readonly"
:borderless="readonly"
hide-bottom-space
@ -39,7 +39,7 @@ defineProps<{
<q-input
:dense="dense"
:outlined="!readonly"
outlined
:readonly="readonly"
:borderless="readonly"
hide-bottom-space

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

@ -235,8 +235,8 @@ defineEmits<{
&.person-box__disabled {
opacity: 0.7;
filter: grayscale(1);
opacity: 0.5;
filter: grayscale(0.9);
.status-circle {
background-color: var(--surface-1);

3
src/i18n/en-US/customer-main-page.ts
View file

@ -8,6 +8,9 @@ export default {
customerEmployeeTooltipCaption: 'Click + to add an employee',
customerEmployerAdd: 'Add employer',
customerEmployeeAdd: 'Add employee',
nameEmployee:'Name Employee',
EMPLOYER: 'Employer',
EMPLOYEE: 'Employee',
customerEmployerStatTitle: 'Employer data summary',

2
src/i18n/en-US/product-service.ts
View file

@ -9,6 +9,8 @@ export default {
service: 'Service',
product: 'Product',
productGroup: 'Product Group: {name}',
productType: 'Product Type: {name}',
messageTooltipNoProduct: 'No Product and Service Groups',
messageTooltipProductCreate: 'Click + for product and service groups.',

3
src/i18n/th-th/customer-main-page.ts
View file

@ -8,6 +8,9 @@ export default {
customerEmployeeTooltipCaption: 'คลิก + เพื่อเพิ่มลูกจ้าง',
customerEmployerAdd: 'เพิ่มนายจ้าง',
customerEmployeeAdd: 'เพิ่มลูกจ้าง',
nameEmployee:'ชื่อลูกจ้าง',
EMPLOYER: 'นายจ้าง',
EMPLOYEE: 'ลูกจ้าง',
customerEmployerStatTitle: 'สรุปจำนวนข้อมูลนายจ้าง',

2
src/i18n/th-th/main.ts
View file

@ -9,7 +9,7 @@ export default {
mainCustomerCaption: 'จัดการคนภายในองค์กร',
mainProductTitle: 'สินค้าและบริการ',
mainProductCaption: 'รายการสินค้าและบริการ',
mainProductCaption: 'ประเภทสินค้าและบริการ',
mainQuotationTitle: 'ใบเสนอราคา',
mainQuotationCaption: 'รายการใบเสนอราคา',

8
src/layouts/MainLayout.vue
View file

@ -265,7 +265,13 @@ onMounted(async () => {
class="text-caption cursor-pointer"
@click="item.handler?.()"
>
{{ item.text ? $t(item.text) : '' }}
{{
item.text
? $t(item.text, {
...(item.argsi18n || {}),
})
: ''
}}
</span>
<q-icon
name="mdi-chevron-right"

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

@ -1049,7 +1049,7 @@ watch(locale, () => {
</q-td>
<q-td>
<q-btn
icon="mdi-eye"
icon="mdi-eye-outline"
size="sm"
dense
round
@ -1680,7 +1680,6 @@ watch(locale, () => {
--_branch-status-color: var(--red-4-hsl);
--_branch-badge-bg: var(--red-4-hsl);
filter: grayscale(1);
background-color: hsl(var(--gray-6-hsl) / 0.1);
opacity: 0.5;
}

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

@ -6,6 +6,7 @@ import useCustomerStore from 'src/stores/customer';
import useEmployeeStore from 'src/stores/employee';
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';
@ -65,10 +66,53 @@ const { t, locale } = useI18n();
const utilsStore = useUtilsStore();
const userCustomer = useCustomerStore();
const useMyBranch = useMyBranchStore();
const userStore = useUserStore();
const { fetchListOptionBranch } = useMyBranch;
const columns = [
const columnsEmployee = [
{
name: 'firstName',
align: 'left',
label: 'nameEmployee',
field: 'firstName',
sortable: true,
},
{
name: 'type',
align: 'left',
label: 'type',
field: 'type',
sortable: true,
},
{
name: 'formDialogInputNationality',
align: 'left',
label: 'formDialogInputNationality',
field: 'nationality',
},
{
name: 'formDialogEmployeeNRCNo',
align: 'left',
label: 'formDialogEmployeeNRCNo',
field: 'nrcNo',
},
{
name: 'formDialogInputAge',
align: 'left',
label: 'formDialogInputAge',
field: 'dateOfBirth',
},
{
name: 'branchLabel',
align: 'left',
label: 'branchLabel',
field: 'customerBranch',
},
] satisfies QTableProps['columns'];
const columnsCustomer = [
{
name: 'customerName',
align: 'left',
@ -77,7 +121,7 @@ const columns = [
sortable: true,
},
{
name: 'customerType',
name: 'type',
align: 'left',
label: 'type',
field: 'customerType',
@ -168,7 +212,7 @@ const fieldSelectedCustomer = ref<{ label: string; value: string }>({
value: 'all',
});
const fieldDisplay = ref<
const fieldDisplayEmployer = ref<
{
label: string;
value: string;
@ -181,7 +225,7 @@ const fieldDisplay = ref<
{
label: t('type'),
value: 'customerType',
value: 'type',
},
{
@ -199,15 +243,69 @@ const fieldDisplay = ref<
value: 'branchEmail',
},
]);
const fieldDisplayEmployee = ref<
{
label: string;
value: string;
}[]
>([
{
label: t('nameEmployee'),
value: 'firstName',
},
{
label: t('type'),
value: 'type',
},
{
label: t('formDialogInputNationality'),
value: 'formDialogInputNationality',
},
{
label: t('formDialogEmployeeNRCNo'),
value: 'formDialogEmployeeNRCNo',
},
{
label: t('formDialogInputAge'),
value: 'formDialogInputAge',
},
{
label: t('branchLabel'),
value: 'branchLabel',
},
]);
const fieldSelected = ref<
(
| 'customerName'
| 'customerType'
| 'type'
| 'personName'
| 'telephoneNo'
| 'branchEmail'
| 'firstName'
| 'formDialogInputNationality'
| 'formDialogEmployeeNRCNo'
| 'formDialogInputAge'
| 'branchLabel'
)[]
>(['customerName', 'customerType', 'personName', 'telephoneNo', 'branchEmail']);
>([
'customerName',
'type',
'personName',
'telephoneNo',
'branchEmail',
'firstName',
'formDialogInputNationality',
'formDialogInputNationality',
'formDialogEmployeeNRCNo',
'formDialogInputAge',
'branchLabel',
]);
const splitterModel = ref(15);
const modeView = ref(true);
@ -391,8 +489,8 @@ const inputFile = (() => {
return element;
})();
const listCustomer = ref<(Customer & { branch: CustomerBranch[] })[]>();
const listEmployee = ref();
const listCustomer = ref<(Customer & { branch: CustomerBranch[] })[]>([]);
const listEmployee = ref<Employee[]>([]);
const itemCard = [
{
@ -1124,7 +1222,7 @@ async function assignFormDataEmployee(id: string) {
};
formDataEmployee.value = {
image: foundEmployee.profileImageUrl,
image: null,
customerBranchId: foundEmployee.customerBranchId,
nrcNo: foundEmployee.nrcNo,
dateOfBirth: foundEmployee.dateOfBirth,
@ -1169,7 +1267,7 @@ async function assignFormDataEmployee(id: string) {
}
if (infoEmployeePersonCard.value) {
infoEmployeePersonCard.value[0].img = foundEmployee.profileImageUrl;
infoEmployeePersonCard.value[0].img = foundEmployee.profileImageUrl || '';
}
}
flowStore.rotate();
@ -1536,12 +1634,15 @@ watch([inputSearch, currentStatus], async () => {
{ label: $t('statusINACTIVE'), value: 'INACTIVE' },
]"
></q-select>
<q-select
v-if="modeView === false"
id="select-field"
for="select-field"
:options="fieldDisplay"
:options="
currentTab === 'employer'
? fieldDisplayEmployer
: fieldDisplayEmployee
"
:display-value="$t('displayField')"
v-model="fieldSelected"
option-label="label"
@ -1727,7 +1828,7 @@ watch([inputSearch, currentStatus], async () => {
bordered
:grid="modeView"
:rows="listCustomer"
:columns="columns"
:columns="columnsCustomer"
card-container-class=" q-col-gutter-md"
row-key="name"
:rows-per-page-options="[0]"
@ -1751,6 +1852,8 @@ watch([inputSearch, currentStatus], async () => {
<q-tr
:class="{
'app-text-muted': props.row.status === 'INACTIVE',
'status-active': props.row.status !== 'INACTIVE',
'status-inactive': props.row.status === 'INACTIVE',
}"
:props="props"
@click="
@ -1769,14 +1872,7 @@ watch([inputSearch, currentStatus], async () => {
<q-td v-if="fieldSelected.includes('customerName')">
<div class="row items-center">
<div
:class="{
'status-active':
props.row.status !== 'INACTIVE',
'status-inactive':
props.row.status === 'INACTIVE',
'branch-card__hq': props.row.isHeadOffice,
'branch-card__br': !props.row.isHeadOffice,
}"
:class="{}"
style="
width: 50px;
display: flex;
@ -1813,7 +1909,7 @@ watch([inputSearch, currentStatus], async () => {
</div>
</div>
</q-td>
<q-td v-if="fieldSelected.includes('customerType')">
<q-td v-if="fieldSelected.includes('type')">
<span
class="tags"
:class="{
@ -1838,7 +1934,7 @@ watch([inputSearch, currentStatus], async () => {
</q-td>
<q-td>
<q-btn
icon="mdi-eye"
icon="mdi-eye-outline"
size="sm"
dense
round
@ -2032,6 +2128,7 @@ watch([inputSearch, currentStatus], async () => {
},
],
}"
:disabled="props.row.status === 'INACTIVE'"
@history="openHistory(props.row.id)"
@update-card="
() => {
@ -2237,7 +2334,332 @@ watch([inputSearch, currentStatus], async () => {
class="col column justify-between q-px-md q-pt-md scroll"
v-if="listEmployee.length !== 0"
>
<!-- eeee -->
<q-table
flat
bordered
:grid="modeView"
:rows="listEmployee"
:columns="columnsEmployee"
card-container-class=" q-col-gutter-md"
row-key="name"
:rows-per-page-options="[0]"
hide-pagination
:visible-columns="fieldSelected"
>
<template v-slot:header="props">
<q-tr class="surface-2" :props="props">
<q-th
v-for="col in props.cols"
:key="col.name"
:props="props"
>
{{ $t(col.label) }}
</q-th>
<q-th auto-width />
</q-tr>
</template>
<template v-slot:body="props">
<q-tr
:class="{
'app-text-muted': props.row.status === 'INACTIVE',
'status-active': props.row.status !== 'INACTIVE',
'status-inactive': props.row.status === 'INACTIVE',
}"
:props="props"
@click="
() => {
currentCustomerName = props.row.customerName;
customerType = props.row.customerType;
currentCustomerUrlImage = props.row.imageUrl;
currentCustomerId = props.row.id;
const { branch, ...payload } = props.row;
currentCustomer = payload;
isMainPage = false;
}
"
>
<q-td v-if="fieldSelected.includes('firstName')">
<div class="row items-center">
<div
style="
width: 50px;
display: flex;
margin-bottom: var(--size-2);
"
>
<div class="branch-card__icon">
<q-avatar size="md">
<q-img
:src="
props.row.profileImageUrl ??
'/no-profile.png'
"
>
<template #error>
<q-img src="/no-profile.png" />
</template>
</q-img>
</q-avatar>
<!-- <q-icon
size="md"
style="scale: 0.8"
:name="props.row.imageUrl"
/> -->
</div>
</div>
<div class="col">
<div class="col">
{{
`${props.row.firstName} ${props.row.lastName}` ||
'-'
}}
</div>
<div class="col app-text-muted">
{{
`${props.row.firstNameEN} ${props.row.lastNameEN}` ||
'-'
}}
</div>
</div>
</div>
</q-td>
<q-td v-if="fieldSelected.includes('type')">
<span class="tags tags__parimary">
{{ $t('EMPLOYEE') }}
</span>
</q-td>
<q-td
v-if="
fieldSelected.includes('formDialogInputNationality')
"
>
{{ props.row.nationality || '-' }}
</q-td>
<q-td
v-if="
fieldSelected.includes('formDialogEmployeeNRCNo')
"
>
{{ props.row.nrcNo || '-' }}
</q-td>
<q-td
v-if="fieldSelected.includes('formDialogInputAge')"
>
{{ userStore.calculateAge(props.row.dateOfBirth) }}
</q-td>
<q-td
v-if="fieldSelected.includes('formDialogInputAge')"
>
<div class="row items-center">
<div class="col">
<div class="col">
{{ props.row.customerBranch.code }}
</div>
<div class="col app-text-muted">
{{
$i18n.locale === 'en-US' ? `${props.row.customerBranch.nameEN}` : `${props.row.customerBranch.name}`
}}
</div>
</div>
</div>
</q-td>
<q-td>
<q-btn
icon="mdi-eye-outline"
size="sm"
dense
round
flat
@click.stop="
() => {
openDialogInputForm('INFO', props.row.id) }
"
/>
<q-btn
icon="mdi-dots-vertical"
size="sm"
dense
round
flat
@click.stop
:key="props.row.id"
>
<q-menu class="bordered">
<q-list v-close-popup>
<q-item
:id="`view-detail-btn-${props.row.name}-view`"
@click.stop="
() => {
openDialogInputForm('INFO', props.row.id);
}
"
clickable
dense
class="row q-py-sm"
style="white-space: nowrap"
>
<q-icon
name="mdi-eye-outline"
class="col-3"
size="xs"
style="color: hsl(var(--green-6-hsl))"
/>
<span class="col-9 q-px-md flex items-center">
{{ $t('viewDetail') }}
</span>
</q-item>
<q-item
:id="`view-detail-btn-${props.row.name}-edit`"
clickable
dense
class="row q-py-sm"
style="white-space: nowrap"
@click="
() => {
openDialogInputForm(
'INFO',
props.row.id,
true,
);
}
"
>
<q-icon
name="mdi-pencil-outline"
class="col-3"
size="xs"
style="color: hsl(var(--cyan-6-hsl))"
/>
<span class="col-9 q-px-md flex items-center">
{{ $t('edit') }}
</span>
</q-item>
<q-item
:id="`view-detail-btn-${props.row.name}-delete`"
dense
:clickable="props.row.status === 'CREATED'"
class="row"
:class="{
'surface-3': props.row.status !== 'CREATED',
'app-text-muted':
props.row.status !== 'CREATED',
}"
style="white-space: nowrap"
@click="onDelete(props.row.id)"
>
<q-icon
name="mdi-trash-can-outline"
size="xs"
class="col-3"
:class="{
'app-text-negative':
props.row.status === 'CREATED',
}"
/>
<span class="col-9 q-px-md flex items-center">
{{ $t('delete') }}
</span>
</q-item>
<q-item dense>
<q-item-section class="q-py-sm">
<div class="q-pa-sm surface-2 rounded">
<q-toggle
:id="`view-detail-btn-${props.row.name}-status`"
dense
size="sm"
:label="
props.row.status !== 'INACTIVE'
? $t('switchOnLabel')
: $t('switchOffLabel')
"
@click="
async () => {
toggleStatusEmployee(
props.row.id,
props.row.status === 'ACTIVE'
? true
: false,
);
}
"
:model-value="
props.row.status !== 'INACTIVE'
"
/>
</div>
</q-item-section>
</q-item>
</q-list>
</q-menu>
</q-btn>
</q-td>
</q-tr>
</template>
<template v-slot:item="props">
<div class="col-3">
<PersonCard
:field-selected="fieldSelected"
history
:data="{
code: props.row.code,
name:
$i18n.locale === 'en-US'
? `${props.row.firstName} ${props.row.lastName} `.trim()
: `${props.row.firstNameEN} ${props.row.lastNameEN} `.trim(),
img: props.row.imageUrl,
male: props.row.gender === 'male',
female: props.row.gender === 'female',
detail: [
{
icon: 'mdi-passport',
value: props.row.nationality,
},
{
icon: 'mdi-clock-outline',
value: props.row.dateOfBirth
? userStore.calculateAge(
props.row.dateOfBirth,
) ?? ''
: '',
},
],
}"
:disabled="props.row.status === 'INACTIVE'"
@history="openHistory(props.row.id)"
@update-card="
(action) =>
openDialogInputForm(action, props.row.id, true)
"
@enter-card="
(action) =>
openDialogInputForm(action, props.row.id)
"
@delete-card="onDelete(props.row.id)"
@toggle-status="
toggleStatusEmployee(
props.row.id,
props.row.status === 'ACTIVE' ? true : false,
)
"
/>
</div>
</template>
</q-table>
</div>
<div
v-if="listEmployee.length !== 0"
@ -3643,6 +4065,10 @@ watch([inputSearch, currentStatus], async () => {
padding-inline: var(--size-2);
}
.tags__parimary {
--_color: var(--blue-6-hsl);
}
.tags__purple {
--_color: var(--violet-11-hsl);
}
@ -3651,6 +4077,10 @@ 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);
}
@ -3666,8 +4096,7 @@ watch([inputSearch, currentStatus], async () => {
.status-inactive {
--_branch-status-color: var(--red-4-hsl);
--_branch-badge-bg: var(--red-4-hsl);
filter: grayscale(1);
background-color: hsl(var(--gray-6-hsl) / 0.1);
filter: grayscale(0.5);
opacity: 0.5;
}

66
src/pages/04_product-service/MainPage.vue
View file

@ -469,7 +469,7 @@ async function toggleStatusProduct(id: string, status: Status) {
status: status === 'INACTIVE' ? 'ACTIVE' : 'INACTIVE',
});
await fetchListOfProduct();
await alternativeFetch();
flowStore.rotate();
}
@ -478,7 +478,7 @@ async function toggleStatusService(id: string, status: Status) {
status: status === 'INACTIVE' ? 'ACTIVE' : 'INACTIVE',
});
await fetchListOfService();
await alternativeFetch();
flowStore.rotate();
}
async function toggleStatusType(id: string, status: Status) {
@ -973,6 +973,11 @@ async function fetchStatus() {
}
async function alternativeFetch() {
console.log('asdasds');
if (productAndServiceTab.value === 'all') {
await fetchListOfProductAndService();
flowStore.rotate();
@ -1022,6 +1027,22 @@ onMounted(async () => {
watch(productMode, () => {
inputSearch.value = '';
currentStatus.value = 'All';
const tmp: typeof utilsStore.currentTitle.path = [];
if (productMode.value === 'type' || productMode.value === 'service') {
tmp.push({
text: 'productGroup',
argsi18n: { name: pathGroupName.value },
handler: () => {
productMode.value = 'type';
},
});
}
if (productMode.value === 'service') {
tmp.push({ text: 'productType', argsi18n: { name: pathTypeName.value } });
}
utilsStore.currentTitle.path = tmp;
});
watch(currentStatus, async () => {
@ -1183,47 +1204,6 @@ watch(inputSearchProductAndService, async () => {
</div>
</transition>
<!-- title type/service -->
<div
class="row items-center q-mb-md"
v-if="productMode === 'service' || productMode === 'type'"
>
<q-btn
round
icon="mdi-arrow-left"
flat
dense
@click="productMode = productMode === 'service' ? 'type' : 'group'"
class="q-mr-md"
/>
<div
class="text-h6 hover-underline"
:class="{
'app-text-muted': productMode !== 'type',
'text-weight-bold': productMode === 'type',
}"
@click="productMode = 'type'"
>
{{ pathGroupName }}
</div>
<div
class="text-h6 app-text-muted q-mx-sm"
v-if="productMode === 'service'"
>
/
</div>
<div
v-if="productMode === 'service'"
class="text-h6"
:class="{
'app-text-muted': productMode !== 'service',
'text-weight-bold': productMode === 'service',
}"
>
{{ pathTypeName }}
</div>
</div>
<!-- group/type -->
<div
v-if="productMode === 'group' || productMode === 'type'"

4
src/stores/employee/types.ts
View file

@ -2,6 +2,8 @@ import { District, Province, SubDistrict } from '../address';
import { Status } from '../types';
import { User } from '../user/types';
import { Customer , CustomerBranch } from '../customer/types';
export type Employee = {
id: string;
code: string;
@ -45,6 +47,8 @@ export type Employee = {
district: District | null;
province: Province | null;
profileImageUrl: string | null;
customerBranch: CustomerBranch & { customer: Customer } ;
};
export type EmployeeCreate = {

6
src/stores/utils/index.ts
View file

@ -97,7 +97,11 @@ export function formatNumberDecimal(num: number, point: number): string {
const useUtilsStore = defineStore('utilsStore', () => {
const currentTitle = ref<{
title: string;
path: { text: string; handler?: () => unknown }[];
path: {
text: string;
argsi18n?: Record<string, string>;
handler?: () => unknown;
}[];
}>({
title: '',
path: [