Merge branch 'refactor/draganddrop'

# Conflicts:
#	public/build/assets/app-7d80a13c.js
#	public/build/manifest.json
#	resources/js/components/segel.js

package.json

@@ -1,5 +1,6 @@
 {
     "private": true,
+    "type": "module",
     "scripts": {
         "dev": "vite",
         "build": "vite build"
@@ -8,14 +9,13 @@
         "@tailwindcss/forms": "^0.4.0",
         "autoprefixer": "^10.4.0",
         "flatpickr": "^4.6.3",
-        "interactjs": "1.10.21",
         "postcss": "^8.4.31",
         "qr-scanner": "^1.4.1",
         "resolve-url-loader": "^5.0.0",
         "sass": "^1.52.3",
         "sass-loader": "^13.0.0",
         "tailwindcss": "^3.0.0",
-        "vite": "^4.5.2",
-        "laravel-vite-plugin": "^0.7.2"
+        "vite": "^5.1.1",
+        "laravel-vite-plugin": "^1.0.1"
     }
 }

postcss.config.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
     plugins: {
         tailwindcss: {},
         autoprefixer: {},

public/build/manifest.json

@@ -1,20 +1,20 @@
 {
   "node_modules/qr-scanner/qr-scanner-worker.min.js": {
-    "file": "assets/qr-scanner-worker.min-5f44a019.js",
-    "isDynamicEntry": true,
-    "src": "node_modules/qr-scanner/qr-scanner-worker.min.js"
+    "file": "assets/qr-scanner-worker.min-D85Z9gVD.js",
+    "src": "node_modules/qr-scanner/qr-scanner-worker.min.js",
+    "isDynamicEntry": true
   },
   "resources/js/app.js": {
+    "file": "assets/app-DnRfD_ec.js",
+    "src": "resources/js/app.js",
+    "isEntry": true,
     "dynamicImports": [
       "node_modules/qr-scanner/qr-scanner-worker.min.js"
-    ],
-    "file": "assets/app-7d80a13c.js",
-    "isEntry": true,
-    "src": "resources/js/app.js"
+    ]
   },
   "resources/sass/app.scss": {
-    "file": "assets/app-433994a8.css",
-    "isEntry": true,
-    "src": "resources/sass/app.scss"
+    "file": "assets/app-Bc0PxViC.css",
+    "src": "resources/sass/app.scss",
+    "isEntry": true
   }
 }

resources/js/app.js

@@ -15,8 +15,5 @@ Alpine.data('quickBook', QuickBook);
 Alpine.data('itemsTable', ItemsTable);
 Livewire.start();
 
-import interact from 'interactjs';
-window.interact = interact;
-
 import flatpickr from 'flatpickr';
 window.flatpickr = flatpickr;

resources/js/components/resourceTree.js

@@ -1,6 +1,4 @@
-import { Livewire } from '../../../vendor/livewire/livewire/dist/livewire.esm';
-import interact from 'interactjs';
-import Store from '../store';
+import { Livewire, Alpine } from '../../../vendor/livewire/livewire/dist/livewire.esm';
 
 export default (initialState) => ({
     visible: initialState.visible ?? true,
@@ -36,7 +34,7 @@ export default (initialState) => ({
 
     init() {
         this.$watch('expanded', value => {
-            if (Store.initialized) {
+            if (Alpine.store('segelInitialized')) {
                 clearTimeout(this.debounceExpanded);
 
                 this.debounceExpanded = setTimeout(() => {
@@ -49,7 +47,7 @@ export default (initialState) => ({
             clearTimeout(this.debounceSelected);
 
             this.debounceSelected = setTimeout(() => {
-                if (Store.initialized) {
+                if (Alpine.store('segelInitialized')) {
                     this.$dispatch('segel-setresources', value);
                 } else {
                     this.$refs.form.submit();
@@ -72,7 +70,7 @@ export default (initialState) => ({
                     selectedDates[0].getTime() - (selectedDates[0].getTimezoneOffset() * 60 * 1000)
                 ).getTime() / 1000;
 
-                if (Store.initialized) {
+                if (Alpine.store('segelInitialized')) {
                     this.$dispatch('segel-settimestamps', {
                         start: newDate,
                     });
@@ -81,30 +79,5 @@ export default (initialState) => ({
                 }
             },
         });
-
-        if (window.innerWidth > 640) {
-            interact(this.$el).resizable({
-                edges: { top: false, left: false, bottom: false, right: true, },
-                listeners: {
-                    move: function (event) {
-                        let width = event.rect.width < 140
-                            ? '140px'
-                            : `${event.rect.width}px`;
-
-                        Object.assign(event.target.style, {
-                            width: width,
-                        });
-
-                        // Store size in session storage.
-                        sessionStorage.setItem('resource-tree-width', width);
-
-                        // Dispatch resize event to make Segel recalculate.
-                        window.dispatchEvent(new Event('resize'));
-                    }
-                }
-            });
-
-            this.$el.style.width = sessionStorage.getItem('resource-tree-width') || '14rem';
-        }
     },
 })