From 4a5ee9342e68d3b419c09c301919afddec9364da Mon Sep 17 00:00:00 2001
From: Andras Bacsai <andras.bacsai@gmail.com>
Date: Fri, 12 May 2023 10:45:28 +0200
Subject: [PATCH] keyboard working with magic sidebar

---
 bootstrap/helpers.php                         |  11 +-
 .../components/magic-search-bar.blade.php     | 331 ++++++++++--------
 routes/web.php                                |   2 +-
 3 files changed, 185 insertions(+), 159 deletions(-)

diff --git a/bootstrap/helpers.php b/bootstrap/helpers.php
index 6090a49c2..ce9e46753 100644
--- a/bootstrap/helpers.php
+++ b/bootstrap/helpers.php
@@ -14,7 +14,7 @@ use Illuminate\Support\Facades\Route;
 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 @@ if (!function_exists('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}");
     }
 }
 
diff --git a/resources/views/components/magic-search-bar.blade.php b/resources/views/components/magic-search-bar.blade.php
index a50f26a7a..261ca3dd1 100644
--- a/resources/views/components/magic-search-bar.blade.php
+++ b/resources/views/components/magic-search-bar.blade.php
@@ -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 @@
             destinationMenu: false,
             projectMenu: false,
             environmentMenu: false,
-
-            mainSearch: '',
-            serverSearch: '',
-            destinationSearch: '',
-            projectSearch: '',
-            environmentSearch: '',
+            search: '',
 
             selectedAction: '',
             selectedServer: '',
@@ -130,6 +149,8 @@
             destinations: ['Loading...'],
             projects: ['Loading...'],
             environments: ['Loading...'],
+
+            focusedIndex: "",
             items: [{
                     name: 'Public Repository',
                     type: 'Add',
@@ -156,92 +177,101 @@
                     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 @@
                             } = 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 @@
                             } = 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 @@
                             } = 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 @@
                             } = 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 @@
                         } else if (this.selectedAction === 3) {
                             console.log('new Database')
                         }
-
+                        this.closeMenus()
                         break
                 }
             }
diff --git a/routes/web.php b/routes/web.php
index 18d7829c4..3b2a3aea6 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -81,7 +81,7 @@ Route::middleware(['auth'])->group(function () {
                     ]);
                 }
                 return response()->json([
-                    'environment' => $environment->name
+                    'environment_name' => $environment->name
                 ]);
             }
             return response()->json([