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

refactor: 11, 12 => improve layout and styling for Credit and Debit Note pages

Browse source
This commit is contained in:
puriphatt 2025-01-28 13:53:01 +07:00
parent f9df3e7aef
commit 3331afaaa3
2 changed files with 12 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -227,7 +227,7 @@ watch(
v-if="!pageState.gridView" v-if="!pageState.gridView"
id="select-field" id="select-field"
for="select-field" for="select-field"
class="col q-ml-sm" class="col-md-5 q-ml-sm"
:options=" :options="
fieldSelectedOption.map((v) => ({ fieldSelectedOption.map((v) => ({
...v, ...v,

25
src/pages/12_debit-note/MainPage.vue
View file

@ -22,14 +22,14 @@ import { useNavigator } from 'src/stores/navigator';
import useFlowStore from 'src/stores/flow'; import useFlowStore from 'src/stores/flow';
import { pageTabs, columns, hslaColors } from './constants'; import { pageTabs, columns, hslaColors } from './constants';
import { DebitNoteStatus, useDebitNote } from 'src/stores/debit-note'; import { DebitNoteStatus, useDebitNote } from 'src/stores/debit-note';
import { ref } from 'vue';
import { dialogWarningClose } from 'src/stores/utils'; import { dialogWarningClose } from 'src/stores/utils';
import { useQuasar } from 'quasar';
const $q = useQuasar();
const { t } = useI18n(); const { t } = useI18n();
const flow = useFlowStore(); const flow = useFlowStore();
const navigator = useNavigator(); const navigator = useNavigator();
const debitNote = useDebitNote(); const debitNote = useDebitNote();
const selectedQuotationId = ref<string>('');
const { stats, pageMax, page, data, pageSize } = storeToRefs(debitNote); const { stats, pageMax, page, data, pageSize } = storeToRefs(debitNote);
// NOTE: Variable // NOTE: Variable
@ -121,6 +121,7 @@ function close() {
} }
onMounted(async () => { onMounted(async () => {
pageState.gridView = $q.screen.lt.md ? true : false;
navigator.current.title = 'debitNote.title'; navigator.current.title = 'debitNote.title';
navigator.current.path = [{ text: 'debitNote.caption', i18n: true }]; navigator.current.path = [{ text: 'debitNote.caption', i18n: true }];
@ -182,32 +183,32 @@ watch(
:branch="[ :branch="[
{ {
icon: 'material-symbols-light:receipt-long', icon: 'material-symbols-light:receipt-long',
count: stats[DebitNoteStatus.Pending], count: stats[DebitNoteStatus.Pending] || 0,
label: `debitNote.stats.${DebitNoteStatus.Pending}`, label: `debitNote.stats.${DebitNoteStatus.Pending}`,
color: 'orange', color: 'orange',
}, },
{ {
icon: 'mdi-clock-alert-outline', icon: 'mdi-clock-alert-outline',
count: stats[DebitNoteStatus.Expire], count: stats[DebitNoteStatus.Expire] || 0,
label: `debitNote.stats.${DebitNoteStatus.Expire}`, label: `debitNote.stats.${DebitNoteStatus.Expire}`,
color: 'cyan', color: 'cyan',
}, },
{ {
icon: 'tabler:cash-register', icon: 'tabler:cash-register',
count: stats[DebitNoteStatus.Payment], count: stats[DebitNoteStatus.Payment] || 0,
label: `debitNote.stats.${DebitNoteStatus.Payment}`, label: `debitNote.stats.${DebitNoteStatus.Payment}`,
color: 'dark-orange', color: 'dark-orange',
}, },
{ {
icon: 'fluent:receipt-money-16-regular', icon: 'fluent:receipt-money-16-regular',
count: stats[DebitNoteStatus.Receipt], count: stats[DebitNoteStatus.Receipt] || 0,
label: `debitNote.stats.${DebitNoteStatus.Receipt}`, label: `debitNote.stats.${DebitNoteStatus.Receipt}`,
color: 'green', color: 'green',
}, },
{ {
icon: 'mdi-check-decagram-outline', icon: 'mdi-check-decagram-outline',
count: stats[DebitNoteStatus.Succeed], count: stats[DebitNoteStatus.Succeed] || 0,
label: `debitNote.stats.${DebitNoteStatus.Succeed}`, label: `debitNote.stats.${DebitNoteStatus.Succeed}`,
color: 'blue', color: 'blue',
}, },
@ -233,7 +234,7 @@ watch(
outlined outlined
dense dense
:label="$t('general.search')" :label="$t('general.search')"
class="q-mr-md col-12 col-md-3" class="col col-md-3"
:bg-color="$q.dark.isActive ? 'dark' : 'white'" :bg-color="$q.dark.isActive ? 'dark' : 'white'"
v-model="pageState.inputSearch" v-model="pageState.inputSearch"
debounce="200" debounce="200"
@ -243,16 +244,12 @@ watch(
</template> </template>
</q-input> </q-input>
<div <div class="row col-md-5 justify-end" style="white-space: nowrap">
class="row col-12 col-md-3 justify-end"
:class="{ 'q-pt-xs': $q.screen.lt.md }"
style="white-space: nowrap"
>
<q-select <q-select
v-if="!pageState.gridView" v-if="!pageState.gridView"
id="select-field" id="select-field"
for="select-field" for="select-field"
class="col" class="col-md-5 q-ml-sm"
:options=" :options="
fieldSelectedOption.map((v) => ({ fieldSelectedOption.map((v) => ({
...v, ...v,