forked from geolba/tethys.backend
- inertiajs file upload and validation via adonisjs
- npm updates
This commit is contained in:
parent
092a8a1c12
commit
e051a94b3b
13 changed files with 1069 additions and 640 deletions
|
|
@ -1,6 +1,6 @@
|
|||
<script setup lang="ts">
|
||||
import { Head, useForm } from '@inertiajs/vue3';
|
||||
import { ref, watch } from 'vue';
|
||||
import { Head, useForm, usePage } from '@inertiajs/vue3';
|
||||
import { ref, watch, computed, ComputedRef } from 'vue';
|
||||
|
||||
import { Dataset, Description, Title, Subject } from '@/Dataset';
|
||||
import {
|
||||
|
|
@ -42,6 +42,7 @@ import { MapOptions } from '@/Components/Map/MapOptions';
|
|||
import { LatLngBoundsExpression } from 'leaflet/src/geo/LatLngBounds';
|
||||
import { LayerOptions } from '@/Components/Map/LayerOptions';
|
||||
import TableKeywords from '@/Components/TableKeywords.vue';
|
||||
import NotificationBar from '@/Components/NotificationBar.vue';
|
||||
|
||||
const props = defineProps({
|
||||
licenses: {
|
||||
|
|
@ -70,8 +71,16 @@ const props = defineProps({
|
|||
},
|
||||
});
|
||||
|
||||
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: [],
|
||||
|
|
@ -112,11 +121,14 @@ if (Object.keys(mainService.dataset).length == 0) {
|
|||
},
|
||||
// errors: undefined,
|
||||
subjects: [
|
||||
{ value: '', type: 'uncontrolled', language: language.value },
|
||||
{ value: '', type: 'uncontrolled', language: language.value },
|
||||
{ value: '', type: 'uncontrolled', language: language.value },
|
||||
{ value: '', type: 'uncontrolled', language: language.value },
|
||||
{ value: '', type: 'uncontrolled', language: language.value },
|
||||
{ value: '', type: 'uncontrolled', language: language.value },
|
||||
],
|
||||
file: undefined,
|
||||
upload: { label: 'test', sorting: 0 },
|
||||
};
|
||||
// Set the form's current values as the new defaults...
|
||||
// mainService.setDataset(dataset, language);
|
||||
} else {
|
||||
// console.log(mainService.dataset);
|
||||
|
|
@ -137,6 +149,8 @@ if (Object.keys(mainService.dataset).length == 0) {
|
|||
embargo_date: mainService.dataset.embargo_date,
|
||||
coverage: mainService.dataset.coverage,
|
||||
subjects: mainService.dataset.subjects,
|
||||
file: mainService.dataset.file,
|
||||
upload: mainService.dataset.upload,
|
||||
};
|
||||
for (let index in mainService.dataset.titles) {
|
||||
let title: Title = mainService.dataset.titles[index];
|
||||
|
|
@ -161,7 +175,8 @@ if (Object.keys(mainService.dataset).length == 0) {
|
|||
// titles: [{ value: '', type: 'Main', language: language }],
|
||||
// descriptions: [{ value: '', type: 'Abstract', language: language }],
|
||||
// });
|
||||
const form = useForm<Dataset>(dataset);
|
||||
let form = useForm<Dataset>(dataset);
|
||||
// form.defaults();
|
||||
|
||||
// const emit = defineEmits(['update:modelValue', 'setRef']);
|
||||
// computed({
|
||||
|
|
@ -239,7 +254,6 @@ const nextStep = async () => {
|
|||
rights: form.rights && form.rights == true ? 'true' : 'false',
|
||||
}))
|
||||
.post(route, {
|
||||
form,
|
||||
onSuccess: () => {
|
||||
// console.log(form.data());
|
||||
mainService.setDataset(form.data());
|
||||
|
|
@ -252,6 +266,71 @@ const prevStep = () => {
|
|||
formStep.value--;
|
||||
};
|
||||
|
||||
const submit = async () => {
|
||||
let route = stardust.route('dataset.submit');
|
||||
|
||||
// this.currentStatus = STATUS_SAVING;
|
||||
// serrors = [];
|
||||
|
||||
// formStep.value++;
|
||||
await form
|
||||
.transform((data) => ({
|
||||
...data,
|
||||
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 },
|
||||
],
|
||||
file: undefined,
|
||||
upload: { label: 'test', sorting: 0 },
|
||||
};
|
||||
form = useForm<Dataset>(dataset);
|
||||
mainService.setDataset(form.data());
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const addTitle = () => {
|
||||
let newTitle: Title = { value: '', language: '', type: '' };
|
||||
//this.dataset.files.push(uploadedFiles[i]);
|
||||
|
|
@ -306,6 +385,16 @@ const addKeyword = () => {
|
|||
//this.dataset.files.push(uploadedFiles[i]);
|
||||
form.subjects.push(newSubject);
|
||||
};
|
||||
|
||||
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
|
||||
*/
|
||||
|
|
@ -338,6 +427,9 @@ const addKeyword = () => {
|
|||
color="white" rounded-full small /> -->
|
||||
{{ formStep }}
|
||||
</SectionTitleLineWithButton>
|
||||
<NotificationBar v-if="flash.message" color="success" :icon="mdiAlertBoxOutline">
|
||||
{{ flash.message }}
|
||||
</NotificationBar>
|
||||
|
||||
<CardBox>
|
||||
<div class="mx-4 p-4">
|
||||
|
|
@ -1005,12 +1097,29 @@ const addKeyword = () => {
|
|||
</li>
|
||||
</ul> -->
|
||||
<TableKeywords :keywords="form.subjects" :errors="form.errors" v-if="form.subjects.length > 0" />
|
||||
|
||||
</CardBox>
|
||||
</div>
|
||||
|
||||
<div v-if="formStep == 4">
|
||||
<label>To Do: File Upload</label>
|
||||
<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>
|
||||
<!-- <progress v-if="form.progress" :value="form.progress.percentage" max="100">
|
||||
{{ form.progress.percentage }}%
|
||||
</progress> -->
|
||||
<!-- <p v-if="isSaving">Uploading @{{ fileCount }} files...</p> -->
|
||||
</div>
|
||||
|
||||
<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>
|
||||
|
||||
|
|
@ -1033,15 +1142,55 @@ const addKeyword = () => {
|
|||
Next
|
||||
</button>
|
||||
|
||||
<!-- <button
|
||||
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"
|
||||
>
|
||||
Skip
|
||||
</button> -->
|
||||
<button
|
||||
v-if="formStep == 4"
|
||||
:disabled="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>
|
||||
</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>
|
||||
|
|
|
|||
Loading…
Add table
editor.link_modal.header
Reference in a new issue