From 9bbf25b9f48002bfc85b6ca60393afa7003aa820 Mon Sep 17 00:00:00 2001
From: Andras Bacsai <andras.bacsai@gmail.com>
Date: Tue, 16 May 2023 13:11:05 +0200
Subject: [PATCH] wip

---
 .../Livewire/Project/Application/General.php  |  1 -
 .../Livewire/Project/Application/Previews.php | 15 +++++
 .../Livewire/Project/Application/Source.php   |  5 +-
 resources/css/app.css                         |  6 +-
 .../project/application/destination.blade.php |  1 +
 .../project/application/general.blade.php     | 67 +++++++++----------
 .../project/application/previews.blade.php    |  3 +
 .../project/application/source.blade.php      |  1 +
 .../application/storages/all.blade.php        |  2 +-
 .../application/configuration.blade.php       | 45 +++++++------
 10 files changed, 80 insertions(+), 66 deletions(-)
 create mode 100644 app/Http/Livewire/Project/Application/Previews.php
 create mode 100644 resources/views/livewire/project/application/previews.blade.php

diff --git a/app/Http/Livewire/Project/Application/General.php b/app/Http/Livewire/Project/Application/General.php
index a0236e3bc..0b551e55f 100644
--- a/app/Http/Livewire/Project/Application/General.php
+++ b/app/Http/Livewire/Project/Application/General.php
@@ -61,7 +61,6 @@ class General extends Component
     }
     public function mount()
     {
-        $this->application = Application::where('id', $this->applicationId)->with('destination', 'settings')->firstOrFail();
         $this->is_static = $this->application->settings->is_static;
         $this->is_git_submodules_allowed = $this->application->settings->is_git_submodules_allowed;
         $this->is_git_lfs_allowed = $this->application->settings->is_git_lfs_allowed;
diff --git a/app/Http/Livewire/Project/Application/Previews.php b/app/Http/Livewire/Project/Application/Previews.php
new file mode 100644
index 000000000..5e732b19e
--- /dev/null
+++ b/app/Http/Livewire/Project/Application/Previews.php
@@ -0,0 +1,15 @@
+<?php
+
+namespace App\Http\Livewire\Project\Application;
+
+use App\Models\Application;
+use Livewire\Component;
+
+class Previews extends Component
+{
+    public Application $application;
+    public function render()
+    {
+        return view('livewire.project.application.previews');
+    }
+}
diff --git a/app/Http/Livewire/Project/Application/Source.php b/app/Http/Livewire/Project/Application/Source.php
index 6876a0660..bfb102f3e 100644
--- a/app/Http/Livewire/Project/Application/Source.php
+++ b/app/Http/Livewire/Project/Application/Source.php
@@ -15,10 +15,7 @@ class Source extends Component
         'application.git_branch' => 'required',
         'application.git_commit_sha' => 'nullable',
     ];
-    public function mount()
-    {
-        $this->application = Application::where('id', $this->applicationId)->first();
-    }
+
     public function submit()
     {
         $this->validate();
diff --git a/resources/css/app.css b/resources/css/app.css
index 34b619def..b293b3ac6 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -37,13 +37,13 @@ button {
     @apply bg-neutral-700 text-white;
 }
 h1 {
-    @apply text-3xl font-bold py-4;
+    @apply text-3xl font-bold pb-4;
 }
 h2 {
-    @apply text-xl font-bold py-4;
+    @apply text-xl font-bold pb-4;
 }
 h3 {
-    @apply text-lg font-bold py-4;
+    @apply text-lg font-bold pb-4;
 }
 .box {
     @apply flex items-center justify-center text-sm rounded cursor-pointer h-14 bg-coolgray-200 hover:bg-coollabs-100 p-2;
diff --git a/resources/views/livewire/project/application/destination.blade.php b/resources/views/livewire/project/application/destination.blade.php
index feabe4862..bfdbddb35 100644
--- a/resources/views/livewire/project/application/destination.blade.php
+++ b/resources/views/livewire/project/application/destination.blade.php
@@ -1,4 +1,5 @@
 <div>
+    <h3>Destination</h3>
     <p>Server Name: {{ data_get($destination, 'server.name') }}</p>
     @if (data_get($destination, 'server.description'))
         <p>Description: {{ data_get($destination, 'server.description') }}</p>
diff --git a/resources/views/livewire/project/application/general.blade.php b/resources/views/livewire/project/application/general.blade.php
index e76e899f8..55c065d75 100644
--- a/resources/views/livewire/project/application/general.blade.php
+++ b/resources/views/livewire/project/application/general.blade.php
@@ -1,43 +1,36 @@
 <div>
+    <h3>General</h3>
     <form wire:submit.prevent='submit' class="flex flex-col">
-        <div class="flex flex-col gap-2 xl:flex-row">
-            <div class="flex flex-col w-96">
-                <x-inputs.input id="application.name" label="Name" required />
-                <x-inputs.input id="application.fqdn" label="FQDN" />
-            </div>
-            <div class="flex flex-col w-96">
-                <x-inputs.input id="application.install_command" label="Install Command" />
-                <x-inputs.input id="application.build_command" label="Build Command" />
-                <x-inputs.input id="application.start_command" label="Start Command" />
-                <x-inputs.select id="application.build_pack" label="Build Pack" required>
-                    <option value="nixpacks">Nixpacks</option>
-                    <option disabled value="docker">Docker</option>
-                    <option disabled value="compose">Compose</option>
+        <div class="flex flex-col gap-2">
+            <x-inputs.input id="application.name" label="Name" required />
+            <x-inputs.input id="application.fqdn" label="FQDN" />
+            <x-inputs.input id="application.install_command" label="Install Command" />
+            <x-inputs.input id="application.build_command" label="Build Command" />
+            <x-inputs.input id="application.start_command" label="Start Command" />
+            <x-inputs.select id="application.build_pack" label="Build Pack" required>
+                <option value="nixpacks">Nixpacks</option>
+                <option disabled value="docker">Docker</option>
+                <option disabled value="compose">Compose</option>
+            </x-inputs.select>
+            @if ($application->settings->is_static)
+                <x-inputs.select id="application.static_image" label="Static Image" required>
+                    <option value="nginx:alpine">nginx:alpine</option>
+                    <option disabled value="apache:alpine">apache:alpine</option>
                 </x-inputs.select>
-                @if ($application->settings->is_static)
-                    <x-inputs.select id="application.static_image" label="Static Image" required>
-                        <option value="nginx:alpine">nginx:alpine</option>
-                        <option disabled value="apache:alpine">apache:alpine</option>
-                    </x-inputs.select>
-                @endif
-            </div>
-            <div class="flex flex-col w-96">
-                <x-inputs.input id="application.base_directory" label="Base Directory" />
-                @if ($application->settings->is_static)
-                    <x-inputs.input id="application.publish_directory" label="Publish Directory" required />
-                @else
-                    <x-inputs.input id="application.publish_directory" label="Publish Directory" />
-                @endif
-            </div>
-            <div class="flex flex-col w-96">
-                @if ($application->settings->is_static)
-                    <x-inputs.input id="application.ports_exposes" label="Ports Exposes" readonly />
-                @else
-                    <x-inputs.input id="application.ports_exposes" label="Ports Exposes" required />
-                @endif
+            @endif
+            <x-inputs.input id="application.base_directory" label="Base Directory" />
+            @if ($application->settings->is_static)
+                <x-inputs.input id="application.publish_directory" label="Publish Directory" required />
+            @else
+                <x-inputs.input id="application.publish_directory" label="Publish Directory" />
+            @endif
+            @if ($application->settings->is_static)
+                <x-inputs.input id="application.ports_exposes" label="Ports Exposes" readonly />
+            @else
+                <x-inputs.input id="application.ports_exposes" label="Ports Exposes" required />
+            @endif
 
-                <x-inputs.input id="application.ports_mappings" label="Ports Mappings" />
-            </div>
+            <x-inputs.input id="application.ports_mappings" label="Ports Mappings" />
         </div>
         <x-inputs.button class="mx-auto mt-4 text-white bg-neutral-800 hover:bg-violet-600" type="submit">
             Submit
@@ -50,8 +43,8 @@
         <x-inputs.input noDirty instantSave type="checkbox" id="is_git_lfs_allowed" label="Git LFS Allowed?" />
         <x-inputs.input noDirty instantSave type="checkbox" id="is_debug" label="Debug" />
         <x-inputs.input noDirty instantSave type="checkbox" id="is_auto_deploy" label="Auto Deploy?" />
+        <x-inputs.input noDirty instantSave type="checkbox" id="is_previews" label="Previews?" />
         <x-inputs.input disabled instantSave type="checkbox" id="is_dual_cert" label="Dual Certs?" />
-        <x-inputs.input disabled instantSave type="checkbox" id="is_previews" label="Previews?" />
         <x-inputs.input disabled instantSave type="checkbox" id="is_custom_ssl" label="Is Custom SSL?" />
         <x-inputs.input disabled instantSave type="checkbox" id="is_http2" label="Is Http2?" />
 
diff --git a/resources/views/livewire/project/application/previews.blade.php b/resources/views/livewire/project/application/previews.blade.php
new file mode 100644
index 000000000..7b5056ce6
--- /dev/null
+++ b/resources/views/livewire/project/application/previews.blade.php
@@ -0,0 +1,3 @@
+<div>
+    <h2>Previews</h2>
+</div>
diff --git a/resources/views/livewire/project/application/source.blade.php b/resources/views/livewire/project/application/source.blade.php
index 91c99e3ff..14e7b901e 100644
--- a/resources/views/livewire/project/application/source.blade.php
+++ b/resources/views/livewire/project/application/source.blade.php
@@ -1,4 +1,5 @@
 <div>
+    <h3>Source</h3>
     <p>Source Name: {{ data_get($application, 'source.name') }}</p>
     <p>Is Public Source: {{ data_get($application, 'source.is_public') }}</p>
     <div class="flex flex-col w-96">
diff --git a/resources/views/livewire/project/application/storages/all.blade.php b/resources/views/livewire/project/application/storages/all.blade.php
index 5072af74e..33e71a635 100644
--- a/resources/views/livewire/project/application/storages/all.blade.php
+++ b/resources/views/livewire/project/application/storages/all.blade.php
@@ -1,5 +1,5 @@
 <div class="flex flex-col gap-2">
-    <h3>Persistent Storages</h3>
+    <h3>Storages</h3>
     @forelse ($application->persistentStorages as $storage)
         <livewire:project.application.storages.show wire:key="storage-{{ $storage->id }}" :storage="$storage" />
     @empty
diff --git a/resources/views/project/application/configuration.blade.php b/resources/views/project/application/configuration.blade.php
index b645e283b..1d94a5695 100644
--- a/resources/views/project/application/configuration.blade.php
+++ b/resources/views/project/application/configuration.blade.php
@@ -1,8 +1,8 @@
 <x-layout>
     <h1>Configuration</h1>
     <x-applications.navbar :applicationId="$application->id" :gitBranchLocation="$application->gitBranchLocation" />
-    <div x-data="{ activeTab: window.location.hash ? window.location.hash.substring(1) : 'general' }">
-        <div class="flex gap-4">
+    <div x-data="{ activeTab: window.location.hash ? window.location.hash.substring(1) : 'general' }" class="flex pt-6">
+        <div class="flex flex-col gap-4 min-w-fit">
             <a :class="activeTab === 'general' && 'text-purple-500'"
                 @click.prevent="activeTab = 'general'; window.location.hash = 'general'" href="#">General</a>
             <a :class="activeTab === 'environment-variables' && 'text-purple-500'"
@@ -16,26 +16,31 @@
                 href="#">Destination
             </a>
             <a :class="activeTab === 'storages' && 'text-purple-500'"
-                @click.prevent="activeTab = 'storages'; window.location.hash = 'storages'" href="#">Storage
+                @click.prevent="activeTab = 'storages'; window.location.hash = 'storages'" href="#">Storages
+            </a>
+            <a :class="activeTab === 'previews' && 'text-purple-500'"
+                @click.prevent="activeTab = 'previews'; window.location.hash = 'previews'" href="#">Previews
             </a>
         </div>
-        <div x-cloak x-show="activeTab === 'general'">
-            <h3>General Configurations</h3>
-            <livewire:project.application.general :applicationId="$application->id" />
-        </div>
-        <div x-cloak x-show="activeTab === 'environment-variables'">
-            <livewire:project.application.environment-variable.all :application="$application" />
-        </div>
-        <div x-cloak x-show="activeTab === 'source'">
-            <h3>Source</h3>
-            <livewire:project.application.source :applicationId="$application->id" />
-        </div>
-        <div x-cloak x-show="activeTab === 'destination'">
-            <h3>Destination</h3>
-            <livewire:project.application.destination :destination="$application->destination" />
-        </div>
-        <div x-cloak x-show="activeTab === 'storages'">
-            <livewire:project.application.storages.all :application="$application" />
+        <div class="w-full pl-8">
+            <div x-cloak x-show="activeTab === 'general'">
+                <livewire:project.application.general :application="$application" />
+            </div>
+            <div x-cloak x-show="activeTab === 'environment-variables'">
+                <livewire:project.application.environment-variable.all :application="$application" />
+            </div>
+            <div x-cloak x-show="activeTab === 'source'">
+                <livewire:project.application.source :application="$application" />
+            </div>
+            <div x-cloak x-show="activeTab === 'destination'">
+                <livewire:project.application.destination :destination="$application->destination" />
+            </div>
+            <div x-cloak x-show="activeTab === 'storages'">
+                <livewire:project.application.storages.all :application="$application" />
+            </div>
+            <div x-cloak x-show="activeTab === 'previews'">
+                <livewire:project.application.previews :application="$application" />
+            </div>
         </div>
     </div>
 </x-layout>