feat: Enhance Dataset Edit Page with Unsaved Changes Indicator and Improved Structure
Some checks failed
build.yaml / feat: Enhance Dataset Edit Page with Unsaved Changes Indicator and Improved Structure (push) Failing after 0s
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.
This commit is contained in:
parent
f39fe75340
commit
3d8f2354cb
9 changed files with 863 additions and 625 deletions
|
|
@ -1,6 +1,6 @@
|
|||
<script setup lang="ts">
|
||||
import { Head, usePage } from '@inertiajs/vue3';
|
||||
import { computed } from 'vue';
|
||||
import { computed, ref } from 'vue';
|
||||
import { MainService } from '@/Stores/main';
|
||||
import {
|
||||
mdiAccountMultiple,
|
||||
|
|
@ -10,6 +10,7 @@ import {
|
|||
mdiMonitorCellphone,
|
||||
mdiReload,
|
||||
mdiChartPie,
|
||||
mdiTrendingUp,
|
||||
} from '@mdi/js';
|
||||
import LineChart from '@/Components/Charts/LineChart.vue';
|
||||
import SectionMain from '@/Components/SectionMain.vue';
|
||||
|
|
@ -18,47 +19,37 @@ 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 mainService = MainService();
|
||||
|
||||
const isLoadingChart = ref(false);
|
||||
|
||||
const fillChartData = async () => {
|
||||
await mainService.fetchChartData();
|
||||
// chartData.value = chartConfig.sampleChartData();
|
||||
// chartData.value = mainService.graphData;
|
||||
isLoadingChart.value = true;
|
||||
try {
|
||||
await mainService.fetchChartData();
|
||||
} finally {
|
||||
isLoadingChart.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
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);
|
||||
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 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));
|
||||
return user.value.roles.some((role) => roleNames.includes(role.name));
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
@ -67,18 +58,13 @@ const userHasRoles = (roleNames: Array<string>): boolean => {
|
|||
<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 :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%"
|
||||
|
|
@ -87,25 +73,28 @@ const userHasRoles = (roleNames: Array<string>): boolean => {
|
|||
:icon="mdiAccountMultiple"
|
||||
:number="authors.length"
|
||||
label="Authors"
|
||||
/>
|
||||
<CardBoxWidget
|
||||
class="hover:shadow-lg transition-shadow duration-300"
|
||||
/>
|
||||
<CardBoxWidget
|
||||
trend-type="info"
|
||||
color="text-blue-500"
|
||||
:icon="mdiDatabaseOutline"
|
||||
:number="datasets.length"
|
||||
label="Publications"
|
||||
/>
|
||||
<CardBoxWidget
|
||||
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">
|
||||
<!-- <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"
|
||||
|
|
@ -116,7 +105,7 @@ const userHasRoles = (roleNames: Array<string>): boolean => {
|
|||
:count="client.dataset_count"
|
||||
|
||||
/>
|
||||
</div> -->
|
||||
</div> <!--
|
||||
<div class="flex flex-col justify-between">
|
||||
<CardBoxDataset
|
||||
v-for="(dataset, index) in datasetBarItems"
|
||||
|
|
@ -124,22 +113,63 @@ const userHasRoles = (roleNames: Array<string>): boolean => {
|
|||
: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 /> -->
|
||||
|
||||
<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">
|
||||
<!-- 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>
|
||||
|
||||
<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>
|
||||
<!-- 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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue