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

feat: add active effect for quotation status box (#44)

Browse source
This commit is contained in:
Methapon Metanipat 2024-11-01 09:56:32 +07:00 • committed by GitHub
parent 0dc15e34bb
commit 9a7fa89f93
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 46 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -270,16 +270,20 @@ async function fetchStatus() {
{
title: 'ใบเสนอราคา',
status: getStatus(quotationFormData.value.quotationStatus, -1, -1),
active: () => view.value === View.Quotation,
handler: () => (view.value = View.Quotation),
},
{
title: 'ลูกค้าตอบรับ',
status: getStatus(quotationFormData.value.quotationStatus, 0, -1),
active: () => view.value === View.Accepted,
handler: () => (view.value = View.Accepted),
},
{
title: 'ใบแจ้งหนี้',
status: getStatus(quotationFormData.value.quotationStatus, 4, 0),
active: () =>
view.value === View.Invoice || view.value === View.InvoicePre,
handler: () => {
view.value =
quotationFormData.value.payCondition === 'Full' ||
@ -291,6 +295,8 @@ async function fetchStatus() {
{
title: 'ชำระเงิน',
status: getStatus(quotationFormData.value.quotationStatus, 4, 1),
active: () =>
view.value === View.Payment || view.value === View.PaymentPre,
handler: () => {
view.value =
quotationFormData.value.payCondition === 'Full' ||
@ -302,6 +308,7 @@ async function fetchStatus() {
{
title: 'ใบเสร็จรับเงิน',
status: getStatus(quotationFormData.value.quotationStatus, 4, 1),
active: () => view.value === View.Receipt,
handler: () => {
fetchReceipt();
view.value = View.Receipt;
@ -310,6 +317,7 @@ async function fetchStatus() {
{
title: 'เสร็จสิ้น',
status: getStatus(quotationFormData.value.quotationStatus, 5, 4),
active: () => view.value === View.Complete,
handler: () => {
view.value = View.Complete;
},
@ -889,7 +897,12 @@ function getStatus(
}
const statusQuotationForm = ref<
{ title: string; status: 'done' | 'doing' | 'waiting'; handler: () => void }[]
{
title: string;
status: 'done' | 'doing' | 'waiting';
handler: () => void;
active?: () => boolean;
}[]
>([]);
enum View {
@ -1001,16 +1014,22 @@ const view = ref<View>(View.Quotation);
<button
v-for="value in statusQuotationForm"
:key="value.title"
class="q-pa-sm bordered status-color"
:class="`status-color-${value.status}`"
class="q-pa-sm bordered status-color row items-center"
:class="{
[`status-color-${value.status}`]: true,
'quotation-status-active': value.active?.(),
}"
@click="value.status !== 'waiting' && value.handler()"
style="min-width: 120px; cursor: pointer"
>
<q-icon
class="icon-color"
:name="`${value.status === 'done' ? 'mdi-check-circle' : 'mdi-checkbox-blank-circle-outline'}`"
/>
{{ value.title }}
<div class="q-px-sm">
<q-icon
class="icon-color quotation-status"
style="border-radius: 50%"
:name="`${value.status === 'done' ? 'mdi-check-circle' : 'mdi-checkbox-blank-circle-outline'}`"
/>
</div>
<div class="col text-left">{{ value.title }}</div>
</button>
</div>
<template
@ -2192,4 +2211,23 @@ const view = ref<View>(View.Quotation);
color: hsla(var(--_color));
}
}
.quotation-status-active {
opacity: 1;
font-weight: 600;
transition: 1s box-shadow ease-in-out;
animation: status 1s infinite;
}
@keyframes status {
0% {
box-shadow: 0x 0px 0px hsla(var(--_color) / 0.5);
}
50% {
box-shadow: 0px 0px 1px 4px hsla(var(--_color) / 0.2);
}
100% {
box-shadow: 0px 0px 4px 7px hsla(var(--_color) / 0);
}
}
</style>