tethys.backend/resources/js/Pages/Dashboard.vue
Arno Kaimbacher 89d91d5e12
Some checks failed
CI Pipeline / japa-tests (pull_request) Has been cancelled
hotfix: improve mimetype creation and dashboard data loading
- Added a NotificationBar component to display flash messages on the Mimetype creation page.
- Modified FormCheckRadioGroup to handle both numeric and string keys for input values.
- Removed unused code and API calls from Dashboard.vue and moved API calls to the component level where they are used.
- Added authentication middleware to the 'clients' and 'authors' API routes in `start/routes/api.ts`.
- Updated the file download route in `start/routes/api.ts` to include "file" in the path.
- Corrected the validation message key for file extension minLength in MimetypeController.ts.
- Updated favicon path in `resources/views/app.edge`.
- Added argon2 dependency in `package.json`.
2025-07-03 10:17:19 +02:00

145 lines
5.6 KiB
Vue

<script setup lang="ts">
import { Head, usePage } from '@inertiajs/vue3';
import { computed } from 'vue';
import { MainService } from '@/Stores/main';
import {
mdiAccountMultiple,
mdiDatabaseOutline,
mdiChartTimelineVariant,
mdiFinance,
mdiMonitorCellphone,
mdiReload,
mdiChartPie,
} from '@mdi/js';
import LineChart from '@/Components/Charts/LineChart.vue';
import SectionMain from '@/Components/SectionMain.vue';
import CardBoxWidget from '@/Components/CardBoxWidget.vue';
import CardBox from '@/Components/CardBox.vue';
import TableSampleClients from '@/Components/TableSampleClients.vue';
import LayoutAuthenticated from '@/Layouts/LayoutAuthenticated.vue';
import SectionTitleLineWithButton from '@/Components/SectionTitleLineWithButton.vue';
// import SectionBannerStarOnGitHub from '@/Components/SectionBannerStarOnGitea.vue';
import CardBoxDataset from '@/Components/CardBoxDataset.vue';
import type { User } from '@/Dataset';
const mainService = MainService()
// const chartData = ref();
const fillChartData = async () => {
await mainService.fetchChartData();
// chartData.value = chartConfig.sampleChartData();
// chartData.value = mainService.graphData;
};
const chartData = computed(() => mainService.graphData);
// onMounted(async () => {
// await mainService.fetchChartData("2022");
// });
// mainService.fetch('clients');
// mainService.fetch('history');
// mainService.fetchApi('authors');
// mainService.fetchApi('datasets');
// const clientBarItems = computed(() => mainService.clients.slice(0, 4));
// const transactionBarItems = computed(() => mainService.history);
mainService.fetchApi('clients');
mainService.fetchApi('authors');
mainService.fetchApi('datasets');
mainService.fetchChartData();
// const authorBarItems = computed(() => mainService.authors.slice(0, 5));
const authors = computed(() => mainService.authors);
const datasets = computed(() => mainService.datasets);
const datasetBarItems = computed(() => mainService.datasets.slice(0, 5));
const submitters = computed(() => mainService.clients);
const user = computed(() => {
return usePage().props.authUser as User;
});
const userHasRoles = (roleNames: Array<string>): boolean => {
return user.value.roles.some(role => roleNames.includes(role.name));
};
</script>
<template>
<LayoutAuthenticated :showAsideMenu="false">
<Head title="Dashboard" />
<SectionMain>
<SectionTitleLineWithButton v-bind:icon="mdiChartTimelineVariant" title="Overview" main>
<!-- <BaseButton
href=""
target="_blank"
:icon="mdiGithub"
label="Star on GeoSphere Forgejo"
color="contrast"
rounded-full
small
/> -->
</SectionTitleLineWithButton>
<div class="grid grid-cols-1 gap-6 lg:grid-cols-3 mb-6">
<CardBoxWidget
trend="12%"
trend-type="up"
color="text-emerald-500"
:icon="mdiAccountMultiple"
:number="authors.length"
label="Authors"
/>
<CardBoxWidget
trend-type="info"
color="text-blue-500"
:icon="mdiDatabaseOutline"
:number="datasets.length"
label="Publications"
/>
<CardBoxWidget
trend-type="up"
color="text-purple-500"
:icon="mdiChartTimelineVariant"
:number="submitters.length"
label="Submitters"
/>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
<!-- <div class="flex flex-col justify-between">
<CardBoxClient
v-for="client in authorBarItems"
:key="client.id"
:name="client.name"
:email="client.email"
:date="client.created_at"
:text="client.identifier_orcid"
:count="client.dataset_count"
/>
</div> -->
<div class="flex flex-col justify-between">
<CardBoxDataset
v-for="(dataset, index) in datasetBarItems"
:key="index"
:dataset="dataset"
/>
</div>
</div>
<!-- <SectionBannerStarOnGitHub /> -->
<SectionTitleLineWithButton :icon="mdiChartPie" title="Trends overview: Publications per month" ></SectionTitleLineWithButton>
<CardBox title="Performance" :icon="mdiFinance" :header-icon="mdiReload" class="mb-6" @header-icon-click="fillChartData">
<div v-if="chartData">
<line-chart :data="chartData" class="h-96" />
</div>
</CardBox>
<SectionTitleLineWithButton v-if="userHasRoles(['administrator'])" :icon="mdiAccountMultiple" title="Submitters" />
<!-- <NotificationBar color="info" :icon="mdiMonitorCellphone"> <b>Responsive table.</b> Collapses on mobile </NotificationBar> -->
<CardBox v-if="userHasRoles(['administrator'])" :icon="mdiMonitorCellphone" title="Responsive table" has-table>
<TableSampleClients />
</CardBox>
</SectionMain>
</LayoutAuthenticated>
</template>