From 73dfdb83a70ff9e6e3d1d97ab710a0542026eb8a Mon Sep 17 00:00:00 2001
From: ayntk-ai <122374094+ayntk-ai@users.noreply.github.com>
Date: Sat, 31 Aug 2024 12:55:17 +0200
Subject: [PATCH] fix rendering bug, more props

---
 .../components/modal-confirmation.blade.php   | 84 +++++++++++--------
 1 file changed, 47 insertions(+), 37 deletions(-)

diff --git a/resources/views/components/modal-confirmation.blade.php b/resources/views/components/modal-confirmation.blade.php
index 2b86fe475..acf641203 100644
--- a/resources/views/components/modal-confirmation.blade.php
+++ b/resources/views/components/modal-confirmation.blade.php
@@ -5,13 +5,14 @@
 'buttonFullWidth' => false,
 'customButton' => null,
 'disabled' => false,
-'action' => 'delete',
+'submitAction' => 'delete',
 'content' => null,
 'checkboxes' => [],
-'checkboxActions' => [],
 'actions' => [],
 'confirmWithText' => true,
 'confirmText' => 'Confirm Deletion',
+'confirmationLabel' => 'Please confirm the execution of the actions by entering the Name below',
+'shortConfirmationLabel' => 'Name',
 'confirmWithPassword' => true,
 'step1ButtonText' => 'Continue Deletion',
 'step2ButtonText' => 'Delete Permanently',
@@ -23,38 +24,47 @@
     step: {{ !empty($checkboxes) ? 1 : ($confirmWithPassword ? 2 : 3) }},
     initialStep: {{ !empty($checkboxes) ? 1 : ($confirmWithPassword ? 2 : 3) }},
     finalStep: {{ $confirmWithPassword ? 3 : (!empty($checkboxes) || $confirmWithText ? 2 : 1) }},
-    selectedActions: @js(collect($checkboxes)->where('model', true)->pluck('id')->toArray()),
     deleteText: '',
     password: '',
-    checkboxActions: @js($checkboxActions),
     actions: @js($actions),
     confirmText: @js($confirmText),
     userConfirmText: '',
     confirmWithText: @js($confirmWithText),
     confirmWithPassword: @js($confirmWithPassword),
     copied: false,
-    action: @js($action),
-    getActionText(action) {
-        return this.checkboxActions[action] || action;
-    },
+    submitAction: @js($submitAction),
+    passwordError: '',
+    selectedActions: [],
     resetModal() {
         this.step = this.initialStep;
-        this.selectedActions = @js(collect($checkboxes)->where('model', true)->pluck('id')->toArray());
         this.deleteText = '';
         this.password = '';
         this.userConfirmText = '';
+        this.passwordError = '';
     },
     step1ButtonText: @js($step1ButtonText),
     step2ButtonText: @js($step2ButtonText),
     step3ButtonText: @js($step3ButtonText),
-    executeAction() {
-        if (this.confirmWithPassword) {
-            $wire.call(this.action, this.password);
-        } else {
-            $wire.call(this.action);
+    validatePassword() {
+        this.passwordError = '';
+        if (this.confirmWithPassword && !this.password) {
+            this.passwordError = 'Password is required.';
+            return false;
+        }
+        return true;
+    },
+    submitForm() {
+        if (this.validatePassword()) {
+            $wire.call(this.submitAction, this.password, this.selectedActions)
+                .then(result => {
+                    if (result === true) {
+                        this.modalOpen = false;
+                        this.resetModal();
+                    } else if (typeof result === 'string') {
+                        this.passwordError = result;
+                    }
+                });
         }
-        this.modalOpen = false;
-        this.resetModal();
     },
     copyConfirmText() {
         navigator.clipboard.writeText(this.confirmText);
@@ -62,8 +72,9 @@
         setTimeout(() => {
             this.copied = false;
         }, 2000);
-    }
-}" @keydown.escape.window="modalOpen = false; resetModal()" :class="{ 'z-40': modalOpen }" class="relative w-auto h-auto">
+    },
+    
+}" @keydown.escape.window="modalOpen = false; resetModal()" :class="{ 'z-40': modalOpen }" class="relative w-auto h-auto" @password-error.window="passwordError = $event.detail">
     @if ($customButton)
     @if ($buttonFullWidth)
     <x-forms.button @click="modalOpen=true" class="w-full">
@@ -144,31 +155,29 @@
                             <p class="font-bold">Warning</p>
                             <p>This operation is not reversible. Please proceed with caution.</p>
                         </div>
-                        <div class="px-2 mb-4">The following action<span x-show="actions.length + selectedActions.length > 1">s</span> will be performed:</div>
+                        <div class="px-2 mb-4">The following actions will be performed:</div>
                         <ul class="mb-4 space-y-2">
-                            <template x-for="action in actions" :key="action">
+                            @foreach($actions as $action)
                                 <li class="flex items-center text-red-500">
                                     <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                                     </svg>
-                                    <span x-text="action" class="font-bold"></span>
+                                    <span>{{ $action }}</span>
                                 </li>
-                            </template>
-                            <template x-if="selectedActions.length > 0">
-                                <template x-for="action in selectedActions" :key="action">
-                                    <li class="flex items-center text-red-500">
-                                        <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
-                                        </svg>
-                                        <span x-text="checkboxActions[action]" class="font-bold"></span>
-                                    </li>
-                                </template>
-                            </template>
+                            @endforeach
+                            @foreach($checkboxes as $checkbox)
+                                <li class="flex items-center text-red-500" x-show="selectedActions.includes('{{ $checkbox['id'] }}')">
+                                    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+                                    </svg>
+                                    <span>{{ $checkbox['label'] }}</span>
+                                </li>
+                            @endforeach
                         </ul>
                         @if($confirmWithText)
                         <div class="mb-4">
                             <h4 class="text-lg font-semibold mb-2">Confirm Actions</h4>
-                            <p class="text-sm mb-2">Please confirm the execution of the actions by entering the Resource Name below</p>
+                            <p class="text-sm mb-2">{{ $confirmationLabel }}</p>
 
                             <div class="relative mb-2">
                                 <input type="text" x-model="confirmText" class="w-full p-2 pr-10 rounded text-black input cursor-text" readonly>
@@ -188,7 +197,7 @@
                             </div>
 
                             <label for="userConfirmText" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mt-4">
-                                Resource Name
+                                {{ $shortConfirmationLabel }}
                             </label>
                             <input type="text" x-model="userConfirmText" class="w-full p-2 rounded text-black input mt-1" placeholder="Type the Resource Name here">
                         </div>
@@ -206,7 +215,8 @@
                             <label for="password-confirm" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                                 Your Password
                             </label>
-                            <input type="password" id="password-confirm" x-model="password" class="input" placeholder="Enter your password">
+                            <input type="password" id="password-confirm" x-model="password" class="input w-full" placeholder="Enter your password">
+                            <p x-show="passwordError" x-text="passwordError" class="text-red-500 text-sm mt-1"></p>
                         </div>
                     </div>
                     @endif
@@ -225,7 +235,7 @@
                     </template>
 
                     <template x-if="step === 1">
-                        <x-forms.button @click="step++" x-bind:disabled="selectedActions.length === 0" class="w-auto" isError>
+                          <x-forms.button @click="step++" class="w-auto" isError>
                             <span x-text="step1ButtonText"></span>
                         </x-forms.button>
                     </template>
@@ -237,7 +247,7 @@
                     </template>
 
                     <template x-if="step === 3">
-                        <x-forms.button @click="executeAction()" x-bind:disabled="confirmWithPassword && !password" class="w-auto" isError>
+                        <x-forms.button @click="submitForm()" x-bind:disabled="confirmWithPassword && !password" class="w-auto" isError>
                             <span x-text="step3ButtonText"></span>
                         </x-forms.button>
                     </template>