Refactor code and update UI components

This commit is contained in:
Andras Bacsai
2024-03-22 11:34:15 +01:00
parent ca9a2cb13a
commit 8b7e1e4169
51 changed files with 592 additions and 609 deletions

View File

@@ -1,11 +1,12 @@
<form class="flex flex-col gap-2 rounded" wire:submit='submit'>
<x-forms.input placeholder="NODE_ENV" id="key" label="Name" required />
<x-forms.textarea x-show="$wire.is_multiline === true" x-cloak id="value" label="Value" required />
<x-forms.input x-show="$wire.is_multiline === false" x-cloak placeholder="production" id="value" x-bind:label="$wire.is_multiline === false && 'Value'" required />
<x-forms.input x-show="$wire.is_multiline === false" x-cloak placeholder="production" id="value"
x-bind:label="$wire.is_multiline === false && 'Value'" required />
@if (data_get($parameters, 'application_uuid'))
<x-forms.checkbox id="is_build_time" label="Build Variable?" />
@endif
<x-forms.checkbox id="is_multiline" label="Is Multiline?" />
@endif
<x-forms.checkbox id="is_multiline" label="Is Multiline?" />
<x-forms.button type="submit" @click="slideOverOpen=false">
Save
</x-forms.button>

View File

@@ -1,4 +1,4 @@
<div class="flex flex-col gap-2">
<div class="flex flex-col gap-4">
<div>
<div class="flex items-center gap-2">
<h2>Environment Variables</h2>

View File

@@ -1,49 +1,49 @@
<div>
<form wire:submit='submit'
class="flex flex-col gap-2 p-4 m-2 border lg:items-center border-coolgray-300 lg:m-0 lg:p-0 lg:border-0 lg:flex-row">
<form wire:submit='submit' class="flex flex-col items-center gap-4 p-4 border lg:items-start border-coolgray-300">
@if ($isLocked)
<svg class="icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<path d="M5 13a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-6z" />
<path d="M11 16a1 1 0 1 0 2 0a1 1 0 0 0-2 0m-3-5V7a4 4 0 1 1 8 0v4" />
</g>
</svg>
<x-forms.input disabled id="env.key" />
@else
@if ($isDisabled)
<div class="flex flex-1 w-full gap-2">
<x-forms.input disabled id="env.key" />
<x-forms.input disabled type="password" id="env.value" />
@if ($env->is_shared)
<x-forms.input disabled type="password" id="env.real_value" />
@endif
@if ($type !== 'service' && !$isSharedVariable)
<x-forms.checkbox instantSave id="env.is_build_time" label="Build Variable?" />
@endif
@else
@if ($env->is_multiline)
<x-forms.input isMultiline="{{ $env->is_multiline }}" id="env.key" />
<x-forms.textarea type="password" id="env.value" />
@else
<x-forms.input id="env.key" />
<x-forms.input type="password" id="env.value" />
@endif
@if ($env->is_shared)
<x-forms.input disabled type="password" id="env.real_value" />
@else
<x-forms.checkbox instantSave id="env.is_multiline" label="Is Multiline?" />
@endif
@if ($type !== 'service' && !$isSharedVariable)
<x-forms.checkbox instantSave id="env.is_build_time" label="Build Variable?" />
@endif
@endif
@endif
<div class="flex gap-2">
@if ($isLocked)
<svg class="icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2">
<path d="M5 13a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-6z" />
<path d="M11 16a1 1 0 1 0 2 0a1 1 0 0 0-2 0m-3-5V7a4 4 0 1 1 8 0v4" />
</g>
</svg>
<x-modal-confirmation isErrorButton buttonTitle="Delete">
You will delete environment variable <span
class="font-bold text-warning">{{ $env->key }}</span>.
</x-modal-confirmation>
</div>
@else
@if ($isDisabled)
<div class="flex flex-col w-full gap-2 lg:flex-row">
<x-forms.input disabled id="env.key" />
<x-forms.input disabled type="password" id="env.value" />
@if ($env->is_shared)
<x-forms.input disabled type="password" id="env.real_value" />
@endif
</div>
@else
<div class="flex flex-col w-full gap-2 lg:flex-row">
@if ($env->is_multiline)
<x-forms.input isMultiline="{{ $env->is_multiline }}" id="env.key" />
<x-forms.textarea type="password" id="env.value" />
@else
<x-forms.input id="env.key" />
<x-forms.input type="password" id="env.value" />
@endif
@if ($env->is_shared)
<x-forms.input disabled type="password" id="env.real_value" />
@endif
</div>
@endif
<div class="flex flex-col w-full gap-2 lg:flex-row">
@if ($type !== 'service' && !$isSharedVariable)
<x-forms.checkbox instantSave id="env.is_multiline" label="Is Multiline?" />
<x-forms.checkbox instantSave id="env.is_build_time" label="Build Variable?" />
@endif
<div class="flex-1"></div>
@if ($isDisabled)
<x-forms.button disabled type="submit">
Update
@@ -62,12 +62,13 @@
<x-forms.button wire:click='lock'>
Lock
</x-forms.button>
<x-modal-confirmation isErrorButton buttonTitle="Delete">
<x-modal-confirmation buttonFullWidth isErrorButton buttonTitle="Delete">
You will delete environment variable <span
class="font-bold text-warning">{{ $env->key }}</span>.
</x-modal-confirmation>
@endif
@endif
</div>
</div>
@endif
</form>
</div>