From 50e96baea14bc2880c9abad838dc4a1ae2066279 Mon Sep 17 00:00:00 2001
From: Andras Bacsai <andras.bacsai@gmail.com>
Date: Fri, 12 Apr 2024 10:28:40 +0200
Subject: [PATCH] Refactor Livewire project new select blade template

---
 app/Livewire/Project/Application/General.php  |  9 ++++
 app/Livewire/Project/Application/Heading.php  |  1 +
 app/Livewire/Project/Service/EditCompose.php  |  2 +-
 .../views/components/forms/button.blade.php   |  9 ++--
 .../project/application/general.blade.php     | 46 ++++++++++++-------
 5 files changed, 47 insertions(+), 20 deletions(-)

diff --git a/app/Livewire/Project/Application/General.php b/app/Livewire/Project/Application/General.php
index a8032f6f8..c2bbed5ff 100644
--- a/app/Livewire/Project/Application/General.php
+++ b/app/Livewire/Project/Application/General.php
@@ -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 @@ class General extends Component
             $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 @@ class General extends Component
             }
             ['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)
diff --git a/app/Livewire/Project/Application/Heading.php b/app/Livewire/Project/Application/Heading.php
index 089eb5e9f..2e1f8a7c7 100644
--- a/app/Livewire/Project/Application/Heading.php
+++ b/app/Livewire/Project/Application/Heading.php
@@ -22,6 +22,7 @@ class Heading extends Component
         $teamId = auth()->user()->currentTeam()->id;
         return [
             "echo-private:team.{$teamId},ApplicationStatusChanged" => 'check_status',
+            "compose_loaded" => '$refresh',
         ];
     }
     public function mount()
diff --git a/app/Livewire/Project/Service/EditCompose.php b/app/Livewire/Project/Service/EditCompose.php
index cc385315e..84cc45cf2 100644
--- a/app/Livewire/Project/Service/EditCompose.php
+++ b/app/Livewire/Project/Service/EditCompose.php
@@ -18,7 +18,7 @@ class EditCompose extends Component
     }
 
     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()
diff --git a/resources/views/components/forms/button.blade.php b/resources/views/components/forms/button.blade.php
index 3eafc26c6..a109e84ac 100644
--- a/resources/views/components/forms/button.blade.php
+++ b/resources/views/components/forms/button.blade.php
@@ -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>
diff --git a/resources/views/livewire/project/application/general.blade.php b/resources/views/livewire/project/application/general.blade.php
index 00c204f46..b31c14882 100644
--- a/resources/views/livewire/project/application/general.blade.php
+++ b/resources/views/livewire/project/application/general.blade.php
@@ -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 @@
                     @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 @@
                     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 @@
 
             <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>