geolba/tethys.backend
2
0
Fork 1
Code Issues 7 Pull Requests Actions Packages Projects Releases Wiki Activity

- inertiajs file upload and validation via adonisjs
All checks were successful
CI Pipeline / japa-tests (push) Successful in 52s
Details

Browse Source 
- npm updates
This commit is contained in:
Kaimbacher 2023-06-01 14:29:56 +02:00
parent 092a8a1c12
commit e051a94b3b
13 changed files with 1069 additions and 640 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
ace-manifest.json
View File

@ -398,6 +398,12 @@
"propertyName": "compactOutput",
"type": "boolean",
"description": "A compact single-line output"
},
{
"name": "disable-locks",
"propertyName": "disableLocks",
"type": "boolean",
"description": "Disable locks acquired to run migrations safely"
}
]
},
@ -441,6 +447,12 @@
"propertyName": "compactOutput",
"type": "boolean",
"description": "A compact single-line output"
},
{
"name": "disable-locks",
"propertyName": "disableLocks",
"type": "boolean",
"description": "Disable locks acquired to run migrations safely"
}
]
},
@ -491,6 +503,12 @@
"propertyName": "dryRun",
"type": "boolean",
"description": "Do not run actual queries. Instead view the SQL output"
},
{
"name": "disable-locks",
"propertyName": "disableLocks",
"type": "boolean",
"description": "Disable locks acquired to run migrations safely"
}
]
},
@ -528,6 +546,12 @@
"propertyName": "seed",
"type": "boolean",
"description": "Run seeders"
},
{
"name": "disable-locks",
"propertyName": "disableLocks",
"type": "boolean",
"description": "Disable locks acquired to run migrations safely"
}
]
},
@ -571,6 +595,12 @@
"propertyName": "dropTypes",
"type": "boolean",
"description": "Drop all custom types (Postgres only)"
},
{
"name": "disable-locks",
"propertyName": "disableLocks",
"type": "boolean",
"description": "Disable locks acquired to run migrations safely"
}
]
}

163
app/Controllers/Http/Submitter/DatasetController.ts
View File

@ -10,6 +10,7 @@ import Project from 'App/Models/Project';
// import { RenderResponse } from '@ioc:EidelLev/Inertia';
import { schema, CustomMessages, rules } from '@ioc:Adonis/Core/Validator';
import dayjs from 'dayjs';
// import Application from '@ioc:Adonis/Core/Application';
enum TitleTypes {
Main = 'Main',
@ -183,37 +184,23 @@ export default class DatasetController {
y_min: schema.number(),
y_max: schema.number(),
elevation_absolut: schema.number.optional(),
elevation_min: schema.number.optional([
rules.requiredIfExists('elevation_max')
]),
elevation_max: schema.number.optional([
rules.requiredIfExists('elevation_min')
]),
elevation_min: schema.number.optional([rules.requiredIfExists('elevation_max')]),
elevation_max: schema.number.optional([rules.requiredIfExists('elevation_min')]),
depth_absolut: schema.number.optional(),
depth_min: schema.number.optional([
rules.requiredIfExists('depth_max')
]),
depth_max: schema.number.optional([
rules.requiredIfExists('depth_min')
]),
depth_min: schema.number.optional([rules.requiredIfExists('depth_max')]),
depth_max: schema.number.optional([rules.requiredIfExists('depth_min')]),
}),
subjects: schema.array([rules.minLength(3)]).members(
schema.object().members({
value: schema.string({ trim: true }, [
rules.minLength(3),
rules.minLength(3),
rules.maxLength(255),
// rules.unique({ table: 'dataset_subjects', column: 'value' }),
]),
// type: schema.enum(Object.values(TitleTypes)),
language: schema.string({ trim: true }, [
rules.minLength(2),
rules.maxLength(255),
]),
language: schema.string({ trim: true }, [rules.minLength(2), rules.maxLength(255)]),
}),
),
});
try {
@ -227,27 +214,120 @@ export default class DatasetController {
}
return response.redirect().back();
}
// public async store({ request, response, session }: HttpContextContract) {
// // node ace make:validator CreateUser
// try {
// // Step 2 - Validate request body against the schema
// await request.validate(CreateUserValidator);
// // console.log({ payload });
// } catch (error) {
// // Step 3 - Handle errors
// // return response.badRequest(error.messages);
// throw error;
// }
// const input = request.only(['login', 'email', 'password']);
// const user = await User.create(input);
// if (request.input('roles')) {
// const roles: Array<number> = request.input('roles');
// await user.related('roles').attach(roles);
// }
public async store({ request, response, session }: HttpContextContract) {
const newDatasetSchema = schema.create({
// first step
language: schema.string({ trim: true }, [
rules.regex(/^[a-zA-Z0-9-_]+$/), //Must be alphanumeric with hyphens or underscores
]),
licenses: schema.array([rules.minLength(1)]).members(schema.number()), // define at least one license for the new dataset
rights: schema.string([rules.equalTo('true')]),
// second step
type: schema.string({ trim: true }, [rules.minLength(3), rules.maxLength(255)]),
creating_corporation: schema.string({ trim: true }, [rules.minLength(3), rules.maxLength(255)]),
titles: schema.array([rules.minLength(1)]).members(
schema.object().members({
value: schema.string({ trim: true }, [rules.minLength(3), rules.maxLength(255)]),
type: schema.enum(Object.values(TitleTypes)),
language: schema.string({ trim: true }, [
rules.minLength(2),
rules.maxLength(255),
rules.translatedLanguage('/language', 'type'),
]),
}),
),
descriptions: schema.array([rules.minLength(1)]).members(
schema.object().members({
value: schema.string({ trim: true }, [rules.minLength(3), rules.maxLength(255)]),
type: schema.enum(Object.values(DescriptionTypes)),
language: schema.string({ trim: true }, [
rules.minLength(2),
rules.maxLength(255),
rules.translatedLanguage('/language', 'type'),
]),
}),
),
authors: schema.array([rules.minLength(1)]).members(schema.object().members({ email: schema.string({ trim: true }) })),
// third step
project_id: schema.number.optional(),
embargo_date: schema.date.optional({ format: 'yyyy-MM-dd' }, [rules.after(10, 'days')]),
coverage: schema.object().members({
x_min: schema.number(),
x_max: schema.number(),
y_min: schema.number(),
y_max: schema.number(),
elevation_absolut: schema.number.optional(),
elevation_min: schema.number.optional([rules.requiredIfExists('elevation_max')]),
elevation_max: schema.number.optional([rules.requiredIfExists('elevation_min')]),
depth_absolut: schema.number.optional(),
depth_min: schema.number.optional([rules.requiredIfExists('depth_max')]),
depth_max: schema.number.optional([rules.requiredIfExists('depth_min')]),
}),
subjects: schema.array([rules.minLength(3)]).members(
schema.object().members({
value: schema.string({ trim: true }, [
rules.minLength(3),
rules.maxLength(255),
// rules.unique({ table: 'dataset_subjects', column: 'value' }),
]),
// type: schema.enum(Object.values(TitleTypes)),
language: schema.string({ trim: true }, [rules.minLength(2), rules.maxLength(255)]),
}),
),
file: schema.file({
size: '100mb',
extnames: ['jpg', 'gif', 'png'],
}),
upload: schema.object().members({
label: schema.string({ trim: true }, [rules.maxLength(255)]),
// session.flash('message', 'User has been created successfully');
// return response.redirect().toRoute('user.index');
// }
// label: schema.string({ trim: true }, [
// // rules.minLength(3),
// // rules.maxLength(255),
// ]),
}),
});
// node ace make:validator CreateUser
try {
// Step 2 - Validate request body against the schema
// await request.validate(CreateUserValidator);
await request.validate({ schema: newDatasetSchema, messages: this.messages });
// console.log({ payload });
} catch (error) {
// Step 3 - Handle errors
// return response.badRequest(error.messages);
throw error;
}
const coverImage = request.file('file');
if (coverImage) {
// clientName: 'Gehaltsschema.png'
// extname: 'png'
// fieldName: 'file'
// size: 135624
coverImage.fileName = 'test'; //request.input('upload.label');
//const datasetFolder = 'files/' . dataset->id;
// await coverImage.moveToDisk('./')
await coverImage.moveToDisk('/test_dataset', {
name: 'renamed-file-name.jpg',
overwrite: true, // overwrite in case of conflict
},'local');
// let path = coverImage.filePath;
}
// const user = await User.create(input);
// if (request.input('roles')) {
// const roles: Array<number> = request.input('roles');
// await user.related('roles').attach(roles);
// }
session.flash('message', 'Dataset has been created successfully');
// return response.redirect().toRoute('user.index');
return response.redirect().back();
}
public messages: CustomMessages = {
'minLength': '{{ field }} must be at least {{ options.minLength }} characters long',
@ -283,5 +363,8 @@ export default class DatasetController {
'subjects.*.value.minLength': 'keyword value must be at least {{ options.minLength }} characters long',
'subjects.*.type.required': 'keyword type is required',
'subjects.*.language.required': 'language of keyword is required',
'file.size': 'file size is to big',
'file.extnames': 'file extension is not supported',
};
}

7
config/drive.ts
View File

@ -7,7 +7,7 @@
import Env from '@ioc:Adonis/Core/Env';
import { driveConfig } from '@adonisjs/core/build/config';
import Application from '@ioc:Adonis/Core/Application';
// import Application from '@ioc:Adonis/Core/Application';
/*
|--------------------------------------------------------------------------
@ -28,7 +28,7 @@ export default driveConfig({
| the `DRIVE_DISK` environment variable.
|
*/
disk: Env.get('DRIVE_DISK'),
disk: Env.get('DRIVE_DISK', 'local'),
disks: {
/*
@ -53,7 +53,8 @@ export default driveConfig({
| files.
|
*/
root: Application.tmpPath('uploads'),
// root: Application.tmpPath('uploads'),
root: '/storage/app/public/files',
/*
|--------------------------------------------------------------------------

1138
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

4
public/assets/manifest.json
View File

@ -1,17 +1,17 @@
{
"assets/app.css": "http://localhost:8080/assets/app.css",
"assets/app.js": "http://localhost:8080/assets/app.js",
"assets/fonts/archivo-black-latin-ext-400-normal.woff": "http://localhost:8080/assets/fonts/archivo-black-latin-ext-400-normal.9a3ae50b.woff",
"assets/fonts/inter-latin-ext-400-normal.woff": "http://localhost:8080/assets/fonts/inter-latin-ext-400-normal.3ccf1334.woff",
"assets/fonts/archivo-black-latin-400-normal.woff": "http://localhost:8080/assets/fonts/archivo-black-latin-400-normal.3261f2bf.woff",
"assets/fonts/inter-latin-400-normal.woff": "http://localhost:8080/assets/fonts/inter-latin-400-normal.662f2907.woff",
"assets/fonts/inter-latin-ext-400-normal.woff2": "http://localhost:8080/assets/fonts/inter-latin-ext-400-normal.3a7a7652.woff2",
"assets/fonts/archivo-black-latin-400-normal.woff2": "http://localhost:8080/assets/fonts/archivo-black-latin-400-normal.fc847a1f.woff2",
"assets/fonts/inter-latin-400-normal.woff2": "http://localhost:8080/assets/fonts/inter-latin-400-normal.be7cb18d.woff2",
"assets/fonts/archivo-black-latin-ext-400-normal.woff2": "http://localhost:8080/assets/fonts/archivo-black-latin-ext-400-normal.21761451.woff2",
"assets/fonts/inter-cyrillic-ext-400-normal.woff": "http://localhost:8080/assets/fonts/inter-cyrillic-ext-400-normal.3c63e274.woff",
"assets/fonts/archivo-black-latin-400-normal.woff": "http://localhost:8080/assets/fonts/archivo-black-latin-400-normal.583e4fc9.woff",
"assets/fonts/inter-greek-400-normal.woff": "http://localhost:8080/assets/fonts/inter-greek-400-normal.b31b8612.woff",
"assets/fonts/inter-cyrillic-ext-400-normal.woff2": "http://localhost:8080/assets/fonts/inter-cyrillic-ext-400-normal.fcc125c4.woff2",
"assets/fonts/archivo-black-latin-ext-400-normal.woff": "http://localhost:8080/assets/fonts/archivo-black-latin-ext-400-normal.ce39b04f.woff",
"assets/fonts/inter-cyrillic-400-normal.woff": "http://localhost:8080/assets/fonts/inter-cyrillic-400-normal.3862a5ab.woff",
"assets/fonts/inter-greek-400-normal.woff2": "http://localhost:8080/assets/fonts/inter-greek-400-normal.0278a49f.woff2",
"assets/fonts/inter-greek-ext-400-normal.woff": "http://localhost:8080/assets/fonts/inter-greek-ext-400-normal.61350b97.woff",

20
resources/js/Components/Map/draw.component.vue
View File

@ -25,7 +25,7 @@ import { MapService } from '@/Stores/map.service';
import { Map } from 'leaflet/src/map/index';
// import { LayerGroup } from 'leaflet/src/layer/LayerGroup';
// import { LatLngBounds, Rectangle } from 'leaflet';
import { on, off , preventDefault } from 'leaflet/src/dom/DomEvent';
import { on, off, preventDefault } from 'leaflet/src/dom/DomEvent';
import { Rectangle } from 'leaflet/src/layer/vector/Rectangle';
import { LatLngBounds } from 'leaflet/src/geo/LatLngBounds';
@ -129,7 +129,7 @@ export default class DrawControlComponent extends Vue {
}
//TODO refactor: move cursor to styles
// this._map.domElement.style.cursor = 'crosshair';
this._map._container.style.cursor = "crosshair";
this._map._container.style.cursor = 'crosshair';
// this._tooltip.updateContent({text: this._initialLabelText});
this._map
.on('mousedown', this._onMouseDown, this)
@ -220,8 +220,20 @@ export default class DrawControlComponent extends Vue {
this._map.fire('Daw.Event.CREATED', { layer: rectangle, type: this.TYPE });
}
public drawShape(southWest, northEast) {
if (!this._shape) {
const bounds = new LatLngBounds(southWest, northEast);
this._shape = new Rectangle(bounds, this.options.shapeOptions);
// this._map.addLayer(this._shape);
this._map = this.mapService.getMap(this.mapId);
this._shape.addTo(this._map);
} else {
this._shape.setBounds(new LatLngBounds(southWest, northEast));
}
}
// from Draw Rectangle
_drawShape(latlng) {
private _drawShape(latlng) {
if (!this._shape) {
const bounds = new LatLngBounds(this._startLatLng, latlng);
this._shape = new Rectangle(bounds, this.options.shapeOptions);
@ -274,7 +286,7 @@ export default class DrawControlComponent extends Vue {
position: absolute;
left: 10px;
top: 100px;
z-index: 40;
z-index: 39;
}
.btn-group-vertical button {

124
resources/js/Components/Map/map.component.vue
View File

@ -3,7 +3,7 @@
<!-- <Map className="h-36" :center="state.center" :zoom="state.zoom"> // map component content </Map> -->
<div :id="mapId" class="map-container mapDesktop rounded">
<ZoomControlComponent ref="zoom" :mapId="mapId"></ZoomControlComponent>
<DrawControlComponent :mapId="mapId" :southWest="southWest" :northEast="northEast"></DrawControlComponent>
<DrawControlComponent ref="draw" :mapId="mapId" :southWest="southWest" :northEast="northEast"></DrawControlComponent>
</div>
</div>
</template>
@ -28,54 +28,51 @@ import { MapService } from '@/Stores/map.service';
import ZoomControlComponent from './zoom.component.vue';
import DrawControlComponent from './draw.component.vue';
import { Coverage } from '@/Dataset';
import {canvas} from 'leaflet/src/layer/vector/Canvas';
import {svg} from 'leaflet/src/layer/vector/SVG';
import { canvas } from 'leaflet/src/layer/vector/Canvas';
import { svg } from 'leaflet/src/layer/vector/SVG';
Map.include({
// @namespace Map; @method getRenderer(layer: Path): Renderer
// Returns the instance of `Renderer` that should be used to render the given
// `Path`. It will ensure that the `renderer` options of the map and paths
// are respected, and that the renderers do exist on the map.
getRenderer: function (layer) {
// @namespace Path; @option renderer: Renderer
// Use this specific instance of `Renderer` for this path. Takes
// precedence over the map's [default renderer](#map-renderer).
var renderer = layer.options.renderer || this._getPaneRenderer(layer.options.pane) || this.options.renderer || this._renderer;
// @namespace Map; @method getRenderer(layer: Path): Renderer
// Returns the instance of `Renderer` that should be used to render the given
// `Path`. It will ensure that the `renderer` options of the map and paths
// are respected, and that the renderers do exist on the map.
getRenderer: function (layer) {
// @namespace Path; @option renderer: Renderer
// Use this specific instance of `Renderer` for this path. Takes
// precedence over the map's [default renderer](#map-renderer).
var renderer = layer.options.renderer || this._getPaneRenderer(layer.options.pane) || this.options.renderer || this._renderer;
if (!renderer) {
renderer = this._renderer = this._createRenderer();
}
if (!renderer) {
renderer = this._renderer = this._createRenderer();
}
if (!this.hasLayer(renderer)) {
this.addLayer(renderer);
}
return renderer;
},
if (!this.hasLayer(renderer)) {
this.addLayer(renderer);
}
return renderer;
},
_getPaneRenderer: function (name) {
if (name === 'overlayPane' || name === undefined) {
return false;
}
_getPaneRenderer: function (name) {
if (name === 'overlayPane' || name === undefined) {
return false;
}
var renderer = this._paneRenderers[name];
if (renderer === undefined) {
renderer = this._createRenderer({pane: name});
this._paneRenderers[name] = renderer;
}
return renderer;
},
var renderer = this._paneRenderers[name];
if (renderer === undefined) {
renderer = this._createRenderer({ pane: name });
this._paneRenderers[name] = renderer;
}
return renderer;
},
_createRenderer: function (options) {
// @namespace Map; @option preferCanvas: Boolean = false
// Whether `Path`s should be rendered on a `Canvas` renderer.
// By default, all `Path`s are rendered in a `SVG` renderer.
return (this.options.preferCanvas && canvas(options)) || svg(options);
}
_createRenderer: function (options) {
// @namespace Map; @option preferCanvas: Boolean = false
// Whether `Path`s should be rendered on a `Canvas` renderer.
// By default, all `Path`s are rendered in a `SVG` renderer.
return (this.options.preferCanvas && canvas(options)) || svg(options);
},
});
const DEFAULT_BASE_LAYER_NAME = 'BaseLayer';
// const DEFAULT_BASE_LAYER_URL = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
const DEFAULT_BASE_LAYER_ATTRIBUTION = '&copy; <a target="_blank" href="http://osm.org/copyright">OpenStreetMap</a> contributors';
@ -121,7 +118,9 @@ export default class MapComponent extends Vue {
public baseMaps: LayerMap;
@Ref('zoom') private zoom: ZoomControlComponent;
@Ref('draw') private draw: DrawControlComponent;
// services:
mapService = MapService();
southWest;
@ -140,19 +139,16 @@ export default class MapComponent extends Vue {
mounted(): void {
this.initMap();
this.map.on('zoomend zoomlevelschange', this.zoom.updateDisabled, this.zoom);
}
unmounted() {
this.map.off('zoomend zoomlevelschange');
}
public deleteTest(): void {
this.onMapInitializedEvent.emit(this.mapId);
}
// @Emit(this.onMapInitializedEvent)
protected initMap(): void {
// let map: Map = (this.map = this.mapService.getMap(this.mapId));
let map: Map = (this.map = new Map(this.mapId, this.mapOptions));
this.mapService.setMap(this.mapId, map);
map.scrollWheelZoom.disable();
@ -162,14 +158,6 @@ export default class MapComponent extends Vue {
this.onMapInitializedEvent.emit(this.mapId);
this.addBaseMap();
// if (this.fitBounds) {
// this.map.fitBounds(this.fitBounds);
// }
this.southWest = toLatLng(46.5, 9.9);
this.northEast = toLatLng(48.9, 16.9);
const bounds = toLatLngBounds(this.southWest, this.northEast);
map.fitBounds(bounds);
const attributionControl = new Attribution().addTo(this.map);
attributionControl.setPrefix(false);
@ -198,6 +186,36 @@ export default class MapComponent extends Vue {
// Initialise the FeatureGroup to store editable layers
// let drawnItems = (this.drawnItems = new FeatureGroup());
// map.addLayer(drawnItems);
this.map.on('zoomend zoomlevelschange', this.zoom.updateDisabled, this.zoom);
// if (this.fitBounds) {
// this.map.fitBounds(this.fitBounds);
// }
if (this.coverage.x_min && this.coverage.y_min) {
this.southWest = toLatLng(this.coverage.y_min, this.coverage.x_min);
} else {
this.southWest = toLatLng(46.5, 9.9);
}
if (this.coverage.x_max && this.coverage.y_max) {
this.northEast = toLatLng(this.coverage.y_max, this.coverage.x_max);
} else {
this.northEast = toLatLng(48.9, 16.9);
} // this.northEast = toLatLng(48.9, 16.9);
const bounds = toLatLngBounds(this.southWest, this.northEast);
map.fitBounds(bounds);
if (this.coverage.x_min && this.coverage.x_max && this.coverage.y_min && this.coverage.y_max) {
let _southWest;
let _northEast;
if (this.coverage.x_min && this.coverage.y_min) {
_southWest = toLatLng(this.coverage.y_min, this.coverage.x_min);
}
if (this.coverage.x_max && this.coverage.y_max) {
_northEast = toLatLng(this.coverage.y_max, this.coverage.x_max);
}
this.draw.drawShape(_southWest, _northEast);
}
}
private addBaseMap(layerOptions?: LayerOptions): void {

2
resources/js/Components/Map/zoom.component.vue
View File

@ -100,7 +100,7 @@ export default class ZoomControlComponent extends Vue {
position: absolute;
left: 10px;
top: 10px;
z-index: 40;
z-index: 39;
}
.btn-group-vertical button {

2
resources/js/Components/NavBar.vue
View File

@ -83,7 +83,7 @@ const logout = async() => {
<template>
<nav
class="top-0 left-0 right-0 fixed bg-gray-50 h-14 z-50 w-screen transition-position xl:pl-60 lg:w-auto dark:bg-slate-800"
class="top-0 left-0 right-0 fixed bg-gray-50 h-14 z-40 w-screen transition-position xl:pl-60 lg:w-auto dark:bg-slate-800"
>
<div class="flex lg:items-stretch" :class="containerMaxW">
<div class="flex-1 items-stretch flex h-14">

11
resources/js/Dataset.ts
View File

@ -1,7 +1,7 @@
import { Ref } from 'vue';
export interface Dataset {
[key: string]: string | Ref<string>| boolean | Array<Title> | Array<Description>| Array<Person> | number | (IErrorMessage | undefined) | Coverage;
[key: string]: string | Ref<string>| boolean | Array<Title> | Array<Description>| Array<Person> | number | (IErrorMessage | undefined) | Coverage | TethysFile | File;
language: Ref<string>;
// licenses: Array<number>;
rights: boolean;
@ -16,7 +16,14 @@ export interface Dataset {
coverage: Coverage,
errors?: IErrorMessage;
// async (user): Promise<void>;
subjects: Array<Subject>
subjects: Array<Subject>,
file: File | undefined,
upload: TethysFile
}
export interface TethysFile {
label: string,
sorting: number,
}
export interface Subject {

177
resources/js/Pages/Submitter/Dataset/Create.vue
View File

@ -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>

4
resources/js/Stores/main.ts
View File

@ -77,6 +77,10 @@ export const MainService = defineStore('main', {
// }
},
clearDataset() {
this.dataset = null;
},
fetch(sampleDataKey) {
// sampleDataKey= clients or history
axios

27
start/routes.ts
View File

@ -95,8 +95,14 @@ Route.group(() => {
Route.post('/user/store', 'UsersController.store').as('user.store').middleware(['can:user-create']);
Route.get('/user/:id', 'UsersController.show').as('user.show').where('id', Route.matchers.number());
Route.get('/user/:id/edit', 'UsersController.edit').as('user.edit').where('id', Route.matchers.number()).middleware(['can:user-edit']);
Route.put('/user/:id/update', 'UsersController.update').as('user.update').where('id', Route.matchers.number()).middleware(['can:user-edit']);
Route.delete('/user/:id', 'UsersController.destroy').as('user.destroy').where('id', Route.matchers.number()).middleware(['can:user-delete']);
Route.put('/user/:id/update', 'UsersController.update')
.as('user.update')
.where('id', Route.matchers.number())
.middleware(['can:user-edit']);
Route.delete('/user/:id', 'UsersController.destroy')
.as('user.destroy')
.where('id', Route.matchers.number())
.middleware(['can:user-delete']);
// Route.resource('user', 'UsersController');
Route.get('/role', 'RoleController.index').as('role.index').middleware(['can:user-list']);
@ -104,8 +110,14 @@ Route.group(() => {
Route.post('/role/store', 'RoleController.store').as('role.store').middleware(['can:user-create']);
Route.get('/role/:id', 'RoleController.show').as('role.show').where('id', Route.matchers.number());
Route.get('/role/:id/edit', 'RoleController.edit').as('role.edit').where('id', Route.matchers.number()).middleware(['can:user-edit']);
Route.put('/role/:id/update', 'RoleController.update').as('role.update').where('id', Route.matchers.number()).middleware(['can:user-edit']);
Route.delete('/role/:id', 'RoleController.destroy').as('role.destroy').where('id', Route.matchers.number()).middleware(['can:user-delete']);
Route.put('/role/:id/update', 'RoleController.update')
.as('role.update')
.where('id', Route.matchers.number())
.middleware(['can:user-edit']);
Route.delete('/role/:id', 'RoleController.destroy')
.as('role.destroy')
.where('id', Route.matchers.number())
.middleware(['can:user-delete']);
})
.namespace('App/Controllers/Http/Admin')
.prefix('admin')
@ -133,9 +145,14 @@ Route.group(() => {
Route.post('/dataset/second/second-step', 'DatasetController.secondStep')
.as('dataset.second.step')
.middleware(['auth', 'can:dataset-submit']);
Route.post('/dataset/second/third-step', 'DatasetController.thirdStep')
Route.post('/dataset/second/third-step', 'DatasetController.thirdStep')
.as('dataset.third.step')
.middleware(['auth', 'can:dataset-submit']);
Route.post('/dataset/submit', 'DatasetController.store')
.as('dataset.submit')
.middleware(['auth', 'can:dataset-submit']);
// Route.get('/user/:id', 'UsersController.show').as('user.show').where('id', Route.matchers.number());
// Route.get('/user/:id/edit', 'UsersController.edit').as('user.edit').where('id', Route.matchers.number());
// Route.put('/user/:id/update', 'UsersController.update').as('user.update').where('id', Route.matchers.number());