keyboard working with magic sidebar
This commit is contained in:
Andras Bacsai
parent
7b9d1284aa
commit
4a5ee9342e
@ -14,7 +14,7 @@
|
||||
use Illuminate\Support\Facades\Storage;
|
||||
use Spatie\Activitylog\Contracts\Activity;
|
||||
use Illuminate\Support\Str;
|
||||
|
||||
use Visus\Cuid2\Cuid2;
|
||||
|
||||
if (!function_exists('generalErrorHandler')) {
|
||||
function generalErrorHandler(\Throwable $e, $that = null, $isJson = false)
|
||||
@ -185,12 +185,9 @@ function getLatestVersionOfCoolify()
|
||||
if (!function_exists('generateRandomName')) {
|
||||
function generateRandomName()
|
||||
{
|
||||
$generator = new \Nubs\RandomNameGenerator\All(
|
||||
[
|
||||
new \Nubs\RandomNameGenerator\Alliteration()
|
||||
]
|
||||
);
|
||||
return Str::kebab($generator->getName());
|
||||
$generator = \Nubs\RandomNameGenerator\All::create();
|
||||
$cuid = new Cuid2(7);
|
||||
return Str::kebab("{$generator->getName()}-{$cuid}");
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,111 +1,135 @@
|
||||
<div x-data="magicsearchbar">
|
||||
{{-- Main --}}
|
||||
<input x-ref="mainSearch" x-cloak x-show="!serverMenu && !destinationMenu && !projectMenu && !environmentMenu"
|
||||
x-model="mainSearch" class="w-96" x-on:click="checkMainMenu" x-on:click.outside="closeMainMenu"
|
||||
placeholder="🪄 Search for anything... magically..." />
|
||||
<div x-cloak x-show="mainMenu" class="absolute text-sm top-11 w-[25rem] bg-neutral-800">
|
||||
<template x-for="item in filteredItems" :key="item.name">
|
||||
<div x-on:click="await next('server',item.name, item.disabled ?? false)"
|
||||
:class="item.disabled && 'text-neutral-500 bg-neutral-900 hover:bg-neutral-900 cursor-not-allowed opacity-60'"
|
||||
class="py-2 pl-4 cursor-pointer hover:bg-neutral-700">
|
||||
<span class="px-2 mr-1 text-xs bg-green-600 rounded" x-show="item.type === 'Add'"
|
||||
x-text="item.type"></span>
|
||||
<span class="px-2 mr-1 text-xs bg-purple-600 rounded" x-show="item.type === 'Jump'"
|
||||
x-text="item.type"></span>
|
||||
<span x-text="item.name"></span>
|
||||
<template x-cloak x-if="!serverMenu && !destinationMenu && !projectMenu && !environmentMenu">
|
||||
<div>
|
||||
<input x-ref="search" x-model="search" class="w-96" x-on:click="checkMainMenu" x-on:click.outside="closeMenus"
|
||||
placeholder="🪄 Search for anything... magically..." x-on:keyup.down="focusNext(items.length)"
|
||||
x-on:keyup.up="focusPrev(items.length)"
|
||||
x-on:keyup.enter="await set('server',filteredItems()[focusedIndex].name)" />
|
||||
<div x-cloak x-show="mainMenu" class="absolute text-sm top-11 w-[25rem] bg-neutral-800">
|
||||
<template x-for="(item,index) in filteredItems" :key="item.name">
|
||||
<div x-on:click="await set('server',item.name)" :class="focusedIndex === index && 'bg-neutral-700'"
|
||||
:class="item.disabled &&
|
||||
'text-neutral-500 bg-neutral-900 hover:bg-neutral-900 cursor-not-allowed opacity-60'"
|
||||
class="py-2 pl-4 cursor-pointer hover:bg-neutral-700">
|
||||
<span class="px-2 mr-1 text-xs bg-green-600 rounded" x-show="item.type === 'Add'"
|
||||
x-text="item.type"></span>
|
||||
<span class="px-2 mr-1 text-xs bg-purple-600 rounded" x-show="item.type === 'Jump'"
|
||||
x-text="item.type"></span>
|
||||
<span x-text="item.name"></span>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
{{-- Servers --}}
|
||||
<div x-cloak x-show="serverMenu" x-on:click.outside="closeServerMenu">
|
||||
<input x-ref="serverSearch" x-model="serverSearch" class="w-96" placeholder="Select a server" />
|
||||
<div class="absolute text-sm top-11 w-[25rem] bg-neutral-800">
|
||||
<template x-for="server in filteredServers" :key="server.name ?? server">
|
||||
<div x-on:click="await next('destination',server.uuid)"
|
||||
class="py-2 pl-4 cursor-pointer hover:bg-neutral-700">
|
||||
<span class="px-2 mr-1 text-xs bg-purple-600 rounded">Server</span>
|
||||
<span x-text="server.name"></span>
|
||||
</div>
|
||||
</template>
|
||||
<template x-cloak x-if="serverMenu">
|
||||
<div x-on:click.outside="closeMenus">
|
||||
<input x-ref="search" x-model="search" class="w-96" placeholder="Select a server..."
|
||||
x-on:keyup.down="focusNext(servers.length)" x-on:keyup.up="focusPrev(servers.length)"
|
||||
x-on:keyup.enter="await set('destination',filteredServers()[focusedIndex].uuid)" />
|
||||
<div class="absolute text-sm top-11 w-[25rem] bg-neutral-800">
|
||||
<template x-for="(server,index) in filteredServers" :key="server.name ?? server">
|
||||
<div x-on:click="await set('destination',server.uuid)"
|
||||
:class="focusedIndex === index && 'bg-neutral-700'"
|
||||
class="py-2 pl-4 cursor-pointer hover:bg-neutral-700">
|
||||
<span class="px-2 mr-1 text-xs bg-purple-600 rounded">Server</span>
|
||||
<span x-text="server.name"></span>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
{{-- Destinations --}}
|
||||
<div x-cloak x-show="destinationMenu" x-on:click.outside="closeDestinationMenu">
|
||||
<input x-ref="destinationSearch" x-model="destinationSearch" class="w-96"
|
||||
placeholder="Select a destination" />
|
||||
<div class="absolute text-sm top-11 w-[25rem] bg-neutral-800">
|
||||
<template x-for="destination in filteredDestinations" :key="destination.name ?? destination">
|
||||
<div x-on:click="await next('project',destination.uuid)"
|
||||
class="py-2 pl-4 cursor-pointer hover:bg-neutral-700">
|
||||
<span class="px-2 mr-1 text-xs bg-purple-700 rounded">Destination</span>
|
||||
<span x-text="destination.name"></span>
|
||||
</div>
|
||||
</template>
|
||||
<template x-cloak x-if="destinationMenu">
|
||||
<div x-on:click.outside="closeMenus">
|
||||
<input x-ref="search" x-model="search" class="w-96" placeholder="Select a destination..."
|
||||
x-on:keyup.down="focusNext(destinations.length)" x-on:keyup.up="focusPrev(destinations.length)"
|
||||
x-on:keyup.enter="await set('project',filteredDestinations()[focusedIndex].uuid)" />
|
||||
<div class="absolute text-sm top-11 w-[25rem] bg-neutral-800">
|
||||
<template x-for="(destination,index) in filteredDestinations" :key="destination.name ?? destination">
|
||||
<div x-on:click="await set('project',destination.uuid)"
|
||||
:class="focusedIndex === index && '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">Destination</span>
|
||||
<span x-text="destination.name"></span>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
{{-- Projects --}}
|
||||
<div x-cloak x-show="projectMenu" x-on:click.outside="closeProjectMenu">
|
||||
<input x-ref="projectSearch" x-model="projectSearch" class="w-96" placeholder="Type your project name..." />
|
||||
<div class="absolute text-sm top-11 w-[25rem] bg-neutral-800">
|
||||
<div x-on:click="await newProject" class="py-2 pl-4 cursor-pointer hover:bg-neutral-700">
|
||||
<span>New Project</span>
|
||||
<span x-text="projectSearch"></span>
|
||||
</div>
|
||||
<template x-for="project in filteredProjects" :key="project.name ?? project">
|
||||
<div x-on:click="await next('environment',project.uuid)"
|
||||
class="py-2 pl-4 cursor-pointer hover:bg-neutral-700">
|
||||
<span class="px-2 mr-1 text-xs bg-purple-700 rounded">Project</span>
|
||||
<span x-text="project.name"></span>
|
||||
<template x-cloak x-if="projectMenu">
|
||||
<div x-on:click.outside="closeMenus">
|
||||
<input x-ref="search" x-model="search" class="w-96" placeholder="Type your project name..."
|
||||
x-on:keyup.down="focusNext(projects.length + 1)" x-on:keyup.up="focusPrev(projects.length + 1)"
|
||||
x-on:keyup.enter="await set('environment',filteredProjects()[focusedIndex - 1]?.uuid)" />
|
||||
<div class="absolute text-sm top-11 w-[25rem] bg-neutral-800">
|
||||
<div x-on:click="await newProject" class="py-2 pl-4 cursor-pointer hover:bg-neutral-700"
|
||||
:class="focusedIndex === 0 && 'bg-neutral-700'">
|
||||
<span>New Project</span>
|
||||
<span x-text="search"></span>
|
||||
</div>
|
||||
</template>
|
||||
<template x-for="(project,index) in filteredProjects" :key="project.name ?? project">
|
||||
<div x-on:click="await set('environment',project.uuid)"
|
||||
:class="focusedIndex === index + 1 && '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">Project</span>
|
||||
<span x-text="project.name"></span>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
{{-- Environments --}}
|
||||
<div x-cloak x-show="environmentMenu" x-on:click.outside="closeEnvironmentMenu">
|
||||
<input x-ref="environmentSearch" x-model="environmentSearch" class="w-96"
|
||||
placeholder="Select a environment" />
|
||||
<div class="absolute text-sm top-11 w-[25rem] bg-neutral-800">
|
||||
<div x-on:click="await newEnvironment" class="py-2 pl-4 cursor-pointer hover:bg-neutral-700">
|
||||
<span>New Environment</span>
|
||||
<span x-text="environmentSearch"></span>
|
||||
</div>
|
||||
<template x-for="environment in filteredEnvironments" :key="environment.name ?? environment">
|
||||
<div x-on:click="await next('jump',environment.name)"
|
||||
class="py-2 pl-4 cursor-pointer hover:bg-neutral-700">
|
||||
<span class="px-2 mr-1 text-xs bg-purple-700 rounded">Env</span>
|
||||
<span x-text="environment.name"></span>
|
||||
<template x-cloak x-if="environmentMenu">
|
||||
<div x-on:click.outside="closeMenus">
|
||||
<input x-ref="search" x-model="search" class="w-96" placeholder="Select a environment..."
|
||||
x-on:keyup.down="focusNext(environments.length + 1)" x-on:keyup.up="focusPrev(environments.length + 1)"
|
||||
x-on:keyup.enter="await set('jump',filteredEnvironments()[focusedIndex - 1]?.name)" />
|
||||
<div class="absolute text-sm top-11 w-[25rem] bg-neutral-800">
|
||||
<div x-on:click="await newEnvironment" class="py-2 pl-4 cursor-pointer hover:bg-neutral-700"
|
||||
:class="focusedIndex === 0 && 'bg-neutral-700'">
|
||||
<span>New Environment</span>
|
||||
<span x-text="search"></span>
|
||||
</div>
|
||||
</template>
|
||||
<template x-for="(environment,index) in filteredEnvironments" :key="environment.name ?? environment">
|
||||
<div x-on:click="await set('jump',environment.name)"
|
||||
:class="focusedIndex === index + 1 && '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">Env</span>
|
||||
<span x-text="environment.name"></span>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener('alpine:init', () => {
|
||||
Alpine.data('magicsearchbar', () => ({
|
||||
focus() {
|
||||
if (this.$refs.search) this.$refs.search.focus()
|
||||
},
|
||||
init() {
|
||||
this.$watch('mainMenu', (value) => {
|
||||
if (value) this.$refs.mainSearch.focus()
|
||||
this.$watch('search', () => {
|
||||
this.focusedIndex = ""
|
||||
})
|
||||
this.$watch('serverMenu', (value) => {
|
||||
this.$nextTick(() => {
|
||||
this.$refs.serverSearch.focus()
|
||||
})
|
||||
this.$watch('mainMenu', () => {
|
||||
this.focus()
|
||||
})
|
||||
this.$watch('destinationMenu', (value) => {
|
||||
this.$nextTick(() => {
|
||||
this.$refs.destinationSearch.focus()
|
||||
})
|
||||
this.$watch('serverMenu', () => {
|
||||
this.focus()
|
||||
})
|
||||
this.$watch('projectMenu', (value) => {
|
||||
this.$nextTick(() => {
|
||||
this.$refs.projectSearch.focus()
|
||||
})
|
||||
this.$watch('destinationMenu', () => {
|
||||
this.focus()
|
||||
})
|
||||
this.$watch('environmentMenu', (value) => {
|
||||
this.$nextTick(() => {
|
||||
this.$refs.environmentSearch.focus()
|
||||
})
|
||||
this.$watch('projectMenu', () => {
|
||||
this.focus()
|
||||
})
|
||||
this.$watch('environmentMenu', () => {
|
||||
this.focus()
|
||||
})
|
||||
},
|
||||
mainMenu: false,
|
||||
@ -113,12 +137,7 @@ class="py-2 pl-4 cursor-pointer hover:bg-neutral-700">
|
||||
destinationMenu: false,
|
||||
projectMenu: false,
|
||||
environmentMenu: false,
|
||||
|
||||
mainSearch: '',
|
||||
serverSearch: '',
|
||||
destinationSearch: '',
|
||||
projectSearch: '',
|
||||
environmentSearch: '',
|
||||
search: '',
|
||||
|
||||
selectedAction: '',
|
||||
selectedServer: '',
|
||||
@ -130,6 +149,8 @@ class="py-2 pl-4 cursor-pointer hover:bg-neutral-700">
|
||||
destinations: ['Loading...'],
|
||||
projects: ['Loading...'],
|
||||
environments: ['Loading...'],
|
||||
|
||||
focusedIndex: "",
|
||||
items: [{
|
||||
name: 'Public Repository',
|
||||
type: 'Add',
|
||||
@ -156,92 +177,101 @@ class="py-2 pl-4 cursor-pointer hover:bg-neutral-700">
|
||||
type: 'Jump',
|
||||
}
|
||||
],
|
||||
focusPrev(maxLength) {
|
||||
if (this.focusedIndex === "") {
|
||||
this.focusedIndex = maxLength - 1
|
||||
} else {
|
||||
if (this.focusedIndex > 0) {
|
||||
this.focusedIndex = this.focusedIndex - 1
|
||||
}
|
||||
}
|
||||
},
|
||||
focusNext(maxLength) {
|
||||
if (this.focusedIndex === "") {
|
||||
this.focusedIndex = 0
|
||||
} else {
|
||||
if (maxLength > this.focusedIndex + 1) {
|
||||
this.focusedIndex = this.focusedIndex + 1
|
||||
}
|
||||
}
|
||||
},
|
||||
closeMenus() {
|
||||
this.focusedIndex = ''
|
||||
this.mainMenu = false
|
||||
this.serverMenu = false
|
||||
this.destinationMenu = false
|
||||
this.projectMenu = false
|
||||
this.environmentMenu = false
|
||||
this.search = ''
|
||||
},
|
||||
checkMainMenu() {
|
||||
if (this.serverMenu) return
|
||||
this.mainMenu = true
|
||||
},
|
||||
closeMainMenu() {
|
||||
this.mainMenu = false
|
||||
this.mainSearch = ''
|
||||
},
|
||||
closeServerMenu() {
|
||||
this.serverMenu = false
|
||||
this.serverSearch = ''
|
||||
},
|
||||
closeDestinationMenu() {
|
||||
this.destinationMenu = false
|
||||
this.destinationSearch = ''
|
||||
},
|
||||
closeProjectMenu() {
|
||||
this.projectMenu = false
|
||||
this.projectSearch = ''
|
||||
},
|
||||
closeEnvironmentMenu() {
|
||||
this.environmentMenu = false
|
||||
this.environmentSearch = ''
|
||||
},
|
||||
filteredItems() {
|
||||
if (this.mainSearch === '') return this.items
|
||||
if (this.search === '') return this.items
|
||||
return this.items.filter(item => {
|
||||
return item.name.toLowerCase().includes(this.mainSearch.toLowerCase())
|
||||
return item.name.toLowerCase().includes(this.search.toLowerCase())
|
||||
})
|
||||
},
|
||||
filteredServers() {
|
||||
if (this.serverSearch === '') return this.servers
|
||||
if (this.search === '') return this.servers
|
||||
return this.servers.filter(server => {
|
||||
return server.name.toLowerCase().includes(this.serverSearch
|
||||
return server.name.toLowerCase().includes(this.search
|
||||
.toLowerCase())
|
||||
})
|
||||
},
|
||||
filteredDestinations() {
|
||||
if (this.destinationSearch === '') return this.destinations
|
||||
if (this.search === '') return this.destinations
|
||||
return this.destinations.filter(destination => {
|
||||
return destination.name.toLowerCase().includes(this.destinationSearch
|
||||
return destination.name.toLowerCase().includes(this.search
|
||||
.toLowerCase())
|
||||
})
|
||||
},
|
||||
filteredProjects() {
|
||||
if (this.projectSearch === '') return this.projects
|
||||
if (this.search === '') return this.projects
|
||||
return this.projects.filter(project => {
|
||||
return project.name.toLowerCase().includes(this.projectSearch
|
||||
return project.name.toLowerCase().includes(this.search
|
||||
.toLowerCase())
|
||||
})
|
||||
},
|
||||
filteredEnvironments() {
|
||||
if (this.environmentSearch === '') return this.environments
|
||||
if (this.search === '') return this.environments
|
||||
return this.environments.filter(environment => {
|
||||
return environment.name.toLowerCase().includes(this.environmentSearch
|
||||
return environment.name.toLowerCase().includes(this.search
|
||||
.toLowerCase())
|
||||
})
|
||||
},
|
||||
async newProject() {
|
||||
const response = await fetch('/magic?server=' + this.selectedServer +
|
||||
'&destination=' + this.selectedDestination +
|
||||
'&project=new&name=' + this.projectSearch);
|
||||
'&project=new&name=' + this.search);
|
||||
if (response.ok) {
|
||||
const {
|
||||
project_uuid
|
||||
} = await response.json();
|
||||
this.next('environment', project_uuid)
|
||||
this.next('jump', 'production')
|
||||
console.log(project_uuid);
|
||||
this.set('environment', project_uuid)
|
||||
this.set('jump', 'production')
|
||||
}
|
||||
},
|
||||
async newEnvironment() {
|
||||
console.log('new environment')
|
||||
const response = await fetch('/magic?server=' + this.selectedServer +
|
||||
'&destination=' + this.selectedDestination +
|
||||
'&project=' + this.selectedProject + '&environment=new&name=' + this
|
||||
.environmentSearch);
|
||||
.search);
|
||||
if (response.ok) {
|
||||
this.next('jump', this.environmentSearch)
|
||||
const {
|
||||
environment_name
|
||||
} = await response.json();
|
||||
this.set('jump', environment_name)
|
||||
}
|
||||
},
|
||||
async next(action, id, isDisabled) {
|
||||
if (isDisabled) return
|
||||
async set(action, id) {
|
||||
let response = null
|
||||
switch (action) {
|
||||
case 'server':
|
||||
this.mainMenu = false
|
||||
this.serverMenu = true
|
||||
this.items.find((item, index) => {
|
||||
if (item.name.toLowerCase() === id
|
||||
.toLowerCase()) {
|
||||
@ -255,16 +285,14 @@ class="py-2 pl-4 cursor-pointer hover:bg-neutral-700">
|
||||
} = await response.json();
|
||||
this.servers = servers;
|
||||
}
|
||||
this.closeMenus()
|
||||
this.serverMenu = true
|
||||
break
|
||||
case 'destination':
|
||||
this.selectedServer = id
|
||||
if (this.items[this.selectedAction].type === "Jump") {
|
||||
return window.location = '/server/' + id
|
||||
}
|
||||
this.mainMenu = false
|
||||
this.serverMenu = false
|
||||
this.destinationMenu = true
|
||||
this.selectedServer = id
|
||||
|
||||
response = await fetch('/magic?server=' + this
|
||||
.selectedServer +
|
||||
'&destinations=true');
|
||||
@ -274,12 +302,10 @@ class="py-2 pl-4 cursor-pointer hover:bg-neutral-700">
|
||||
} = await response.json();
|
||||
this.destinations = destinations;
|
||||
}
|
||||
this.closeMenus()
|
||||
this.destinationMenu = true
|
||||
break
|
||||
case 'project':
|
||||
this.mainMenu = false
|
||||
this.serverMenu = false
|
||||
this.destinationMenu = false
|
||||
this.projectMenu = true
|
||||
this.selectedDestination = id
|
||||
response = await fetch('/magic?server=' + this
|
||||
.selectedServer +
|
||||
@ -291,15 +317,16 @@ class="py-2 pl-4 cursor-pointer hover:bg-neutral-700">
|
||||
} = await response.json();
|
||||
this.projects = projects;
|
||||
}
|
||||
this.closeMenus()
|
||||
this.projectMenu = true
|
||||
break
|
||||
case 'environment':
|
||||
this.mainMenu = false
|
||||
this.serverMenu = false
|
||||
this.destinationMenu = false
|
||||
this.projectMenu = false
|
||||
this.environmentMenu = true
|
||||
this.selectedProject = id
|
||||
if (this.focusedIndex === 0) {
|
||||
this.focusedIndex = ''
|
||||
return await this.newProject()
|
||||
}
|
||||
|
||||
this.selectedProject = id
|
||||
|
||||
response = await fetch('/magic?server=' + this
|
||||
.selectedServer +
|
||||
@ -312,13 +339,15 @@ class="py-2 pl-4 cursor-pointer hover:bg-neutral-700">
|
||||
} = await response.json();
|
||||
this.environments = environments;
|
||||
}
|
||||
|
||||
this.closeMenus()
|
||||
this.environmentMenu = true
|
||||
break
|
||||
case 'jump':
|
||||
this.mainMenu = false
|
||||
this.serverMenu = false
|
||||
this.destinationMenu = false
|
||||
this.projectMenu = false
|
||||
this.environmentMenu = false
|
||||
if (this.focusedIndex === 0) {
|
||||
this.focusedIndex = ''
|
||||
return await this.newEnvironment()
|
||||
}
|
||||
this.selectedEnvironment = id
|
||||
|
||||
if (this.selectedAction === 0) {
|
||||
@ -333,7 +362,7 @@ class="py-2 pl-4 cursor-pointer hover:bg-neutral-700">
|
||||
} else if (this.selectedAction === 3) {
|
||||
console.log('new Database')
|
||||
}
|
||||
|
||||
this.closeMenus()
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
@ -81,7 +81,7 @@
|
||||
]);
|
||||
}
|
||||
return response()->json([
|
||||
'environment' => $environment->name
|
||||
'environment_name' => $environment->name
|
||||
]);
|
||||
}
|
||||
return response()->json([
|
||||
|
||||
Loading…
Reference in New Issue
Block a user