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

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>