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"
>