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

Merge branch 'feat/create-projects' into develop

Browse source
This commit is contained in:
Kaimbacher 2025-10-29 11:25:12 +01:00
commit 39f1bcee46
12 changed files with 1378 additions and 590 deletions
Download patch file Download diff file Expand all files Collapse all files

54
app/controllers/projects_controller.ts Normal file
View file

@ -0,0 +1,54 @@
// app/controllers/projects_controller.ts
import Project from '#models/project';
import type { HttpContext } from '@adonisjs/core/http';
import { createProjectValidator, updateProjectValidator } from '#validators/project';
export default class ProjectsController {
// GET /settings/projects
public async index({ inertia, auth }: HttpContext) {
const projects = await Project.all();
// return inertia.render('Admin/Project/Index', { projects });
return inertia.render('Admin/Project/Index', {
projects: projects,
can: {
edit: await auth.user?.can(['settings']),
create: await auth.user?.can(['settings']),
},
});
}
// GET /settings/projects/create
public async create({ inertia }: HttpContext) {
return inertia.render('Admin/Project/Create');
}
// POST /settings/projects
public async store({ request, response, session }: HttpContext) {
// Validate the request data
const data = await request.validateUsing(createProjectValidator);
await Project.create(data);
session.flash('success', 'Project created successfully');
return response.redirect().toRoute('settings.project.index');
}
// GET /settings/projects/:id/edit
public async edit({ params, inertia }: HttpContext) {
const project = await Project.findOrFail(params.id);
return inertia.render('Admin/Project/Edit', { project });
}
// PUT /settings/projects/:id
public async update({ params, request, response, session }: HttpContext) {
const project = await Project.findOrFail(params.id);
// Validate the request data
const data = await request.validateUsing(updateProjectValidator);
await project.merge(data).save();
session.flash('success', 'Project updated successfully');
return response.redirect().toRoute('settings.project.index');
}
}

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: {
type: Boolean,
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>
@ -29,9 +29,18 @@ const props = defineProps({
}">
<div :class="{
'ml-60 lg:ml-0': layoutService.isAsideMobileExpanded,
'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">
<NavBar :class="{ 'ml-60 lg:ml-0': layoutService.isAsideMobileExpanded }" :showBurger="props.showAsideMenu" />
'xl:pl-60': props.showAsideMenu==true,
'pt-14': !props.hasProgressBar,
'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 -->
<template v-if="showAsideMenu">
<AsideMenu />

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

@ -1,6 +1,6 @@
<script lang="ts" setup>
import { usePage } from '@inertiajs/vue3';
import { mdiAccountKey, mdiSquareEditOutline, mdiAlertBoxOutline } from '@mdi/js';
import { Head, usePage } from '@inertiajs/vue3';
import { mdiLicense, mdiCheckCircle, mdiCloseCircle, mdiAlertBoxOutline } from '@mdi/js';
import { computed, ComputedRef } from 'vue';
import LayoutAuthenticated from '@/Layouts/LayoutAuthenticated.vue';
import SectionMain from '@/Components/SectionMain.vue';
@ -9,107 +9,150 @@ import BaseButton from '@/Components/BaseButton.vue';
import CardBox from '@/Components/CardBox.vue';
import BaseButtons from '@/Components/BaseButtons.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 CardBoxModal from '@/Components/CardBoxModal.vue';
// const isModalDangerActive = ref(false);
// const deleteId = ref();
interface License {
id: number;
name: string;
sort_order: number;
active: boolean;
}
defineProps({
const props = defineProps({
licenses: {
type: Object,
default: () => ({}),
type: Array<License>,
default: () => [],
},
// filters: {
// type: Object,
// default: () => ({}),
// },
can: {
type: Object,
default: () => ({}),
},
});
const flash: ComputedRef<any> = computed(() => {
// let test = usePage();
// console.log(test);
return usePage().props.flash;
});
const flash: ComputedRef<any> = computed(() => 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>
<template>
<LayoutAuthenticated>
<Head title="Licenses" />
<SectionMain>
<SectionTitleLineWithButton :icon="mdiAccountKey" title="Licenses" main>
<!-- <BaseButton
v-if="can.create"
:route-name="stardust.route('settings.role.create')"
:icon="mdiPlus"
label="Add"
color="info"
rounded-full
small
/> -->
<SectionTitleLineWithButton :icon="mdiLicense" title="Licenses" main>
<div class="flex items-center gap-3">
<span class="text-sm text-gray-500 dark:text-gray-400 font-medium">
{{ licenseCount }} {{ licenseCount === 1 ? 'license' : 'licenses' }}
</span>
</div>
</SectionTitleLineWithButton>
<NotificationBar v-if="flash.message" color="success" :icon="mdiAlertBoxOutline">
{{ flash.message }}
</NotificationBar>
<CardBox class="mb-6" has-table>
</CardBox>
<CardBox class="mb-6" has-form-data>
<table>
<thead>
<tr>
<th>
<!-- <Sort label="Name" attribute="name" /> -->
Name
</th>
<th>
<!-- <Sort label="Sort Order" attribute="sort_order" /> -->
Sort Order
</th>
<th>Name</th>
<th>Sort Order</th>
<th>Status</th>
<th v-if="can.edit">Actions</th>
</tr>
</thead>
<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">
<!-- <Link
:href="stardust.route('settings.role.show', [role.id])"
class="no-underline hover:underline text-cyan-600 dark:text-cyan-400"
<span
class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium transition-all hover:shadow-md"
:class="getLicenseColor(index)"
>
{{ license.name }}
</Link> -->
{{ license.name }}
</span>
</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 }}
</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 v-if="can.edit" class="before:hidden lg:w-1 whitespace-nowrap">
<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])"
color="warning" :icon="mdiSquareEditOutline" label="deactivate" small />
<BaseButton v-else :route-name="stardust.route('settings.license.up', [license.id])"
color="success" :icon="mdiSquareEditOutline" label="activate" small />
color="warning"
:icon="mdiCloseCircle"
label="Deactivate"
small
/>
<BaseButton
v-else
:route-name="stardust.route('settings.license.up', [license.id])"
color="success"
:icon="mdiCheckCircle"
label="Activate"
small
/>
</BaseButtons>
</td>
</tr>
</tbody>
</table>
<!-- <div class="py-4">
<Pagination v-bind:data="roles.meta" />
</div> -->
</CardBox>
</SectionMain>
</LayoutAuthenticated>

135
resources/js/Pages/Admin/Project/Create.vue Normal file
View file

@ -0,0 +1,135 @@
<script lang="ts" setup>
import { Head, useForm } from '@inertiajs/vue3';
import { mdiFolderPlus, mdiArrowLeftBoldOutline, mdiFormTextarea, mdiContentSave } from '@mdi/js';
import LayoutAuthenticated from '@/Layouts/LayoutAuthenticated.vue';
import SectionMain from '@/Components/SectionMain.vue';
import SectionTitleLineWithButton from '@/Components/SectionTitleLineWithButton.vue';
import CardBox from '@/Components/CardBox.vue';
import FormField from '@/Components/FormField.vue';
import FormControl from '@/Components/FormControl.vue';
import BaseButton from '@/Components/BaseButton.vue';
import BaseButtons from '@/Components/BaseButtons.vue';
import { stardust } from '@eidellev/adonis-stardust/client';
const form = useForm({
label: '',
name: '',
description: '',
});
const submit = async () => {
await form.post(stardust.route('settings.project.store'));
};
</script>
<template>
<LayoutAuthenticated>
<Head title="Create New Project" />
<SectionMain>
<SectionTitleLineWithButton :icon="mdiFolderPlus" title="Create New Project" main>
<BaseButton
:route-name="stardust.route('settings.project.index')"
:icon="mdiArrowLeftBoldOutline"
label="Back"
color="white"
rounded-full
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="e.g., my-awesome-project"
required
:error="form.errors.label"
class="transition-all focus:ring-2 focus:ring-blue-500"
>
<div class="text-red-400 text-sm mt-1" v-if="form.errors.label">
{{ form.errors.label }}
</div>
</FormControl>
</FormField>
<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="Enter a descriptive titel..."
required
:error="form.errors.name"
class="font-mono transition-all focus:ring-2 focus:ring-blue-500"
>
<div class="text-red-400 text-sm mt-1" v-if="form.errors.name">
{{ form.errors.name }}
</div>
</FormControl>
</FormField>
<FormField
label="Description"
help="Optional. Detailed description of the project"
:class="{ 'text-red-400': form.errors.description }"
>
<FormControl
v-model="form.description"
:icon="mdiFormTextarea"
name="description"
type="textarea"
placeholder="Describe what this project is about..."
:error="form.errors.description"
class="transition-all focus:ring-2 focus:ring-blue-500"
>
<div class="text-red-400 text-sm mt-1" v-if="form.errors.description">
{{ form.errors.description }}
</div>
</FormControl>
</FormField>
</div>
<template #footer>
<BaseButtons class="justify-between">
<BaseButton :route-name="stardust.route('settings.project.index')" label="Cancel" color="white" outline />
<BaseButton
type="submit"
color="info"
:icon="mdiContentSave"
label="Create Project"
:class="{ 'opacity-25': form.processing }"
:disabled="form.processing"
class="transition-all hover:shadow-lg"
/>
</BaseButtons>
</template>
</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"
>
<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">
<span class="text-white text-lg">💡</span>
</div>
</div>
<div class="flex-1">
<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 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>
</div>
</CardBox>
</SectionMain>
</LayoutAuthenticated>
</template>

154
resources/js/Pages/Admin/Project/Edit.vue Normal file
View file

@ -0,0 +1,154 @@
<script lang="ts" setup>
import { Head, useForm } from '@inertiajs/vue3';
import { mdiFolderEdit, mdiArrowLeftBoldOutline, mdiFormTextarea, mdiContentSave } from '@mdi/js';
import LayoutAuthenticated from '@/Layouts/LayoutAuthenticated.vue';
import SectionMain from '@/Components/SectionMain.vue';
import SectionTitleLineWithButton from '@/Components/SectionTitleLineWithButton.vue';
import CardBox from '@/Components/CardBox.vue';
import FormField from '@/Components/FormField.vue';
import FormControl from '@/Components/FormControl.vue';
import BaseButton from '@/Components/BaseButton.vue';
import BaseButtons from '@/Components/BaseButtons.vue';
import { stardust } from '@eidellev/adonis-stardust/client';
const props = defineProps({
project: {
type: Object,
required: true,
},
});
const form = useForm({
label: props.project.label,
name: props.project.name,
description: props.project.description,
});
const submit = async () => {
await form.put(stardust.route('settings.project.update', [props.project.id]));
};
</script>
<template>
<LayoutAuthenticated>
<Head :title="`Edit ${project.label}`" />
<SectionMain>
<SectionTitleLineWithButton :icon="mdiFolderEdit" :title="`Edit: ${project.label}`" main>
<BaseButton
:route-name="stardust.route('settings.project.index')"
:icon="mdiArrowLeftBoldOutline"
label="Back"
color="white"
rounded-full
small
/>
</SectionTitleLineWithButton>
<CardBox form @submit.prevent="submit()" class="shadow-lg">
<div class="grid grid-cols-1 gap-6">
<FormField
label="Label"
help="Project label (read-only)"
>
<FormControl
v-model="form.label"
type="text"
:is-read-only=true
class="bg-gray-100 dark:bg-slate-800 cursor-not-allowed opacity-75"
/>
</FormField>
<FormField
label="Name"
help="Required. Project identifier (slug)"
:class="{ 'text-red-400': form.errors.name }"
>
<FormControl
v-model="form.name"
type="text"
placeholder="Enter Name"
required
:error="form.errors.name"
class="font-mono transition-all focus:ring-2 focus:ring-blue-500"
>
<div class="text-red-400 text-sm mt-1" v-if="form.errors.name">
{{ form.errors.name }}
</div>
</FormControl>
</FormField>
<FormField
label="Description"
help="Optional. Detailed description of the project"
:class="{ 'text-red-400': form.errors.description }"
>
<FormControl
v-model="form.description"
:icon="mdiFormTextarea"
name="description"
type="textarea"
placeholder="Enter project description..."
:error="form.errors.description"
class="transition-all focus:ring-2 focus:ring-blue-500"
>
<div class="text-red-400 text-sm mt-1" v-if="form.errors.description">
{{ form.errors.description }}
</div>
</FormControl>
</FormField>
</div>
<template #footer>
<BaseButtons class="justify-between">
<BaseButton
:route-name="stardust.route('settings.project.index')"
label="Cancel"
color="white"
outline
/>
<BaseButton
type="submit"
color="info"
:icon="mdiContentSave"
label="Save Changes"
:class="{ 'opacity-25': form.processing }"
:disabled="form.processing"
class="transition-all hover:shadow-lg"
/>
</BaseButtons>
</template>
</CardBox>
<!-- Project Info Card -->
<CardBox class="mt-6 bg-gradient-to-br from-gray-50 to-gray-100 dark:from-slate-800 dark:to-slate-900">
<div class="flex items-start gap-4">
<div class="flex-shrink-0">
<div class="w-12 h-12 rounded-lg bg-blue-500 dark:bg-blue-600 flex items-center justify-center">
<span class="text-white text-xl font-bold">
{{ project.label.charAt(0).toUpperCase() }}
</span>
</div>
</div>
<div class="flex-1 min-w-0">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-1">
{{ project.label }}
</h3>
<p class="text-sm font-mono text-gray-600 dark:text-gray-400 mb-2">
{{ project.name }}
</p>
<div class="flex items-center gap-4 text-xs text-gray-500 dark:text-gray-500">
<span>
<span class="font-medium">Created:</span>
{{ new Date(project.created_at).toLocaleDateString() }}
</span>
<span>
<span class="font-medium">Updated:</span>
{{ new Date(project.updated_at).toLocaleDateString() }}
</span>
</div>
</div>
</div>
</CardBox>
</SectionMain>
</LayoutAuthenticated>
</template>

182
resources/js/Pages/Admin/Project/Index.vue Normal file
View file

@ -0,0 +1,182 @@
<script setup>
import { Head, Link, useForm, usePage } from '@inertiajs/vue3';
import { mdiFolderMultiple, mdiPlus, mdiSquareEditOutline, mdiTrashCan, mdiAlertBoxOutline } from '@mdi/js';
import { computed, ref } from 'vue';
import LayoutAuthenticated from '@/Layouts/LayoutAuthenticated.vue';
import SectionMain from '@/Components/SectionMain.vue';
import SectionTitleLineWithButton from '@/Components/SectionTitleLineWithButton.vue';
import BaseButton from '@/Components/BaseButton.vue';
import CardBox from '@/Components/CardBox.vue';
import BaseButtons from '@/Components/BaseButtons.vue';
import NotificationBar from '@/Components/NotificationBar.vue';
import CardBoxModal from '@/Components/CardBoxModal.vue';
import { stardust } from '@eidellev/adonis-stardust/client';
const isModalDangerActive = ref(false);
const deleteId = ref();
const props = defineProps({
projects: {
type: Array,
default: () => [],
},
can: {
type: Object,
default: () => ({}),
},
});
const flash = computed(() => usePage().props.flash);
const projectCount = computed(() => props.projects.length);
const formDelete = useForm({});
const destroy = (id) => {
deleteId.value = id;
isModalDangerActive.value = true;
};
const onConfirm = async (id) => {
await formDelete.delete(stardust.route('settings.project.destroy', [id]));
deleteId.value = null;
};
const onCancel = () => {
deleteId.value = null;
};
const truncate = (text, length = 30) => {
if (!text) return '';
return text.length > length ? text.substring(0, length) + '...' : text;
};
const getProjectColor = (index) => {
const colors = [
'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300',
'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300',
'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-300',
'bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-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',
];
return colors[index % colors.length];
};
</script>
<template>
<CardBoxModal
v-model="isModalDangerActive"
:delete-id="deleteId"
large-title="Delete Project"
button="danger"
button-label="Delete"
has-cancel
@confirm="onConfirm"
@cancel="onCancel"
>
<p>Are you sure you want to delete this project?</p>
<p>This action cannot be undone.</p>
</CardBoxModal>
<LayoutAuthenticated>
<Head title="Projects" />
<SectionMain>
<SectionTitleLineWithButton :icon="mdiFolderMultiple" title="Projects" main>
<div class="flex items-center gap-3">
<span class="text-sm text-gray-500 dark:text-gray-400 font-medium">
{{ projectCount }} {{ projectCount === 1 ? 'project' : 'projects' }}
</span>
<BaseButton
v-if="can.create"
:route-name="stardust.route('settings.project.create')"
:icon="mdiPlus"
label="New Project"
color="info"
rounded-full
small
class="shadow-md hover:shadow-lg transition-shadow"
/>
</div>
</SectionTitleLineWithButton>
<NotificationBar v-if="flash.message" color="success" :icon="mdiAlertBoxOutline">
{{ flash.message }}
</NotificationBar>
<CardBox class="mb-6" has-table>
<table>
<thead>
<tr>
<th>Label</th>
<th>Name</th>
<th v-if="can.edit || can.delete">Actions</th>
</tr>
</thead>
<tbody>
<tr v-if="projects.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">
<mdiFolderMultiple class="w-16 h-16 mb-4 opacity-50" />
<p class="text-lg font-medium mb-2">No projects yet</p>
<p class="text-sm mb-4">Get started by creating your first project</p>
<BaseButton
v-if="can.create"
:route-name="stardust.route('settings.project.create')"
:icon="mdiPlus"
label="Create Project"
color="info"
small
/>
</div>
</td>
</tr>
<tr v-for="(project, index) in projects" :key="project.id" class="hover:bg-gray-50 dark:hover:bg-slate-800 transition-colors">
<td data-label="Label">
<!-- <Link
:href="stardust.route('settings.project.show', [project.id])"
class="no-underline hover:underline"
> -->
<span
class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium transition-all hover:shadow-md"
:class="getProjectColor(index)"
:title="project.label"
>
{{ truncate(project.label, 30) }}
</span>
<!-- </Link> -->
</td>
<td data-label="Name">
<span
class="text-gray-700 dark:text-gray-300 font-mono text-sm"
:title="project.name"
>
{{ truncate(project.name, 40) }}
</span>
</td>
<td v-if="can.edit || can.delete" class="before:hidden lg:w-1 whitespace-nowrap">
<BaseButtons type="justify-start lg:justify-end" no-wrap>
<BaseButton
v-if="can.edit"
:route-name="stardust.route('settings.project.edit', [project.id])"
color="info"
:icon="mdiSquareEditOutline"
small
/>
<BaseButton
v-if="can.delete"
color="danger"
:icon="mdiTrashCan"
small
@click="destroy(project.id)"
/>
</BaseButtons>
</td>
</tr>
</tbody>
</table>
</CardBox>
</SectionMain>
</LayoutAuthenticated>
</template>

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 { 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 SectionMain from '@/Components/SectionMain.vue';
import SectionTitleLineWithButton from '@/Components/SectionTitleLineWithButton.vue';
@ -9,18 +9,23 @@ import BaseButton from '@/Components/BaseButton.vue';
import CardBox from '@/Components/CardBox.vue';
import BaseButtons from '@/Components/BaseButtons.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 { 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 deleteId = ref();
const props = defineProps({
roles: {
type: Object,
default: () => ({}),
type: Array<Role>,
default: () => [],
},
filters: {
type: Object,
@ -32,88 +37,89 @@ const props = defineProps({
},
});
const flash = computed(() => {
// let test = usePage();
// console.log(test);
return usePage().props.flash;
});
const flash: ComputedRef<any> = computed(() => usePage().props.flash);
const form = useForm({
search: props.filters.search,
});
// const form = useForm({
// search: props.filters.search,
// });
const roleCount = computed(() => props.roles.length);
const formDelete = useForm({});
const destroy = (id, e) => {
// console.log(id);
const destroy = (id: number) => {
deleteId.value = id;
isModalDangerActive.value = true;
};
const onConfirm = async (id) => {
// let id = 6;
const onConfirm = async (id: number) => {
await formDelete.delete(stardust.route('settings.role.destroy', [id]));
deleteId.value = null;
};
const onCancel = (id) => {
// console.log('cancel');
const onCancel = () => {
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>
<template>
<CardBoxModal
v-model="isModalDangerActive"
:delete-id="deleteId"
large-title="Please confirm"
large-title="Delete Role"
button="danger"
button-label="Delete"
has-cancel
v-on:confirm="onConfirm"
v-on:cancel="onCancel"
@confirm="onConfirm"
@cancel="onCancel"
>
<p>Lorem ipsum dolor sit amet <b>adipiscing elit</b></p>
<p>This is sample modal</p>
<p>Are you sure you want to delete this role?</p>
<p>This action cannot be undone.</p>
</CardBoxModal>
<LayoutAuthenticated>
<Head title="Roles" />
<SectionMain>
<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
v-if="can.create"
:route-name="stardust.route('settings.role.create')"
:icon="mdiPlus"
label="Add"
label="New Role"
color="info"
rounded-full
small
class="shadow-md hover:shadow-lg transition-shadow"
/>
</div>
</SectionTitleLineWithButton>
<NotificationBar v-if="flash.message" color="success" :icon="mdiAlertBoxOutline">
{{ flash.message }}
</NotificationBar>
<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>
<thead>
<tr>
@ -128,17 +134,42 @@ const onCancel = (id) => {
</thead>
<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">
<Link
:href="stardust.route('settings.role.show', [role.id])"
class="no-underline hover:underline text-cyan-600 dark:text-cyan-400"
<Link :href="stardust.route('settings.role.show', [role.id])" class="no-underline hover:underline">
<span
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 }}
</span>
</Link>
</td>
<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 v-if="can.edit || can.delete" class="before:hidden lg:w-1 whitespace-nowrap">
<BaseButtons type="justify-start lg:justify-end" no-wrap>
@ -149,21 +180,12 @@ const onCancel = (id) => {
:icon="mdiSquareEditOutline"
small
/>
<!-- <BaseButton
v-if="can.delete"
color="danger"
:icon="mdiTrashCan"
small
@click="($event) => destroy(role.id, $event)"
/> -->
<BaseButton v-if="can.delete" color="danger" :icon="mdiTrashCan" small @click="destroy(role.id)" />
</BaseButtons>
</td>
</tr>
</tbody>
</table>
<!-- <div class="py-4">
<Pagination v-bind:data="roles.meta" />
</div> -->
</CardBox>
</SectionMain>
</LayoutAuthenticated>

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

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

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

@ -1,8 +1,36 @@
<!-- 1. Add progress indicator at the top -->
<template>
<LayoutAuthenticated>
<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>
<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
:route-name="stardust.route('dataset.list')"
:icon="mdiArrowLeftBoldOutline"
@ -11,15 +39,17 @@
rounded-full
small
/>
</div>
</SectionTitleLineWithButton>
<!-- Success/Error Notifications -->
<NotificationBar v-if="flash.message" color="success" :icon="mdiAlertBoxOutline">
{{ flash.message }}
</NotificationBar>
<FormValidationErrors v-bind:errors="errors" />
<!-- @auto-save="submitAlternative" -->
<CardBox :form="true">
<!-- Main Form with Sections -->
<CardBox :form="true" class="shadow-lg">
<UnsavedChangesWarning
:show="hasUnsavedChanges"
:changes-summary="getChangesSummary()"
@ -29,19 +59,26 @@
:auto-save-delay="30"
@save="submitAlternative"
/>
<div class="mb-4">
<div class="flex flex-col md:flex-row">
<!-- (1) language field -->
<!-- Collapsible Sections for Better Organization -->
<!-- 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
label="Language *"
help="required: select dataset main language"
:class="{ 'text-red-400': form.errors.language }"
class="w-full flex-1"
>
<FormControl
required
v-model="form.language"
:type="'select'"
type="select"
placeholder="[Enter Language]"
:errors="form.errors.language"
:options="{ de: 'de', en: 'en' }"
@ -51,35 +88,9 @@
</div>
</FormControl>
</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 -->
<FormField
label="Dataset Type *"
help="required: dataset type"
:class="{ 'text-red-400': form.errors.type }"
class="w-full mx-2 flex-1"
>
<FormField label="Dataset Type *" help="required: dataset type" :class="{ 'text-red-400': form.errors.type }">
<FormControl
required
v-model="form.type"
@ -115,17 +126,40 @@
</FormControl>
</FormField>
</div>
</div>
<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 -->
<CardBox
class="mb-6 shadow"
:has-form-data="false"
title="Titles"
class="ml-10 shadow-md"
title="Main & Additional Titles"
:icon="mdiFinance"
:header-icon="mdiPlusCircle"
v-on:header-icon-click="addTitle()"
@header-icon-click="addTitle()"
>
<div class="flex flex-col md:flex-row">
<FormField
@ -238,15 +272,23 @@
</tbody>
</table>
</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 -->
<CardBox
class="mb-6 shadow"
:has-form-data="false"
title="Descriptions"
class="ml-10 shadow-md"
title="Abstract & Additional Descriptions"
:icon="mdiFinance"
:header-icon="mdiPlusCircle"
v-on:header-icon-click="addDescription()"
@header-icon-click="addDescription()"
>
<div class="flex flex-col md:flex-row">
<FormField
@ -359,16 +401,33 @@
</tbody>
</table>
</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 -->
<CardBox
class="mb-6 shadow"
class="shadow-md"
has-table
title="Creators"
:icon="mdiBookOpenPageVariant"
: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">
<span>Add creators by searching existing persons or manually adding new ones.</span>
<BaseIcon
@ -398,7 +457,12 @@
/>
</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)">
{{ form.errors.authors.join(', ') }}
</div>
@ -406,12 +470,12 @@
<!-- (8) contributors -->
<CardBox
class="mb-6 shadow"
class="shadow-md"
has-table
title="Contributors"
:icon="mdiBookOpenPageVariant"
: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">
<span>Add contributors by searching existing persons or manually adding new ones.</span>
@ -440,8 +504,21 @@
{{ form.errors.contributors.join(', ') }}
</div>
</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 -->
<FormField
label="Project.."
@ -462,6 +539,7 @@
</div>
</FormControl>
</FormField>
<!-- (10) embargo_date -->
<FormField
label="Embargo Date.."
@ -482,86 +560,32 @@
</FormField>
</div>
<BaseDivider />
<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>
<!-- Keywords -->
<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
title="Dataset References"
:icon="mdiEarthPlus"
:header-icon="mdiPlusCircle"
v-on:header-icon-click="addReference"
@header-icon-click="addReference"
>
<!-- Message when no references exist -->
<div v-if="form.references.length === 0" class="text-center py-4">
@ -610,7 +634,10 @@
:options="referenceIdentifierTypes"
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(', ') }}
</div>
</FormControl>
@ -698,79 +725,182 @@
</ul>
</div>
</CardBox>
</div>
</div>
<BaseDivider />
<CardBox
class="mb-6 shadow"
has-table
title="Dataset Keywords"
:icon="mdiEarthPlus"
:header-icon="mdiPlusCircle"
v-on: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"
<!-- Section 7: Geographic Coverage -->
<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-teal-500 text-white flex items-center justify-center text-sm">7</span>
Geographic Coverage
</h2>
<div class="ml-10">
<MapComponent
v-if="form.coverage"
:mapOptions="mapOptions"
:baseMaps="baseMaps"
:fitBounds="fitBounds"
:coverage="form.coverage"
:mapId="mapId"
class="mb-4 rounded-lg overflow-hidden shadow-md"
/>
</CardBox>
</div>
<div class="mb-4">
<!-- <label for="project" class="block text-gray-700 font-bold mb-2">Project:</label>
<select
id="project"
class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
v-model="dataset.project_id"
<div class="flex flex-col md:flex-row ml-10">
<!-- 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"
>
<option v-for="project in projects" :key="project.id" :value="project.id" class="block px-4 py-2 text-gray-700">
{{ project.label }}
</option>
</select> -->
<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>
</div>
<FileUploadComponent v-model:files="form.files" v-model:filesToDelete="form.filesToDelete" :showClearButton="false">
</FileUploadComponent>
<BaseDivider />
<!-- 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'])">
{{ form.errors['files'].join(', ') }}
</div>
</div>
</div>
<!-- Enhanced Footer with Action Buttons -->
<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>
<BaseButton
v-if="can.edit"
@click.stop="submitAlternative"
:disabled="form.processing"
label="Save"
label="Save Changes"
color="info"
:icon="mdiDisc"
:class="{ 'opacity-25': form.processing }"
small
>
</BaseButton>
class="shadow-md hover:shadow-lg transition-shadow"
/>
<BaseButton
v-if="can.edit"
:route-name="stardust.route('dataset.release', [dataset.id])"
color="info"
color="success"
:icon="mdiLockOpen"
:label="'Release'"
small
label="Release"
: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>
</div>
</template>
</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">
<svg class="animate-spin h-12 w-12 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<!-- Enhanced Loading Spinner Overlay -->
<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>
<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>
<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>
</SectionMain>
</LayoutAuthenticated>
@ -1499,25 +1629,6 @@ const getChangesSummary = () => {
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>
<style scoped>

8
resources/js/menu.ts
View file

@ -12,7 +12,7 @@ import {
mdiShieldCrownOutline,
mdiLicense,
mdiFileDocument,
mdiLibraryShelves
mdiFolderMultiple,
} from '@mdi/js';
export default [
@ -92,6 +92,12 @@ export default [
label: 'Licenses',
roles: ['administrator'],
},
{
route: 'settings.project.index',
icon: mdiFolderMultiple,
label: 'Projects',
roles: ['administrator'],
},
],
},

14
start/routes.ts
View file

@ -34,6 +34,7 @@ import DatasetController from '#app/Controllers/Http/Submitter/DatasetController
import PersonController from '#app/Controllers/Http/Submitter/PersonController';
import EditorDatasetController from '#app/Controllers/Http/Editor/DatasetController';
import ReviewerDatasetController from '#app/Controllers/Http/Reviewer/DatasetController';
import ProjectsController from '#app/controllers/projects_controller';
import './routes/api.js';
import { middleware } from './kernel.js';
import db from '@adonisjs/lucid/services/db'; // Import the DB service
@ -234,6 +235,19 @@ router
.where('id', router.matchers.number())
.use(middleware.can(['settings']));
// Project routes
// List all projects
router.get('/projects', [ProjectsController, 'index']).as('project.index');
// Show create form
router.get('/projects/create', [ProjectsController, 'create']).as('project.create').use(middleware.can(['settings']));;
// Store new project
router.post('/projects', [ProjectsController, 'store']).as('project.store').use(middleware.can(['settings']));;
// Show edit form
router.get('/projects/:id/edit',[ProjectsController, 'edit']).as('project.edit').use(middleware.can(['settings']));;
// Update project
router.put('/projects/:id',[ProjectsController, 'update']).as('project.update').use(middleware.can(['settings']));;
// Mimetype routes
router.get('/mimetype', [MimetypeController, 'index']).as('mimetype.index');
router