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

Merge branch 'dev/phatt' into develop

Browse source
This commit is contained in:
puriphatt 2024-04-09 17:58:24 +07:00
commit 3f4d88d5c4
7 changed files with 263 additions and 198 deletions
Download patch file Download diff file Expand all files Collapse all files

50
package-lock.json generated
View file

@ -1,15 +1,16 @@
{
"name": "jobs-file",
"name": "jobs-worker-service",
"version": "0.0.1",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "jobs-file",
"name": "jobs-worker-service",
"version": "0.0.1",
"dependencies": {
"@quasar/extras": "^1.16.9",
"@tato30/vue-pdf": "^1.9.5",
"@vuepic/vue-datepicker": "^8.4.0",
"axios": "^1.6.8",
"keycloak-js": "^24.0.2",
"mime": "^4.0.1",
@ -23,6 +24,7 @@
"vue-router": "^4.3.0"
},
"devDependencies": {
"@iconify/vue": "^4.1.1",
"@intlify/unplugin-vue-i18n": "^4.0.0",
"@quasar/app-vite": "2.0.0-beta.2",
"@types/node": "^20.11.30",
@ -562,6 +564,27 @@
"integrity": "sha512-6EwiSjwWYP7pTckG6I5eyFANjPhmPjUX9JRLUSfNPC7FX7zK9gyZAfUEaECL6ALTpGX5AjnBq3C9XmVWPitNpw==",
"dev": true
},
"node_modules/@iconify/types": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz",
"integrity": "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==",
"dev": true
},
"node_modules/@iconify/vue": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/@iconify/vue/-/vue-4.1.1.tgz",
"integrity": "sha512-RL85Bm/DAe8y6rT6pux7D2FJSiUEM/TPfyK7GrbAOfTSwrhvwJW+S5yijdGcmtXouA8MtuH9C7l4hiSE4mLMjg==",
"dev": true,
"dependencies": {
"@iconify/types": "^2.0.0"
},
"funding": {
"url": "https://github.com/sponsors/cyberalien"
},
"peerDependencies": {
"vue": ">=3"
}
},
"node_modules/@intlify/bundle-utils": {
"version": "8.0.0",
"resolved": "https://registry.npmjs.org/@intlify/bundle-utils/-/bundle-utils-8.0.0.tgz",
@ -1582,6 +1605,20 @@
"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.21.tgz",
"integrity": "sha512-PuJe7vDIi6VYSinuEbUIQgMIRZGgM8e4R+G+/dQTk0X1NEdvgvvgv7m+rfmDH1gZzyA1OjjoWskvHlfRNfQf3g=="
},
"node_modules/@vuepic/vue-datepicker": {
"version": "8.4.0",
"resolved": "https://registry.npmjs.org/@vuepic/vue-datepicker/-/vue-datepicker-8.4.0.tgz",
"integrity": "sha512-Twgvqwd5GrQf3JT2DvAQ/Ku0+sM51zsH1OkQKoRwYqJyF+EugItS8I0CveYmcI3Gbu92RZ9C3DMutvkaiuDzAQ==",
"dependencies": {
"date-fns": "^3.6.0"
},
"engines": {
"node": ">=18.12.0"
},
"peerDependencies": {
"vue": ">=3.2.0"
}
},
"node_modules/abbrev": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
@ -2555,6 +2592,15 @@
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
"integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
},
"node_modules/date-fns": {
"version": "3.6.0",
"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz",
"integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==",
"funding": {
"type": "github",
"url": "https://github.com/sponsors/kossnocorp"
}
},
"node_modules/debug": {
"version": "4.3.4",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",

1
package.json
View file

@ -16,6 +16,7 @@
"dependencies": {
"@quasar/extras": "^1.16.9",
"@tato30/vue-pdf": "^1.9.5",
"@vuepic/vue-datepicker": "^8.4.0",
"axios": "^1.6.8",
"keycloak-js": "^24.0.2",
"mime": "^4.0.1",

3
src/boot/components.ts
View file

@ -1,8 +1,11 @@
import { boot } from 'quasar/wrappers';
import VueDatePicker from '@vuepic/vue-datepicker';
import '@vuepic/vue-datepicker/dist/main.css'
import GlobalDialog from 'components/GlobalDialog.vue';
import GlobalLoading from 'components/GlobalLoading.vue';
export default boot(({ app }) => {
app.component('global-dialog', GlobalDialog);
app.component('global-loading', GlobalLoading);
app.component('VueDatePicker', VueDatePicker);
});

2
src/components/01_branch-management/BtnAddComponent.vue
View file

@ -16,7 +16,7 @@ defineProps<{
round
/>
</div>
<div class="row q-mt-sm color-text">{{ label }}</div>
<div class="row q-mt-sm color-text" v-if="label">{{ $t(label) }}</div>
</div>
</template>

399
src/components/FormDialog.vue
View file

@ -4,21 +4,19 @@ import AppBox from 'components/app/AppBox.vue';
defineProps<{
title: string;
addressLocaleTitle: string;
addressEngTitle: string;
addressTitle: string;
addressENTitle: string;
submit?: (...args: unknown[]) => void;
close?: (...args: unknown[]) => void;
}>();
interface Address {
address: string;
province: string;
district: string;
subDistrict: string;
zip: string;
}
const modal = defineModel('modal', { default: false });
const addressL = defineModel<Address>('addressL');
const addressEng = defineModel<Address>('addressEng');
const address = defineModel('address', { default: '' });
const addressEN = defineModel('addressEN', { default: '' });
const provinceId = defineModel('provinceId');
const districtId = defineModel('districtId');
const subDistrictId = defineModel('subDistrictId');
const zipCode = defineModel('zipCode', { default: '' });
const addrOptions = ref({
provinceOps: [
@ -37,194 +35,207 @@ const addrOptions = ref({
</script>
<template>
<q-dialog full-width v-model="modal">
<AppBox
v-if="addressL && addressEng"
style="padding: 0; border-radius: var(--radius-2)"
>
<!-- header -->
<q-card-section class="form-header">
<div class="row items-center justity-between">
<div
class="col text-subtitle1 text-weight-bold"
style="color: hsl(var(--info-bg))"
>
{{ title }}
</div>
<q-btn
round
flat
icon="mdi-close"
padding="xs"
class="close-btn"
:class="{ dark: $q.dark.isActive }"
v-close-popup
/>
</div>
</q-card-section>
<!-- form-top -->
<div class="form-body-top" :class="{ dark: $q.dark.isActive }">
<q-card-section class="column col-12">
<div class="row q-col-gutter-x-md" style="row-gap: 16px">
<slot name="top"></slot>
</div>
</q-card-section>
</div>
<!-- form-mid -->
<div class="row" style="overflow-y: auto; max-height: 50vh">
<!-- prepend -->
<q-card-section
class="column col-4"
v-if="$slots.prepend && !$slots.append"
>
<slot name="prepend"></slot>
</q-card-section>
<!-- center -->
<q-card-section
class="column"
:class="`${$slots.prepend ? 'col-8' : $slots.append ? 'col-6' : 'col-12'}`"
>
<div
class="row inline col-12 q-col-gutter-x-md"
style="row-gap: 16px"
>
<slot name="midTop"></slot>
<div class="col-12">
{{ addressLocaleTitle }}
<AppBox style="padding: 0; border-radius: var(--radius-2)">
<q-form greedy @submit.prevent @validation-success="submit">
<!-- header -->
<q-card-section class="form-header">
<div class="row items-center justity-between">
<div
class="col text-subtitle1 text-weight-bold"
style="color: hsl(var(--info-bg))"
>
{{ title }}
</div>
<q-input
dense
outlined
label="ที่อยู่"
class="col-12"
v-model="addressL.address"
<q-btn
round
flat
id="closeDialog"
icon="mdi-close"
padding="xs"
class="close-btn"
:class="{ dark: $q.dark.isActive }"
v-close-popup
@click="close"
/>
<q-select
dense
outlined
emit-value
map-options
v-model="addressL.province"
option-value="value"
option-label="label"
label="จังหวัด"
class="col-3"
:options="addrOptions.provinceOps"
/>
<q-select
dense
outlined
emit-value
map-options
v-model="addressL.district"
option-value="value"
option-label="label"
label="อำเภอ"
class="col-3"
:options="addrOptions.districtOps"
/>
<q-select
dense
outlined
emit-value
map-options
v-model="addressL.subDistrict"
option-value="value"
option-label="label"
label="ตำบล"
class="col-3"
:options="addrOptions.subDistrictOps"
/>
<q-input
dense
readonly
outlined
label="รหัสไปรษณีย์"
class="col-3"
v-model="addressL.zip"
/>
<span class="col-12">
{{ addressEngTitle }}
</span>
<q-input
dense
outlined
label="ที่อยู่"
class="col-12"
v-model="addressEng.address"
/>
<q-select
dense
outlined
emit-value
map-options
v-model="addressEng.province"
option-value="value"
option-label="label"
label="จังหวัด"
class="col-3"
:options="addrOptions.provinceOps"
/>
<q-select
dense
outlined
emit-value
map-options
v-model="addressEng.district"
option-value="value"
option-label="label"
label="อำเภอ"
class="col-3"
:options="addrOptions.districtOps"
/>
<q-select
dense
outlined
emit-value
map-options
v-model="addressEng.subDistrict"
option-value="value"
option-label="label"
label="ตำบล"
class="col-3"
:options="addrOptions.subDistrictOps"
/>
<q-input
dense
readonly
outlined
label="รหัสไปรษณีย์"
class="col-3"
v-model="addressEng.zip"
/>
<div class="col-12" v-if="$slots.midBottom">
<q-separator size="1px" />
</div>
<slot name="midBottom"></slot>
</div>
</q-card-section>
<!-- append -->
<q-card-section
class="column col-6"
v-if="$slots.append && !$slots.prepend"
>
<slot name="append"></slot>
</q-card-section>
</div>
<!-- footer -->
<q-card-section class="form-footer">
<div class="text-right">
<q-btn
dense
unelevated
color="primary"
class="q-px-sm"
:label="$t('save')"
/>
<!-- form-top -->
<div class="form-body-top" :class="{ dark: $q.dark.isActive }">
<q-card-section class="column col-12">
<div class="row q-col-gutter-x-md" style="row-gap: 16px">
<slot name="top"></slot>
</div>
</q-card-section>
</div>
</q-card-section>
<!-- form-mid -->
<div class="row" style="overflow-y: auto; max-height: 50vh">
<!-- prepend -->
<q-card-section
class="column col-4"
v-if="$slots.prepend && !$slots.append"
>
<slot name="prepend"></slot>
</q-card-section>
<!-- center -->
<q-card-section
class="column"
:class="`${$slots.prepend ? 'col-8' : $slots.append ? 'col-6' : 'col-12'}`"
>
<div
class="row inline col-12 q-col-gutter-x-md"
style="row-gap: 16px"
>
<slot name="midTop"></slot>
<div class="col-12">
{{ addressTitle }}
</div>
<q-input
dense
outlined
id="AddrL"
label="ที่อยู่"
class="col-12"
v-model="address"
/>
<q-select
dense
outlined
emit-value
map-options
id="selectProvinceL"
v-model="provinceId"
option-value="value"
option-label="label"
label="จังหวัด"
class="col-3"
:options="addrOptions.provinceOps"
/>
<q-select
dense
outlined
emit-value
map-options
id="selectDistrictL"
v-model="districtId"
option-value="value"
option-label="label"
label="อำเภอ"
class="col-3"
:options="addrOptions.districtOps"
/>
<q-select
dense
outlined
emit-value
map-
id="selectSubDistrictL"
v-model="subDistrictId"
option-value="value"
option-label="label"
label="ตำบล"
class="col-3"
:options="addrOptions.subDistrictOps"
/>
<q-input
dense
readonly
outlined
id="zipL"
label="รหัสไปรษณีย์"
class="col-3"
v-model="zipCode"
/>
<span class="col-12">
{{ addressENTitle }}
</span>
<q-input
dense
outlined
id="addressEN"
label="ที่อยู่"
class="col-12"
v-model="addressEN"
/>
<q-select
dense
outlined
emit-value
map-options
id="selectProvinceEN"
v-model="provinceId"
option-value="value"
option-label="label"
label="จังหวัด"
class="col-3"
:options="addrOptions.provinceOps"
/>
<q-select
dense
outlined
emit-value
map-options
id="selectDistrictEN"
v-model="districtId"
option-value="value"
option-label="label"
label="อำเภอ"
class="col-3"
:options="addrOptions.districtOps"
/>
<q-select
dense
outlined
emit-value
map-options
id="SelectSubDistrictEN"
v-model="subDistrictId"
option-value="value"
option-label="label"
label="ตำบล"
class="col-3"
:options="addrOptions.subDistrictOps"
/>
<q-input
dense
readonly
outlined
zip="zipEN"
label="รหัสไปรษณีย์"
class="col-3"
v-model="zipCode"
/>
<div class="col-12" v-if="$slots.midBottom">
<q-separator size="1px" />
</div>
<slot name="midBottom"></slot>
</div>
</q-card-section>
<!-- append -->
<q-card-section
class="column col-6"
v-if="$slots.append && !$slots.prepend"
>
<slot name="append"></slot>
</q-card-section>
</div>
<!-- footer -->
<q-card-section class="form-footer">
<div class="text-right">
<q-btn
dense
unelevated
id="submitBtn"
type="submit"
color="primary"
class="q-px-sm"
:label="$t('save')"
/>
</div>
</q-card-section>
</q-form>
</AppBox>
</q-dialog>
</template>

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

@ -159,7 +159,7 @@ const status = ref(false);
>
{{ d.label }}
</span>
<span>{{ d.value }}</span>
<span>{{ d.value || '-' }}</span>
</div>
</div>
</AppBox>

4
src/css/quasar.variables.scss
View file

@ -47,3 +47,7 @@ $separator-dark-color: var(--border-color);
.q-dialog__backdrop {
background-color: hsla(0 0% 60% / 0.4) !important;
}
.q-field--dense .q-field__label {
font-family: 'Noto Sans Thai', sans-serif;
}