modal fix?

cjamcu · Dec 6, 2023 · ceedd52 · ceedd52
1 parent 61efdfb
commit ceedd52
Show file tree

Hide file tree

Showing 13 changed files with 226 additions and 25 deletions.
diff --git a/app/Http/Livewire/Project/Service/ComposeModal.php b/app/Http/Livewire/Project/Service/ComposeModal.php
@@ -4,20 +4,26 @@
 
 use App\Models\Service;
 use Livewire\Component;
+use LivewireUI\Modal\ModalComponent;
 
-class ComposeModal extends Component
+class ComposeModal extends ModalComponent
 {
     public Service $service;
+    public $serviceId;
     protected $rules = [
         'service.docker_compose_raw' => 'required',
         'service.docker_compose' => 'required',
     ];
+    public function mount() {
+        $this->service = Service::find($this->serviceId);
+    }
     public function render()
     {
         return view('livewire.project.service.compose-modal');
     }
     public function submit() {
         $this->emit('warning', "Saving new docker compose...");
         $this->emit('saveCompose', $this->service->docker_compose_raw);
+        $this->closeModal();
     }
 }
diff --git a/composer.json b/composer.json
@@ -39,6 +39,7 @@
         "stripe/stripe-php": "^12.0",
         "symfony/yaml": "^6.2",
         "visus/cuid2": "^2.0.0",
+        "wire-elements/modal": "^1.0",
         "yosymfony/toml": "^1.0"
     },
     "require-dev": {

diff --git a/composer.lock b/composer.lock
diff --git a/config/livewire-ui-modal.php b/config/livewire-ui-modal.php
@@ -0,0 +1,52 @@
+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Include CSS
+    |--------------------------------------------------------------------------
+    |
+    | The modal uses TailwindCSS, if you don't use TailwindCSS you will need
+    | to set this parameter to true. This includes the modern-normalize css.
+    |
+    */
+    'include_css' => false,
+
+    /*
+    |--------------------------------------------------------------------------
+    | Include JS
+    |--------------------------------------------------------------------------
+    |
+    | Livewire UI will inject the required Javascript in your blade template.
+    | If you want to bundle the required Javascript you can set this to false
+    | and add `require('vendor/wire-elements/modal/resources/js/modal');`
+    | to your script bundler like webpack.
+    |
+    */
+    'include_js' => true,
+
+    /*
+    |--------------------------------------------------------------------------
+    | Modal Component Defaults
+    |--------------------------------------------------------------------------
+    |
+    | Configure the default properties for a modal component.
+    |
+    | Supported modal_max_width
+    | 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl', '7xl'
+    */
+    'component_defaults' => [
+        'modal_max_width' => '2xl',
+
+        'close_modal_on_click_away' => true,
+
+        'close_modal_on_escape' => true,
+
+        'close_modal_on_escape_is_forceful' => true,
+
+        'dispatch_close_event' => false,
+
+        'destroy_on_close' => false,
+    ],
+];
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -18,6 +18,7 @@
         "vue": "3.3.10"
     },
     "dependencies": {
+        "@alpinejs/focus": "^3.13.3",
         "@tailwindcss/typography": "0.5.10",
         "alpinejs": "3.13.3",
         "daisyui": "4.4.19",

diff --git a/resources/js/app.js b/resources/js/app.js
@@ -1,8 +1,9 @@
 import Alpine from "alpinejs";
+import focus from '@alpinejs/focus'
 import { createApp } from "vue";
 import MagicBar from "./components/MagicBar.vue";
 import Toaster from "../../vendor/masmerise/livewire-toaster/resources/js";
-
+Alpine.plugin(focus)
 Alpine.plugin(Toaster);
 
 window.Alpine = Alpine;

diff --git a/resources/views/layouts/base.blade.php b/resources/views/layouts/base.blade.php
@@ -37,6 +37,7 @@
 
     <body>
         @livewireScripts
+        @livewire('livewire-ui-modal')
         <dialog id="help" class="modal">
             <livewire:help />
             <form method="dialog" class="modal-backdrop">

diff --git a/resources/views/livewire/project/service/compose-modal.blade.php b/resources/views/livewire/project/service/compose-modal.blade.php
@@ -1,6 +1,5 @@
-<dialog id="composeModal" class="modal" x-data="{ raw: true }" wire:ignore.self>
-    <form method="dialog" class="flex flex-col gap-2 rounded max-w-7xl modal-box" wire:submit.prevent='submit'>
-        <div class="flex items-end gap-2">
+<form x-data="{ raw: true }" class="flex flex-col gap-2 rounded max-w-7xl modal-box" wire:submit.prevent='submit'>
+    <div class="flex items-end gap-2">
         <h1>Docker Compose</h1>
         <div x-cloak x-show="raw">
             <x-forms.button class="w-64" @click.prevent="raw = !raw">Show Deployable Compose</x-forms.button>
@@ -10,21 +9,19 @@
                 Compose</x-forms.button>
         </div>
     </div>
-        <div>Volume names are updated upon save. The service UUID will be added as a prefix to all volumes, to prevent name collision. <br>To see the actual volume names, check the Deployable Compose file, or go to Storage menu.</div>
+    <div>Volume names are updated upon save. The service UUID will be added as a prefix to all volumes, to prevent
+        name collision. <br>To see the actual volume names, check the Deployable Compose file, or go to Storage
+        menu.</div>
 
-        <div x-cloak x-show="raw">
-            <x-forms.textarea rows="20" id="service.docker_compose_raw">
-            </x-forms.textarea>
-        </div>
-        <div x-cloak x-show="raw === false">
-            <x-forms.textarea rows="20" readonly id="service.docker_compose">
-            </x-forms.textarea>
-        </div>
-        <x-forms.button onclick="composeModal.close()" type="submit">
-            Save
-        </x-forms.button>
-    </form>
-    <form method="dialog" class="modal-backdrop">
-        <button>close</button>
-    </form>
-</dialog>
+    <div x-cloak x-show="raw">
+        <x-forms.textarea rows="20" id="service.docker_compose_raw">
+        </x-forms.textarea>
+    </div>
+    <div x-cloak x-show="raw === false">
+        <x-forms.textarea rows="20" readonly id="service.docker_compose">
+        </x-forms.textarea>
+    </div>
+    <x-forms.button type="submit">
+        Save
+    </x-forms.button>
+</form>
diff --git a/resources/views/livewire/project/service/index.blade.php b/resources/views/livewire/project/service/index.blade.php
@@ -1,6 +1,5 @@
 <div x-data="{ activeTab: window.location.hash ? window.location.hash.substring(1) : 'service-stack' }" x-init="$wire.checkStatus" wire:poll.10000ms="checkStatus">
     <livewire:project.service.navbar :service="$service" :parameters="$parameters" :query="$query" />
-    <livewire:project.service.compose-modal :service="$service" />
     <div class="flex h-full pt-6" >
         <div class="flex flex-col items-start gap-4 min-w-fit">
             <a target="_blank" href="{{ $service->documentation() }}">Documentation <x-external-link /></a>

diff --git a/resources/views/livewire/project/service/stack-form.blade.php b/resources/views/livewire/project/service/stack-form.blade.php
@@ -5,7 +5,9 @@
             <div>Configuration</div>
         </div>
         <x-forms.button type="submit">Save</x-forms.button>
-        <x-forms.button class="w-64" onclick="composeModal.showModal()">Edit Compose
+        <x-forms.button class="w-64"
+            onclick="Livewire.emit('openModal', 'project.service.compose-modal',{{ json_encode(['serviceId' => $service->id]) }})">Edit
+            Compose
             File</x-forms.button>
     </div>
     <div class="flex gap-2">

diff --git a/resources/views/vendor/livewire-ui-modal/modal.blade.php b/resources/views/vendor/livewire-ui-modal/modal.blade.php
@@ -0,0 +1,58 @@
+<div>
+    @isset($jsPath)
+        <script>{!! file_get_contents($jsPath) !!}</script>
+    @endisset
+    @isset($cssPath)
+        <style>{!! file_get_contents($cssPath) !!}</style>
+    @endisset
+
+    <div
+            x-data="LivewireUIModal()"
+            x-init="init()"
+            x-on:close.stop="setShowPropertyTo(false)"
+            x-on:keydown.escape.window="closeModalOnEscape()"
+            x-show="show"
+            class="fixed inset-0 z-10 overflow-y-auto"
+            style="display: none;"
+    >
+        <div class="flex items-end justify-center min-h-screen px-4 pt-4 pb-10 text-center sm:block sm:p-0">
+            <div
+                    x-show="show"
+                    x-on:click="closeModalOnClickAway()"
+                    x-transition:enter="ease-out duration-300"
+                    x-transition:enter-start="opacity-0"
+                    x-transition:enter-end="opacity-100"
+                    x-transition:leave="ease-in duration-200"
+                    x-transition:leave-start="opacity-100"
+                    x-transition:leave-end="opacity-0"
+                    class="fixed inset-0 transition-all transform"
+            >
+                <div class="absolute inset-0 opacity-50 bg-coolgray-200"></div>
+            </div>
+
+            <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
+
+            <div
+                    x-show="show && showActiveComponent"
+                    x-transition:enter="ease-out duration-300"
+                    x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+                    x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
+                    x-transition:leave="ease-in duration-200"
+                    x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
+                    x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+                    x-bind:class="modalWidth"
+                    class="fixed top-0 w-full overflow-hidden text-left align-bottom transition-all transform rounded-lg sm:my-8 sm:align-middle sm:w-full"
+                    id="modal-container"
+                    x-trap.noscroll.inert="show && showActiveComponent"
+                    aria-modal="true"
+            >
+                @forelse($components as $id => $component)
+                    <div class="flex items-center justify-center" x-show.immediate="activeComponent == '{{ $id }}'" x-ref="{{ $id }}" wire:key="{{ $id }}">
+                        @livewire($component['name'], $component['attributes'], key($id))
+                    </div>
+                @empty
+                @endforelse
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,6 +1,8 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
     content: [
+        './vendor/wire-elements/modal/resources/views/*.blade.php',
+        './storage/framework/views/*.php',
         "./resources/**/*.blade.php",
         "./app/**/*.php",
         "./resources/**/*.js",