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

modal fix?

Browse Source
This commit is contained in:
Andras Bacsai 2023-12-06 15:50:13 +01:00
parent 61efdfb7c1
commit ceedd5225f
13 changed files with 226 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app/Http/Livewire/Project/Service/ComposeModal.php
View File

@ -4,14 +4,19 @@
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');
@ -19,5 +24,6 @@ public function render()
public function submit() {
$this->emit('warning', "Saving new docker compose...");
$this->emit('saveCompose', $this->service->docker_compose_raw);
$this->closeModal();
}
}

1
composer.json
View File

@ -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": {

60
composer.lock generated
View File

@ -4,7 +4,7 @@
"Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
"This file is @generated automatically"
],
"content-hash": "2fdb48eb84a31346d8396443b34b0cb0",
"content-hash": "c1fc9357fddf5e7b23bb5d500c54fe29",
"packages": [
{
"name": "aws/aws-crt-php",
@ -10222,6 +10222,64 @@
},
"time": "2022-06-03T18:03:27+00:00"
},
{
"name": "wire-elements/modal",
"version": "1.0.8",
"source": {
"type": "git",
"url": "https://github.com/wire-elements/modal.git",
"reference": "1019f423485afb6df0d1531d978e93d4ad0975fb"
},
"dist": {
"type": "zip",
"url": "https://api.github.com/repos/wire-elements/modal/zipball/1019f423485afb6df0d1531d978e93d4ad0975fb",
"reference": "1019f423485afb6df0d1531d978e93d4ad0975fb",
"shasum": ""
},
"require": {
"livewire/livewire": "^2.0",
"php": "^7.4|^8.0",
"spatie/laravel-package-tools": "^1.9"
},
"require-dev": {
"orchestra/testbench": "^6.15",
"phpunit/phpunit": "^9.5"
},
"type": "library",
"extra": {
"laravel": {
"providers": [
"LivewireUI\\Modal\\LivewireModalServiceProvider"
]
}
},
"autoload": {
"psr-4": {
"LivewireUI\\Modal\\": "src"
}
},
"notification-url": "https://packagist.org/downloads/",
"license": [
"MIT"
],
"authors": [
{
"name": "Philo Hermans",
"email": "me@philohermans.com"
}
],
"description": "Laravel Livewire modal component",
"keywords": [
"laravel",
"livewire",
"modal"
],
"support": {
"issues": "https://github.com/wire-elements/modal/issues",
"source": "https://github.com/wire-elements/modal/tree/1.0.8"
},
"time": "2023-04-07T12:35:15+00:00"
},
{
"name": "yosymfony/parser-utils",
"version": "v2.0.0",

52
config/livewire-ui-modal.php Normal file
View File

@ -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,
],
];

23
package-lock.json generated
View File

@ -5,6 +5,7 @@
"packages": {
"": {
"dependencies": {
"@alpinejs/focus": "^3.13.3",
"@tailwindcss/typography": "0.5.10",
"alpinejs": "3.13.3",
"daisyui": "4.4.19",
@ -35,6 +36,15 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/@alpinejs/focus": {
"version": "3.13.3",
"resolved": "https://registry.npmjs.org/@alpinejs/focus/-/focus-3.13.3.tgz",
"integrity": "sha512-fTRX/9wOfysyZ1PJ4gHeUnmiNTIgqBDIqKxeP5iMvj1UHD3TFLDXllvoIKH3ezqcsyQZqxd/q1MFM7dlIhkmeg==",
"dependencies": {
"focus-trap": "^6.9.4",
"tabbable": "^5.3.3"
}
},
"node_modules/@babel/parser": {
"version": "7.23.5",
"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.5.tgz",
@ -1140,6 +1150,14 @@
"node": ">=8"
}
},
"node_modules/focus-trap": {
"version": "6.9.4",
"resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-6.9.4.tgz",
"integrity": "sha512-v2NTsZe2FF59Y+sDykKY+XjqZ0cPfhq/hikWVL88BqLivnNiEffAsac6rP6H45ff9wG9LL5ToiDqrLEP9GX9mw==",
"dependencies": {
"tabbable": "^5.3.3"
}
},
"node_modules/follow-redirects": {
"version": "1.15.2",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
@ -1927,6 +1945,11 @@
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/tabbable": {
"version": "5.3.3",
"resolved": "https://registry.npmjs.org/tabbable/-/tabbable-5.3.3.tgz",
"integrity": "sha512-QD9qKY3StfbZqWOPLp0++pOrAVb/HbUi5xCc8cUo4XjP19808oaMiDzn0leBY5mCespIBM0CIZePzZjgzR83kA=="
},
"node_modules/tailwindcss": {
"version": "3.3.6",
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.6.tgz",

1
package.json
View File

@ -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",

3
resources/js/app.js
View File

@ -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;

1
resources/views/layouts/base.blade.php
View File

@ -37,6 +37,7 @@
<body>
@livewireScripts
@livewire('livewire-ui-modal')
<dialog id="help" class="modal">
<livewire:help />
<form method="dialog" class="modal-backdrop">

37
resources/views/livewire/project/service/compose-modal.blade.php
View File

@ -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>

1
resources/views/livewire/project/service/index.blade.php
View File

@ -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>

4
resources/views/livewire/project/service/stack-form.blade.php
View File

@ -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">

58
resources/views/vendor/livewire-ui-modal/modal.blade.php vendored Normal file
View File

@ -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>

2
tailwind.config.js
View File

@ -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",