- update to AdonisJS 6

2024-03-14 20:25:27 +01:00 · 2024-03-14 20:25:27 +01:00 · cb51a4136f
commit cb51a4136f
parent f828ca4491
167 changed files with 21485 additions and 21212 deletions
--- a/resources/js/Components/Admin/Pagination.vue
+++ b/resources/js/Components/Admin/Pagination.vue
@ -9,50 +9,70 @@ const props = defineProps({
        default: () => ({}),
    },
 });
+// meta:
+// {total: 19, perPage: 5, currentPage: 1, lastPage: 4, firstPage: 1, …}
+// currentPage:
+// 1
+// firstPage:
+// 1
+// firstPageUrl:
+// '/?page=1'
+// lastPage:
+// 4
+// lastPageUrl:
+// '/?page=4'
+// nextPageUrl:
+// '/?page=2'
+// perPage:
+// 5
+// previousPageUrl:
+// null
+// total:
+// 19
 const nextPageLink = computed(() => {
    let url = new URL(document.location);
-    url.searchParams.set('page', props.data.current_page + 1);
+    url.searchParams.set('page', props.data.currentPage + 1);
    return url.href;
-    // return url + '&page=' + (Number(props.data.current_page) + 1);
+    // return url + '&page=' + (Number(props.data.currentPage) + 1);
 });
 const prevPageLink = computed(() => {
    let url = new URL(document.location);
-    url.searchParams.set('page', props.data.current_page - 1);
+    url.searchParams.set('page', props.data.currentPage - 1);
    return url.href;
-    // return url + '&page=' + (props.data.current_page - 1);
+    // return url + '&page=' + (props.data.currentPage - 1);
 });
 const toPage = computed(() => {
-    let currentPage = props.data.current_page;
-    let perPage = props.data.per_page;
+    let currentPage = props.data.currentPage;
+    let perPage = props.data.perPage;

-    if (props.data.current_page == props.data.last_page) {
+    if (props.data.currentPage == props.data.lastPage) {
        return props.data.total;
    } else {
        return currentPage * perPage;
    }
 });
 const fromPage = computed(() => {
-    let currentPage = props.data.current_page;
-    let perPage = props.data.per_page;
+    let currentPage = props.data.currentPage;
+    let perPage = props.data.perPage;
    return currentPage * perPage - (perPage - 1);
 });
 </script>

-<!-- current_page:
+<!-- currentPage:
 1
-first_page:
+firstPage:
 1
-first_page_url:
+firstPageUrl:
 '/?page=1'
-last_page:
+lastPage:
 3
-last_page_url:
+lastPageUrl:
 '/?page=3'
-next_page_url:
+nextPageUrl:
 '/?page=2'
-per_page:
+perPage:
 5
-previous_page_url:
+previousPageUrl:
 null
 total:
 15 -->
@ -62,22 +82,22 @@ total:
    <nav v-if="data.total > 3" role="navigation" aria-label="Pagination Navigation" class="flex items-center justify-between">
        <div class="flex justify-between flex-1 sm:hidden">
            <span
-                v-if="data.current_page <= 1"
+                v-if="data.currentPage <= 1"
                class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5 rounded-md"
            >
                Previous
            </span>
            <Link
                v-else
-                :href="data.previous_page_url"
+                :href="data.previousPageUrl"
                class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 rounded-md hover:text-gray-500 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150"
            >
                Previous
            </Link>

            <Link
-                v-if="data.current_page < data.last_page"
-                :href="data.next_page_url"
+                v-if="data.currentPage < data.lastPage"
+                :href="data.nextPageUrl"
                class="relative inline-flex items-center px-4 py-2 ml-3 text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 rounded-md hover:text-gray-500 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150"
            >
                Next
@ -105,7 +125,7 @@ total:

            <div>
                <span class="relative z-0 inline-flex shadow-sm rounded-md">
-                    <span v-if="props.data.current_page <= 1" aria-disabled="true" aria-label="Previous">
+                    <span v-if="props.data.currentPage <= 1" aria-disabled="true" aria-label="Previous">
                        <span
                            class="relative inline-flex items-center px-2 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default rounded-l-md leading-5"
                            aria-hidden="true"
@ -120,7 +140,7 @@ total:
                        </span>
                    </span>

-                    <!-- <Link v-else :href="data.previous_page_url" rel="prev" -->
+                    <!-- <Link v-else :href="data.previousPageUrl" rel="prev" -->
                    <Link
                        v-else
                        :href="prevPageLink"
@ -138,7 +158,7 @@ total:
                    </Link>

                    <!-- <template v-for="(link, key) in data.links">
-                        <template v-if="key > 0 && key < data.last_page + 1">
+                        <template v-if="key > 0 && key < data.lastPage + 1">
                            <span v-if="!link.active && link.url === null" :key="key" aria-disabled="true">
                                <span class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-700 bg-white border border-gray-300 cursor-default leading-5">{{ link.label }}</span>
                            </span>
@ -152,7 +172,7 @@ total:
                    </template> -->

                    <Link
-                        v-if="props.data.current_page < props.data.last_page"
+                        v-if="props.data.currentPage < props.data.lastPage"
                        :href="nextPageLink"
                        rel="next"
                        class="relative inline-flex items-center px-2 py-2 -ml-px text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-r-md leading-5 hover:text-gray-400 focus:z-10 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-500 transition ease-in-out duration-150"
--- a/resources/js/Components/Map/Control.ts
+++ b/resources/js/Components/Map/Control.ts
@ -1,5 +1,5 @@
 // import * as util from '../core/utilities';
-import { EventEmitter } from './EventEmitter';
+import { EventEmitter } from './EventEmitter.js';
 import type { Map } from 'leaflet/src/map/index';

 export abstract class Control<T> extends EventEmitter<T> {
--- a/resources/js/Pages/Auth/Login.vue
+++ b/resources/js/Pages/Auth/Login.vue
@ -97,10 +97,10 @@
 </template>

 <script setup lang="ts">
-import { useForm, Head } from '@inertiajs/vue3';
+import { useForm, Head, InertiaForm } from '@inertiajs/vue3';
 import { Ref, ref } from 'vue';
 // import { Head, Link, useForm } from '@inertiajs/inertia-vue3';
-import { mdiAccount, mdiAsterisk, mdiTwoFactorAuthentication, mdiContentSaveCheck, mdiLock } from '@mdi/js';
+import { mdiAccount, mdiAsterisk, mdiTwoFactorAuthentication, mdiContentSaveCheck } from '@mdi/js';
 import LayoutGuest from '@/Layouts/LayoutGuest.vue';
 import SectionFullScreen from '@/Components/SectionFullScreen.vue';
 import CardBox from '@/Components/CardBox.vue';
@ -173,7 +173,7 @@ defineProps({

 // const { version } = usePage();

-const form = useForm(() => ({
+const form: InertiaForm = useForm(() => ({
    email: '',
    password: '',
    remember: [],
@ -225,11 +225,12 @@ const form = useForm(() => ({

 const submit = async () => {
    await form
-        .transform((data) => ({
+        .transform((data: InertiaForm) => ({
            ...data,
            remember: form.remember && form.remember.length ? 'on' : '',
        }))
-        .post(stardust.route('login.store'), {
+        .post('/app/login', {
+        // .post(stardust.route('login.store'), {
            onFinish: () => {
                form.reset('password');
            },
@ -237,14 +238,14 @@ const submit = async () => {
 };


-const fa2Form = useForm(() => ({
+const fa2Form: InertiaForm = useForm(() => ({
    code: '',
    remember: [],
    login_id: ''
 }));
 const submitFa2Form = async () => {
    await fa2Form
-        .transform((data) => ({
+        .transform((data: InertiaForm) => ({
            ...data,
            remember: fa2Form.remember && fa2Form.remember.length ? 'on' : '',
            login_id: user_id.value
--- a/resources/js/Pages/Submitter/Dataset/Release.vue
+++ b/resources/js/Pages/Submitter/Dataset/Release.vue
@ -41,7 +41,7 @@ const form = useForm({
 // const isPreferationRequired = ref(false);
 const isPreferationRequired = computed(() => form.preferation === 'yes_preferation');

-const handleSubmit = async (e) => {
+const handleSubmit = async (e: Event) => {
    e.preventDefault();

    await form.put(stardust.route('dataset.releaseUpdate', [props.dataset.id]));
--- a/resources/js/Pages/Submitter/EditComponent.ts
+++ b/resources/js/Pages/Submitter/EditComponent.ts
@ -22,7 +22,7 @@ import TableKeywords from '@/Components/TableKeywords.vue';
 import FormValidationErrors from '@/Components/FormValidationErrors.vue';
 import FileUploadComponent from '@/Components/FileUpload.vue';
 import { MapOptions } from '@/Components/Map/MapOptions';
-import { LatLngBoundsExpression } from 'leaflet/src/geo/LatLngBounds';
+import { LatLngBoundsExpression } from 'leaflet/src/geo/LatLngBounds.js';
 import { LayerOptions } from '@/Components/Map/LayerOptions';

 import {
--- a/resources/js/Stores/time.service.ts
+++ b/resources/js/Stores/time.service.ts
@ -1,6 +1,7 @@
 import { defineStore } from 'pinia';
 // import axios from 'axios';
 // import dayjs from 'dayjs';
+import type { Map as LeafletMap } from 'leaflet' ;

 export const TimeService = defineStore('map', {
    state: () => ({
@ -12,7 +13,7 @@ export const TimeService = defineStore('map', {
            return this.mapService.get(id);
        },

-        setMap(id: string, map) {
+        setMap(id: string, map: LeafletMap) {
            this.mapService.set(id, map);
        },

--- a/resources/js/app.js
+++ b/resources/js/app.js
@ -13,7 +13,7 @@ import { darkModeKey, styleKey } from '@/config';
 const pinia = createPinia();
 import { EmitterPlugin } from '@/EmitterDirective';

-import { initRoutes } from '@eidellev/adonis-stardust/client';
+import { initRoutes } from '@eidellev/adonis-stardust/client/index.js';
 initRoutes();

 // import '@fontsource/archivo-black/index.css';
@ -23,22 +23,32 @@ createInertiaApp({
    progress: {
        // color: '#4B5563',
        color: '#22C55E',
-    },
-    //   resolve: (name) => {
-    //     const pages = import.meta.glob('./Pages/**/*.vue', { eager: true })
-    //     return pages[`./Pages/${name}.vue`]
-    //   },
+    },    
    // Webpack
    // resolve: (name) => require(`./Pages/${name}`),
    // resolve: (name) => require(`./Pages/${name}.vue`),
    // add default layout
-    resolve: (name) => {
-        const page = require(`./Pages/${name}.vue`).default;
+    // resolve: (name) => {
+    //     const page = require(`./Pages/${name}.vue`).default;
+    //     // if (!page.layout) {
+    //     // 	page.layout = DefaultLayout;
+    //     // }
+    //     return page;
+    // },
+    resolve: async (name) => {
+        // Dynamically import the Vue component using import
+        const { default: page } = await import(`./Pages/${name}.vue`);
+        // const page = require(`./Pages/${name}.vue`).default;
        // if (!page.layout) {
        // 	page.layout = DefaultLayout;
        // }
        return page;
    },
+    // resolve: async (name) => {
+    //     const firstPath = `@/Pages/${name}.vue`;
+    //     const module = await import(firstPath);
+    //     return module.default || null;
+    // },
    setup({ el, App, props, plugin }) {
        createApp({ render: () => h(App, props) })
            .use(plugin)
--- a/resources/views/app.edge
+++ b/resources/views/app.edge
@ -4,24 +4,20 @@
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  {{--
-  <link rel="icon" type="image/png" href="/favicon.ico"> --}}
-  <link rel="icon" type="image/png" href="/favicon.png">
-  {{--
-  <link rel="icon" href="/apps/theming/favicon/settings?v=ad28c447"> --}}
+  <meta name="msapplication-TileColor" content="#da532c">
+  <meta name="theme-color" content="#ffffff">
+
+  <!-- <link rel="icon" href="/apps/theming/favicon/settings?v=ad28c447"> -->
  <input type="hidden" id="initial-state-firstrunwizard-desktop"
    value="Imh0dHBzOi8vZ2l0ZWEuZ2VvbG9naWUuYWMuYXQvZ2VvbGJhL3RldGh5cy5iYWNrZW5kIg==">
-
-  @routes
-  @entryPointStyles('app')
-  @entryPointScripts('app')
-
-  {{-- <title>myapp</title> --}}
-
+  @routes('test')
 </head>

 <body>
-  @inertia()
+  @inertia({ as: 'div', class: 'h-full' })
+
+  @entryPointStyles('app')
+  @entryPointScripts('app')
 </body>

 </html>