Remove jquery wip

app/Http/Controllers/Families/MemberController.php

@@ -46,7 +46,7 @@ public function index(Campaign $campaign, Family $family)
                 'entity', 'entity.tags', 'entity.tags.entity', 'entity.image'
             ])
             ->has('entity')
-            ->paginate(15);
+            ->paginate();
 
         // Ajax Datagrid
         if (request()->ajax()) {

app/View/Components/Box.php

@@ -8,26 +8,17 @@
 
 class Box extends Component
 {
-    public ?string $id;
-    public ?string $url;
-    public ?string $href;
-    public string $css;
-    public bool $padding;
     /**
      * Create a new component instance.
      */
     public function __construct(
-        string $id = null,
-        string $url = null,
-        string $href = null,
-        string $css = '',
-        bool $padding = true,
+        public null|string $id = null,
+        public null|string $url = null,
+        public null|string $href = null,
+        public array $extra = [],
+        public string $css = '',
+        public bool $padding = true,
     ) {
-        $this->id = $id;
-        $this->url = $url;
-        $this->css = $css;
-        $this->href = $href;
-        $this->padding = $padding;
     }
 
     /**

resources/js/app.js

@@ -324,6 +324,7 @@ import './forms/calendar-date';
 import './keep-alive';
 import './quick-creator';
 import './datagrids';
+import './datagrids2';
 import './animations';
 import './quick-links';
 import './webhooks';

resources/js/components/select2.js

@@ -1,16 +1,15 @@
 $(document).ready(function() {
     window.initForeignSelect = function () {
-        if ($('select.select2').length === 0) {
+        const fields = document.querySelectorAll('select.select2');
+        if (fields.length === 0) {
             return;
         }
-        $.each($('select.select2'), function (index) {
-
-            if ($(this).hasClass('select2-hidden-accessible')) {
+        fields.forEach(field => {
+            if (field.classList.contains('select2-hidden-accessible')) {
                 return;
             }
-            if ($(this).hasClass('campaign-genres')) {
-
-                $(this).select2({
+            if (field.classList.contains('campaign-genres')) {
+                $(field).select2({
                     tags: false,
                     allowClear: true,
                     dropdownParent: '',
@@ -20,33 +19,34 @@ $(document).ready(function() {
                 return;
             }
 
-            let url = $(this).data('url');
-            let allowClear = $(this).data('allow-clear');
-            let dropdownParent = $(this).data('dropdown-parent');
+            const url = field.dataset.url;
+            const allowClear = field.dataset.allowClear;
+            const dropdownParent = field.dataset.dropdownParent || '';
+            const placeholder = field.dataset.placeholder;
 
             if (!url) {
-                $(this).select2({
+                $(field).select2({
                     tags: false,
-                    placeholder: $(this).data('placeholder'),
+                    placeholder: placeholder,
                     allowClear: allowClear ?? false,
                     //tags: $(this).data('tags') || false,
-                    language: $(this).data('language'),
+                    language: field.dataset.language,
                     minimumInputLength: 0,
-                    dropdownParent: dropdownParent || '',
+                    dropdownParent: dropdownParent,
                     width: '100%',
                 });
                 return;
             }
 
             // Check it isn't the select2-icon
-            $(this).select2({
+            $(field).select2({
                 tags: false,
-                placeholder: $(this).data('placeholder'),
+                placeholder: placeholder,
                 allowClear: allowClear || true,
                 //tags: $(this).data('tags') || false,
-                language: $(this).data('language'),
+                language: field.dataset.language,
                 minimumInputLength: 0,
-                dropdownParent: dropdownParent || '',
+                dropdownParent: dropdownParent,
                 width: '100%',
 
                 ajax: {
@@ -65,66 +65,96 @@ $(document).ready(function() {
                         };
                     },
                     error: function(response) {
-                        console.log('error', response);
+                        //console.log('error', response);
                         if (response.status === 503) {
                             window.showToast(response.responseJSON.message, 'error');
                         }
                         return { results: [] }; // Return dataset to load after error
                     },
                     cache: true
                 },
-                templateResult: function (item) {
-                    let $span = '';
-                    if (item.image) {
-                        $span = $("<span class='flex gap-2 items-center text-left'>" +
-                            "<img src='" + item.image + "' class='rounded-full flex-none w-6 h-6'/>" +
-                            "<span class='grow'>" + item.text + "</span>" +
-                            "</span>");
-                    } else {
-                        $span = $("<span>" + item.text + "</span>");
-                    }
-                    return $span;
-                },
+                templateResult: formatResultList,
+                templateSelection: formatResult,
                 createTag: function (data) {
                     return null;
                 }
             });
         });
 
-        // Select2 with local search
-        $('select.select2-local').select2({
-            placeholder: $(this).data('placeholder'),
-            language: $(this).data('language'),
+        initLocalSelects();
+        initColourSelects();
+    };
+});
+
+const formatResultList = (item) => {
+    const element = document.createElement('span');
+    if (item.image) {
+        element.classList.add('flex', 'gap-2', 'items-center', 'text-left');
+        element.innerHTML =  "<img src='" + item.image + "' class='rounded-full flex-none w-6 h-6'/>" +
+            "<span class='grow'>" + item.text + "</span>";
+    } else {
+        element.innerHTML = item.text;
+    }
+    return element;
+};
+
+const formatResult = (item) => {
+    if (!item.id) {
+        return item.text;
+    }
+    const ele = document.createElement('span');
+    ele.innerHTML = item.text;
+    return ele;
+};
+
+const initLocalSelects = () => {
+    // Select2 with local search
+    const fields = document.querySelectorAll('select.select2-local');
+    if (fields.length === 0) {
+        return;
+    }
+    fields.forEach(field => {
+        $(field).select2({
+            placeholder: field.dataset.placeholder,
+            language: field.dataset.language,
             allowClear: true
         });
+    });
+};
 
-        // Select2 with colour box
-        $('select.select2-colour').select2({
+const initColourSelects = () => {
+    // Select2 with local search
+    const fields = document.querySelectorAll('select.select2-colour');
+    if (fields.length === 0) {
+        return;
+    }
+    fields.forEach(field => {
+        $(field).select2({
+            placeholder: field.dataset.placeholder,
+            language: field.dataset.language,
             allowClear: false,
             templateResult: select2ColourState,
             templateSelection: select2ColourState,
         });
-    }
-});
+    });
+};
 
-function select2ColourState (state) {
+const select2ColourState = (state) => {
     if (state.id === 'none') {
         return state.text;
     }
 
-    let $state = $(
+    const span = $(
         '<span><div class="badge label bg-' + state.id + '"> </div>' + state.text + '</span>'
     );
-    return $state;
-}
+    return span;
+};
 
 // Load the translations into memory
-import "select2/dist/js/i18n/ca.js";
 import "select2/dist/js/i18n/de.js";
 import "select2/dist/js/i18n/en.js";
 import "select2/dist/js/i18n/es.js";
 import "select2/dist/js/i18n/fr.js";
-import "select2/dist/js/i18n/hu.js";
 import "select2/dist/js/i18n/it.js";
 import "select2/dist/js/i18n/nl.js";
 import "select2/dist/js/i18n/pl.js";

resources/js/crud.js

@@ -91,21 +91,29 @@ const registerDropdownFormActions = () => {
  */
 function registerUnsavedChanges() {
     // Return early if we have no elements to handle
-    entityFormActions = document.querySelectorAll('form[data-unload="1"]');
-    if (entityFormActions.length === 0) {
+    const forms = document.querySelectorAll('form[data-unload="1"]');
+    if (forms.length === 0) {
         return;
     }
-    let save = document.querySelector('#form-submit-main');
+    const save = document.querySelector('#form-submit-main');
 
     // Save every input change
-    const inputs = document.querySelectorAll('input', 'checkbox', 'select', 'textarea');
+    const inputs = document.querySelectorAll('form[data-unload="1"] input, form[data-unload="1"] select, form[data-unload="1"] textarea');
     inputs.forEach(input => {
-        input.addEventListener('change', function (e) {
-            if (input.dataset.skipUnsaved) {
-                return;
-            }
+        // Skip based on a data property, of it its old bootstrap fields (summernote)
+        if (input.dataset.skipUnsaved || input.classList.contains('form-control')) {
+            return;
+        }
+        // Standard input fields are simple
+        input.addEventListener('change', function () {
             window.entityFormHasUnsavedChanges = true;
         });
+        // For select2 fields, we need to listen to onchange directly, because jquery won't trigger the change event
+        if (input.classList.contains('select2')) {
+            input.onchange = () => {
+                window.entityFormHasUnsavedChanges = true;
+            };
+        }
     });
 
     if (!save) {