Arno Kaimbacher
3d8f2354cb
Some checks failed
build.yaml / feat: Enhance Dataset Edit Page with Unsaved Changes Indicator and Improved Structure (push) Failing after 0s
- Added a progress indicator for unsaved changes at the top of the dataset edit page. - Enhanced the title section with a dataset status badge and improved layout. - Introduced collapsible sections for better organization of form fields. - Improved notifications for success/error messages. - Refactored form fields into distinct sections: Basic Information, Licenses, Titles, Descriptions, Creators & Contributors, Additional Metadata, Geographic Coverage, and Files. - Enhanced loading spinner with a more visually appealing overlay. - Added new project validation logic in the backend with create and update validators.
175 lines
6.9 KiB
Vue
175 lines
6.9 KiB
Vue
<script setup lang="ts">
|
|
import { Head, usePage } from '@inertiajs/vue3';
|
|
import { computed, ref } from 'vue';
|
|
import { MainService } from '@/Stores/main';
|
|
import {
|
|
mdiAccountMultiple,
|
|
mdiDatabaseOutline,
|
|
mdiChartTimelineVariant,
|
|
mdiFinance,
|
|
mdiMonitorCellphone,
|
|
mdiReload,
|
|
mdiChartPie,
|
|
mdiTrendingUp,
|
|
} 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 CardBoxDataset from '@/Components/CardBoxDataset.vue';
|
|
import type { User } from '@/Dataset';
|
|
|
|
const mainService = MainService();
|
|
|
|
const isLoadingChart = ref(false);
|
|
|
|
const fillChartData = async () => {
|
|
isLoadingChart.value = true;
|
|
try {
|
|
await mainService.fetchChartData();
|
|
} finally {
|
|
isLoadingChart.value = false;
|
|
}
|
|
};
|
|
|
|
const chartData = computed(() => mainService.graphData);
|
|
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(() => usePage().props.authUser as User);
|
|
|
|
// Initialize data
|
|
mainService.fetchApi('clients');
|
|
mainService.fetchApi('authors');
|
|
mainService.fetchApi('datasets');
|
|
mainService.fetchChartData();
|
|
|
|
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 :icon="mdiChartTimelineVariant" title="Dashboard Overview" main>
|
|
<div class="text-sm text-gray-500 dark:text-gray-400">
|
|
Welcome back, <span class="font-semibold">{{ user.login }}</span>
|
|
</div>
|
|
</SectionTitleLineWithButton>
|
|
|
|
<!-- Stats Grid -->
|
|
<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"
|
|
class="hover:shadow-lg transition-shadow duration-300"
|
|
/>
|
|
<CardBoxWidget
|
|
trend-type="info"
|
|
color="text-blue-500"
|
|
:icon="mdiDatabaseOutline"
|
|
:number="datasets.length"
|
|
label="Publications"
|
|
class="hover:shadow-lg transition-shadow duration-300"
|
|
/>
|
|
<CardBoxWidget
|
|
trend-type="up"
|
|
color="text-purple-500"
|
|
:icon="mdiChartTimelineVariant"
|
|
:number="submitters.length"
|
|
label="Submitters"
|
|
class="hover:shadow-lg transition-shadow duration-300"
|
|
/>
|
|
</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>
|
|
|
|
<!-- Recent Datasets Section -->
|
|
<div v-if="datasetBarItems.length > 0" class="mb-6">
|
|
<SectionTitleLineWithButton :icon="mdiTrendingUp" title="Recent Publications">
|
|
<span class="text-sm text-gray-500 dark:text-gray-400"> Latest {{ datasetBarItems.length }} publications </span>
|
|
</SectionTitleLineWithButton>
|
|
|
|
<div class="grid grid-cols-1 gap-4">
|
|
<CardBoxDataset
|
|
v-for="(dataset, index) in datasetBarItems"
|
|
:key="index"
|
|
:dataset="dataset"
|
|
class="hover:shadow-md transition-all duration-300"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- <SectionBannerStarOnGitHub /> -->
|
|
|
|
<!-- Chart Section -->
|
|
<SectionTitleLineWithButton :icon="mdiChartPie" title="Trends Overview" class="mt-8">
|
|
<span class="text-sm text-gray-500 dark:text-gray-400"> Publications per month </span>
|
|
</SectionTitleLineWithButton>
|
|
|
|
<CardBox
|
|
title="Performance"
|
|
:icon="mdiFinance"
|
|
:header-icon="mdiReload"
|
|
class="mb-6 shadow-lg"
|
|
@header-icon-click="fillChartData"
|
|
>
|
|
<div v-if="isLoadingChart" class="flex items-center justify-center h-96">
|
|
<div class="flex flex-col items-center gap-3">
|
|
<div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500"></div>
|
|
<p class="text-sm text-gray-500 dark:text-gray-400">Loading chart data...</p>
|
|
</div>
|
|
</div>
|
|
<div v-else-if="chartData" class="relative">
|
|
<line-chart :data="chartData" class="h-96" />
|
|
</div>
|
|
<div v-else class="flex items-center justify-center h-96 text-gray-500 dark:text-gray-400">
|
|
<p>No chart data available</p>
|
|
</div>
|
|
</CardBox>
|
|
|
|
<!-- Admin Section -->
|
|
<template v-if="userHasRoles(['administrator'])">
|
|
<SectionTitleLineWithButton :icon="mdiAccountMultiple" title="Submitters Management" class="mt-8">
|
|
<span class="text-sm text-gray-500 dark:text-gray-400"> Administrator view </span>
|
|
</SectionTitleLineWithButton>
|
|
|
|
<CardBox :icon="mdiMonitorCellphone" title="All Submitters" has-table class="shadow-lg">
|
|
<TableSampleClients />
|
|
</CardBox>
|
|
</template>
|
|
|
|
</SectionMain>
|
|
</LayoutAuthenticated>
|
|
</template>
|