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

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>