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,17 +1,10 @@
<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>
@endif --}}
@if ($fileStorage->is_directory)
<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="Source Path" :value="$fileStorage->fs_path" readonly />
<x-forms.input label="Destination Path" :value="$fileStorage->mount_path" readonly /> <x-forms.input label="Destination Path" :value="$fileStorage->mount_path" readonly />
</div> </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">
@if ($fileStorage->is_directory) @if ($fileStorage->is_directory)

View File

@@ -2,6 +2,7 @@
<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)
<div class="flex gap-2 items-end w-full md:flex-row flex-col">
@if ( @if (
$storage->resource_type === 'App\Models\ServiceApplication' || $storage->resource_type === 'App\Models\ServiceApplication' ||
$storage->resource_type === 'App\Models\ServiceDatabase') $storage->resource_type === 'App\Models\ServiceDatabase')
@@ -26,21 +27,28 @@
Update Update
</x-forms.button> </x-forms.button>
@endif @endif
</div>
@else @else
<div class="flex gap-2 items-end w-full">
<x-forms.input id="storage.name" required readonly /> <x-forms.input id="storage.name" required readonly />
<x-forms.input id="storage.host_path" readonly /> <x-forms.input id="storage.host_path" readonly />
<x-forms.input id="storage.mount_path" required readonly /> <x-forms.input id="storage.mount_path" required readonly />
</div>
@endif @endif
@else @else
@if ($isFirst) @if ($isFirst)
<div class="flex gap-2 items-end w-full">
<x-forms.input id="storage.name" label="Volume Name" required /> <x-forms.input id="storage.name" label="Volume Name" required />
<x-forms.input id="storage.host_path" helper="Directory on the host system." label="Source Path" /> <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="Directory inside the container." <x-forms.input id="storage.mount_path" label="Destination Path"
required /> helper="Directory inside the container." required />
</div>
@else @else
<div class="flex gap-2 items-end w-full">
<x-forms.input id="storage.name" required /> <x-forms.input id="storage.name" required />
<x-forms.input id="storage.host_path" /> <x-forms.input id="storage.host_path" />
<x-forms.input id="storage.mount_path" required /> <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">