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

feat: add dynamic color to quotation form info

Browse source
This commit is contained in:
Methapon Metanipat 2024-10-28 14:53:31 +07:00
parent 1bf55551bc
commit a498c24e1e
2 changed files with 27 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1108,6 +1108,7 @@ const view = ref<View>(View.Quotation);
<SwitchItem :value="view"> <SwitchItem :value="view">
<template #[View.Quotation]> <template #[View.Quotation]>
<QuotationFormInfo <QuotationFormInfo
:type="view"
v-model:pay-type="quotationFormData.payCondition" v-model:pay-type="quotationFormData.payCondition"
v-model:pay-bank="payBank" v-model:pay-bank="payBank"
v-model:pay-split-count="quotationFormData.paySplitCount" v-model:pay-split-count="quotationFormData.paySplitCount"

40
src/pages/05_quotation/QuotationFormInfo.vue
View file

@ -13,9 +13,22 @@ import SelectInput from 'src/components/shared/SelectInput.vue';
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
import { precisionRound } from 'src/utils/arithmetic'; import { precisionRound } from 'src/utils/arithmetic';
enum View {
Quotation,
Accepted,
InvoicePre,
Invoice,
PaymentPre,
Payment,
ReceiptPre,
Receipt,
Complete,
}
defineProps<{ defineProps<{
readonly?: boolean; readonly?: boolean;
quotationNo?: string; quotationNo?: string;
view?: View;
data?: { data?: {
total: number; total: number;
discount: number; discount: number;
@ -209,12 +222,10 @@ watch(
</script> </script>
<template> <template>
<AppBox no-padding bordered class="row"> <AppBox no-padding bordered class="row main-color">
<div class="col bordered-r"> <div class="col bordered-r">
<div <div class="bordered-b q-px-md q-py-sm row bg-color-light items-center">
class="bordered-b q-px-md q-py-sm row bg-color-orange-light items-center" <div class="icon-wrapper bg-color q-mr-sm">
>
<div class="icon-wrapper bg-color-orange q-mr-sm">
<q-icon name="mdi-bank-outline" /> <q-icon name="mdi-bank-outline" />
</div> </div>
<span class="text-weight-bold"> <span class="text-weight-bold">
@ -342,10 +353,8 @@ watch(
</div> </div>
</div> </div>
<div class="col"> <div class="col">
<div <div class="bordered-b q-px-md q-py-sm row bg-color-light items-center">
class="bordered-b q-px-md q-py-sm row bg-color-orange-light items-center" <div class="icon-wrapper bg-color q-mr-sm">
>
<div class="icon-wrapper bg-color-orange q-mr-sm">
<Icon icon="iconoir:coins" /> <Icon icon="iconoir:coins" />
</div> </div>
<span class="text-weight-bold"> <span class="text-weight-bold">
@ -467,21 +476,24 @@ watch(
height: 25px; height: 25px;
} }
.bg-color-orange { .main-color {
--_color: var(--yellow-7-hsl); --_color: var(--yellow-7-hsl);
}
.bg-color {
color: white; color: white;
background: hsla(var(--_color)); background: hsla(var(--_color));
} }
.dark .bg-color-orange { .dark .bg-color {
--_color: var(--orange-6-hsl); --_color: var(--orange-6-hsl);
} }
.bg-color-orange-light { .bg-color-light {
--_color: var(--yellow-7-hsl);
background: hsla(var(--_color) / 0.1); background: hsla(var(--_color) / 0.1);
} }
.dark .bg-color-orange {
.dark .bg-color-light {
--_color: var(--orange-6-hsl / 0.2); --_color: var(--orange-6-hsl / 0.2);
} }