55 lines
1.4 KiB
Vue
55 lines
1.4 KiB
Vue
<script setup>
|
|
import { useInvoices } from "~/components/orders/composables/useInvoices";
|
|
|
|
const props = defineProps({
|
|
id: Number,
|
|
code: String,
|
|
name: String,
|
|
en: String,
|
|
color: String,
|
|
index: Number,
|
|
});
|
|
|
|
const { invoices, invoicesByStatus } = useInvoices();
|
|
|
|
const invoiceMatchCount = computed(() => {
|
|
if (!props.code) return 0;
|
|
if (!invoicesByStatus.value[props.code]) return 0;
|
|
return invoicesByStatus.value[props.code].length;
|
|
});
|
|
const progressVal = computed(() => (invoiceMatchCount.value * 100) / (invoices.value.length || 1));
|
|
const progressUnfilled = computed(() => `var(--bulma-${props.color}-85)`);
|
|
</script>
|
|
<template>
|
|
<div class="is-flex-grow-1">
|
|
<div class="is-flex is-justify-content-space-between">
|
|
<p :class="`has-text-${color}-40`">{{ name }}</p>
|
|
<p :class="['fs-18 font-bold', `has-text-${color}-30`]">{{ invoiceMatchCount }}</p>
|
|
</div>
|
|
<progress
|
|
:class="['progress is-small mt-2', `is-${color}`]"
|
|
:value="progressVal"
|
|
max="100"
|
|
></progress>
|
|
</div>
|
|
<div
|
|
v-if="index < 3"
|
|
class="is-flex is-justify-content-center is-align-items-center"
|
|
style="width: 60px; height: 48px"
|
|
>
|
|
<Icon
|
|
name="material-symbols:arrow-forward-rounded"
|
|
:size="24"
|
|
class="has-text-grey-70"
|
|
/>
|
|
</div>
|
|
</template>
|
|
<style lang="scss" scoped>
|
|
$progress-value-background-color: "red";
|
|
|
|
.progress {
|
|
--bulma-size-small: 0.5rem;
|
|
background-color: v-bind(progressUnfilled);
|
|
}
|
|
</style>
|