Arno Kaimbacher
49bd96ee77
Some checks failed
CI Pipeline / japa-tests (push) Failing after 1m8s
- **AdminuserController.ts**: enable editing `first_name` and `last_name` for user creation and updates - **MimetypeController.ts**: add creation support for mimetypes with selectable extensions - **Models**: add `Mimetype` model (mime_type.ts); add `SnakeCaseNamingStrategy` for User model - **Validators**: - **updateDatasetValidator**: increase title length to 255 and description length to 2500 - **User Validators**: refine `createUserValidator` and `updateUserValidator` to include `first_name` and `last_name` - **vanilla_error_reporter**: improve error reporting for wildcard fields - **SKOS Query**: refine keyword request in `SearchCategoryAutocomplete.vue` - **UI Enhancements**: - improve icon design in wizard (Wizard.vue) - add components for mimetype creation (Create.vue and button in Index.vue) - **Routes**: update `routes.ts` to include new AdonisJS routes
1165 lines
62 KiB
Vue
1165 lines
62 KiB
Vue
<script setup lang="ts">
|
|
import { Head, useForm, usePage } from '@inertiajs/vue3';
|
|
import { ref, watch, computed, ComputedRef } from 'vue';
|
|
import FormValidationErrors from '@/Components/FormValidationErrors.vue';
|
|
import { Dataset, Title, Subject } from '@/Dataset';
|
|
import {
|
|
mdiDatabasePlus,
|
|
mdiMinusCircle,
|
|
mdiPlusCircle,
|
|
mdiFinance,
|
|
mdiInformationOutline,
|
|
mdiBookOpenPageVariant,
|
|
mdiImageText,
|
|
mdiEarthPlus,
|
|
mdiAlertBoxOutline,
|
|
mdiTrashCan
|
|
} 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 FormCheckRadioGroup from '@/Components/FormCheckRadioGroup.vue';
|
|
import BaseButton from '@/Components/BaseButton.vue';
|
|
import { stardust } from '@eidellev/adonis-stardust/client';
|
|
// import { Inertia } from '@inertiajs/inertia';
|
|
import CardBoxModal from '@/Components/CardBoxModal.vue';
|
|
import BaseIcon from '@/Components/BaseIcon.vue';
|
|
|
|
import IconWizard from '@/Components/Icons/Wizard.vue';
|
|
import IconMandatory from '@/Components/Icons/Mandatory.vue';
|
|
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 MapComponent from '@/Components/Map/map.component.vue';
|
|
import { MapOptions } from '@/Components/Map/MapOptions';
|
|
// import { LatLngBoundsExpression } from 'leaflet/src/geo/LatLngBounds';
|
|
import { LatLngBoundsExpression } from 'leaflet';
|
|
import { LayerOptions } from '@/Components/Map/LayerOptions';
|
|
import TableKeywords from '@/Components/TableKeywords.vue';
|
|
import NotificationBar from '@/Components/NotificationBar.vue';
|
|
import FileUploadComponent from '@/Components/FileUpload.vue';
|
|
import Person from '#models/person';
|
|
|
|
const props = defineProps({
|
|
licenses: {
|
|
type: Object,
|
|
default: () => ({}),
|
|
},
|
|
doctypes: {
|
|
type: Object,
|
|
default: () => ({}),
|
|
},
|
|
titletypes: {
|
|
type: Object,
|
|
default: () => ({}),
|
|
},
|
|
descriptiontypes: {
|
|
type: Object,
|
|
default: () => ({}),
|
|
},
|
|
projects: {
|
|
type: Object,
|
|
default: () => ({}),
|
|
},
|
|
referenceIdentifierTypes: {
|
|
type: Object,
|
|
default: () => ({}),
|
|
},
|
|
relationTypes: {
|
|
type: Object,
|
|
default: () => ({}),
|
|
},
|
|
contributorTypes: {
|
|
type: Object,
|
|
default: () => ({}),
|
|
},
|
|
subjectTypes: {
|
|
type: Object,
|
|
default: () => ({}),
|
|
},
|
|
errors: {
|
|
type: Object,
|
|
default: () => ({}),
|
|
},
|
|
});
|
|
|
|
const flash: ComputedRef<any> = computed(() => {
|
|
// let test = usePage();
|
|
// console.log(test);
|
|
return usePage().props.flash;
|
|
});
|
|
|
|
const mainService = MainService();
|
|
|
|
// let serrors = reactive([]);
|
|
|
|
// const form = useForm({
|
|
// language: '',
|
|
// licenses: [],
|
|
// type: '',
|
|
// titles: [{ value: '', type: 'Main', language: Dataset.language }],
|
|
// });
|
|
// let language: (string | Ref<string>) = ref('');
|
|
let language = ref('');
|
|
let dataset: Dataset;
|
|
if (Object.keys(mainService.dataset).length == 0) {
|
|
// language = ref('');
|
|
dataset = {
|
|
language: language.value,
|
|
licenses: [],
|
|
rights: false,
|
|
type: '',
|
|
creating_corporation: 'Tethys RDR',
|
|
titles: [{ value: '', type: 'Main', language: language.value }],
|
|
descriptions: [{ value: '', type: 'Abstract', language: language.value }],
|
|
authors: [],
|
|
contributors: [],
|
|
project_id: undefined,
|
|
embargo_date: '',
|
|
coverage: {
|
|
x_min: undefined,
|
|
y_min: undefined,
|
|
x_max: undefined,
|
|
y_max: undefined,
|
|
elevation_min: undefined,
|
|
elevation_max: undefined,
|
|
elevation_absolut: undefined,
|
|
depth_min: undefined,
|
|
depth_max: undefined,
|
|
depth_absolut: undefined,
|
|
time_min: undefined,
|
|
time_max: undefined,
|
|
time_absolut: undefined,
|
|
},
|
|
// errors: undefined,
|
|
subjects: [
|
|
{ value: '', type: 'uncontrolled', language: language.value },
|
|
{ value: '', type: 'uncontrolled', language: language.value },
|
|
{ value: '', type: 'uncontrolled', language: language.value },
|
|
],
|
|
references: [],
|
|
files: [],
|
|
// upload: { label: 'test', sorting: 0 },
|
|
};
|
|
// Set the form's current values as the new defaults...
|
|
// mainService.setDataset(dataset, language);
|
|
} else {
|
|
// console.log(mainService.dataset);
|
|
language.value = mainService.dataset.language;
|
|
|
|
// dataset = mainService.dataset;
|
|
dataset = {
|
|
language: mainService.dataset.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,
|
|
coverage: mainService.dataset.coverage,
|
|
subjects: mainService.dataset.subjects,
|
|
references: mainService.dataset.references,
|
|
files: mainService.dataset.files,
|
|
// upload: mainService.dataset.upload,
|
|
};
|
|
// 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,
|
|
// type: '',
|
|
// creating_corporation: 'Tethys RDR',
|
|
// titles: [{ value: '', type: 'Main', language: language }],
|
|
// descriptions: [{ value: '', type: 'Abstract', language: language }],
|
|
// });
|
|
let form = useForm<Dataset>(dataset as Dataset);
|
|
// form.defaults();
|
|
|
|
// const emit = defineEmits(['update:modelValue', 'setRef']);
|
|
// computed({
|
|
// get: () => form.rights,
|
|
// set: (value) => {
|
|
// emit('update:modelValue', value);
|
|
// },
|
|
// });
|
|
|
|
watch(language, (currentValue) => {
|
|
if (currentValue != "") {
|
|
form.language = currentValue;
|
|
const mainTitle = form.titles?.find((title) => title.type === 'Main');
|
|
if (mainTitle) {
|
|
mainTitle.language = currentValue;
|
|
}
|
|
const mainAbstract = form.descriptions?.find((desc) => desc.type === 'Abstract');
|
|
if (mainAbstract) {
|
|
mainAbstract.language = currentValue;
|
|
}
|
|
mainService.setDataset(form.data());
|
|
}
|
|
});
|
|
|
|
let elevation = ref('no_elevation');
|
|
watch(elevation, (currentValue) => {
|
|
if (currentValue == 'absolut') {
|
|
form.coverage.elevation_min = undefined;
|
|
form.coverage.elevation_max = undefined;
|
|
} else if (currentValue == 'range') {
|
|
form.coverage.elevation_absolut = undefined;
|
|
} else {
|
|
form.coverage.elevation_absolut = undefined;
|
|
form.coverage.elevation_min = undefined;
|
|
form.coverage.elevation_max = undefined;
|
|
}
|
|
});
|
|
let depth = ref('no_depth');
|
|
watch(depth, (currentValue) => {
|
|
if (currentValue == 'absolut') {
|
|
form.coverage.depth_min = undefined;
|
|
form.coverage.depth_max = undefined;
|
|
} else if (currentValue == 'range') {
|
|
form.coverage.depth_absolut = undefined;
|
|
} else {
|
|
form.coverage.depth_absolut = undefined;
|
|
form.coverage.depth_min = undefined;
|
|
form.coverage.depth_max = undefined;
|
|
}
|
|
});
|
|
// let time= "no_time";
|
|
|
|
const isModalActive = ref(false);
|
|
const formStep = ref(1);
|
|
|
|
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';
|
|
|
|
// const submit = async () => {
|
|
// await router.post(stardust.route('user.store'), form, {
|
|
// onSuccess: () => {
|
|
// form.reset(), (formStep.value = 1);
|
|
// },
|
|
// });
|
|
// };
|
|
|
|
const nextStep = async () => {
|
|
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
|
|
.transform((data) => ({
|
|
...data,
|
|
rights: form.rights && form.rights == true ? 'true' : 'false',
|
|
}))
|
|
.post(route, {
|
|
onSuccess: () => {
|
|
// console.log(form.data());
|
|
mainService.setDataset(form.data());
|
|
formStep.value++;
|
|
},
|
|
});
|
|
};
|
|
|
|
const prevStep = () => {
|
|
formStep.value--;
|
|
};
|
|
|
|
const submit = async () => {
|
|
let route = stardust.route('dataset.submit');
|
|
|
|
const files = form.files.map((obj) => {
|
|
return new File([obj.blob], obj.label, { type: obj.type, lastModified: obj.lastModified });
|
|
});
|
|
|
|
// formStep.value++;
|
|
await form
|
|
.transform((data) => ({
|
|
...data,
|
|
files: files,
|
|
rights: form.rights && form.rights == true ? 'true' : 'false',
|
|
}))
|
|
.post(route, {
|
|
// forceFormData: true,
|
|
onSuccess: () => {
|
|
// console.log(form.data());
|
|
// mainService.clearDataset();
|
|
// mainService.setDataset(form.data());
|
|
// formStep.value++;
|
|
// form.reset();
|
|
|
|
language.value = '';
|
|
formStep.value = 1;
|
|
let 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: '',
|
|
coverage: {
|
|
x_min: undefined,
|
|
y_min: undefined,
|
|
x_max: undefined,
|
|
y_max: undefined,
|
|
elevation_min: undefined,
|
|
elevation_max: undefined,
|
|
elevation_absolut: undefined,
|
|
depth_min: undefined,
|
|
depth_max: undefined,
|
|
depth_absolut: undefined,
|
|
time_min: undefined,
|
|
time_max: undefined,
|
|
time_absolut: undefined,
|
|
},
|
|
// errors: undefined,
|
|
subjects: [
|
|
{ value: '', type: 'uncontrolled', language: language.value },
|
|
{ value: '', type: 'uncontrolled', language: language.value },
|
|
{ value: '', type: 'uncontrolled', language: language.value },
|
|
],
|
|
references: [],
|
|
files: [] as Array<File>,
|
|
upload: { label: 'test', sorting: 0 },
|
|
};
|
|
form = useForm<Dataset>(dataset);
|
|
mainService.setDataset(form.data());
|
|
},
|
|
});
|
|
};
|
|
|
|
const addNewAuthor = () => {
|
|
let newAuthor = { status: false, first_name: '', last_name: '', email: '', academic_title: '', identifier_orcid: '', name_type: 'Personal' };
|
|
form.authors.push(newAuthor);
|
|
};
|
|
|
|
const addTitle = () => {
|
|
let newTitle: Title = { value: '', language: '', type: '' };
|
|
//this.dataset.files.push(uploadedFiles[i]);
|
|
form.titles.push(newTitle);
|
|
};
|
|
const removeTitle = (key: number) => {
|
|
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: number) => {
|
|
form.descriptions.splice(key, 1);
|
|
};
|
|
|
|
const onAddAuthor = (person: 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: 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);
|
|
}
|
|
};
|
|
// const onMapInitializedEvent = "onMapInitializedEvent";
|
|
const onMapInitialized = (newItem: any) => {
|
|
// notify({ type: 'info', text: message });
|
|
console.log(newItem);
|
|
};
|
|
|
|
/*
|
|
adds a new Keyword
|
|
*/
|
|
const addKeyword = () => {
|
|
let newSubject: Subject = { value: 'test', language: '', type: 'uncontrolled' };
|
|
//this.dataset.files.push(uploadedFiles[i]);
|
|
form.subjects.push(newSubject);
|
|
};
|
|
|
|
const addReference = () => {
|
|
let newReference = { value: '', label: '', relation: '', type: '' };
|
|
//this.dataset.files.push(uploadedFiles[i]);
|
|
form.references.push(newReference);
|
|
};
|
|
/*
|
|
Removes a selected reference
|
|
*/
|
|
const removeReference = (key: number) => {
|
|
form.references.splice(key, 1);
|
|
};
|
|
/*
|
|
|
|
// const onChangeFile = (event) => {
|
|
// // let uploadedFile = event.target.files[0];
|
|
|
|
// let fileName = String(event.target.files[0].name.replace(/\.[^/.]+$/, ''));
|
|
// form.file = event.target.files[0];
|
|
// form.upload.label = fileName;
|
|
// // form.upload = file;
|
|
// // console.log(file.file);
|
|
// };
|
|
/*
|
|
Removes a selected keyword
|
|
*/
|
|
// const removeKeyword = (key) => {
|
|
// form.subjects.splice(key, 1);
|
|
// };
|
|
</script>
|
|
|
|
<template>
|
|
<CardBoxModal v-model="isModalActive" title="Einverständniserklärung *">
|
|
Mit dem Setzen des Hakens bestätige ich hiermit
|
|
<ul class="list-decimal">
|
|
<li>
|
|
die Data Policy von Tethys RDR sowie die Terms & Conditions von Tethys gelesen und verstanden zu haben
|
|
(<a href="/docs/HandbuchTethys.pdf" target="_blank">siehe hier</a>)
|
|
</li>
|
|
<li>das Einverständnis aller Co-Autoren über die bevorstehende Datenpublikation schriftlich eingeholt zu
|
|
haben
|
|
</li>
|
|
<li>sowohl mit der Data Policy als auch mit den Terms & Conditions einverstanden zu sein</li>
|
|
</ul>
|
|
</CardBoxModal>
|
|
|
|
<LayoutAuthenticated>
|
|
|
|
<Head title="Submit Dataset" />
|
|
<SectionMain>
|
|
<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>
|
|
<NotificationBar v-if="flash.message" color="success" :icon="mdiAlertBoxOutline">
|
|
{{ flash.message }}
|
|
</NotificationBar>
|
|
<FormValidationErrors v-bind:errors="errors" />
|
|
|
|
<CardBox>
|
|
<div class="mx-4 p-4">
|
|
<div class="flex items-center">
|
|
<!-- <label>{{ form.titles[0].language }}</label>
|
|
<label>{{ form.language }}</label> -->
|
|
<icon-wizard :is-current="formStep == 1" :is-checked="formStep > 1" :label="'Language'">
|
|
<icon-language></icon-language>
|
|
</icon-wizard>
|
|
|
|
<icon-wizard :is-current="formStep == 2" :is-checked="formStep > 2" :label="'Mandatory'">
|
|
<icon-mandatory></icon-mandatory>
|
|
</icon-wizard>
|
|
|
|
<icon-wizard :is-current="formStep == 3" :is-checked="formStep > 3" :label="'Recommended'">
|
|
<icon-recommendet></icon-recommendet>
|
|
</icon-wizard>
|
|
|
|
<icon-wizard :is-current="formStep == 4" :is-checked="false" :label="'Confirm'"
|
|
:is-last-step="true">
|
|
<icon-confirm></icon-confirm>
|
|
</icon-wizard>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- mt-8: margin-top: 2rem; /* 32px */ 4 p-4: spacing 1rem 16px-->
|
|
<div class="mt-8 p-4">
|
|
<div v-if="formStep == 1">
|
|
<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 mx-2 flex-1">
|
|
<FormControl required v-model="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="Licenses" wrap-body :class="{ 'text-red-400': form.errors.licenses }"
|
|
class="mt-8 w-full mx-2 flex-1">
|
|
<FormCheckRadioGroup v-model="form.licenses" name="roles" is-column
|
|
:options="props.licenses" />
|
|
</FormField>
|
|
|
|
<!-- <label for="rights">
|
|
<input class="form-checkbox" name="rights" id="rights" type="checkbox" v-model="dataset.rights" />
|
|
terms and conditions
|
|
</label> -->
|
|
<FormField label="Rights" help="You must agree to continue" wrap-body
|
|
:class="{ 'text-red-400': form.errors.rights }" class="mt-8 w-full mx-2 flex-1 flex-col">
|
|
<label for="rights" class="checkbox mr-6 mb-3 last:mr-0">
|
|
<input type="checkbox" id="rights" required v-model="form.rights" />
|
|
<span class="check" />
|
|
<a class="pl-2" target="_blank">terms and conditions </a>
|
|
<!-- <BaseButton color="modern" :icon="mdiInformationOutline" small @click="isModalActive = true" /> -->
|
|
<BaseIcon v-if="mdiInformationOutline" :path="mdiInformationOutline"
|
|
@click.prevent="isModalActive = true" />
|
|
</label>
|
|
</FormField>
|
|
<div class="text-red-400 text-sm" v-if="errors.rights && Array.isArray(errors.rights)">
|
|
<!-- {{ errors.password_confirmation }} -->
|
|
{{ errors.rights.join(', ') }}
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="formStep == 2">
|
|
<!-- <CardBox title="Performance" :icon="mdiFinance" :header-icon="mdiReload" class="mb-6"> -->
|
|
<div class="flex flex-col md:flex-row">
|
|
<FormField label="Dataset Type *" help="required: dataset type"
|
|
:class="{ 'text-red-400': form.errors.type }" class="w-full mx-2 flex-1">
|
|
<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>
|
|
<!-- <div class="w-full mx-2 flex-1 svelte-1l8159u"></div> -->
|
|
<!-- Creating Corporation -->
|
|
<FormField label="Creating Corporation *"
|
|
:class="{ 'text-red-400': form.errors.creating_corporation }"
|
|
class="w-full mx-2 flex-1">
|
|
<FormControl required v-model="form.creating_corporation" type="text"
|
|
placeholder="[enter creating corporation]" :is-read-only="true">
|
|
<div class="text-red-400 text-sm"
|
|
v-if="form.errors.creating_corporation && Array.isArray(form.errors.creating_corporation)">
|
|
{{ form.errors.creating_corporation.join(', ') }}
|
|
</div>
|
|
</FormControl>
|
|
</FormField>
|
|
</div>
|
|
<!-- <BaseDivider /> -->
|
|
|
|
<!-- titles -->
|
|
<CardBox class="mb-6 shadow" :has-form-data="true" title="Titles" :icon="mdiFinance"
|
|
:header-icon="mdiPlusCircle" v-on:header-icon-click="addTitle()">
|
|
<!-- <div class="py-6 border-t border-gray-100 dark:border-slate-800"> -->
|
|
<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 mx-2 flex-1">
|
|
<FormControl required v-model="form.titles[0].value" type="textarea"
|
|
placeholder="[enter main title]" :show-char-count="true"
|
|
:max-input-length="255">
|
|
<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 mx-2 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 /> -->
|
|
<div v-if="form.titles.length > 1">
|
|
<div v-for="(item, index) in form.titles">
|
|
<div class="flex flex-col md:flex-row" v-if="item.type != 'Main'">
|
|
<FormField v-if="item.type != 'Main'" label="Remove">
|
|
<BaseButton :icon="mdiMinusCircle" class="mt-1"
|
|
@click.prevent="removeTitle(index)" color="modern" small />
|
|
</FormField>
|
|
<FormField label="Title Value *"
|
|
:class="{ 'text-red-400': form.errors[`titles.${index}.value`] }"
|
|
class="w-full mx-2 flex-1">
|
|
<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>
|
|
</FormField>
|
|
<FormField label="Title Type*"
|
|
:class="{ 'text-red-400': form.errors[`titles.${index}.type`] }"
|
|
class="w-full mx-2 flex-1">
|
|
<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>
|
|
</FormField>
|
|
<FormField label="Title Language*"
|
|
:class="{ 'text-red-400': form.errors[`titles.${index}.language`] }"
|
|
class="w-full mx-2 flex-1">
|
|
<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>
|
|
</FormField>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- </div> -->
|
|
</CardBox>
|
|
|
|
<!-- Descriptions -->
|
|
<CardBox :icon="mdiImageText" class="mb-6 shadow" :has-form-data="true" title="Descriptions"
|
|
: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 mx-2 flex-1">
|
|
<FormControl required v-model="form.descriptions[0].value" type="textarea"
|
|
placeholder="[enter main abstract]" :show-char-count="true"
|
|
:max-input-length="2500">
|
|
<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 mx-2 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>
|
|
<label v-if="form.descriptions.length > 1">additional descriptions: </label>
|
|
<!-- <BaseButton :icon="mdiPlusCircle" @click.prevent="addTitle()" color="modern" rounded-full small /> -->
|
|
<div v-if="form.descriptions.length > 1">
|
|
<div v-for="(item, index) in form.descriptions">
|
|
<div class="flex flex-col md:flex-row" v-if="item.type != 'Abstract'">
|
|
<FormField v-if="item.type != 'Abstract'" label="Remove">
|
|
<BaseButton :icon="mdiMinusCircle" class="mt-1"
|
|
@click.prevent="removeDescription(index)" color="modern" small />
|
|
</FormField>
|
|
<FormField label="Description Value *"
|
|
:class="{ 'text-red-400': form.errors[`descriptions.${index}.value`] }"
|
|
class="w-full mx-2 flex-1">
|
|
<FormControl required v-model="form.descriptions[index].value" type="text"
|
|
placeholder="[enter additional description]" :show-char-count="true"
|
|
:max-input-length="2500">
|
|
<div class="text-red-400 text-sm" v-if="form.errors[`descriptions.${index}.value`] &&
|
|
Array.isArray(form.errors[`descriptions.${index}.value`])
|
|
">
|
|
{{ form.errors[`descriptions.${index}.value`].join(', ') }}
|
|
</div>
|
|
</FormControl>
|
|
</FormField>
|
|
<FormField label="Description Type *"
|
|
:class="{ 'text-red-400': form.errors[`descriptions.${index}.type`] }"
|
|
class="w-full mx-2 flex-1">
|
|
<FormControl required v-model="form.descriptions[index].type" type="select"
|
|
:options="descriptiontypes" placeholder="[select description type]">
|
|
<div class="text-red-400 text-sm" v-if="form.errors[`descriptions.${index}.type`] &&
|
|
Array.isArray(form.errors[`descriptions.${index}.type`])
|
|
">
|
|
{{ form.errors[`descriptions.${index}.type`].join(', ') }}
|
|
</div>
|
|
</FormControl>
|
|
</FormField>
|
|
<FormField label="Description Language*"
|
|
:class="{ 'text-red-400': form.errors[`titdescriptionsles.${index}.language`] }"
|
|
class="w-full mx-2 flex-1">
|
|
<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 && Array.isArray(form.errors[`descriptions.${index}.language`])">
|
|
{{ form.errors[`descriptions.${index}.language`].join(', ') }}
|
|
</div>
|
|
</FormControl>
|
|
</FormField>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</CardBox>
|
|
|
|
<!-- authors -->
|
|
<CardBox class="mb-6 shadow" has-table title="Creators" :icon="mdiBookOpenPageVariant">
|
|
<SearchAutocomplete source="/api/persons" :response-property="'first_name'"
|
|
placeholder="search in person table...." v-on:person="onAddAuthor"></SearchAutocomplete>
|
|
|
|
<TablePersons :errors="form.errors" :persons="form.authors" :relation="'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>
|
|
<div class="w-full md:w-1/2">
|
|
<label class="block" for="additionalCreators">Add additional creator(s) if creator is
|
|
not in database</label>
|
|
<button class="bg-blue-500 text-white py-2 px-4 rounded-sm"
|
|
@click.prevent="addNewAuthor()">+</button>
|
|
</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" :relation="'contributors'"
|
|
v-if="form.contributors.length > 0" :contributortypes="contributorTypes"
|
|
:errors="form.errors" />
|
|
<div class="text-red-400 text-sm"
|
|
v-if="form.errors.contributors && Array.isArray(form.errors.contributors)">
|
|
{{ form.errors.contributors.join(', ') }}
|
|
</div>
|
|
</CardBox>
|
|
</div>
|
|
|
|
<!-- <label>To Do: Recommendet</label> -->
|
|
<div v-if="formStep == 3">
|
|
<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>
|
|
<CardBox class="mb-6 shadow" has-table title="Geo Location" :icon="mdiEarthPlus">
|
|
<!-- @onMapInitialized="onMapInitialized" -->
|
|
<!-- v-bind-event="{ mapId, name: mapId }" -->
|
|
<MapComponent :mapOptions="mapOptions" :baseMaps="baseMaps" :fitBounds="fitBounds"
|
|
:coverage="form.coverage" :mapId="mapId"
|
|
v-bind-event:onMapInitializedEvent="onMapInitialized"></MapComponent>
|
|
<!-- <label v-bind-event="{ for: mapId }" /> -->
|
|
|
|
<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" inputmode="numeric"
|
|
pattern="\d*" 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>
|
|
</CardBox>
|
|
|
|
<CardBox class="mb-6 shadow" has-table title="Coverage Information" :icon="mdiEarthPlus">
|
|
<!-- elevation menu -->
|
|
<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="elevation" value="absolut" />
|
|
absolut elevation (m)
|
|
</label>
|
|
<label for="elevation-option-two" class="pure-radio">
|
|
<input id="elevation-option-two" type="radio" v-model="elevation" value="range" />
|
|
elevation range (m)
|
|
</label>
|
|
<label for="elevation-option-three" class="pure-radio">
|
|
<input id="elevation-option-three" type="radio" v-model="elevation"
|
|
value="no_elevation" />
|
|
no elevation
|
|
</label>
|
|
</div>
|
|
<div class="flex flex-col md:flex-row">
|
|
<FormField v-if="elevation === 'absolut'" label="elevation absolut"
|
|
:class="{ 'text-red-400': form.errors['coverage.elevation_absolut'] }"
|
|
class="w-full mx-2 flex-1">
|
|
<FormControl required v-model="form.coverage.elevation_absolut" type="text"
|
|
placeholder="[enter elevation_absolut]">
|
|
<div class="text-red-400 text-sm"
|
|
v-if="Array.isArray(form.errors['coverage.elevation_absolut'])">
|
|
{{ form.errors['coverage.elevation_absolut'].join(', ') }}
|
|
</div>
|
|
</FormControl>
|
|
</FormField>
|
|
<FormField v-if="elevation === 'range'" label="elevation min"
|
|
:class="{ 'text-red-400': form.errors['coverage.elevation_min'] }"
|
|
class="w-full mx-2 flex-1">
|
|
<FormControl required v-model="form.coverage.elevation_min" type="text"
|
|
placeholder="[enter elevation_min]">
|
|
<div class="text-red-400 text-sm"
|
|
v-if="Array.isArray(form.errors['coverage.elevation_min'])">
|
|
{{ form.errors['coverage.elevation_min'].join(', ') }}
|
|
</div>
|
|
</FormControl>
|
|
</FormField>
|
|
<FormField v-if="elevation === 'range'" label="elevation max"
|
|
:class="{ 'text-red-400': form.errors['coverage.elevation_max'] }"
|
|
class="w-full mx-2 flex-1">
|
|
<FormControl required v-model="form.coverage.elevation_max" type="text"
|
|
placeholder="[enter elevation_max]">
|
|
<div class="text-red-400 text-sm"
|
|
v-if="Array.isArray(form.errors['coverage.elevation_max'])">
|
|
{{ form.errors['coverage.elevation_max'].join(', ') }}
|
|
</div>
|
|
</FormControl>
|
|
</FormField>
|
|
</div>
|
|
|
|
<!-- depth menu -->
|
|
<div class="lex flex-col md:flex-row mb-3">
|
|
<label for="depth-option-one" class="pure-radio">
|
|
<input id="depth-option-one" type="radio" v-model="depth" value="absolut" />
|
|
absolut depth (m)
|
|
</label>
|
|
<label for="depth-option-two" class="pure-radio">
|
|
<input id="depth-option-two" type="radio" v-model="depth" value="range" />
|
|
depth range (m)
|
|
</label>
|
|
<label for="depth-option-three" class="pure-radio">
|
|
<input id="depth-option-three" type="radio" v-model="depth" value="no_depth" />
|
|
no depth
|
|
</label>
|
|
</div>
|
|
<div class="flex flex-col md:flex-row">
|
|
<FormField v-if="depth === 'absolut'" label="depth absolut"
|
|
:class="{ 'text-red-400': form.errors['coverage.depth_absolut'] }"
|
|
class="w-full mx-2 flex-1">
|
|
<FormControl required v-model="form.coverage.depth_absolut" type="text"
|
|
placeholder="[enter depth_absolut]">
|
|
<div class="text-red-400 text-sm"
|
|
v-if="Array.isArray(form.errors['coverage.depth_absolut'])">
|
|
{{ form.errors['coverage.depth_absolut'].join(', ') }}
|
|
</div>
|
|
</FormControl>
|
|
</FormField>
|
|
<FormField v-if="depth === 'range'" label="depth min"
|
|
:class="{ 'text-red-400': form.errors['coverage.depth_min'] }"
|
|
class="w-full mx-2 flex-1">
|
|
<FormControl required v-model="form.coverage.depth_min" type="text"
|
|
placeholder="[enter depth_min]">
|
|
<div class="text-red-400 text-sm"
|
|
v-if="Array.isArray(form.errors['coverage.depth_min'])">
|
|
{{ form.errors['coverage.depth_min'].join(', ') }}
|
|
</div>
|
|
</FormControl>
|
|
</FormField>
|
|
<FormField v-if="depth === 'range'" label="depth max"
|
|
:class="{ 'text-red-400': form.errors['coverage.depth_max'] }"
|
|
class="w-full mx-2 flex-1">
|
|
<FormControl required v-model="form.coverage.depth_max" type="text"
|
|
placeholder="[enter depth_max]">
|
|
<div class="text-red-400 text-sm"
|
|
v-if="Array.isArray(form.errors['coverage.depth_max'])">
|
|
{{ form.errors['coverage.depth_max'].join(', ') }}
|
|
</div>
|
|
</FormControl>
|
|
</FormField>
|
|
</div>
|
|
</CardBox>
|
|
|
|
<CardBox class="mb-6 shadow" has-table title="Dataset References" :header-icon="mdiPlusCircle"
|
|
v-on:header-icon-click="addReference">
|
|
<table class="table-fixed border-green-900" v-if="form.references.length">
|
|
<thead>
|
|
<tr>
|
|
<th class="w-4/12">Value</th>
|
|
<th class="w-2/12">Type</th>
|
|
<th class="w-3/12">Relation</th>
|
|
<th class="w-2/12">Label</th>
|
|
<th class="w-1/12"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="(item, index) in form.references">
|
|
<td data-label="Reference Value">
|
|
<!-- <input name="Reference Value" class="form-control"
|
|
placeholder="[VALUE]" v-model="item.value" /> -->
|
|
<FormControl required v-model="item.value" :type="'text'"
|
|
placeholder="[VALUE]" :errors="form.errors.embargo_date">
|
|
<div class="text-red-400 text-sm"
|
|
v-if="form.errors[`references.${index}.value`] && Array.isArray(form.errors[`references.${index}.value`])">
|
|
{{ form.errors[`references.${index}.value`].join(', ') }}
|
|
</div>
|
|
</FormControl>
|
|
|
|
</td>
|
|
<td>
|
|
<FormControl required v-model="form.references[index].type" type="select"
|
|
:options="referenceIdentifierTypes" placeholder="[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>
|
|
</td>
|
|
|
|
<td>
|
|
<!-- {!! Form::select('Reference[Relation]', $relationTypes, null,
|
|
['placeholder' => '[relationType]', 'v-model' => 'item.relation',
|
|
'data-vv-scope' => 'step-2'])
|
|
!!} -->
|
|
<FormControl required v-model="form.references[index].relation"
|
|
type="select" :options="relationTypes" placeholder="[relation type]">
|
|
<div class="text-red-400 text-sm"
|
|
v-if="Array.isArray(form.errors[`references.${index}.relation`])">
|
|
{{ form.errors[`references.${index}.relation`].join(', ') }}
|
|
</div>
|
|
</FormControl>
|
|
</td>
|
|
<td data-label="Reference Label">
|
|
<!-- <input name="Reference Label" class="form-control" v-model="item.label" /> -->
|
|
<FormControl required v-model="form.references[index].label" type="text"
|
|
placeholder="[reference label]">
|
|
<div class="text-red-400 text-sm"
|
|
v-if="form.errors[`references.${index}.label`] && Array.isArray(form.errors[`references.${index}.label`])">
|
|
{{ form.errors[`references.${index}.label`].join(', ') }}
|
|
</div>
|
|
</FormControl>
|
|
</td>
|
|
<td class="before:hidden lg:w-1 whitespace-nowrap">
|
|
<!-- <BaseButton color="info" :icon="mdiEye" small @click="isModalActive = true" /> -->
|
|
<BaseButton color="danger" :icon="mdiTrashCan" small
|
|
@click.prevent="removeReference(index)" />
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</CardBox>
|
|
|
|
|
|
<CardBox class="mb-6 shadow" has-table title="Dataset Keywords" :icon="mdiEarthPlus"
|
|
:header-icon="mdiPlusCircle" v-on:header-icon-click="addKeyword">
|
|
<!-- <ul>
|
|
<li v-for="(subject, index) in form.subjects" :key="index">
|
|
{{ subject.value }} <BaseButton color="danger" :icon="mdiTrashCan" small @click.prevent="removeKeyword(index)" />
|
|
</li>
|
|
</ul> -->
|
|
<TableKeywords :keywords="form.subjects" :errors="form.errors" :subjectTypes="subjectTypes"
|
|
v-if="form.subjects.length > 0" />
|
|
</CardBox>
|
|
</div>
|
|
|
|
<div v-if="formStep == 4">
|
|
<!-- <progress v-if="form.progress" :value="form.progress.percentage" max="100">
|
|
{{ form.progress.percentage }}%
|
|
</progress> -->
|
|
<!-- <p v-if="isSaving">Uploading @{{ fileCount }} files...</p> -->
|
|
<!-- <div class="dropbox">
|
|
<input type="file" multiple name="files" @change="onChangeFile" class="input-file" />
|
|
<p>
|
|
Drag your file(s) here to begin<br />
|
|
or click to browse
|
|
</p>
|
|
</div> -->
|
|
|
|
<FileUploadComponent :files="form.files"></FileUploadComponent>
|
|
|
|
<div class="text-red-400 text-sm"
|
|
v-if="form.errors['file'] && Array.isArray(form.errors['file'])">
|
|
{{ form.errors['file'].join(', ') }}
|
|
</div>
|
|
<div class="text-red-400 text-sm"
|
|
v-if="form.errors['upload.label'] && Array.isArray(form.errors['upload.label'])">
|
|
{{ form.errors['upload.label'].join(', ') }}
|
|
</div>
|
|
<!-- <label v-if="form.upload">{{ form.upload?.label }}</label> -->
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<template #footer>
|
|
<div class="flex p-2 mt-4">
|
|
<button v-if="formStep > 1" @click="prevStep"
|
|
class="text-base hover:scale-110 focus:outline-none flex justify-center px-4 py-2 rounded font-bold cursor-pointer hover:bg-gray-200 bg-gray-100 text-gray-700 border duration-200 ease-in-out border-gray-600 transition">
|
|
Previous
|
|
</button>
|
|
|
|
<div class="flex-auto flex flex-row-reverse">
|
|
<button v-if="formStep < 4" @click="nextStep"
|
|
class="text-base ml-2 hover:scale-110 focus:outline-none flex justify-center px-4 py-2 rounded font-bold cursor-pointer hover:bg-teal-600 bg-teal-600 text-teal-100 border duration-200 ease-in-out border-teal-600 transition">
|
|
Next
|
|
</button>
|
|
|
|
<button v-if="formStep == 4" :disabled="form.processing"
|
|
:class="{ 'opacity-25': form.processing }"
|
|
class="text-base hover:scale-110 focus:outline-none flex justify-center px-4 py-2 rounded font-bold cursor-pointer hover:bg-teal-200 bg-teal-100 text-teal-700 border duration-200 ease-in-out border-teal-600 transition"
|
|
@click.stop="submit">
|
|
Save
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<progress v-if="form.progress" :value="form.progress.percentage" max="100">
|
|
{{ form.progress.percentage }}%
|
|
</progress>
|
|
</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">
|
|
<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>
|
|
</svg>
|
|
</div>
|
|
<!-- <div
|
|
class="fixed inset-0 flex items-center justify-center bg-gray-500 bg-opacity-50">
|
|
<svg class="animate-spin h-10 w-10 text-white" 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="M4 12a8 8 0 0116 0 8 8 0 01-16 0zm2 0a6 6 0 0112 0 6 6 0 01-12 0z"></path>
|
|
</svg>
|
|
</div> -->
|
|
|
|
</SectionMain>
|
|
</LayoutAuthenticated>
|
|
</template>
|
|
|
|
<style>
|
|
.dropbox {
|
|
outline: 2px dashed grey;
|
|
/* the dash box */
|
|
outline-offset: -10px;
|
|
background: lightcyan;
|
|
color: dimgray;
|
|
padding: 10px 0;
|
|
min-height: 200px;
|
|
/* minimum height */
|
|
position: relative;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.input-file {
|
|
opacity: 0;
|
|
/* invisible but it's there! */
|
|
width: 100%;
|
|
height: 200px;
|
|
position: absolute;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.dropbox:hover {
|
|
background: lightblue;
|
|
/* when mouse over to the drop zone, change color */
|
|
}
|
|
|
|
.dropbox p {
|
|
font-size: 1.2em;
|
|
text-align: center;
|
|
padding: 50px 0;
|
|
}
|
|
|
|
span.remove-file {
|
|
color: red;
|
|
cursor: pointer;
|
|
/* float: right; */
|
|
}
|
|
</style>
|