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

refactor: responsive (#180)

Browse source 
* refactor: can open one dropdown whe lt.md

* style: update MainLayout background color and fix avatar border class name

* feat: add touch position binding for dropdown in ProfileMenu

* refactor: enhance icon styling in DrawerComponent

* fix: update screen size conditions

* feat: add responsive search and filter functionality in MainPage

* feat: update styling and functionality in BasicInformation and MainPage components

* feat: package view mode improve layout and responsiveness

* feat: improve layout and responsiveness of ProfileBanner component

* feat: enhance TreeView component with improved icon layout and cursor pointer styling

* feat: update DialogForm component to prevent text wrapping in the center column

* feat: enhance FormDocument, PriceDataComponent, and BasicInfoProduct components with layout and styling improvements

* feat: enhance ProfileBanner dark tab

* feat: 02 => responsive & responsibleArea type

* fix: layout header bg condition & 02 filter col

* feat: 04 flow => add AddButton component and enhance layout in FormFlow and FlowDialog

* feat: 07 => enhance layout and responsiveness

* refactor: simplify header structure and improve layout consistency

* fix: improve text color in ItemCard and adjust responsive breakpoints in product service group

* refactor: 05 => enhance layout responsiveness and improve class bindings in quotation components

* refactor: enhance styling and improve props flexibility in dialog and select components

* refactor: 05 => enhance layout responsiveness in quotation components

* refactor: 05 => enhance layout responsiveness

* refactor: 05 => formWorkerAdd

* refactor: 05 => formWorkerAdd Product table

* refactor: 05 => improve layout responsiveness and enhance component structure

* refactor: enhance grid view handling and improve component imports

* refactor: improve column classes for better layout consistency

* refactor: 09 => enhance layout structure and improve responsiveness in task order views

* refactor: 10 => enhance invoice main page layout and improve component interactions

* refactor: 13 => enhance receipt main page layout and improve component interactions

* refactor: 11 => enhance layout and improve responsiveness in credit note pages

* refactor: 01 => screen.sm search & filter

* refactor: 01 => improve layout responsiveness and fix variable naming in branch management forms

---------

Co-authored-by: puriphatt <puriphat@frappet.com>
This commit is contained in:
Methapon Metanipat 2025-01-27 10:39:53 +07:00 • committed by GitHub
parent 79ec995547
commit e0c1725001
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
45 changed files with 993 additions and 609 deletions
Download patch file Download diff file Expand all files Collapse all files

16
src/components/01_branch-management/FormBank.vue
View file

@ -44,7 +44,7 @@ defineEmits<{
}>(); }>();
const bankBookOptions = ref<Record<string, unknown>[]>([]); const bankBookOptions = ref<Record<string, unknown>[]>([]);
let bankBoookFilter: ( let bankBookFilter: (
value: string, value: string,
update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void, update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
) => void; ) => void;
@ -77,7 +77,7 @@ function change(e: Event) {
onMounted(() => { onMounted(() => {
if (optionStore.globalOption) { if (optionStore.globalOption) {
bankBoookFilter = selectFilterOptionRefMod( bankBookFilter = selectFilterOptionRefMod(
ref(optionStore.globalOption.bankBook), ref(optionStore.globalOption.bankBook),
bankBookOptions, bankBookOptions,
'label', 'label',
@ -94,7 +94,7 @@ onMounted(() => {
watch( watch(
() => optionStore.globalOption, () => optionStore.globalOption,
() => { () => {
bankBoookFilter = selectFilterOptionRefMod( bankBookFilter = selectFilterOptionRefMod(
ref(optionStore.globalOption.bankBook), ref(optionStore.globalOption.bankBook),
bankBookOptions, bankBookOptions,
'label', 'label',
@ -131,8 +131,8 @@ watch(
<div <div
v-for="(book, i) in bankBookList" v-for="(book, i) in bankBookList"
class="col-12 row" class="col-12"
:class="{ 'q-pt-lg': i !== 0 }" :class="{ 'q-pt-lg': i !== 0, row: $q.screen.gt.sm }"
:key="i" :key="i"
> >
<q-separator <q-separator
@ -172,8 +172,8 @@ watch(
</span> </span>
<div <div
class="bordered q-mr-sm rounded" class="bordered q-mr-sm rounded col text-center overflow-hidden"
:class="{ 'pointer-none': readonly }" :class="{ 'pointer-none': readonly, 'q-my-sm': $q.screen.lt.md }"
> >
<ImageHover <ImageHover
:readonly="readonly" :readonly="readonly"
@ -214,7 +214,7 @@ watch(
@update:model-value=" @update:model-value="
(v) => (typeof v === 'string' ? (book.bankName = v) : '') (v) => (typeof v === 'string' ? (book.bankName = v) : '')
" "
@filter="bankBoookFilter" @filter="bankBookFilter"
@clear="book.bankName = ''" @clear="book.bankName = ''"
> >
<template v-slot:option="scope"> <template v-slot:option="scope">

6
src/components/01_branch-management/FormBranchContact.vue
View file

@ -67,7 +67,7 @@ defineProps<{
outlined outlined
:readonly="readonly" :readonly="readonly"
hide-bottom-space hide-bottom-space
class="col-6 col-md-4" class="col-12 col-md-4"
:label="$t('form.telephone')" :label="$t('form.telephone')"
for="input-telephone-no" for="input-telephone-no"
:model-value="readonly ? telephoneNo || '-' : telephoneNo" :model-value="readonly ? telephoneNo || '-' : telephoneNo"
@ -116,7 +116,7 @@ defineProps<{
outlined outlined
:readonly="readonly" :readonly="readonly"
hide-bottom-space hide-bottom-space
class="col-6 col-md-4" class="col-12 col-md-4"
:label="$t('branch.form.contactTelephone')" :label="$t('branch.form.contactTelephone')"
for="input-contact" for="input-contact"
:model-value="readonly ? contact || '-' : contact" :model-value="readonly ? contact || '-' : contact"
@ -139,7 +139,7 @@ defineProps<{
outlined outlined
:readonly="readonly" :readonly="readonly"
hide-bottom-space hide-bottom-space
class="col-6 col-md-4" class="col-12 col-md-4"
:label="$t('branch.form.webUrl')" :label="$t('branch.form.webUrl')"
for="input-web-url" for="input-web-url"
:model-value="readonly ? webUrl || '-' : webUrl" :model-value="readonly ? webUrl || '-' : webUrl"

6
src/components/01_branch-management/FormBranchInformation.vue
View file

@ -203,7 +203,7 @@ function formatCode(input: string | undefined, type: 'code' | 'number') {
outlined outlined
:readonly="readonly" :readonly="readonly"
hide-bottom-space hide-bottom-space
class="col-4" class="col-md-4 col-12"
:label="$t('general.licenseNumber')" :label="$t('general.licenseNumber')"
v-model="permitNo" v-model="permitNo"
:rules="[(val) => val && val.length > 0]" :rules="[(val) => val && val.length > 0]"
@ -212,7 +212,7 @@ function formatCode(input: string | undefined, type: 'code' | 'number') {
/> />
<DatePicker <DatePicker
class="col-3" class="col-md-3 col-12"
id="input-start-date" id="input-start-date"
:readonly="readonly" :readonly="readonly"
:label="$t('general.dateOfIssue')" :label="$t('general.dateOfIssue')"
@ -221,7 +221,7 @@ function formatCode(input: string | undefined, type: 'code' | 'number') {
/> />
<DatePicker <DatePicker
class="col-3" class="col-md-3 col-12"
id="input-start-date" id="input-start-date"
:readonly="readonly" :readonly="readonly"
:label="$t('general.expirationDate')" :label="$t('general.expirationDate')"

14
src/components/04_flow-management/FormFlow.vue
View file

@ -19,6 +19,7 @@ import SelectMenuWithSearch from '../shared/SelectMenuWithSearch.vue';
import ToggleButton from 'src/components/button/ToggleButton.vue'; import ToggleButton from 'src/components/button/ToggleButton.vue';
import NoData from '../NoData.vue'; import NoData from '../NoData.vue';
import SelectBranch from '../shared/select/SelectBranch.vue'; import SelectBranch from '../shared/select/SelectBranch.vue';
import AddButton from '../button/AddButton.vue';
defineProps<{ defineProps<{
readonly?: boolean; readonly?: boolean;
@ -127,6 +128,7 @@ function optionSearch(val: string | null) {
defineEmits<{ defineEmits<{
(e: 'moveUp'): void; (e: 'moveUp'): void;
(e: 'addStep'): void;
(e: 'moveDown'): void; (e: 'moveDown'): void;
(e: 'changeStatus'): void; (e: 'changeStatus'): void;
(e: 'triggerProperties', step: WorkFlowPayloadStep): void; (e: 'triggerProperties', step: WorkFlowPayloadStep): void;
@ -159,7 +161,10 @@ onMounted(async () => {
style="background-color: var(--surface-3)" style="background-color: var(--surface-3)"
/> />
{{ $t(`general.name`, { msg: $t('flow.title') }) }} {{ $t(`general.name`, { msg: $t('flow.title') }) }}
<span class="row q-ml-lg items-center text-weight-regular text-body2"> <span
class="row items-center text-weight-regular text-body2"
:class="{ 'q-ml-lg': $q.screen.gt.xs, 'q-mt-sm': $q.screen.lt.sm }"
>
<ToggleButton <ToggleButton
class="q-mr-sm" class="q-mr-sm"
two-way two-way
@ -216,6 +221,13 @@ onMounted(async () => {
style="background-color: var(--surface-3)" style="background-color: var(--surface-3)"
/> />
{{ $t(`flow.processStep`) }} {{ $t(`flow.processStep`) }}
<AddButton
v-if="!readonly && $q.screen.lt.md"
id="btn-add-work"
icon-only
class="q-ml-sm"
@click="$emit('addStep')"
/>
</section> </section>
<section <section

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

@ -229,7 +229,7 @@ const detailEditorImageDrop = createEditorImageDrop(detail);
" "
@drop="detailEditorImageDrop" @drop="detailEditorImageDrop"
min-height="5rem" min-height="5rem"
class="q-mt-sm q-mb-xs" class="q-mt-sm q-mb-xs col"
:flat="!readonly" :flat="!readonly"
:readonly="readonly" :readonly="readonly"
:toolbar-color=" :toolbar-color="
@ -275,4 +275,8 @@ const detailEditorImageDrop = createEditorImageDrop(detail);
:deep(.q-editor__toolbar) { :deep(.q-editor__toolbar) {
border-color: var(--surface-3) !important; border-color: var(--surface-3) !important;
} }
:deep(.q-editor.q-editor--default) {
width: 1px;
}
</style> </style>

21
src/components/04_product-service/BasicInformation.vue
View file

@ -168,7 +168,7 @@ const detailEditorImageDrop = createEditorImageDrop(detail);
/> />
<q-field <q-field
class="full-width" class="col-12"
outlined outlined
for="input-service-description" for="input-service-description"
id="input-service-description" id="input-service-description"
@ -180,31 +180,34 @@ const detailEditorImageDrop = createEditorImageDrop(detail);
> >
<q-editor <q-editor
dense dense
class="q-mt-sm q-mb-xs col"
:model-value=" :model-value="
readonly ? serviceDescription || '-' : serviceDescription || '' readonly ? serviceDescription || '-' : serviceDescription || ''
" "
@update:model-value="
(v) => (typeof v === 'string' ? (serviceDescription = v) : '')
"
@drop="detailEditorImageDrop"
min-height="5rem" min-height="5rem"
class="q-mt-sm q-mb-xs"
:flat="!readonly" :flat="!readonly"
:readonly="readonly" :readonly="readonly"
:toolbar-toggle-color="readonly ? 'disabled' : 'primary'"
:toolbar-color=" :toolbar-color="
readonly ? 'disabled' : $q.dark.isActive ? 'white' : '' readonly ? 'disabled' : $q.dark.isActive ? 'white' : ''
" "
:toolbar-toggle-color="readonly ? 'disabled' : 'primary'"
style=" style="
cursor: auto; cursor: auto;
color: var(--foreground); color: var(--foreground);
border-color: var(--surface-3); border-color: var(--surface-3);
" "
:style="`width: ${$q.screen.gt.xs ? '100%' : '63vw'}`" @update:model-value="
(v) => (typeof v === 'string' ? (serviceDescription = v) : '')
"
@drop="detailEditorImageDrop"
/> />
</q-field> </q-field>
</div> </div>
</div> </div>
</template> </template>
<style scoped></style> <style scoped>
:deep(.q-editor.q-editor--default) {
width: 1px;
}
</style>

1
src/components/04_product-service/FormDocument.vue
View file

@ -106,6 +106,7 @@ function optionSearch(val: string | null) {
<div class="col-12 row q-col-gutter-sm"> <div class="col-12 row q-col-gutter-sm">
<q-select <q-select
behavior="menu"
:readonly :readonly
outlined outlined
dense dense

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

@ -164,7 +164,7 @@ withDefaults(
</div> </div>
</div> </div>
<div class="col-12"> <div class="col-12 full-width">
<q-table <q-table
:columns="column" :columns="column"
:rows="row" :rows="row"

2
src/components/05_quotation/FormAbout.vue
View file

@ -38,7 +38,7 @@ defineEmits<{
style="background-color: var(--surface-3)" style="background-color: var(--surface-3)"
/> />
{{ $t(`general.about`) }} {{ $t(`general.about`) }}
<div class="q-ml-md text-weight-regular"> <div class="text-weight-regular" :class="{ 'q-ml-md ': $q.screen.gt.sm }">
<q-checkbox <q-checkbox
:label="$t('productService.product.agentPrice')" :label="$t('productService.product.agentPrice')"
size="xs" size="xs"

8
src/components/05_quotation/QuotationCard.vue
View file

@ -1,9 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { Icon } from '@iconify/vue/dist/iconify.js';
import { formatNumberDecimal } from 'src/stores/utils'; import { formatNumberDecimal } from 'src/stores/utils';
import BadgeComponent from 'components/BadgeComponent.vue'; import BadgeComponent from 'components/BadgeComponent.vue';
import KebabAction from '../shared/KebabAction.vue'; import KebabAction from '../shared/KebabAction.vue';
import MainButton from '../button/MainButton.vue';
defineProps<{ defineProps<{
title?: string; title?: string;
@ -48,7 +46,7 @@ const rand = Math.random();
</script> </script>
<template> <template>
<div <div
class="surface-1 rounded q-pa-sm quo-card bordered" class="surface-1 rounded q-pa-sm quo-card bordered column"
:class="{ 'urgent-card': urgent }" :class="{ 'urgent-card': urgent }"
:style="{ '--animation-delay': rand + 's' }" :style="{ '--animation-delay': rand + 's' }"
> >
@ -71,7 +69,7 @@ const rand = Math.random();
/> />
</div> </div>
<nav class="col text-right"> <nav class="col text-right no-wrap">
<q-btn <q-btn
v-if="!hidePreview" v-if="!hidePreview"
flat flat
@ -125,7 +123,7 @@ const rand = Math.random();
<!-- SEC: body --> <!-- SEC: body -->
<section <section
class="rounded q-px-sm" class="rounded q-px-sm col"
:class="{ :class="{
'surface-1': urgent, 'surface-1': urgent,
'surface-2': !urgent, 'surface-2': !urgent,

5
src/components/07_agencies-management/FormBasicInfoAgencies.vue
View file

@ -35,6 +35,7 @@ type Options = { label: string; value: string };
<div class="col-12 row q-col-gutter-sm"> <div class="col-12 row q-col-gutter-sm">
<SelectInput <SelectInput
:class="{ col: $q.screen.lt.md }"
:disable="!readonly && onDrawer" :disable="!readonly && onDrawer"
:readonly="readonly" :readonly="readonly"
for="input-agencies-code" for="input-agencies-code"
@ -60,7 +61,7 @@ type Options = { label: string; value: string };
outlined outlined
:readonly="readonly" :readonly="readonly"
hide-bottom-space hide-bottom-space
class="col" class="col-md col-12"
:label="$t('agencies.name')" :label="$t('agencies.name')"
v-model="name" v-model="name"
:rules="[(val: string) => !!val || $t('form.error.required')]" :rules="[(val: string) => !!val || $t('form.error.required')]"
@ -71,7 +72,7 @@ type Options = { label: string; value: string };
outlined outlined
:readonly="readonly" :readonly="readonly"
hide-bottom-space hide-bottom-space
class="col" class="col-md col-12"
:label="'Agencies Name'" :label="'Agencies Name'"
v-model="nameEn" v-model="nameEn"
/> />

2
src/components/DialogForm.vue
View file

@ -202,7 +202,7 @@ const currentTab = defineModel<string>('currentTab');
</div> </div>
<!-- center --> <!-- center -->
<div class="col column full-height"> <div class="col column full-height no-wrap">
<slot></slot> <slot></slot>
</div> </div>

4
src/components/ItemCard.vue
View file

@ -42,7 +42,9 @@ onMounted(() => {
:class="{ dark: $q.dark.isActive }" :class="{ dark: $q.dark.isActive }"
:style="`background-color: ${bgColor}`" :style="`background-color: ${bgColor}`"
> >
<div style="font-size: 14px">{{ $t(text) }}</div> <div style="font-size: 14px; color: var(--foreground)">
{{ $t(text) }}
</div>
</div> </div>
</div> </div>
</button> </button>

33
src/components/ProfileBanner.vue
View file

@ -154,15 +154,15 @@ const smallBanner = ref(false);
class="absolute-bottom-right" class="absolute-bottom-right"
style=" style="
border-radius: 50%; border-radius: 50%;
width: 20px; width: 1.25vw;
height: 20px; height: 1.25vw;
z-index: 2; z-index: 2;
background: var(--surface-1); background: var(--surface-1);
" "
> >
<q-badge <q-badge
class="absolute-center" class="absolute-center"
style="border-radius: 50%; width: 14px; height: 14px" style="border-radius: 50%; width: 0.8vw; height: 0.8vw"
:style="`background: hsl(var(${active ? '--positive-bg' : '--text-mute'}))`" :style="`background: hsl(var(${active ? '--positive-bg' : '--text-mute'}))`"
></q-badge> ></q-badge>
</q-badge> </q-badge>
@ -193,7 +193,7 @@ const smallBanner = ref(false);
> >
<div <div
class="row justify-between full-height" class="row justify-between full-height"
style="padding-left: 7.5vw" style="padding-left: calc(6vw + 50px)"
> >
<div class="col column"> <div class="col column">
<span <span
@ -261,7 +261,7 @@ const smallBanner = ref(false);
inline-label inline-label
mobile-arrows mobile-arrows
v-model="currentTab" v-model="currentTab"
active-class="active-tab text-weight-bold" :active-class="`active-tab text-weight-bold ${$q.dark.isActive && 'dark'}`"
class="app-text-muted full-width" class="app-text-muted full-width"
align="left" align="left"
v-if="typeof tabsList === 'object'" v-if="typeof tabsList === 'object'"
@ -271,6 +271,7 @@ const smallBanner = ref(false);
:id="`${prefix}-tab-${tab.label}`" :id="`${prefix}-tab-${tab.label}`"
v-bind:key="tab.name" v-bind:key="tab.name"
class="content-tab text-capitalize" class="content-tab text-capitalize"
:class="{ 'tab-label': currentTab !== tab.name }"
:name="tab.name" :name="tab.name"
:label="tab.label" :label="tab.label"
/> />
@ -302,7 +303,11 @@ const smallBanner = ref(false);
> >
<!-- profile --> <!-- profile -->
<span class="row col items-center"> <span class="row col items-center">
<div class="flex items-center full-height q-pl-lg" style="z-index: 1"> <div
class="flex items-center full-height"
:class="{ 'q-pl-lg': $q.screen.gt.sm, 'q-pl-sm': $q.screen.lt.md }"
style="z-index: 1"
>
<div <div
class="surface-1" class="surface-1"
style="border-radius: 50%; border: 2px solid var(--surface-1)" style="border-radius: 50%; border: 2px solid var(--surface-1)"
@ -347,13 +352,14 @@ const smallBanner = ref(false);
<Icon <Icon
class="full-width full-height flex items-center justify-center" class="full-width full-height flex items-center justify-center"
:icon="icon || 'mdi-account'" :icon="icon || 'mdi-account'"
style="width: 25px !important"
/> />
</div> </div>
</template> </template>
</q-img> </q-img>
<div <div
v-else v-else
class="full-width full-height flex items-center justify-center" class="full-width full-height flex items-center justify-center no-padding"
:style="{ :style="{
background: `${bgColor || 'var(--brand-1)'}`, background: `${bgColor || 'var(--brand-1)'}`,
color: `${color || 'white'}`, color: `${color || 'white'}`,
@ -362,6 +368,7 @@ const smallBanner = ref(false);
<Icon <Icon
class="full-width full-height flex items-center justify-center" class="full-width full-height flex items-center justify-center"
:icon="icon || 'mdi-account'" :icon="icon || 'mdi-account'"
style="width: 25px !important"
/> />
</div> </div>
</template> </template>
@ -378,6 +385,7 @@ const smallBanner = ref(false);
<Icon <Icon
class="full-width full-height flex items-center justify-center" class="full-width full-height flex items-center justify-center"
:icon="icon || 'mdi-account'" :icon="icon || 'mdi-account'"
style="width: 25px !important"
/> />
</div> </div>
@ -425,7 +433,7 @@ const smallBanner = ref(false);
inline-label inline-label
mobile-arrows mobile-arrows
v-model="currentTab" v-model="currentTab"
active-class="active-tab text-weight-bold" :active-class="`active-tab text-weight-bold ${$q.dark.isActive && 'dark'}`"
class="app-text-muted full-width" class="app-text-muted full-width"
align="left" align="left"
v-if="typeof tabsList === 'object'" v-if="typeof tabsList === 'object'"
@ -435,6 +443,7 @@ const smallBanner = ref(false);
:id="`${prefix}-tab-${tab.label}`" :id="`${prefix}-tab-${tab.label}`"
v-bind:key="tab.name" v-bind:key="tab.name"
class="content-tab text-capitalize" class="content-tab text-capitalize"
:class="{ 'tab-label': currentTab !== tab.name }"
:name="tab.name" :name="tab.name"
:label="tab.label" :label="tab.label"
/> />
@ -526,5 +535,13 @@ const smallBanner = ref(false);
.active-tab { .active-tab {
color: var(--brand-1); color: var(--brand-1);
&.dark {
filter: brightness(1.3);
}
}
.tab-label {
color: var(--foreground);
opacity: 75%;
} }
</style> </style>

6
src/components/dialog/DialogViewFile.vue
View file

@ -57,13 +57,13 @@ async function downloadImage(url: string | null) {
<main class="column full-height"> <main class="column full-height">
<section <section
v-if="!hideTab" v-if="!hideTab"
style="background: var(--gray-3)" :style="`background: var(${$q.dark.isActive ? '--gray-8' : '--gray-3'})`"
class="q-py-sm row justify-center" class="q-py-sm row justify-center"
> >
<div class="surface-2 q-px-md q-py-sm rounded row no-wrap items-center"> <div class="surface-2 q-px-md q-py-sm rounded row no-wrap items-center">
<MainButton <MainButton
icon="mdi-minus" icon="mdi-minus"
color="0 0% 0%" :color="`var(--gray-${$q.dark.isActive ? '1' : '11'}-hsl)`"
icon-only icon-only
@click=" @click="
() => { () => {
@ -90,7 +90,7 @@ async function downloadImage(url: string | null) {
></q-input> ></q-input>
<MainButton <MainButton
icon="mdi-plus" icon="mdi-plus"
color="0 0% 0%" :color="`var(--gray-${$q.dark.isActive ? '1' : '11'}-hsl)`"
icon-only icon-only
@click=" @click="
() => { () => {

4
src/components/shared/SelectInput.vue
View file

@ -16,8 +16,8 @@ const props = withDefaults(
id?: string; id?: string;
label?: string; label?: string;
option: T[]; option: T[];
optionLabel?: keyof T; optionLabel?: keyof T | string;
optionValue?: keyof T; optionValue?: keyof T | string;
placeholder?: string; placeholder?: string;
hideSelected?: boolean; hideSelected?: boolean;

6
src/components/shared/SelectZone.vue
View file

@ -74,16 +74,16 @@ function assignSelect(to: unknown[], from: unknown[]) {
<template> <template>
<section class="full-width column"> <section class="full-width column">
<header <header
class="row items-center no-wrap q-px-md q-py-sm" class="row items-center q-px-md q-py-sm"
:class="{ 'bordered surface-3 ': borderSearchSection }" :class="{ 'bordered surface-3 ': borderSearchSection }"
> >
<div class="col"><slot name="top"></slot></div> <div class="col-12 col-md"><slot name="top"></slot></div>
<q-input <q-input
for="input-search" for="input-search"
outlined outlined
dense dense
:label="$t('general.search')" :label="$t('general.search')"
class="q-ml-auto" class="col-12 col-md-3"
:bg-color="$q.dark.isActive ? 'dark' : 'white'" :bg-color="$q.dark.isActive ? 'dark' : 'white'"
v-model="search" v-model="search"
debounce="300" debounce="300"

27
src/components/shared/TreeView.vue
View file

@ -118,6 +118,9 @@ function visibleNode(text: string, node: Node, ancestor?: Node[]): boolean {
<template v-for="(node, i) in nodes" :key="i"> <template v-for="(node, i) in nodes" :key="i">
<div <div
class="tree-item" class="tree-item"
:class="{
'cursor-pointer': node.children ? true : undefined,
}"
v-if="filterText ? visibleNode(filterText, node, ancestorNode) : true" v-if="filterText ? visibleNode(filterText, node, ancestorNode) : true"
> >
<slot <slot
@ -205,19 +208,21 @@ function visibleNode(text: string, node: Node, ancestor?: Node[]): boolean {
/> />
</label> </label>
<div <div>
class="item__icon flex items-center justify-center"
:style="`background: ${node.bg || dec?.bg}; color: ${node.fg || dec?.fg}; height: ${iconSize}; width: ${iconSize}`"
>
<div <div
class="flex items-center justify-center" class="item__icon flex items-center justify-center"
:style="`height: calc(${iconSize} - 40%); width: calc(${iconSize} - 40%)`" :style="`background: ${node.bg || dec?.bg}; color: ${node.fg || dec?.fg}; height: ${iconSize}; width: ${iconSize}`"
> >
<Icon <div
v-if="(node.icon && dec && dec.icon) || (dec && dec.icon)" class="flex items-center justify-center"
:icon="node.icon || dec.icon" :style="`height: calc(${iconSize} - 40%); width: calc(${iconSize} - 40%)`"
class="full-width full-height" >
/> <Icon
v-if="(node.icon && dec && dec.icon) || (dec && dec.icon)"
:icon="node.icon || dec.icon"
class="full-width full-height"
/>
</div>
</div> </div>
</div> </div>

33
src/layouts/DrawerComponent.vue
View file

@ -5,6 +5,7 @@ import { storeToRefs } from 'pinia';
import { Icon } from '@iconify/vue'; import { Icon } from '@iconify/vue';
import useMyBranch from 'stores/my-branch'; import useMyBranch from 'stores/my-branch';
import { getUserId, getRole } from 'src/services/keycloak'; import { getUserId, getRole } from 'src/services/keycloak';
import { useQuasar } from 'quasar';
type Menu = { type Menu = {
label: string; label: string;
@ -17,6 +18,8 @@ type Menu = {
}; };
const router = useRouter(); const router = useRouter();
const $q = useQuasar();
const userBranch = useMyBranch(); const userBranch = useMyBranch();
const { currentMyBranch } = storeToRefs(userBranch); const { currentMyBranch } = storeToRefs(userBranch);
@ -35,17 +38,6 @@ const currentPath = computed(() => {
return router.currentRoute.value.path; return router.currentRoute.value.path;
}); });
// const labelMenu = ref<
// {
// label: string;
// icon: string;
// route: string;
// hidden?: boolean;
// disabled?: boolean;
// isax?: boolean;
// }[]
// >([]);
function navigateTo(label: string, destination?: string) { function navigateTo(label: string, destination?: string) {
if (!destination) return; if (!destination) return;
router.push(`${destination}`); router.push(`${destination}`);
@ -57,6 +49,8 @@ function reActiveMenu() {
); );
const currMenuIndex = menuData.value.findIndex((m) => m === currMenu); const currMenuIndex = menuData.value.findIndex((m) => m === currMenu);
if ($q.screen.lt.sm) menuActive.value.fill(false);
menuActive.value[currMenuIndex] = true; menuActive.value[currMenuIndex] = true;
} }
@ -204,7 +198,6 @@ onMounted(async () => {
:width="mini ? 80 : 256" :width="mini ? 80 : 256"
show-if-above show-if-above
> >
<!-- :width="$q.screen.lt.sm ? $q.screen.width - 16 : 256" -->
<section <section
class="scroll" class="scroll"
style="overflow-x: hidden; scrollbar-gutter: stable" style="overflow-x: hidden; scrollbar-gutter: stable"
@ -236,7 +229,6 @@ onMounted(async () => {
:disable="menu.disabled" :disable="menu.disabled"
:header-class="{ :header-class="{
row: true, row: true,
'justify-between': !mini,
'no-padding justify-center': mini, 'no-padding justify-center': mini,
'active-menu text-weight-bold': menuActive[i], 'active-menu text-weight-bold': menuActive[i],
'text-weight-medium': !menu.disabled, 'text-weight-medium': !menu.disabled,
@ -254,7 +246,12 @@ onMounted(async () => {
:class="`isax ${menu.icon}`" :class="`isax ${menu.icon}`"
style="font-size: 24px" style="font-size: 24px"
/> />
<Icon v-else :icon="menu.icon || ''" width="24px" /> <Icon
v-else
:icon="menu.icon || ''"
width="24px"
:class="{ 'fix-icon': !menuActive[i] }"
/>
<span <span
v-if="!mini" v-if="!mini"
class="q-pl-sm" class="q-pl-sm"
@ -514,4 +511,12 @@ onMounted(async () => {
border-bottom-right-radius: var(--radius-2); border-bottom-right-radius: var(--radius-2);
} }
} }
.fix-icon {
color: var(--text-mute-2) !important;
}
:deep(.q-item.q-item-type.row.no-wrap.q-item--dense.disabled) {
opacity: 30% !important;
}
</style> </style>

5
src/layouts/MainLayout.vue
View file

@ -208,6 +208,9 @@ onMounted(async () => {
<div <div
class="q-px-lg row items-center justify-start q-pb-md q-pt-lg" class="q-px-lg row items-center justify-start q-pb-md q-pt-lg"
style="position: sticky; top: 0; z-index: 8" style="position: sticky; top: 0; z-index: 8"
:style="`
background: ${$q.screen.lt.md ? ($q.dark.isActive ? '#1c1d21' : '#ecedef') : 'transparent'};
`"
> >
<q-btn <q-btn
v-if="$q.screen.lt.sm" v-if="$q.screen.lt.sm"
@ -530,7 +533,7 @@ onMounted(async () => {
} }
} }
.avartar-border { .avatar-border {
margin-top: 24px; margin-top: 24px;
border: 5px solid var(--surface-1); border: 5px solid var(--surface-1);
border-radius: 50%; border-radius: 50%;

1
src/layouts/ProfileMenu.vue
View file

@ -317,6 +317,7 @@ onMounted(async () => {
max-width="200" max-width="200"
:offset="[10, 0]" :offset="[10, 0]"
style="width: 160px" style="width: 160px"
:touch-position="$q.screen.lt.sm"
> >
<div v-for="(mode, index) in themeMode" :key="index"> <div v-for="(mode, index) in themeMode" :key="index">
<q-item clickable @click="theme = setTheme(mode.value)"> <q-item clickable @click="theme = setTheme(mode.value)">

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

@ -6,7 +6,7 @@ import { Icon } from '@iconify/vue';
import { BranchContact } from 'stores/branch-contact/types'; import { BranchContact } from 'stores/branch-contact/types';
import { useQuasar } from 'quasar'; import { useQuasar } from 'quasar';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import type { QTableProps, QTableSlots } from 'quasar'; import type { QSelect, QTableProps, QTableSlots } from 'quasar';
import { resetScrollBar } from 'src/stores/utils'; import { resetScrollBar } from 'src/stores/utils';
import useBranchStore from 'stores/branch'; import useBranchStore from 'stores/branch';
import useFlowStore from 'stores/flow'; import useFlowStore from 'stores/flow';
@ -72,6 +72,7 @@ const typeBranchItem = [
color: 'var(--blue-6-hsl)', color: 'var(--blue-6-hsl)',
}, },
]; ];
const refFilter = ref<InstanceType<typeof QSelect>>();
const holdDialog = ref(false); const holdDialog = ref(false);
const isSubCreate = ref(false); const isSubCreate = ref(false);
const columns = [ const columns = [
@ -302,7 +303,10 @@ const stats = ref<
}[] }[]
>([]); >([]);
const splitterModel = ref(25); // const splitterModel = ref(25);
const splitterModel = computed(() =>
$q.screen.lt.md ? (currentHq.value.id ? 0 : 100) : 25,
);
const defaultFormData = { const defaultFormData = {
headOfficeId: null, headOfficeId: null,
@ -1020,12 +1024,13 @@ watch(currentHq, () => {
class="col" class="col"
before-class="overflow-hidden" before-class="overflow-hidden"
after-class="overflow-hidden" after-class="overflow-hidden"
:disable="$q.screen.lt.sm"
> >
<template v-slot:before> <template v-slot:before>
<div class="surface-1 column full-height"> <div class="surface-1 column full-height">
<div <div
class="row no-wrap full-width bordered-b text-weight-bold surface-3 items-center q-px-md q-py-sm" class="row no-wrap full-width bordered-b text-weight-bold surface-3 items-center q-px-md q-py-sm"
:style="`min-height: ${$q.screen.gt.sm ? '57px' : '100.8px'}`" :style="`min-height: ${$q.screen.gt.sm ? '57px' : ''}`"
> >
<div class="col ellipsis-2-lines"> <div class="col ellipsis-2-lines">
{{ $t('branch.allBranch') }} {{ $t('branch.allBranch') }}
@ -1157,7 +1162,7 @@ watch(currentHq, () => {
outlined outlined
dense dense
:label="$t('general.search')" :label="$t('general.search')"
class="q-mr-md col-12 col-md-4" class="col col-md-3"
:bg-color="$q.dark.isActive ? 'dark' : 'white'" :bg-color="$q.dark.isActive ? 'dark' : 'white'"
v-model="inputSearch" v-model="inputSearch"
debounce="200" debounce="200"
@ -1165,13 +1170,26 @@ watch(currentHq, () => {
<template v-slot:prepend> <template v-slot:prepend>
<q-icon name="mdi-magnify" /> <q-icon name="mdi-magnify" />
</template> </template>
<template v-if="$q.screen.lt.md" v-slot:append>
<span class="row">
<q-separator vertical />
<q-btn
icon="mdi-filter-variant"
unelevated
class="q-ml-sm"
padding="4px"
size="sm"
rounded
@click="refFilter?.showPopup"
/>
</span>
</template>
</q-input> </q-input>
<div <div class="row col-md-6 justify-end">
class="row col-12 col-md-6"
:class="{ 'q-pt-xs': $q.screen.lt.md }"
>
<q-select <q-select
v-show="$q.screen.gt.sm"
ref="refFilter"
v-model="statusFilter" v-model="statusFilter"
outlined outlined
dense dense
@ -1179,7 +1197,7 @@ watch(currentHq, () => {
option-value="value" option-value="value"
:hide-dropdown-icon="$q.screen.lt.sm" :hide-dropdown-icon="$q.screen.lt.sm"
option-label="label" option-label="label"
class="col" class="col-md-5"
map-options map-options
:for="'field-select-status'" :for="'field-select-status'"
emit-value emit-value
@ -1194,6 +1212,7 @@ watch(currentHq, () => {
></q-select> ></q-select>
<q-select <q-select
v-if="!modeView"
id="select-field" id="select-field"
for="select-field" for="select-field"
:options=" :options="
@ -1204,7 +1223,7 @@ watch(currentHq, () => {
" "
:display-value="$t('general.displayField')" :display-value="$t('general.displayField')"
:hide-dropdown-icon="$q.screen.lt.sm" :hide-dropdown-icon="$q.screen.lt.sm"
class="col q-mx-sm" class="col q-ml-sm"
v-model="fieldSelected" v-model="fieldSelected"
option-label="label" option-label="label"
option-value="value" option-value="value"
@ -1220,7 +1239,7 @@ watch(currentHq, () => {
id="btn-mode" id="btn-mode"
v-model="modeView" v-model="modeView"
dense dense
class="no-shadow bordered rounded surface-1" class="no-shadow bordered rounded surface-1 q-ml-sm"
:toggle-color="$q.dark.isActive ? 'grey-9' : 'grey-2'" :toggle-color="$q.dark.isActive ? 'grey-9' : 'grey-2'"
size="xs" size="xs"
:options="[ :options="[
@ -1266,8 +1285,26 @@ watch(currentHq, () => {
<div <div
v-if=" v-if="
inputSearch && (
treeData.flatMap((v) => [v, ...v.branch]).length === 0 currentSubBranch ||
(inputSearch !== ''
? treeData.flatMap((v) => [v, ...v.branch])
: treeData)
).filter((v) => {
if (
statusFilter === 'statusACTIVE' &&
v.status === 'INACTIVE'
) {
return false;
}
if (
statusFilter === 'statusINACTIVE' &&
v.status !== 'INACTIVE'
) {
return false;
}
return true;
}).length === 0
" "
class="row items-center justify-center full-height" class="row items-center justify-center full-height"
> >

40
src/pages/02_personnel-management/MainPage.vue
View file

@ -10,7 +10,7 @@ import useOptionStore from 'stores/options';
import useAddressStore from 'stores/address'; import useAddressStore from 'stores/address';
import useMyBranch from 'src/stores/my-branch'; import useMyBranch from 'src/stores/my-branch';
import { calculateAge } from 'src/utils/datetime'; import { calculateAge } from 'src/utils/datetime';
import { useQuasar, type QTableProps } from 'quasar'; import { QSelect, useQuasar, type QTableProps } from 'quasar';
import { dialog, baseUrl } from 'stores/utils'; import { dialog, baseUrl } from 'stores/utils';
import { useNavigator } from 'src/stores/navigator'; import { useNavigator } from 'src/stores/navigator';
import { isRoleInclude, resetScrollBar } from 'src/stores/utils'; import { isRoleInclude, resetScrollBar } from 'src/stores/utils';
@ -73,6 +73,7 @@ const isImageEdit = ref(false);
const imageDialog = ref(false); const imageDialog = ref(false);
const infoDrawerEdit = ref(false); const infoDrawerEdit = ref(false);
const refreshImageState = ref(false); const refreshImageState = ref(false);
const refFilter = ref<InstanceType<typeof QSelect>>();
const inputSearch = ref(''); const inputSearch = ref('');
const currentTab = ref<string>('ALL'); const currentTab = ref<string>('ALL');
@ -820,7 +821,7 @@ watch(
class="col surface-2 rounded justify-between column no-wrap bordered full-height overflow-hidden" class="col surface-2 rounded justify-between column no-wrap bordered full-height overflow-hidden"
> >
<div class="column"> <div class="column">
<div <header
class="row surface-3 justify-between full-width items-center bordered-b" class="row surface-3 justify-between full-width items-center bordered-b"
style="z-index: 1" style="z-index: 1"
> >
@ -830,7 +831,7 @@ watch(
outlined outlined
dense dense
:label="$t('general.search')" :label="$t('general.search')"
class="q-mr-md col-12 col-md-3" class="col col-md-3"
:bg-color="$q.dark.isActive ? 'dark' : 'white'" :bg-color="$q.dark.isActive ? 'dark' : 'white'"
v-model="inputSearch" v-model="inputSearch"
debounce="200" debounce="200"
@ -838,14 +839,26 @@ watch(
<template #prepend> <template #prepend>
<q-icon name="mdi-magnify" /> <q-icon name="mdi-magnify" />
</template> </template>
<template v-if="$q.screen.lt.md" v-slot:append>
<span class="row">
<q-separator vertical />
<q-btn
icon="mdi-filter-variant"
unelevated
class="q-ml-sm"
padding="4px"
size="sm"
rounded
@click="refFilter?.showPopup"
/>
</span>
</template>
</q-input> </q-input>
<div <div class="row col-md-5" style="white-space: nowrap">
class="row col-12 col-md-5"
:class="{ 'q-pt-xs': $q.screen.lt.md }"
style="white-space: nowrap"
>
<q-select <q-select
v-show="$q.screen.gt.sm"
ref="refFilter"
v-model="statusFilter" v-model="statusFilter"
outlined outlined
dense dense
@ -936,7 +949,7 @@ watch(
</q-btn-toggle> </q-btn-toggle>
</div> </div>
</div> </div>
</div> </header>
<div class="surface-2 bordered-b q-px-md full-width"> <div class="surface-2 bordered-b q-px-md full-width">
<q-tabs <q-tabs
@ -1521,7 +1534,7 @@ watch(
class="rounded row" class="rounded row"
:class="{ :class="{
'q-py-md q-px-lg': $q.screen.gt.sm, 'q-py-md q-px-lg': $q.screen.gt.sm,
'q-py-sm q-px-lg': !$q.screen.gt.sm, 'q-pa-sm': !$q.screen.gt.sm,
}" }"
style="position: absolute; z-index: 999; top: 0; right: 0" style="position: absolute; z-index: 999; top: 0; right: 0"
> >
@ -1618,7 +1631,7 @@ watch(
class="col-12 col-md-10 relative-position" class="col-12 col-md-10 relative-position"
:class="{ :class="{
'q-py-md q-pr-md ': $q.screen.gt.sm, 'q-py-md q-pr-md ': $q.screen.gt.sm,
'q-py-md q-px-lg': !$q.screen.gt.sm, 'q-pa-sm': !$q.screen.gt.sm,
}" }"
id="user-form-content" id="user-form-content"
style="height: 100%; max-height: 100; overflow-y: auto" style="height: 100%; max-height: 100; overflow-y: auto"
@ -1734,6 +1747,7 @@ watch(
}" }"
> >
<ProfileBanner <ProfileBanner
:prefix="formData.firstName"
active active
useToggle useToggle
color="white" color="white"
@ -1789,7 +1803,7 @@ watch(
style="position: absolute; z-index: 999; right: 0; top: 0" style="position: absolute; z-index: 999; right: 0; top: 0"
:class="{ :class="{
'q-py-md q-px-lg': $q.screen.gt.sm, 'q-py-md q-px-lg': $q.screen.gt.sm,
'q-py-sm q-px-lg': !$q.screen.gt.sm, 'q-pa-sm': !$q.screen.gt.sm,
}" }"
> >
<div class="surface-1 row rounded"> <div class="surface-1 row rounded">
@ -1837,7 +1851,7 @@ watch(
class="col-md-10 col-12 full-height scroll" class="col-md-10 col-12 full-height scroll"
:class="{ :class="{
'q-py-md q-pr-md ': $q.screen.gt.sm, 'q-py-md q-pr-md ': $q.screen.gt.sm,
'q-py-md q-px-lg': !$q.screen.gt.sm, 'q-pa-sm': !$q.screen.gt.sm,
}" }"
> >
<FormInformation <FormInformation

10
src/pages/04_flow-managment/FlowDialog.vue
View file

@ -100,7 +100,7 @@ function triggerPropertiesDialog(step: WorkFlowPayloadStep) {
style="position: absolute; z-index: 999; right: 0; top: 0" style="position: absolute; z-index: 999; right: 0; top: 0"
:class="{ :class="{
'q-py-md q-px-lg': $q.screen.gt.sm, 'q-py-md q-px-lg': $q.screen.gt.sm,
'q-py-sm q-px-lg': !$q.screen.gt.sm, 'q-pa-sm': !$q.screen.gt.sm,
}" }"
> >
<div class="surface-1 row rounded"> <div class="surface-1 row rounded">
@ -160,7 +160,7 @@ function triggerPropertiesDialog(step: WorkFlowPayloadStep) {
class="col-12 col-md-10" class="col-12 col-md-10"
:class="{ :class="{
'q-py-md q-pr-md ': $q.screen.gt.sm, 'q-py-md q-pr-md ': $q.screen.gt.sm,
'q-py-md q-px-lg': !$q.screen.gt.sm, 'q-pa-sm': !$q.screen.gt.sm,
}" }"
style="height: 100%; max-height: 100%; overflow-y: auto" style="height: 100%; max-height: 100%; overflow-y: auto"
id="flow-form-dialog" id="flow-form-dialog"
@ -169,6 +169,7 @@ function triggerPropertiesDialog(step: WorkFlowPayloadStep) {
v-model:flow-data="flowData" v-model:flow-data="flowData"
v-model:register-branch-id="registerBranchId" v-model:register-branch-id="registerBranchId"
@trigger-properties="triggerPropertiesDialog" @trigger-properties="triggerPropertiesDialog"
@add-step="addStep"
/> />
</section> </section>
</div> </div>
@ -199,7 +200,7 @@ function triggerPropertiesDialog(step: WorkFlowPayloadStep) {
class="rounded row" class="rounded row"
:class="{ :class="{
'q-py-md q-px-lg': $q.screen.gt.sm, 'q-py-md q-px-lg': $q.screen.gt.sm,
'q-py-sm q-px-lg': !$q.screen.gt.sm, 'q-pa-sm': !$q.screen.gt.sm,
}" }"
style="position: absolute; z-index: 999; top: 0; right: 0" style="position: absolute; z-index: 999; top: 0; right: 0"
> >
@ -304,7 +305,7 @@ function triggerPropertiesDialog(step: WorkFlowPayloadStep) {
class="col-12 col-md-10" class="col-12 col-md-10"
:class="{ :class="{
'q-py-md q-pr-md ': $q.screen.gt.sm, 'q-py-md q-pr-md ': $q.screen.gt.sm,
'q-py-md q-px-lg': !$q.screen.gt.sm, 'q-pa-sm': !$q.screen.gt.sm,
}" }"
style="height: 100%; max-height: 100%; overflow-y: auto" style="height: 100%; max-height: 100%; overflow-y: auto"
id="flow-form-drawer" id="flow-form-drawer"
@ -317,6 +318,7 @@ function triggerPropertiesDialog(step: WorkFlowPayloadStep) {
v-model:register-branch-id="registerBranchId" v-model:register-branch-id="registerBranchId"
@change-status="$emit('changeStatus')" @change-status="$emit('changeStatus')"
@trigger-properties="triggerPropertiesDialog" @trigger-properties="triggerPropertiesDialog"
@add-step="addStep"
/> />
</section> </section>
</div> </div>

28
src/pages/04_flow-managment/MainPage.vue
View file

@ -1,6 +1,6 @@
<script lang="ts" setup> <script lang="ts" setup>
import { onMounted, reactive, ref, watch } from 'vue'; import { onMounted, reactive, ref, watch } from 'vue';
import { QTableProps } from 'quasar'; import { QSelect, QTableProps } from 'quasar';
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
@ -68,6 +68,7 @@ const fieldSelectedOption = ref<{ label: string; value: string }[]>([
}, },
]); ]);
const refFilter = ref<InstanceType<typeof QSelect>>();
const currWorkflowData = ref<WorkflowTemplate>(); const currWorkflowData = ref<WorkflowTemplate>();
const formDataWorkflow = ref<WorkflowTemplatePayload>({ const formDataWorkflow = ref<WorkflowTemplatePayload>({
status: 'CREATED', status: 'CREATED',
@ -361,7 +362,7 @@ watch([() => pageState.inputSearch, workflowPageSize], fetchWorkflowList);
outlined outlined
dense dense
:label="$t('general.search')" :label="$t('general.search')"
class="q-mr-md col-12 col-md-3" class="col col-md-3"
:bg-color="$q.dark.isActive ? 'dark' : 'white'" :bg-color="$q.dark.isActive ? 'dark' : 'white'"
v-model="pageState.inputSearch" v-model="pageState.inputSearch"
debounce="200" debounce="200"
@ -369,14 +370,26 @@ watch([() => pageState.inputSearch, workflowPageSize], fetchWorkflowList);
<template #prepend> <template #prepend>
<q-icon name="mdi-magnify" /> <q-icon name="mdi-magnify" />
</template> </template>
<template v-if="$q.screen.lt.md" v-slot:append>
<span class="row">
<q-separator vertical />
<q-btn
icon="mdi-filter-variant"
unelevated
class="q-ml-sm"
padding="4px"
size="sm"
rounded
@click="refFilter?.showPopup"
/>
</span>
</template>
</q-input> </q-input>
<div <div class="row col-md-5" style="white-space: nowrap">
class="row col-12 col-md-5 justify-end"
:class="{ 'q-pt-xs': $q.screen.lt.md }"
style="white-space: nowrap"
>
<q-select <q-select
v-show="$q.screen.gt.sm"
ref="refFilter"
v-model="statusFilter" v-model="statusFilter"
outlined outlined
dense dense
@ -394,6 +407,7 @@ watch([() => pageState.inputSearch, workflowPageSize], fetchWorkflowList);
]" ]"
/> />
<q-select <q-select
v-show="$q.screen.gt.sm"
id="select-field" id="select-field"
for="select-field" for="select-field"
class="col q-ml-sm" class="col q-ml-sm"

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

@ -3,7 +3,7 @@ import { nextTick, ref, watch, reactive } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { onMounted } from 'vue'; import { onMounted } from 'vue';
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
import { useQuasar, type QTableProps } from 'quasar'; import { QSelect, useQuasar, type QTableProps } from 'quasar';
import DialogProperties from 'src/components/dialog/DialogProperties.vue'; import DialogProperties from 'src/components/dialog/DialogProperties.vue';
import ProductCardComponent from 'components/04_product-service/ProductCardComponent.vue'; import ProductCardComponent from 'components/04_product-service/ProductCardComponent.vue';
@ -156,6 +156,12 @@ const priceDisplay = computed(() => ({
const actionDisplay = computed(() => const actionDisplay = computed(() =>
isRoleInclude(['admin', 'head_of_admin', 'system', 'owner', 'accountant']), isRoleInclude(['admin', 'head_of_admin', 'system', 'owner', 'accountant']),
); );
const splitterModel = computed(() =>
$q.screen.lt.md ? (productMode.value !== 'group' ? 0 : 100) : 25,
);
const refFilterGroup = ref<InstanceType<typeof QSelect>>();
const refFilterProductService = ref<InstanceType<typeof QSelect>>();
const holdDialog = ref(false); const holdDialog = ref(false);
const imageDialog = ref(false); const imageDialog = ref(false);
const currentNode = ref<ProductGroup & { type: string }>(); const currentNode = ref<ProductGroup & { type: string }>();
@ -205,7 +211,6 @@ const drawerInfo = ref(false);
const isEdit = ref(false); const isEdit = ref(false);
const modeView = ref(false); const modeView = ref(false);
const splitterModel = ref(25);
const dialogInputForm = ref(false); const dialogInputForm = ref(false);
const dialogProduct = ref(false); const dialogProduct = ref(false);
@ -1829,16 +1834,46 @@ watch(
style="width: 100%" style="width: 100%"
class="col" class="col"
after-class="overflow-hidden" after-class="overflow-hidden"
:disable="$q.screen.lt.sm"
> >
<template v-slot:before> <template v-slot:before>
<div class="surface-1 column full-height"> <div class="surface-1 column full-height">
<div <div
class="row no-wrap full-width bordered-b text-weight-bold surface-3 items-center q-px-md q-py-sm" class="row no-wrap full-width bordered-b text-weight-bold surface-3 items-center q-px-md q-py-sm"
:style="`min-height: ${$q.screen.gt.sm ? '57px' : '100.8px'}`" :style="`min-height: ${$q.screen.gt.sm ? '57px' : ''}`"
> >
<div class="col ellipsis-2-lines"> <div v-if="$q.screen.gt.sm" class="col ellipsis-2-lines">
{{ $t('productService.caption') }} {{ $t('productService.caption') }}
</div> </div>
<q-input
v-else
for="input-search"
outlined
dense
:label="$t('general.search')"
class="col"
:bg-color="$q.dark.isActive ? 'dark' : 'white'"
v-model="inputSearch"
debounce="200"
>
<template v-slot:prepend>
<q-icon name="mdi-magnify" />
</template>
<template v-if="$q.screen.lt.md" v-slot:append>
<span class="row">
<q-separator vertical />
<q-btn
icon="mdi-filter-variant"
unelevated
class="q-ml-sm"
padding="4px"
size="sm"
rounded
@click="refFilterGroup?.showPopup"
/>
</span>
</template>
</q-input>
</div> </div>
<div class="col full-width scroll"> <div class="col full-width scroll">
@ -1964,10 +1999,9 @@ watch(
<q-input <q-input
for="input-search" for="input-search"
outlined outlined
:class="{ 'col-12': $q.screen.lt.md }"
dense dense
:label="$t('general.search')" :label="$t('general.search')"
class="" class="col col-md-3"
:bg-color="$q.dark.isActive ? 'dark' : 'white'" :bg-color="$q.dark.isActive ? 'dark' : 'white'"
v-model="inputSearch" v-model="inputSearch"
debounce="200" debounce="200"
@ -1975,14 +2009,26 @@ watch(
<template v-slot:prepend> <template v-slot:prepend>
<q-icon name="mdi-magnify" /> <q-icon name="mdi-magnify" />
</template> </template>
<template v-if="$q.screen.lt.md" v-slot:append>
<span class="row">
<q-separator vertical />
<q-btn
icon="mdi-filter-variant"
unelevated
class="q-ml-sm"
padding="4px"
size="sm"
rounded
@click="refFilterGroup?.showPopup"
/>
</span>
</template>
</q-input> </q-input>
<div <div class="row col-md-6" style="white-space: nowrap">
class="row col-12 col-md-6"
:class="{ 'q-pt-xs': $q.screen.lt.md }"
style="white-space: nowrap"
>
<q-select <q-select
v-show="$q.screen.gt.sm"
ref="refFilterGroup"
v-model="currentStatus" v-model="currentStatus"
for="select-status" for="select-status"
outlined outlined
@ -2466,11 +2512,11 @@ watch(
style="overflow: hidden" style="overflow: hidden"
> >
<div <div
class="row justify-between items-center q-px-md q-py-sm surface-3 bordered-b" class="row justify-between q-px-md q-py-sm surface-3 bordered-b"
> >
<q-input <q-input
for="input-search" for="input-search"
:class="{ 'col-12': $q.screen.lt.md }" class="col col-md-3"
outlined outlined
dense dense
unelavated unelavated
@ -2482,14 +2528,26 @@ watch(
<template v-slot:prepend> <template v-slot:prepend>
<q-icon name="mdi-magnify" /> <q-icon name="mdi-magnify" />
</template> </template>
<template v-if="$q.screen.lt.md" v-slot:append>
<span class="row">
<q-separator vertical />
<q-btn
icon="mdi-filter-variant"
unelevated
class="q-ml-sm"
padding="4px"
size="sm"
rounded
@click="refFilterProductService?.showPopup"
/>
</span>
</template>
</q-input> </q-input>
<div <div class="row col-md-6" style="white-space: nowrap">
class="row col-12 col-md-6"
:class="{ 'q-pt-xs': $q.screen.lt.md }"
style="white-space: nowrap"
>
<q-select <q-select
v-show="$q.screen.gt.sm"
ref="refFilterProductService"
:for="'field-select-status'" :for="'field-select-status'"
v-model="currentStatus" v-model="currentStatus"
outlined outlined
@ -3721,86 +3779,93 @@ watch(
</div> </div>
<div <div
class="col surface-1 rounded bordered scroll row relative-position" class="full-width full-height scroll"
id="product-form"
:class="{ :class="{
'q-mb-lg q-mx-lg ': $q.screen.gt.sm, 'q-pb-lg q-px-lg ': $q.screen.gt.sm,
'q-mb-sm q-mx-md': !$q.screen.gt.sm, 'q-pb-sm q-px-md': !$q.screen.gt.sm,
}" }"
> >
<div <div
class="col" class="col surface-1 rounded bordered scroll row relative-position full-height"
style="height: 100%; max-height: 100; overflow-y: auto" id="product-form"
v-if="$q.screen.gt.sm"
>
<div class="q-py-md q-pl-md q-pr-sm">
<q-item
v-for="v in 3"
:key="v"
dense
clickable
class="no-padding items-center rounded full-width"
:class="{ 'q-mt-xs': v > 1 }"
active-class="product-form-active"
:active="productTab === v"
@click="productTab = v"
>
<span class="full-width q-py-sm" style="padding-inline: 20px">
{{
v === 1
? $t('form.field.basicInformation')
: v === 2
? $t('productService.product.priceInformation')
: $t('general.information', {
msg: $t('general.attachment'),
})
}}
</span>
</q-item>
</div>
</div>
<div
class="col-12 col-md-10"
id="customer-form-content"
:class="{
'q-py-md q-pr-md ': $q.screen.gt.sm,
'q-py-md q-px-lg': !$q.screen.gt.sm,
}"
style="height: 100%; max-height: 100%; overflow-y: auto"
> >
<div <div
class="q-py-md q-px-lg" class="col"
style="position: absolute; z-index: 99999; top: 0; right: 0" style="height: 100%; max-height: 100; overflow-y: auto"
v-if="$q.screen.gt.sm"
> >
<div class="surface-1 row rounded"> <div class="q-py-md q-pl-md q-pr-sm">
<SaveButton id="btn-info-basic-save" icon-only type="submit" /> <q-item
v-for="v in 3"
:key="v"
dense
clickable
class="no-padding items-center rounded full-width"
:class="{ 'q-mt-xs': v > 1 }"
active-class="product-form-active"
:active="productTab === v"
@click="productTab = v"
>
<span class="full-width q-py-sm" style="padding-inline: 20px">
{{
v === 1
? $t('form.field.basicInformation')
: v === 2
? $t('productService.product.priceInformation')
: $t('general.information', {
msg: $t('general.attachment'),
})
}}
</span>
</q-item>
</div> </div>
</div> </div>
<BasicInfoProduct <div
v-if="productTab === 1" class="col-12 col-md-10"
v-model:detail="formProduct.detail" id="customer-form-content"
v-model:remark="formProduct.remark" :class="{
v-model:name="formProduct.name" 'q-py-md q-pr-md ': $q.screen.gt.sm,
v-model:code="formProduct.code" 'q-pa-sm': !$q.screen.gt.sm,
v-model:process="formProduct.process" }"
v-model:expense-type="formProduct.expenseType" style="height: 100%; max-height: 100%; overflow-y: auto"
v-model:shared="formProduct.shared" >
dense <div
separator :class="{
/> 'q-my-md q-mx-lg': $q.screen.gt.sm,
<PriceDataComponent 'q-ma-sm': $q.screen.lt.md,
v-if="productTab === 2" }"
v-model:price="formProduct.price" style="position: absolute; z-index: 99999; top: 0; right: 0"
v-model:agent-price="formProduct.agentPrice" >
v-model:service-charge="formProduct.serviceCharge" <div class="surface-1 row rounded">
v-model:vat-included="formProduct.vatIncluded" <SaveButton id="btn-info-basic-save" icon-only type="submit" />
v-model:calc-vat="formProduct.calcVat" </div>
dense </div>
/> <BasicInfoProduct
<FormDocument v-if="productTab === 1"
v-if="productTab === 3" v-model:detail="formProduct.detail"
v-model:attachment="formProductDocument" v-model:remark="formProduct.remark"
/> v-model:name="formProduct.name"
v-model:code="formProduct.code"
v-model:process="formProduct.process"
v-model:expense-type="formProduct.expenseType"
v-model:shared="formProduct.shared"
dense
separator
/>
<PriceDataComponent
v-if="productTab === 2"
v-model:price="formProduct.price"
v-model:agent-price="formProduct.agentPrice"
v-model:service-charge="formProduct.serviceCharge"
v-model:vat-included="formProduct.vatIncluded"
v-model:calc-vat="formProduct.calcVat"
dense
/>
<FormDocument
v-if="productTab === 3"
v-model:attachment="formProductDocument"
/>
</div>
</div> </div>
</div> </div>
</DialogForm> </DialogForm>
@ -3887,123 +3952,131 @@ watch(
</div> </div>
<div <div
class="col surface-1 rounded bordered scroll row relative-position" class="full-width full-height scroll"
id="product-form"
:class="{ :class="{
'q-mb-lg q-mx-lg ': $q.screen.gt.sm, 'q-pb-lg q-px-lg ': $q.screen.gt.sm,
'q-mb-sm q-mx-md': !$q.screen.gt.sm, 'q-pb-sm q-px-md': !$q.screen.gt.sm,
}" }"
> >
<div <div
class="surface-1 rounded row q-mx-lg q-my-md" class="col surface-1 rounded bordered scroll row relative-position full-height"
style="position: absolute; z-index: 999; top: 0; right: 0" id="product-form"
v-if="actionDisplay && !currentNoAction"
> >
<UndoButton <div
v-if="infoProductEdit" class="surface-1 rounded row"
id="btn-info-basic-undo" :class="{
icon-only 'q-my-md q-mx-lg': $q.screen.gt.sm,
@click=" 'q-ma-sm': $q.screen.lt.md,
() => { }"
formProduct = { ...prevProduct }; style="position: absolute; z-index: 999; top: 0; right: 0"
if (prevProduct.document) v-if="actionDisplay && !currentNoAction"
formProductDocument = prevProduct.document; >
infoProductEdit = false; <UndoButton
} v-if="infoProductEdit"
" id="btn-info-basic-undo"
type="button" icon-only
/> @click="
<SaveButton () => {
v-if="infoProductEdit" formProduct = { ...prevProduct };
id="btn-info-basic-save" if (prevProduct.document)
icon-only formProductDocument = prevProduct.document;
type="submit" infoProductEdit = false;
/> }
<EditButton "
v-if="!infoProductEdit" type="button"
id="btn-info-basic-edit" />
icon-only <SaveButton
@click="infoProductEdit = true" v-if="infoProductEdit"
type="button" id="btn-info-basic-save"
/> icon-only
<DeleteButton type="submit"
v-if="!infoProductEdit" />
id="btn-info-basic-delete" <EditButton
icon-only v-if="!infoProductEdit"
@click="() => deleteProductConfirm()" id="btn-info-basic-edit"
type="button" icon-only
/> @click="infoProductEdit = true"
</div> type="button"
<div />
class="col" <DeleteButton
style="height: 100%; max-height: 100; overflow-y: auto" v-if="!infoProductEdit"
v-if="$q.screen.gt.sm" id="btn-info-basic-delete"
> icon-only
<div class="q-py-md q-pl-md q-pr-sm"> @click="() => deleteProductConfirm()"
<q-item type="button"
v-for="v in 3" />
:key="v" </div>
dense <div
clickable class="col"
class="no-padding items-center rounded full-width" style="height: 100%; max-height: 100; overflow-y: auto"
:class="{ 'q-mt-xs': v > 1 }" v-if="$q.screen.gt.sm"
active-class="product-form-active" >
:active="productTab === v" <div class="q-py-md q-pl-md q-pr-sm">
@click="productTab = v" <q-item
> v-for="v in 3"
<span class="full-width q-py-sm" style="padding-inline: 20px"> :key="v"
{{ dense
v === 1 clickable
? $t('form.field.basicInformation') class="no-padding items-center rounded full-width"
: v === 2 :class="{ 'q-mt-xs': v > 1 }"
? $t('productService.product.priceInformation') active-class="product-form-active"
: $t('general.information', { :active="productTab === v"
msg: $t('general.attachment'), @click="productTab = v"
}) >
}} <span class="full-width q-py-sm" style="padding-inline: 20px">
</span> {{
</q-item> v === 1
? $t('form.field.basicInformation')
: v === 2
? $t('productService.product.priceInformation')
: $t('general.information', {
msg: $t('general.attachment'),
})
}}
</span>
</q-item>
</div>
</div>
<div
class="col-12 col-md-10"
:class="{
'q-py-md q-pr-md ': $q.screen.gt.sm,
'q-pa-sm': !$q.screen.gt.sm,
}"
id="customer-form-content"
style="height: 100%; max-height: 100%; overflow-y: auto"
>
<BasicInfoProduct
v-if="productTab === 1"
:readonly="!infoProductEdit"
v-model:detail="formProduct.detail"
v-model:remark="formProduct.remark"
v-model:name="formProduct.name"
v-model:code="formProduct.code"
v-model:process="formProduct.process"
v-model:expense-type="formProduct.expenseType"
v-model:shared="formProduct.shared"
disableCode
dense
separator
/>
<PriceDataComponent
v-if="productTab === 2"
:readonly="!infoProductEdit"
v-model:price="formProduct.price"
v-model:agent-price="formProduct.agentPrice"
v-model:service-charge="formProduct.serviceCharge"
v-model:vat-included="formProduct.vatIncluded"
v-model:calc-vat="formProduct.calcVat"
dense
:priceDisplay="priceDisplay"
/>
<FormDocument
v-if="productTab === 3"
:readonly="!infoProductEdit"
v-model:attachment="formProductDocument"
/>
</div> </div>
</div>
<div
class="col-12 col-md-10"
:class="{
'q-py-md q-pr-md ': $q.screen.gt.sm,
'q-py-md q-px-lg': !$q.screen.gt.sm,
}"
id="customer-form-content"
style="height: 100%; max-height: 100%; overflow-y: auto"
>
<BasicInfoProduct
v-if="productTab === 1"
:readonly="!infoProductEdit"
v-model:detail="formProduct.detail"
v-model:remark="formProduct.remark"
v-model:name="formProduct.name"
v-model:code="formProduct.code"
v-model:process="formProduct.process"
v-model:expense-type="formProduct.expenseType"
v-model:shared="formProduct.shared"
disableCode
dense
separator
/>
<PriceDataComponent
v-if="productTab === 2"
:readonly="!infoProductEdit"
v-model:price="formProduct.price"
v-model:agent-price="formProduct.agentPrice"
v-model:service-charge="formProduct.serviceCharge"
v-model:vat-included="formProduct.vatIncluded"
v-model:calc-vat="formProduct.calcVat"
dense
:priceDisplay="priceDisplay"
/>
<FormDocument
v-if="productTab === 3"
:readonly="!infoProductEdit"
v-model:attachment="formProductDocument"
/>
</div> </div>
</div> </div>
</DialogForm> </DialogForm>
@ -4170,17 +4243,33 @@ watch(
id="customer-form-content" id="customer-form-content"
:class="{ :class="{
'q-py-md q-pr-md ': $q.screen.gt.sm, 'q-py-md q-pr-md ': $q.screen.gt.sm,
'q-py-md q-px-lg': !$q.screen.gt.sm, 'q-pa-sm': !$q.screen.gt.sm,
}" }"
style="height: 100%; max-height: 100%; overflow-y: auto" style="height: 100%; max-height: 100%; overflow-y: auto"
> >
<div <div
class="surface-1 rounded q-my-md q-mx-lg items-center row" class="surface-1 rounded items-center justify-end row"
style="position: absolute; z-index: 999; top: 0; right: 0" :class="{
'q-my-md q-mx-lg': $q.screen.gt.sm,
'q-ma-sm': $q.screen.lt.md,
}"
style="
position: absolute;
z-index: 999;
top: 0;
right: 0;
flex-wrap: wrap-reverse;
"
:style="$q.screen.lt.sm && 'width: 80px'"
v-if="actionDisplay && !currentNoAction" v-if="actionDisplay && !currentNoAction"
> >
<div class="bordered rounded q-mr-md" v-if="serviceTab === 2"> <div
class="bordered rounded col-md row"
v-if="serviceTab === 2"
:style="$q.screen.lt.sm && 'flex-basis: 100%; '"
>
<q-btn <q-btn
class="col"
icon="mdi-file-tree-outline" icon="mdi-file-tree-outline"
flat flat
square square
@ -4199,6 +4288,7 @@ watch(
@click="serviceTreeView = true" @click="serviceTreeView = true"
/> />
<q-btn <q-btn
class="col"
icon="mdi-view-list-outline" icon="mdi-view-list-outline"
flat flat
square square
@ -4446,16 +4536,29 @@ watch(
'q-mb-sm q-mx-md': !$q.screen.gt.sm, 'q-mb-sm q-mx-md': !$q.screen.gt.sm,
}" }"
> >
<!-- row: $q.screen.gt.sm, -->
<div <div
class="surface-1 rounded q-my-md q-mx-lg row items-center" class="surface-1 rounded items-center justify-end row"
style="position: absolute; z-index: 999; top: 0; right: 0" :class="{
'q-my-md q-mx-lg': $q.screen.gt.sm,
'q-ma-sm': $q.screen.lt.md,
}"
style="
position: absolute;
z-index: 999;
top: 0;
right: 0;
flex-wrap: wrap-reverse;
"
v-if="actionDisplay && !currentNoAction" v-if="actionDisplay && !currentNoAction"
> >
<div <div
class="bordered rounded q-mr-md" class="bordered rounded col-md row"
v-if="serviceTab === 2 && !infoServiceEdit" v-if="serviceTab === 2 && !infoServiceEdit"
:style="$q.screen.lt.sm && 'flex-basis: 100%; width: 1px'"
> >
<q-btn <q-btn
class="col"
icon="mdi-file-tree-outline" icon="mdi-file-tree-outline"
flat flat
square square
@ -4474,6 +4577,7 @@ watch(
@click="serviceTreeView = true" @click="serviceTreeView = true"
/> />
<q-btn <q-btn
class="col"
icon="mdi-view-list-outline" icon="mdi-view-list-outline"
flat flat
square square
@ -4533,6 +4637,7 @@ watch(
type="button" type="button"
/> />
</div> </div>
<div <div
class="col column justify-between no-wrap" class="col column justify-between no-wrap"
style="height: 100%; max-height: 100; overflow-y: auto" style="height: 100%; max-height: 100; overflow-y: auto"
@ -4613,7 +4718,7 @@ watch(
id="customer-form-content" id="customer-form-content"
:class="{ :class="{
'q-py-md q-pr-md ': $q.screen.gt.sm, 'q-py-md q-pr-md ': $q.screen.gt.sm,
'q-py-sm q-px-lg': !$q.screen.gt.sm, 'q-pa-sm': !$q.screen.gt.sm,
}" }"
style="height: 100%; max-height: 100%; overflow-y: auto" style="height: 100%; max-height: 100%; overflow-y: auto"
v-if="dialogServiceEdit" v-if="dialogServiceEdit"

48
src/pages/05_quotation/MainPage.vue
View file

@ -1,8 +1,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import { pageTabs, columnQuotation } from './constants';
import { onMounted, reactive, ref, watch, computed } from 'vue'; import { onMounted, reactive, ref, watch, computed } from 'vue';
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
import { useQuasar } from 'quasar';
// NOTE: Import stores // NOTE: Import stores
import { useQuotationStore } from 'src/stores/quotations'; import { useQuotationStore } from 'src/stores/quotations';
@ -12,6 +11,7 @@ import useFlowStore from 'src/stores/flow';
import useMyBranch from 'stores/my-branch'; import useMyBranch from 'stores/my-branch';
import { useQuotationForm } from './form'; import { useQuotationForm } from './form';
import { hslaColors } from './constants'; import { hslaColors } from './constants';
import { pageTabs, columnQuotation } from './constants';
// NOTE Import Types // NOTE Import Types
import { CustomerBranchCreate, CustomerType } from 'stores/customer/types'; import { CustomerBranchCreate, CustomerType } from 'stores/customer/types';
@ -44,6 +44,7 @@ import { Quotation } from 'src/stores/quotations/types';
import TableQuotation from 'src/components/05_quotation/TableQuotation.vue'; import TableQuotation from 'src/components/05_quotation/TableQuotation.vue';
import PaginationPageSize from 'src/components/PaginationPageSize.vue'; import PaginationPageSize from 'src/components/PaginationPageSize.vue';
const $q = useQuasar();
const quotationFormStore = useQuotationForm(); const quotationFormStore = useQuotationForm();
const customerFormStore = useCustomerForm(); const customerFormStore = useCustomerForm();
const flowStore = useFlowStore(); const flowStore = useFlowStore();
@ -240,6 +241,7 @@ const {
} = storeToRefs(quotationStore); } = storeToRefs(quotationStore);
onMounted(async () => { onMounted(async () => {
pageState.gridView = $q.screen.lt.md ? true : false;
navigatorStore.current.title = 'quotation.title'; navigatorStore.current.title = 'quotation.title';
navigatorStore.current.path = [ navigatorStore.current.path = [
{ {
@ -476,7 +478,7 @@ async function storeDataLocal(id: string) {
<header class="col surface-1 rounded bordered overflow-hidden"> <header class="col surface-1 rounded bordered overflow-hidden">
<div class="column full-height"> <div class="column full-height">
<section <section
class="row surface-3 justify-between full-width items-center bordered-b" class="row surface-3 justify-between full-width bordered-b"
style="z-index: 1" style="z-index: 1"
> >
<div class="row q-py-sm q-px-md justify-between full-width"> <div class="row q-py-sm q-px-md justify-between full-width">
@ -485,7 +487,7 @@ async function storeDataLocal(id: string) {
outlined outlined
dense dense
:label="$t('general.search')" :label="$t('general.search')"
class="q-mr-md col-12 col-md-3" class="col col-md-3"
:bg-color="$q.dark.isActive ? 'dark' : 'white'" :bg-color="$q.dark.isActive ? 'dark' : 'white'"
v-model="pageState.inputSearch" v-model="pageState.inputSearch"
debounce="200" debounce="200"
@ -495,16 +497,12 @@ async function storeDataLocal(id: string) {
</template> </template>
</q-input> </q-input>
<div <div class="row col-md-5 justify-end" style="white-space: nowrap">
class="row col-12 col-md-3 justify-end"
:class="{ 'q-pt-xs': $q.screen.lt.md }"
style="white-space: nowrap"
>
<q-select <q-select
v-if="!pageState.gridView" v-if="!pageState.gridView"
id="select-field" id="select-field"
for="select-field" for="select-field"
class="col q-ml-sm" class="col-md-5 q-ml-sm"
:options=" :options="
fieldSelectedOption.map((v) => ({ fieldSelectedOption.map((v) => ({
...v, ...v,
@ -654,8 +652,9 @@ async function storeDataLocal(id: string) {
@delete="(id) => triggerDialogDeleteQuottaion(id)" @delete="(id) => triggerDialogDeleteQuottaion(id)"
> >
<template #grid="{ item }"> <template #grid="{ item }">
<div class="col-md-4 col-sm-6 col-12"> <div class="col-md-4 col-sm-6 col-12 column">
<QuotationCard <QuotationCard
class="col"
hide-kebab-delete hide-kebab-delete
:hide-kebab-edit="!(pageState.currentTab === 'Issued')" :hide-kebab-edit="!(pageState.currentTab === 'Issued')"
:urgent="item.row.urgent" :urgent="item.row.urgent"
@ -788,7 +787,12 @@ async function storeDataLocal(id: string) {
} }
" "
> >
<header class="q-mx-lg q-mt-lg"> <header
:class="{
'q-mx-lg q-mt-md': $q.screen.gt.sm,
'q-mx-md q-mt-sm': $q.screen.lt.md,
}"
>
<ProfileBanner <ProfileBanner
prefix="dialog" prefix="dialog"
img="/images/quotation-bg-avatar.png" img="/images/quotation-bg-avatar.png"
@ -801,9 +805,19 @@ async function storeDataLocal(id: string) {
hideFade hideFade
/> />
</header> </header>
<section class="col surface-1 q-ma-lg rounded bordered row scroll"> <section
class="col surface-1 rounded bordered row scroll"
:class="{
'q-mx-lg q-my-md': $q.screen.gt.sm,
'q-mx-md q-my-sm': $q.screen.lt.md,
}"
>
<div <div
class="col-12 q-px-md q-py-lg" class="col-12"
:class="{
'q-px-md q-py-lg': $q.screen.gt.sm,
'q-pa-sm': $q.screen.lt.md,
}"
id="customer-form-content" id="customer-form-content"
style="height: 100%; max-height: 100%; overflow-y: auto" style="height: 100%; max-height: 100%; overflow-y: auto"
> >
@ -839,7 +853,7 @@ async function storeDataLocal(id: string) {
> >
<div class="full-height row q-pa-md"> <div class="full-height row q-pa-md">
<ItemCard <ItemCard
class="col q-mx-sm full-height" class="col q-mx-sm full-height cursor-pointer"
v-for="value in dialogCreateCustomerItem" v-for="value in dialogCreateCustomerItem"
:key="value.text" :key="value.text"
:icon="value.icon" :icon="value.icon"
@ -850,7 +864,9 @@ async function storeDataLocal(id: string) {
() => { () => {
triggerCreateCustomerd({ triggerCreateCustomerd({
type: type:
value.text === 'customer.employerLegalEntity' ? 'CORP' : 'PERS', value.text === 'customer.employerLegalEntity'
? CustomerType.Corporate
: CustomerType.Person,
}); });
emptyCreateDialog = false; emptyCreateDialog = false;
} }

74
src/pages/05_quotation/PaymentForm.vue
View file

@ -371,10 +371,11 @@ onMounted(async () => {
" "
class="row items-center q-pb-sm" class="row items-center q-pb-sm"
> >
<span class="app-text-muted-2"> <span class="app-text-muted-2 col-12 col-md">
{{ $t('quotation.paySplitCount') }} {{ $t('quotation.paySplitCount') }}
</span> </span>
<span class="q-ml-auto">
<span>
{{ $t('quotation.receiptDialog.total') }} {{ $t('quotation.receiptDialog.total') }}
</span> </span>
<span class="bordered rounded surface-2 number-box q-mx-sm"> <span class="bordered rounded surface-2 number-box q-mx-sm">
@ -415,49 +416,58 @@ onMounted(async () => {
<!-- summary total, paid, remain --> <!-- summary total, paid, remain -->
<div class="row items-center"> <div class="row items-center">
<span <span
class="row col rounded q-px-sm q-py-md" class="row col rounded q-px-sm q-py-md justify-end"
style="border: 1px solid hsl(var(--info-bg))" style="border: 1px solid hsl(var(--info-bg))"
> >
{{ $t('quotation.receiptDialog.totalAmount') }} <span
<span class="q-ml-auto"> class="col-sm col-12"
{{ formatNumberDecimal(data.finalPrice, 2) }} :class="{ 'text-right': $q.screen.lt.sm }"
>
{{ $t('quotation.receiptDialog.totalAmount') }}
</span> </span>
{{ formatNumberDecimal(data.finalPrice, 2) }}
</span> </span>
<span <span
class="row col rounded q-px-sm q-py-md q-mx-md" class="row col rounded q-px-sm q-py-md q-mx-md justify-end"
style="border: 1px solid hsl(var(--positive-bg))" style="border: 1px solid hsl(var(--positive-bg))"
> >
{{ $t('quotation.receiptDialog.paid') }} <span
<span class="q-ml-auto"> class="col-sm col-12"
{{ :class="{ 'text-right': $q.screen.lt.sm }"
formatNumberDecimal( >
paymentData.reduce( {{ $t('quotation.receiptDialog.paid') }}
(c, i) =>
i.paymentStatus === 'PaymentSuccess' ? c + i.amount : c,
0,
),
2,
)
}}
</span> </span>
{{
formatNumberDecimal(
paymentData.reduce(
(c, i) =>
i.paymentStatus === 'PaymentSuccess' ? c + i.amount : c,
0,
),
2,
)
}}
</span> </span>
<span <span
class="row col rounded q-px-sm q-py-md" class="row col rounded q-px-sm q-py-md justify-end"
style="border: 1px solid hsl(var(--warning-bg))" style="border: 1px solid hsl(var(--warning-bg))"
> >
{{ $t('quotation.receiptDialog.remain') }} <span
<span class="q-ml-auto"> class="col-sm col-12"
{{ :class="{ 'text-right': $q.screen.lt.sm }"
formatNumberDecimal( >
paymentData.reduce( {{ $t('quotation.receiptDialog.remain') }}
(c, i) =>
i.paymentStatus !== 'PaymentSuccess' ? c + i.amount : c,
0,
),
2,
)
}}
</span> </span>
{{
formatNumberDecimal(
paymentData.reduce(
(c, i) =>
i.paymentStatus !== 'PaymentSuccess' ? c + i.amount : c,
0,
),
2,
)
}}
</span> </span>
</div> </div>

84
src/pages/05_quotation/QuotationForm.vue
View file

@ -1,7 +1,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
import { useQuasar } from 'quasar'; import { QSelect, useQuasar } from 'quasar';
import { computed, nextTick, onMounted, reactive, ref, watch } from 'vue'; import { computed, nextTick, onMounted, reactive, ref, watch } from 'vue';
import { import {
baseUrl, baseUrl,
@ -13,10 +13,9 @@ import { ProductTree, quotationProductTree } from './utils';
// NOTE: Import stores // NOTE: Import stores
import { dateFormat, calculateAge, dateFormatJS } from 'src/utils/datetime'; import { dateFormat, calculateAge, dateFormatJS } from 'src/utils/datetime';
import { useEmployeeForm } from 'src/pages/03_customer-management/form';
import { useQuotationStore } from 'src/stores/quotations'; import { useQuotationStore } from 'src/stores/quotations';
import useProductServiceStore from 'stores/product-service'; import useProductServiceStore from 'stores/product-service';
import { waitAll, calculateDaysUntilExpire, dialog } from 'src/stores/utils'; import { calculateDaysUntilExpire, dialog } from 'src/stores/utils';
import useEmployeeStore from 'stores/employee'; import useEmployeeStore from 'stores/employee';
import { useInvoice, useReceipt, usePayment } from 'stores/payment'; import { useInvoice, useReceipt, usePayment } from 'stores/payment';
import useCustomerStore from 'stores/customer'; import useCustomerStore from 'stores/customer';
@ -28,13 +27,12 @@ import { deleteItem } from 'stores/utils';
import { RequestData, RequestDataStatus } from 'src/stores/request-list/types'; import { RequestData, RequestDataStatus } from 'src/stores/request-list/types';
import { View } from './types.ts'; import { View } from './types.ts';
import { import {
EmployeeWorker,
PayCondition, PayCondition,
ProductRelation, ProductRelation,
ProductServiceList, ProductServiceList,
QuotationPayload, QuotationPayload,
} from 'src/stores/quotations/types'; } from 'src/stores/quotations/types';
import { Employee, EmployeeWork } from 'src/stores/employee/types'; import { Employee } from 'src/stores/employee/types';
import { Receipt } from 'src/stores/payment/types'; import { Receipt } from 'src/stores/payment/types';
import { import {
ProductGroup, ProductGroup,
@ -50,7 +48,6 @@ import ProductItem from 'components/05_quotation/ProductItem.vue';
import WorkerItem from 'components/05_quotation/WorkerItem.vue'; import WorkerItem from 'components/05_quotation/WorkerItem.vue';
import ToggleButton from 'components/button/ToggleButton.vue'; import ToggleButton from 'components/button/ToggleButton.vue';
import FormAbout from 'components/05_quotation/FormAbout.vue'; import FormAbout from 'components/05_quotation/FormAbout.vue';
import SelectZone from 'components/shared/SelectZone.vue';
import ImportWorker from './ImportWorker.vue'; import ImportWorker from './ImportWorker.vue';
import { import {
AddButton, AddButton,
@ -127,7 +124,7 @@ const {
const { data: config } = storeToRefs(configStore); const { data: config } = storeToRefs(configStore);
const receiptList = ref<Receipt[]>([]); const receiptList = ref<Receipt[]>([]);
const refStatusFilter = ref<InstanceType<typeof QSelect>>();
const templateForm = ref<string>(''); const templateForm = ref<string>('');
const templateFormOption = ref<{ label: string; value: string }[]>([]); const templateFormOption = ref<{ label: string; value: string }[]>([]);
@ -1072,25 +1069,25 @@ watch(
}, },
); );
async function searchEmployee(text: string) { // async function searchEmployee(text: string) {
let query: string | undefined = text; // let query: string | undefined = text;
let pageSize = 50; // let pageSize = 50;
if (!text) { // if (!text) {
query = undefined; // query = undefined;
pageSize = 9999; // pageSize = 9999;
} // }
const retEmp = await customerStore.fetchBranchEmployee( // const retEmp = await customerStore.fetchBranchEmployee(
quotationFormData.value.customerBranchId, // quotationFormData.value.customerBranchId,
{ // {
query: query, // query: query,
pageSize: pageSize, // pageSize: pageSize,
passport: true, // passport: true,
}, // },
); // );
if (retEmp) workerList.value = retEmp.data.result; // if (retEmp) workerList.value = retEmp.data.result;
} // }
function storeDataLocal() { function storeDataLocal() {
quotationFormData.value.productServiceList = productServiceList.value; quotationFormData.value.productServiceList = productServiceList.value;
@ -1308,12 +1305,24 @@ async function formDownload() {
<div <div
v-if="quotationFormState.mode !== 'create'" v-if="quotationFormState.mode !== 'create'"
class="column col-2 q-ml-auto" class="column col-sm-2 col-12 q-ml-auto"
style="gap: 10px" style="gap: 10px"
> >
<div class="row justify-end"> <div
<BadgeComponent :title-i18n="$t('general.laborIdentified')" /> class="row"
:class="{
'justify-end': $q.screen.gt.xs,
'q-pl-xl q-mt-sm': $q.screen.lt.sm,
}"
>
<BadgeComponent
:title-i18n="$t('general.laborIdentified')"
:class="{
'q-ml-md': $q.screen.lt.sm,
}"
/>
</div> </div>
<div <div
class="row items-center justify-between surface-1 rounded q-pa-xs" class="row items-center justify-between surface-1 rounded q-pa-xs"
style="height: 40px; border-radius: 40px" style="height: 40px; border-radius: 40px"
@ -1895,9 +1904,25 @@ async function formDownload() {
<template #prepend> <template #prepend>
<q-icon name="mdi-magnify" /> <q-icon name="mdi-magnify" />
</template> </template>
<template v-if="$q.screen.lt.md" v-slot:append>
<span class="row">
<q-separator vertical />
<q-btn
icon="mdi-filter-variant"
unelevated
class="q-ml-sm"
padding="4px"
size="sm"
rounded
@click="refStatusFilter?.showPopup"
/>
</span>
</template>
</q-input> </q-input>
<q-select <q-select
v-show="$q.screen.gt.sm"
ref="refStatusFilter"
v-model="quotationFormState.statusFilterRequest" v-model="quotationFormState.statusFilterRequest"
outlined outlined
dense dense
@ -2093,9 +2118,10 @@ async function formDownload() {
</section> </section>
</template> </template>
<div class="surface-1 q-pa-md flex" style="gap: var(--size-2)"> <div class="surface-1 q-pa-md row" style="gap: var(--size-2)">
<SelectInput <SelectInput
class="q-mr-sm" class="q-mr-xl col-md-3 col-12"
incremental
v-model="templateForm" v-model="templateForm"
id="quotation-branch" id="quotation-branch"
:option="templateFormOption" :option="templateFormOption"

16
src/pages/05_quotation/QuotationFormProductSelect.vue
View file

@ -6,7 +6,6 @@ import useOptionStore from 'stores/options';
import DialogForm from 'src/components/DialogForm.vue'; import DialogForm from 'src/components/DialogForm.vue';
import TreeView from 'src/components/shared/TreeView.vue'; import TreeView from 'src/components/shared/TreeView.vue';
import SelectZone from 'src/components/shared/SelectZone.vue'; import SelectZone from 'src/components/shared/SelectZone.vue';
import SelectInput from 'src/components/shared/SelectInput.vue';
import SelectProductGroup from 'src/components/shared/select/SelectProductGroup.vue'; import SelectProductGroup from 'src/components/shared/select/SelectProductGroup.vue';
import TotalProductCardComponent from 'src/components/04_product-service/TotalProductCardComponent.vue'; import TotalProductCardComponent from 'src/components/04_product-service/TotalProductCardComponent.vue';
import DeleteButton from 'src/components/button/DeleteButton.vue'; import DeleteButton from 'src/components/button/DeleteButton.vue';
@ -491,7 +490,7 @@ watch(
</template> </template>
</q-input> </q-input>
<div class="row items-center q-gutter-x-sm"> <div class="row items-center q-gutter-x-sm no-wrap">
<q-btn <q-btn
color="primary" color="primary"
padding="4px" padding="4px"
@ -499,7 +498,6 @@ watch(
rounded rounded
icon="mdi-store-plus-outline" icon="mdi-store-plus-outline"
@click="triggerAddDialog" @click="triggerAddDialog"
style="color: hsl(var(--text-mute))"
/> />
<q-btn <q-btn
padding="4px" padding="4px"
@ -507,6 +505,7 @@ watch(
rounded rounded
icon="mdi-information-outline" icon="mdi-information-outline"
@click="triggerInfo" @click="triggerInfo"
:color="pageState.infoDrawer ? 'info' : ''"
style="color: hsl(var(--text-mute))" style="color: hsl(var(--text-mute))"
/> />
</div> </div>
@ -634,7 +633,8 @@ watch(
<div <div
v-if="pageState.infoDrawer" v-if="pageState.infoDrawer"
class="column no-wrap surface-1" class="column no-wrap surface-1"
style="z-index: 1; width: 20vw; position: sticky" style="z-index: 1; position: sticky"
:style="`width:${$q.screen.gt.sm ? '20vw' : '100%'}`"
> >
<span <span
v-if="selectedType === ''" v-if="selectedType === ''"
@ -840,12 +840,14 @@ watch(
> >
<template #top> <template #top>
<div class="row items-center app-text-muted"> <div class="row items-center app-text-muted">
{{ $t('productService.group.title') }} <span class="q-pr-sm">
{{ $t('productService.group.title') }}
</span>
<SelectProductGroup <SelectProductGroup
class="q-pl-sm col-5" class="col-md-4 col-12"
:class="{ 'q-mb-sm': $q.screen.lt.md }"
id="product-group-select" id="product-group-select"
style="min-height: 50px"
clearable clearable
v-model:value="selectedProductGroup" v-model:value="selectedProductGroup"
:placeholder=" :placeholder="

7
src/pages/05_quotation/QuotationFormReceipt.vue
View file

@ -28,8 +28,11 @@ withDefaults(
); );
</script> </script>
<template> <template>
<section class="surface-1 rounded row"> <section class="surface-1 rounded" :class="{ row: $q.screen.gt.xs }">
<aside class="column col bordered-r q-py-md q-pl-md"> <aside
class="column col q-py-md q-pl-md"
:class="{ 'bordered-r': $q.screen.gt.xs, ' bordered-b': $q.screen.lt.sm }"
>
<span class="text-weight-medium text-body1"> <span class="text-weight-medium text-body1">
{{ title || $t('quotation.receiptDialog.PaymentReceive') }} {{ title || $t('quotation.receiptDialog.PaymentReceive') }}
</span> </span>

16
src/pages/05_quotation/QuotationFormWorkerAddDialog.vue
View file

@ -305,7 +305,7 @@ watch(() => state.search, getWorkerList);
</template> </template>
</DialogHeader> </DialogHeader>
</template> </template>
<div class="col scroll"> <div class="col full-width no-wrap scroll">
<q-tab-panels <q-tab-panels
class="surface-0 rounded full-height" class="surface-0 rounded full-height"
v-model="state.step" v-model="state.step"
@ -346,7 +346,7 @@ watch(() => state.search, getWorkerList);
...data, ...data,
_selectedIndex: selectedIndex(data), _selectedIndex: selectedIndex(data),
}))" }))"
class="col-2" class="col-md-2 col-sm-6 col-12"
> >
<button <button
class="selectable-item full-width" class="selectable-item full-width"
@ -399,7 +399,10 @@ watch(() => state.search, getWorkerList);
<BackButton icon-only @click="prev" /> <BackButton icon-only @click="prev" />
</section> </section>
<section class="full-height scroll col"> <section class="full-height scroll col">
<div class="rounded column" style="gap: var(--size-4)"> <div
class="rounded column full-width no-wrap"
style="gap: var(--size-4)"
>
<q-expansion-item <q-expansion-item
dense dense
default-opened default-opened
@ -408,6 +411,7 @@ watch(() => state.search, getWorkerList);
expand-icon="mdi-chevron-down-circle" expand-icon="mdi-chevron-down-circle"
header-class="q-py-sm text-medium text-body items-center surface-1" header-class="q-py-sm text-medium text-body items-center surface-1"
v-for="{ id, amount, worker, product } in productServiceList" v-for="{ id, amount, worker, product } in productServiceList"
:key="id"
> >
<template #header> <template #header>
<q-avatar class="q-mr-md" size="md"> <q-avatar class="q-mr-md" size="md">
@ -500,7 +504,11 @@ watch(() => state.search, getWorkerList);
:class="{ dark: $q.dark.isActive }" :class="{ dark: $q.dark.isActive }"
class="text-center" class="text-center"
> >
<q-td v-for="col in columns" :align="col.align"> <q-td
v-for="col in columns"
:align="col.align"
:key="col.name"
>
<!-- NOTE: custom column will starts with # --> <!-- NOTE: custom column will starts with # -->
<template v-if="!col.name.startsWith('#')"> <template v-if="!col.name.startsWith('#')">
<q-avatar <q-avatar

2
src/pages/05_quotation/QuotationFormWorkerSelect.vue
View file

@ -461,7 +461,7 @@ watch(() => state.search, getWorkerList);
...data, ...data,
_selectedIndex: selectedIndex(data), _selectedIndex: selectedIndex(data),
}))" }))"
class="col-2" class="col-md-2 col-sm-6 col-12"
> >
<button <button
class="selectable-item full-width" class="selectable-item full-width"

10
src/pages/05_quotation/TableRequest.vue
View file

@ -1,7 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import { useI18n } from 'vue-i18n';
import { QTableColumn, QTableSlots } from 'quasar'; import { QTableColumn, QTableSlots } from 'quasar';
import { computed, reactive, ref, watch } from 'vue';
import { RequestData, RequestDataStatus } from 'src/stores/request-list/types'; import { RequestData, RequestDataStatus } from 'src/stores/request-list/types';
import BadgeComponent from 'components/BadgeComponent.vue'; import BadgeComponent from 'components/BadgeComponent.vue';
@ -46,8 +44,6 @@ const emits = defineEmits<{
(e: 'success'): void; (e: 'success'): void;
}>(); }>();
const open = defineModel<boolean>('open', { default: false });
function goToRequestList(id: string) { function goToRequestList(id: string) {
const url = new URL(`/request-list/${id}`, window.location.origin); const url = new URL(`/request-list/${id}`, window.location.origin);
window.open(url.toString(), '_blank'); window.open(url.toString(), '_blank');
@ -70,6 +66,10 @@ function goToRequestList(id: string) {
card-container-class="q-col-gutter-sm" card-container-class="q-col-gutter-sm"
:no-data-label="$t('general.noDataTable')" :no-data-label="$t('general.noDataTable')"
class="full-width" class="full-width"
:no-data-label="$t('general.noDataTable')"
:pagination="{
rowsPerPage: 0,
}"
> >
<template v-slot:header="props"> <template v-slot:header="props">
<q-tr <q-tr
@ -88,7 +88,7 @@ function goToRequestList(id: string) {
} & Omit<Parameters<QTableSlots['body']>[0], 'row'>" } & Omit<Parameters<QTableSlots['body']>[0], 'row'>"
> >
<q-tr :class="{ dark: $q.dark.isActive }" class="text-center"> <q-tr :class="{ dark: $q.dark.isActive }" class="text-center">
<q-td v-for="col in columns" :align="col.align"> <q-td v-for="col in columns" :align="col.align" :key="col.name">
<!-- NOTE: custom column will starts with # --> <!-- NOTE: custom column will starts with # -->
<template v-if="!col.name.startsWith('#')"> <template v-if="!col.name.startsWith('#')">
<span> <span>

12
src/pages/07_agencies-management/AgenciesDialog.vue
View file

@ -251,12 +251,16 @@ watch(
id="agencies-form-content" id="agencies-form-content"
:class="{ :class="{
'q-py-md q-pr-md ': $q.screen.gt.sm, 'q-py-md q-pr-md ': $q.screen.gt.sm,
'q-py-md q-px-lg': !$q.screen.gt.sm, 'q-pa-sm': !$q.screen.gt.sm,
}" }"
style="height: 100%; max-height: 100%; overflow-y: auto" style="height: 100%; max-height: 100%; overflow-y: auto"
> >
<div <div
class="q-py-md q-px-lg" class="rounded"
:class="{
'q-py-md q-px-lg': $q.screen.gt.sm,
'q-pa-sm': !$q.screen.gt.sm,
}"
style="position: absolute; z-index: 99999; top: 0; right: 0" style="position: absolute; z-index: 99999; top: 0; right: 0"
> >
<div class="surface-1 row rounded"> <div class="surface-1 row rounded">
@ -346,7 +350,7 @@ watch(
class="rounded row" class="rounded row"
:class="{ :class="{
'q-py-md q-px-lg': $q.screen.gt.sm, 'q-py-md q-px-lg': $q.screen.gt.sm,
'q-py-sm q-px-lg': !$q.screen.gt.sm, 'q-pa-sm': !$q.screen.gt.sm,
}" }"
style="position: absolute; z-index: 999; top: 0; right: 0" style="position: absolute; z-index: 999; top: 0; right: 0"
> >
@ -425,7 +429,7 @@ watch(
class="col-12 col-md-10 relative-position" class="col-12 col-md-10 relative-position"
:class="{ :class="{
'q-py-md q-pr-md ': $q.screen.gt.sm, 'q-py-md q-pr-md ': $q.screen.gt.sm,
'q-py-md q-px-lg': !$q.screen.gt.sm, 'q-pa-sm': !$q.screen.gt.sm,
}" }"
id="user-form-content" id="user-form-content"
style="height: 100%; max-height: 100; overflow-y: auto" style="height: 100%; max-height: 100; overflow-y: auto"

13
src/pages/07_agencies-management/MainPage.vue
View file

@ -5,6 +5,7 @@ import { onMounted, reactive, ref } from 'vue';
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
import { Icon } from '@iconify/vue/dist/iconify.js'; import { Icon } from '@iconify/vue/dist/iconify.js';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { useQuasar } from 'quasar';
import { baseUrl } from 'src/stores/utils'; import { baseUrl } from 'src/stores/utils';
import { useNavigator } from 'src/stores/navigator'; import { useNavigator } from 'src/stores/navigator';
@ -22,6 +23,7 @@ import AgenciesDialog from './AgenciesDialog.vue';
import { watch } from 'vue'; import { watch } from 'vue';
const { t } = useI18n(); const { t } = useI18n();
const $q = useQuasar();
const navigatorStore = useNavigator(); const navigatorStore = useNavigator();
const institutionStore = useInstitution(); const institutionStore = useInstitution();
@ -248,6 +250,7 @@ async function fetchData() {
onMounted(async () => { onMounted(async () => {
navigatorStore.current.title = 'agencies.title'; navigatorStore.current.title = 'agencies.title';
navigatorStore.current.path = [{ text: 'agencies.caption', i18n: true }]; navigatorStore.current.path = [{ text: 'agencies.caption', i18n: true }];
pageState.gridView = $q.screen.lt.md ? true : false;
await fetchData(); await fetchData();
}); });
@ -324,7 +327,7 @@ watch(
outlined outlined
dense dense
:label="$t('general.search')" :label="$t('general.search')"
class="q-mr-md col-12 col-md-3" class="col col-md-3"
:bg-color="$q.dark.isActive ? 'dark' : 'white'" :bg-color="$q.dark.isActive ? 'dark' : 'white'"
v-model="pageState.inputSearch" v-model="pageState.inputSearch"
debounce="200" debounce="200"
@ -334,11 +337,7 @@ watch(
</template> </template>
</q-input> </q-input>
<div <div class="row col-md-5 justify-end" style="white-space: nowrap">
class="row col-12 col-md-3 justify-end"
:class="{ 'q-pt-xs': $q.screen.lt.md }"
style="white-space: nowrap"
>
<!-- <q-select <!-- <q-select
v-model="statusFilter" v-model="statusFilter"
outlined outlined
@ -361,7 +360,7 @@ watch(
v-if="!pageState.gridView" v-if="!pageState.gridView"
id="select-field" id="select-field"
for="select-field" for="select-field"
class="col" class="col-md-5 q-ml-sm"
:options=" :options="
fieldSelectedOption.map((v) => ({ fieldSelectedOption.map((v) => ({
...v, ...v,

31
src/pages/08_request-list/MainPage.vue
View file

@ -1,8 +1,9 @@
<script setup lang="ts"> <script setup lang="ts">
// NOTE: Library // NOTE: Library
import { computed, onMounted, reactive, watch } from 'vue'; import { computed, onMounted, reactive, ref, watch } from 'vue';
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { QSelect, useQuasar } from 'quasar';
// NOTE: Components // NOTE: Components
import StatCardComponent from 'src/components/StatCardComponent.vue'; import StatCardComponent from 'src/components/StatCardComponent.vue';
@ -19,12 +20,15 @@ import { useRequestList } from 'src/stores/request-list';
import { RequestData, RequestDataStatus } from 'src/stores/request-list/types'; import { RequestData, RequestDataStatus } from 'src/stores/request-list/types';
import { dialogWarningClose } from 'src/stores/utils'; import { dialogWarningClose } from 'src/stores/utils';
const $q = useQuasar();
const navigatorStore = useNavigator(); const navigatorStore = useNavigator();
const flowStore = useFlowStore(); const flowStore = useFlowStore();
const requestListStore = useRequestList(); const requestListStore = useRequestList();
const { t } = useI18n(); const { t } = useI18n();
const { data, stats, page, pageMax, pageSize } = storeToRefs(requestListStore); const { data, stats, page, pageMax, pageSize } = storeToRefs(requestListStore);
const refFilter = ref<InstanceType<typeof QSelect>>();
// NOTE: Variable // NOTE: Variable
const pageState = reactive({ const pageState = reactive({
hideStat: false, hideStat: false,
@ -89,6 +93,7 @@ function triggerView(opts: { requestData: RequestData }) {
} }
onMounted(async () => { onMounted(async () => {
pageState.gridView = $q.screen.lt.md ? true : false;
navigatorStore.current.title = 'requestList.title'; navigatorStore.current.title = 'requestList.title';
navigatorStore.current.path = [{ text: 'requestList.caption', i18n: true }]; navigatorStore.current.path = [{ text: 'requestList.caption', i18n: true }];
@ -185,7 +190,7 @@ watch([() => pageState.inputSearch, () => pageState.statusFilter], () =>
outlined outlined
dense dense
:label="$t('general.search')" :label="$t('general.search')"
class="q-mr-md col-12 col-md-3" class="col col-md-3"
:bg-color="$q.dark.isActive ? 'dark' : 'white'" :bg-color="$q.dark.isActive ? 'dark' : 'white'"
v-model="pageState.inputSearch" v-model="pageState.inputSearch"
debounce="200" debounce="200"
@ -193,14 +198,26 @@ watch([() => pageState.inputSearch, () => pageState.statusFilter], () =>
<template #prepend> <template #prepend>
<q-icon name="mdi-magnify" /> <q-icon name="mdi-magnify" />
</template> </template>
<template v-if="$q.screen.lt.md" v-slot:append>
<span class="row">
<q-separator vertical />
<q-btn
icon="mdi-filter-variant"
unelevated
class="q-ml-sm"
padding="4px"
size="sm"
rounded
@click="refFilter?.showPopup"
/>
</span>
</template>
</q-input> </q-input>
<div <div class="row col-md-5" style="white-space: nowrap">
class="row col-12 col-md-5 justify-end"
:class="{ 'q-pt-xs': $q.screen.lt.md }"
style="white-space: nowrap"
>
<q-select <q-select
v-show="$q.screen.gt.sm"
ref="refFilter"
v-model="pageState.statusFilter" v-model="pageState.statusFilter"
outlined outlined
dense dense

15
src/pages/09_task-order/MainPage.vue
View file

@ -2,6 +2,7 @@
// NOTE: Library // NOTE: Library
import { computed, onMounted, reactive, watch, ref } from 'vue'; import { computed, onMounted, reactive, watch, ref } from 'vue';
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
import { useQuasar } from 'quasar';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
// NOTE: Components // NOTE: Components
@ -21,14 +22,13 @@ import {
} from 'src/stores/task-order/types'; } from 'src/stores/task-order/types';
import { useNavigator } from 'src/stores/navigator'; import { useNavigator } from 'src/stores/navigator';
import { useTaskOrderStore } from 'src/stores/task-order'; import { useTaskOrderStore } from 'src/stores/task-order';
import { useTaskOrderForm } from './form';
import useFlowStore from 'src/stores/flow'; import useFlowStore from 'src/stores/flow';
import { pageTabs, column, pageTabsReceive } from './constants'; import { pageTabs, column, pageTabsReceive } from './constants';
import { dialogWarningClose, isRoleInclude } from 'src/stores/utils'; import { dialogWarningClose, isRoleInclude } from 'src/stores/utils';
import { PaginationResult } from 'src/types'; import { PaginationResult } from 'src/types';
const { t } = useI18n(); const { t } = useI18n();
const taskOrderFormStore = useTaskOrderForm(); const $q = useQuasar();
const navigatorStore = useNavigator(); const navigatorStore = useNavigator();
const flowStore = useFlowStore(); const flowStore = useFlowStore();
const taskOrderStore = useTaskOrderStore(); const taskOrderStore = useTaskOrderStore();
@ -138,6 +138,7 @@ async function deleteTaskOrder(id: string) {
} }
onMounted(async () => { onMounted(async () => {
pageState.gridView = $q.screen.lt.md ? true : false;
navigatorStore.current.title = 'taskOrder.title'; navigatorStore.current.title = 'taskOrder.title';
navigatorStore.current.path = [{ text: 'taskOrder.caption', i18n: true }]; navigatorStore.current.path = [{ text: 'taskOrder.caption', i18n: true }];
fetchTaskOrderList(); fetchTaskOrderList();
@ -284,7 +285,7 @@ watch(
outlined outlined
dense dense
:label="$t('general.search')" :label="$t('general.search')"
class="q-mr-md col-12 col-md-3" class="col col-md-3"
:bg-color="$q.dark.isActive ? 'dark' : 'white'" :bg-color="$q.dark.isActive ? 'dark' : 'white'"
v-model="pageState.inputSearch" v-model="pageState.inputSearch"
debounce="200" debounce="200"
@ -294,11 +295,7 @@ watch(
</template> </template>
</q-input> </q-input>
<div <div class="row col-md-5 justify-end" style="white-space: nowrap">
class="row col-12 col-md-3 justify-end"
:class="{ 'q-pt-xs': $q.screen.lt.md }"
style="white-space: nowrap"
>
<!-- <q-select <!-- <q-select
v-model="pageState.statusFilter" v-model="pageState.statusFilter"
outlined outlined
@ -334,7 +331,7 @@ watch(
v-if="!pageState.gridView" v-if="!pageState.gridView"
id="select-field" id="select-field"
for="select-field" for="select-field"
class="col" class="col-md-5 q-ml-sm"
:options=" :options="
fieldSelectedOption.map((v) => ({ fieldSelectedOption.map((v) => ({
...v, ...v,

100
src/pages/09_task-order/order_view/MainPage.vue
View file

@ -1033,55 +1033,63 @@ watch(
header-class="text-medium text-body items-center bordered-b " header-class="text-medium text-body items-center bordered-b "
> >
<template #header> <template #header>
<q-avatar class="q-mr-md" size="md"> <section class="row items-center full-width">
<q-img <div class="flex items-center col-sm col-12 no-wrap">
class="text-center" <q-avatar class="q-mr-md" size="md">
:ratio="1" <q-img
:src="`${baseUrl}/product/${product.id}/image/${product.selectedImage}`" class="text-center"
:ratio="1"
:src="`${baseUrl}/product/${product.id}/image/${product.selectedImage}`"
>
<template #error>
<q-icon
class="full-width full-height"
name="mdi-shopping-outline"
:style="`color: var(--teal-10); background: hsla(var(--teal-${$q.dark.isActive ? '8' : '10'}-hsl)/0.15)`"
/>
</template>
</q-img>
</q-avatar>
<span>
{{ product.name }}
<div class="app-text-muted text-caption">
{{ product.code }}
</div>
</span>
</div>
<span
class="row items-center q-gutter-x-sm"
:class="{ 'q-py-xs': $q.screen.lt.sm }"
> >
<template #error> <div
v-for="taskStatus in 3"
:key="taskStatus"
class="rounded q-px-sm row items-center"
style="background: hsl(var(--text-mute) / 0.1)"
:style="`color: hsl(var(--${
taskStatus === 1
? 'warning'
: taskStatus === 2
? 'positive'
: 'negative'
}-bg))`"
>
<q-icon <q-icon
class="full-width full-height" name="mdi-account-group-outline"
name="mdi-shopping-outline" size="xs"
:style="`color: var(--teal-10); background: hsla(var(--teal-${$q.dark.isActive ? '8' : '10'}-hsl)/0.15)`" class="q-pr-sm"
/> />
</template> {{
</q-img> taskStatusCount(
</q-avatar> taskStatus,
<span> product.id,
{{ product.name }} v.responsibleUser.id,
<div class="app-text-muted text-caption"> )
{{ product.code }} }}
</div> </div>
</span> </span>
<span class="q-ml-auto row items-center q-gutter-x-sm"> </section>
<div
v-for="taskStatus in 3"
:key="taskStatus"
class="rounded q-px-sm row items-center"
style="background: hsl(var(--text-mute) / 0.1)"
:style="`color: hsl(var(--${
taskStatus === 1
? 'warning'
: taskStatus === 2
? 'positive'
: 'negative'
}-bg))`"
>
<q-icon
name="mdi-account-group-outline"
size="xs"
class="q-pr-sm"
/>
{{
taskStatusCount(
taskStatus,
product.id,
v.responsibleUser.id,
)
}}
</div>
</span>
</template> </template>
<div> <div>

186
src/pages/09_task-order/receive_view/MainPage.vue
View file

@ -440,42 +440,55 @@ watch([currentFormData.value.taskStatus], () => {
class="row items-center surface-1 q-pa-md rounded gradient-stat" class="row items-center surface-1 q-pa-md rounded gradient-stat"
> >
<span <span
class="row col rounded q-px-sm q-py-md info" class="row col rounded q-px-sm q-py-md info justify-end"
style="border: 1px solid hsl(var(--info-bg))" style="border: 1px solid hsl(var(--info-bg))"
> >
{{ $t('taskOrder.allProduct') }} <span
<span class="q-ml-auto">{{ fullTaskOrder.taskList.length }}</span> class="col-sm col-12"
:class="{ 'text-right': $q.screen.lt.sm }"
>
{{ $t('taskOrder.allProduct') }}
</span>
{{ fullTaskOrder.taskList.length }}
</span> </span>
<span <span
class="row col rounded q-px-sm q-py-md q-mx-md positive" class="row col rounded q-px-sm q-py-md q-mx-md positive justify-end"
style="border: 1px solid hsl(var(--positive-bg))" style="border: 1px solid hsl(var(--positive-bg))"
> >
{{ $t('taskOrder.alreadySentTask') }} <span
<span class="q-ml-auto"> class="col-sm col-12"
{{ :class="{ 'text-right': $q.screen.lt.sm }"
fullTaskOrder.taskList.filter( >
(t) => {{ $t('taskOrder.alreadySentTask') }}
t.taskStatus === TaskStatus.Complete ||
t.taskStatus === TaskStatus.Success ||
t.taskStatus === TaskStatus.Validate ||
t.taskStatus === TaskStatus.Redo ||
t.taskStatus === TaskStatus.Failed,
).length
}}
</span> </span>
{{
fullTaskOrder.taskList.filter(
(t) =>
t.taskStatus === TaskStatus.Complete ||
t.taskStatus === TaskStatus.Success ||
t.taskStatus === TaskStatus.Validate ||
t.taskStatus === TaskStatus.Redo ||
t.taskStatus === TaskStatus.Failed,
).length
}}
</span> </span>
<span <span
class="row col rounded q-px-sm q-py-md warning" class="row col rounded q-px-sm q-py-md warning justify-end"
style="border: 1px solid hsl(var(--warning-bg))" style="border: 1px solid hsl(var(--warning-bg))"
> >
{{ $t('taskOrder.status.Pending') }} <span
<span class="q-ml-auto"> class="col-sm col-12"
{{ :class="{ 'text-right': $q.screen.lt.sm }"
fullTaskOrder.taskList.filter( >
(t) => t.taskStatus === TaskStatus.InProgress, {{ $t('taskOrder.status.Pending') }}
).length
}}
</span> </span>
{{
fullTaskOrder.taskList.filter(
(t) => t.taskStatus === TaskStatus.InProgress,
).length
}}
</span> </span>
</article> </article>
@ -553,64 +566,79 @@ watch([currentFormData.value.taskStatus], () => {
header-class="q-py-sm text-medium text-body items-center rounded q-mx-md q-my-sm" header-class="q-py-sm text-medium text-body items-center rounded q-mx-md q-my-sm"
> >
<template #header> <template #header>
<q-avatar class="q-mr-md" size="md"> <section class="row items-center full-width">
<q-img <div class="flex items-center col-sm col-12 no-wrap">
class="text-center" <q-avatar class="q-mr-md" size="md">
:ratio="1" <q-img
:src="`${baseUrl}/product/${product.id}/image/${product.selectedImage}`" class="text-center"
> :ratio="1"
<template #error> :src="`${baseUrl}/product/${product.id}/image/${product.selectedImage}`"
<q-icon >
class="full-width full-height" <template #error>
name="mdi-shopping-outline" <q-icon
:style="`color: var(--teal-10); background: hsla(var(--teal-${$q.dark.isActive ? '8' : '10'}-hsl)/0.15)`" class="full-width full-height"
/> name="mdi-shopping-outline"
</template> :style="`color: var(--teal-10); background: hsla(var(--teal-${$q.dark.isActive ? '8' : '10'}-hsl)/0.15)`"
</q-img> />
</q-avatar> </template>
<span> </q-img>
{{ product.name }} </q-avatar>
<div class="app-text-muted text-caption"> <span>
{{ product.code }} {{ product.name }}
<div class="app-text-muted text-caption">
{{ product.code }}
</div>
</span>
</div> </div>
</span>
<span
v-if="
fullTaskOrder.taskOrderStatus === TaskOrderStatus.Pending
"
class="q-ml-auto"
>
<div
class="rounded q-px-sm row items-center"
style="background: hsl(var(--text-mute) / 0.15)"
>
<q-icon
name="mdi-account-group-outline"
size="xs"
class="q-pr-sm"
/>
{{ list.length }}
</div>
</span>
<span v-else class="q-ml-auto row items-center q-gutter-x-sm">
<div
v-for="v in 3"
:key="v"
class="rounded q-px-sm row items-center"
style="background: hsl(var(--text-mute) / 0.1)"
:style="`color: hsl(var(--${
v === 1 ? 'warning' : v === 2 ? 'positive' : 'negative'
}-bg))`"
>
<q-icon
name="mdi-account-group-outline"
size="xs"
class="q-pr-sm"
/>
{{ taskStatusCount(v, product.id) }} <div
class="row items-center"
:class="{ 'q-py-xs': $q.screen.lt.sm }"
>
<span
v-if="
fullTaskOrder.taskOrderStatus ===
TaskOrderStatus.Pending
"
class="q-ml-auto"
>
<div
class="rounded q-px-sm row items-center"
style="background: hsl(var(--text-mute) / 0.15)"
>
<q-icon
name="mdi-account-group-outline"
size="xs"
class="q-pr-sm"
/>
{{ list.length }}
</div>
</span>
<span v-else class="row items-center q-gutter-x-sm">
<div
v-for="v in 3"
:key="v"
class="rounded q-px-sm row items-center"
style="background: hsl(var(--text-mute) / 0.1)"
:style="`color: hsl(var(--${
v === 1
? 'warning'
: v === 2
? 'positive'
: 'negative'
}-bg))`"
>
<q-icon
name="mdi-account-group-outline"
size="xs"
class="q-pr-sm"
/>
{{ taskStatusCount(v, product.id) }}
</div>
</span>
</div> </div>
</span> </section>
</template> </template>
<div> <div>

33
src/pages/10_invoice/MainPage.vue
View file

@ -1,7 +1,8 @@
<script lang="ts" setup> <script lang="ts" setup>
// NOTE: Library // NOTE: Library
import { computed, onMounted, reactive, watch } from 'vue'; import { computed, onMounted, reactive, ref, watch } from 'vue';
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
import { QSelect, useQuasar } from 'quasar';
// NOTE: Components // NOTE: Components
import StatCardComponent from 'src/components/StatCardComponent.vue'; import StatCardComponent from 'src/components/StatCardComponent.vue';
@ -20,10 +21,12 @@ import { useInvoice } from 'src/stores/payment';
import { Invoice, PaymentDataStatus } from 'src/stores/payment/types'; import { Invoice, PaymentDataStatus } from 'src/stores/payment/types';
import { Quotation } from 'src/stores/quotations'; import { Quotation } from 'src/stores/quotations';
const $q = useQuasar();
const navigatorStore = useNavigator(); const navigatorStore = useNavigator();
const flowStore = useFlowStore(); const flowStore = useFlowStore();
const invoiceStore = useInvoice(); const invoiceStore = useInvoice();
const { data, stats, page, pageMax, pageSize } = storeToRefs(invoiceStore); const { data, stats, page, pageMax, pageSize } = storeToRefs(invoiceStore);
const refFilter = ref<InstanceType<typeof QSelect>>();
// NOTE: Variable // NOTE: Variable
const pageState = reactive({ const pageState = reactive({
@ -74,7 +77,7 @@ async function fetchStats() {
} }
function triggerView(opts: { quotationId: string }) { function triggerView(opts: { quotationId: string }) {
const url = new URL(`/quotation/view?tab=invoice`, window.location.origin); const url = new URL('/quotation/view?tab=invoice', window.location.origin);
localStorage.setItem( localStorage.setItem(
'new-quotation', 'new-quotation',
@ -105,6 +108,8 @@ function viewDocExample(quotationId: string) {
} }
onMounted(async () => { onMounted(async () => {
pageState.gridView = $q.screen.lt.md ? true : false;
navigatorStore.current.title = 'invoice.title'; navigatorStore.current.title = 'invoice.title';
navigatorStore.current.path = [{ text: 'invoice.caption', i18n: true }]; navigatorStore.current.path = [{ text: 'invoice.caption', i18n: true }];
@ -189,7 +194,7 @@ watch(
outlined outlined
dense dense
:label="$t('general.search')" :label="$t('general.search')"
class="q-mr-md col-12 col-md-3" class="col col-md-3"
:bg-color="$q.dark.isActive ? 'dark' : 'white'" :bg-color="$q.dark.isActive ? 'dark' : 'white'"
v-model="pageState.inputSearch" v-model="pageState.inputSearch"
debounce="200" debounce="200"
@ -197,14 +202,26 @@ watch(
<template #prepend> <template #prepend>
<q-icon name="mdi-magnify" /> <q-icon name="mdi-magnify" />
</template> </template>
<template v-if="$q.screen.lt.md" v-slot:append>
<span class="row">
<q-separator vertical />
<q-btn
icon="mdi-filter-variant"
unelevated
class="q-ml-sm"
padding="4px"
size="sm"
rounded
@click="refFilter?.showPopup"
/>
</span>
</template>
</q-input> </q-input>
<div <div class="row col-md-5" style="white-space: nowrap">
class="row col-12 col-md-5 justify-end"
:class="{ 'q-pt-xs': $q.screen.lt.md }"
style="white-space: nowrap"
>
<q-select <q-select
v-show="$q.screen.gt.sm"
ref="refFilter"
v-model="pageState.statusFilter" v-model="pageState.statusFilter"
outlined outlined
dense dense

13
src/pages/11_credit-note/MainPage.vue
View file

@ -3,6 +3,7 @@
import { computed, onMounted, reactive, watch } from 'vue'; import { computed, onMounted, reactive, watch } from 'vue';
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { useQuasar } from 'quasar';
// NOTE: Components // NOTE: Components
import StatCardComponent from 'src/components/StatCardComponent.vue'; import StatCardComponent from 'src/components/StatCardComponent.vue';
@ -24,6 +25,7 @@ import { CreditNoteStatus, useCreditNote } from 'src/stores/credit-note';
import TableCreditNote from './TableCreditNote.vue'; import TableCreditNote from './TableCreditNote.vue';
import { dialogWarningClose } from 'src/stores/utils'; import { dialogWarningClose } from 'src/stores/utils';
const $q = useQuasar();
const { t } = useI18n(); const { t } = useI18n();
const flow = useFlowStore(); const flow = useFlowStore();
const navigator = useNavigator(); const navigator = useNavigator();
@ -115,6 +117,7 @@ function close() {
} }
onMounted(async () => { onMounted(async () => {
pageState.gridView = $q.screen.lt.md ? true : false;
navigator.current.title = 'creditNote.title'; navigator.current.title = 'creditNote.title';
navigator.current.path = [{ text: 'creditNote.caption', i18n: true }]; navigator.current.path = [{ text: 'creditNote.caption', i18n: true }];
@ -209,7 +212,7 @@ watch(
outlined outlined
dense dense
:label="$t('general.search')" :label="$t('general.search')"
class="q-mr-md col-12 col-md-3" class="col col-md-3"
:bg-color="$q.dark.isActive ? 'dark' : 'white'" :bg-color="$q.dark.isActive ? 'dark' : 'white'"
v-model="pageState.inputSearch" v-model="pageState.inputSearch"
debounce="200" debounce="200"
@ -219,16 +222,12 @@ watch(
</template> </template>
</q-input> </q-input>
<div <div class="row col-md-5 justify-end" style="white-space: nowrap">
class="row col-12 col-md-3 justify-end"
:class="{ 'q-pt-xs': $q.screen.lt.md }"
style="white-space: nowrap"
>
<q-select <q-select
v-if="!pageState.gridView" v-if="!pageState.gridView"
id="select-field" id="select-field"
for="select-field" for="select-field"
class="col" class="col q-ml-sm"
:options=" :options="
fieldSelectedOption.map((v) => ({ fieldSelectedOption.map((v) => ({
...v, ...v,

33
src/pages/11_credit-note/RefundInformation.vue
View file

@ -125,31 +125,40 @@ const refundOpts = ref<
class="row col-12 items-center surface-1 q-py-sm rounded gradient-stat" class="row col-12 items-center surface-1 q-py-sm rounded gradient-stat"
> >
<span <span
class="row col rounded q-px-sm q-py-md info" class="row col rounded q-px-sm q-py-md info justify-end"
style="border: 1px solid hsl(var(--info-bg))" style="border: 1px solid hsl(var(--info-bg))"
> >
{{ $t('creditNote.label.totalAmount') }} <span
<span class="q-ml-auto"> class="col-sm col-12"
{{ formatNumberDecimal(total) }} :class="{ 'text-right': $q.screen.lt.sm }"
>
{{ $t('creditNote.label.totalAmount') }}
</span> </span>
{{ formatNumberDecimal(total) }}
</span> </span>
<span <span
class="row col rounded q-px-sm q-mx-md q-py-md positive" class="row col rounded q-px-sm q-mx-md q-py-md positive justify-end"
style="border: 1px solid hsl(var(--positive-bg))" style="border: 1px solid hsl(var(--positive-bg))"
> >
{{ $t('creditNote.label.paid') }} <span
<span class="q-ml-auto"> class="col-sm col-12"
{{ formatNumberDecimal(paid) }} :class="{ 'text-right': $q.screen.lt.sm }"
>
{{ $t('creditNote.label.paid') }}
</span> </span>
{{ formatNumberDecimal(paid) }}
</span> </span>
<span <span
class="row col rounded q-px-sm q-py-md warning" class="row col rounded q-px-sm q-py-md warning justify-end"
style="border: 1px solid hsl(var(--warning-bg))" style="border: 1px solid hsl(var(--warning-bg))"
> >
{{ $t('creditNote.label.remain') }} <span
<span class="q-ml-auto"> class="col-sm col-12"
{{ formatNumberDecimal(remain) }} :class="{ 'text-right': $q.screen.lt.sm }"
>
{{ $t('creditNote.label.remain') }}
</span> </span>
{{ formatNumberDecimal(remain) }}
</span> </span>
</article> </article>
</article> </article>

35
src/pages/13_receipt/MainPage.vue
View file

@ -1,6 +1,6 @@
<script lang="ts" setup> <script lang="ts" setup>
// NOTE: Library // NOTE: Library
import { computed, onMounted, reactive, watch } from 'vue'; import { computed, onMounted, reactive, ref, watch } from 'vue';
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
// NOTE: Components // NOTE: Components
@ -19,14 +19,17 @@ import { useRequestList } from 'src/stores/request-list';
import { usePayment, useReceipt } from 'src/stores/payment'; import { usePayment, useReceipt } from 'src/stores/payment';
import { Receipt, PaymentDataStatus } from 'src/stores/payment/types'; import { Receipt, PaymentDataStatus } from 'src/stores/payment/types';
import { Quotation } from 'src/stores/quotations'; import { Quotation } from 'src/stores/quotations';
import { useQuasar } from 'quasar'; import { QSelect, useQuasar } from 'quasar';
const $q = useQuasar();
const navigatorStore = useNavigator(); const navigatorStore = useNavigator();
const flowStore = useFlowStore(); const flowStore = useFlowStore();
const receiptStore = useReceipt(); const receiptStore = useReceipt();
const { data, page, pageMax, pageSize } = storeToRefs(receiptStore); const { data, page, pageMax, pageSize } = storeToRefs(receiptStore);
// NOTE: Variable // NOTE: Variable
const refFilter = ref<InstanceType<typeof QSelect>>();
const pageState = reactive({ const pageState = reactive({
hideStat: false, hideStat: false,
statusFilter: 'None' as 'None' | PaymentDataStatus, statusFilter: 'None' as 'None' | PaymentDataStatus,
@ -59,7 +62,7 @@ async function fetchList(opts?: { rotateFlowId?: boolean }) {
} }
function triggerView(opts: { quotationId: string }) { function triggerView(opts: { quotationId: string }) {
const url = new URL(`/quotation/view?tab=receipt`, window.location.origin); const url = new URL('/quotation/view?tab=receipt', window.location.origin);
localStorage.setItem( localStorage.setItem(
'new-quotation', 'new-quotation',
@ -82,6 +85,8 @@ async function viewDocExample(id: string) {
} }
onMounted(async () => { onMounted(async () => {
pageState.gridView = $q.screen.lt.md ? true : false;
navigatorStore.current.title = 'receipt.title'; navigatorStore.current.title = 'receipt.title';
navigatorStore.current.path = [{ text: 'receipt.caption', i18n: true }]; navigatorStore.current.path = [{ text: 'receipt.caption', i18n: true }];
@ -159,7 +164,7 @@ watch(
outlined outlined
dense dense
:label="$t('general.search')" :label="$t('general.search')"
class="q-mr-md col-12 col-md-3" class="col col-md-3"
:bg-color="$q.dark.isActive ? 'dark' : 'white'" :bg-color="$q.dark.isActive ? 'dark' : 'white'"
v-model="pageState.inputSearch" v-model="pageState.inputSearch"
debounce="200" debounce="200"
@ -167,14 +172,26 @@ watch(
<template #prepend> <template #prepend>
<q-icon name="mdi-magnify" /> <q-icon name="mdi-magnify" />
</template> </template>
<template v-if="$q.screen.lt.md" v-slot:append>
<span class="row">
<q-separator vertical />
<q-btn
icon="mdi-filter-variant"
unelevated
class="q-ml-sm"
padding="4px"
size="sm"
rounded
@click="refFilter?.showPopup"
/>
</span>
</template>
</q-input> </q-input>
<div <div class="row col-md-5" style="white-space: nowrap">
class="row col-12 col-md-5 justify-end"
:class="{ 'q-pt-xs': $q.screen.lt.md }"
style="white-space: nowrap"
>
<q-select <q-select
v-show="$q.screen.gt.sm"
ref="refFilter"
v-model="pageState.statusFilter" v-model="pageState.statusFilter"
outlined outlined
dense dense

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

@ -50,7 +50,7 @@ export type User = {
id: string; id: string;
code: string; code: string;
birthDate?: Date | null; birthDate?: Date | null;
responsibleArea: string; responsibleArea: string[];
checkpoint?: string | null; checkpoint?: string | null;
checkpointEN?: string | null; checkpointEN?: string | null;
citizenExpire?: Date | null; citizenExpire?: Date | null;
@ -99,7 +99,7 @@ export type UserCreate = {
username: string; username: string;
status?: Status; status?: Status;
birthDate?: Date | null; birthDate?: Date | null;
responsibleArea?: string | null; responsibleArea?: string[] | null;
checkpoint?: string | null; checkpoint?: string | null;
checkpointEN?: string | null; checkpointEN?: string | null;
citizenExpire?: Date | null; citizenExpire?: Date | null;