barmar/tethys.backend
1
0
Fork 0
forked from geolba/tethys.backend
Code Pull requests Activity

- add methods for releasing datasets from submitter

Browse source 
- npm updates
- side menu with child items
- flash messages via HttpContext response (extended via macro)
This commit is contained in:
Kaimbacher 2023-06-27 18:23:18 +02:00
parent e0ff71b117
commit f403c3109f
37 changed files with 1020 additions and 482 deletions
Download patch file Download diff file Expand all files Collapse all files

13
resources/js/Components/AsideMenuItem.vue
View file

@ -31,7 +31,7 @@ const hasColor = computed(() => props.item && props.item.color);
const isDropdownActive = ref(false);
const componentClass = computed(() => [
props.isDropdownList ? 'py-3 px-6 text-sm' : 'py-3 px-6',
props.isDropdownList ? 'py-3 px-6 text-sm font-semibold' : 'py-3 px-6',
hasColor.value ? getButtonColor(props.item.color, false, true) : styleService.asideMenuItemStyle,
]);
@ -76,18 +76,19 @@ const is = computed(() => {
<!-- <component :is="itemHref ? 'div' : Link" :href="itemHref ? itemHref : itemRoute" -->
<component :is="is" :href="itemRoute ? stardust.route(props.item.route) : props.item.href"
class="flex cursor-pointer dark:text-slate-300 dark:hover:text-white" :class="componentClass"
@click="menuClick" v-bind:target="props.item.target ?? null">
@click.prevent="menuClick" v-bind:target="props.item.target ?? null">
<BaseIcon v-if="item.icon" :path="item.icon" class="flex-none" :class="activeInactiveStyle" w="w-16"
:size="18" />
<span class="grow text-ellipsis line-clamp-1" :class="activeInactiveStyle">
{{ item.label }}
</span>
<!-- <BaseIcon v-if="hasDropdown" :path="isDropdownActive ? mdiMinus : mdiPlus" class="flex-none"
:class="activeInactiveStyle" w="w-12" /> -->
<!-- plus icon for expanding sub menu -->
<BaseIcon v-if="hasDropdown" :path="isDropdownActive ? mdiMinus : mdiPlus" class="flex-none"
:class="activeInactiveStyle" w="w-12" @click.prevent="menuClick"/>
</component>
<!-- <AsideMenuList v-if="hasDropdown" :menu="item.children" :class="[
<AsideMenuList v-if="hasDropdown" :menu="item.children" :class="[
styleService.asideMenuDropdownStyle,
isDropdownActive ? 'block dark:bg-slate-800/50' : 'hidden',
]" is-dropdown-list /> -->
]" is-dropdown-list />
</li>
</template>

2
resources/js/Components/AsideMenuLayer.vue
View file

@ -55,7 +55,7 @@ const menuClick = (event, item) => {
</div>
<div :class="styleStore.darkMode ? 'aside-scrollbars-[slate]' : styleStore.asideScrollbarsStyle"
class="flex-1 overflow-y-auto overflow-x-hidden">
<AsideMenuList v-bind:menu="menu" @menu-click="menuClick" />
<AsideMenuList v-bind:menu="menu" @menu-click="menuClick" />
</div>
<!-- <p class="menu-label">About</p>> -->
<ul class="menu-list">

4
resources/js/Components/AsideMenuList.vue
View file

@ -1,4 +1,4 @@
<script setup>
<script setup lang="ts">
import AsideMenuItem from '@/Components/AsideMenuItem.vue';
defineProps({
@ -22,7 +22,7 @@ const menuClick = (event, item) => {
v-for="(item, index) in menu"
:key="index"
v-bind:item="item"
:is-dropdown-list="isDropdownList"
:is-dropdown-list="item.children?.length > 0"
@menu-click="menuClick"
/>
</ul>

84
resources/js/Components/Charts/chart.config.js
View file

@ -1,54 +1,50 @@
export const chartColors = {
default: {
primary: '#00D1B2',
info: '#209CEE',
danger: '#FF3860'
}
}
default: {
primary: '#00D1B2',
info: '#209CEE',
danger: '#FF3860',
},
};
const randomChartData = n => {
const data = []
const randomChartData = (n) => {
const data = [];
for (let i = 0; i < n; i++) {
data.push(Math.round(Math.random() * 200))
}
for (let i = 0; i < n; i++) {
data.push(Math.round(Math.random() * 200));
}
return data
}
return data;
};
const datasetObject = (color, points) => {
return {
fill: false,
borderColor: chartColors.default[color],
borderWidth: 2,
borderDash: [],
borderDashOffset: 0.0,
pointBackgroundColor: chartColors.default[color],
pointBorderColor: 'rgba(255,255,255,0)',
pointHoverBackgroundColor: chartColors.default[color],
pointBorderWidth: 20,
pointHoverRadius: 4,
pointHoverBorderWidth: 15,
pointRadius: 4,
data: randomChartData(points),
tension: 0.5,
cubicInterpolationMode: 'default'
}
}
return {
fill: false,
borderColor: chartColors.default[color],
borderWidth: 2,
borderDash: [],
borderDashOffset: 0.0,
pointBackgroundColor: chartColors.default[color],
pointBorderColor: 'rgba(255,255,255,0)',
pointHoverBackgroundColor: chartColors.default[color],
pointBorderWidth: 20,
pointHoverRadius: 4,
pointHoverBorderWidth: 15,
pointRadius: 4,
data: randomChartData(points),
tension: 0.5,
cubicInterpolationMode: 'default',
};
};
export const sampleChartData = (points = 9) => {
const labels = []
const labels = [];
for (let i = 1; i <= points; i++) {
labels.push(`0${i}`)
}
for (let i = 1; i <= points; i++) {
labels.push(`0${i}`);
}
return {
labels,
datasets: [
datasetObject('primary', points),
datasetObject('info', points),
datasetObject('danger', points)
]
}
}
return {
labels,
datasets: [datasetObject('primary', points), datasetObject('info', points), datasetObject('danger', points)],
};
};

20
resources/js/Components/Map/Control.ts
View file

@ -3,7 +3,6 @@ import { EventEmitter } from './EventEmitter';
import type { Map } from 'leaflet/src/map/index';
export abstract class Control<T> extends EventEmitter<T> {
// @section
// @aka Control options
options = {
@ -16,8 +15,8 @@ export abstract class Control<T> extends EventEmitter<T> {
// super();
// if (!(this instanceof Control)) {
// throw new TypeError("Control constructor cannot be called as a function.");
// }
// // properties
// }
// // properties
// // util.setOptions(this, defaults);
// }
@ -30,23 +29,22 @@ export abstract class Control<T> extends EventEmitter<T> {
}
abstract onRemove(map): void;
abstract onAdd(map: any) : HTMLElement;
abstract onAdd(map: any): HTMLElement;
addTo(map: Map): Control<T> {
this._map = map;
let container = this._container = this.onAdd(map);
let pos = this.getPosition();//"topright"
let container = (this._container = this.onAdd(map));
let pos = this.getPosition(); //"topright"
let corner = map.controlCorners[pos];
if (container) {
// $(container).addClass('gba-control');
container.classList.add("gba-control");
container.classList.add('gba-control');
if (pos.indexOf('bottom') !== -1) {
corner.insertBefore(container, corner.firstChild);
}
else {
} else {
corner.appendChild(container);
}
}
@ -65,6 +63,4 @@ export abstract class Control<T> extends EventEmitter<T> {
}
return this;
}
}

3
resources/js/Components/Map/LayerOptions.ts
View file

@ -10,5 +10,4 @@ export interface LayerOptions {
// export type LayerMap = Map<string, LayerOptions>;
export class LayerMap extends Map<string, LayerOptions> {
}
export class LayerMap extends Map<string, LayerOptions> {}

18
resources/js/Components/Map/utilities.ts
View file

@ -1,12 +1,12 @@
// extend an object with properties of one or more other objects
export function extend(dest) {
var i, j, len, src;
var i, j, len, src;
for (j = 1, len = arguments.length; j < len; j++) {
src = arguments[j];
for (i in src) {
dest[i] = src[i];
}
}
return dest;
}
for (j = 1, len = arguments.length; j < len; j++) {
src = arguments[j];
for (i in src) {
dest[i] = src[i];
}
}
return dest;
}

19
resources/js/Components/TablePersons.vue
View file

@ -32,9 +32,9 @@ const items = computed({
// setter
set(value) {
// Note: we are using destructuring assignment syntax here.
props.persons.length = 0;
props.persons.push(...value);
props.persons.length = 0;
props.persons.push(...value);
},
});
@ -51,9 +51,9 @@ const itemsPaginated = computed({
// setter
set(value) {
// Note: we are using destructuring assignment syntax here.
props.persons.length = 0;
props.persons.push(...value);
props.persons.length = 0;
props.persons.push(...value);
},
});
@ -118,13 +118,13 @@ const removeAuthor = (key) => {
<thead>
<tr>
<!-- <th v-if="checkable" /> -->
<th scope="col">ID</th>
<th scope="col">Sort</th>
<th class="hidden lg:table-cell"></th>
<th>Name</th>
<th>Email</th>
<!-- <th>Name Type</th> -->
<!-- <th>Progress</th> -->
<th>Created</th>
<!-- <th>Created</th> -->
<th />
</tr>
</thead>
@ -155,9 +155,6 @@ const removeAuthor = (key) => {
{{ client.progress }}
</progress>
</td> -->
<td data-label="Created" class="lg:w-1 whitespace-nowrap">
<small class="text-gray-500 dark:text-slate-400" :title="element.created_at">{{ element.created_at }}</small>
</td>
<td class="before:hidden lg:w-1 whitespace-nowrap">
<BaseButtons type="justify-start lg:justify-end" no-wrap>
<!-- <BaseButton color="info" :icon="mdiEye" small @click="isModalActive = true" /> -->

223
resources/js/Pages/Admin/User/AccountInfo.vue
View file

@ -3,14 +3,14 @@
import { useForm } from '@inertiajs/vue3';
// import { reactive } from 'vue';
import {
mdiAccount,
mdiAccountCircle,
mdiLock,
mdiMail,
mdiAsterisk,
mdiFormTextboxPassword,
mdiArrowLeftBoldOutline,
// mdiAlertBoxOutline,
mdiAccount,
mdiAccountCircle,
mdiLock,
mdiMail,
mdiAsterisk,
mdiFormTextboxPassword,
mdiArrowLeftBoldOutline,
// mdiAlertBoxOutline,
} from '@mdi/js';
import SectionMain from '@/Components/SectionMain.vue';
import CardBox from '@/Components/CardBox.vue';
@ -26,29 +26,29 @@ import { stardust } from '@eidellev/adonis-stardust/client';
// import { Inertia } from '@inertiajs/inertia';
const props = defineProps({
// user will be returned from controller action
user: {
type: Object,
default: () => ({}),
},
errors: {
type: Object,
default: () => ({}),
},
// user will be returned from controller action
user: {
type: Object,
default: () => ({}),
},
errors: {
type: Object,
default: () => ({}),
},
});
const profileForm = useForm({
login: props.user.login,
email: props.user.email,
login: props.user.login,
email: props.user.email,
});
const profileSubmit = async () => {
await profileForm.post(stardust.route('admin.account.info.store', [props.user.id]));
};
const passwordForm = useForm({
old_password: "",
new_password: "",
confirm_password: "",
old_password: '',
new_password: '',
confirm_password: '',
});
const passwordSubmit = async () => {
await passwordForm.post(stardust.route('admin.account.info.store'), {
@ -56,97 +56,128 @@ const passwordSubmit = async () => {
onSuccess: (resp) => {
console.log(resp);
passwordForm.reset();
}
},
});
};
</script>
<template>
<LayoutAuthenticated>
<SectionMain>
<SectionTitleLineWithButton :icon="mdiAccount" title="Profile" main>
<BaseButton :route-name="stardust.route('dashboard')" :icon="mdiArrowLeftBoldOutline" label="Back" color="white"
rounded-full small />
</SectionTitleLineWithButton>
<LayoutAuthenticated>
<SectionMain>
<SectionTitleLineWithButton :icon="mdiAccount" title="Profile" main>
<BaseButton
:route-name="stardust.route('dashboard')"
:icon="mdiArrowLeftBoldOutline"
label="Back"
color="white"
rounded-full
small
/>
</SectionTitleLineWithButton>
<!-- <NotificationBar v-if="$page.props.flash.message" color="success" :icon="mdiAlertBoxOutline">
<!-- <NotificationBar v-if="$page.props.flash.message" color="success" :icon="mdiAlertBoxOutline">
{{ $page.props.flash.message }}
</NotificationBar> -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
<!-- password form -->
<!-- <CardBox title="Edit Profile" :icon="mdiAccountCircle" form @submit.prevent="profileForm.post(route('admin.account.info.store'))"> -->
<CardBox title="Edit Profile" :icon="mdiAccountCircle" form @submit.prevent="profileSubmit()">
<FormField label="Login" help="Required. Your login name" :class="{ 'text-red-400': errors.login }">
<FormControl v-model="profileForm.login" v-bind:icon="mdiAccount" name="login" required :error="errors.login">
<div class="text-red-400 text-sm" v-if="errors.login">
{{ errors.login }}
</div>
</FormControl>
</FormField>
<FormField label="Email" help="Required. Your e-mail" :class="{ 'text-red-400': errors.email }">
<FormControl v-model="profileForm.email" :icon="mdiMail" type="email" name="email" required :error="errors.email">
<div class="text-red-400 text-sm" v-if="errors.email">
{{ errors.email }}
</div>
</FormControl>
</FormField>
<!-- password form -->
<!-- <CardBox title="Edit Profile" :icon="mdiAccountCircle" form @submit.prevent="profileForm.post(route('admin.account.info.store'))"> -->
<CardBox title="Edit Profile" :icon="mdiAccountCircle" form @submit.prevent="profileSubmit()">
<FormField label="Login" help="Required. Your login name" :class="{ 'text-red-400': errors.login }">
<FormControl v-model="profileForm.login" v-bind:icon="mdiAccount" name="login" required :error="errors.login">
<div class="text-red-400 text-sm" v-if="errors.login">
{{ errors.login }}
</div>
</FormControl>
</FormField>
<FormField label="Email" help="Required. Your e-mail" :class="{ 'text-red-400': errors.email }">
<FormControl v-model="profileForm.email" :icon="mdiMail" type="email" name="email" required
:error="errors.email">
<div class="text-red-400 text-sm" v-if="errors.email">
{{ errors.email }}
</div>
</FormControl>
</FormField>
<template #footer>
<BaseButtons>
<BaseButton color="info" type="submit" label="Submit" />
</BaseButtons>
</template>
</CardBox>
<template #footer>
<BaseButtons>
<BaseButton color="info" type="submit" label="Submit" />
</BaseButtons>
</template>
</CardBox>
<!-- password form -->
<!-- <CardBox title="Change Password" :icon="mdiLock" form @submit.prevent="passwordForm.post(route('admin.account.password.store'), {
<!-- password form -->
<!-- <CardBox title="Change Password" :icon="mdiLock" form @submit.prevent="passwordForm.post(route('admin.account.password.store'), {
preserveScroll: true,
onSuccess: () => passwordForm.reset(),
})
"> -->
<CardBox title="Change Password" :icon="mdiLock" form @submit.prevent="passwordSubmit()">
<FormField label="Current password" help="Required. Your current password"
:class="{ 'text-red-400': passwordForm.errors.old_password }">
<FormControl v-model="passwordForm.old_password" :icon="mdiAsterisk" name="old_password" type="password"
required :error="passwordForm.errors.old_password">
<div class="text-red-400 text-sm" v-if="passwordForm.errors.old_password">
{{ passwordForm.errors.old_password }}
</div>
</FormControl>
</FormField>
<CardBox title="Change Password" :icon="mdiLock" form @submit.prevent="passwordSubmit()">
<FormField
label="Current password"
help="Required. Your current password"
:class="{ 'text-red-400': passwordForm.errors.old_password }"
>
<FormControl
v-model="passwordForm.old_password"
:icon="mdiAsterisk"
name="old_password"
type="password"
required
:error="passwordForm.errors.old_password"
>
<div class="text-red-400 text-sm" v-if="passwordForm.errors.old_password">
{{ passwordForm.errors.old_password }}
</div>
</FormControl>
</FormField>
<BaseDivider />
<BaseDivider />
<FormField label="New password" help="Required. New password" :class="{ 'text-red-400': passwordForm.errors.new_password }">
<FormControl v-model="passwordForm.new_password" :icon="mdiFormTextboxPassword" name="new_password"
type="password" required :error="passwordForm.errors.new_password">
<div class="text-red-400 text-sm" v-if="passwordForm.errors.new_password">
{{ passwordForm.errors.new_password }}
</div>
</FormControl>
</FormField>
<FormField
label="New password"
help="Required. New password"
:class="{ 'text-red-400': passwordForm.errors.new_password }"
>
<FormControl
v-model="passwordForm.new_password"
:icon="mdiFormTextboxPassword"
name="new_password"
type="password"
required
:error="passwordForm.errors.new_password"
>
<div class="text-red-400 text-sm" v-if="passwordForm.errors.new_password">
{{ passwordForm.errors.new_password }}
</div>
</FormControl>
</FormField>
<FormField label="Confirm password" help="Required. New password one more time"
:class="{ 'text-red-400': passwordForm.errors.confirm_password }">
<FormControl v-model="passwordForm.confirm_password" :icon="mdiFormTextboxPassword" name="confirm_password"
type="password" required :error="passwordForm.errors.confirm_password">
<div class="text-red-400 text-sm" v-if="passwordForm.errors.confirm_password">
{{ passwordForm.errors.confirm_password }}
</div>
</FormControl>
</FormField>
<FormField
label="Confirm password"
help="Required. New password one more time"
:class="{ 'text-red-400': passwordForm.errors.confirm_password }"
>
<FormControl
v-model="passwordForm.confirm_password"
:icon="mdiFormTextboxPassword"
name="confirm_password"
type="password"
required
:error="passwordForm.errors.confirm_password"
>
<div class="text-red-400 text-sm" v-if="passwordForm.errors.confirm_password">
{{ passwordForm.errors.confirm_password }}
</div>
</FormControl>
</FormField>
<template #footer>
<BaseButtons>
<BaseButton type="submit" color="info" label="Submit" />
</BaseButtons>
</template>
</CardBox>
</div>
</SectionMain>
</LayoutAuthenticated>
<template #footer>
<BaseButtons>
<BaseButton type="submit" color="info" label="Submit" />
</BaseButtons>
</template>
</CardBox>
</div>
</SectionMain>
</LayoutAuthenticated>
</template>

141
resources/js/Pages/Submitter/Dataset/Index.vue Normal file
View file

@ -0,0 +1,141 @@
<script setup lang="ts">
// import { Head, Link, useForm, usePage } from '@inertiajs/inertia-vue3';
import { Head, usePage } from '@inertiajs/vue3';
import { ComputedRef } from 'vue';
import { mdiSquareEditOutline, mdiTrashCan, mdiAlertBoxOutline } from '@mdi/js';
import { computed } 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 Pagination from '@/Components/Admin/Pagination.vue';
// import Sort from '@/Components/Admin/Sort.vue';
import { stardust } from '@eidellev/adonis-stardust/client';
const props = defineProps({
datasets: {
type: Object,
default: () => ({}),
},
filters: {
type: Object,
default: () => ({}),
},
can: {
type: Object,
default: () => ({}),
},
// user: {
// type: Object,
// default: () => ({}),
// }
});
// const search = computed(() => {
// return props.filters.search;
// });
const flash: ComputedRef<any> = computed(() => {
// let test = usePage();
// console.log(test);
return usePage().props.flash;
});
// const form = useForm({
// search: props.filters.search,
// });
// const formDelete = useForm({});
// async function destroy(id) {
// const destroy = async (id) => {
// // if (confirm('Are you sure you want to delete?')) {
// // await formDelete.delete(stardust.route('dataset.destroy', [id]));
// // }
// };
</script>
<template>
<LayoutAuthenticated>
<Head title="Submit Dataset" />
<SectionMain>
<NotificationBar v-if="flash.message" color="success" :icon="mdiAlertBoxOutline">
{{ flash.message }}
</NotificationBar>
<!-- table -->
<CardBox class="mb-6" has-table>
<table>
<thead>
<tr>
<th>
<!-- <Sort label="Dataset Title" attribute="title" :search="form.search" /> -->
Dataset Title
</th>
<th>
<!-- <Sort label="Email" attribute="email" :search="form.search" /> -->
<th>Server State</th>
</th>
<th>Date of last modification</th>
<th v-if="can.edit || can.delete">Actions</th>
</tr>
</thead>
<tbody>
<tr v-for="dataset in props.datasets.data" :key="dataset.id">
<td data-label="Login">
<!-- <Link v-bind:href="stardust.route('user.show', [user.id])"
class="no-underline hover:underline text-cyan-600 dark:text-cyan-400">
{{ user.login }}
</Link> -->
<!-- {{ user.id }} -->
{{ dataset.main_title }}
</td>
<td>
{{ dataset.server_state }}
</td>
<td data-label="Created" class="lg:w-1 whitespace-nowrap">
<small class="text-gray-500 dark:text-slate-400" :title="dataset.server_date_modified">{{ dataset.updated_at }}</small>
</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>
<!-- release created dataset -->
<BaseButton
v-if="can.delete && (dataset.server_state === 'inprogress' || dataset.server_state === 'rejected_editor')"
:route-name="stardust.route('dataset.release', [dataset.id])"
color="info"
:icon="mdiSquareEditOutline"
:label="'Release'"
small
/>
<!-- @click="destroy(dataset.id)" -->
<BaseButton v-if="can.delete" color="danger" :icon="mdiTrashCan" small />
</BaseButtons>
</td>
</tr>
</tbody>
</table>
<div class="py-4">
<Pagination v-bind:data="datasets.meta" />
<!-- <ul>
<li>
<a href="{{ users.page == 1 ? '#' : '?page=' + (users.page - 1) }}">Previous</a>
</li>
@each(page in ???)
<li>
<a href="?page={{ page }}">{{ page }}</a>
</li>
@endeach
<li>
<a href="{{ users.lastPage == users.page ? '#' : '?page=' + (users.page + 1) }}">Next</a>
</li>
</ul> -->
</div>
</CardBox>
</SectionMain>
</LayoutAuthenticated>
</template>

131
resources/js/Pages/Submitter/Dataset/Release.vue Normal file
View file

@ -0,0 +1,131 @@
<script setup lang="ts">
import LayoutAuthenticated from '@/Layouts/LayoutAuthenticated.vue';
import SectionMain from '@/Components/SectionMain.vue';
import SectionTitleLineWithButton from '@/Components/SectionTitleLineWithButton.vue';
import { useForm, Head, usePage } from '@inertiajs/vue3';
// import { Inertia } from '@inertiajs/inertia';
import { computed, Ref } from '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';
import { mdiArrowLeftBoldOutline, mdiLockOpen } from '@mdi/js';
import FormValidationErrors from '@/Components/FormValidationErrors.vue';
const props = defineProps({
dataset: {
type: Object,
default: () => ({}),
},
});
const flash: Ref<any> = computed(() => {
return usePage().props.flash;
});
const errors: Ref<any> = computed(() => {
return usePage().props.errors;
});
const form = useForm({
preferred_reviewer: '',
preferred_reviewer_email: '',
preferation: 'yes_preferation',
// preferation: '',
// isPreferationRequired: false,
});
// const preferation = ref('yes_preferation');
// const isPreferationRequired = ref(false);
const isPreferationRequired = computed(() => form.preferation === 'yes_preferation');
const handleSubmit = async (e) => {
e.preventDefault();
await form.put(stardust.route('dataset.releaseUpdate', [props.dataset.id]));
};
</script>
<template>
<LayoutAuthenticated>
<Head title="Release saved datasets" />
<SectionMain>
<SectionTitleLineWithButton :icon="mdiLockOpen" title="Release your dataset for Editor" main>
<BaseButton
:route-name="stardust.route('dataset.list')"
:icon="mdiArrowLeftBoldOutline"
label="Back"
color="white"
rounded-full
small
/>
</SectionTitleLineWithButton>
<CardBox form @submit.prevent="handleSubmit">
<FormValidationErrors v-bind:errors="errors" />
<div class="lex flex-col md:flex-row mb-3">
<label for="elevation-option-one" class="pure-radio">
<input id="elevation-option-one" type="radio" v-model="form.preferation" value="yes_preferation" />
preferred reviewer
</label>
<label for="elevation-option-two" class="pure-radio">
<input id="elevation-option-two" type="radio" v-model="form.preferation" value="no_preferation" />
no preferred reviewer
</label>
</div>
<div v-if="isPreferationRequired == true">
<FormField label="preferred reviewer" :class="{ 'text-red-400': form.errors.preferred_reviewer }">
<FormControl
v-model="form.preferred_reviewer"
type="text"
placeholder="-- enter name of preferred reviewer --"
required
:error="form.errors.preferred_reviewer"
>
<div class="text-red-400 text-sm" v-if="form.errors.preferred_reviewer">
{{ form.errors.preferred_reviewer }}
</div>
</FormControl>
</FormField>
<FormField label="reviewer email" :class="{ 'text-red-400': form.errors.preferred_reviewer_email }">
<FormControl
v-model="form.preferred_reviewer_email"
type="text"
placeholder="-- enter email of reviewer --"
required
:error="form.errors.preferred_reviewer_email"
>
<div class="text-red-400 text-sm" v-if="form.errors.preferred_reviewer_email">
{{ form.errors.preferred_reviewer_email }}
</div>
</FormControl>
</FormField>
</div>
<!-- <NotificationBar v-if="flash && flash.message" color="warning" :icon="mdiAlertBoxOutline">
{{ flash.message }}
class="bg-orange-100 border-l-4 border-orange-500 text-orange-700 p-4"
</NotificationBar> -->
<div v-if="flash && flash.message" class="flex flex-col mt-6 animate-fade-in">
<div class="bg-yellow-500 border-l-4 border-orange-400 text-white p-4" role="alert">
<p class="font-bold">Be Warned</p>
<p>{{ flash.message }}</p>
</div>
</div>
<template #footer>
<BaseButtons>
<BaseButton
type="submit"
color="info"
label="Release"
:class="{ 'opacity-25': form.processing }"
:disabled="form.processing"
/>
</BaseButtons>
</template>
</CardBox>
</SectionMain>
</LayoutAuthenticated>
</template>

18
resources/js/Stores/layout.ts
View file

@ -1,14 +1,14 @@
import { defineStore } from 'pinia';
export const LayoutService = defineStore('layout', {
state: () => ({
isAsideMobileExpanded: false, // via action
isAsideLgActive: false,
}),
state: () => ({
isAsideMobileExpanded: false, // via action
isAsideLgActive: false,
}),
actions: {
asideMobileToggle() {
this.isAsideMobileExpanded = !this.isAsideMobileExpanded;
},
},
actions: {
asideMobileToggle() {
this.isAsideMobileExpanded = !this.isAsideMobileExpanded;
},
},
});

2
resources/js/Stores/main.ts
View file

@ -58,7 +58,7 @@ export const MainService = defineStore('main', {
setDataset(payload) {
this.dataset = payload;
// this.dataset = {
// language: language,
// licenses: payload.licenses,

12
resources/js/Stores/map.service.ts
View file

@ -1,14 +1,11 @@
import { defineStore } from 'pinia';
// import axios from 'axios';
export const MapService = defineStore('map', {
state: () => ({
// dataset: {} as Dataset,
mapService: new Map<string, any>(),
}),
actions: {
// payload = authenticated user
@ -28,19 +25,16 @@ export const MapService = defineStore('map', {
return this.mapService.get(id);
},
setMap(id: string, map) {
this.mapService.set(id, map);
setMap(id: string, map) {
this.mapService.set(id, map);
},
hasMap(id: string): boolean {
return this.mapService.has(id);
},
deleteMap(id: string): boolean {
return this.mapService.delete(id);
},
},
});

84
resources/js/Stores/style.ts
View file

@ -3,55 +3,53 @@ import * as styles from '@/styles';
import { darkModeKey, styleKey } from '@/config';
export const StyleService = defineStore('style', {
state: () => ({
/* Styles */
asideStyle: '',
asideScrollbarsStyle: '',
asideBrandStyle: '',
asideMenuItemStyle: '',
asideMenuItemActiveStyle: '',
asideMenuDropdownStyle: '',
navBarItemLabelStyle: '',
navBarItemLabelHoverStyle: '',
navBarItemLabelActiveColorStyle: '',
overlayStyle: '',
state: () => ({
/* Styles */
asideStyle: '',
asideScrollbarsStyle: '',
asideBrandStyle: '',
asideMenuItemStyle: '',
asideMenuItemActiveStyle: '',
asideMenuDropdownStyle: '',
navBarItemLabelStyle: '',
navBarItemLabelHoverStyle: '',
navBarItemLabelActiveColorStyle: '',
overlayStyle: '',
/* Dark mode default false */
darkMode: false,
}),
/* Dark mode default false */
darkMode: false,
}),
actions: {
// style payload = 'basic' or 'white' with blue font
setStyle(payload) {
if (!styles[payload]) {
return;
}
actions: {
// style payload = 'basic' or 'white' with blue font
setStyle(payload) {
if (!styles[payload]) {
return;
}
if (typeof localStorage !== 'undefined') {
localStorage.setItem(styleKey, payload);
}
if (typeof localStorage !== 'undefined') {
localStorage.setItem(styleKey, payload);
}
const style = styles[payload];
const style = styles[payload];
for (const key in style) {
this[`${key}Style`] = style[key];
}
},
// toggle dark mode
setDarkMode(payload = null) {
this.darkMode = payload !== null ? payload : !this.darkMode;
for (const key in style) {
this[`${key}Style`] = style[key];
}
},
// toggle dark mode
setDarkMode(payload = null) {
this.darkMode = payload !== null ? payload : !this.darkMode;
if (typeof localStorage !== 'undefined') {
localStorage.setItem(darkModeKey, this.darkMode ? '1' : '0');
}
if (typeof localStorage !== 'undefined') {
localStorage.setItem(darkModeKey, this.darkMode ? '1' : '0');
}
if (typeof document !== 'undefined') {
document.body.classList[this.darkMode ? 'add' : 'remove']('dark-scrollbars');
if (typeof document !== 'undefined') {
document.body.classList[this.darkMode ? 'add' : 'remove']('dark-scrollbars');
document.documentElement.classList[this.darkMode ? 'add' : 'remove'](
'dark-scrollbars-compat'
);
}
},
},
document.documentElement.classList[this.darkMode ? 'add' : 'remove']('dark-scrollbars-compat');
}
},
},
});

14
resources/js/Stores/time.service.ts
View file

@ -3,25 +3,23 @@ import { defineStore } from 'pinia';
// import dayjs from 'dayjs';
export const TimeService = defineStore('map', {
state: () => ({
state: () => ({
// dataset: {} as Dataset,
mapService: new Map<string, any>(),
}),
actions: {
actions: {
getMap(id: string) {
return this.mapService.get(id);
},
setMap(id: string, map) {
this.mapService.set(id, map);
setMap(id: string, map) {
this.mapService.set(id, map);
},
hasMap(id: string): boolean {
return this.mapService.has(id);
},
deleteMap(id: string): boolean {
return this.mapService.delete(id);
},
@ -31,7 +29,5 @@ export const TimeService = defineStore('map', {
// const to = dayjs(timespan.to);
// return dayjs.duration(to.diff(from));
// },
},
});

5
resources/js/app.js
View file

@ -58,10 +58,7 @@ const layoutService = LayoutService(pinia);
styleService.setStyle(localStorage[styleKey] ?? 'basic');
/* Dark mode */
if (
(!localStorage[darkModeKey] && window.matchMedia('(prefers-color-scheme: dark)').matches) ||
localStorage[darkModeKey] === '1'
) {
if ((!localStorage[darkModeKey] && window.matchMedia('(prefers-color-scheme: dark)').matches) || localStorage[darkModeKey] === '1') {
styleService.setDarkMode(true);
}

171
resources/js/colors.js
View file

@ -5,106 +5,99 @@ export const gradientBgPinkRed = `${gradientBgBase} from-pink-400 via-red-500 to
export const gradientBgGreenBlue = `${gradientBgBase} from-green-400 to-blue-400`;
export const colorsBgLight = {
white: 'bg-white text-black',
light: 'bg-white text-black dark:bg-slate-900/70 dark:text-white',
contrast: 'bg-gray-800 text-white dark:bg-white dark:text-black',
success: 'bg-emerald-500 border-emerald-500 text-white',
danger: 'bg-red-500 border-red-500 text-white',
warning: 'bg-yellow-500 border-yellow-500 text-white',
info: 'bg-blue-500 border-blue-500 text-white',
white: 'bg-white text-black',
light: 'bg-white text-black dark:bg-slate-900/70 dark:text-white',
contrast: 'bg-gray-800 text-white dark:bg-white dark:text-black',
success: 'bg-emerald-500 border-emerald-500 text-white',
danger: 'bg-red-500 border-red-500 text-white',
warning: 'bg-yellow-500 border-yellow-500 text-white',
info: 'bg-blue-500 border-blue-500 text-white',
};
export const colorsText = {
white: 'text-black dark:text-slate-100',
light: 'text-gray-700 dark:text-slate-400',
contrast: 'dark:text-white',
success: 'text-emerald-500',
danger: 'text-red-500',
warning: 'text-yellow-500',
info: 'text-blue-500',
modern: 'text-teal-500',
white: 'text-black dark:text-slate-100',
light: 'text-gray-700 dark:text-slate-400',
contrast: 'dark:text-white',
success: 'text-emerald-500',
danger: 'text-red-500',
warning: 'text-yellow-500',
info: 'text-blue-500',
modern: 'text-teal-500',
};
export const colorsOutline = {
white: [colorsText.white, 'border-gray-100'],
light: [colorsText.light, 'border-gray-100'],
contrast: [colorsText.contrast, 'border-gray-900 dark:border-slate-100'],
success: [colorsText.success, 'border-emerald-500'],
danger: [colorsText.danger, 'border-red-500'],
warning: [colorsText.warning, 'border-yellow-500'],
info: [colorsText.info, 'border-blue-500'],
white: [colorsText.white, 'border-gray-100'],
light: [colorsText.light, 'border-gray-100'],
contrast: [colorsText.contrast, 'border-gray-900 dark:border-slate-100'],
success: [colorsText.success, 'border-emerald-500'],
danger: [colorsText.danger, 'border-red-500'],
warning: [colorsText.warning, 'border-yellow-500'],
info: [colorsText.info, 'border-blue-500'],
};
export const getButtonColor = (color, isOutlined, hasHover) => {
const colors = {
bg: {
white: 'bg-white text-black',
contrast: 'bg-gray-800 text-white dark:bg-white dark:text-black',
light: 'bg-gray-50 text-black',
success: 'bg-emerald-600 dark:bg-emerald-500 text-white',
danger: 'bg-red-600 dark:bg-red-500 text-white',
warning: 'bg-yellow-600 dark:bg-yellow-500 text-white',
info: 'bg-blue-600 dark:bg-blue-500 text-white',
modern: 'bg-teal-600 dark:bg-teal-500 text-white',
},
bgHover: {
white: 'hover:bg-gray-50',
contrast: 'hover:bg-gray-900 hover:dark:bg-slate-100',
light: 'hover:bg-gray-200',
success:
'hover:bg-emerald-700 hover:border-emerald-700 hover:dark:bg-emerald-600 hover:dark:border-emerald-600',
danger:
'hover:bg-red-700 hover:border-red-700 hover:dark:bg-red-600 hover:dark:border-red-600',
warning:
'hover:bg-yellow-700 hover:border-yellow-700 hover:dark:bg-yellow-600 hover:dark:border-yellow-600',
info: 'hover:bg-blue-700 hover:border-blue-700 hover:dark:bg-blue-600 hover:dark:border-blue-600',
modern: 'hover:bg-emerald-700 hover:border-emerald-700 hover:dark:bg-emerald-600 hover:dark:border-emerald-600',
},
borders: {
white: 'border-gray-100',
contrast: 'border-gray-900 dark:border-slate-100',
light: 'border-gray-100 dark:border-slate-700',
success: 'border-emerald-600 dark:border-emerald-500',
danger: 'border-red-600 dark:border-red-500',
warning: 'border-yellow-600 dark:border-yellow-500',
info: 'border-blue-600 dark:border-blue-500',
modern: 'border-teal-600 dark:border-teal-500',
},
text: {
white: 'text-black dark:text-slate-100',
contrast: 'dark:text-slate-100',
light: 'text-gray-700 dark:text-slate-400',
success: 'text-emerald-600 dark:text-emerald-500',
danger: 'text-red-600 dark:text-red-500',
warning: 'text-yellow-600 dark:text-yellow-500',
info: 'text-blue-600 dark:text-blue-500',
modern: 'text-teal-600 dark:text-teal-500',
},
outlineHover: {
white: 'hover:bg-gray-100 hover:text-gray-900 dark:hover:text-slate-900',
contrast:
'hover:bg-gray-800 hover:text-gray-100 hover:dark:bg-slate-100 hover:dark:text-black',
light: 'hover:bg-gray-100 hover:text-gray-900 dark:hover:text-slate-900',
success:
'hover:bg-emerald-600 hover:text-white hover:text-white hover:dark:text-white hover:dark:border-emerald-600',
danger:
'hover:bg-red-600 hover:text-white hover:text-white hover:dark:text-white hover:dark:border-red-600',
warning:
'hover:bg-yellow-600 hover:text-white hover:text-white hover:dark:text-white hover:dark:border-yellow-600',
info: 'hover:bg-blue-600 hover:text-white hover:dark:text-white hover:dark:border-blue-600',
modern: 'hover:bg-teal-600 hover:text-teal hover:dark:bg-teal-100 hover:dark:text-black',
},
};
const colors = {
bg: {
white: 'bg-white text-black',
contrast: 'bg-gray-800 text-white dark:bg-white dark:text-black',
light: 'bg-gray-50 text-black',
success: 'bg-emerald-600 dark:bg-emerald-500 text-white',
danger: 'bg-red-600 dark:bg-red-500 text-white',
warning: 'bg-yellow-600 dark:bg-yellow-500 text-white',
info: 'bg-blue-600 dark:bg-blue-500 text-white',
modern: 'bg-teal-600 dark:bg-teal-500 text-white',
},
bgHover: {
white: 'hover:bg-gray-50',
contrast: 'hover:bg-gray-900 hover:dark:bg-slate-100',
light: 'hover:bg-gray-200',
success: 'hover:bg-emerald-700 hover:border-emerald-700 hover:dark:bg-emerald-600 hover:dark:border-emerald-600',
danger: 'hover:bg-red-700 hover:border-red-700 hover:dark:bg-red-600 hover:dark:border-red-600',
warning: 'hover:bg-yellow-700 hover:border-yellow-700 hover:dark:bg-yellow-600 hover:dark:border-yellow-600',
info: 'hover:bg-blue-700 hover:border-blue-700 hover:dark:bg-blue-600 hover:dark:border-blue-600',
modern: 'hover:bg-emerald-700 hover:border-emerald-700 hover:dark:bg-emerald-600 hover:dark:border-emerald-600',
},
borders: {
white: 'border-gray-100',
contrast: 'border-gray-900 dark:border-slate-100',
light: 'border-gray-100 dark:border-slate-700',
success: 'border-emerald-600 dark:border-emerald-500',
danger: 'border-red-600 dark:border-red-500',
warning: 'border-yellow-600 dark:border-yellow-500',
info: 'border-blue-600 dark:border-blue-500',
modern: 'border-teal-600 dark:border-teal-500',
},
text: {
white: 'text-black dark:text-slate-100',
contrast: 'dark:text-slate-100',
light: 'text-gray-700 dark:text-slate-400',
success: 'text-emerald-600 dark:text-emerald-500',
danger: 'text-red-600 dark:text-red-500',
warning: 'text-yellow-600 dark:text-yellow-500',
info: 'text-blue-600 dark:text-blue-500',
modern: 'text-teal-600 dark:text-teal-500',
},
outlineHover: {
white: 'hover:bg-gray-100 hover:text-gray-900 dark:hover:text-slate-900',
contrast: 'hover:bg-gray-800 hover:text-gray-100 hover:dark:bg-slate-100 hover:dark:text-black',
light: 'hover:bg-gray-100 hover:text-gray-900 dark:hover:text-slate-900',
success: 'hover:bg-emerald-600 hover:text-white hover:text-white hover:dark:text-white hover:dark:border-emerald-600',
danger: 'hover:bg-red-600 hover:text-white hover:text-white hover:dark:text-white hover:dark:border-red-600',
warning: 'hover:bg-yellow-600 hover:text-white hover:text-white hover:dark:text-white hover:dark:border-yellow-600',
info: 'hover:bg-blue-600 hover:text-white hover:dark:text-white hover:dark:border-blue-600',
modern: 'hover:bg-teal-600 hover:text-teal hover:dark:bg-teal-100 hover:dark:text-black',
},
};
if (!colors.bg[color]) {
return color;
}
if (!colors.bg[color]) {
return color;
}
const base = [isOutlined ? colors.text[color] : colors.bg[color], colors.borders[color]];
const base = [isOutlined ? colors.text[color] : colors.bg[color], colors.borders[color]];
if (hasHover) {
base.push(isOutlined ? colors.outlineHover[color] : colors.bgHover[color]);
}
if (hasHover) {
base.push(isOutlined ? colors.outlineHover[color] : colors.bgHover[color]);
}
return base;
return base;
};

6
resources/js/config.js
View file

@ -1,5 +1,5 @@
export const darkModeKey = "darkMode";
export const darkModeKey = 'darkMode';
export const styleKey = "style";
export const styleKey = 'style';
export const containerMaxW = "xl:max-w-6xl xl:mx-auto";
export const containerMaxW = 'xl:max-w-6xl xl:mx-auto';

29
resources/js/menu.ts
View file

@ -1,10 +1,4 @@
import {
mdiMonitor,
mdiGithub,
mdiAccountEye,
mdiAccountGroup,
mdiDatabasePlus,
} from '@mdi/js';
import { mdiMonitor, mdiGithub, mdiAccountEye, mdiAccountGroup, mdiDatabasePlus } from '@mdi/js';
export default [
{
@ -33,10 +27,27 @@ export default [
label: 'Roles',
},
{
route: 'dataset.create',
// route: 'dataset.create',
icon: mdiDatabasePlus,
label: 'Create Dataset',
label: 'Submitter',
children: [
{
route: 'dataset.list',
icon: mdiDatabasePlus,
label: 'All my datasets',
},
{
route: 'dataset.create',
icon: mdiDatabasePlus,
label: 'Create Dataset',
},
],
},
// {
// route: 'dataset.create',
// icon: mdiDatabasePlus,
// label: 'Create Dataset',
// },
{
href: 'https://gitea.geologie.ac.at/geolba/tethys',
icon: mdiGithub,