0d8a95473a
Refine mobile layout for project resource pages by making breadcrumbs and status blocks responsive, improving dropdown and checkbox touch behavior, and adding support for custom modal triggers. Add feature tests covering breadcrumb visibility and responsive checkbox layout.
104 lines
6.5 KiB
PHP
104 lines
6.5 KiB
PHP
<div>
|
|
<form wire:submit='submit' class="flex flex-col items-center gap-4 p-4 bg-white border lg:items-start dark:bg-base dark:border-coolgray-300 border-neutral-200">
|
|
@if ($isReadOnly)
|
|
@if (!$storage->isServiceResource() && !$storage->isDockerComposeResource())
|
|
<div class="w-full p-2 text-sm rounded bg-warning/10 text-warning">
|
|
This volume is mounted as read-only and cannot be modified from the UI.
|
|
</div>
|
|
@endif
|
|
@if ($isFirst)
|
|
<div class="flex gap-2 items-end w-full md:flex-row flex-col">
|
|
@if (
|
|
$storage->resource_type === 'App\Models\ServiceApplication' ||
|
|
$storage->resource_type === 'App\Models\ServiceDatabase')
|
|
<x-forms.input id="name" label="Volume Name" required readonly
|
|
helper="Warning: Changing the volume name after the initial start could cause problems. Only use it when you know what are you doing." />
|
|
@else
|
|
<x-forms.input id="name" label="Volume Name" required readonly
|
|
helper="Warning: Changing the volume name after the initial start could cause problems. Only use it when you know what are you doing." />
|
|
@endif
|
|
@if ($isService || $startedAt)
|
|
<x-forms.input id="hostPath" readonly helper="Directory on the host system."
|
|
label="Source Path"
|
|
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="mountPath" label="Destination Path"
|
|
helper="Directory inside the container." required readonly />
|
|
@else
|
|
<x-forms.input id="hostPath" readonly helper="Directory on the host system."
|
|
label="Source Path"
|
|
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="mountPath" label="Destination Path"
|
|
helper="Directory inside the container." required readonly />
|
|
@endif
|
|
</div>
|
|
@else
|
|
<div class="flex gap-2 items-end w-full">
|
|
<x-forms.input id="name" required readonly />
|
|
<x-forms.input id="hostPath" readonly />
|
|
<x-forms.input id="mountPath" required readonly />
|
|
</div>
|
|
@endif
|
|
@if (!$isService)
|
|
@can('update', $resource)
|
|
<div class="w-full sm:w-96">
|
|
<x-forms.checkbox instantSave canGate="update" :canResource="$resource" label="Add suffix for PR deployments"
|
|
id="isPreviewSuffixEnabled"
|
|
helper="When enabled, a -pr-N suffix is added to this volume's name for preview deployments (e.g. myvolume becomes myvolume-pr-1). Disable this for volumes that should be shared between the main and preview deployments."></x-forms.checkbox>
|
|
</div>
|
|
@endcan
|
|
@endif
|
|
@else
|
|
@can('update', $resource)
|
|
@if ($isFirst)
|
|
<div class="flex gap-2 items-end w-full">
|
|
<x-forms.input id="name" label="Volume Name" required />
|
|
<x-forms.input id="hostPath" helper="Directory on the host system." label="Source Path" />
|
|
<x-forms.input id="mountPath" label="Destination Path"
|
|
helper="Directory inside the container." required />
|
|
</div>
|
|
@else
|
|
<div class="flex gap-2 items-end w-full">
|
|
<x-forms.input id="name" required />
|
|
<x-forms.input id="hostPath" />
|
|
<x-forms.input id="mountPath" required />
|
|
</div>
|
|
@endif
|
|
@if (!$isService)
|
|
<div class="w-full sm:w-96">
|
|
<x-forms.checkbox instantSave canGate="update" :canResource="$resource" label="Add suffix for PR deployments"
|
|
id="isPreviewSuffixEnabled"
|
|
helper="When enabled, a -pr-N suffix is added to this volume's name for preview deployments (e.g. myvolume becomes myvolume-pr-1). Disable this for volumes that should be shared between the main and preview deployments."></x-forms.checkbox>
|
|
</div>
|
|
@endif
|
|
<div class="flex gap-2">
|
|
<x-forms.button type="submit">
|
|
Update
|
|
</x-forms.button>
|
|
<x-modal-confirmation title="Confirm persistent storage deletion?" isErrorButton buttonTitle="Delete"
|
|
submitAction="delete" :actions="[
|
|
'The selected persistent storage/volume will be permanently deleted.',
|
|
'If the persistent storage/volume is actvily used by a resource data will be lost.',
|
|
]" confirmationText="{{ $storage->name }}"
|
|
confirmationLabel="Please confirm the execution of the actions by entering the Storage Name below"
|
|
shortConfirmationLabel="Storage Name" />
|
|
</div>
|
|
@else
|
|
@if ($isFirst)
|
|
<div class="flex gap-2 items-end w-full">
|
|
<x-forms.input id="name" label="Volume Name" required disabled />
|
|
<x-forms.input id="hostPath" helper="Directory on the host system." label="Source Path"
|
|
disabled />
|
|
<x-forms.input id="mountPath" label="Destination Path"
|
|
helper="Directory inside the container." required disabled />
|
|
</div>
|
|
@else
|
|
<div class="flex gap-2 items-end w-full">
|
|
<x-forms.input id="name" required disabled />
|
|
<x-forms.input id="hostPath" disabled />
|
|
<x-forms.input id="mountPath" required disabled />
|
|
</div>
|
|
@endif
|
|
@endcan
|
|
@endif
|
|
</form>
|
|
</div>
|