Refactor: js to vue files

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'),

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>

resources/js/app/components/autosize-textarea.js → 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>

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>