dave/coolify
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

more props, nav button fixes

Browse Source
This commit is contained in:
ayntk-ai
2024-08-28 13:31:09 +02:00
parent 141752b9ad
commit 1b51d46b3d
2 changed files with 59 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
resources/views/components/modal-confirmation.blade.php
View File

@@ -16,11 +16,12 @@
<div x-data="{ <div x-data="{
modalOpen: false, modalOpen: false,
step: {{ !empty($checkboxes) ? 1 : 2 }}, step: {{ !empty($checkboxes) ? 1 : ($confirmWithText ? 2 : 3) }},
selectedActions: @js(collect($checkboxes)->where('model', true)->pluck('id')->toArray()), selectedActions: @js(collect($checkboxes)->where('model', true)->pluck('id')->toArray()),
deleteText: '', deleteText: '',
password: '', password: '',
checkboxActions: @js($checkboxActions), checkboxActions: @js($checkboxActions),
actions: @js($actions),
getActionText(action) { getActionText(action) {
return this.checkboxActions[action] || 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 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"> <div class="flex items-center justify-between pb-3">
<h3 class="text-2xl font-bold">{{ $title }}</h3> <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"> 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" <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"> stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /> <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg> </svg>
</button> --}} </button>
</div> </div>
<div class="relative w-auto pb-8"> <div class="relative w-auto pb-8">
@if(!empty($checkboxes)) @if(!empty($checkboxes))
@@ -106,10 +107,11 @@
@endforeach @endforeach
</div> </div>
@else @else
<div x-init="step = 2"></div> <div x-init="step = {{ $confirmWithText ? 2 : 3 }}"></div>
@endif @endif
<!-- Step 2: Confirm deletion --> <!-- Step 2: Confirm deletion -->
@if($confirmWithText)
<div x-show="step === 2"> <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"> <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> <p class="font-bold">Warning</p>
@@ -117,12 +119,14 @@
</div> </div>
<div class="px-2 mb-4">The following actions will be performed:</div> <div class="px-2 mb-4">The following actions will be performed:</div>
<ul class="mb-4 space-y-2"> <ul class="mb-4 space-y-2">
<li class="flex items-center text-red-500"> <template x-for="action in actions" :key="action">
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <li class="flex items-center text-red-500">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path> <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
</svg> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
<span class="font-bold">All containers of this resource will be stopped and permanently deleted.</span> </svg>
</li> <span x-text="action" class="font-bold"></span>
</li>
</template>
<template x-for="action in selectedActions" :key="action"> <template x-for="action in selectedActions" :key="action">
<li class="flex items-center text-red-500"> <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"> <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> <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"> <input type="text" x-model="deleteText" class="w-full p-2 rounded mb-6 text-black input">
</div> </div>
@endif
<!-- Step 3: Password confirmation --> <!-- Step 3: Password confirmation -->
@if($confirmWithPassword)
<div x-show="step === 3"> <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"> <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> <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"> <input type="password" id="password-confirm" x-model="password" class="input" placeholder="Enter your password">
</div> </div>
</div> </div>
@endif
</div> </div>
<!-- Navigation buttons --> <!-- Navigation buttons -->
<div class="flex flex-row justify-between mt-4"> <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-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" --}}> @click="step > 1 ? step-- : modalOpen = false"
Continue x-text="(step === 1 && {{ json_encode(empty($checkboxes)) }}) || step === 1 ? 'Cancel' : 'Back'"
</x-forms.button> class="w-24 dark:bg-coolgray-200 dark:hover:bg-coolgray-300"
<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"> ></x-forms.button>
Confirm
</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> </div>
</div> </div>

4
resources/views/livewire/project/shared/danger.blade.php
View File

@@ -21,6 +21,10 @@
'delete_configurations' => 'All configuration files of this resource will be deleted on the server.', '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.' '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> This resource will be deleted. It is not reversible. <strong class="text-error">Please think again.</strong><br><br>
</x-modal-confirmation> </x-modal-confirmation>