chamomind/jws-frontend
chamomind/jws-frontend
6
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

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 { useQuasar } from 'quasar';
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 useBranchStore from 'stores/branch';
import useFlowStore from 'stores/flow';
@ -72,6 +72,7 @@ const typeBranchItem = [
color: 'var(--blue-6-hsl)',
},
];
const refFilter = ref<InstanceType<typeof QSelect>>();
const holdDialog = ref(false);
const isSubCreate = ref(false);
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 = {
headOfficeId: null,
@ -1020,12 +1024,13 @@ watch(currentHq, () => {
class="col"
before-class="overflow-hidden"
after-class="overflow-hidden"
:disable="$q.screen.lt.sm"
>
<template v-slot:before>
<div class="surface-1 column full-height">
<div
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">
{{ $t('branch.allBranch') }}
@ -1157,7 +1162,7 @@ watch(currentHq, () => {
outlined
dense
: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'"
v-model="inputSearch"
debounce="200"
@ -1165,13 +1170,26 @@ watch(currentHq, () => {
<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="refFilter?.showPopup"
/>
</span>
</template>
</q-input>
<div
class="row col-12 col-md-6"
:class="{ 'q-pt-xs': $q.screen.lt.md }"
>
<div class="row col-md-6 justify-end">
<q-select
v-show="$q.screen.gt.sm"
ref="refFilter"
v-model="statusFilter"
outlined
dense
@ -1179,7 +1197,7 @@ watch(currentHq, () => {
option-value="value"
:hide-dropdown-icon="$q.screen.lt.sm"
option-label="label"
class="col"
class="col-md-5"
map-options
:for="'field-select-status'"
emit-value
@ -1194,6 +1212,7 @@ watch(currentHq, () => {
></q-select>
<q-select
v-if="!modeView"
id="select-field"
for="select-field"
:options="
@ -1204,7 +1223,7 @@ watch(currentHq, () => {
"
:display-value="$t('general.displayField')"
:hide-dropdown-icon="$q.screen.lt.sm"
class="col q-mx-sm"
class="col q-ml-sm"
v-model="fieldSelected"
option-label="label"
option-value="value"
@ -1220,7 +1239,7 @@ watch(currentHq, () => {
id="btn-mode"
v-model="modeView"
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'"
size="xs"
:options="[
@ -1266,8 +1285,26 @@ watch(currentHq, () => {
<div
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"
>

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 useMyBranch from 'src/stores/my-branch';
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 { useNavigator } from 'src/stores/navigator';
import { isRoleInclude, resetScrollBar } from 'src/stores/utils';
@ -73,6 +73,7 @@ const isImageEdit = ref(false);
const imageDialog = ref(false);
const infoDrawerEdit = ref(false);
const refreshImageState = ref(false);
const refFilter = ref<InstanceType<typeof QSelect>>();
const inputSearch = ref('');
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"
>
<div class="column">
<div
<header
class="row surface-3 justify-between full-width items-center bordered-b"
style="z-index: 1"
>
@ -830,7 +831,7 @@ watch(
outlined
dense
: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'"
v-model="inputSearch"
debounce="200"
@ -838,14 +839,26 @@ watch(
<template #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="refFilter?.showPopup"
/>
</span>
</template>
</q-input>
<div
class="row col-12 col-md-5"
:class="{ 'q-pt-xs': $q.screen.lt.md }"
style="white-space: nowrap"
>
<div class="row col-md-5" style="white-space: nowrap">
<q-select
v-show="$q.screen.gt.sm"
ref="refFilter"
v-model="statusFilter"
outlined
dense
@ -936,7 +949,7 @@ watch(
</q-btn-toggle>
</div>
</div>
</div>
</header>
<div class="surface-2 bordered-b q-px-md full-width">
<q-tabs
@ -1521,7 +1534,7 @@ watch(
class="rounded row"
:class="{
'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"
>
@ -1618,7 +1631,7 @@ watch(
class="col-12 col-md-10 relative-position"
:class="{
'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"
style="height: 100%; max-height: 100; overflow-y: auto"
@ -1734,6 +1747,7 @@ watch(
}"
>
<ProfileBanner
:prefix="formData.firstName"
active
useToggle
color="white"
@ -1789,7 +1803,7 @@ watch(
style="position: absolute; z-index: 999; right: 0; top: 0"
:class="{
'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">
@ -1837,7 +1851,7 @@ watch(
class="col-md-10 col-12 full-height scroll"
:class="{
'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

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"
:class="{
'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">
@ -160,7 +160,7 @@ function triggerPropertiesDialog(step: WorkFlowPayloadStep) {
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,
'q-pa-sm': !$q.screen.gt.sm,
}"
style="height: 100%; max-height: 100%; overflow-y: auto"
id="flow-form-dialog"
@ -169,6 +169,7 @@ function triggerPropertiesDialog(step: WorkFlowPayloadStep) {
v-model:flow-data="flowData"
v-model:register-branch-id="registerBranchId"
@trigger-properties="triggerPropertiesDialog"
@add-step="addStep"
/>
</section>
</div>
@ -199,7 +200,7 @@ function triggerPropertiesDialog(step: WorkFlowPayloadStep) {
class="rounded row"
:class="{
'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"
>
@ -304,7 +305,7 @@ function triggerPropertiesDialog(step: WorkFlowPayloadStep) {
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,
'q-pa-sm': !$q.screen.gt.sm,
}"
style="height: 100%; max-height: 100%; overflow-y: auto"
id="flow-form-drawer"
@ -317,6 +318,7 @@ function triggerPropertiesDialog(step: WorkFlowPayloadStep) {
v-model:register-branch-id="registerBranchId"
@change-status="$emit('changeStatus')"
@trigger-properties="triggerPropertiesDialog"
@add-step="addStep"
/>
</section>
</div>

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

@ -1,6 +1,6 @@
<script lang="ts" setup>
import { onMounted, reactive, ref, watch } from 'vue';
import { QTableProps } from 'quasar';
import { QSelect, QTableProps } from 'quasar';
import { storeToRefs } from 'pinia';
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 formDataWorkflow = ref<WorkflowTemplatePayload>({
status: 'CREATED',
@ -361,7 +362,7 @@ watch([() => pageState.inputSearch, workflowPageSize], fetchWorkflowList);
outlined
dense
: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'"
v-model="pageState.inputSearch"
debounce="200"
@ -369,14 +370,26 @@ watch([() => pageState.inputSearch, workflowPageSize], fetchWorkflowList);
<template #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="refFilter?.showPopup"
/>
</span>
</template>
</q-input>
<div
class="row col-12 col-md-5 justify-end"
:class="{ 'q-pt-xs': $q.screen.lt.md }"
style="white-space: nowrap"
>
<div class="row col-md-5" style="white-space: nowrap">
<q-select
v-show="$q.screen.gt.sm"
ref="refFilter"
v-model="statusFilter"
outlined
dense
@ -394,6 +407,7 @@ watch([() => pageState.inputSearch, workflowPageSize], fetchWorkflowList);
]"
/>
<q-select
v-show="$q.screen.gt.sm"
id="select-field"
for="select-field"
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 { onMounted } from 'vue';
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 ProductCardComponent from 'components/04_product-service/ProductCardComponent.vue';
@ -156,6 +156,12 @@ const priceDisplay = computed(() => ({
const actionDisplay = computed(() =>
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 imageDialog = ref(false);
const currentNode = ref<ProductGroup & { type: string }>();
@ -205,7 +211,6 @@ const drawerInfo = ref(false);
const isEdit = ref(false);
const modeView = ref(false);
const splitterModel = ref(25);
const dialogInputForm = ref(false);
const dialogProduct = ref(false);
@ -1829,16 +1834,46 @@ watch(
style="width: 100%"
class="col"
after-class="overflow-hidden"
:disable="$q.screen.lt.sm"
>
<template v-slot:before>
<div class="surface-1 column full-height">
<div
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') }}
</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 class="col full-width scroll">
@ -1964,10 +1999,9 @@ watch(
<q-input
for="input-search"
outlined
:class="{ 'col-12': $q.screen.lt.md }"
dense
:label="$t('general.search')"
class=""
class="col col-md-3"
:bg-color="$q.dark.isActive ? 'dark' : 'white'"
v-model="inputSearch"
debounce="200"
@ -1975,14 +2009,26 @@ watch(
<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
class="row col-12 col-md-6"
:class="{ 'q-pt-xs': $q.screen.lt.md }"
style="white-space: nowrap"
>
<div class="row col-md-6" style="white-space: nowrap">
<q-select
v-show="$q.screen.gt.sm"
ref="refFilterGroup"
v-model="currentStatus"
for="select-status"
outlined
@ -2466,11 +2512,11 @@ watch(
style="overflow: hidden"
>
<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
for="input-search"
:class="{ 'col-12': $q.screen.lt.md }"
class="col col-md-3"
outlined
dense
unelavated
@ -2482,14 +2528,26 @@ watch(
<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="refFilterProductService?.showPopup"
/>
</span>
</template>
</q-input>
<div
class="row col-12 col-md-6"
:class="{ 'q-pt-xs': $q.screen.lt.md }"
style="white-space: nowrap"
>
<div class="row col-md-6" style="white-space: nowrap">
<q-select
v-show="$q.screen.gt.sm"
ref="refFilterProductService"
:for="'field-select-status'"
v-model="currentStatus"
outlined
@ -3721,86 +3779,93 @@ watch(
</div>
<div
class="col surface-1 rounded bordered scroll row relative-position"
id="product-form"
class="full-width full-height scroll"
:class="{
'q-mb-lg q-mx-lg ': $q.screen.gt.sm,
'q-mb-sm q-mx-md': !$q.screen.gt.sm,
'q-pb-lg q-px-lg ': $q.screen.gt.sm,
'q-pb-sm q-px-md': !$q.screen.gt.sm,
}"
>
<div
class="col"
style="height: 100%; max-height: 100; overflow-y: auto"
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"
class="col surface-1 rounded bordered scroll row relative-position full-height"
id="product-form"
>
<div
class="q-py-md q-px-lg"
style="position: absolute; z-index: 99999; top: 0; right: 0"
class="col"
style="height: 100%; max-height: 100; overflow-y: auto"
v-if="$q.screen.gt.sm"
>
<div class="surface-1 row rounded">
<SaveButton id="btn-info-basic-save" icon-only type="submit" />
<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>
<BasicInfoProduct
v-if="productTab === 1"
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"
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
class="col-12 col-md-10"
id="customer-form-content"
:class="{
'q-py-md q-pr-md ': $q.screen.gt.sm,
'q-pa-sm': !$q.screen.gt.sm,
}"
style="height: 100%; max-height: 100%; overflow-y: auto"
>
<div
:class="{
'q-my-md q-mx-lg': $q.screen.gt.sm,
'q-ma-sm': $q.screen.lt.md,
}"
style="position: absolute; z-index: 99999; top: 0; right: 0"
>
<div class="surface-1 row rounded">
<SaveButton id="btn-info-basic-save" icon-only type="submit" />
</div>
</div>
<BasicInfoProduct
v-if="productTab === 1"
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"
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>
</DialogForm>
@ -3887,123 +3952,131 @@ watch(
</div>
<div
class="col surface-1 rounded bordered scroll row relative-position"
id="product-form"
class="full-width full-height scroll"
:class="{
'q-mb-lg q-mx-lg ': $q.screen.gt.sm,
'q-mb-sm q-mx-md': !$q.screen.gt.sm,
'q-pb-lg q-px-lg ': $q.screen.gt.sm,
'q-pb-sm q-px-md': !$q.screen.gt.sm,
}"
>
<div
class="surface-1 rounded row q-mx-lg q-my-md"
style="position: absolute; z-index: 999; top: 0; right: 0"
v-if="actionDisplay && !currentNoAction"
class="col surface-1 rounded bordered scroll row relative-position full-height"
id="product-form"
>
<UndoButton
v-if="infoProductEdit"
id="btn-info-basic-undo"
icon-only
@click="
() => {
formProduct = { ...prevProduct };
if (prevProduct.document)
formProductDocument = prevProduct.document;
infoProductEdit = false;
}
"
type="button"
/>
<SaveButton
v-if="infoProductEdit"
id="btn-info-basic-save"
icon-only
type="submit"
/>
<EditButton
v-if="!infoProductEdit"
id="btn-info-basic-edit"
icon-only
@click="infoProductEdit = true"
type="button"
/>
<DeleteButton
v-if="!infoProductEdit"
id="btn-info-basic-delete"
icon-only
@click="() => deleteProductConfirm()"
type="button"
/>
</div>
<div
class="col"
style="height: 100%; max-height: 100; overflow-y: auto"
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
class="surface-1 rounded row"
: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"
v-if="actionDisplay && !currentNoAction"
>
<UndoButton
v-if="infoProductEdit"
id="btn-info-basic-undo"
icon-only
@click="
() => {
formProduct = { ...prevProduct };
if (prevProduct.document)
formProductDocument = prevProduct.document;
infoProductEdit = false;
}
"
type="button"
/>
<SaveButton
v-if="infoProductEdit"
id="btn-info-basic-save"
icon-only
type="submit"
/>
<EditButton
v-if="!infoProductEdit"
id="btn-info-basic-edit"
icon-only
@click="infoProductEdit = true"
type="button"
/>
<DeleteButton
v-if="!infoProductEdit"
id="btn-info-basic-delete"
icon-only
@click="() => deleteProductConfirm()"
type="button"
/>
</div>
<div
class="col"
style="height: 100%; max-height: 100; overflow-y: auto"
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"
: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
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>
</DialogForm>
@ -4170,17 +4243,33 @@ watch(
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,
'q-pa-sm': !$q.screen.gt.sm,
}"
style="height: 100%; max-height: 100%; overflow-y: auto"
>
<div
class="surface-1 rounded q-my-md q-mx-lg items-center row"
style="position: absolute; z-index: 999; top: 0; right: 0"
class="surface-1 rounded items-center justify-end row"
: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"
>
<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
class="col"
icon="mdi-file-tree-outline"
flat
square
@ -4199,6 +4288,7 @@ watch(
@click="serviceTreeView = true"
/>
<q-btn
class="col"
icon="mdi-view-list-outline"
flat
square
@ -4446,16 +4536,29 @@ watch(
'q-mb-sm q-mx-md': !$q.screen.gt.sm,
}"
>
<!-- row: $q.screen.gt.sm, -->
<div
class="surface-1 rounded q-my-md q-mx-lg row items-center"
style="position: absolute; z-index: 999; top: 0; right: 0"
class="surface-1 rounded items-center justify-end row"
: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"
>
<div
class="bordered rounded q-mr-md"
class="bordered rounded col-md row"
v-if="serviceTab === 2 && !infoServiceEdit"
:style="$q.screen.lt.sm && 'flex-basis: 100%; width: 1px'"
>
<q-btn
class="col"
icon="mdi-file-tree-outline"
flat
square
@ -4474,6 +4577,7 @@ watch(
@click="serviceTreeView = true"
/>
<q-btn
class="col"
icon="mdi-view-list-outline"
flat
square
@ -4533,6 +4637,7 @@ watch(
type="button"
/>
</div>
<div
class="col column justify-between no-wrap"
style="height: 100%; max-height: 100; overflow-y: auto"
@ -4613,7 +4718,7 @@ watch(
id="customer-form-content"
:class="{
'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"
v-if="dialogServiceEdit"

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

@ -1,8 +1,7 @@
<script lang="ts" setup>
import { pageTabs, columnQuotation } from './constants';
import { onMounted, reactive, ref, watch, computed } from 'vue';
import { storeToRefs } from 'pinia';
import { useQuasar } from 'quasar';
// NOTE: Import stores
import { useQuotationStore } from 'src/stores/quotations';
@ -12,6 +11,7 @@ import useFlowStore from 'src/stores/flow';
import useMyBranch from 'stores/my-branch';
import { useQuotationForm } from './form';
import { hslaColors } from './constants';
import { pageTabs, columnQuotation } from './constants';
// NOTE Import 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 PaginationPageSize from 'src/components/PaginationPageSize.vue';
const $q = useQuasar();
const quotationFormStore = useQuotationForm();
const customerFormStore = useCustomerForm();
const flowStore = useFlowStore();
@ -240,6 +241,7 @@ const {
} = storeToRefs(quotationStore);
onMounted(async () => {
pageState.gridView = $q.screen.lt.md ? true : false;
navigatorStore.current.title = 'quotation.title';
navigatorStore.current.path = [
{
@ -476,7 +478,7 @@ async function storeDataLocal(id: string) {
<header class="col surface-1 rounded bordered overflow-hidden">
<div class="column full-height">
<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"
>
<div class="row q-py-sm q-px-md justify-between full-width">
@ -485,7 +487,7 @@ async function storeDataLocal(id: string) {
outlined
dense
: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'"
v-model="pageState.inputSearch"
debounce="200"
@ -495,16 +497,12 @@ async function storeDataLocal(id: string) {
</template>
</q-input>
<div
class="row col-12 col-md-3 justify-end"
:class="{ 'q-pt-xs': $q.screen.lt.md }"
style="white-space: nowrap"
>
<div class="row col-md-5 justify-end" style="white-space: nowrap">
<q-select
v-if="!pageState.gridView"
id="select-field"
for="select-field"
class="col q-ml-sm"
class="col-md-5 q-ml-sm"
:options="
fieldSelectedOption.map((v) => ({
...v,
@ -654,8 +652,9 @@ async function storeDataLocal(id: string) {
@delete="(id) => triggerDialogDeleteQuottaion(id)"
>
<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
class="col"
hide-kebab-delete
:hide-kebab-edit="!(pageState.currentTab === 'Issued')"
: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
prefix="dialog"
img="/images/quotation-bg-avatar.png"
@ -801,9 +805,19 @@ async function storeDataLocal(id: string) {
hideFade
/>
</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
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"
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">
<ItemCard
class="col q-mx-sm full-height"
class="col q-mx-sm full-height cursor-pointer"
v-for="value in dialogCreateCustomerItem"
:key="value.text"
:icon="value.icon"
@ -850,7 +864,9 @@ async function storeDataLocal(id: string) {
() => {
triggerCreateCustomerd({
type:
value.text === 'customer.employerLegalEntity' ? 'CORP' : 'PERS',
value.text === 'customer.employerLegalEntity'
? CustomerType.Corporate
: CustomerType.Person,
});
emptyCreateDialog = false;
}

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

@ -371,10 +371,11 @@ onMounted(async () => {
"
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') }}
</span>
<span class="q-ml-auto">
<span>
{{ $t('quotation.receiptDialog.total') }}
</span>
<span class="bordered rounded surface-2 number-box q-mx-sm">
@ -415,49 +416,58 @@ onMounted(async () => {
<!-- summary total, paid, remain -->
<div class="row items-center">
<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))"
>
{{ $t('quotation.receiptDialog.totalAmount') }}
<span class="q-ml-auto">
{{ formatNumberDecimal(data.finalPrice, 2) }}
<span
class="col-sm col-12"
:class="{ 'text-right': $q.screen.lt.sm }"
>
{{ $t('quotation.receiptDialog.totalAmount') }}
</span>
{{ formatNumberDecimal(data.finalPrice, 2) }}
</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))"
>
{{ $t('quotation.receiptDialog.paid') }}
<span class="q-ml-auto">
{{
formatNumberDecimal(
paymentData.reduce(
(c, i) =>
i.paymentStatus === 'PaymentSuccess' ? c + i.amount : c,
0,
),
2,
)
}}
<span
class="col-sm col-12"
:class="{ 'text-right': $q.screen.lt.sm }"
>
{{ $t('quotation.receiptDialog.paid') }}
</span>
{{
formatNumberDecimal(
paymentData.reduce(
(c, i) =>
i.paymentStatus === 'PaymentSuccess' ? c + i.amount : c,
0,
),
2,
)
}}
</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))"
>
{{ $t('quotation.receiptDialog.remain') }}
<span class="q-ml-auto">
{{
formatNumberDecimal(
paymentData.reduce(
(c, i) =>
i.paymentStatus !== 'PaymentSuccess' ? c + i.amount : c,
0,
),
2,
)
}}
<span
class="col-sm col-12"
:class="{ 'text-right': $q.screen.lt.sm }"
>
{{ $t('quotation.receiptDialog.remain') }}
</span>
{{
formatNumberDecimal(
paymentData.reduce(
(c, i) =>
i.paymentStatus !== 'PaymentSuccess' ? c + i.amount : c,
0,
),
2,
)
}}
</span>
</div>

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

@ -1,7 +1,7 @@
<script lang="ts" setup>
import { useI18n } from 'vue-i18n';
import { storeToRefs } from 'pinia';
import { useQuasar } from 'quasar';
import { QSelect, useQuasar } from 'quasar';
import { computed, nextTick, onMounted, reactive, ref, watch } from 'vue';
import {
baseUrl,
@ -13,10 +13,9 @@ import { ProductTree, quotationProductTree } from './utils';
// NOTE: Import stores
import { dateFormat, calculateAge, dateFormatJS } from 'src/utils/datetime';
import { useEmployeeForm } from 'src/pages/03_customer-management/form';
import { useQuotationStore } from 'src/stores/quotations';
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 { useInvoice, useReceipt, usePayment } from 'stores/payment';
import useCustomerStore from 'stores/customer';
@ -28,13 +27,12 @@ import { deleteItem } from 'stores/utils';
import { RequestData, RequestDataStatus } from 'src/stores/request-list/types';
import { View } from './types.ts';
import {
EmployeeWorker,
PayCondition,
ProductRelation,
ProductServiceList,
QuotationPayload,
} 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 {
ProductGroup,
@ -50,7 +48,6 @@ import ProductItem from 'components/05_quotation/ProductItem.vue';
import WorkerItem from 'components/05_quotation/WorkerItem.vue';
import ToggleButton from 'components/button/ToggleButton.vue';
import FormAbout from 'components/05_quotation/FormAbout.vue';
import SelectZone from 'components/shared/SelectZone.vue';
import ImportWorker from './ImportWorker.vue';
import {
AddButton,
@ -127,7 +124,7 @@ const {
const { data: config } = storeToRefs(configStore);
const receiptList = ref<Receipt[]>([]);
const refStatusFilter = ref<InstanceType<typeof QSelect>>();
const templateForm = ref<string>('');
const templateFormOption = ref<{ label: string; value: string }[]>([]);
@ -1072,25 +1069,25 @@ watch(
},
);
async function searchEmployee(text: string) {
let query: string | undefined = text;
let pageSize = 50;
// async function searchEmployee(text: string) {
// let query: string | undefined = text;
// let pageSize = 50;
if (!text) {
query = undefined;
pageSize = 9999;
}
// if (!text) {
// query = undefined;
// pageSize = 9999;
// }
const retEmp = await customerStore.fetchBranchEmployee(
quotationFormData.value.customerBranchId,
{
query: query,
pageSize: pageSize,
passport: true,
},
);
if (retEmp) workerList.value = retEmp.data.result;
}
// const retEmp = await customerStore.fetchBranchEmployee(
// quotationFormData.value.customerBranchId,
// {
// query: query,
// pageSize: pageSize,
// passport: true,
// },
// );
// if (retEmp) workerList.value = retEmp.data.result;
// }
function storeDataLocal() {
quotationFormData.value.productServiceList = productServiceList.value;
@ -1308,12 +1305,24 @@ async function formDownload() {
<div
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"
>
<div class="row justify-end">
<BadgeComponent :title-i18n="$t('general.laborIdentified')" />
<div
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
class="row items-center justify-between surface-1 rounded q-pa-xs"
style="height: 40px; border-radius: 40px"
@ -1895,9 +1904,25 @@ async function formDownload() {
<template #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="refStatusFilter?.showPopup"
/>
</span>
</template>
</q-input>
<q-select
v-show="$q.screen.gt.sm"
ref="refStatusFilter"
v-model="quotationFormState.statusFilterRequest"
outlined
dense
@ -2093,9 +2118,10 @@ async function formDownload() {
</section>
</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
class="q-mr-sm"
class="q-mr-xl col-md-3 col-12"
incremental
v-model="templateForm"
id="quotation-branch"
: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 TreeView from 'src/components/shared/TreeView.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 TotalProductCardComponent from 'src/components/04_product-service/TotalProductCardComponent.vue';
import DeleteButton from 'src/components/button/DeleteButton.vue';
@ -491,7 +490,7 @@ watch(
</template>
</q-input>
<div class="row items-center q-gutter-x-sm">
<div class="row items-center q-gutter-x-sm no-wrap">
<q-btn
color="primary"
padding="4px"
@ -499,7 +498,6 @@ watch(
rounded
icon="mdi-store-plus-outline"
@click="triggerAddDialog"
style="color: hsl(var(--text-mute))"
/>
<q-btn
padding="4px"
@ -507,6 +505,7 @@ watch(
rounded
icon="mdi-information-outline"
@click="triggerInfo"
:color="pageState.infoDrawer ? 'info' : ''"
style="color: hsl(var(--text-mute))"
/>
</div>
@ -634,7 +633,8 @@ watch(
<div
v-if="pageState.infoDrawer"
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
v-if="selectedType === ''"
@ -840,12 +840,14 @@ watch(
>
<template #top>
<div class="row items-center app-text-muted">
{{ $t('productService.group.title') }}
<span class="q-pr-sm">
{{ $t('productService.group.title') }}
</span>
<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"
style="min-height: 50px"
clearable
v-model:value="selectedProductGroup"
:placeholder="

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

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

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

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

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

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

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

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

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

@ -251,12 +251,16 @@ watch(
id="agencies-form-content"
:class="{
'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"
>
<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"
>
<div class="surface-1 row rounded">
@ -346,7 +350,7 @@ watch(
class="rounded row"
:class="{
'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"
>
@ -425,7 +429,7 @@ watch(
class="col-12 col-md-10 relative-position"
:class="{
'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"
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 { Icon } from '@iconify/vue/dist/iconify.js';
import { useI18n } from 'vue-i18n';
import { useQuasar } from 'quasar';
import { baseUrl } from 'src/stores/utils';
import { useNavigator } from 'src/stores/navigator';
@ -22,6 +23,7 @@ import AgenciesDialog from './AgenciesDialog.vue';
import { watch } from 'vue';
const { t } = useI18n();
const $q = useQuasar();
const navigatorStore = useNavigator();
const institutionStore = useInstitution();
@ -248,6 +250,7 @@ async function fetchData() {
onMounted(async () => {
navigatorStore.current.title = 'agencies.title';
navigatorStore.current.path = [{ text: 'agencies.caption', i18n: true }];
pageState.gridView = $q.screen.lt.md ? true : false;
await fetchData();
});
@ -324,7 +327,7 @@ watch(
outlined
dense
: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'"
v-model="pageState.inputSearch"
debounce="200"
@ -334,11 +337,7 @@ watch(
</template>
</q-input>
<div
class="row col-12 col-md-3 justify-end"
:class="{ 'q-pt-xs': $q.screen.lt.md }"
style="white-space: nowrap"
>
<div class="row col-md-5 justify-end" style="white-space: nowrap">
<!-- <q-select
v-model="statusFilter"
outlined
@ -361,7 +360,7 @@ watch(
v-if="!pageState.gridView"
id="select-field"
for="select-field"
class="col"
class="col-md-5 q-ml-sm"
:options="
fieldSelectedOption.map((v) => ({
...v,

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

@ -1,8 +1,9 @@
<script setup lang="ts">
// NOTE: Library
import { computed, onMounted, reactive, watch } from 'vue';
import { computed, onMounted, reactive, ref, watch } from 'vue';
import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n';
import { QSelect, useQuasar } from 'quasar';
// NOTE: Components
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 { dialogWarningClose } from 'src/stores/utils';
const $q = useQuasar();
const navigatorStore = useNavigator();
const flowStore = useFlowStore();
const requestListStore = useRequestList();
const { t } = useI18n();
const { data, stats, page, pageMax, pageSize } = storeToRefs(requestListStore);
const refFilter = ref<InstanceType<typeof QSelect>>();
// NOTE: Variable
const pageState = reactive({
hideStat: false,
@ -89,6 +93,7 @@ function triggerView(opts: { requestData: RequestData }) {
}
onMounted(async () => {
pageState.gridView = $q.screen.lt.md ? true : false;
navigatorStore.current.title = 'requestList.title';
navigatorStore.current.path = [{ text: 'requestList.caption', i18n: true }];
@ -185,7 +190,7 @@ watch([() => pageState.inputSearch, () => pageState.statusFilter], () =>
outlined
dense
: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'"
v-model="pageState.inputSearch"
debounce="200"
@ -193,14 +198,26 @@ watch([() => pageState.inputSearch, () => pageState.statusFilter], () =>
<template #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="refFilter?.showPopup"
/>
</span>
</template>
</q-input>
<div
class="row col-12 col-md-5 justify-end"
:class="{ 'q-pt-xs': $q.screen.lt.md }"
style="white-space: nowrap"
>
<div class="row col-md-5" style="white-space: nowrap">
<q-select
v-show="$q.screen.gt.sm"
ref="refFilter"
v-model="pageState.statusFilter"
outlined
dense

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

@ -2,6 +2,7 @@
// NOTE: Library
import { computed, onMounted, reactive, watch, ref } from 'vue';
import { storeToRefs } from 'pinia';
import { useQuasar } from 'quasar';
import { useI18n } from 'vue-i18n';
// NOTE: Components
@ -21,14 +22,13 @@ import {
} from 'src/stores/task-order/types';
import { useNavigator } from 'src/stores/navigator';
import { useTaskOrderStore } from 'src/stores/task-order';
import { useTaskOrderForm } from './form';
import useFlowStore from 'src/stores/flow';
import { pageTabs, column, pageTabsReceive } from './constants';
import { dialogWarningClose, isRoleInclude } from 'src/stores/utils';
import { PaginationResult } from 'src/types';
const { t } = useI18n();
const taskOrderFormStore = useTaskOrderForm();
const $q = useQuasar();
const navigatorStore = useNavigator();
const flowStore = useFlowStore();
const taskOrderStore = useTaskOrderStore();
@ -138,6 +138,7 @@ async function deleteTaskOrder(id: string) {
}
onMounted(async () => {
pageState.gridView = $q.screen.lt.md ? true : false;
navigatorStore.current.title = 'taskOrder.title';
navigatorStore.current.path = [{ text: 'taskOrder.caption', i18n: true }];
fetchTaskOrderList();
@ -284,7 +285,7 @@ watch(
outlined
dense
: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'"
v-model="pageState.inputSearch"
debounce="200"
@ -294,11 +295,7 @@ watch(
</template>
</q-input>
<div
class="row col-12 col-md-3 justify-end"
:class="{ 'q-pt-xs': $q.screen.lt.md }"
style="white-space: nowrap"
>
<div class="row col-md-5 justify-end" style="white-space: nowrap">
<!-- <q-select
v-model="pageState.statusFilter"
outlined
@ -334,7 +331,7 @@ watch(
v-if="!pageState.gridView"
id="select-field"
for="select-field"
class="col"
class="col-md-5 q-ml-sm"
:options="
fieldSelectedOption.map((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 "
>
<template #header>
<q-avatar class="q-mr-md" size="md">
<q-img
class="text-center"
:ratio="1"
:src="`${baseUrl}/product/${product.id}/image/${product.selectedImage}`"
<section class="row items-center full-width">
<div class="flex items-center col-sm col-12 no-wrap">
<q-avatar class="q-mr-md" size="md">
<q-img
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
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)`"
name="mdi-account-group-outline"
size="xs"
class="q-pr-sm"
/>
</template>
</q-img>
</q-avatar>
<span>
{{ product.name }}
<div class="app-text-muted text-caption">
{{ product.code }}
</div>
</span>
<span class="q-ml-auto row items-center q-gutter-x-sm">
<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>
{{
taskStatusCount(
taskStatus,
product.id,
v.responsibleUser.id,
)
}}
</div>
</span>
</section>
</template>
<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"
>
<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))"
>
{{ $t('taskOrder.allProduct') }}
<span class="q-ml-auto">{{ fullTaskOrder.taskList.length }}</span>
<span
class="col-sm col-12"
:class="{ 'text-right': $q.screen.lt.sm }"
>
{{ $t('taskOrder.allProduct') }}
</span>
{{ fullTaskOrder.taskList.length }}
</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))"
>
{{ $t('taskOrder.alreadySentTask') }}
<span class="q-ml-auto">
{{
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
class="col-sm col-12"
:class="{ 'text-right': $q.screen.lt.sm }"
>
{{ $t('taskOrder.alreadySentTask') }}
</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
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))"
>
{{ $t('taskOrder.status.Pending') }}
<span class="q-ml-auto">
{{
fullTaskOrder.taskList.filter(
(t) => t.taskStatus === TaskStatus.InProgress,
).length
}}
<span
class="col-sm col-12"
:class="{ 'text-right': $q.screen.lt.sm }"
>
{{ $t('taskOrder.status.Pending') }}
</span>
{{
fullTaskOrder.taskList.filter(
(t) => t.taskStatus === TaskStatus.InProgress,
).length
}}
</span>
</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"
>
<template #header>
<q-avatar class="q-mr-md" size="md">
<q-img
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 }}
<section class="row items-center full-width">
<div class="flex items-center col-sm col-12 no-wrap">
<q-avatar class="q-mr-md" size="md">
<q-img
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>
<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>
</span>
</section>
</template>
<div>

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

@ -1,7 +1,8 @@
<script lang="ts" setup>
// NOTE: Library
import { computed, onMounted, reactive, watch } from 'vue';
import { computed, onMounted, reactive, ref, watch } from 'vue';
import { storeToRefs } from 'pinia';
import { QSelect, useQuasar } from 'quasar';
// NOTE: Components
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 { Quotation } from 'src/stores/quotations';
const $q = useQuasar();
const navigatorStore = useNavigator();
const flowStore = useFlowStore();
const invoiceStore = useInvoice();
const { data, stats, page, pageMax, pageSize } = storeToRefs(invoiceStore);
const refFilter = ref<InstanceType<typeof QSelect>>();
// NOTE: Variable
const pageState = reactive({
@ -74,7 +77,7 @@ async function fetchStats() {
}
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(
'new-quotation',
@ -105,6 +108,8 @@ function viewDocExample(quotationId: string) {
}
onMounted(async () => {
pageState.gridView = $q.screen.lt.md ? true : false;
navigatorStore.current.title = 'invoice.title';
navigatorStore.current.path = [{ text: 'invoice.caption', i18n: true }];
@ -189,7 +194,7 @@ watch(
outlined
dense
: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'"
v-model="pageState.inputSearch"
debounce="200"
@ -197,14 +202,26 @@ watch(
<template #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="refFilter?.showPopup"
/>
</span>
</template>
</q-input>
<div
class="row col-12 col-md-5 justify-end"
:class="{ 'q-pt-xs': $q.screen.lt.md }"
style="white-space: nowrap"
>
<div class="row col-md-5" style="white-space: nowrap">
<q-select
v-show="$q.screen.gt.sm"
ref="refFilter"
v-model="pageState.statusFilter"
outlined
dense

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

@ -3,6 +3,7 @@
import { computed, onMounted, reactive, watch } from 'vue';
import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n';
import { useQuasar } from 'quasar';
// NOTE: Components
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 { dialogWarningClose } from 'src/stores/utils';
const $q = useQuasar();
const { t } = useI18n();
const flow = useFlowStore();
const navigator = useNavigator();
@ -115,6 +117,7 @@ function close() {
}
onMounted(async () => {
pageState.gridView = $q.screen.lt.md ? true : false;
navigator.current.title = 'creditNote.title';
navigator.current.path = [{ text: 'creditNote.caption', i18n: true }];
@ -209,7 +212,7 @@ watch(
outlined
dense
: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'"
v-model="pageState.inputSearch"
debounce="200"
@ -219,16 +222,12 @@ watch(
</template>
</q-input>
<div
class="row col-12 col-md-3 justify-end"
:class="{ 'q-pt-xs': $q.screen.lt.md }"
style="white-space: nowrap"
>
<div class="row col-md-5 justify-end" style="white-space: nowrap">
<q-select
v-if="!pageState.gridView"
id="select-field"
for="select-field"
class="col"
class="col q-ml-sm"
:options="
fieldSelectedOption.map((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"
>
<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))"
>
{{ $t('creditNote.label.totalAmount') }}
<span class="q-ml-auto">
{{ formatNumberDecimal(total) }}
<span
class="col-sm col-12"
:class="{ 'text-right': $q.screen.lt.sm }"
>
{{ $t('creditNote.label.totalAmount') }}
</span>
{{ formatNumberDecimal(total) }}
</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))"
>
{{ $t('creditNote.label.paid') }}
<span class="q-ml-auto">
{{ formatNumberDecimal(paid) }}
<span
class="col-sm col-12"
:class="{ 'text-right': $q.screen.lt.sm }"
>
{{ $t('creditNote.label.paid') }}
</span>
{{ formatNumberDecimal(paid) }}
</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))"
>
{{ $t('creditNote.label.remain') }}
<span class="q-ml-auto">
{{ formatNumberDecimal(remain) }}
<span
class="col-sm col-12"
:class="{ 'text-right': $q.screen.lt.sm }"
>
{{ $t('creditNote.label.remain') }}
</span>
{{ formatNumberDecimal(remain) }}
</span>
</article>
</article>

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

@ -1,6 +1,6 @@
<script lang="ts" setup>
// NOTE: Library
import { computed, onMounted, reactive, watch } from 'vue';
import { computed, onMounted, reactive, ref, watch } from 'vue';
import { storeToRefs } from 'pinia';
// NOTE: Components
@ -19,14 +19,17 @@ import { useRequestList } from 'src/stores/request-list';
import { usePayment, useReceipt } from 'src/stores/payment';
import { Receipt, PaymentDataStatus } from 'src/stores/payment/types';
import { Quotation } from 'src/stores/quotations';
import { useQuasar } from 'quasar';
import { QSelect, useQuasar } from 'quasar';
const $q = useQuasar();
const navigatorStore = useNavigator();
const flowStore = useFlowStore();
const receiptStore = useReceipt();
const { data, page, pageMax, pageSize } = storeToRefs(receiptStore);
// NOTE: Variable
const refFilter = ref<InstanceType<typeof QSelect>>();
const pageState = reactive({
hideStat: false,
statusFilter: 'None' as 'None' | PaymentDataStatus,
@ -59,7 +62,7 @@ async function fetchList(opts?: { rotateFlowId?: boolean }) {
}
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(
'new-quotation',
@ -82,6 +85,8 @@ async function viewDocExample(id: string) {
}
onMounted(async () => {
pageState.gridView = $q.screen.lt.md ? true : false;
navigatorStore.current.title = 'receipt.title';
navigatorStore.current.path = [{ text: 'receipt.caption', i18n: true }];
@ -159,7 +164,7 @@ watch(
outlined
dense
: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'"
v-model="pageState.inputSearch"
debounce="200"
@ -167,14 +172,26 @@ watch(
<template #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="refFilter?.showPopup"
/>
</span>
</template>
</q-input>
<div
class="row col-12 col-md-5 justify-end"
:class="{ 'q-pt-xs': $q.screen.lt.md }"
style="white-space: nowrap"
>
<div class="row col-md-5" style="white-space: nowrap">
<q-select
v-show="$q.screen.gt.sm"
ref="refFilter"
v-model="pageState.statusFilter"
outlined
dense