This commit is contained in:
Andras Bacsai 2023-05-12 13:10:09 +02:00
parent 9404071c95
commit 0731b1fe6e
5 changed files with 53 additions and 34 deletions

View File

@ -14,7 +14,7 @@ class StandaloneDocker extends Component
public string $network; public string $network;
public Collection $servers; public Collection $servers;
public int $server_id; public int|null $server_id = null;
protected $rules = [ protected $rules = [
'name' => 'required|string', 'name' => 'required|string',
@ -23,11 +23,13 @@ class StandaloneDocker extends Component
]; ];
public function mount() public function mount()
{ {
if (!$this->server_id) {
if (request()->query('server_id')) { if (request()->query('server_id')) {
$this->server_id = request()->query('server_id'); $this->server_id = request()->query('server_id');
} else { } else {
$this->server_id = Server::validated()->first()->id; $this->server_id = Server::validated()->first()->id;
} }
}
$this->network = new Cuid2(7); $this->network = new Cuid2(7);
$this->name = generateRandomName(); $this->name = generateRandomName();
} }

View File

@ -58,7 +58,7 @@ static public function validated()
{ {
return Server::where('team_id', session('currentTeam')->id)->whereRelation('settings', 'is_validated', true)->get(); return Server::where('team_id', session('currentTeam')->id)->whereRelation('settings', 'is_validated', true)->get();
} }
static public function destinations(string|null $server_uuid) static public function destinations(string|null $server_uuid = null)
{ {
if ($server_uuid) { if ($server_uuid) {
$server = Server::where('team_id', session('currentTeam')->id)->where('uuid', $server_uuid)->firstOrFail(); $server = Server::where('team_id', session('currentTeam')->id)->where('uuid', $server_uuid)->firstOrFail();

View File

@ -28,13 +28,13 @@
{{-- Servers --}} {{-- Servers --}}
<template x-cloak x-if="serverMenu"> <template x-cloak x-if="serverMenu">
<div x-on:click.outside="closeMenus"> <div x-on:click.outside="closeMenus">
<input class="magic-input" x-ref="search" x-model="search" class="w-96" placeholder="Select a server..." <input class="magic-input" x-ref="search" x-model="search" placeholder="Select a server..."
x-on:keydown.down="focusNext(servers.length)" x-on:keydown.up="focusPrev(servers.length)" x-on:keydown.down="focusNext(servers.length)" x-on:keydown.up="focusPrev(servers.length)"
x-on:keyup.enter="focusedIndex !== '' && await set('destination',filteredServers()[focusedIndex].uuid)" /> x-on:keyup.enter="focusedIndex !== '' && await set('destination',filteredServers()[focusedIndex].uuid)" />
<div class="absolute text-sm top-11 w-[25rem] bg-neutral-800"> <div class="magic-items">
<template x-for="(server,index) in filteredServers" :key="server.name ?? server"> <template x-for="(server,index) in filteredServers" :key="server.name ?? server">
<div x-on:click="await set('destination',server.uuid)" <div x-on:click="await set('destination',server.uuid)"
:class="focusedIndex === index && 'bg-neutral-700'" class="magic-item"> :class="focusedIndex === index && 'magic-item-focused'" class="magic-item">
<span class="px-2 mr-1 text-xs bg-purple-600 rounded">Server</span> <span class="px-2 mr-1 text-xs bg-purple-600 rounded">Server</span>
<span x-text="server.name"></span> <span x-text="server.name"></span>
</div> </div>
@ -45,14 +45,18 @@
{{-- Destinations --}} {{-- Destinations --}}
<template x-cloak x-if="destinationMenu"> <template x-cloak x-if="destinationMenu">
<div x-on:click.outside="closeMenus"> <div x-on:click.outside="closeMenus">
<input class="magic-input" x-ref="search" x-model="search" class="w-96" <input class="magic-input" x-ref="search" x-model="search" placeholder="Select a destination..."
placeholder="Select a destination..." x-on:keydown.down="focusNext(destinations.length)" x-on:keydown.down="focusNext(destinations.length)" x-on:keydown.up="focusPrev(destinations.length)"
x-on:keydown.up="focusPrev(destinations.length)"
x-on:keyup.enter="focusedIndex !== '' && await set('project',filteredDestinations()[focusedIndex].uuid)" /> x-on:keyup.enter="focusedIndex !== '' && await set('project',filteredDestinations()[focusedIndex].uuid)" />
<div class="absolute text-sm top-11 w-[25rem] bg-neutral-800"> <div class="magic-items">
<template x-if="destinations.length === 0">
<div class="magic-item" x-on:click="set('newDestination')">
<span>No destination found. Click here to add a new one!</span>
</div>
</template>
<template x-for="(destination,index) in filteredDestinations" :key="destination.name ?? destination"> <template x-for="(destination,index) in filteredDestinations" :key="destination.name ?? destination">
<div x-on:click="await set('project',destination.uuid)" <div x-on:click="await set('project',destination.uuid)"
:class="focusedIndex === index && 'bg-neutral-700'" cclass="magic-item"> :class="focusedIndex === index && 'magic-item-focused'" class="magic-item">
<span class="px-2 mr-1 text-xs bg-purple-700 rounded">Destination</span> <span class="px-2 mr-1 text-xs bg-purple-700 rounded">Destination</span>
<span x-text="destination.name"></span> <span x-text="destination.name"></span>
</div> </div>
@ -63,18 +67,18 @@
{{-- Projects --}} {{-- Projects --}}
<template x-cloak x-if="projectMenu"> <template x-cloak x-if="projectMenu">
<div x-on:click.outside="closeMenus"> <div x-on:click.outside="closeMenus">
<input class="magic-input" x-ref="search" x-model="search" class="w-96" <input class="magic-input" x-ref="search" x-model="search" placeholder="Type your project name..."
placeholder="Type your project name..." x-on:keydown.down="focusNext(projects.length + 1)" x-on:keydown.down="focusNext(projects.length + 1)" x-on:keydown.up="focusPrev(projects.length + 1)"
x-on:keydown.up="focusPrev(projects.length + 1)"
x-on:keyup.enter="focusedIndex !== '' && await set('environment',filteredProjects()[focusedIndex - 1]?.uuid)" /> x-on:keyup.enter="focusedIndex !== '' && await set('environment',filteredProjects()[focusedIndex - 1]?.uuid)" />
<div class="absolute text-sm top-11 w-[25rem] bg-neutral-800"> <div class="magic-items">
<div x-on:click="await newProject" class="magic-item" :class="focusedIndex === 0 && 'bg-neutral-700'"> <div x-on:click="await newProject" class="magic-item"
:class="focusedIndex === 0 && 'magic-item-focused'">
<span>New Project</span> <span>New Project</span>
<span x-text="search"></span> <span x-text="search"></span>
</div> </div>
<template x-for="(project,index) in filteredProjects" :key="project.name ?? project"> <template x-for="(project,index) in filteredProjects" :key="project.name ?? project">
<div x-on:click="await set('environment',project.uuid)" <div x-on:click="await set('environment',project.uuid)"
:class="focusedIndex === index + 1 && 'bg-neutral-700'" class="magic-item"> :class="focusedIndex === index + 1 && 'magic-item-focused'" class="magic-item">
<span class="px-2 mr-1 text-xs bg-purple-700 rounded">Project</span> <span class="px-2 mr-1 text-xs bg-purple-700 rounded">Project</span>
<span x-text="project.name"></span> <span x-text="project.name"></span>
</div> </div>
@ -85,19 +89,19 @@
{{-- Environments --}} {{-- Environments --}}
<template x-cloak x-if="environmentMenu"> <template x-cloak x-if="environmentMenu">
<div x-on:click.outside="closeMenus"> <div x-on:click.outside="closeMenus">
<input class="magic-input" x-ref="search" x-model="search" class="w-96" <input class="magic-input" x-ref="search" x-model="search" placeholder="Select a environment..."
placeholder="Select a environment..." x-on:keydown.down="focusNext(environments.length + 1)" x-on:keydown.down="focusNext(environments.length + 1)"
x-on:keydown.up="focusPrev(environments.length + 1)" x-on:keydown.up="focusPrev(environments.length + 1)"
x-on:keyup.enter="focusedIndex !== '' && await set('jump',filteredEnvironments()[focusedIndex - 1]?.name)" /> x-on:keyup.enter="focusedIndex !== '' && await set('jump',filteredEnvironments()[focusedIndex - 1]?.name)" />
<div class="magic-items"> <div class="magic-items">
<div x-on:click="await newEnvironment" class="magic-item" <div x-on:click="await newEnvironment" class="magic-item"
:class="focusedIndex === 0 && magic - item - focused"> :class="focusedIndex === 0 && 'magic-item-focused'">
<span>New Environment</span> <span>New Environment</span>
<span x-text="search"></span> <span x-text="search"></span>
</div> </div>
<template x-for="(environment,index) in filteredEnvironments" :key="environment.name ?? environment"> <template x-for="(environment,index) in filteredEnvironments" :key="environment.name ?? environment">
<div x-on:click="await set('jump',environment.name)" <div x-on:click="await set('jump',environment.name)"
:class="focusedIndex === index + 1 && 'bg-neutral-700'" class="magic-item"> :class="focusedIndex === index + 1 && 'magic-item-focused'" class="magic-item">
<span class="px-2 mr-1 text-xs bg-purple-700 rounded">Env</span> <span class="px-2 mr-1 text-xs bg-purple-700 rounded">Env</span>
<span x-text="environment.name"></span> <span x-text="environment.name"></span>
</div> </div>
@ -108,13 +112,13 @@
{{-- Projects --}} {{-- Projects --}}
<template x-cloak x-if="projectsMenu"> <template x-cloak x-if="projectsMenu">
<div x-on:click.outside="closeMenus"> <div x-on:click.outside="closeMenus">
<input x-ref="search" x-model="search" class="w-96" placeholder="Select a project..." <input x-ref="search" x-model="search" class="magic-input" placeholder="Select a project..."
x-on:keydown.down="focusNext(projects.length)" x-on:keydown.up="focusPrev(projects.length)" x-on:keydown.down="focusNext(projects.length)" x-on:keydown.up="focusPrev(projects.length)"
x-on:keyup.enter="focusedIndex !== '' && await set('jumpToProject',filteredProjects()[focusedIndex].uuid)" /> x-on:keyup.enter="focusedIndex !== '' && await set('jumpToProject',filteredProjects()[focusedIndex].uuid)" />
<div class="absolute text-sm top-11 w-[25rem] bg-neutral-800"> <div class="magic-items">
<template x-for="(project,index) in filteredProjects" :key="project.name ?? project"> <template x-for="(project,index) in filteredProjects" :key="project.name ?? project">
<div x-on:click="await set('jumpToProject',project.uuid)" <div x-on:click="await set('jumpToProject',project.uuid)"
:class="focusedIndex === index && 'bg-neutral-700'" :class="focusedIndex === index && 'magic-item-focused'"
class="py-2 pl-4 cursor-pointer hover:bg-neutral-700"> class="py-2 pl-4 cursor-pointer hover:bg-neutral-700">
<span class="px-2 mr-1 text-xs bg-purple-700 rounded">Jump</span> <span class="px-2 mr-1 text-xs bg-purple-700 rounded">Jump</span>
<span x-text="project.name"></span> <span x-text="project.name"></span>
@ -126,13 +130,13 @@ class="py-2 pl-4 cursor-pointer hover:bg-neutral-700">
{{-- Destinations --}} {{-- Destinations --}}
<template x-cloak x-if="destinationsMenu"> <template x-cloak x-if="destinationsMenu">
<div x-on:click.outside="closeMenus"> <div x-on:click.outside="closeMenus">
<input x-ref="search" x-model="search" class="w-96" placeholder="Select a destination..." <input x-ref="search" x-model="search" class="magic-items" placeholder="Select a destination..."
x-on:keydown.down="focusNext(Destinations.length)" x-on:keydown.up="focusPrev(Destinations.length)" x-on:keydown.down="focusNext(destinations.length)" x-on:keydown.up="focusPrev(destinations.length)"
x-on:keyup.enter="focusedIndex !== '' && await set('jumpToDestination',filteredDestinations()[focusedIndex].uuid)" /> x-on:keyup.enter="focusedIndex !== '' && await set('jumpToDestination',filteredDestinations()[focusedIndex].uuid)" />
<div class="absolute text-sm top-11 w-[25rem] bg-neutral-800"> <div class="magic-items">
<template x-for="(destination,index) in filteredDestinations" :key="destination.name ?? destination"> <template x-for="(destination,index) in filteredDestinations" :key="destination.name ?? destination">
<div x-on:click="await set('jumpToDestination',destination.uuid)" <div x-on:click="await set('jumpToDestination',destination.uuid)"
:class="focusedIndex === index && 'bg-neutral-700'" :class="focusedIndex === index && 'magic-item-focused'"
class="py-2 pl-4 cursor-pointer hover:bg-neutral-700"> class="py-2 pl-4 cursor-pointer hover:bg-neutral-700">
<span class="px-2 mr-1 text-xs bg-purple-700 rounded">Jump</span> <span class="px-2 mr-1 text-xs bg-purple-700 rounded">Jump</span>
<span x-text="destination.name"></span> <span x-text="destination.name"></span>
@ -283,7 +287,7 @@ class="py-2 pl-4 cursor-pointer hover:bg-neutral-700">
if (this.search === '') { if (this.search === '') {
this.closeMenus() this.closeMenus()
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.search.blur(); if (this.$refs.search) this.$refs.search.blur();
}) })
return return
} }
@ -291,7 +295,7 @@ class="py-2 pl-4 cursor-pointer hover:bg-neutral-700">
this.focusedIndex = '' this.focusedIndex = ''
}, },
closeMenus() { closeMenus() {
this.$refs.search.blur(); if (this.$refs.search) this.$refs.search.blur();
this.search = '' this.search = ''
this.focusedIndex = '' this.focusedIndex = ''
this.mainMenu = false this.mainMenu = false
@ -320,6 +324,7 @@ class="py-2 pl-4 cursor-pointer hover:bg-neutral-700">
}, },
filteredDestinations() { filteredDestinations() {
if (this.search === '') return this.destinations if (this.search === '') return this.destinations
if (this.destinations.length === 0) return []
return this.destinations.filter(destination => { return this.destinations.filter(destination => {
return destination.name.toLowerCase().includes(this.search return destination.name.toLowerCase().includes(this.search
.toLowerCase()) .toLowerCase())
@ -494,6 +499,10 @@ class="py-2 pl-4 cursor-pointer hover:bg-neutral-700">
this.closeMenus() this.closeMenus()
break break
case 'newDestination': case 'newDestination':
if (this.selectedServer !== '') {
window.location = `/destination/new?server=${this.selectedServer}`
return
}
window.location = `/destination/new` window.location = `/destination/new`
this.closeMenus() this.closeMenus()
break break

View File

@ -1,4 +1,4 @@
<x-layout> <x-layout>
<h1>New Destination</h1> <h1>New Destination</h1>
<livewire:destination.new.standalone-docker :servers="$servers" /> <livewire:destination.new.standalone-docker :servers="$servers" :server_id="$server_id" />
</x-layout> </x-layout>

View File

@ -182,8 +182,16 @@
Route::middleware(['auth'])->group(function () { Route::middleware(['auth'])->group(function () {
Route::get('/destination/new', function () { Route::get('/destination/new', function () {
$servers = Server::validated(); $servers = Server::validated();
$pre_selected_server_uuid = data_get(request()->query(), 'server');
if ($pre_selected_server_uuid) {
$server = $servers->firstWhere('uuid', $pre_selected_server_uuid);
if ($server) {
$server_id = $server->id;
}
}
return view('destination.new', [ return view('destination.new', [
"servers" => $servers, "servers" => $servers,
"server_id" => $server_id ?? null,
]); ]);
})->name('destination.new'); })->name('destination.new');
Route::get('/destination/{destination_uuid}', function () { Route::get('/destination/{destination_uuid}', function () {