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

feat: receive => add task order status display with gradient styling

Browse source
This commit is contained in:
puriphatt 2024-12-27 10:44:15 +07:00
parent 1458a32403
commit 35285f81b9
1 changed files with 53 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

53
src/pages/09_task-order/order_view/MainPage.vue
View file

@ -736,6 +736,41 @@ watch([currentFormData.value.taskStatus], () => {
/>
</nav>
<article
v-if="view === TaskOrderStatus.Complete"
class="row items-center surface-1 q-py-md rounded gradient-stat"
>
<span
class="row col rounded q-px-sm q-py-md q-mx-md positive"
style="border: 1px solid hsl(var(--positive-bg))"
>
{{ $t('taskOrder.status.Complete') }}
<span class="q-ml-auto">
{{
fullTaskOrder?.taskList.filter(
(t) => t.taskStatus === TaskStatus.Complete,
).length
}}
</span>
</span>
<span
class="row col rounded q-px-sm q-mr-md q-py-md negative"
style="border: 1px solid hsl(var(--negative-bg))"
>
{{ $t('taskOrder.status.Failed') }}
<span class="q-ml-auto">
{{
fullTaskOrder?.taskList.filter(
(t) =>
t.taskStatus === TaskStatus.Redo ||
t.taskStatus === TaskStatus.Failed ||
t.taskStatus === TaskStatus.Canceled,
).length
}}
</span>
</span>
</article>
<q-form
ref="formDocument"
@submit="
@ -1147,4 +1182,22 @@ watch([currentFormData.value.taskStatus], () => {
filter: invert(100%);
}
}
.gradient-stat {
& .positive {
background-image: linear-gradient(
to right,
hsl(var(--positive-bg) / 0.15),
var(--surface-1)
);
}
& .negative {
background-image: linear-gradient(
to right,
hsl(var(--negative-bg) / 0.15),
var(--surface-1)
);
}
}
</style>