mirror of
https://github.com/beak-insights/felicity-lims.git
synced 2025-02-23 08:23:00 +08:00
89 lines
3.4 KiB
Vue
89 lines
3.4 KiB
Vue
<script setup lang="ts">
|
|
import { storeToRefs } from "pinia";
|
|
import { defineAsyncComponent, onMounted, watch } from "vue";
|
|
import { useDashBoardStore } from "@/stores";
|
|
const LoadingMessage = defineAsyncComponent(
|
|
() => import("@/components/ui/spinners/FelLoadingMessage.vue")
|
|
)
|
|
|
|
const dashBoardStore = useDashBoardStore();
|
|
const { dashboard } = storeToRefs(dashBoardStore);
|
|
|
|
onMounted(async () => {
|
|
dashBoardStore.getOverViewStats();
|
|
});
|
|
|
|
watch(
|
|
() => dashboard.value.filterRange,
|
|
(filter, prev) => {
|
|
dashBoardStore.getOverViewStats();
|
|
},
|
|
{ deep: true }
|
|
);
|
|
</script>
|
|
|
|
<template>
|
|
|
|
<div v-if="dashboard.fetchingOverViewStats" class="text-start my-4 w-100">
|
|
<LoadingMessage message="fetching updated overview stats ..." />
|
|
</div>
|
|
<section>
|
|
|
|
<h1 class="text-xl text-gray-700 font-semibold">Analyses Status</h1>
|
|
<hr class="my-2" />
|
|
|
|
<div class="flex justify-start">
|
|
<div
|
|
v-for="analyte in dashboard.overViewStats?.analyses"
|
|
:key="analyte.group"
|
|
class="flex items-center bg-white shadow rounded-sm px-6 pt-3 pb-5 border border-white mr-8"
|
|
>
|
|
<span class="mr-4 font-bold text-gray-600 text-xl">{{ analyte.count }}</span>
|
|
<span class="font-semibold text-gray-400 text-l">{{ analyte.group }}</span>
|
|
</div>
|
|
</div>
|
|
<p v-if="!dashboard.overViewStats?.analyses?.length" class="my-4">I did not find any analyses indicators to show</p>
|
|
|
|
<h1 class="mt-4 text-xl text-gray-700 font-semibold">Sample Status</h1>
|
|
<hr class="my-2" />
|
|
<div class="flex justify-start">
|
|
<div
|
|
v-for="sample in dashboard.overViewStats?.samples"
|
|
:key="sample.group"
|
|
class="flex items-center bg-white shadow rounded-sm px-6 pt-3 pb-5 border border-white mr-8"
|
|
>
|
|
<span class="mr-4 font-bold text-gray-600 text-xl">{{ sample.count }}</span>
|
|
<span class="font-semibold text-gray-400 text-l">{{ sample.group }}</span>
|
|
</div>
|
|
</div>
|
|
<p v-if="!dashboard.overViewStats?.samples?.length" class="my-4">I did not find any sample indicators to show</p>
|
|
|
|
<h1 class="mt-4 text-xl text-gray-700 font-semibold">WorkSheet Status</h1>
|
|
<hr class="my-2" />
|
|
<div class="flex justify-start">
|
|
<div
|
|
v-for="worksheet in dashboard.overViewStats?.worksheets"
|
|
:key="worksheet.group"
|
|
class="flex items-center bg-white shadow rounded-sm px-6 pt-3 pb-5 border border-white mr-8"
|
|
>
|
|
<span class="mr-4 font-bold text-gray-600 text-xl">{{ worksheet.count }}</span>
|
|
<span class="font-semibold text-gray-400 text-l">{{ worksheet.group }}</span>
|
|
</div>
|
|
</div>
|
|
<p v-if="!dashboard.overViewStats?.worksheets?.length" class="my-4">I did not find any worksheet indicators to show</p>
|
|
|
|
<h1 class="mt-4 text-xl text-gray-700 font-semibold">Extras</h1>
|
|
<hr class="my-2" />
|
|
<div class="flex justify-start">
|
|
<div
|
|
v-for="extra in dashboard.overViewStats?.extras"
|
|
:key="extra.group"
|
|
class="flex items-center bg-white shadow rounded-sm px-6 pt-3 pb-5 border border-white mr-8"
|
|
>
|
|
<span class="mr-4 font-bold text-gray-600 text-xl">{{ extra.count }}</span>
|
|
<span class="font-semibold text-gray-400 text-l">{{ extra.group }}</span>
|
|
</div>
|
|
<p v-if="!dashboard.overViewStats?.extras?.length" class="my-4">I did not find any extra indicators to show</p>
|
|
</div>
|
|
</section>
|
|
</template>
|