refactor(file-storage): improve layout and structure of input fields

This commit is contained in:
Andras Bacsai
2025-03-28 22:10:15 +01:00
parent 98add9fd0f
commit 0bb47dfa56
2 changed files with 47 additions and 46 deletions

View File

@@ -1,16 +1,9 @@
<div class="py-4 "> <div class="">
<div class="flex flex-col justify-center pb-4 text-sm select-text"> <div class="flex flex-col justify-center pb-4 text-sm select-text">
{{-- @if (data_get($resource, 'build_pack') === 'dockercompose') <div class="flex gap-2 md:flex-row flex-col pt-4">
<h4>{{ data_get($resource, 'name', 'unknown') }}</h4> <x-forms.input label="Source Path" :value="$fileStorage->fs_path" readonly />
@endif --}} <x-forms.input label="Destination Path" :value="$fileStorage->mount_path" readonly />
@if ($fileStorage->is_directory) </div>
<h4 class="dark:text-white pt-4 border-t dark:border-coolgray-200">Directory Mount</h4>
@else
<h4 class="dark:text-white pt-4 border-t dark:border-coolgray-200">File Mount</h4>
@endif
<x-forms.input label="Source Path" :value="$fileStorage->fs_path" readonly />
<x-forms.input label="Destination Path" :value="$fileStorage->mount_path" readonly />
</div> </div>
<form wire:submit='submit' class="flex flex-col gap-2"> <form wire:submit='submit' class="flex flex-col gap-2">
<div class="flex gap-2"> <div class="flex gap-2">

View File

@@ -2,45 +2,53 @@
<form wire:submit='submit' class="flex flex-col gap-2 xl:items-end xl:flex-row"> <form wire:submit='submit' class="flex flex-col gap-2 xl:items-end xl:flex-row">
@if ($isReadOnly) @if ($isReadOnly)
@if ($isFirst) @if ($isFirst)
@if ( <div class="flex gap-2 items-end w-full md:flex-row flex-col">
$storage->resource_type === 'App\Models\ServiceApplication' || @if (
$storage->resource_type === 'App\Models\ServiceDatabase') $storage->resource_type === 'App\Models\ServiceApplication' ||
<x-forms.input id="storage.name" label="Volume Name" required readonly $storage->resource_type === 'App\Models\ServiceDatabase')
helper="Warning: Changing the volume name after the initial start could cause problems. Only use it when you know what are you doing." /> <x-forms.input id="storage.name" label="Volume Name" required readonly
@else helper="Warning: Changing the volume name after the initial start could cause problems. Only use it when you know what are you doing." />
<x-forms.input id="storage.name" label="Volume Name" required @else
helper="Warning: Changing the volume name after the initial start could cause problems. Only use it when you know what are you doing." /> <x-forms.input id="storage.name" label="Volume Name" required
@endif helper="Warning: Changing the volume name after the initial start could cause problems. Only use it when you know what are you doing." />
@if ($isService || $startedAt) @endif
<x-forms.input id="storage.host_path" readonly helper="Directory on the host system." @if ($isService || $startedAt)
label="Source Path" <x-forms.input id="storage.host_path" readonly helper="Directory on the host system."
helper="Warning: Changing the source path after the initial start could cause problems. Only use it when you know what are you doing." /> label="Source Path"
<x-forms.input id="storage.mount_path" label="Destination Path" helper="Warning: Changing the source path after the initial start could cause problems. Only use it when you know what are you doing." />
helper="Directory inside the container." required readonly /> <x-forms.input id="storage.mount_path" label="Destination Path"
@else helper="Directory inside the container." required readonly />
<x-forms.input id="storage.host_path" helper="Directory on the host system." label="Source Path" @else
helper="Warning: Changing the source path after the initial start could cause problems. Only use it when you know what are you doing." /> <x-forms.input id="storage.host_path" helper="Directory on the host system." label="Source Path"
<x-forms.input id="storage.mount_path" label="Destination Path" helper="Warning: Changing the source path after the initial start could cause problems. Only use it when you know what are you doing." />
helper="Directory inside the container." required readonly /> <x-forms.input id="storage.mount_path" label="Destination Path"
<x-forms.button type="submit"> helper="Directory inside the container." required readonly />
Update <x-forms.button type="submit">
</x-forms.button> Update
@endif </x-forms.button>
@endif
</div>
@else @else
<x-forms.input id="storage.name" required readonly /> <div class="flex gap-2 items-end w-full">
<x-forms.input id="storage.host_path" readonly /> <x-forms.input id="storage.name" required readonly />
<x-forms.input id="storage.mount_path" required readonly /> <x-forms.input id="storage.host_path" readonly />
<x-forms.input id="storage.mount_path" required readonly />
</div>
@endif @endif
@else @else
@if ($isFirst) @if ($isFirst)
<x-forms.input id="storage.name" label="Volume Name" required /> <div class="flex gap-2 items-end w-full">
<x-forms.input id="storage.host_path" helper="Directory on the host system." label="Source Path" /> <x-forms.input id="storage.name" label="Volume Name" required />
<x-forms.input id="storage.mount_path" label="Destination Path" helper="Directory inside the container." <x-forms.input id="storage.host_path" helper="Directory on the host system." label="Source Path" />
required /> <x-forms.input id="storage.mount_path" label="Destination Path"
helper="Directory inside the container." required />
</div>
@else @else
<x-forms.input id="storage.name" required /> <div class="flex gap-2 items-end w-full">
<x-forms.input id="storage.host_path" /> <x-forms.input id="storage.name" required />
<x-forms.input id="storage.mount_path" required /> <x-forms.input id="storage.host_path" />
<x-forms.input id="storage.mount_path" required />
</div>
@endif @endif
<div class="flex gap-2"> <div class="flex gap-2">
<x-forms.button type="submit"> <x-forms.button type="submit">