geolba/tethys.backend
geolba/tethys.backend
2
0
Fork 2
Code Issues Pull requests Projects Releases 2 Packages Wiki Activity Actions

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
Details

Browse source 
- 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:
Kaimbacher 2025-10-29 11:20:27 +01:00
commit 3d8f2354cb
9 changed files with 863 additions and 625 deletions
Download patch file Download diff file Expand all files Collapse all files

8
app/controllers/projects_controller.ts
View file

@ -1,6 +1,7 @@
// app/controllers/projects_controller.ts // app/controllers/projects_controller.ts
import Project from '#models/project'; import Project from '#models/project';
import type { HttpContext } from '@adonisjs/core/http'; import type { HttpContext } from '@adonisjs/core/http';
import { createProjectValidator, updateProjectValidator } from '#validators/project';
export default class ProjectsController { export default class ProjectsController {
// GET /settings/projects // GET /settings/projects
@ -23,7 +24,8 @@ export default class ProjectsController {
// POST /settings/projects // POST /settings/projects
public async store({ request, response, session }: HttpContext) { public async store({ request, response, session }: HttpContext) {
const data = request.only(['label', 'name', 'description']); // Validate the request data
const data = await request.validateUsing(createProjectValidator);
await Project.create(data); await Project.create(data);
@ -40,7 +42,9 @@ export default class ProjectsController {
// PUT /settings/projects/:id // PUT /settings/projects/:id
public async update({ params, request, response, session }: HttpContext) { public async update({ params, request, response, session }: HttpContext) {
const project = await Project.findOrFail(params.id); const project = await Project.findOrFail(params.id);
const data = request.only(['label', 'name', 'description']);
// Validate the request data
const data = await request.validateUsing(updateProjectValidator);
await project.merge(data).save(); await project.merge(data).save();

28
app/validators/project.ts Normal file
View file

@ -0,0 +1,28 @@
// app/validators/project.ts
import vine from '@vinejs/vine';
export const createProjectValidator = vine.compile(
vine.object({
label: vine.string().trim().minLength(1).maxLength(50),
name: vine
.string()
.trim()
.minLength(3)
.maxLength(255)
.regex(/^[a-z0-9-]+$/),
description: vine.string().trim().maxLength(255).minLength(5).optional(),
}),
);
export const updateProjectValidator = vine.compile(
vine.object({
// label is NOT included since it's readonly
name: vine
.string()
.trim()
.minLength(3)
.maxLength(255)
.regex(/^[a-z0-9-]+$/),
description: vine.string().trim().maxLength(255).minLength(5).optional(),
}),
);

23
resources/js/Layouts/LayoutAuthenticated.vue
View file

@ -14,11 +14,11 @@ const props = defineProps({
showAsideMenu: { showAsideMenu: {
type: Boolean, type: Boolean,
default: true // Set default value to true default: true // Set default value to true
},
hasProgressBar: {
type: Boolean,
default: false // New prop to indicate if progress bar is shown
} }
// user: {
// type: Object,
// default: () => ({}),
// }
}); });
</script> </script>
@ -29,9 +29,18 @@ const props = defineProps({
}"> }">
<div :class="{ <div :class="{
'ml-60 lg:ml-0': layoutService.isAsideMobileExpanded, 'ml-60 lg:ml-0': layoutService.isAsideMobileExpanded,
'xl:pl-60': props.showAsideMenu==true }" 'xl:pl-60': props.showAsideMenu==true,
class="pt-14 min-h-screen w-screen transition-position lg:w-auto bg-gray-50 dark:bg-slate-800 dark:text-slate-100"> 'pt-14': !props.hasProgressBar,
<NavBar :class="{ 'ml-60 lg:ml-0': layoutService.isAsideMobileExpanded }" :showBurger="props.showAsideMenu" /> 'pt-24': props.hasProgressBar // Increased padding when progress bar is present (pt-14 + height of progress bar)
}"
class="min-h-screen w-screen transition-position lg:w-auto bg-gray-50 dark:bg-slate-800 dark:text-slate-100">
<NavBar
:class="{
'ml-60 lg:ml-0': layoutService.isAsideMobileExpanded,
'top-10': props.hasProgressBar // Push NavBar down when progress bar is present
}"
:showBurger="props.showAsideMenu"
/>
<!-- Conditionally render AsideMenu based on showAsideMenu prop --> <!-- Conditionally render AsideMenu based on showAsideMenu prop -->
<template v-if="showAsideMenu"> <template v-if="showAsideMenu">
<AsideMenu /> <AsideMenu />

157
resources/js/Pages/Admin/License/Index.vue
View file

@ -1,6 +1,6 @@
<script lang="ts" setup> <script lang="ts" setup>
import { usePage } from '@inertiajs/vue3'; import { Head, usePage } from '@inertiajs/vue3';
import { mdiAccountKey, mdiSquareEditOutline, mdiAlertBoxOutline } from '@mdi/js'; import { mdiLicense, mdiCheckCircle, mdiCloseCircle, mdiAlertBoxOutline } from '@mdi/js';
import { computed, ComputedRef } from 'vue'; import { computed, ComputedRef } from 'vue';
import LayoutAuthenticated from '@/Layouts/LayoutAuthenticated.vue'; import LayoutAuthenticated from '@/Layouts/LayoutAuthenticated.vue';
import SectionMain from '@/Components/SectionMain.vue'; import SectionMain from '@/Components/SectionMain.vue';
@ -9,107 +9,150 @@ import BaseButton from '@/Components/BaseButton.vue';
import CardBox from '@/Components/CardBox.vue'; import CardBox from '@/Components/CardBox.vue';
import BaseButtons from '@/Components/BaseButtons.vue'; import BaseButtons from '@/Components/BaseButtons.vue';
import NotificationBar from '@/Components/NotificationBar.vue'; import NotificationBar from '@/Components/NotificationBar.vue';
// import Pagination from '@/Components/Admin/Pagination.vue';
// import Sort from '@/Components/Admin/Sort.vue';
import { stardust } from '@eidellev/adonis-stardust/client'; import { stardust } from '@eidellev/adonis-stardust/client';
// import CardBoxModal from '@/Components/CardBoxModal.vue';
// const isModalDangerActive = ref(false); interface License {
// const deleteId = ref(); id: number;
name: string;
sort_order: number;
active: boolean;
}
defineProps({ const props = defineProps({
licenses: { licenses: {
type: Object, type: Array<License>,
default: () => ({}), default: () => [],
}, },
// filters: {
// type: Object,
// default: () => ({}),
// },
can: { can: {
type: Object, type: Object,
default: () => ({}), default: () => ({}),
}, },
}); });
const flash: ComputedRef<any> = computed(() => { const flash: ComputedRef<any> = computed(() => usePage().props.flash);
// let test = usePage();
// console.log(test);
return usePage().props.flash;
});
const licenseCount = computed(() => props.licenses.length);
const getLicenseColor = (index: number) => {
const colors = [
'bg-emerald-100 text-emerald-800 dark:bg-emerald-900 dark:text-emerald-300',
'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300',
'bg-violet-100 text-violet-800 dark:bg-violet-900 dark:text-violet-300',
'bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-300',
'bg-rose-100 text-rose-800 dark:bg-rose-900 dark:text-rose-300',
'bg-cyan-100 text-cyan-800 dark:bg-cyan-900 dark:text-cyan-300',
];
return colors[index % colors.length];
};
</script> </script>
<template> <template>
<LayoutAuthenticated> <LayoutAuthenticated>
<Head title="Licenses" /> <Head title="Licenses" />
<SectionMain> <SectionMain>
<SectionTitleLineWithButton :icon="mdiAccountKey" title="Licenses" main> <SectionTitleLineWithButton :icon="mdiLicense" title="Licenses" main>
<!-- <BaseButton <div class="flex items-center gap-3">
v-if="can.create" <span class="text-sm text-gray-500 dark:text-gray-400 font-medium">
:route-name="stardust.route('settings.role.create')" {{ licenseCount }} {{ licenseCount === 1 ? 'license' : 'licenses' }}
:icon="mdiPlus" </span>
label="Add" </div>
color="info"
rounded-full
small
/> -->
</SectionTitleLineWithButton> </SectionTitleLineWithButton>
<NotificationBar v-if="flash.message" color="success" :icon="mdiAlertBoxOutline"> <NotificationBar v-if="flash.message" color="success" :icon="mdiAlertBoxOutline">
{{ flash.message }} {{ flash.message }}
</NotificationBar> </NotificationBar>
<CardBox class="mb-6" has-table> <CardBox class="mb-6" has-table>
</CardBox>
<CardBox class="mb-6" has-form-data>
<table> <table>
<thead> <thead>
<tr> <tr>
<th> <th>Name</th>
<!-- <Sort label="Name" attribute="name" /> --> <th>Sort Order</th>
Name <th>Status</th>
</th>
<th>
<!-- <Sort label="Sort Order" attribute="sort_order" /> -->
Sort Order
</th>
<th v-if="can.edit">Actions</th> <th v-if="can.edit">Actions</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr v-for="license in licenses" :key="license.id"> <tr v-if="licenses.length === 0">
<td colspan="4" class="text-center py-12">
<div class="flex flex-col items-center justify-center text-gray-500 dark:text-gray-400">
<p class="text-lg font-medium mb-2">No licenses found</p>
<p class="text-sm">Licenses will appear here once configured</p>
</div>
</td>
</tr>
<tr
v-for="(license, index) in licenses"
:key="license.id"
class="hover:bg-gray-50 dark:hover:bg-slate-800 transition-colors"
>
<td data-label="Name"> <td data-label="Name">
<!-- <Link <span
:href="stardust.route('settings.role.show', [role.id])" class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium transition-all hover:shadow-md"
class="no-underline hover:underline text-cyan-600 dark:text-cyan-400" :class="getLicenseColor(index)"
> >
{{ license.name }} {{ license.name }}
</Link> --> </span>
{{ license.name }}
</td> </td>
<td data-label="Description"> <td data-label="Sort Order">
<span
class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-gray-100 dark:bg-slate-700 text-gray-700 dark:text-gray-300 font-semibold text-sm"
>
{{ license.sort_order }} {{ license.sort_order }}
</span>
</td>
<td data-label="Status">
<span
v-if="license.active"
class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300"
>
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
<path
fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clip-rule="evenodd"
/>
</svg>
Active
</span>
<span
v-else
class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-300"
>
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
<path
fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
clip-rule="evenodd"
/>
</svg>
Inactive
</span>
</td> </td>
<td v-if="can.edit" class="before:hidden lg:w-1 whitespace-nowrap"> <td v-if="can.edit" class="before:hidden lg:w-1 whitespace-nowrap">
<BaseButtons type="justify-start lg:justify-end" no-wrap> <BaseButtons type="justify-start lg:justify-end" no-wrap>
<BaseButton v-if="license.active" <BaseButton
v-if="license.active"
:route-name="stardust.route('settings.license.down', [license.id])" :route-name="stardust.route('settings.license.down', [license.id])"
color="warning" :icon="mdiSquareEditOutline" label="deactivate" small /> color="warning"
<BaseButton v-else :route-name="stardust.route('settings.license.up', [license.id])" :icon="mdiCloseCircle"
color="success" :icon="mdiSquareEditOutline" label="activate" small /> label="Deactivate"
small
/>
<BaseButton
v-else
:route-name="stardust.route('settings.license.up', [license.id])"
color="success"
:icon="mdiCheckCircle"
label="Activate"
small
/>
</BaseButtons> </BaseButtons>
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
<!-- <div class="py-4">
<Pagination v-bind:data="roles.meta" />
</div> -->
</CardBox> </CardBox>
</SectionMain> </SectionMain>
</LayoutAuthenticated> </LayoutAuthenticated>

29
resources/js/Pages/Admin/Project/Create.vue
View file

@ -39,15 +39,11 @@ const submit = async () => {
<CardBox form @submit.prevent="submit()" class="shadow-lg"> <CardBox form @submit.prevent="submit()" class="shadow-lg">
<div class="grid grid-cols-1 gap-6"> <div class="grid grid-cols-1 gap-6">
<FormField <FormField label="Label" help="Required. Displayed project label" :class="{ 'text-red-400': form.errors.label }">
label="Label"
help="Required. Displayed project label"
:class="{ 'text-red-400': form.errors.label }"
>
<FormControl <FormControl
v-model="form.label" v-model="form.label"
type="text" type="text"
placeholder="Enter a descriptive label..." placeholder="e.g., my-awesome-project"
required required
:error="form.errors.label" :error="form.errors.label"
class="transition-all focus:ring-2 focus:ring-blue-500" class="transition-all focus:ring-2 focus:ring-blue-500"
@ -66,7 +62,7 @@ const submit = async () => {
<FormControl <FormControl
v-model="form.name" v-model="form.name"
type="text" type="text"
placeholder="e.g., my-awesome-project" placeholder="Enter a descriptive titel..."
required required
:error="form.errors.name" :error="form.errors.name"
class="font-mono transition-all focus:ring-2 focus:ring-blue-500" class="font-mono transition-all focus:ring-2 focus:ring-blue-500"
@ -100,12 +96,7 @@ const submit = async () => {
<template #footer> <template #footer>
<BaseButtons class="justify-between"> <BaseButtons class="justify-between">
<BaseButton <BaseButton :route-name="stardust.route('settings.project.index')" label="Cancel" color="white" outline />
:route-name="stardust.route('settings.project.index')"
label="Cancel"
color="white"
outline
/>
<BaseButton <BaseButton
type="submit" type="submit"
color="info" color="info"
@ -120,7 +111,9 @@ const submit = async () => {
</CardBox> </CardBox>
<!-- Helper Card --> <!-- Helper Card -->
<CardBox class="mt-6 bg-gradient-to-br from-blue-50 to-indigo-50 dark:from-slate-800 dark:to-slate-900 border-l-4 border-blue-500"> <CardBox
class="mt-6 bg-gradient-to-br from-blue-50 to-indigo-50 dark:from-slate-800 dark:to-slate-900 border-l-4 border-blue-500"
>
<div class="flex items-start gap-4"> <div class="flex items-start gap-4">
<div class="flex-shrink-0"> <div class="flex-shrink-0">
<div class="w-10 h-10 rounded-full bg-blue-500 dark:bg-blue-600 flex items-center justify-center"> <div class="w-10 h-10 rounded-full bg-blue-500 dark:bg-blue-600 flex items-center justify-center">
@ -128,12 +121,10 @@ const submit = async () => {
</div> </div>
</div> </div>
<div class="flex-1"> <div class="flex-1">
<h3 class="text-sm font-semibold text-gray-900 dark:text-white mb-2"> <h3 class="text-sm font-semibold text-gray-900 dark:text-white mb-2">Quick Tips</h3>
Quick Tips
</h3>
<ul class="text-sm text-gray-700 dark:text-gray-300 space-y-1"> <ul class="text-sm text-gray-700 dark:text-gray-300 space-y-1">
<li>• <strong>Label</strong> is what users will see in the interface</li> <li>• <strong>Label</strong> is a technical identifier (use lowercase and hyphens) </li>
<li>• <strong>Name</strong> is a technical identifier (use lowercase and hyphens)</li> <li>• <strong>Name</strong> is what users will see in the interface - short title</li>
<li>• <strong>Description</strong> helps team members understand the project's purpose</li> <li>• <strong>Description</strong> helps team members understand the project's purpose</li>
</ul> </ul>
</div> </div>

4
resources/js/Pages/Admin/Project/Index.vue
View file

@ -143,7 +143,7 @@ const getProjectColor = (index) => {
:class="getProjectColor(index)" :class="getProjectColor(index)"
:title="project.label" :title="project.label"
> >
{{ truncate(project.label, 25) }} {{ truncate(project.label, 30) }}
</span> </span>
<!-- </Link> --> <!-- </Link> -->
</td> </td>
@ -152,7 +152,7 @@ const getProjectColor = (index) => {
class="text-gray-700 dark:text-gray-300 font-mono text-sm" class="text-gray-700 dark:text-gray-300 font-mono text-sm"
:title="project.name" :title="project.name"
> >
{{ truncate(project.name, 30) }} {{ truncate(project.name, 40) }}
</span> </span>
</td> </td>
<td v-if="can.edit || can.delete" class="before:hidden lg:w-1 whitespace-nowrap"> <td v-if="can.edit || can.delete" class="before:hidden lg:w-1 whitespace-nowrap">

144
resources/js/Pages/Admin/Role/Index.vue
View file

@ -1,7 +1,7 @@
<script setup> <script lang="ts" setup>
import { Head, Link, useForm, usePage } from '@inertiajs/vue3'; import { Head, Link, useForm, usePage } from '@inertiajs/vue3';
import { mdiAccountKey, mdiPlus, mdiSquareEditOutline, mdiTrashCan, mdiAlertBoxOutline } from '@mdi/js'; import { mdiAccountKey, mdiPlus, mdiSquareEditOutline, mdiTrashCan, mdiAlertBoxOutline } from '@mdi/js';
import { computed, ref } from 'vue'; import { computed, ref, ComputedRef } from 'vue';
import LayoutAuthenticated from '@/Layouts/LayoutAuthenticated.vue'; import LayoutAuthenticated from '@/Layouts/LayoutAuthenticated.vue';
import SectionMain from '@/Components/SectionMain.vue'; import SectionMain from '@/Components/SectionMain.vue';
import SectionTitleLineWithButton from '@/Components/SectionTitleLineWithButton.vue'; import SectionTitleLineWithButton from '@/Components/SectionTitleLineWithButton.vue';
@ -9,18 +9,23 @@ import BaseButton from '@/Components/BaseButton.vue';
import CardBox from '@/Components/CardBox.vue'; import CardBox from '@/Components/CardBox.vue';
import BaseButtons from '@/Components/BaseButtons.vue'; import BaseButtons from '@/Components/BaseButtons.vue';
import NotificationBar from '@/Components/NotificationBar.vue'; import NotificationBar from '@/Components/NotificationBar.vue';
import Pagination from '@/Components/Admin/Pagination.vue'; import CardBoxModal from '@/Components/CardBoxModal.vue';
import Sort from '@/Components/Admin/Sort.vue'; import Sort from '@/Components/Admin/Sort.vue';
import { stardust } from '@eidellev/adonis-stardust/client'; import { stardust } from '@eidellev/adonis-stardust/client';
import CardBoxModal from '@/Components/CardBoxModal.vue';
interface Role {
id: number;
name: string;
description: string;
}
const isModalDangerActive = ref(false); const isModalDangerActive = ref(false);
const deleteId = ref(); const deleteId = ref();
const props = defineProps({ const props = defineProps({
roles: { roles: {
type: Object, type: Array<Role>,
default: () => ({}), default: () => [],
}, },
filters: { filters: {
type: Object, type: Object,
@ -32,88 +37,89 @@ const props = defineProps({
}, },
}); });
const flash = computed(() => { const flash: ComputedRef<any> = computed(() => usePage().props.flash);
// let test = usePage();
// console.log(test);
return usePage().props.flash;
});
const form = useForm({ // const form = useForm({
search: props.filters.search, // search: props.filters.search,
}); // });
const roleCount = computed(() => props.roles.length);
const formDelete = useForm({}); const formDelete = useForm({});
const destroy = (id, e) => {
// console.log(id); const destroy = (id: number) => {
deleteId.value = id; deleteId.value = id;
isModalDangerActive.value = true; isModalDangerActive.value = true;
}; };
const onConfirm = async (id) => { const onConfirm = async (id: number) => {
// let id = 6;
await formDelete.delete(stardust.route('settings.role.destroy', [id])); await formDelete.delete(stardust.route('settings.role.destroy', [id]));
deleteId.value = null; deleteId.value = null;
}; };
const onCancel = (id) => { const onCancel = () => {
// console.log('cancel');
deleteId.value = null; deleteId.value = null;
}; };
const getRoleColor = (index: number) => {
const colors = [
'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-300',
'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300',
'bg-pink-100 text-pink-800 dark:bg-pink-900 dark:text-pink-300',
'bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-300',
'bg-teal-100 text-teal-800 dark:bg-teal-900 dark:text-teal-300',
'bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-300',
];
return colors[index % colors.length];
};
const truncate = (text: string, length = 50) => {
if (!text) return '-';
return text.length > length ? text.substring(0, length) + '...' : text;
};
</script> </script>
<template> <template>
<CardBoxModal <CardBoxModal
v-model="isModalDangerActive" v-model="isModalDangerActive"
:delete-id="deleteId" :delete-id="deleteId"
large-title="Please confirm" large-title="Delete Role"
button="danger" button="danger"
button-label="Delete" button-label="Delete"
has-cancel has-cancel
v-on:confirm="onConfirm" @confirm="onConfirm"
v-on:cancel="onCancel" @cancel="onCancel"
> >
<p>Lorem ipsum dolor sit amet <b>adipiscing elit</b></p> <p>Are you sure you want to delete this role?</p>
<p>This is sample modal</p> <p>This action cannot be undone.</p>
</CardBoxModal> </CardBoxModal>
<LayoutAuthenticated> <LayoutAuthenticated>
<Head title="Roles" /> <Head title="Roles" />
<SectionMain> <SectionMain>
<SectionTitleLineWithButton :icon="mdiAccountKey" title="Roles" main> <SectionTitleLineWithButton :icon="mdiAccountKey" title="Roles" main>
<div class="flex items-center gap-3">
<span class="text-sm text-gray-500 dark:text-gray-400 font-medium">
{{ roleCount }} {{ roleCount === 1 ? 'role' : 'roles' }}
</span>
<BaseButton <BaseButton
v-if="can.create" v-if="can.create"
:route-name="stardust.route('settings.role.create')" :route-name="stardust.route('settings.role.create')"
:icon="mdiPlus" :icon="mdiPlus"
label="Add" label="New Role"
color="info" color="info"
rounded-full rounded-full
small small
class="shadow-md hover:shadow-lg transition-shadow"
/> />
</div>
</SectionTitleLineWithButton> </SectionTitleLineWithButton>
<NotificationBar v-if="flash.message" color="success" :icon="mdiAlertBoxOutline"> <NotificationBar v-if="flash.message" color="success" :icon="mdiAlertBoxOutline">
{{ flash.message }} {{ flash.message }}
</NotificationBar> </NotificationBar>
<CardBox class="mb-6" has-table> <CardBox class="mb-6" has-table>
<!-- <form @submit.prevent="form.get(stardust.route('role.index'))">
<div class="py-2 flex">
<div class="flex pl-4">
<input
type="search"
v-model="form.search"
class="rounded-md shadow-sm border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
placeholder="Search"
/>
<BaseButton
label="Search"
type="submit"
color="info"
class="ml-4 inline-flex items-center px-4 py-2"
/>
</div>
</div>
</form> -->
</CardBox>
<CardBox class="mb-6" has-form-data>
<table> <table>
<thead> <thead>
<tr> <tr>
@ -128,17 +134,42 @@ const onCancel = (id) => {
</thead> </thead>
<tbody> <tbody>
<tr v-for="role in roles" :key="role.id"> <tr v-if="roles.length === 0">
<td colspan="3" class="text-center py-12">
<div class="flex flex-col items-center justify-center text-gray-500 dark:text-gray-400">
<p class="text-lg font-medium mb-2">No roles yet</p>
<p class="text-sm mb-4">Get started by creating your first role</p>
<BaseButton
v-if="can.create"
:route-name="stardust.route('settings.role.create')"
:icon="mdiPlus"
label="Create Role"
color="info"
small
/>
</div>
</td>
</tr>
<tr
v-for="(role, index) in roles"
:key="role.id"
class="hover:bg-gray-50 dark:hover:bg-slate-800 transition-colors"
>
<td data-label="Name"> <td data-label="Name">
<Link <Link :href="stardust.route('settings.role.show', [role.id])" class="no-underline hover:underline">
:href="stardust.route('settings.role.show', [role.id])" <span
class="no-underline hover:underline text-cyan-600 dark:text-cyan-400" class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium transition-all hover:shadow-md"
:class="getRoleColor(index)"
:title="role.name"
> >
{{ role.name }} {{ role.name }}
</span>
</Link> </Link>
</td> </td>
<td data-label="Description"> <td data-label="Description">
{{ role.description }} <span class="text-gray-700 dark:text-gray-300 text-sm" :title="role.description">
{{ truncate(role.description, 50) }}
</span>
</td> </td>
<td v-if="can.edit || can.delete" class="before:hidden lg:w-1 whitespace-nowrap"> <td v-if="can.edit || can.delete" class="before:hidden lg:w-1 whitespace-nowrap">
<BaseButtons type="justify-start lg:justify-end" no-wrap> <BaseButtons type="justify-start lg:justify-end" no-wrap>
@ -149,21 +180,12 @@ const onCancel = (id) => {
:icon="mdiSquareEditOutline" :icon="mdiSquareEditOutline"
small small
/> />
<!-- <BaseButton <BaseButton v-if="can.delete" color="danger" :icon="mdiTrashCan" small @click="destroy(role.id)" />
v-if="can.delete"
color="danger"
:icon="mdiTrashCan"
small
@click="($event) => destroy(role.id, $event)"
/> -->
</BaseButtons> </BaseButtons>
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
<!-- <div class="py-4">
<Pagination v-bind:data="roles.meta" />
</div> -->
</CardBox> </CardBox>
</SectionMain> </SectionMain>
</LayoutAuthenticated> </LayoutAuthenticated>

124
resources/js/Pages/Dashboard.vue
View file

@ -1,6 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { Head, usePage } from '@inertiajs/vue3'; import { Head, usePage } from '@inertiajs/vue3';
import { computed } from 'vue'; import { computed, ref } from 'vue';
import { MainService } from '@/Stores/main'; import { MainService } from '@/Stores/main';
import { import {
mdiAccountMultiple, mdiAccountMultiple,
@ -10,6 +10,7 @@ import {
mdiMonitorCellphone, mdiMonitorCellphone,
mdiReload, mdiReload,
mdiChartPie, mdiChartPie,
mdiTrendingUp,
} from '@mdi/js'; } from '@mdi/js';
import LineChart from '@/Components/Charts/LineChart.vue'; import LineChart from '@/Components/Charts/LineChart.vue';
import SectionMain from '@/Components/SectionMain.vue'; import SectionMain from '@/Components/SectionMain.vue';
@ -18,47 +19,37 @@ import CardBox from '@/Components/CardBox.vue';
import TableSampleClients from '@/Components/TableSampleClients.vue'; import TableSampleClients from '@/Components/TableSampleClients.vue';
import LayoutAuthenticated from '@/Layouts/LayoutAuthenticated.vue'; import LayoutAuthenticated from '@/Layouts/LayoutAuthenticated.vue';
import SectionTitleLineWithButton from '@/Components/SectionTitleLineWithButton.vue'; import SectionTitleLineWithButton from '@/Components/SectionTitleLineWithButton.vue';
// import SectionBannerStarOnGitHub from '@/Components/SectionBannerStarOnGitea.vue';
import CardBoxDataset from '@/Components/CardBoxDataset.vue'; import CardBoxDataset from '@/Components/CardBoxDataset.vue';
import type { User } from '@/Dataset'; import type { User } from '@/Dataset';
const mainService = MainService()
// const chartData = ref(); const mainService = MainService();
const isLoadingChart = ref(false);
const fillChartData = async () => { const fillChartData = async () => {
isLoadingChart.value = true;
try {
await mainService.fetchChartData(); await mainService.fetchChartData();
// chartData.value = chartConfig.sampleChartData(); } finally {
// chartData.value = mainService.graphData; isLoadingChart.value = false;
}
}; };
const chartData = computed(() => mainService.graphData); const chartData = computed(() => mainService.graphData);
// onMounted(async () => { const authors = computed(() => mainService.authors);
// await mainService.fetchChartData("2022"); const datasets = computed(() => mainService.datasets);
// }); const datasetBarItems = computed(() => mainService.datasets.slice(0, 5));
const submitters = computed(() => mainService.clients);
// mainService.fetch('clients'); const user = computed(() => usePage().props.authUser as User);
// mainService.fetch('history');
// mainService.fetchApi('authors');
// mainService.fetchApi('datasets');
// const clientBarItems = computed(() => mainService.clients.slice(0, 4));
// const transactionBarItems = computed(() => mainService.history);
// Initialize data
mainService.fetchApi('clients'); mainService.fetchApi('clients');
mainService.fetchApi('authors'); mainService.fetchApi('authors');
mainService.fetchApi('datasets'); mainService.fetchApi('datasets');
mainService.fetchChartData(); 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 => { 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> </script>
@ -67,18 +58,13 @@ const userHasRoles = (roleNames: Array<string>): boolean => {
<Head title="Dashboard" /> <Head title="Dashboard" />
<SectionMain> <SectionMain>
<SectionTitleLineWithButton v-bind:icon="mdiChartTimelineVariant" title="Overview" main> <SectionTitleLineWithButton :icon="mdiChartTimelineVariant" title="Dashboard Overview" main>
<!-- <BaseButton <div class="text-sm text-gray-500 dark:text-gray-400">
href="" Welcome back, <span class="font-semibold">{{ user.login }}</span>
target="_blank" </div>
:icon="mdiGithub"
label="Star on GeoSphere Forgejo"
color="contrast"
rounded-full
small
/> -->
</SectionTitleLineWithButton> </SectionTitleLineWithButton>
<!-- Stats Grid -->
<div class="grid grid-cols-1 gap-6 lg:grid-cols-3 mb-6"> <div class="grid grid-cols-1 gap-6 lg:grid-cols-3 mb-6">
<CardBoxWidget <CardBoxWidget
trend="12%" trend="12%"
@ -87,6 +73,7 @@ const userHasRoles = (roleNames: Array<string>): boolean => {
:icon="mdiAccountMultiple" :icon="mdiAccountMultiple"
:number="authors.length" :number="authors.length"
label="Authors" label="Authors"
class="hover:shadow-lg transition-shadow duration-300"
/> />
<CardBoxWidget <CardBoxWidget
trend-type="info" trend-type="info"
@ -94,6 +81,7 @@ const userHasRoles = (roleNames: Array<string>): boolean => {
:icon="mdiDatabaseOutline" :icon="mdiDatabaseOutline"
:number="datasets.length" :number="datasets.length"
label="Publications" label="Publications"
class="hover:shadow-lg transition-shadow duration-300"
/> />
<CardBoxWidget <CardBoxWidget
trend-type="up" trend-type="up"
@ -101,11 +89,12 @@ const userHasRoles = (roleNames: Array<string>): boolean => {
:icon="mdiChartTimelineVariant" :icon="mdiChartTimelineVariant"
:number="submitters.length" :number="submitters.length"
label="Submitters" label="Submitters"
class="hover:shadow-lg transition-shadow duration-300"
/> />
</div> </div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6"> <!-- <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
<!-- <div class="flex flex-col justify-between"> <div class="flex flex-col justify-between">
<CardBoxClient <CardBoxClient
v-for="client in authorBarItems" v-for="client in authorBarItems"
:key="client.id" :key="client.id"
@ -116,7 +105,7 @@ const userHasRoles = (roleNames: Array<string>): boolean => {
:count="client.dataset_count" :count="client.dataset_count"
/> />
</div> --> </div> <!--
<div class="flex flex-col justify-between"> <div class="flex flex-col justify-between">
<CardBoxDataset <CardBoxDataset
v-for="(dataset, index) in datasetBarItems" v-for="(dataset, index) in datasetBarItems"
@ -126,20 +115,61 @@ const userHasRoles = (roleNames: Array<string>): boolean => {
</div> </div>
</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 /> --> <!-- <SectionBannerStarOnGitHub /> -->
<SectionTitleLineWithButton :icon="mdiChartPie" title="Trends overview: Publications per month" ></SectionTitleLineWithButton> <!-- Chart Section -->
<CardBox title="Performance" :icon="mdiFinance" :header-icon="mdiReload" class="mb-6" @header-icon-click="fillChartData"> <SectionTitleLineWithButton :icon="mdiChartPie" title="Trends Overview" class="mt-8">
<div v-if="chartData"> <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" /> <line-chart :data="chartData" class="h-96" />
</div> </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> </CardBox>
<SectionTitleLineWithButton v-if="userHasRoles(['administrator'])" :icon="mdiAccountMultiple" title="Submitters" /> <!-- Admin Section -->
<!-- <NotificationBar color="info" :icon="mdiMonitorCellphone"> <b>Responsive table.</b> Collapses on mobile </NotificationBar> --> <template v-if="userHasRoles(['administrator'])">
<CardBox v-if="userHasRoles(['administrator'])" :icon="mdiMonitorCellphone" title="Responsive table" has-table> <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 /> <TableSampleClients />
</CardBox> </CardBox>
</template>
</SectionMain> </SectionMain>
</LayoutAuthenticated> </LayoutAuthenticated>
</template> </template>

479
resources/js/Pages/Submitter/Dataset/Edit.vue
View file

@ -1,8 +1,36 @@
<!-- 1. Add progress indicator at the top -->
<template> <template>
<LayoutAuthenticated> <LayoutAuthenticated>
<Head title="Edit dataset" /> <Head title="Edit dataset" />
<!-- Progress Bar for Unsaved Changes -->
<!-- Progress Bar for Unsaved Changes -->
<div v-if="hasUnsavedChanges" class="fixed top-0 left-0 right-0 z-50 bg-amber-500 text-white px-4 py-2.5 text-sm shadow-lg h-14">
<div class="container mx-auto flex items-center justify-between h-full">
<div class="flex items-center gap-2">
<svg class="animate-pulse w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path
fill-rule="evenodd"
d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
clip-rule="evenodd"
/>
</svg>
<span class="font-medium">You have unsaved changes</span>
</div>
<BaseButton @click="submitAlternative" label="Save Now" color="white" small :disabled="form.processing" />
</div>
</div>
<SectionMain> <SectionMain>
<SectionTitleLineWithButton :icon="mdiImageText" title="Update dataset" main> <!-- Enhanced Title Section -->
<SectionTitleLineWithButton :icon="mdiImageText" title="Update Dataset" main>
<div class="flex items-center gap-3">
<!-- Dataset Status Badge -->
<!-- <span
class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300"
>
Draft
</span> -->
<BaseButton <BaseButton
:route-name="stardust.route('dataset.list')" :route-name="stardust.route('dataset.list')"
:icon="mdiArrowLeftBoldOutline" :icon="mdiArrowLeftBoldOutline"
@ -11,15 +39,17 @@
rounded-full rounded-full
small small
/> />
</div>
</SectionTitleLineWithButton> </SectionTitleLineWithButton>
<!-- Success/Error Notifications -->
<NotificationBar v-if="flash.message" color="success" :icon="mdiAlertBoxOutline"> <NotificationBar v-if="flash.message" color="success" :icon="mdiAlertBoxOutline">
{{ flash.message }} {{ flash.message }}
</NotificationBar> </NotificationBar>
<FormValidationErrors v-bind:errors="errors" /> <FormValidationErrors v-bind:errors="errors" />
<!-- @auto-save="submitAlternative" --> <!-- Main Form with Sections -->
<CardBox :form="true"> <CardBox :form="true" class="shadow-lg">
<UnsavedChangesWarning <UnsavedChangesWarning
:show="hasUnsavedChanges" :show="hasUnsavedChanges"
:changes-summary="getChangesSummary()" :changes-summary="getChangesSummary()"
@ -29,19 +59,26 @@
:auto-save-delay="30" :auto-save-delay="30"
@save="submitAlternative" @save="submitAlternative"
/> />
<div class="mb-4"> <!-- Collapsible Sections for Better Organization -->
<div class="flex flex-col md:flex-row">
<!-- (1) language field --> <!-- Section 1: Basic Information -->
<div class="mb-8">
<h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
<span class="w-8 h-8 rounded-full bg-blue-500 text-white flex items-center justify-center text-sm">1</span>
Basic Information
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 ml-10">
<!-- (1) Language -->
<FormField <FormField
label="Language *" label="Language *"
help="required: select dataset main language" help="required: select dataset main language"
:class="{ 'text-red-400': form.errors.language }" :class="{ 'text-red-400': form.errors.language }"
class="w-full flex-1"
> >
<FormControl <FormControl
required required
v-model="form.language" v-model="form.language"
:type="'select'" type="select"
placeholder="[Enter Language]" placeholder="[Enter Language]"
:errors="form.errors.language" :errors="form.errors.language"
:options="{ de: 'de', en: 'en' }" :options="{ de: 'de', en: 'en' }"
@ -51,35 +88,9 @@
</div> </div>
</FormControl> </FormControl>
</FormField> </FormField>
</div>
<!-- (2) licenses -->
<FormField label="Licenses" wrap-body :class="{ 'text-red-400': form.errors.licenses }" class="mt-8 w-full mx-2 flex-1">
<FormCheckRadioGroup
type="radio"
v-model="form.licenses"
name="licenses"
is-column
:options="licenses"
:key="`licenses-${Date.now()}-${JSON.stringify(form.licenses)}`"
/>
</FormField>
<!-- Add this temporarily near your licenses FormField for debugging -->
<!-- <div v-if="true" class="border p-2 mb-2 text-xs bg-gray-50">
<strong>Debug - Licenses:</strong><br />
Form licenses: {{ JSON.stringify(form.licenses) }}<br />
Original licenses: {{ JSON.stringify(originalDataset.licenses) }}<br />
License options: {{ JSON.stringify(Object.keys(licenses)) }}
</div> -->
<div class="flex flex-col md:flex-row">
<!-- (3) dataset_type --> <!-- (3) dataset_type -->
<FormField <FormField label="Dataset Type *" help="required: dataset type" :class="{ 'text-red-400': form.errors.type }">
label="Dataset Type *"
help="required: dataset type"
:class="{ 'text-red-400': form.errors.type }"
class="w-full mx-2 flex-1"
>
<FormControl <FormControl
required required
v-model="form.type" v-model="form.type"
@ -115,17 +126,40 @@
</FormControl> </FormControl>
</FormField> </FormField>
</div> </div>
</div>
<BaseDivider /> <BaseDivider />
<!-- Section 2: Licenses -->
<div class="mb-8">
<h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
<span class="w-8 h-8 rounded-full bg-green-500 text-white flex items-center justify-center text-sm">2</span>
Licenses
</h2>
<div class="ml-10">
<!-- (2) licenses -->
<FormField label="Select License" wrap-body :class="{ 'text-red-400': form.errors.licenses }">
<FormCheckRadioGroup type="radio" v-model="form.licenses" name="licenses" is-column :options="licenses" />
</FormField>
</div>
</div>
<BaseDivider />
<!-- Section 3: Titles -->
<div class="mb-8">
<h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
<span class="w-8 h-8 rounded-full bg-purple-500 text-white flex items-center justify-center text-sm">3</span>
Titles
</h2>
<!-- (5) titles --> <!-- (5) titles -->
<CardBox <CardBox
class="mb-6 shadow" class="ml-10 shadow-md"
:has-form-data="false" title="Main & Additional Titles"
title="Titles"
:icon="mdiFinance" :icon="mdiFinance"
:header-icon="mdiPlusCircle" :header-icon="mdiPlusCircle"
v-on:header-icon-click="addTitle()" @header-icon-click="addTitle()"
> >
<div class="flex flex-col md:flex-row"> <div class="flex flex-col md:flex-row">
<FormField <FormField
@ -238,15 +272,23 @@
</tbody> </tbody>
</table> </table>
</CardBox> </CardBox>
</div>
<BaseDivider />
<!-- Section 4: Descriptions -->
<div class="mb-8">
<h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
<span class="w-8 h-8 rounded-full bg-orange-500 text-white flex items-center justify-center text-sm">4</span>
Descriptions
</h2>
<!-- (6) descriptions --> <!-- (6) descriptions -->
<CardBox <CardBox
class="mb-6 shadow" class="ml-10 shadow-md"
:has-form-data="false" title="Abstract & Additional Descriptions"
title="Descriptions"
:icon="mdiFinance" :icon="mdiFinance"
:header-icon="mdiPlusCircle" :header-icon="mdiPlusCircle"
v-on:header-icon-click="addDescription()" @header-icon-click="addDescription()"
> >
<div class="flex flex-col md:flex-row"> <div class="flex flex-col md:flex-row">
<FormField <FormField
@ -359,16 +401,33 @@
</tbody> </tbody>
</table> </table>
</CardBox> </CardBox>
</div>
<BaseDivider />
<!-- Section 5: People (Authors & Contributors) -->
<div class="mb-8">
<h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
<span class="w-8 h-8 rounded-full bg-pink-500 text-white flex items-center justify-center text-sm">5</span>
Creators & Contributors
</h2>
<div class="ml-10 space-y-6">
<!-- (7) authors --> <!-- (7) authors -->
<CardBox <CardBox
class="mb-6 shadow" class="shadow-md"
has-table has-table
title="Creators" title="Creators"
:icon="mdiBookOpenPageVariant" :icon="mdiBookOpenPageVariant"
:header-icon="mdiPlusCircle" :header-icon="mdiPlusCircle"
v-on:header-icon-click="addNewAuthor()" @header-icon-click="addNewAuthor()"
> >
<div
class="mb-4 p-3 bg-blue-50 dark:bg-slate-800 rounded-lg text-sm text-blue-800 dark:text-blue-300 flex items-start gap-2"
>
<BaseIcon :path="mdiAlertBoxOutline" class="flex-shrink-0 mt-0.5" />
<span>Search for existing persons or add new ones manually. Creators are displayed in citation order.</span>
</div>
<div class="mb-2 text-gray-600 text-sm flex items-center gap-2"> <div class="mb-2 text-gray-600 text-sm flex items-center gap-2">
<span>Add creators by searching existing persons or manually adding new ones.</span> <span>Add creators by searching existing persons or manually adding new ones.</span>
<BaseIcon <BaseIcon
@ -398,7 +457,12 @@
/> />
</div> --> </div> -->
</div> </div>
<TablePersons :persons="form.authors" v-if="form.authors.length > 0" :errors="form.errors" :relation="'authors'" /> <TablePersons
:persons="form.authors"
v-if="form.authors.length > 0"
:errors="form.errors"
:relation="'authors'"
/>
<div class="text-red-400 text-sm" v-if="form.errors.authors && Array.isArray(form.errors.authors)"> <div class="text-red-400 text-sm" v-if="form.errors.authors && Array.isArray(form.errors.authors)">
{{ form.errors.authors.join(', ') }} {{ form.errors.authors.join(', ') }}
</div> </div>
@ -406,12 +470,12 @@
<!-- (8) contributors --> <!-- (8) contributors -->
<CardBox <CardBox
class="mb-6 shadow" class="shadow-md"
has-table has-table
title="Contributors" title="Contributors"
:icon="mdiBookOpenPageVariant" :icon="mdiBookOpenPageVariant"
:header-icon="mdiPlusCircle" :header-icon="mdiPlusCircle"
v-on:header-icon-click="addNewContributor()" @header-icon-click="addNewContributor()"
> >
<div class="mb-2 text-gray-600 text-sm flex items-center gap-2"> <div class="mb-2 text-gray-600 text-sm flex items-center gap-2">
<span>Add contributors by searching existing persons or manually adding new ones.</span> <span>Add contributors by searching existing persons or manually adding new ones.</span>
@ -440,8 +504,21 @@
{{ form.errors.contributors.join(', ') }} {{ form.errors.contributors.join(', ') }}
</div> </div>
</CardBox> </CardBox>
</div>
</div>
<div class="flex flex-col md:flex-row"> <BaseDivider />
<!-- Section 6: Additional Metadata -->
<div class="mb-8">
<h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
<span class="w-8 h-8 rounded-full bg-indigo-500 text-white flex items-center justify-center text-sm">6</span>
Additional Metadata
</h2>
<div class="ml-10 space-y-6">
<!-- Project & Embargo -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<!-- (9) project_id --> <!-- (9) project_id -->
<FormField <FormField
label="Project.." label="Project.."
@ -462,6 +539,7 @@
</div> </div>
</FormControl> </FormControl>
</FormField> </FormField>
<!-- (10) embargo_date --> <!-- (10) embargo_date -->
<FormField <FormField
label="Embargo Date.." label="Embargo Date.."
@ -482,86 +560,32 @@
</FormField> </FormField>
</div> </div>
<BaseDivider /> <!-- Keywords -->
<MapComponent
v-if="form.coverage"
:mapOptions="mapOptions"
:baseMaps="baseMaps"
:fitBounds="fitBounds"
:coverage="form.coverage"
:mapId="mapId"
v-bind-event:onMapInitializedEvent="onMapInitialized"
>
</MapComponent>
<div class="flex flex-col md:flex-row">
<!-- x min and max -->
<FormField
label="Coverage X Min"
:class="{ 'text-red-400': form.errors['coverage.x_min'] }"
class="w-full mx-2 flex-1"
>
<FormControl required v-model="form.coverage.x_min" type="text" placeholder="[enter x_min]">
<div
class="text-red-400 text-sm"
v-if="form.errors['coverage.x_min'] && Array.isArray(form.errors['coverage.x_min'])"
>
{{ form.errors['coverage.x_min'].join(', ') }}
</div>
</FormControl>
</FormField>
<FormField
label="Coverage X Max"
:class="{ 'text-red-400': form.errors['coverage.x_max'] }"
class="w-full mx-2 flex-1"
>
<FormControl required v-model="form.coverage.x_max" type="text" placeholder="[enter x_max]">
<div
class="text-red-400 text-sm"
v-if="form.errors['coverage.x_max'] && Array.isArray(form.errors['coverage.x_max'])"
>
{{ form.errors['coverage.x_max'].join(', ') }}
</div>
</FormControl>
</FormField>
<!-- y min and max -->
<FormField
label="Coverage Y Min"
:class="{ 'text-red-400': form.errors['coverage.y_min'] }"
class="w-full mx-2 flex-1"
>
<FormControl required v-model="form.coverage.y_min" type="text" placeholder="[enter y_min]">
<div
class="text-red-400 text-sm"
v-if="form.errors['coverage.y_min'] && Array.isArray(form.errors['coverage.y_min'])"
>
{{ form.errors['coverage.y_min'].join(', ') }}
</div>
</FormControl>
</FormField>
<FormField
label="Coverage Y Max"
:class="{ 'text-red-400': form.errors['coverage.y_max'] }"
class="w-full mx-2 flex-1"
>
<FormControl required v-model="form.coverage.y_max" type="text" placeholder="[enter y_max]">
<div
class="text-red-400 text-sm"
v-if="form.errors['coverage.y_max'] && Array.isArray(form.errors['coverage.y_max'])"
>
{{ form.errors['coverage.y_max'].join(', ') }}
</div>
</FormControl>
</FormField>
</div>
<CardBox <CardBox
class="mb-6 shadow" class="shadow-md"
has-table
title="Keywords"
:icon="mdiEarthPlus"
:header-icon="mdiPlusCircle"
@header-icon-click="addKeyword"
>
<TableKeywords
:keywords="form.subjects"
:errors="form.errors"
:subjectTypes="subjectTypes"
v-model:subjects-to-delete="form.subjectsToDelete"
v-if="form.subjects.length > 0"
/>
</CardBox>
<!-- References -->
<CardBox
class="shadow-md"
has-table has-table
title="Dataset References" title="Dataset References"
:icon="mdiEarthPlus" :icon="mdiEarthPlus"
:header-icon="mdiPlusCircle" :header-icon="mdiPlusCircle"
v-on:header-icon-click="addReference" @header-icon-click="addReference"
> >
<!-- Message when no references exist --> <!-- Message when no references exist -->
<div v-if="form.references.length === 0" class="text-center py-4"> <div v-if="form.references.length === 0" class="text-center py-4">
@ -610,7 +634,10 @@
:options="referenceIdentifierTypes" :options="referenceIdentifierTypes"
placeholder="[type]" placeholder="[type]"
> >
<div class="text-red-400 text-sm" v-if="Array.isArray(form.errors[`references.${index}.type`])"> <div
class="text-red-400 text-sm"
v-if="Array.isArray(form.errors[`references.${index}.type`])"
>
{{ form.errors[`references.${index}.type`].join(', ') }} {{ form.errors[`references.${index}.type`].join(', ') }}
</div> </div>
</FormControl> </FormControl>
@ -698,79 +725,182 @@
</ul> </ul>
</div> </div>
</CardBox> </CardBox>
</div>
</div>
<BaseDivider /> <BaseDivider />
<CardBox <!-- Section 7: Geographic Coverage -->
class="mb-6 shadow" <div class="mb-8">
has-table <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
title="Dataset Keywords" <span class="w-8 h-8 rounded-full bg-teal-500 text-white flex items-center justify-center text-sm">7</span>
:icon="mdiEarthPlus" Geographic Coverage
:header-icon="mdiPlusCircle" </h2>
v-on:header-icon-click="addKeyword"
> <div class="ml-10">
<TableKeywords <MapComponent
:keywords="form.subjects" v-if="form.coverage"
:errors="form.errors" :mapOptions="mapOptions"
:subjectTypes="subjectTypes" :baseMaps="baseMaps"
v-model:subjects-to-delete="form.subjectsToDelete" :fitBounds="fitBounds"
v-if="form.subjects.length > 0" :coverage="form.coverage"
:mapId="mapId"
class="mb-4 rounded-lg overflow-hidden shadow-md"
/> />
</CardBox>
</div> </div>
<div class="flex flex-col md:flex-row ml-10">
<div class="mb-4"> <!-- x min and max -->
<!-- <label for="project" class="block text-gray-700 font-bold mb-2">Project:</label> <FormField
<select label="Coverage X Min"
id="project" :class="{ 'text-red-400': form.errors['coverage.x_min'] }"
class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" class="w-full mx-2 flex-1"
v-model="dataset.project_id"
> >
<option v-for="project in projects" :key="project.id" :value="project.id" class="block px-4 py-2 text-gray-700"> <FormControl required v-model="form.coverage.x_min" type="text" placeholder="[enter x_min]">
{{ project.label }} <div
</option> class="text-red-400 text-sm"
</select> --> v-if="form.errors['coverage.x_min'] && Array.isArray(form.errors['coverage.x_min'])"
>
{{ form.errors['coverage.x_min'].join(', ') }}
</div>
</FormControl>
</FormField>
<FormField
label="Coverage X Max"
:class="{ 'text-red-400': form.errors['coverage.x_max'] }"
class="w-full mx-2 flex-1"
>
<FormControl required v-model="form.coverage.x_max" type="text" placeholder="[enter x_max]">
<div
class="text-red-400 text-sm"
v-if="form.errors['coverage.x_max'] && Array.isArray(form.errors['coverage.x_max'])"
>
{{ form.errors['coverage.x_max'].join(', ') }}
</div>
</FormControl>
</FormField>
<!-- y min and max -->
<FormField
label="Coverage Y Min"
:class="{ 'text-red-400': form.errors['coverage.y_min'] }"
class="w-full mx-2 flex-1"
>
<FormControl required v-model="form.coverage.y_min" type="text" placeholder="[enter y_min]">
<div
class="text-red-400 text-sm"
v-if="form.errors['coverage.y_min'] && Array.isArray(form.errors['coverage.y_min'])"
>
{{ form.errors['coverage.y_min'].join(', ') }}
</div>
</FormControl>
</FormField>
<FormField
label="Coverage Y Max"
:class="{ 'text-red-400': form.errors['coverage.y_max'] }"
class="w-full mx-2 flex-1"
>
<FormControl required v-model="form.coverage.y_max" type="text" placeholder="[enter y_max]">
<div
class="text-red-400 text-sm"
v-if="form.errors['coverage.y_max'] && Array.isArray(form.errors['coverage.y_max'])"
>
{{ form.errors['coverage.y_max'].join(', ') }}
</div>
</FormControl>
</FormField>
</div>
</div> </div>
<FileUploadComponent v-model:files="form.files" v-model:filesToDelete="form.filesToDelete" :showClearButton="false"> <BaseDivider />
</FileUploadComponent>
<!-- Section 8: Files -->
<div class="mb-8">
<h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
<span class="w-8 h-8 rounded-full bg-cyan-500 text-white flex items-center justify-center text-sm">8</span>
Files
</h2>
<div class="ml-10">
<FileUploadComponent
v-model:files="form.files"
v-model:filesToDelete="form.filesToDelete"
:showClearButton="false"
class="shadow-md"
/>
<div class="text-red-400 text-sm" v-if="form.errors['file'] && Array.isArray(form.errors['files'])"> <div class="text-red-400 text-sm" v-if="form.errors['file'] && Array.isArray(form.errors['files'])">
{{ form.errors['files'].join(', ') }} {{ form.errors['files'].join(', ') }}
</div> </div>
</div>
</div>
<!-- Enhanced Footer with Action Buttons -->
<template #footer> <template #footer>
<div class="flex items-center justify-between">
<div class="text-sm text-gray-500 dark:text-gray-400">
<span v-if="hasUnsavedChanges" class="flex items-center gap-2">
<svg class="w-4 h-4 text-amber-500" fill="currentColor" viewBox="0 0 20 20">
<path
fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z"
clip-rule="evenodd"
/>
</svg>
<span class="font-medium">{{ getChangesSummary().length }} unsaved change(s)</span>
</span>
<span v-else class="flex items-center gap-2 text-green-600 dark:text-green-400">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
<path
fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clip-rule="evenodd"
/>
</svg>
<span class="font-medium">All changes saved</span>
</span>
</div>
<BaseButtons> <BaseButtons>
<BaseButton <BaseButton
v-if="can.edit" v-if="can.edit"
@click.stop="submitAlternative" @click.stop="submitAlternative"
:disabled="form.processing" :disabled="form.processing"
label="Save" label="Save Changes"
color="info" color="info"
:icon="mdiDisc" :icon="mdiDisc"
:class="{ 'opacity-25': form.processing }" :class="{ 'opacity-25': form.processing }"
small class="shadow-md hover:shadow-lg transition-shadow"
> />
</BaseButton>
<BaseButton <BaseButton
v-if="can.edit" v-if="can.edit"
:route-name="stardust.route('dataset.release', [dataset.id])" :route-name="stardust.route('dataset.release', [dataset.id])"
color="info" color="success"
:icon="mdiLockOpen" :icon="mdiLockOpen"
:label="'Release'" label="Release"
small
:disabled="hasUnsavedChanges || form.processing" :disabled="hasUnsavedChanges || form.processing"
:title="hasUnsavedChanges ? 'Please save your changes before releasing' : ''" :title="hasUnsavedChanges ? 'Please save your changes before releasing' : 'Publish this dataset'"
class="shadow-md hover:shadow-lg transition-shadow"
/> />
</BaseButtons> </BaseButtons>
</div>
</template> </template>
</CardBox> </CardBox>
<!-- Loading Spinner -->
<div v-if="form.processing" class="fixed inset-0 flex items-center justify-center bg-gray-500 bg-opacity-50 z-50"> <!-- Enhanced Loading Spinner Overlay -->
<svg class="animate-spin h-12 w-12 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"> <div
v-if="form.processing"
class="fixed inset-0 flex items-center justify-center bg-gray-900 bg-opacity-75 z-50 backdrop-blur-sm"
>
<div class="bg-white dark:bg-slate-800 rounded-lg p-8 shadow-2xl flex flex-col items-center gap-4">
<svg class="animate-spin h-12 w-12 text-blue-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle> <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M12 2a10 10 0 0110 10h-4a6 6 0 00-6-6V2z"></path> <path
class="opacity-75"
fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
></path>
</svg> </svg>
<p class="text-lg font-semibold text-gray-900 dark:text-white">Saving changes...</p>
<p class="text-sm text-gray-500 dark:text-gray-400">Please wait while we update your dataset</p>
</div>
</div> </div>
</SectionMain> </SectionMain>
</LayoutAuthenticated> </LayoutAuthenticated>
@ -1499,25 +1629,6 @@ const getChangesSummary = () => {
return changes; return changes;
}; };
// onMounted(() => {
// window.addEventListener('beforeunload', handleBeforeUnload);
// });
// onUnmounted(() => {
// window.removeEventListener('beforeunload', handleBeforeUnload);
// });
// Watch for when the component receives new props (e.g., after save)
// watch(
// () => props.dataset,
// (newDataset) => {
// if (originalDataset) {
// originalDataset.value = JSON.parse(JSON.stringify(newDataset));
// }
// },
// { deep: true },
// );
</script> </script>
<style scoped> <style scoped>