forked from geolba/tethys.backend
402 lines
20 KiB
Vue
402 lines
20 KiB
Vue
<template>
|
|
<LayoutAuthenticated>
|
|
|
|
<Head title="Edit dataset" />
|
|
<SectionMain>
|
|
<SectionTitleLineWithButton :icon="mdiImageText" title="Update dataset" main>
|
|
<BaseButton :route-name="stardust.route('dataset.list')" :icon="mdiArrowLeftBoldOutline" label="Back"
|
|
color="white" rounded-full small />
|
|
</SectionTitleLineWithButton>
|
|
|
|
<!-- max-w-2xl max-width: 42rem; /* 672px */ -->
|
|
<!-- <div class="max-w-2xl mx-auto"> -->
|
|
|
|
<CardBox :form="true">
|
|
<div class="mb-4">
|
|
<!-- <label for="title" class="block text-gray-700 font-bold mb-2">Title:</label>
|
|
<input
|
|
type="text"
|
|
id="title"
|
|
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="form.language"
|
|
/> -->
|
|
<div class="flex flex-col md:flex-row">
|
|
<FormField label="Language *" help="required: select dataset main language"
|
|
:class="{ 'text-red-400': errors.language }" class="w-full flex-1">
|
|
<FormControl required v-model="form.language" :type="'select'" placeholder="[Enter Language]"
|
|
:errors="form.errors.language" :options="{ de: 'de', en: 'en' }">
|
|
<div class="text-red-400 text-sm" v-if="form.errors.language">
|
|
{{ form.errors.language.join(', ') }}
|
|
</div>
|
|
</FormControl>
|
|
</FormField>
|
|
</div>
|
|
<FormField label="Dataset Type *" help="required: dataset type"
|
|
:class="{ 'text-red-400': form.errors.type }">
|
|
<FormControl required v-model="form.type" :type="'select'" placeholder="-- select type --"
|
|
:errors="errors.type" :options="doctypes">
|
|
<div class="text-red-400 text-sm" v-if="form.errors.type && Array.isArray(form.errors.type)">
|
|
{{ form.errors.type.join(', ') }}
|
|
</div>
|
|
</FormControl>
|
|
</FormField>
|
|
|
|
<!-- titles -->
|
|
<CardBox class="mb-6 shadow" :has-form-data="false" title="Titles" :icon="mdiFinance"
|
|
:header-icon="mdiPlusCircle" v-on:header-icon-click="addTitle()">
|
|
<div class="flex flex-col md:flex-row">
|
|
<FormField label="Main Title *" help="required: main title"
|
|
:class="{ 'text-red-400': form.errors['titles.0.value'] }" class="w-full mr-1 flex-1">
|
|
<FormControl required v-model="form.titles[0].value" type="text"
|
|
placeholder="[enter main title]">
|
|
<div class="text-red-400 text-sm"
|
|
v-if="form.errors['titles.0.value'] && Array.isArray(form.errors['titles.0.value'])">
|
|
{{ form.errors['titles.0.value'].join(', ') }}
|
|
</div>
|
|
</FormControl>
|
|
</FormField>
|
|
<FormField label="Main Title Language*" help="required: main title language"
|
|
:class="{ 'text-red-400': form.errors['titles.0.language'] }" class="w-full ml-1 flex-1">
|
|
<FormControl required v-model="form.titles[0].language" type="text" :is-read-only="true">
|
|
<div class="text-red-400 text-sm"
|
|
v-if="form.errors['titles.0.language'] && Array.isArray(form.errors['titles.0.language'])">
|
|
{{ form.errors['titles.0.language'].join(', ') }}
|
|
</div>
|
|
</FormControl>
|
|
</FormField>
|
|
</div>
|
|
|
|
<label v-if="form.titles.length > 1">additional titles </label>
|
|
<!-- <BaseButton :icon="mdiPlusCircle" @click.prevent="addTitle()" color="modern" rounded-full small /> -->
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<!-- <th v-if="checkable" /> -->
|
|
<th>Title Value</th>
|
|
<th>Title Type</th>
|
|
<th>Title Language</th>
|
|
<th />
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<template v-for="(item, index) in form.titles" :key="index">
|
|
<tr v-if="item.type != 'Main'">
|
|
<!-- <td scope="row">{{ index + 1 }}</td> -->
|
|
<td data-label="Title Value">
|
|
<FormControl required v-model="form.titles[index].value" type="text"
|
|
placeholder="[enter main title]">
|
|
<div class="text-red-400 text-sm"
|
|
v-if="form.errors[`titles.${index}.value`]">
|
|
{{ form.errors[`titles.${index}.value`].join(', ') }}
|
|
</div>
|
|
</FormControl>
|
|
</td>
|
|
<td data-label="Title Type">
|
|
<FormControl required v-model="form.titles[index].type" type="select"
|
|
:options="titletypes" placeholder="[select title type]">
|
|
<div class="text-red-400 text-sm"
|
|
v-if="Array.isArray(form.errors[`titles.${index}.type`])">
|
|
{{ form.errors[`titles.${index}.type`].join(', ') }}
|
|
</div>
|
|
</FormControl>
|
|
</td>
|
|
<td data-label="Title Language">
|
|
<FormControl required v-model="form.titles[index].language" type="select"
|
|
:options="{ de: 'de', en: 'en' }" placeholder="[select title language]">
|
|
<div class="text-red-400 text-sm"
|
|
v-if="form.errors[`titles.${index}.language`]">
|
|
{{ form.errors[`titles.${index}.language`].join(', ') }}
|
|
</div>
|
|
</FormControl>
|
|
</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" /> -->
|
|
<BaseButton color="danger" :icon="mdiTrashCan" small
|
|
@click.prevent="removeTitle(index)" />
|
|
</BaseButtons>
|
|
</td>
|
|
</tr>
|
|
</template>
|
|
</tbody>
|
|
</table>
|
|
</CardBox>
|
|
|
|
<CardBox class="mb-6 shadow" :has-form-data="false" title="Descriptions" :icon="mdiFinance"
|
|
:header-icon="mdiPlusCircle" v-on:header-icon-click="addDescription()">
|
|
<div class="flex flex-col md:flex-row">
|
|
<FormField label="Main Abstract *" help="required: main abstract"
|
|
:class="{ 'text-red-400': form.errors['descriptions.0.value'] }" class="w-full mr-1 flex-1">
|
|
<FormControl required v-model="form.descriptions[0].value" type="textarea"
|
|
placeholder="[enter main abstract]">
|
|
<div class="text-red-400 text-sm"
|
|
v-if="form.errors['descriptions.0.value'] && Array.isArray(form.errors['descriptions.0.value'])">
|
|
{{ form.errors['descriptions.0.value'].join(', ') }}
|
|
</div>
|
|
</FormControl>
|
|
</FormField>
|
|
<FormField label="Main Title Language*" help="required: main abstract language"
|
|
:class="{ 'text-red-400': form.errors['descriptions.0.language'] }"
|
|
class="w-full ml-1 flex-1">
|
|
<FormControl required v-model="form.descriptions[0].language" type="text"
|
|
:is-read-only="true">
|
|
<div class="text-red-400 text-sm" v-if="form.errors['descriptions.0.value'] && Array.isArray(form.errors['descriptions.0.language'])
|
|
">
|
|
{{ form.errors['descriptions.0.language'].join(', ') }}
|
|
</div>
|
|
</FormControl>
|
|
</FormField>
|
|
</div>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<!-- <th v-if="checkable" /> -->
|
|
<th>Title Value</th>
|
|
<th>Title Type</th>
|
|
<th>Title Language</th>
|
|
<th />
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<template v-for="(item, index) in form.descriptions" :key="index">
|
|
<tr v-if="item.type != 'Abstract'">
|
|
<!-- <td scope="row">{{ index + 1 }}</td> -->
|
|
<td data-label="Description Value">
|
|
<FormControl required v-model="form.descriptions[index].value" type="text"
|
|
placeholder="[enter main title]">
|
|
<div class="text-red-400 text-sm"
|
|
v-if="form.errors[`descriptions.${index}.value`]">
|
|
{{ form.errors[`descriptions.${index}.value`].join(', ') }}
|
|
</div>
|
|
</FormControl>
|
|
</td>
|
|
<td data-label="Description Type">
|
|
<FormControl required v-model="form.descriptions[index].type" type="select"
|
|
:options="props.descriptiontypes" placeholder="[select title type]">
|
|
<div class="text-red-400 text-sm"
|
|
v-if="Array.isArray(form.errors[`descriptions.${index}.type`])">
|
|
{{ form.errors[`descriptions.${index}.type`].join(', ') }}
|
|
</div>
|
|
</FormControl>
|
|
</td>
|
|
<td data-label="Description Language">
|
|
<FormControl required v-model="form.descriptions[index].language" type="select"
|
|
:options="{ de: 'de', en: 'en' }" placeholder="[select title language]">
|
|
<div class="text-red-400 text-sm"
|
|
v-if="form.errors[`descriptions.${index}.language`]">
|
|
{{ form.errors[`descriptions.${index}.language`].join(', ') }}
|
|
</div>
|
|
</FormControl>
|
|
</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" /> -->
|
|
<BaseButton color="danger" :icon="mdiTrashCan" small
|
|
@click.prevent="removeDescription(index)" />
|
|
</BaseButtons>
|
|
</td>
|
|
</tr>
|
|
</template>
|
|
</tbody>
|
|
</table>
|
|
</CardBox>
|
|
|
|
<MapComponent v-if="form.coverage"
|
|
:mapOptions="mapOptions"
|
|
:baseMaps="baseMaps"
|
|
:fitBounds="fitBounds"
|
|
:coverage="form.coverage"
|
|
:mapId="mapId"
|
|
v-bind-event:onMapInitializedEvent="onMapInitialized"
|
|
></MapComponent>
|
|
|
|
</div>
|
|
|
|
<!-- <div class="mb-4">
|
|
<label for="description" class="block text-gray-700 font-bold mb-2">Description:</label>
|
|
<textarea id="description"
|
|
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="form.type"></textarea>
|
|
</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"
|
|
>
|
|
<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> -->
|
|
</div>
|
|
<div class="mb-4">
|
|
<label for="license" class="block text-gray-700 font-bold mb-2">License:</label>
|
|
<!-- <select
|
|
id="license"
|
|
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.license_id"
|
|
>
|
|
<option v-for="license in licenses" :key="license.id" :value="license.id" class="block px-4 py-2 text-gray-700">
|
|
{{ license.name_long }}
|
|
</option>
|
|
</select> -->
|
|
</div>
|
|
<!-- Add more input fields for the other properties of the dataset -->
|
|
<!-- <button
|
|
type="submit"
|
|
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
|
|
>
|
|
Save
|
|
</button> -->
|
|
<template #footer>
|
|
<BaseButtons>
|
|
<BaseButton type="submit" label="Submit" color="info" :class="{ 'opacity-25': form.processing }"
|
|
:disabled="form.processing">
|
|
</BaseButton>
|
|
</BaseButtons>
|
|
</template>
|
|
</CardBox>
|
|
<!-- </div> -->
|
|
</SectionMain>
|
|
</LayoutAuthenticated>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { Head, useForm } from '@inertiajs/vue3';
|
|
import LayoutAuthenticated from '@/Layouts/LayoutAuthenticated.vue';
|
|
import { Dataset, Title } from '@/Dataset';
|
|
import FormField from '@/Components/FormField.vue';
|
|
import FormControl from '@/Components/FormControl.vue';
|
|
import SectionMain from '@/Components/SectionMain.vue';
|
|
import SectionTitleLineWithButton from '@/Components/SectionTitleLineWithButton.vue';
|
|
import { mdiImageText, mdiArrowLeftBoldOutline, mdiPlusCircle, mdiFinance, mdiTrashCan } from '@mdi/js';
|
|
// import BaseDivider from '@/Components/BaseDivider.vue';
|
|
import BaseButton from '@/Components/BaseButton.vue';
|
|
import BaseButtons from '@/Components/BaseButtons.vue';
|
|
import CardBox from '@/Components/CardBox.vue';
|
|
import { stardust } from '@eidellev/adonis-stardust/client';
|
|
|
|
import MapComponent from '@/Components/Map/map.component.vue';
|
|
import { MapOptions } from '@/Components/Map/MapOptions';
|
|
import { LatLngBoundsExpression } from 'leaflet/src/geo/LatLngBounds';
|
|
import { LayerOptions } from '@/Components/Map/LayerOptions';
|
|
|
|
const props = defineProps({
|
|
dataset: {
|
|
type: Object,
|
|
default: () => ({}),
|
|
},
|
|
languages: {},
|
|
doctypes: {
|
|
type: Object,
|
|
default: () => ({}),
|
|
},
|
|
titletypes: {
|
|
type: Object,
|
|
default: () => ({}),
|
|
},
|
|
descriptiontypes: {
|
|
type: Object,
|
|
default: () => ({}),
|
|
},
|
|
errors: {
|
|
type: Object,
|
|
default: () => ({}),
|
|
},
|
|
});
|
|
|
|
// const projects = reactive([]);
|
|
// const licenses = reactive([]);
|
|
|
|
const mapOptions: MapOptions = {
|
|
center: [48.208174, 16.373819],
|
|
zoom: 3,
|
|
zoomControl: false,
|
|
attributionControl: false,
|
|
};
|
|
const baseMaps: Map<string, LayerOptions> = new Map<string, LayerOptions>();
|
|
const fitBounds: LatLngBoundsExpression = [
|
|
[46.4318173285, 9.47996951665],
|
|
[49.0390742051, 16.9796667823],
|
|
];
|
|
const mapId = 'test';
|
|
|
|
let form = useForm<Dataset>(props.dataset as Dataset);
|
|
// const form = useForm({
|
|
// _method: 'put',
|
|
// login: props.user.login,
|
|
// email: props.user.email,
|
|
// password: '',
|
|
// password_confirmation: '',
|
|
// roles: props.userHasRoles, // fill actual user roles from db
|
|
// });
|
|
|
|
// async created() {
|
|
// // Fetch the list of projects and licenses from the server
|
|
// const response = await fetch('/api/datasets/edit/' + this.dataset.id);
|
|
// const data = await response.json();
|
|
// this.projects = data.projects;
|
|
// this.licenses = data.licenses;
|
|
// }
|
|
const addTitle = () => {
|
|
let newTitle: Title = { value: '', language: '', type: '' };
|
|
//this.dataset.files.push(uploadedFiles[i]);
|
|
form.titles.push(newTitle);
|
|
};
|
|
const removeTitle = (key) => {
|
|
form.titles.splice(key, 1);
|
|
};
|
|
|
|
const addDescription = () => {
|
|
let newDescription = { value: '', language: '', type: '' };
|
|
//this.dataset.files.push(uploadedFiles[i]);
|
|
form.descriptions.push(newDescription);
|
|
};
|
|
const removeDescription = (key) => {
|
|
form.descriptions.splice(key, 1);
|
|
};
|
|
|
|
const onMapInitialized = (newItem) => {
|
|
// notify({ type: 'info', text: message });
|
|
console.log(newItem);
|
|
};
|
|
</script>
|
|
|
|
<!-- <style>
|
|
.max-w-2xl {
|
|
max-width: 2xl;
|
|
}
|
|
|
|
.text-2xl {
|
|
font-size: 2xl;
|
|
}
|
|
|
|
.font-bold {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.mb-4 {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.block {
|
|
display: block;
|
|
}
|
|
|
|
.text-gray-700 {
|
|
color: #4b5563;
|
|
}
|
|
|
|
.shadow {
|
|
box-shadow:
|
|
0 0 0 1px rgba(66, 72, 78, 0.05),
|
|
0 1px 2px 0 rgba(66, 72, 78, 0.08),
|
|
0 2px 4px 0 rgba(66, 72, 78, 0.12),
|
|
0 4px 8px 0 rgba(66, 72, 78, 0.16);
|
|
}
|
|
</style> -->
|