From 14ebe4e79b70e8712019a0643311954e9af75901 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?C=C3=BCneyt=20=C5=9Eent=C3=BCrk?= <cneytsenturk@gmail.com>
Date: Thu, 28 Jul 2022 00:42:16 +0300
Subject: [PATCH] Fixed document sent to and save button loading issue..

---
 app/View/Components/Form/Buttons.php          | 14 ++++++--
 resources/assets/js/views/common/documents.js | 34 +++++--------------
 .../documents/form/buttons.blade.php          |  8 ++---
 .../views/components/form/buttons.blade.php   |  4 +--
 4 files changed, 25 insertions(+), 35 deletions(-)

diff --git a/app/View/Components/Form/Buttons.php b/app/View/Components/Form/Buttons.php
index 0c4621dac..a541cc940 100644
--- a/app/View/Components/Form/Buttons.php
+++ b/app/View/Components/Form/Buttons.php
@@ -20,6 +20,10 @@ class Buttons extends Component
 
     public $cancelText;
 
+    public $saveDisabled;
+
+    public $saveLoading;
+
     /**
      * Create a new component instance.
      *
@@ -27,7 +31,8 @@ class Buttons extends Component
      */
     public function __construct(
         $groupClass = '',
-        $cancel = '', $cancelRoute = '', $cancelUrl = '', $cancelClass = '', $cancelText = '', $withoutCancel = false
+        $cancel = '', $cancelRoute = '', $cancelUrl = '', $cancelClass = '', $cancelText = '', $withoutCancel = false,
+        $saveDisabled = '', $saveLoading = ''
     ) {
         $this->groupClass = $this->getGroupClass($groupClass);
 
@@ -35,6 +40,9 @@ class Buttons extends Component
         $this->cancelClass = $this->getCancelClass($cancelClass);
         $this->cancelText = $this->getCancelText($cancelText);
         $this->withoutCancel = $withoutCancel;
+
+        $this->saveDisabled = ! empty($saveDisabled) ? $saveDisabled : 'form.loading';
+        $this->saveLoading = ! empty($saveLoading) ? $saveLoading : 'form.loading';
     }
 
     /**
@@ -62,11 +70,11 @@ class Buttons extends Component
             return $cancel;
         }
 
-        if (!empty($route)) {
+        if (! empty($route)) {
             return $this->getRouteAction($route);
         }
 
-        if (!empty($url)) {
+        if (! empty($url)) {
             return $this->getUrlAction($url);
         }
 
diff --git a/resources/assets/js/views/common/documents.js b/resources/assets/js/views/common/documents.js
index 95a077b76..ac5583732 100644
--- a/resources/assets/js/views/common/documents.js
+++ b/resources/assets/js/views/common/documents.js
@@ -76,6 +76,7 @@ const app = new Vue({
                 ',,'
             ],
             email_template: false,
+            send_to: false,
         }
     },
 
@@ -460,7 +461,6 @@ const app = new Vue({
         },
 
         onSelectedTax(item_index) {
-
             if (! this.tax_id) {
                 return;
             }
@@ -968,7 +968,6 @@ const app = new Vue({
 
                form_html.querySelectorAll('[type="submit"]').forEach((submit) => {
                    submit.addEventListener('click', () => {
-                        this.minor_form_loading = false;
                         window.onbeforeunload = null;
                    });
                });
@@ -983,33 +982,10 @@ const app = new Vue({
         },
 
         onSubmitViaSendEmail() {
-            let type_submit_icon = document.querySelector('[type="submit"]').querySelector('i');
-            let type_submit_span = document.querySelector('[type="submit"]').querySelector('span');
-
             this.form['senddocument'] = true;
-
-            this.minor_form_loading = true;
-
-            if (this.form.loading) {
-                type_submit_icon.classList.add('hidden');
-                type_submit_span.classList.add('opacity-100');
-            }
-
-            setTimeout(() => {
-                if (type_submit_icon && type_submit_span) {
-                    type_submit_icon.classList.remove('hidden');
-                    type_submit_span.classList.remove('opacity-100');
-                }
-            }, 5000);
+            this.send_to = true;
 
             this.onSubmit();
-
-            setTimeout(() => {
-                if (Object.keys(this.form.errors.errors.length > 0)) {
-                    this.minor_form_loading = false;
-                    return;
-                }
-            }, 200);
         },
     },
 
@@ -1150,5 +1126,11 @@ const app = new Vue({
 
             this.form.discount = this.form.discount.replace(',', '.');
         },
+
+        'form.loading': function (newVal, oldVal) {
+            if (! newVal) {
+                this.send_to = false;
+            }
+        },
     },
 });
\ No newline at end of file
diff --git a/resources/views/components/documents/form/buttons.blade.php b/resources/views/components/documents/form/buttons.blade.php
index b886223d4..3077d4ae9 100644
--- a/resources/views/components/documents/form/buttons.blade.php
+++ b/resources/views/components/documents/form/buttons.blade.php
@@ -1,7 +1,7 @@
 <x-form.section>
     <x-slot name="foot">
         <div class="flex justify-end">
-            <x-form.buttons cancel-route="{{ $cancelRoute }}" />
+            <x-form.buttons cancel-route="{{ $cancelRoute }}" save-loading="! send_to && form.loading" />
 
             @if (! $hideSendTo)
             <x-button
@@ -11,12 +11,12 @@
                 ::disabled="form.loading"
                 @click="onSubmitViaSendEmail"
             >
-                <i v-if="form.loading" class="animate-submit delay-[0.28s] absolute w-2 h-2 rounded-full left-0 right-0 -top-3.5 m-auto before:absolute before:w-2 before:h-2 before:-left-3.5 before:rounded-full before:animate-submit before:delay-[0.14s] after:absolute after:w-2 after:h-2 after:-right-3.5 after:rounded-full after:animate-submit after:delay-[0.42s]"></i>
-                <span :class="[{'opacity-0': form.loading}]">
+                <i v-if="send_to && form.loading" class="animate-submit delay-[0.28s] absolute w-2 h-2 rounded-full left-0 right-0 -top-3.5 m-auto before:absolute before:w-2 before:h-2 before:-left-3.5 before:rounded-full before:animate-submit before:delay-[0.14s] after:absolute after:w-2 after:h-2 after:-right-3.5 after:rounded-full after:animate-submit after:delay-[0.42s]"></i>
+                <span :class="[{'opacity-0': send_to && form.loading}]">
                     {{ trans('general.send_to') }}
                 </span>
             </x-button>
             @endif
         </div>
     </x-slot>
-</x-form.section>
\ No newline at end of file
+</x-form.section>
diff --git a/resources/views/components/form/buttons.blade.php b/resources/views/components/form/buttons.blade.php
index e66b04c42..f8765857a 100644
--- a/resources/views/components/form/buttons.blade.php
+++ b/resources/views/components/form/buttons.blade.php
@@ -14,10 +14,10 @@
         <x-button
             type="submit"
             class="relative flex items-center justify-center bg-green hover:bg-green-700 text-white px-6 py-1.5 text-base rounded-lg disabled:bg-green-100"
-            ::disabled="form.loading"
+            ::disabled="{!! $saveDisabled !!}"
             override="class"
         >
-            <x-button.loading>
+            <x-button.loading action="{!! $saveLoading !!}">
                 {{ trans('general.save') }}
             </x-button.loading>
         </x-button>