forked from geolba/tethys.backend
- add validator for checking languages of translated titles and description
- add notification messages via notiwind.ts - add Project.ts - add new component TabelPersons.vue - add additional routes - npm updates
This commit is contained in:
parent
59a99ff3c8
commit
080c21126b
24 changed files with 979 additions and 349 deletions
|
|
@ -1,8 +1,16 @@
|
|||
<script setup lang="ts">
|
||||
import { Head, useForm } from '@inertiajs/vue3';
|
||||
import { ref } from 'vue';
|
||||
import { Dataset, Title } from '@/Dataset';
|
||||
import { mdiDatabasePlus, mdiMinusCircle, mdiPlusCircle, mdiFinance, mdiInformationOutline, mdiBookOpenPageVariant } from '@mdi/js';
|
||||
import { Dataset, Description, Title } from '@/Dataset';
|
||||
import {
|
||||
mdiDatabasePlus,
|
||||
mdiMinusCircle,
|
||||
mdiPlusCircle,
|
||||
mdiFinance,
|
||||
mdiInformationOutline,
|
||||
mdiBookOpenPageVariant,
|
||||
mdiImageText,
|
||||
} from '@mdi/js';
|
||||
import LayoutAuthenticated from '@/Layouts/LayoutAuthenticated.vue';
|
||||
import SectionMain from '@/Components/SectionMain.vue';
|
||||
import SectionTitleLineWithButton from '@/Components/SectionTitleLineWithButton.vue';
|
||||
|
|
@ -24,6 +32,10 @@ import IconLanguage from '@/Components/Icons/Language.vue';
|
|||
import IconRecommendet from '@/Components/Icons/Recommendet.vue';
|
||||
import IconConfirm from '@/Components/Icons/Confirm.vue';
|
||||
import SearchAutocomplete from '@/Components/SearchAutocomplete.vue';
|
||||
import TablePersons from '@/Components/TablePersons.vue';
|
||||
import { MainService } from '@/Stores/main';
|
||||
import { notify } from '@/notiwind';
|
||||
// import NotificationToast from '@/Components/NotificationToast.vue';
|
||||
|
||||
const props = defineProps({
|
||||
licenses: {
|
||||
|
|
@ -42,12 +54,18 @@ const props = defineProps({
|
|||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
projects: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
errors: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
});
|
||||
|
||||
const mainService = MainService();
|
||||
|
||||
// const form = useForm({
|
||||
// language: '',
|
||||
// licenses: [],
|
||||
|
|
@ -56,17 +74,57 @@ const props = defineProps({
|
|||
// });
|
||||
// let language: (string | Ref<string>) = ref('');
|
||||
let language = ref('');
|
||||
let dataset = {
|
||||
language: language,
|
||||
licenses: [],
|
||||
rights: false,
|
||||
type: '',
|
||||
creating_corporation: 'Tethys RDR',
|
||||
titles: [{ value: '', type: 'Main', language: language }],
|
||||
descriptions: [{ value: '', type: 'Abstract', language: language }],
|
||||
// errors: undefined,
|
||||
};
|
||||
// const form = useForm({
|
||||
let dataset: Dataset;
|
||||
if (Object.keys(mainService.dataset).length == 0) {
|
||||
// language = ref('');
|
||||
dataset = {
|
||||
language: language,
|
||||
licenses: [],
|
||||
rights: false,
|
||||
type: '',
|
||||
creating_corporation: 'Tethys RDR',
|
||||
titles: [{ value: '', type: 'Main', language: language }],
|
||||
descriptions: [{ value: '', type: 'Abstract', language: language }],
|
||||
authors: [],
|
||||
contributors: [],
|
||||
project_id: undefined,
|
||||
embargo_date: '',
|
||||
// errors: undefined,
|
||||
};
|
||||
// mainService.setDataset(dataset, language);
|
||||
} else {
|
||||
// console.log(mainService.dataset);
|
||||
language = ref(mainService.dataset.language);
|
||||
|
||||
// dataset = mainService.dataset;
|
||||
dataset = {
|
||||
language: language,
|
||||
licenses: mainService.dataset.licenses,
|
||||
rights: mainService.dataset.rights,
|
||||
type: mainService.dataset.type,
|
||||
creating_corporation: mainService.dataset.creating_corporation,
|
||||
titles: mainService.dataset.titles,
|
||||
descriptions: mainService.dataset.descriptions,
|
||||
authors: mainService.dataset.authors,
|
||||
contributors: mainService.dataset.contributors,
|
||||
project_id: mainService.dataset.project_id,
|
||||
embargo_date: mainService.dataset.embargo_date,
|
||||
};
|
||||
for (let index in mainService.dataset.titles) {
|
||||
let title: Title = mainService.dataset.titles[index];
|
||||
if (title.type == 'Main') {
|
||||
title.language = language;
|
||||
}
|
||||
}
|
||||
for (let index in mainService.dataset.descriptions) {
|
||||
let description: Description = mainService.dataset.descriptions[index];
|
||||
if (description.type == 'Abstract') {
|
||||
description.language = language;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// const form = useForm<Dataset>({
|
||||
// language: language,
|
||||
// licenses: [],
|
||||
// rights: false,
|
||||
|
|
@ -98,9 +156,13 @@ const formStep = ref(1);
|
|||
// };
|
||||
|
||||
const nextStep = async () => {
|
||||
let route = stardust.route('dataset.first.step');
|
||||
if (formStep.value == 2) {
|
||||
let route;
|
||||
if (formStep.value == 1) {
|
||||
route = stardust.route('dataset.first.step');
|
||||
} else if (formStep.value == 2) {
|
||||
route = stardust.route('dataset.second.step');
|
||||
} else if (formStep.value == 3) {
|
||||
route = stardust.route('dataset.third.step');
|
||||
}
|
||||
// formStep.value++;
|
||||
await form
|
||||
|
|
@ -111,6 +173,8 @@ const nextStep = async () => {
|
|||
.post(route, {
|
||||
form,
|
||||
onSuccess: () => {
|
||||
// console.log(form.data());
|
||||
mainService.setDataset(form.data());
|
||||
formStep.value++;
|
||||
},
|
||||
});
|
||||
|
|
@ -137,6 +201,29 @@ const addDescription = () => {
|
|||
const removeDescription = (key) => {
|
||||
form.descriptions.splice(key, 1);
|
||||
};
|
||||
|
||||
const onAddAuthor = (person) => {
|
||||
if (form.authors.filter((e) => e.id === person.id).length > 0) {
|
||||
notify({ type: 'warning', title: 'Warning', text: 'person is already defined as author' }, 4000);
|
||||
} else if (form.contributors.filter((e) => e.id === person.id).length > 0) {
|
||||
notify({ type: 'warning', title: 'Warning', text: 'person is already defined as contributor' });
|
||||
} else {
|
||||
form.authors.push(person);
|
||||
notify({ type: 'info', text: 'person has been successfully added as author' });
|
||||
}
|
||||
};
|
||||
const onAddContributor = (person) => {
|
||||
if (form.contributors.filter((e) => e.id === person.id).length > 0) {
|
||||
notify({ type: 'warning', title: 'Warning', text: 'person is already defined as contributor' }, 4000);
|
||||
} else if (form.authors.filter((e) => e.id === person.id).length > 0) {
|
||||
notify({ type: 'warning', title: 'Warning', text: 'person is already defined as author' }, 4000);
|
||||
} else {
|
||||
// person.pivot = { contributor_type: '' };
|
||||
// // person.pivot = { name_type: '', contributor_type: '' };
|
||||
form.contributors.push(person);
|
||||
notify({ type: 'info', text: 'person has been successfully added as contributor' }, 4000);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -161,6 +248,7 @@ const removeDescription = (key) => {
|
|||
<SectionTitleLineWithButton :icon="mdiDatabasePlus" title="Submit dataset" main>
|
||||
<!-- <BaseButton :route-name="stardust.route('user.index')" :icon="mdiArrowLeftBoldOutline" label="Back"
|
||||
color="white" rounded-full small /> -->
|
||||
{{ formStep }}
|
||||
</SectionTitleLineWithButton>
|
||||
|
||||
<CardBox>
|
||||
|
|
@ -202,7 +290,7 @@ const removeDescription = (key) => {
|
|||
:type="'select'"
|
||||
placeholder="[Enter Language]"
|
||||
:errors="form.errors.language"
|
||||
:options="['de', 'en']"
|
||||
:options="{ de: 'de', en: 'en' }"
|
||||
>
|
||||
<div class="text-red-400 text-sm" v-if="form.errors.language">
|
||||
{{ form.errors.language.join(', ') }}
|
||||
|
|
@ -298,7 +386,7 @@ const removeDescription = (key) => {
|
|||
|
||||
<!-- titles -->
|
||||
<CardBox
|
||||
class="mb-6"
|
||||
class="mb-6 shadow"
|
||||
:has-form-data="true"
|
||||
title="Titles"
|
||||
:icon="mdiFinance"
|
||||
|
|
@ -394,7 +482,7 @@ const removeDescription = (key) => {
|
|||
required
|
||||
v-model="form.titles[index].language"
|
||||
type="select"
|
||||
:options="['de', 'en']"
|
||||
:options="{ de: 'de', en: 'en' }"
|
||||
placeholder="[select title language]"
|
||||
>
|
||||
<div class="text-red-400 text-sm" v-if="form.errors[`titles.${index}.language`]">
|
||||
|
|
@ -410,7 +498,8 @@ const removeDescription = (key) => {
|
|||
|
||||
<!-- Descriptions -->
|
||||
<CardBox
|
||||
class="mb-6"
|
||||
:icon="mdiImageText"
|
||||
class="mb-6 shadow"
|
||||
:has-form-data="true"
|
||||
title="Descriptions"
|
||||
:header-icon="mdiPlusCircle"
|
||||
|
|
@ -523,7 +612,7 @@ const removeDescription = (key) => {
|
|||
required
|
||||
v-model="form.descriptions[index].language"
|
||||
type="select"
|
||||
:options="['de', 'en']"
|
||||
:options="{ de: 'de', en: 'en' }"
|
||||
placeholder="[select title language]"
|
||||
>
|
||||
<div
|
||||
|
|
@ -539,31 +628,76 @@ const removeDescription = (key) => {
|
|||
</div>
|
||||
</CardBox>
|
||||
|
||||
<CardBox class="mb-6" :has-form-data="true" title="Authors" :icon="mdiBookOpenPageVariant" >
|
||||
<!-- authors -->
|
||||
<CardBox class="mb-6 shadow" has-table title="Authors" :icon="mdiBookOpenPageVariant">
|
||||
<SearchAutocomplete
|
||||
source="/api/persons"
|
||||
:response-property="'first_name'"
|
||||
placeholder="search in person table...."
|
||||
v-on:person="onAddAuthor"
|
||||
></SearchAutocomplete>
|
||||
|
||||
<TablePersons :persons="form.authors" v-if="form.authors.length > 0" />
|
||||
<div class="text-red-400 text-sm" v-if="errors.authors && Array.isArray(errors.authors)">
|
||||
{{ errors.authors.join(', ') }}
|
||||
</div>
|
||||
</CardBox>
|
||||
|
||||
<!-- contributors -->
|
||||
<CardBox class="mb-6 shadow" has-table title="Contributors" :icon="mdiBookOpenPageVariant">
|
||||
<SearchAutocomplete
|
||||
source="/api/persons"
|
||||
:response-property="'first_name'"
|
||||
placeholder="search in person table...."
|
||||
v-on:person="onAddContributor"
|
||||
></SearchAutocomplete>
|
||||
|
||||
<TablePersons :persons="form.contributors" v-if="form.contributors.length > 0" />
|
||||
</CardBox>
|
||||
<!-- <SectionTitleLineWithButton :icon="mdiChartPie" title="Trends overview (to do publications per year)" class="flex flex-col md:flex-row" >
|
||||
</SectionTitleLineWithButton> -->
|
||||
</div>
|
||||
|
||||
<!-- <label>To Do: Recommendet</label> -->
|
||||
<div v-if="formStep == 3">
|
||||
<label>To Do: Recommendet</label>
|
||||
<!-- <div class="w-full mx-2 flex-1 svelte-1l8159u">
|
||||
<div class="font-bold h-6 mt-3 text-gray-600 text-xs leading-8 uppercase">Username</div>
|
||||
<div class="bg-white my-2 p-1 flex border border-gray-200 rounded svelte-1l8159u">
|
||||
<input placeholder="Just a hint.." class="p-1 px-2 appearance-none outline-none w-full text-gray-800" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full mx-2 flex-1 svelte-1l8159u">
|
||||
<div class="font-bold h-6 mt-3 text-gray-600 text-xs leading-8 uppercase">Your Email</div>
|
||||
<div class="bg-white my-2 p-1 flex border border-gray-200 rounded svelte-1l8159u">
|
||||
<input placeholder="jhon@doe.com" class="p-1 px-2 appearance-none outline-none w-full text-gray-800" />
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="flex flex-col md:flex-row">
|
||||
<FormField
|
||||
label="Project.."
|
||||
help="project is optional"
|
||||
:class="{ 'text-red-400': errors.project_id }"
|
||||
class="w-full mx-2 flex-1"
|
||||
>
|
||||
<FormControl
|
||||
required
|
||||
v-model="form.project_id"
|
||||
:type="'select'"
|
||||
placeholder="[Select Project]"
|
||||
:errors="form.errors.project_id"
|
||||
:options="projects"
|
||||
>
|
||||
<div class="text-red-400 text-sm" v-if="form.errors.project_id">
|
||||
{{ form.errors.project_id.join(', ') }}
|
||||
</div>
|
||||
</FormControl>
|
||||
</FormField>
|
||||
|
||||
<FormField
|
||||
label="Embargo Date.."
|
||||
help="embargo date is optional"
|
||||
:class="{ 'text-red-400': errors.embargo_date }"
|
||||
class="w-full mx-2 flex-1"
|
||||
>
|
||||
<FormControl
|
||||
required
|
||||
v-model="form.embargo_date"
|
||||
:type="'date'"
|
||||
placeholder="date('y-m-d')"
|
||||
:errors="form.errors.embargo_date"
|
||||
>
|
||||
<div class="text-red-400 text-sm" v-if="form.errors.embargo_date">
|
||||
{{ form.errors.embargo_date.join(', ') }}
|
||||
</div>
|
||||
</FormControl>
|
||||
</FormField>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="formStep == 4">
|
||||
|
|
|
|||
Loading…
Add table
editor.link_modal.header
Reference in a new issue