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

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

@ -36,19 +36,15 @@ const submit = async () => {
small
/>
</SectionTitleLineWithButton>
<CardBox form @submit.prevent="submit()" class="shadow-lg">
<div class="grid grid-cols-1 gap-6">
<FormField
label="Label"
help="Required. Displayed project label"
:class="{ 'text-red-400': form.errors.label }"
>
<FormControl
v-model="form.label"
type="text"
placeholder="Enter a descriptive label..."
required
<FormField label="Label" help="Required. Displayed project label" :class="{ 'text-red-400': form.errors.label }">
<FormControl
v-model="form.label"
type="text"
placeholder="e.g., my-awesome-project"
required
:error="form.errors.label"
class="transition-all focus:ring-2 focus:ring-blue-500"
>
@ -58,16 +54,16 @@ const submit = async () => {
</FormControl>
</FormField>
<FormField
label="Name"
help="Required. Project identifier (slug, lowercase, no spaces)"
<FormField
label="Name"
help="Required. Project identifier (slug, lowercase, no spaces)"
:class="{ 'text-red-400': form.errors.name }"
>
<FormControl
v-model="form.name"
type="text"
placeholder="e.g., my-awesome-project"
required
<FormControl
v-model="form.name"
type="text"
placeholder="Enter a descriptive titel..."
required
:error="form.errors.name"
class="font-mono transition-all focus:ring-2 focus:ring-blue-500"
>
@ -100,12 +96,7 @@ const submit = async () => {
<template #footer>
<BaseButtons class="justify-between">
<BaseButton
:route-name="stardust.route('settings.project.index')"
label="Cancel"
color="white"
outline
/>
<BaseButton :route-name="stardust.route('settings.project.index')" label="Cancel" color="white" outline />
<BaseButton
type="submit"
color="info"
@ -120,7 +111,9 @@ const submit = async () => {
</CardBox>
<!-- 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-shrink-0">
<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 class="flex-1">
<h3 class="text-sm font-semibold text-gray-900 dark:text-white mb-2">
Quick Tips
</h3>
<h3 class="text-sm font-semibold text-gray-900 dark:text-white mb-2">Quick Tips</h3>
<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>Name</strong> is a technical identifier (use lowercase and hyphens)</li>
<li>• <strong>Label</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>
</ul>
</div>
@ -141,4 +132,4 @@ const submit = async () => {
</CardBox>
</SectionMain>
</LayoutAuthenticated>
</template>
</template>