Shiloh/lasthourcloud
Shiloh/lasthourcloud
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

Refactor Livewire project new select blade template

Browse Source
This commit is contained in:
Andras Bacsai 2024-04-12 10:28:40 +02:00
parent 2ac92df9d3
commit 50e96baea1
5 changed files with 47 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
app/Livewire/Project/Application/General.php
View File

@ -25,6 +25,7 @@ class General extends Component
public $customLabels;
public bool $labelsChanged = false;
public bool $isConfigurationChanged = false;
public bool $initLoadingCompose = false;
public ?string $initialDockerComposeLocation = null;
public ?string $initialDockerComposePrLocation = null;
@ -136,6 +137,10 @@ public function mount()
$this->application->save();
}
$this->initialDockerComposeLocation = $this->application->docker_compose_location;
if ($this->application->build_pack === 'dockercompose' && !$this->application->docker_compose_raw) {
$this->initLoadingCompose = true;
$this->dispatch('info', 'Loading docker compose file...');
}
}
public function instantSave()
{
@ -154,11 +159,15 @@ public function loadComposeFile($isInit = false)
}
['parsedServices' => $this->parsedServices, 'initialDockerComposeLocation' => $this->initialDockerComposeLocation, 'initialDockerComposePrLocation' => $this->initialDockerComposePrLocation] = $this->application->loadComposeFile($isInit);
$this->dispatch('success', 'Docker compose file loaded.');
$this->dispatch('compose_loaded');
} catch (\Throwable $e) {
$this->application->docker_compose_location = $this->initialDockerComposeLocation;
$this->application->docker_compose_pr_location = $this->initialDockerComposePrLocation;
$this->application->save();
return handleError($e, $this);
} finally {
$this->initLoadingCompose = false;
}
}
public function generateDomain(string $serviceName)

1
app/Livewire/Project/Application/Heading.php
View File

@ -22,6 +22,7 @@ public function getListeners()
$teamId = auth()->user()->currentTeam()->id;
return [
"echo-private:team.{$teamId},ApplicationStatusChanged" => 'check_status',
"compose_loaded" => '$refresh',
];
}
public function mount()

2
app/Livewire/Project/Service/EditCompose.php
View File

@ -18,7 +18,7 @@ public function mount() {
}
public function saveEditedCompose() {
$this->dispatch('warning', "Saving new docker compose...");
$this->dispatch('info', "Saving new docker compose...");
$this->dispatch('saveCompose', $this->service->docker_compose_raw);
}
public function render()

9
resources/views/components/forms/button.blade.php
View File

@ -5,11 +5,14 @@
@endisset
@isset($confirmAction)
x-on:{{ explode('(', $confirmAction)[0] }}.window="$wire.{{ explode('(', $confirmAction)[0] }}"
@endisset
>
@endisset>
{{ $slot }}
@if ($attributes->whereStartsWith('wire:click')->first())
<x-loading-on-button wire:target="{{ $attributes->whereStartsWith('wire:click')->first() }}" wire:loading.delay />
<x-loading-on-button wire:target="{{ $attributes->whereStartsWith('wire:click')->first() }}"
wire:loading.delay />
@elseif($attributes->whereStartsWith('wire:target')->first())
<x-loading-on-button wire:target="{{ $attributes->whereStartsWith('wire:target')->first() }}"
wire:loading.delay />
@endif
</button>

46
resources/views/livewire/project/application/general.blade.php
View File

@ -1,4 +1,4 @@
<div>
<div x-data="{ initLoadingCompose: $wire.entangle('initLoadingCompose') }">
<form wire:submit='submit' class="flex flex-col">
<div class="flex items-center gap-2">
<h2>General</h2>
@ -17,14 +17,15 @@
<div>General configuration for your application.</div>
<div class="flex flex-col gap-2 py-4">
<div class="flex flex-col items-end gap-2 xl:flex-row">
<x-forms.input id="application.name" label="Name" required />
<x-forms.input id="application.description" label="Description" />
<x-forms.input x-bind:disabled="initLoadingCompose" id="application.name" label="Name" required />
<x-forms.input x-bind:disabled="initLoadingCompose" id="application.description" label="Description" />
</div>
@if (!$application->dockerfile && $application->build_pack !== 'dockerimage')
<div class="flex flex-col gap-2">
<div class="flex gap-2">
<x-forms.select wire:model.live="application.build_pack" label="Build Pack" required>
<x-forms.select x-bind:disabled="initLoadingCompose" wire:model.live="application.build_pack"
label="Build Pack" required>
<option value="nixpacks">Nixpacks</option>
<option value="static">Static</option>
<option value="dockerfile">Dockerfile</option>
@ -152,23 +153,24 @@ class="underline" href="https://coolify.io/docs/knowledge-base/docker/registry"
@endif
@endif
@if ($application->build_pack === 'dockercompose')
<div class="flex flex-col gap-2" wire:init='loadComposeFile(true)'>
<div class="flex flex-col gap-2" x-init="$wire.dispatch('loadCompose', true)">
<div class="flex gap-2">
<x-forms.input placeholder="/" id="application.base_directory" label="Base Directory"
<x-forms.input x-bind:disabled="initLoadingCompose" placeholder="/"
id="application.base_directory" label="Base Directory"
helper="Directory to use as root. Useful for monorepos." />
<x-forms.input placeholder="/docker-compose.yaml" id="application.docker_compose_location"
label="Docker Compose Location"
<x-forms.input x-bind:disabled="initLoadingCompose" placeholder="/docker-compose.yaml"
id="application.docker_compose_location" label="Docker Compose Location"
helper="It is calculated together with the Base Directory:<br><span class='dark:text-warning'>{{ Str::start($application->base_directory . $application->docker_compose_location, '/') }}</span>" />
</div>
<div class="pt-4">The following commands are for advanced use cases. Only modify them if you
know what are
you doing.</div>
<div class="flex gap-2">
<x-forms.input placeholder="docker compose build"
<x-forms.input placeholder="docker compose build" x-bind:disabled="initLoadingCompose"
id="application.docker_compose_custom_build_command"
helper="If you use this, you need to specify paths relatively and should use the same compose file in the custom command, otherwise the automatically configured labels / etc won't work.<br><br>So in your case, use: <span class='dark:text-warning'>docker compose -f .{{ Str::start($application->base_directory . $application->docker_compose_location, '/') }} build</span>"
label="Custom Build Command" />
<x-forms.input placeholder="docker compose up -d"
<x-forms.input placeholder="docker compose up -d" x-bind:disabled="initLoadingCompose"
id="application.docker_compose_custom_start_command"
helper="If you use this, you need to specify paths relatively and should use the same compose file in the custom command, otherwise the automatically configured labels / etc won't work.<br><br>So in your case, use: <span class='dark:text-warning'>docker compose -f .{{ Str::start($application->base_directory . $application->docker_compose_location, '/') }} up -d</span>"
label="Custom Start Command" />
@ -220,7 +222,8 @@ class="underline" href="https://coolify.io/docs/knowledge-base/docker/registry"
id="application.custom_docker_run_options" label="Custom Docker Options" />
@endif
@if ($application->build_pack === 'dockercompose')
<x-forms.button wire:click="loadComposeFile">Reload Compose File</x-forms.button>
<x-forms.button wire:target='initLoadingCompose'
x-on:click="$wire.dispatch('loadCompose', false)">Reload Compose File</x-forms.button>
@if ($application->settings->is_raw_compose_deployment_enabled)
<x-forms.textarea rows="10" readonly id="application.docker_compose_raw"
label="Docker Compose Content (applicationId: {{ $application->id }})"
@ -257,18 +260,29 @@ class="underline" href="https://coolify.io/docs/knowledge-base/docker/registry"
<h3 class="pt-8">Pre/Post Deployment Commands</h3>
<div class="flex flex-col gap-2 xl:flex-row">
<x-forms.input id="application.pre_deployment_command" label="Pre-deployment Command"
<x-forms.input x-bind:disabled="initLoadingCompose" id="application.pre_deployment_command"
label="Pre-deployment Command"
helper="An optional script or command to execute in the existing container before the deployment begins." />
<x-forms.input id="application.pre_deployment_command_container" label="Container Name"
<x-forms.input x-bind:disabled="initLoadingCompose" id="application.pre_deployment_command_container"
label="Container Name"
helper="The name of the container to execute within. You can leave it blank if your application only has one container." />
</div>
<div class="flex flex-col gap-2 xl:flex-row">
<x-forms.input placeholder="php artisan migrate" id="application.post_deployment_command"
label="Post-deployment Command"
<x-forms.input x-bind:disabled="initLoadingCompose" placeholder="php artisan migrate"
id="application.post_deployment_command" label="Post-deployment Command"
helper="An optional script or command to execute in the newly built container after the deployment completes." />
<x-forms.input id="application.post_deployment_command_container" label="Container Name"
<x-forms.input x-bind:disabled="initLoadingCompose" id="application.post_deployment_command_container"
label="Container Name"
helper="The name of the container to execute within. You can leave it blank if your application only has one container." />
</div>
</div>
</form>
@script
<script>
$wire.$on('loadCompose', (isInit = true) => {
$wire.initLoadingCompose = true;
$wire.loadComposeFile(isInit);
});
</script>
@endscript
</div>