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 />

159
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">
{{ license.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 }}
</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>

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

@ -36,19 +36,15 @@ const submit = async () => {
small small
/> />
</SectionTitleLineWithButton> </SectionTitleLineWithButton>
<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" <FormControl
help="Required. Displayed project label" v-model="form.label"
:class="{ 'text-red-400': form.errors.label }" type="text"
> placeholder="e.g., my-awesome-project"
<FormControl required
v-model="form.label"
type="text"
placeholder="Enter a descriptive label..."
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"
> >
@ -58,16 +54,16 @@ const submit = async () => {
</FormControl> </FormControl>
</FormField> </FormField>
<FormField <FormField
label="Name" label="Name"
help="Required. Project identifier (slug, lowercase, no spaces)" help="Required. Project identifier (slug, lowercase, no spaces)"
:class="{ 'text-red-400': form.errors.name }" :class="{ 'text-red-400': form.errors.name }"
> >
<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>
@ -141,4 +132,4 @@ const submit = async () => {
</CardBox> </CardBox>
</SectionMain> </SectionMain>
</LayoutAuthenticated> </LayoutAuthenticated>
</template> </template>

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">

164
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>
<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')" {{ roleCount }} {{ roleCount === 1 ? 'role' : 'roles' }}
:icon="mdiPlus" </span>
label="Add" <BaseButton
color="info" v-if="can.create"
rounded-full :route-name="stardust.route('settings.role.create')"
small :icon="mdiPlus"
/> label="New Role"
color="info"
rounded-full
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)"
{{ role.name }} :title="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>

138
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 () => {
await mainService.fetchChartData(); isLoadingChart.value = true;
// chartData.value = chartConfig.sampleChartData(); try {
// chartData.value = mainService.graphData; await mainService.fetchChartData();
} finally {
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,25 +73,28 @@ 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"
color="text-blue-500" color="text-blue-500"
: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"
color="text-purple-500" color="text-purple-500"
: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"
@ -124,22 +113,63 @@ const userHasRoles = (roleNames: Array<string>): boolean => {
:dataset="dataset" :dataset="dataset"
/> />
</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> </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">
<TableSampleClients /> <span class="text-sm text-gray-500 dark:text-gray-400"> Administrator view </span>
</CardBox> </SectionTitleLineWithButton>
<CardBox :icon="mdiMonitorCellphone" title="All Submitters" has-table class="shadow-lg">
<TableSampleClients />
</CardBox>
</template>
</SectionMain> </SectionMain>
</LayoutAuthenticated> </LayoutAuthenticated>
</template> </template>

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

File diff suppressed because it is too large Load diff