From a0b00b4579afce81bd714b297fe72d3f232cfdd6 Mon Sep 17 00:00:00 2001
From: ilestis <jay.payne.ch@gmail.com>
Date: Sun, 30 Jun 2024 16:04:12 -0600
Subject: [PATCH] Remove jquery wip (qq)

---
 resources/js/quick-creator.js                 | 394 +++++++++---------
 .../views/entities/creator/form.blade.php     |  26 +-
 .../entities/creator/selection.blade.php      |   6 +-
 3 files changed, 204 insertions(+), 222 deletions(-)

diff --git a/resources/js/quick-creator.js b/resources/js/quick-creator.js
index f833f6d462..1647c36fd1 100644
--- a/resources/js/quick-creator.js
+++ b/resources/js/quick-creator.js
@@ -1,267 +1,253 @@
-var quickCreatorModalID = '#primary-dialog';
-var quickCreatorSubmitBtn;
+let quickCreatorSubmitBtns;
 
 let loadingArticle, selectionArticle, formArticle;
 
-$(document).ready(function () {
-    $(document).on('shown.bs.modal shown.bs.popover', function() {
-        quickCreatorUI();
-    });
-
-    $('.quick-creator-subform').click(function () {
-        $(document).on('shown.bs.modal', function() {
-            quickCreatorSubformHandler();
-        });
-        window.openDialog('primary-dialog', $(this).data('url'));
-    });
-});
-
 
 /**
  * Quick Entity Creator UI
  */
-function quickCreatorUI() {
-    loadingArticle = $('#qq-modal-loading');
-    selectionArticle = $('#qq-modal-selection');
-    formArticle = $('#qq-modal-form');
-    $('[data-toggle="entity-creator"]').unbind('click').click(function(e) {
-        e.preventDefault();
-
-        let type = $(this).data('type');
-        if (type === 'inline') {
-            $('.quick-creator-body').hide();
-            $('.quick-creator-footer').hide();
-            $('.quick-creator-loading').show();
-        } else {
-            quickCreatorLoadingModal();
-        }
-
-        $.ajax({
-            url: $(this).data('url'),
-            context: this
-        }).done(function (data) {
+const quickCreatorUI = () => {
+    loadingArticle = document.querySelector('#qq-modal-loading');
+    selectionArticle = document.querySelector('#qq-modal-selection');
+    formArticle = document.querySelector('#qq-modal-form');
+    document.querySelectorAll('[data-toggle="entity-creator"]').forEach(element => {
+        element.addEventListener('click', buildEntityForm);
+    });
+};
+
+const buildEntityForm = (event) => {
+    event.preventDefault();
+    const element = event.currentTarget;
+
+    const type = element.dataset.type;
+    if (type === 'inline') {
+        document.querySelector('.quick-creator-body').classList.add('hidden');
+        document.querySelector('.quick-creator-footer').classList.add('hidden');
+        document.querySelector('.quick-creator-loading').classList.remove('!hidden');
+    } else {
+        quickCreatorLoadingModal();
+    }
 
-            loadingArticle.hide();
-            selectionArticle.hide();
-            formArticle.show().html(data);
+    axios.get(element.dataset.url)
+        .then(res => {
+            loadingArticle.classList.add('!hidden');
+            selectionArticle.classList.add('!hidden');
+            formArticle.innerHTML = res.data;
+            formArticle.classList.remove('!hidden');
 
             quickCreatorSubformHandler();
             quickCreatorToggles();
             $(document).trigger('shown.bs.modal');
         });
 
-        return false;
-    });
-}
+    return false;
+};
 
-function quickCreatorDuplicateName() {
-    $('#qq-name-field').unbind('focusout').focusout(function() {
+const quickCreatorDuplicateName = () => {
+    const field = document.querySelector('#qq-name-field');
+    if (!field || field.dataset.init === '1') {
+        return;
+    }
+    field.dataset.init = '1';
+    field.addEventListener('focusout', function () {
         // Don't bother if the user didn't set any value
-        if (!$(this).val()) {
+        if (!this.value) {
             return;
         }
 
-        $(this).parent().parent().find('.duplicate-entity-warning').hide();
+        const warning = this.parentNode.querySelector('.duplicate-entity-warning');
+        warning.classList.add('hidden');
         // Check if an entity of the same type already exists, and warn when it does.
-        $.ajax({
-            'url': $(this).data('live') + '?q=' + $(this).val() + '&type=' + $(this).data('type'),
-            context: this
-        }).done(function (res) {
-            if (res.length > 0) {
-                let entities = Object.keys(res).map(function (k) { return '<a href="' + res[k].url + '">' + res[k].name + '</a>'; }).join(', ');
-                $(this).parent().parent().find('.duplicate-entities').html(entities);
-                $(this).parent().parent().find('.duplicate-entity-warning').show();
-            } else {
-                $(this).parent().parent().find('.duplicate-entity-warning').hide();
+        const url = this.dataset.live + '?q=' + this.value + '&type=' + this.dataset.type;
+        axios.get(url)
+            .then(res => {
+            if (res.data.length === 0) {
+                warning.classList.add('hidden');
+                return;
             }
+            const entities = Object.keys(res.data)
+                .map(function (k) { return '<a href="' + res.data[k].url + '">' + res.data[k].name + '</a>'; })
+                .join(', ');
+            field.parentNode.querySelector('.duplicate-entities').innerHTML = entities;
+            console.log(entities);
+            warning.classList.remove('hidden');
         });
     });
-}
+};
 
-function quickCreatorLoadingModal() {
-    $('#qq-modal-form').hide();
-    $('#qq-modal-selection').hide();
-    $('#qq-modal-loading').show();
-}
+const quickCreatorLoadingModal = () => {
+    document.querySelector('#qq-modal-form').classList.add('!hidden');
+    document.querySelector('#qq-modal-selection').classList.add('!hidden');
+    document.querySelector('#qq-modal-loading').classList.remove('!hidden');
+};
 
 /**
  *
  */
-function quickCreatorSubformHandler() {
+const quickCreatorSubformHandler = () => {
 
-    quickCreatorSubmitBtn = $('.quick-creator-submit');
-    if (quickCreatorSubmitBtn.length === 0) {
+    quickCreatorSubmitBtns = document.querySelectorAll('.quick-creator-submit');
+    if (quickCreatorSubmitBtns.length === 0) {
         return;
     }
 
     quickCreatorDuplicateName();
-
-    // Back button
-    quickCreatorBackButton();
     quickCreatorToggles();
 
-    // If we click on edit, we want to be redirected afterwards
-    quickCreatorSubmitBtn.on('click', function (e) {
-        let action = $(this).data('action');
-        if (!action) {
-            return true;
-        }
-
-        $('#entity-creator-form [name="action"]').val(action);
+    // If we click on edit, we want to be redirected afterwards. This is because the form's onsubmit re-casts the
+    // form as a formdata object
+    quickCreatorSubmitBtns.forEach(btn => {
+        btn.addEventListener('click', function (e) {
+            let action = this.value;
+            if (!action) {
+                return true;
+            }
 
-        return true;
+            document.querySelector('#entity-creator-form [name="action"]').value = action;
+            console.log('its ', document.querySelector('#entity-creator-form [name="action"]').value);
+            return true;
+        });
     });
 
-    $('#entity-creator-form').submit(function(e) {
+    document.getElementById('entity-creator-form').onsubmit = function (e) {
 
+        const form = e.target;
         e.preventDefault();
-        quickCreatorSubmitBtn
-            .prop('disabled', true)
-            .find('span').hide()
-            .parent().find('i.fa-spin').show();
-
-        $('div.text-error').remove();
-
-        $.post({
-            url: $(this).attr('action'),
-            data: $(this).serialize(),
-            context: this
-        }).done(function (result) {
-            // New entity was created, let's follow that redirect
-            //console.log('result', result);
-            if (typeof result === 'object') {
-                if (result.redirect) {
-                    window.location.replace(result.redirect);
-                    return;
-                }
-                let option = new Option(result._name, result._id);
-                let field = $('#' + result._target);
-                if (result._multi) {
-                    let selectedValues = field.val();
-                    selectedValues.push(result._id);
-                    field.append(option).val(selectedValues);
-                } else {
-                    field.children().remove().end().append(option).val(result._id);
-                }
-                field.trigger('change');
-
-                $('#qq-modal-form').html('').show();
-                $('#qq-modal-loading').hide();
-                $('#qq-modal-selection').show();
-
-                let target = document.getElementById('primary-dialog');
-                target.close();
-
-                quickCreatorHandleEvents();
-
-                return;
-            }
-
-            let target = document.getElementById('qq-modal-form');
-            target.innerHTML = result;
-
-            //$('#qq-modal-form').html(result).show();
-            //$('#qq-modal-loading').hide();
-            quickCreatorUI();
-            quickCreatorHandleEvents();
-
-        }).fail(function (err) {
-            /** @property {string} responseJSON - json errors from response  */
-            if (err.responseJSON.errors) {
-                let errors = err.responseJSON.errors;
-
-                let errorKeys = Object.keys(errors);
-                let foundAllErrors = true;
-                errorKeys.forEach(function (i) {
-                    let errorSelector = $('#entity-creator-form [name="' + i + '"]');
-                    if (errorSelector.length > 0) {
-                        errorSelector.addClass('input-error').parent().append('<div class="text-error">' + errors[i][0] + '</div>');
+        quickCreatorSubmitBtns.forEach(btn => btn.classList.add('btn-disabled', 'loading'));
+
+        const errors = document.querySelectorAll('div.text-error');
+        errors.forEach(error => error.remove());
+
+        const data = new FormData(form);
+        axios.post(form.getAttribute('action'), data)
+            .then(res => {
+                // New entity was created, let's follow that redirect
+                //console.log('result', result);
+                if (typeof res.data === 'object') {
+                    if (res.data.redirect) {
+                        window.location.replace(res.data.redirect);
+                        return;
+                    }
+                    let option = new Option(res.data._name, res.data._id);
+                    let field = document.querySelector('#' + res.data._target);
+                    if (res.data._multi) {
+                        let selectedValues = field.value;
+                        selectedValues.push(res.data._id);
+                        field.append(option).value = selectedValues;
                     } else {
-                        foundAllErrors = false;
+                        field.children().remove().end().append(option).val(res.data._id);
                     }
-                });
+                    field.trigger('change');
 
-                let firstItem = Object.keys(errors)[0];
-                let firstItemDom = $('#entity-creator-form input[name="' + firstItem + '"]');
+                    document.querySelector('#qq-modal-form').innerHTML = '';
+                    document.querySelector('#qq-modal-form').classList.remove('!hidden');
 
-                // If we can actually find the first element, switch to it and the correct tab.
-                if (firstItemDom[0]) {
-                    firstItemDom[0].scrollIntoView({behavior: 'smooth'});
+                    document.querySelector('#qq-modal-loading').classList.add('!hidden');
+                    document.querySelector('#qq-modal-selection').classList.remove('!hidden');
 
-                    // Switch tabs/pane
-                    $('.tab-content .active').removeClass('active');
-                    $('.nav-tabs li.active').removeClass('active');
-                    let firstPane = $('[name="' + firstItem + '"').closest('.tab-pane');
-                    firstPane.addClass('active');
-                    $('a[href="#' + firstPane.attr('id') + '"]').closest('li').addClass('active');
-                }
-            }
-            quickCreatorSubmitBtn
-                .prop('disabled', false)
-                .find('i.fa-spin').hide()
-                .parent().find('span').show();
+                    const target = document.getElementById('primary-dialog');
+                    target.close();
 
-            $('#entity-creator-form [name="action"]').val('');
-        });
-    });
-}
+                    quickCreatorHandleEvents();
 
-function quickCreatorBackButton() {
-    $('#entity-creator-back').click(function(e) {
-        e.preventDefault();
-        quickCreatorLoadingModal();
+                    return;
+                }
 
-        $.ajax({
-            url: $(this).data('url'),
-            context: this
-        }).done(function (result) {
-            let target = $(this).data('target');
-            formArticle.html(result).show();
-            loadingArticle.hide();
-            quickCreatorUI();
-        });
-    });
-}
+                let target = document.getElementById('qq-modal-form');
+                target.innerHTML = res.data;
 
-function quickCreatorToggles() {
-    $('.qq-mode-toggle').unbind('click').on('click', function (e) {
-        e.preventDefault();
+                quickCreatorUI();
+                quickCreatorHandleEvents();
+            })
+            .catch(function (err) {
+                /** @property {string} responseJSON - json errors from response  */
+                if (err.data.errors) {
+                    let errors = err.data.errors;
+
+                    let errorKeys = Object.keys(errors);
+                    let foundAllErrors = true;
+                    errorKeys.forEach(function (i) {
+                        let errorSelector = document.querySelector('#entity-creator-form [name="' + i + '"]');
+                        if (errorSelector) {
+                            errorSelector.classList.add('input-error');
+
+                            const errorElement = document.createElement('div');
+                            errorElement.classList.add('text-error');
+                            errorElement.innerHTML = errors[i][0];
+                            errorSelector.parentNode.append(errorElement);
+                        } else {
+                            foundAllErrors = false;
+                        }
+                    });
+
+                    let firstItem = Object.keys(errors)[0];
+                    let firstItemDom = document.querySelector('#entity-creator-form input[name="' + firstItem + '"]');
+
+                    // If we can actually find the first element, switch to it and the correct tab.
+                    if (firstItemDom) {
+                        firstItemDom.scrollIntoView({behavior: 'smooth'});
+                    }
+                }
+                quickCreatorSubmitBtns.forEach(btn => btn.classList.remove('btn-disabled', 'loading'));
 
-        if ($(this).hasClass('active')) {
-            return;
-        }
+                document.querySelector('#entity-creator-form [name="action"]').value = '';
+            });
 
-        $('.qq-mode-toggle').removeClass('active');
-        $(this).addClass('active');
+    };
+};
 
-        $('.quick-creator-body').hide();
-        $('.quick-creator-footer').hide();
-        $('.quick-creator-loading').show();
+const quickCreatorToggles = () => {
+    document.querySelectorAll('.qq-mode-toggle').forEach(element => {
+        element.addEventListener('click', function (e) {
+            e.preventDefault();
 
-        $.ajax({
-            url: $(this).data('url')
-        })
-            .done(function (result) {
-                formArticle.html(result).show();
-                quickCreatorHandleEvents();
-                $(document).trigger('shown.bs.modal');
-            })
-        ;
+            if (this.classList.contains('active')) {
+                return;
+            }
+
+            document.querySelector('.qq-mode-toggle').classList.remove('active');
+            this.classList.add('active');
+
+            document.querySelector('.quick-creator-body').classList.add('hidden');
+            document.querySelector('.quick-creator-footer').classList.add('hidden');
+            document.querySelector('.quick-creator-loading').classList.remove('!hidden');
+
+            axios.get(this.dataset.url)
+                .then(res => {
+                    formArticle.innerHTML = res.data;
+                    formArticle.classList.remove('!hidden');
+                    quickCreatorHandleEvents();
+                    $(document).trigger('shown.bs.modal');
+                })
+            ;
+        });
     });
 
-    $('.qq-action-more').unbind('click').on('click', function (e) {
+    document.querySelector('.qq-action-more')?.addEventListener('click', function (e) {
         e.preventDefault();
-        $(this).hide();
-        $('.qq-more-fields').show();
+        this.classList.add('hidden');
+        document.querySelector('.qq-more-fields').classList.remove('hidden');
     });
 
     quickCreatorUI();
-}
-
-function quickCreatorHandleEvents() {
+};
 
+const quickCreatorHandleEvents = () => {
     quickCreatorToggles();
     quickCreatorDuplicateName();
-    quickCreatorBackButton();
     quickCreatorSubformHandler();
-}
+};
+
+const initQuickCreatorFromField = () => {
+    const btns = document.querySelectorAll('.quick-creator-subform');
+    btns.forEach(btn => {
+        btn.addEventListener('click',  e => {
+            window.openDialog('primary-dialog', btn.dataset.url);
+        });
+    });
+};
+$(document).on('shown.bs.modal', function() {
+    quickCreatorUI();
+    quickCreatorSubformHandler();
+});
+initQuickCreatorFromField();
diff --git a/resources/views/entities/creator/form.blade.php b/resources/views/entities/creator/form.blade.php
index d82641a5e0..a7a6467c19 100644
--- a/resources/views/entities/creator/form.blade.php
+++ b/resources/views/entities/creator/form.blade.php
@@ -41,11 +41,11 @@ class="w-full"
             </x-alert>
         </x-forms.field>
 
-        <a href="#" class="qq-action-more text-uppercase cursor-pointer text-sm" style="{{ $singularType === 'post' ? 'display: none' : null }}">
-            <i class="fa-solid fa-caret-down" aria-hidden="true"></i>
+        <a href="#" class="qq-action-more text-uppercase cursor-pointer text-sm {{ $singularType === 'post' ? 'hidden' : null }}">
+            <x-icon class="fa-solid fa-caret-down" />
             {{ __('entities.creator.actions.more') }}
         </a>
-        <div class="qq-more-fields flex flex-col gap-5" style="{{ $singularType !== 'post' ? 'display: none' : null }}">
+        <div class="qq-more-fields flex flex-col gap-5 {{ $singularType !== 'post' ? 'hidden' : null }}">
             @php $allowNew = false; $dropdownParent = '#primary-dialog';@endphp
             @include('entities.creator.forms.' . $singularType)
 
@@ -64,26 +64,23 @@ class="w-full"
     <div class="quick-creator-footer">
 
             <div class="join mr-4">
-                <button type="submit" class="join-item btn2 btn-primary btn-sm quick-creator-submit" data-entity-type="{{ $singularType }}" title="{{ __('entities.creator.tooltips.create') }}">
+                <button type="submit" class="join-item btn2 btn-primary btn-sm quick-creator-submit" data-entity-type="{{ $singularType }}" title="{{ __('entities.creator.tooltips.create') }}" name="next">
                     <span>
                         {!! __('entities.creator.actions.create', ['type' => $singular ?? $entityType]) !!}
                     </span>
-                    <i class="fa-solid fa-spinner fa-spin" style="display: none"></i>
                 </button>
-                <button type="submit" class="join-item btn2 btn-primary btn-sm quick-creator-submit" data-entity-type="{{ $singularType }}" data-action="more" title="{{ __('entities.creator.tooltips.create_more') }}">
+                <button type="submit" class="join-item btn2 btn-primary btn-sm quick-creator-submit" name="next" data-entity-type="{{ $singularType }}" value="more" title="{{ __('entities.creator.tooltips.create_more') }}">
                     <span>
-                        <i class="fa-solid fa-plus-square" aria-hidden="true"></i>
+                        <x-icon class="fa-solid fa-plus-square" />
                     </span>
-                    <i class="fa-solid fa-spinner fa-spin" style="display: none"></i>
                 </button>
             </div>
 
             @if ($mode !== 'bulk')
-                <button type="submit" class="btn2 btn-sm quick-creator-submit" data-entity-type="{{ $singularType }}" data-action="edit" title="{{ __('entities.creator.tooltips.edit') }}">
+                <button type="submit" class="btn2 btn-sm quick-creator-submit" data-entity-type="{{ $singularType }}" title="{{ __('entities.creator.tooltips.edit') }}" name="next" value="edit">
                     <span>
                         {{ __('crud.edit') }}
                     </span>
-                    <i class="fa-solid fa-spinner fa-spin" style="display: none"></i>
                 </button>
             @endif
 
@@ -92,7 +89,7 @@ class="w-full"
             </a>
     </div>
     @endif
-    <div class="quick-creator-loading p-8 text-center text-lg" style="display: none">
+    <div class="quick-creator-loading p-8 text-center text-lg hidden">
         <x-icon class="load" />
     </div>
 </div>
@@ -101,10 +98,9 @@ class="w-full"
     </article>
     <footer class="bg-base-200 flex flex-wrap gap-3 justify-center items-center p-3">
         <button class="btn2 btn-primary quick-creator-submit" data-entity-type="{{ $singularType }}">
-                <span>
-                    <x-icon class="plus"></x-icon> {{ __('entities.creator.actions.create', ['type' => $entityType]) }}
-                </span>
-            <i class="fa-solid fa-spinner fa-spin" style="display: none"></i>
+            <span>
+                <x-icon class="plus"></x-icon> {{ __('entities.creator.actions.create', ['type' => $entityType]) }}
+            </span>
         </button>
     </footer>
 @endif
diff --git a/resources/views/entities/creator/selection.blade.php b/resources/views/entities/creator/selection.blade.php
index d9a4572916..b2fc7983ff 100644
--- a/resources/views/entities/creator/selection.blade.php
+++ b/resources/views/entities/creator/selection.blade.php
@@ -3,13 +3,13 @@
 
 </x-dialog.header>
 @endif
-<article id="qq-modal-loading" style="display: none">
+<article id="qq-modal-loading" class="!hidden">
     <div class="text-center text-4xl">
-        <i class="fa-solid fa-spinner fa-spin" aria-hidden="true"></i>
+        <x-icon class="fa-solid fa-spinner fa-spin" />
         <span class="sr-only">Loading...</span>
     </div>
 </article>
-<article id="qq-modal-form" style="display: none">
+<article id="qq-modal-form" class="!hidden">
 </article>
 <div class="container">
     <article id="qq-modal-selection">