From 93bedcdf5b7e365c6c3e36effbcef5a414cba331 Mon Sep 17 00:00:00 2001
From: dante di domenico <dante@didoda.com>
Date: Thu, 3 Oct 2024 13:08:04 +0200
Subject: [PATCH 01/20] refactor: ajax-login

---
 .../app/components/ajax-login/ajax-login.js   | 72 --------------
 .../app/components/ajax-login/ajax-login.vue  | 93 +++++++++++++++++++
 resources/js/app/pages/modules/view.vue       |  3 +-
 3 files changed, 95 insertions(+), 73 deletions(-)
 delete mode 100644 resources/js/app/components/ajax-login/ajax-login.js
 create mode 100644 resources/js/app/components/ajax-login/ajax-login.vue

diff --git a/resources/js/app/components/ajax-login/ajax-login.js b/resources/js/app/components/ajax-login/ajax-login.js
deleted file mode 100644
index fb2b06bdc..000000000
--- a/resources/js/app/components/ajax-login/ajax-login.js
+++ /dev/null
@@ -1,72 +0,0 @@
-import Vue from 'vue';
-
-export const AjaxLogin = Vue.extend({
-
-    template: `
-        <div class="ajax-login-modal" role="dialog">
-            <transition name="fade">
-                <div class="backdrop" @click="hide()" v-if="isOpen"></div>
-            </transition>
-            <transition name="slide">
-                <div class="ajax-login">
-                    <header>
-                        <span class="title" v-if="headerText"><: headerText :></span>
-                        <i class="icon-cancel-1 has-text-size-larger" @click="close()"></i>
-                    </header>
-                    <div class="content">
-                        <div class="message" v-if="message">
-                            <: message :>
-                        </div>
-                        <iframe title="Login form" :src="url" ref="iframe"></iframe>
-                    </div>
-                </div>
-            </transition>
-        </div>
-    `,
-    name: 'AjaxLogin',
-
-    props: {
-        headerText: {
-            type: String,
-            default: null,
-        },
-        message: {
-            type: String,
-            default: null,
-        },
-    },
-
-    data() {
-        return {
-            isOpen: false,
-            url: `${BEDITA.base}/login`,
-        };
-    },
-
-    mounted() {
-        window.addEventListener('message', this.checkLogin);
-        this.isOpen = true;
-    },
-
-    methods: {
-        checkLogin(message) {
-            if (message.data !== 'login') {
-                return;
-            }
-
-            this.$emit('login');
-            this.close();
-        },
-
-        close() {
-            this.isOpen = false;
-            window.removeEventListener('message', this.checkLogin);
-
-            if (this.$el.parentNode) {
-                this.$el.parentNode.removeChild(this.$el);
-            }
-
-            this.$destroy();
-        }
-    },
-});
diff --git a/resources/js/app/components/ajax-login/ajax-login.vue b/resources/js/app/components/ajax-login/ajax-login.vue
new file mode 100644
index 000000000..cb60dd554
--- /dev/null
+++ b/resources/js/app/components/ajax-login/ajax-login.vue
@@ -0,0 +1,93 @@
+<template>
+    <dialog class="ajax-login-modal">
+        <transition name="fade">
+            <div
+                class="backdrop"
+                @click="hide()"
+                v-if="isOpen"
+            />
+        </transition>
+        <transition name="slide">
+            <div class="ajax-login">
+                <header>
+                    <span
+                        class="title"
+                        v-if="headerText"
+                    >
+                        {{ headerText }}
+                    </span>
+                    <i
+                        class="icon-cancel-1 has-text-size-larger"
+                        @click="close()"
+                    />
+                </header>
+                <div class="content">
+                    <div
+                        class="message"
+                        v-if="message"
+                    >
+                        {{ message }}
+                    </div>
+                    <iframe
+                        title="Login form"
+                        :src="url"
+                        ref="iframe"
+                    />
+                </div>
+            </div>
+        </transition>
+    </dialog>
+</template>
+<script>
+import Vue from 'vue';
+
+export const AjaxLogin = Vue.extend({
+    name: 'AjaxLogin',
+
+    props: {
+        headerText: {
+            type: String,
+            default: null,
+        },
+        message: {
+            type: String,
+            default: null,
+        },
+    },
+
+    data() {
+        return {
+            isOpen: false,
+            url: `${BEDITA.base}/login`,
+        };
+    },
+
+    mounted() {
+        window.addEventListener('message', this.checkLogin);
+        this.isOpen = true;
+    },
+
+    methods: {
+        checkLogin(message) {
+            if (message.data !== 'login') {
+                return;
+            }
+
+            this.$emit('login');
+            this.close();
+        },
+
+        close() {
+            this.isOpen = false;
+            window.removeEventListener('message', this.checkLogin);
+
+            if (this.$el.parentNode) {
+                this.$el.parentNode.removeChild(this.$el);
+            }
+
+            this.$destroy();
+        }
+    },
+});
+export default AjaxLogin;
+</script>
diff --git a/resources/js/app/pages/modules/view.vue b/resources/js/app/pages/modules/view.vue
index a76daee3b..382f077fe 100644
--- a/resources/js/app/pages/modules/view.vue
+++ b/resources/js/app/pages/modules/view.vue
@@ -1,10 +1,11 @@
 <script>
-import { AjaxLogin } from '../../components/ajax-login/ajax-login.js';
+import { AjaxLogin } from '../../components/ajax-login/ajax-login.vue';
 import Vue from 'vue';
 import { t } from 'ttag';
 
 export default {
     components: {
+        AjaxLogin,
         CoordinatesView: () => import(/* webpackChunkName: "coordinates-view" */'app/components/coordinates-view'),
         TagPicker: () => import(/* webpackChunkName: "tag-picker" */'app/components/tag-picker/tag-picker'),
         PropertyView: () => import(/* webpackChunkName: "property-view" */'app/components/property-view/property-view'),

From f6827b3f7d463294ef1f0b8d2397825ad9c5be20 Mon Sep 17 00:00:00 2001
From: dante di domenico <dante@didoda.com>
Date: Thu, 3 Oct 2024 13:16:13 +0200
Subject: [PATCH 02/20] refactor: category-picker

---
 .../category-picker/category-picker.js        | 56 -------------
 .../category-picker/category-picker.vue       | 80 +++++++++++++++++++
 2 files changed, 80 insertions(+), 56 deletions(-)
 delete mode 100644 resources/js/app/components/category-picker/category-picker.js
 create mode 100644 resources/js/app/components/category-picker/category-picker.vue

diff --git a/resources/js/app/components/category-picker/category-picker.js b/resources/js/app/components/category-picker/category-picker.js
deleted file mode 100644
index c8c292e48..000000000
--- a/resources/js/app/components/category-picker/category-picker.js
+++ /dev/null
@@ -1,56 +0,0 @@
-import { Treeselect } from '@riophae/vue-treeselect'
-import '@riophae/vue-treeselect/dist/vue-treeselect.css'
-
-export default {
-    components: {
-        Treeselect,
-    },
-
-    template: `
-        <div class="category-picker">
-            <label v-if="label" :for="id"><: label :></label>
-            <Treeselect
-                placeholder
-                :form="form"
-                :options="categoriesOptions"
-                :disabled="disabled"
-                :disable-branch-nodes="true"
-                :multiple="true"
-                v-model="selectedIds"
-                @input="onChange"
-            />
-            <input type="hidden" :form="form" :id="id" name="categories" :value="selectedIds" />
-        </div>
-    `,
-
-    props: {
-        id: String,
-        categories: Array,
-        disabled: Boolean,
-        label: String,
-        form: String,
-        initialCategories: Array,
-    },
-
-    data() {
-        return {
-            categoriesOptions: [],
-            selectedIds: null,
-        };
-    },
-
-    mounted() {
-        this.categoriesOptions = this.categories?.map((category) => ({ id: category.id, label: category.label }));
-        this.selectedIds = this.initialCategories?.map(selected => this.categories.find(cat => cat.name == selected.name)?.id);
-    },
-
-    methods: {
-        /**
-         * Emits currently selected categories on selection change.
-         */
-        onChange() {
-            const selectedCategories = this.categories.filter((cat) => this.selectedIds.includes(cat.id));
-            this.$emit('change', selectedCategories);
-        }
-    },
-}
diff --git a/resources/js/app/components/category-picker/category-picker.vue b/resources/js/app/components/category-picker/category-picker.vue
new file mode 100644
index 000000000..2e985d066
--- /dev/null
+++ b/resources/js/app/components/category-picker/category-picker.vue
@@ -0,0 +1,80 @@
+<template>
+    <div class="category-picker">
+        <label
+            :for="id"
+            v-if="label"
+        >
+            {{ label }}
+        </label>
+        <Treeselect
+            placeholder
+            :form="form"
+            :options="categoriesOptions"
+            :disabled="disabled"
+            :disable-branch-nodes="true"
+            :multiple="true"
+            v-model="selectedIds"
+            @input="onChange"
+        />
+        <input
+            :id="id"
+            type="hidden"
+            :form="form"
+            name="categories"
+            :value="selectedIds"
+        >
+    </div>
+</template>
+<script>
+import { Treeselect } from '@riophae/vue-treeselect'
+import '@riophae/vue-treeselect/dist/vue-treeselect.css'
+
+export default {
+    components: {
+        Treeselect,
+    },
+
+    props: {
+        id: {
+            type: String,
+            default: null,
+        },
+        categories: {
+            type: Array,
+            default: () => [],
+        },
+        disabled: Boolean,
+        label: {
+            type: String,
+            default: null,
+        },
+        form: {
+            type: String,
+            default: null,
+        },
+        initialCategories: {
+            type: Array,
+            default: () => [],
+        },
+    },
+
+    data() {
+        return {
+            categoriesOptions: [],
+            selectedIds: null,
+        };
+    },
+
+    mounted() {
+        this.categoriesOptions = this.categories?.map((category) => ({ id: category.id, label: category.label }));
+        this.selectedIds = this.initialCategories?.map(selected => this.categories.find(cat => cat.name == selected.name)?.id);
+    },
+
+    methods: {
+        onChange() {
+            const selectedCategories = this.categories.filter((cat) => this.selectedIds.includes(cat.id));
+            this.$emit('change', selectedCategories);
+        }
+    },
+}
+</script>

From 7d5dc73c3e5bf23b131bad3adf466fad1b027fc3 Mon Sep 17 00:00:00 2001
From: dante di domenico <dante@didoda.com>
Date: Thu, 3 Oct 2024 13:49:58 +0200
Subject: [PATCH 03/20] refactor: dialog

---
 .../dialog/{dialog.js => dialog.vue}          | 121 +++++++++++++-----
 1 file changed, 91 insertions(+), 30 deletions(-)
 rename resources/js/app/components/dialog/{dialog.js => dialog.vue} (62%)

diff --git a/resources/js/app/components/dialog/dialog.js b/resources/js/app/components/dialog/dialog.vue
similarity index 62%
rename from resources/js/app/components/dialog/dialog.js
rename to resources/js/app/components/dialog/dialog.vue
index b57e446de..106ab77b8 100644
--- a/resources/js/app/components/dialog/dialog.js
+++ b/resources/js/app/components/dialog/dialog.vue
@@ -1,42 +1,93 @@
-import { t } from 'ttag';
-import Vue from 'vue';
-
-/**
- * Component to display a dialog.
- */
-export const Dialog = Vue.extend({
-    template: `<div class="bedita-dialog" role="dialog">
+<template>
+    <dialog class="bedita-dialog">
         <transition name="fade">
-            <div class="backdrop" @click="hide()" v-if="isOpen"></div>
+            <div
+                class="backdrop"
+                @click="hide()"
+                v-if="isOpen"
+            />
         </transition>
         <transition name="slide">
-            <div class="dialog p-1 has-background-white has-text-black" :class="dialogType" v-if="isOpen">
+            <div
+                class="dialog p-1 has-background-white has-text-black"
+                :class="dialogType"
+                v-if="isOpen"
+            >
                 <header class="is-flex space-between align-center is-expanded">
                     <div class="is-flex align-center">
-                        <span class="is-capitalized mr-05" v-if="headerText"><: t(headerText) :></span>
-                        <app-icon icon="carbon:checkmark" color="green" v-if="dialogType === 'success'"></app-icon>
-                        <app-icon icon="carbon:information" color="blue" v-if="dialogType === 'info'"></app-icon>
-                        <app-icon icon="carbon:warning" color="orange" v-if="dialogType === 'warning'"></app-icon>
-                        <app-icon icon="carbon:misuse" color="red" v-if="dialogType === 'error'"></app-icon>
+                        <span
+                            class="is-capitalized mr-05"
+                            v-if="headerText"
+                        >
+                            {{ t(headerText) }}
+                        </span>
+                        <app-icon
+                            icon="carbon:checkmark"
+                            color="green"
+                            v-if="dialogType === 'success'"
+                        />
+                        <app-icon
+                            icon="carbon:information"
+                            color="blue"
+                            v-if="dialogType === 'info'"
+                        />
+                        <app-icon
+                            icon="carbon:warning"
+                            color="orange"
+                            v-if="dialogType === 'warning'"
+                        />
+                        <app-icon
+                            icon="carbon:misuse"
+                            color="red"
+                            v-if="dialogType === 'error'"
+                        />
                     </div>
                     <i @click="hide()">
-                        <app-icon icon="carbon:close"></app-icon>
+                        <app-icon
+                            icon="carbon:close"
+                        />
                     </i>
                 </header>
-                <div class="message mt-1 has-text-size-larger" v-if="message"><: message :></div>
+                <div
+                    class="message mt-1 has-text-size-larger"
+                    v-if="message"
+                >
+                    {{ message }}
+                </div>
                 <details v-if="!!dumpMessage">
-                    <summary><: t('details') :></summary>
-                    <pre class="dump"><: dumpMessage :></pre>
+                    <summary>{{ msgDetails }}</summary>
+                    <pre class="dump">{{ dumpMessage }}</pre>
                 </details>
-                <input class="mt-1" type="text" v-if="dialogType === 'prompt'" v-model.lazy="inputValue" />
-                <div class="mt-1" v-for="uitem in unique">
-                    <label><: uitem.label :></label>
-                    <input type="text" :id="uitem.field" v-model.lazy="uitem.value" />
+                <input
+                    class="mt-1"
+                    type="text"
+                    v-model.lazy="inputValue"
+                    v-if="dialogType === 'prompt'"
+                >
+                <div
+                    class="mt-1"
+                    v-for="uitem in unique"
+                    :key="uitem.field"
+                >
+                    <label>{{ uitem.label }}</label>
+                    <input
+                        :id="uitem.field"
+                        type="text"
+                        v-model.lazy="uitem.value"
+                    >
                 </div>
-                <template v-if="dialogType === 'prompt'" v-show="checks?.length > 0">
-                    <div class="mt-05" v-for="(citem, index) in checks">
-                        <input type="checkbox" :id="checkname(index)" v-model.lazy="citem.value"  />
-                        <label :for="checkname(index)"><: citem.label :></label>
+                <template v-if="dialogType === 'prompt' && checks?.length > 0">
+                    <div
+                        class="mt-05"
+                        v-for="(citem, index) in checks"
+                        :key="citem.label"
+                    >
+                        <input
+                            :id="checkname(index)"
+                            type="checkbox"
+                            v-model.lazy="citem.value"
+                        >
+                        <label :for="checkname(index)">{{ citem.label }}</label>
                     </div>
                 </template>
                 <div class="actions mt-2">
@@ -46,20 +97,26 @@ export const Dialog = Vue.extend({
                         :disabled="loading === true"
                         @click="prepareCallback() && confirmCallback($root, callbackOptions(inputValue, unique))"
                         v-if="confirmMessage">
-                        <: confirmMessage :>
+                        {{ confirmMessage }}
                     </button>
                     <button
                         class="button-secondary cancel"
                         :disabled="loading === true"
                         @click="hide()"
                         v-if="cancelMessage">
-                        <: cancelMessage :>
+                        {{ cancelMessage }}
                     </button>
                 </div>
             </div>
         </transition>
-    </div>`,
+    </dialog>
+</template>
+<script>
+import { t } from 'ttag';
+import Vue from 'vue';
 
+export const Dialog = Vue.extend({
+    name: 'WinDialog',
     data() {
         return {
             destroyOnHide: true,
@@ -75,6 +132,7 @@ export const Dialog = Vue.extend({
             checks: [],
             loading: false,
             unique: [],
+            msgDetails: t`details`,
         };
     },
     methods: {
@@ -191,3 +249,6 @@ export const prompt = (message, defaultValue, confirmCallback, root, options) =>
 
     return dialog;
 };
+
+export default Dialog;
+</script>

From 3d4de0d76efaeab1dfd106c3856d530b2862150d Mon Sep 17 00:00:00 2001
From: dante di domenico <dante@didoda.com>
Date: Thu, 3 Oct 2024 13:54:29 +0200
Subject: [PATCH 04/20] refactor: folder-picker

---
 .../{folder-picker.js => folder-picker.vue}   | 76 ++++++++++---------
 1 file changed, 42 insertions(+), 34 deletions(-)
 rename resources/js/app/components/folder-picker/{folder-picker.js => folder-picker.vue} (76%)

diff --git a/resources/js/app/components/folder-picker/folder-picker.js b/resources/js/app/components/folder-picker/folder-picker.vue
similarity index 76%
rename from resources/js/app/components/folder-picker/folder-picker.js
rename to resources/js/app/components/folder-picker/folder-picker.vue
index a2ecb7b83..043e30b7c 100644
--- a/resources/js/app/components/folder-picker/folder-picker.js
+++ b/resources/js/app/components/folder-picker/folder-picker.vue
@@ -1,3 +1,27 @@
+<template>
+    <div class="folder-picker">
+        <label v-if="label">{{ label }}</label>
+        <Treeselect
+            placeholder=""
+            loading-text=""
+            :default-options="initialOptions"
+            :disabled="disabled"
+            :options="options"
+            :load-options="loadOptions"
+            :auto-load-root-options="false"
+            value-format="object"
+            v-model="selectedFolder"
+            @input="onChange"
+        />
+        <input
+            type="hidden"
+            :form="form"
+            name="folderSelected"
+            :value="selectedFolder?.id"
+        >
+    </div>
+</template>
+<script>
 import { Treeselect, LOAD_ROOT_OPTIONS, LOAD_CHILDREN_OPTIONS } from '@riophae/vue-treeselect';
 import '@riophae/vue-treeselect/dist/vue-treeselect.css';
 import { t } from 'ttag';
@@ -11,48 +35,31 @@ const API_OPTIONS = {
 };
 const PAGE_SIZE = 100;
 
-/**
- * Folder picker component.
- * Displays a tree-view folders list and allows to pick one.
- *
- * @prop {Boolean} disabled Enable/disable the select
- * @prop {String} initialFolder Id of the folder to pre-select
- * @prop {String} label Label to show before the select
- */
 export default {
+    name: 'FolderPicker',
     components: {
         Treeselect,
     },
 
-    template: `<div class="folder-picker">
-        <label v-if="label"><: label :></label>
-        <Treeselect
-            placeholder=""
-            loading-text=""
-            v-model="selectedFolder"
-            :default-options="initialOptions"
-            :disabled="disabled"
-            :options="options"
-            :load-options="loadOptions"
-            :auto-load-root-options="false"
-            value-format="object"
-            @input="onChange"
-        />
-        <input type="hidden" :form="form" name="folderSelected" :value="selectedFolder?.id" />
-    </div>`,
-
     props: {
-        disabled: Boolean,
-        initialFolder: String,
-        label: String,
-        form: String,
+        disabled: {
+            type: Boolean,
+            default: false,
+        },
+        initialFolder: {
+            type: Number,
+            default: null,
+        },
+        label: {
+            type: String,
+            default: null,
+        },
+        form: {
+            type: String,
+            default: null,
+        },
     },
 
-    /**
-     * @property {Array} initialOptions Initial options used to pre-select the initial folder
-     * @property {Array} options The list of folder to show in the select
-     * @property {Object} options Currently selected folder (an object in the format {id: ..., label: ...})
-     */
     data() {
         return {
             initialOptions: null,
@@ -102,3 +109,4 @@ export default {
         }
     },
 }
+</script>

From 77b82aef7d290e0f03d1d7c8bfcabaf5a58f66bc Mon Sep 17 00:00:00 2001
From: dante di domenico <dante@didoda.com>
Date: Thu, 3 Oct 2024 14:14:27 +0200
Subject: [PATCH 05/20] fix: initFolder

---
 resources/js/app/components/filter-box.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/app/components/filter-box.vue b/resources/js/app/components/filter-box.vue
index 45d8a5184..433def08e 100644
--- a/resources/js/app/components/filter-box.vue
+++ b/resources/js/app/components/filter-box.vue
@@ -170,7 +170,7 @@ export default {
 
         initFolder() {
             if (!this.initFilter?.filter) {
-                return '';
+                return null;
             }
 
             return this.initFilter?.filter[this.positionFilterName] || '';

From c1c1eaad36f9fafd9d280c750798c5be1e374834 Mon Sep 17 00:00:00 2001
From: dante di domenico <dante@didoda.com>
Date: Thu, 3 Oct 2024 14:39:08 +0200
Subject: [PATCH 06/20] refactor: history-info

---
 .../js/app/components/history/history-info.js |  79 -----------
 .../app/components/history/history-info.vue   | 128 ++++++++++++++++++
 templates/Element/Panel/panel.scss            |   1 +
 3 files changed, 129 insertions(+), 79 deletions(-)
 delete mode 100644 resources/js/app/components/history/history-info.js
 create mode 100644 resources/js/app/components/history/history-info.vue

diff --git a/resources/js/app/components/history/history-info.js b/resources/js/app/components/history/history-info.js
deleted file mode 100644
index a3566133b..000000000
--- a/resources/js/app/components/history/history-info.js
+++ /dev/null
@@ -1,79 +0,0 @@
-import moment from 'moment';
-import { t } from 'ttag';
-import { PanelEvents } from '../panel-view';
-
-export default {
-    template: `<div class="history-info">
-        <section class="fieldset shrinks">
-            <header class="mx-1 tab tab-static unselectable">
-                <h2>
-                    <span v-if="authorName">${t`version by`}</span>
-                    <span v-if="authorName" class="has-font-weight-bold"><: authorName :></span>
-                    <span>${t`date`} <: formattedDate :></span>
-                </h2>
-            </header>
-            <div class="object-form px-1 shrinks">
-                <h4 v-if="user_action == 'create'">${t`Created`}:</h4>
-                <h4 v-if="user_action == 'update'">${t`Updated`}:</h4>
-                <h4 v-if="user_action == 'trash'">${t`Trashed`}</h4>
-                <h4 v-if="user_action == 'restore'">${t`Restored`}</h4>
-                <div class="fieldset">
-                    <div v-for="(value, key) in changed" v-html="value" class="container" v-if="allowed(key)"></div>
-
-                    <button v-if="canSave" class="mt-2" @click.stop.prevent="restore()">${t`Restore`}</button>
-                </div>
-            </div>
-        </section>
-    </div>`,
-
-    props: {
-        meta: Object,
-        id: String,
-        cansave: Boolean,
-    },
-
-    data() {
-        return {
-            changed: this.meta.changed,
-            created: this.meta.created,
-            user: this.meta.user,
-            user_action: this.meta.user_action,
-            canSave: true,
-        }
-    },
-
-    computed: {
-        formattedDate: function() {
-            return moment(this.created).format('D MMM YYYY kk:mm');
-        },
-        /**
-         * Get formatted user name.
-         * @param {Object} userObj User data
-         * @return {string}
-         */
-        authorName: function() {
-            if (!this.user?.attributes) {
-                return;
-            }
-            const user = this.user.attributes;
-
-            return user.title ||
-                `${user.name || ''} ${user.surname || ''}`.trim() ||
-                user.username ||
-                '';
-        },
-    },
-
-    async created() {
-        this.canSave = this.cansave;
-    },
-
-    methods: {
-        allowed(key) {
-            return (key !== 'model-type' && key !== '_csrfToken');
-        },
-        restore() {
-            PanelEvents.sendBack('history-info:restore', this.id);
-        },
-    }
-}
diff --git a/resources/js/app/components/history/history-info.vue b/resources/js/app/components/history/history-info.vue
new file mode 100644
index 000000000..0638091b6
--- /dev/null
+++ b/resources/js/app/components/history/history-info.vue
@@ -0,0 +1,128 @@
+<template>
+    <div class="history-info">
+        <section class="fieldset shrinks">
+            <header class="mx-1 tab tab-static unselectable">
+                <h2>
+                    <span v-if="authorName">{{ msgVersionBy }}</span>
+                    <span
+                        class="has-font-weight-bold"
+                        v-if="authorName"
+                    >
+                        {{ authorName }}
+                    </span>
+                    <span>{{ msgDate }} {{ formattedDate }}</span>
+                </h2>
+            </header>
+            <div class="object-form px-1 shrinks">
+                <h4 v-if="user_action == 'create'">
+                    {{ msgCreated }}:
+                </h4>
+                <h4 v-if="user_action == 'update'">
+                    {{ msgUpdated }}:
+                </h4>
+                <h4 v-if="user_action == 'trash'">
+                    {{ msgTrashed }}
+                </h4>
+                <h4 v-if="user_action == 'restore'">
+                    {{ msgRestored }}
+                </h4>
+                <div class="fieldset">
+                    <div
+                        v-for="(value, key) in changedAllowed"
+                        :key="key"
+                        class="container"
+                        v-html="value"
+                    />
+                    <button
+                        class="mt-2"
+                        @click.stop.prevent="restore()"
+                        v-if="canSave"
+                    >
+                        {{ msgRestore }}
+                    </button>
+                </div>
+            </div>
+        </section>
+    </div>
+</template>
+<script>
+import moment from 'moment';
+import { t } from 'ttag';
+import { PanelEvents } from '../panel-view';
+
+export default {
+    name: 'HistoryInfo',
+
+    props: {
+        meta: {
+            type: Object,
+            default: () => ({}),
+        },
+        id: {
+            type: String,
+            default: null,
+        },
+        cansave: {
+            type: Boolean,
+            default: true,
+        },
+    },
+
+    data() {
+        return {
+            changed: this.meta.changed,
+            changedAllowed: {},
+            created: this.meta.created,
+            user: this.meta.user,
+            user_action: this.meta.user_action,
+            canSave: true,
+            msgCreated: t`Created`,
+            msgDate: t`date`,
+            msgUpdated: t`Updated`,
+            msgTrashed: t`Trashed`,
+            msgRestored: t`Restored`,
+            msgRestore: t`Restore`,
+            msgVersionBy: t`version by`,
+        }
+    },
+
+    computed: {
+        authorName: function() {
+            if (!this.user?.attributes) {
+                return;
+            }
+            const user = this.user.attributes;
+
+            return user.title ||
+                `${user.name || ''} ${user.surname || ''}`.trim() ||
+                user.username ||
+                '';
+        },
+        formattedDate: function() {
+            return moment(this.created).format('D MMM YYYY kk:mm');
+        },
+    },
+
+    mounted() {
+        this.$nextTick(() => {
+            this.changedAllowed = {...this.changed};
+            const keys = Object.keys(this.changed);
+            for (const key in keys) {
+                if (['_csrfToken', 'model-type'].includes(key)) {
+                    delete this.changedAllowed[key];
+                }
+            }
+        });
+    },
+
+    async created() {
+        this.canSave = this.cansave;
+    },
+
+    methods: {
+        restore() {
+            PanelEvents.sendBack('history-info:restore', this.id);
+        },
+    }
+}
+</script>
diff --git a/templates/Element/Panel/panel.scss b/templates/Element/Panel/panel.scss
index c63684647..e166536e9 100644
--- a/templates/Element/Panel/panel.scss
+++ b/templates/Element/Panel/panel.scss
@@ -3,6 +3,7 @@
     top: 0; right: 0;
     min-width: 20 * $gutter;
     width: 100%;
+    overflow: auto;
     @media screen and (min-width: 768px) {
         width: 60%;
     }

From e58be3d15ad966af6b71fa14772d6e948aba36ef Mon Sep 17 00:00:00 2001
From: dante di domenico <dante@didoda.com>
Date: Thu, 3 Oct 2024 14:45:04 +0200
Subject: [PATCH 07/20] fix: initFolder

---
 resources/js/app/components/filter-box.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/app/components/filter-box.vue b/resources/js/app/components/filter-box.vue
index 433def08e..5fb60f36c 100644
--- a/resources/js/app/components/filter-box.vue
+++ b/resources/js/app/components/filter-box.vue
@@ -173,7 +173,7 @@ export default {
                 return null;
             }
 
-            return this.initFilter?.filter[this.positionFilterName] || '';
+            return this.initFilter?.filter[this.positionFilterName] || null;
         },
 
         /**

From 96f3cb095b5f5706c902c350cb385965f93b1f6e Mon Sep 17 00:00:00 2001
From: dante di domenico <dante@didoda.com>
Date: Thu, 3 Oct 2024 14:45:24 +0200
Subject: [PATCH 08/20] refactor: index-cell

---
 .../{index-cell.js => index-cell.vue}         | 52 ++++++++++++++-----
 1 file changed, 39 insertions(+), 13 deletions(-)
 rename resources/js/app/components/index-cell/{index-cell.js => index-cell.vue} (58%)

diff --git a/resources/js/app/components/index-cell/index-cell.js b/resources/js/app/components/index-cell/index-cell.vue
similarity index 58%
rename from resources/js/app/components/index-cell/index-cell.js
rename to resources/js/app/components/index-cell/index-cell.vue
index 639237be1..8786ade44 100644
--- a/resources/js/app/components/index-cell/index-cell.js
+++ b/resources/js/app/components/index-cell/index-cell.vue
@@ -1,21 +1,46 @@
+<template>
+    <div
+        :class="className()"
+        untitled-label="${t`Untitled`}"
+        @mouseover="onMouseover()"
+        @mouseleave="onMouseleave()"
+    >
+        {{ !msg ? truncated : '' }}
+        <app-icon
+            icon="carbon:copy"
+            @click.stop.prevent="copy()"
+            v-if="showCopyIcon()"
+        />
+        <div
+            style="color: gray"
+            v-text="msg"
+            v-if="msg"
+        />
+    </div>
+</template>
+<script>
 import { t } from 'ttag';
 
 export default {
-    name: 'index-cell',
-
-    template: `
-    <div :class="className()" untitled-label="${t`Untitled`}" @mouseover="onMouseover()" @mouseleave="onMouseleave()">
-        <: !msg ? truncated : '' :>
-        <app-icon icon="carbon:copy" v-if="showCopyIcon()" @click.stop.prevent="copy()"></app-icon>
-        <div v-if="msg" v-text="msg" style="color: gray"></div>
-    </div>
-    `,
+    name: 'IndexCell',
 
     props: {
-        settings: {},
-        prop: '',
-        text: '',
-        untitledlabel: '',
+        settings: {
+            type: Object,
+            default: () => ({}),
+        },
+        prop: {
+            type: String,
+            default: '',
+        },
+        text: {
+            type: String,
+            default: '',
+        },
+        untitledlabel: {
+            type: String,
+            default: '',
+        },
     },
 
     data() {
@@ -68,3 +93,4 @@ export default {
         },
     },
 };
+</script>

From 5d1fff07a10c7761c3478e73f3f46d644af91488 Mon Sep 17 00:00:00 2001
From: dante di domenico <dante@didoda.com>
Date: Thu, 3 Oct 2024 14:58:16 +0200
Subject: [PATCH 09/20] refactor: login-password

---
 .../{login-password.js => login-password.vue} | 37 +++++++++++++------
 1 file changed, 26 insertions(+), 11 deletions(-)
 rename resources/js/app/components/login-password/{login-password.js => login-password.vue} (58%)

diff --git a/resources/js/app/components/login-password/login-password.js b/resources/js/app/components/login-password/login-password.vue
similarity index 58%
rename from resources/js/app/components/login-password/login-password.js
rename to resources/js/app/components/login-password/login-password.vue
index a88947f06..a084371cc 100644
--- a/resources/js/app/components/login-password/login-password.js
+++ b/resources/js/app/components/login-password/login-password.vue
@@ -1,37 +1,51 @@
-import { t } from 'ttag';
-
-export default {
-    template: `
+<template>
     <div class="input password required">
-        <label for="password">${t`Password`}</label>
+        <label for="password">{{ msgPassword }}</label>
         <div class="is-flex">
             <div class="is-expanded">
                 <input
+                    id="password"
                     style="border-top-right-radius: 0; border-bottom-right-radius: 0;"
                     :type="type"
-                    id="password"
                     name="password"
                     required="required"
                     autocomplete="current-password"
                     aria-required="true"
                     v-model="password"
-                    @keydown="onKeydown($event)" />
+                    @keydown="onKeydown($event)"
+                >
             </div>
             <div>
-                <button @click.prevent.stop="toggleShow" class="button button-primary" style="min-width: 32px; border-top-left-radius: 0; border-bottom-left-radius: 0;" :disabled="!this.password || this.password.length == 0">
-                    <app-icon icon="carbon:view-filled" v-if="show"></app-icon>
-                    <app-icon icon="carbon:view-off-filled" v-if="!show"></app-icon>
+                <button
+                    style="min-width: 32px; border-top-left-radius: 0; border-bottom-left-radius: 0;"
+                    :disabled="!this.password || this.password.length == 0"
+                    class="button button-primary"
+                    @click.prevent.stop="toggleShow"
+                >
+                    <app-icon
+                        icon="carbon:view-filled"
+                        v-if="show"
+                    />
+                    <app-icon
+                        icon="carbon:view-off-filled"
+                        v-if="!show"
+                    />
                 </button>
             </div>
         </div>
     </div>
-    `,
+</template>
+<script>
+import { t } from 'ttag';
 
+export default {
+    name: 'LoginPassword',
     data() {
         return {
             show: false,
             password: null,
             type: 'password',
+            msgPassword: t`Password`,
         };
     },
 
@@ -49,3 +63,4 @@ export default {
         },
     }
 };
+</script>

From 92ed5fe3fa3541ecc9aecdc68b434c87db74fe44 Mon Sep 17 00:00:00 2001
From: dante di domenico <dante@didoda.com>
Date: Thu, 3 Oct 2024 15:12:35 +0200
Subject: [PATCH 10/20] refactor: object-types-list

---
 .../object-types-list/object-types-list.js    | 48 -----------
 .../object-types-list/object-types-list.vue   | 82 +++++++++++++++++++
 2 files changed, 82 insertions(+), 48 deletions(-)
 delete mode 100644 resources/js/app/components/object-types-list/object-types-list.js
 create mode 100644 resources/js/app/components/object-types-list/object-types-list.vue

diff --git a/resources/js/app/components/object-types-list/object-types-list.js b/resources/js/app/components/object-types-list/object-types-list.js
deleted file mode 100644
index 377e02df8..000000000
--- a/resources/js/app/components/object-types-list/object-types-list.js
+++ /dev/null
@@ -1,48 +0,0 @@
-export default {
-    template: `<div class="object-types-list">
-        <div v-for="type in all">
-            <input type="checkbox" :checked="type in selected" :value="type" v-model="selected" />
-            <a :href="ref(type)" :class="className(type)">
-                <: type :>
-            </a>
-        </div>
-        <input type="hidden" :name="name('current')" :value="valueCurrent()" />
-        <input type="hidden" :name="name('change')" :value="valueChange()" />
-    </div>`,
-
-    props: {
-        all: [],
-        selected: [],
-        side: '',
-    },
-
-    data() {
-        return {
-            current: [],
-        };
-    },
-
-    mounted() {
-        this.$nextTick(() => {
-            this.current = this.selected;
-        });
-    },
-
-    methods: {
-        className(t) {
-            return `tag has-background-module-${t}`;
-        },
-        name(prefix) {
-            return `${prefix}_${this.side}`;
-        },
-        ref(t) {
-            return `/model/object_types/view/${t}`;
-        },
-        valueCurrent() {
-            return this.current.join(',');
-        },
-        valueChange() {
-            return this.selected.join(',');
-        },
-    },
-}
diff --git a/resources/js/app/components/object-types-list/object-types-list.vue b/resources/js/app/components/object-types-list/object-types-list.vue
new file mode 100644
index 000000000..5587b630c
--- /dev/null
+++ b/resources/js/app/components/object-types-list/object-types-list.vue
@@ -0,0 +1,82 @@
+<template>
+    <div class="object-types-list">
+        <div
+            v-for="type in all"
+            :key="type"
+        >
+            <input
+                type="checkbox"
+                :checked="type in modified"
+                :value="type"
+                v-model="modified"
+            >
+            <a
+                :href="ref(type)"
+                :class="className(type)"
+            >
+                {{ type }}
+            </a>
+        </div>
+        <input
+            type="hidden"
+            :name="name('current')"
+            :value="valueCurrent()"
+        >
+        <input
+            type="hidden"
+            :name="name('change')"
+            :value="valueChange()"
+        >
+    </div>
+</template>
+<script>
+export default {
+    name: 'ObjectTypesList',
+    props: {
+        all: {
+            type: Array,
+            default: () => ([]),
+        },
+        selected: {
+            type: Array,
+            default: () => ([]),
+        },
+        side: {
+            type: String,
+            default: '',
+        },
+    },
+
+    data() {
+        return {
+            current: [],
+            modified: [],
+        };
+    },
+
+    mounted() {
+        this.$nextTick(() => {
+            this.current = this.selected;
+            this.modified = this.selected;
+        });
+    },
+
+    methods: {
+        className(t) {
+            return `tag has-background-module-${t}`;
+        },
+        name(prefix) {
+            return `${prefix}_${this.side}`;
+        },
+        ref(t) {
+            return `/model/object_types/view/${t}`;
+        },
+        valueCurrent() {
+            return this.current.join(',');
+        },
+        valueChange() {
+            return this.modified.join(',');
+        },
+    },
+}
+</script>

From 28b3838ab72b3bd0f6df65a2c377848ced142349 Mon Sep 17 00:00:00 2001
From: dante di domenico <dante@didoda.com>
Date: Thu, 3 Oct 2024 15:20:01 +0200
Subject: [PATCH 11/20] refactor: secret

---
 resources/js/app/components/secret/secret.js  | 48 -------------
 resources/js/app/components/secret/secret.vue | 67 +++++++++++++++++++
 2 files changed, 67 insertions(+), 48 deletions(-)
 delete mode 100644 resources/js/app/components/secret/secret.js
 create mode 100644 resources/js/app/components/secret/secret.vue

diff --git a/resources/js/app/components/secret/secret.js b/resources/js/app/components/secret/secret.js
deleted file mode 100644
index 8efe7df77..000000000
--- a/resources/js/app/components/secret/secret.js
+++ /dev/null
@@ -1,48 +0,0 @@
-import { t } from 'ttag';
-
-export default {
-    template: `<div class="secret">
-        <div v-if="visible && val">
-            <div><: val :></div>
-            <button class="button button-text-white is-width-auto" @click.prevent="reset(0)">
-                <app-icon icon="carbon:view-off-filled"></app-icon>
-            </button>
-            <button v-if="!msg" class="button button-text-white is-width-auto" @click.prevent="copy()">
-                <app-icon icon="carbon:copy"></app-icon>
-            </button>
-            <div v-if="msg" v-text="msg"></div>
-        </div>
-        <div v-if="!visible && val">
-            <div>****************</div>
-            <button class="button button-text-white is-width-auto" @click.prevent="reset(1)">
-                <app-icon icon="carbon:view-filled"></app-icon>
-            </button>
-        </div>
-        <div v-if="!val">---</div>
-
-
-
-    </div>`,
-
-    props: {
-        val: '',
-    },
-
-    data() {
-        return {
-            visible: false,
-            msg: '',
-        };
-    },
-
-    methods: {
-        copy() {
-            navigator.clipboard.writeText(this.val);
-            this.msg = t`copied in the clipboard`;
-        },
-        reset(v) {
-            this.visible = v;
-            this.msg = '';
-        }
-    },
-}
diff --git a/resources/js/app/components/secret/secret.vue b/resources/js/app/components/secret/secret.vue
new file mode 100644
index 000000000..7aadf844f
--- /dev/null
+++ b/resources/js/app/components/secret/secret.vue
@@ -0,0 +1,67 @@
+<template>
+    <div class="secret">
+        <div v-if="visible && val">
+            <div>{{ val }}</div>
+            <button
+                class="button button-text-white is-width-auto"
+                @click.prevent="reset(0)"
+            >
+                <app-icon icon="carbon:view-off-filled" />
+            </button>
+            <button
+                class="button button-text-white is-width-auto"
+                @click.prevent="copy()"
+                v-if="!msg"
+            >
+                <app-icon icon="carbon:copy" />
+            </button>
+            <div
+                v-text="msg"
+                v-if="msg"
+            />
+        </div>
+        <div v-if="!visible && val">
+            <div>****************</div>
+            <button
+                class="button button-text-white is-width-auto"
+                @click.prevent="reset(1)"
+            >
+                <app-icon icon="carbon:view-filled" />
+            </button>
+        </div>
+        <div v-if="!val">
+            ---
+        </div>
+    </div>
+</template>
+<script>
+import { t } from 'ttag';
+
+export default {
+    name: 'AppSecret',
+    props: {
+        val: {
+            type: String,
+            default: '',
+        },
+    },
+
+    data() {
+        return {
+            visible: false,
+            msg: '',
+        };
+    },
+
+    methods: {
+        copy() {
+            navigator.clipboard.writeText(this.val);
+            this.msg = t`copied in the clipboard`;
+        },
+        reset(v) {
+            this.visible = v;
+            this.msg = '';
+        }
+    },
+}
+</script>

From a3e3550edb230ac74f0bc827374618da6feb4373 Mon Sep 17 00:00:00 2001
From: dante di domenico <dante@didoda.com>
Date: Thu, 3 Oct 2024 15:29:14 +0200
Subject: [PATCH 12/20] refactor: autosize-textarea

---
 ...size-textarea.js => autosize-textarea.vue} | 40 +++++++++++++------
 1 file changed, 28 insertions(+), 12 deletions(-)
 rename resources/js/app/components/{autosize-textarea.js => autosize-textarea.vue} (57%)

diff --git a/resources/js/app/components/autosize-textarea.js b/resources/js/app/components/autosize-textarea.vue
similarity index 57%
rename from resources/js/app/components/autosize-textarea.js
rename to resources/js/app/components/autosize-textarea.vue
index 4cc8bda6d..d9bf1e121 100644
--- a/resources/js/app/components/autosize-textarea.js
+++ b/resources/js/app/components/autosize-textarea.vue
@@ -1,14 +1,35 @@
+<template>
+    <textarea
+        :value="text"
+        @input="handleChange"
+    />
+</template>
+<script>
 import autosize from 'autosize';
 
 export default {
-    props: ['value', 'reset-value'],
-
-    template: '<textarea @input="handleChange" :value="text"></textarea>',
+    name: 'AutosizeTextarea',
+    props: {
+        value: {
+            type: String,
+            default: '',
+        },
+        resetValue: {
+            type: String,
+            default: '',
+        },
+    },
 
     data() {
         return {
-            text: '',
-            originalValue: '',
+            text: {
+                type: String,
+                default: '',
+            },
+            originalValue: {
+                type: String,
+                default: '',
+            },
         };
     },
 
@@ -22,7 +43,7 @@ export default {
 
         value() {
             this.originalValue = this.value;
-        }
+        },
     },
 
     mounted() {
@@ -37,15 +58,10 @@ export default {
     },
 
     methods: {
-        /**
-         *
-         * @emits Event#input textarea value
-         *
-         * @param {Event} event event object
-         */
         handleChange(event) {
             this.text = event.target.value;
             this.$emit('input', this.text);
         }
     }
 };
+</script>

From 8026dba9119928f13d9e4bffc7253b806bd48781 Mon Sep 17 00:00:00 2001
From: dante di domenico <dante@didoda.com>
Date: Thu, 3 Oct 2024 15:33:49 +0200
Subject: [PATCH 13/20] refactor: date-input

---
 .../components/{date-input.js => date-input.vue}   | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)
 rename resources/js/app/components/{date-input.js => date-input.vue} (97%)

diff --git a/resources/js/app/components/date-input.js b/resources/js/app/components/date-input.vue
similarity index 97%
rename from resources/js/app/components/date-input.js
rename to resources/js/app/components/date-input.vue
index da5635d1f..2b9bc050c 100644
--- a/resources/js/app/components/date-input.js
+++ b/resources/js/app/components/date-input.vue
@@ -1,3 +1,9 @@
+<template>
+    <div>
+        <slot></slot>
+    </div>
+</template>
+<script>
 import 'flatpickr/dist/flatpickr.min.css';
 import 'flatpickr/dist/themes/dark.css';
 import flatpickr from 'flatpickr';
@@ -29,14 +35,11 @@ const FLATPICKR_OPTIONS = {
 // get loaded locale
 const LOCALE = BEDITA.locale.slice(0, 2);
 export default {
-    template: /* template */`
-    <div>
-        <slot></slot>
-    </div>
-    `,
+    name: 'DateInput',
     props: {
         el: {
             type: HTMLInputElement,
+            default: null,
         },
         attrs: {
             type: Object,
@@ -129,3 +132,4 @@ export default {
         },
     },
 };
+</script>

From 71c1bf12f4e1a2eb98c00f3279f14a392345b1e8 Mon Sep 17 00:00:00 2001
From: dante di domenico <dante@didoda.com>
Date: Thu, 3 Oct 2024 15:35:52 +0200
Subject: [PATCH 14/20] refactor: email-input

---
 .../{email-input.js => email-input.vue}       | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)
 rename resources/js/app/components/{email-input.js => email-input.vue} (81%)

diff --git a/resources/js/app/components/email-input.js b/resources/js/app/components/email-input.vue
similarity index 81%
rename from resources/js/app/components/email-input.js
rename to resources/js/app/components/email-input.vue
index b71e391f3..88db9f931 100644
--- a/resources/js/app/components/email-input.js
+++ b/resources/js/app/components/email-input.vue
@@ -1,17 +1,23 @@
-import { t } from 'ttag';
-
-export default {
-    template: /* template */`
+<template>
     <div>
         <slot></slot>
     </div>
-    `,
+</template>
+<script>
+import { t } from 'ttag';
+
+export default {
+    name: 'EmailInput',
 
     props: {
         el: {
             type: HTMLInputElement,
+            default: null,
+        },
+        isValid: {
+            type: Boolean,
+            default: false,
         },
-        isValid: false
     },
 
     async mounted() {
@@ -34,3 +40,4 @@ export default {
         this.el.parentElement.appendChild(span);
     },
 };
+</script>

From 3e52ef9e8c291087aa0ce60d4817bcb0e7df18f7 Mon Sep 17 00:00:00 2001
From: dante di domenico <dante@didoda.com>
Date: Thu, 3 Oct 2024 15:39:01 +0200
Subject: [PATCH 15/20] refactor: json-editor-input

---
 ...json-editor-input.js => json-editor-input.vue} | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)
 rename resources/js/app/components/{json-editor-input.js => json-editor-input.vue} (94%)

diff --git a/resources/js/app/components/json-editor-input.js b/resources/js/app/components/json-editor-input.vue
similarity index 94%
rename from resources/js/app/components/json-editor-input.js
rename to resources/js/app/components/json-editor-input.vue
index 1b78f0dd8..1dc04f5a5 100644
--- a/resources/js/app/components/json-editor-input.js
+++ b/resources/js/app/components/json-editor-input.vue
@@ -1,3 +1,9 @@
+<template>
+    <div>
+        <slot />
+    </div>
+</template>
+<script>
 import { JSONEditor } from 'vanilla-jsoneditor';
 
 const options = {
@@ -8,15 +14,11 @@ const options = {
 };
 
 export default {
-    template: `
-    <div>
-        <slot></slot>
-    </div>
-    `,
-
+    name: 'JsonEditorInput',
     props: {
         el: {
             type: HTMLTextAreaElement,
+            default: null,
         },
     },
 
@@ -65,3 +67,4 @@ export default {
         }
     },
 };
+</script>

From 792456127101efeaa635fdf1ef1b948a2aed9476 Mon Sep 17 00:00:00 2001
From: dante di domenico <dante@didoda.com>
Date: Thu, 3 Oct 2024 15:39:09 +0200
Subject: [PATCH 16/20] fix: slot

---
 resources/js/app/components/date-input.vue  | 2 +-
 resources/js/app/components/email-input.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/js/app/components/date-input.vue b/resources/js/app/components/date-input.vue
index 2b9bc050c..ddacd7beb 100644
--- a/resources/js/app/components/date-input.vue
+++ b/resources/js/app/components/date-input.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <slot></slot>
+        <slot />
     </div>
 </template>
 <script>
diff --git a/resources/js/app/components/email-input.vue b/resources/js/app/components/email-input.vue
index 88db9f931..2760adb36 100644
--- a/resources/js/app/components/email-input.vue
+++ b/resources/js/app/components/email-input.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <slot></slot>
+        <slot />
     </div>
 </template>
 <script>

From cd47e14d7120b9691e6a40dbe6aedcf6a5cd9389 Mon Sep 17 00:00:00 2001
From: dante di domenico <dante@didoda.com>
Date: Thu, 3 Oct 2024 15:44:18 +0200
Subject: [PATCH 17/20] refactor: map-view

---
 .../components/{map-view.js => map-view.vue}  | 22 +++++--------------
 1 file changed, 6 insertions(+), 16 deletions(-)
 rename resources/js/app/components/{map-view.js => map-view.vue} (88%)

diff --git a/resources/js/app/components/map-view.js b/resources/js/app/components/map-view.vue
similarity index 88%
rename from resources/js/app/components/map-view.js
rename to resources/js/app/components/map-view.vue
index e59723864..036505851 100644
--- a/resources/js/app/components/map-view.js
+++ b/resources/js/app/components/map-view.vue
@@ -1,24 +1,13 @@
-/**
- * Templates that uses this component (directly or indirectly):
- *  ...
- *
- * <map-view> component used for ModulesPage -> View
- *
- * Handle maps
- *
- * @prop {String} lat
- * @prop {String} lng
- * @prop {String} popupHtml
- * @prop {String} mapToken (mapBox accessToken)
- */
-
+<template>
+    <div class="map-container" />
+</template>
+<script>
 import mapbox from 'mapbox-gl';
 import Compare from 'mapbox-gl-compare';
 import 'mapbox-gl/dist/mapbox-gl.css';
 
 export default {
-    template: '<div class="map-container"></div>',
-
+    name: 'MapView',
     props: {
         lng: {
             type: String,
@@ -109,3 +98,4 @@ export default {
         }
     }
 }
+</script>

From 423a4f0119bbed7f110cb93cf1a96238ed61bf45 Mon Sep 17 00:00:00 2001
From: dante di domenico <dante@didoda.com>
Date: Thu, 3 Oct 2024 15:44:28 +0200
Subject: [PATCH 18/20] refactor: staggered-list

---
 .../{staggered-list.js => staggered-list.vue} | 31 +++++++++----------
 1 file changed, 14 insertions(+), 17 deletions(-)
 rename resources/js/app/components/{staggered-list.js => staggered-list.vue} (69%)

diff --git a/resources/js/app/components/staggered-list.js b/resources/js/app/components/staggered-list.vue
similarity index 69%
rename from resources/js/app/components/staggered-list.js
rename to resources/js/app/components/staggered-list.vue
index b1bf7adfd..4c2629a08 100644
--- a/resources/js/app/components/staggered-list.js
+++ b/resources/js/app/components/staggered-list.vue
@@ -1,25 +1,21 @@
-/**
- * Templates that uses this component (directly or indirectly):
- *  Template/Elements/relations.twig
- *
- * <staggered-list> component used for lists with staggered animation
- *
- */
-
+<template>
+    <transition-group
+        appear
+        name="${NAME}"
+        @enter="enter"
+        @after-enter="afterEnter"
+    >
+        <slot />
+    </transition-group>
+</template>
+<script>
 const NAME = 'staggered';
 
 export default {
-    template: `
-        <transition-group appear
-            name="${NAME}"
-            v-on:enter="enter"
-            v-on:after-enter="afterEnter">
-            <slot></slot>
-        </transition-group>`,
-
+    name: 'StaggeredList',
     props: {
         stagger: {
-            type: String,
+            type: Number,
             default: () => 50,
         },
     },
@@ -52,3 +48,4 @@ export default {
         }
     }
 }
+</script>

From 8cddf78a7cc05b5e944d4b7ed982ee35a3e76689 Mon Sep 17 00:00:00 2001
From: dante di domenico <dante@didoda.com>
Date: Thu, 3 Oct 2024 15:44:37 +0200
Subject: [PATCH 19/20] refactor: uri-input

---
 .../{uri-input.js => uri-input.vue}           | 20 ++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)
 rename resources/js/app/components/{uri-input.js => uri-input.vue} (92%)

diff --git a/resources/js/app/components/uri-input.js b/resources/js/app/components/uri-input.vue
similarity index 92%
rename from resources/js/app/components/uri-input.js
rename to resources/js/app/components/uri-input.vue
index c1652b4bc..98a5e1833 100644
--- a/resources/js/app/components/uri-input.js
+++ b/resources/js/app/components/uri-input.vue
@@ -1,17 +1,22 @@
-import { t } from 'ttag';
-
-export default {
-    template: /* template */`
+<template>
     <div>
-        <slot></slot>
+        <slot />
     </div>
-    `,
+</template>
+<script>
+import { t } from 'ttag';
 
+export default {
+    name: 'UriInput',
     props: {
         el: {
             type: HTMLInputElement,
+            default: null,
+        },
+        isValid: {
+            type: Boolean,
+            default: false,
         },
-        isValid: false
     },
 
     async mounted() {
@@ -73,3 +78,4 @@ export default {
         }
     }
 };
+</script>

From 3ab7ef774bce11d0f5d973e22f52e56f8490725a Mon Sep 17 00:00:00 2001
From: dante di domenico <dante@didoda.com>
Date: Thu, 31 Oct 2024 16:37:41 +0100
Subject: [PATCH 20/20] refactor: dashboard

---
 resources/js/app/app.js                       |   2 +-
 .../dashboard-search.vue}                     |  36 ++++-
 templates/Pages/Dashboard/index.twig          | 130 +++++++-----------
 3 files changed, 85 insertions(+), 83 deletions(-)
 rename resources/js/app/{pages/dashboard/index.js => components/dashboard-search.vue} (53%)

diff --git a/resources/js/app/app.js b/resources/js/app/app.js
index dd4203c86..6171cd5a3 100644
--- a/resources/js/app/app.js
+++ b/resources/js/app/app.js
@@ -43,7 +43,7 @@ const _vueInstance = new Vue({
         TagPicker: () => import(/* webpackChunkName: "tag-picker" */'app/components/tag-picker/tag-picker'),
         TagForm: () => import(/* webpackChunkName: "tag-form" */'app/components/tag-form/tag-form'),
         FolderPicker: () => import(/* webpackChunkName: "folder-picker" */'app/components/folder-picker/folder-picker'),
-        Dashboard: () => import(/* webpackChunkName: "modules-index" */'app/pages/dashboard/index'),
+        DashboardSearch: () => import(/* webpackChunkName: "dashboard-search" */'app/components/dashboard-search'),
         DateRange: () => import(/* webpackChunkName: "date-range" */'app/components/date-range/date-range'),
         DateRangesView: () => import(/* webpackChunkName: "date-ranges-view" */'app/components/date-ranges-view/date-ranges-view'),
         DateRangesList: () => import(/* webpackChunkName: "date-ranges-list" */'app/components/date-ranges-list/date-ranges-list'),
diff --git a/resources/js/app/pages/dashboard/index.js b/resources/js/app/components/dashboard-search.vue
similarity index 53%
rename from resources/js/app/pages/dashboard/index.js
rename to resources/js/app/components/dashboard-search.vue
index ba69b90e6..6010e43d1 100644
--- a/resources/js/app/pages/dashboard/index.js
+++ b/resources/js/app/components/dashboard-search.vue
@@ -1,9 +1,31 @@
-export default {
-    name: 'DashboardIndex',
+<template>
+    <section class="dashboard-section">
+        <header>
+            <h2>{{ msgSearch }}</h2>
+        </header>
 
-    components: {
-        RecentActivity:() => import(/* webpackChunkName: "recent-activity" */'app/components/recent-activity/recent-activity'),
-    },
+        <div role="search">
+            <div role="textsearch">
+                <input type="text" v-model="searchString" v-on:keydown.stop="captureKeys">
+                <button ref="searchSubmit" :disabled="!searchString || searchString.length < 3" v-on:click="searchObjects">
+                    <app-icon icon="carbon:search"></app-icon>
+                    {{ msgSearch }}
+                </button>
+            </div>
+            <div role="idsearch">
+                <input type="text" :placeholder="msgIdOrUname" v-model="searchId">
+                <button @click.prevent="goToID()" :disabled="!searchId">
+                    {{ msgId }}
+                </button>
+            </div>
+        </div>
+    </section>
+</template>
+<script>
+import { t } from 'ttag';
+
+export default {
+    name: 'DashboardSearch',
 
     props: {
         q: {
@@ -14,6 +36,9 @@ export default {
 
     data() {
         return {
+            msgId: t`Go to ID`,
+            msgIdOrUname: t`ID or uname`,
+            msgSearch: t`Search`,
             searchId: '',
             searchString: '',
         };
@@ -53,3 +78,4 @@ export default {
         },
     }
 }
+</script>
diff --git a/templates/Pages/Dashboard/index.twig b/templates/Pages/Dashboard/index.twig
index ba2d56a14..11bacd53c 100644
--- a/templates/Pages/Dashboard/index.twig
+++ b/templates/Pages/Dashboard/index.twig
@@ -1,92 +1,68 @@
 {% do _view.assign('title', __('Dashboard')) %}
 {% do _view.assign('bodyViewClass', 'view-dashboard') %}
 
-<dashboard q="{{ _view.getRequest().getSession().read('objects.filter.q') }}" inline-template>
-    <div class="dashboard">
-        <section class="dashboard-section">
-            <div class="dashboard-items">
-            {% for name, module in modules %}
-                {{ Layout.dashboardModuleLink(name, module)|raw }}
-            {% endfor %}
-            </div>
-        </section>
-
-        <section class="dashboard-section">
-
-            <header>
-                <h2>{{ __('Preferences and Tools') }}</h2>
-            </header>
+<div class="dashboard">
+    <section class="dashboard-section">
+        <div class="dashboard-items">
+        {% for name, module in modules %}
+            {{ Layout.dashboardModuleLink(name, module)|raw }}
+        {% endfor %}
+        </div>
+    </section>
 
-            <div class="dashboard-items">
+    <section class="dashboard-section">
 
-                {% if modules.trash %}
-                    <a href="{{ Url.build({ '_name': 'trash:list' }) }}" title="{{ __('Trash') }}" class="dashboard-item has-background-black">
-                        <span>{{ __('Trash can') }}</span>
-                        {{ Layout.moduleCount('trash', 'has-background-black')|raw }}
-                        <app-icon icon="carbon:trash-can" :style="{ width: '28px', height: '28px' }"></app-icon>
-                    </a>
-                {% endif %}
+        <header>
+            <h2>{{ __('Preferences and Tools') }}</h2>
+        </header>
 
-                {% if modules.users %}
-                    <a href="{{ Url.build({'_name': 'modules:list', 'object_type': 'users'}) }}" title="{{ __('System users') }}" class="dashboard-item has-background-black">
-                        <span>{{ __('System users') }}</span>
-                        {% if Layout.showCounter('users') %}{{ Layout.moduleCount('users', 'has-background-black')|raw }}{% endif %}
-                        <app-icon icon="carbon:user-admin" :style="{ width: '28px', height: '28px' }"></app-icon>
-                    </a>
-                {% endif %}
+        <div class="dashboard-items">
 
-                <a href="{{ Url.build({'_name': 'user_profile:view'}) }}" title="{{ __('User Profile') }}" class="dashboard-item has-background-black">
-                    <span>{{ __('User Profile') }}</span>
-                    <app-icon icon="carbon:user-profile" :style="{ width: '28px', height: '28px' }"></app-icon>
+            {% if modules.trash %}
+                <a href="{{ Url.build({ '_name': 'trash:list' }) }}" title="{{ __('Trash') }}" class="dashboard-item has-background-black">
+                    <span>{{ __('Trash can') }}</span>
+                    {{ Layout.moduleCount('trash', 'has-background-black')|raw }}
+                    <app-icon icon="carbon:trash-can" :style="{ width: '28px', height: '28px' }"></app-icon>
                 </a>
+            {% endif %}
 
-                {% if config('Filters.import') and ('POST' in jobsAllow or 'GET' in jobsAllow) %}
-                    <a href="{{ Url.build({'_name': 'import:index'}) }}" title="{{ __('Import') }}" class="dashboard-item has-background-black">
-                        <span>{{ __('Import') }}</span>
-                        <app-icon icon="carbon:download" :style="{ width: '28px', height: '28px' }"></app-icon>
-                    </a>
-                {% endif %}
-
-                {% if in_array('admin', user.roles) %}
-                    <a href="{{ Url.build({'_name': 'admin:list:appearance'}) }}" title="{{ __('Administration') }}" class="dashboard-item has-background-black">
-                        <span>{{ __('Administration') }}</span>
-                        <app-icon icon="carbon:settings" :style="{ width: '28px', height: '28px' }"></app-icon>
-                    </a>
-                    <a href="{{ Url.build({'_name': 'model:list:object_types'}) }}" title="{{ __('Data modeling') }}" class="dashboard-item has-background-black">
-                        <span>{{ __('Data modeling') }}</span>
-                        <app-icon icon="carbon:concept" :style="{ width: '28px', height: '28px' }"></app-icon>
-                    </a>
-                {% endif %}
-            </div>
-        </section>
-
-        <section class="dashboard-section">
-            <header>
-                <h2>{{ __('Search') }}</h2>
-            </header>
-
-            <div role="search">
-                <div role="textsearch">
-                    <input type="text" v-model="searchString" v-on:keydown.stop="captureKeys">
-                    <button ref="searchSubmit" :disabled="!searchString || searchString.length < 3" v-on:click="searchObjects">
-                        <app-icon icon="carbon:search"></app-icon>
-                        {{ __('Search') }}
-                    </button>
-                </div>
-                <div role="idsearch">
-                    <input type="text" placeholder="{{ __('ID or uname') }}" v-model="searchId">
-                    <button @click.prevent="goToID()" :disabled="!searchId">
-                        {{ __('ID') }}
-                    </button>
-                </div>
-            </div>
-        </section>
+            {% if modules.users %}
+                <a href="{{ Url.build({'_name': 'modules:list', 'object_type': 'users'}) }}" title="{{ __('System users') }}" class="dashboard-item has-background-black">
+                    <span>{{ __('System users') }}</span>
+                    {% if Layout.showCounter('users') %}{{ Layout.moduleCount('users', 'has-background-black')|raw }}{% endif %}
+                    <app-icon icon="carbon:user-admin" :style="{ width: '28px', height: '28px' }"></app-icon>
+                </a>
+            {% endif %}
 
-        <div class="dashboard-area">
+            <a href="{{ Url.build({'_name': 'user_profile:view'}) }}" title="{{ __('User Profile') }}" class="dashboard-item has-background-black">
+                <span>{{ __('User Profile') }}</span>
+                <app-icon icon="carbon:user-profile" :style="{ width: '28px', height: '28px' }"></app-icon>
+            </a>
 
-            <recent-activity :page-sizes={{ config('Pagination.sizeAvailable')|json_encode|escape('html_attr') }} :user-id={{ user.id }}></recent-activity>
+            {% if config('Filters.import') and ('POST' in jobsAllow or 'GET' in jobsAllow) %}
+                <a href="{{ Url.build({'_name': 'import:index'}) }}" title="{{ __('Import') }}" class="dashboard-item has-background-black">
+                    <span>{{ __('Import') }}</span>
+                    <app-icon icon="carbon:download" :style="{ width: '28px', height: '28px' }"></app-icon>
+                </a>
+            {% endif %}
 
+            {% if in_array('admin', user.roles) %}
+                <a href="{{ Url.build({'_name': 'admin:list:appearance'}) }}" title="{{ __('Administration') }}" class="dashboard-item has-background-black">
+                    <span>{{ __('Administration') }}</span>
+                    <app-icon icon="carbon:settings" :style="{ width: '28px', height: '28px' }"></app-icon>
+                </a>
+                <a href="{{ Url.build({'_name': 'model:list:object_types'}) }}" title="{{ __('Data modeling') }}" class="dashboard-item has-background-black">
+                    <span>{{ __('Data modeling') }}</span>
+                    <app-icon icon="carbon:concept" :style="{ width: '28px', height: '28px' }"></app-icon>
+                </a>
+            {% endif %}
         </div>
+    </section>
+
+    <dashboard-search :q="{{ _view.getRequest().getSession().read('objects.filter.q')|json_encode }}"></dashboard-search>
 
+    <div class="dashboard-area">
+        <recent-activity :page-sizes={{ config('Pagination.sizeAvailable')|json_encode|escape('html_attr') }} :user-id={{ user.id }}></recent-activity>
     </div>
-</dashboard>
+
+</div>