tiennm99/coolify
1
0 Fork 0
mirror of https://github.com/tiennm99/coolify.git synced 2026-10-14 14:17:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): stabilize domain controls and unify resource navigation

Browse Source 
Preserve optimistic listbox selections during Livewire saves, refresh service domains after updates, and align application, service, and server navigation layouts.
This commit is contained in:
Andras Bacsai committed 2026-08-11 11:28:46 +02:00
1 parent 3f47d41880
commit 41b3ed95aa
21 files changed
+464 -954
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

resources/views/components/forms/listbox.blade.php
+20 -6
View File
@@ -15,6 +15,7 @@
'disabled' => false,
'tooltip' => true,
'portal' => false,
'preserveValue' => false,
])
@php
@@ -45,22 +46,33 @@
<div class="relative min-w-0" x-data="{
open: false,
positioned: false,
saving: false,
options: @js(array_values($options)),
value: @if (!$wire) @js($value) @elseif ($live) @entangle($id).live @else @entangle($id) @endif,
value: @if (!$wire) @js($value) @elseif ($live && ! $onChange) @entangle($id).live @else @entangle($id) @endif,
get current() {
const found = this.options.find((option) => String(option.value) === String(this.value));
return found ? found.label : @js($placeholder);
},
choose(option) {
if (option.disabled) return;
async choose(option) {
if (this.saving || option.disabled) return;
this.open = false;
if (String(option.value) === String(this.value)) return;
this.value = option.value;
this.$dispatch('listbox-change', { value: option.value });
@if ($onChange && is_array($onChangeArgs))
this.$nextTick(() => this.$wire.{{ $onChange }}(...@js($onChangeArgs), option.value));
this.saving = true;
try {
await this.$wire.{{ $onChange }}(...@js($onChangeArgs), option.value);
} finally {
this.saving = false;
}
@elseif ($onChange)
this.$nextTick(() => this.$wire.{{ $onChange }}());
this.saving = true;
try {
await this.$wire.{{ $onChange }}();
} finally {
this.saving = false;
}
@endif
},
toggle() {
@@ -94,8 +106,10 @@
panel.style.minWidth = `${triggerRect.width}px`;
this.positioned = true;
}
}" x-modelable="value" {{ $attributes->whereStartsWith('x-model') }}
}" x-modelable="value" :class="{ 'pointer-events-none opacity-70': saving }"
{{ $attributes->whereStartsWith('x-model') }}
{{ $attributes->whereStartsWith('x-effect') }}
@if ($preserveValue) wire:ignore @endif
@click.outside="open = false" @keydown.escape="open = false" @resize.window="open && positionPanel()">
<button x-ref="trigger" id="{{ $triggerId }}" type="button" class="listbox-trigger" @click="toggle()"
@disabled($disabled) {{ $attributes->whereStartsWith('x-bind:disabled') }} aria-haspopup="listbox"
resources/views/components/forms/searchable-listbox.blade.php
+14 -5
View File
@@ -37,8 +37,9 @@
<div class="relative min-w-0" x-data="{
open: false,
query: '',
saving: false,
options: @js(array_values($options)),
value: @if (!$wire) @js($value) @elseif ($live) @entangle($id).live @else @entangle($id) @endif,
value: @if (!$wire) @js($value) @elseif ($live && ! $onChange) @entangle($id).live @else @entangle($id) @endif,
get current() {
const found = this.options.find((option) => String(option.value) === String(this.value));
return found ? found.label : @js($placeholder);
@@ -72,8 +73,8 @@
this.open = false;
this.query = '';
},
choose(option) {
if (option.disabled) {
async choose(option) {
if (this.saving || option.disabled) {
return;
}
@@ -83,9 +84,17 @@
}
this.value = option.value;
@if ($onChange) this.$nextTick(() => this.$wire.{{ $onChange }}()); @endif
@if ($onChange)
this.saving = true;
try {
await this.$wire.{{ $onChange }}();
} finally {
this.saving = false;
}
@endif
}
}" x-modelable="value" {{ $attributes->whereStartsWith('x-model') }}
}" x-modelable="value" :class="{ 'pointer-events-none opacity-70': saving }"
{{ $attributes->whereStartsWith('x-model') }}
{{ $attributes->whereStartsWith('x-effect') }}
@click.outside="close()" @keydown.escape.window="open && close()">
<button id="{{ $id }}-trigger" type="button" class="listbox-trigger" @click="toggle()"