- inertiajs file upload and validation via adonisjs

- npm updates
2023-06-01 14:29:56 +02:00 · 2023-06-01 14:29:56 +02:00 · e051a94b3b
commit e051a94b3b
parent 092a8a1c12
13 changed files with 1069 additions and 640 deletions
--- a/resources/js/Components/Map/draw.component.vue
+++ b/resources/js/Components/Map/draw.component.vue
@ -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 {
--- a/resources/js/Components/Map/map.component.vue
+++ b/resources/js/Components/Map/map.component.vue
@ -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 {
--- a/resources/js/Components/Map/zoom.component.vue
+++ b/resources/js/Components/Map/zoom.component.vue
@ -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 {
--- a/resources/js/Components/NavBar.vue
+++ b/resources/js/Components/NavBar.vue
@ -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">
--- a/resources/js/Dataset.ts
+++ b/resources/js/Dataset.ts
@ -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 {
--- a/resources/js/Pages/Submitter/Dataset/Create.vue
+++ b/resources/js/Pages/Submitter/Dataset/Create.vue
@ -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>
--- a/resources/js/Stores/main.ts
+++ b/resources/js/Stores/main.ts
@ -77,6 +77,10 @@ export const MainService = defineStore('main', {
            // }
        },

+        clearDataset() {
+            this.dataset = null;
+        },
+
        fetch(sampleDataKey) {
            // sampleDataKey= clients or history
            axios