From 1b51d46b3d2789d68024206a8618c995aa9c8699 Mon Sep 17 00:00:00 2001
From: ayntk-ai <122374094+ayntk-ai@users.noreply.github.com>
Date: Wed, 28 Aug 2024 13:31:09 +0200
Subject: [PATCH] more props, nav button fixes

---
 .../components/modal-confirmation.blade.php   | 72 ++++++++++++++-----
 .../livewire/project/shared/danger.blade.php  |  4 ++
 2 files changed, 59 insertions(+), 17 deletions(-)

diff --git a/resources/views/components/modal-confirmation.blade.php b/resources/views/components/modal-confirmation.blade.php
index 71b5d370b..dcd14c0d2 100644
--- a/resources/views/components/modal-confirmation.blade.php
+++ b/resources/views/components/modal-confirmation.blade.php
@@ -16,11 +16,12 @@
 
 <div x-data="{
     modalOpen: false,
-    step: {{ !empty($checkboxes) ? 1 : 2 }},
+    step: {{ !empty($checkboxes) ? 1 : ($confirmWithText ? 2 : 3) }},
     selectedActions: @js(collect($checkboxes)->where('model', true)->pluck('id')->toArray()),
     deleteText: '',
     password: '',
     checkboxActions: @js($checkboxActions),
+    actions: @js($actions),
     getActionText(action) {
         return this.checkboxActions[action] || action;
     }
@@ -80,13 +81,13 @@
             <div x-show="modalOpen" x-trap.inert.noscroll="modalOpen" x-transition:enter="ease-out duration-100" x-transition:enter-start="opacity-0 -translate-y-2 sm:scale-95" x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100" x-transition:leave="ease-in duration-100" x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100" x-transition:leave-end="opacity-0 -translate-y-2 sm:scale-95" class="relative w-full py-6 border rounded min-w-full lg:min-w-[36rem] max-w-fit bg-neutral-100 border-neutral-400 dark:bg-base px-7 dark:border-coolgray-300">
                 <div class="flex items-center justify-between pb-3">
                     <h3 class="text-2xl font-bold">{{ $title }}</h3>
-                    {{-- <button @click="modalOpen=false"
+                    <button @click="modalOpen=false"
                         class="absolute top-0 right-0 flex items-center justify-center w-8 h-8 mt-5 mr-5 rounded-full dark:text-white hover:bg-coolgray-300">
                         <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                             stroke-width="1.5" stroke="currentColor">
                             <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                         </svg>
-                    </button> --}}
+                    </button>
                 </div>
                 <div class="relative w-auto pb-8">
                     @if(!empty($checkboxes))
@@ -106,10 +107,11 @@
                         @endforeach
                     </div>
                     @else
-                    <div x-init="step = 2"></div>
+                    <div x-init="step = {{ $confirmWithText ? 2 : 3 }}"></div>
                     @endif
 
                     <!-- Step 2: Confirm deletion -->
+                    @if($confirmWithText)
                     <div x-show="step === 2">
                         <div class="bg-red-100 border-l-4 border-red-500 text-red-700 p-4 mb-4" role="alert">
                             <p class="font-bold">Warning</p>
@@ -117,12 +119,14 @@
                         </div>
                         <div class="px-2 mb-4">The following actions will be performed:</div>
                         <ul class="mb-4 space-y-2">
-                            <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 class="font-bold">All containers of this resource will be stopped and permanently deleted.</span>
-                            </li>
+                            <template x-for="action in actions" :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="action" class="font-bold"></span>
+                                </li>
+                            </template>
                             <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">
@@ -135,8 +139,10 @@
                         <div class="text-black dark:text-white mb-4">Please type <span class="text-red-500 font-bold">DELETE</span> to confirm this destructive action:</div>
                         <input type="text" x-model="deleteText" class="w-full p-2 rounded mb-6 text-black input">
                     </div>
+                    @endif
 
                     <!-- Step 3: Password confirmation -->
+                    @if($confirmWithPassword)
                     <div x-show="step === 3">
                         <div class="bg-red-100 border-l-4 border-red-500 text-red-700 p-4 mb-4" role="alert">
                             <p class="font-bold">Final Confirmation</p>
@@ -149,16 +155,48 @@
                             <input type="password" id="password-confirm" x-model="password" class="input" placeholder="Enter your password">
                         </div>
                     </div>
+                    @endif
                 </div>
                 <!-- Navigation buttons -->
                 <div class="flex flex-row justify-between mt-4">
-                    <x-forms.button @click="step > 1 ? step-- : modalOpen = false" x-text="step > 1 ? 'Back' : 'Cancel'" class="w-24 dark:bg-coolgray-200 dark:hover:bg-coolgray-300"></x-forms.button>
-                    <x-forms.button x-show="step < 3" {{-- :class="{'w-24': true, 'bg-red-500 hover:bg-red-600': isErrorButton}" --}} @click="step++" {{-- x-bind:disabled="step === 1 && selectedActions.length === 0" --}}>
-                        Continue
-                    </x-forms.button>
-                    <x-forms.button x-show="step === 3" {{-- :class="{'w-24': true, 'bg-red-500 hover:bg-red-600': isErrorButton}" --}} @click="$wire.{{ $action }}(selectedActions, password); modalOpen = false" x-bind:disabled="!password">
-                        Confirm
-                    </x-forms.button>
+                    <x-forms.button 
+                        @click="step > 1 ? step-- : modalOpen = false" 
+                        x-text="(step === 1 && {{ json_encode(empty($checkboxes)) }}) || step === 1 ? 'Cancel' : 'Back'" 
+                        class="w-24 dark:bg-coolgray-200 dark:hover:bg-coolgray-300"
+                    ></x-forms.button>
+                    
+                    <template x-if="step === 1">
+                        <x-forms.button 
+                            @click="step++" 
+                            x-bind:disabled="selectedActions.length === 0"
+                            class="w-auto" 
+                            isError
+                        >
+                            Continue Permanent Deletion
+                        </x-forms.button>
+                    </template>
+                    
+                    <template x-if="step === 2">
+                        <x-forms.button 
+                            @click="step++" 
+                            x-bind:disabled="deleteText !== 'DELETE'"
+                            class="w-auto" 
+                            isError
+                        >
+                            Delete Permanently
+                        </x-forms.button>
+                    </template>
+                    
+                    <template x-if="step === 3">
+                        <x-forms.button 
+                            @click="$wire.{{ $action }}(selectedActions, password); modalOpen = false" 
+                            x-bind:disabled="!password"
+                            class="w-auto" 
+                            isError
+                        >
+                            Confirm Permanent Deletion
+                        </x-forms.button>
+                    </template>
                 </div>
             </div>
         </div>
diff --git a/resources/views/livewire/project/shared/danger.blade.php b/resources/views/livewire/project/shared/danger.blade.php
index 722d75c99..a86142138 100644
--- a/resources/views/livewire/project/shared/danger.blade.php
+++ b/resources/views/livewire/project/shared/danger.blade.php
@@ -21,6 +21,10 @@
             'delete_configurations' => 'All configuration files of this resource will be deleted on the server.',
             'docker_cleanup' => 'Docker cleanup will be executed which removes builder cache and unused images.'
         ]"
+        :actions="[
+            'All containers of this resource will be stopped and permanently deleted.'
+        ]"
+        {{-- :confirmWithPassword="false" --}}
     >
         This resource will be deleted. It is not reversible. <strong class="text-error">Please think again.</strong><br><br>
     </x-modal-confirmation>