wip

resources/js/app.js

@@ -1,10 +1,9 @@
-
-import Alpine from 'alpinejs'
-import { createApp } from 'vue';
-import MagicSearchBar from './components/MagicSearchBar.vue';
-window.Alpine = Alpine
-Alpine.start()
+import Alpine from "alpinejs";
+import { createApp } from "vue";
+import MagicSearchBar from "./components/MagicSearchBar.vue";
+window.Alpine = Alpine;
+Alpine.start();
 
 const app = createApp({});
-app.component('magic-search-bar', MagicSearchBar);
-app.mount('#vue');
+// app.component('magic-search-bar', MagicSearchBar);
+// app.mount('#vue');

resources/js/components/MagicSearchBar.vue

@@ -1,8 +1,8 @@
 <template>
     <div class="flex justify-center">
         <div class="flex flex-col">
-            <input v-model="search" class="w-96" placeholder="🪄 Let the magic happen... Just type...">
-            <div class="mt-1 text-sm bg-neutral-800">
+            <input @focus="toggle" @blur="toggleAndClear" v-model="search" class="w-96" placeholder="🪄 Let the magic happen... Just type...">
+            <div v-if="menuOpen" class="absolute text-sm top-11 w-[25rem] bg-neutral-800">
                 <div class="py-2 pl-4 cursor-pointer hover:bg-neutral-700" v-for="(item, index) in filteredItems(items)">
                     {{ item.name }}
                 </div>
@@ -16,6 +16,7 @@
 export default {
     data() {
         return {
+            menuOpen : false,
             search: '',
             selectedMenus: '',
             items: [{
@@ -38,6 +39,13 @@ export default {
         }
     },
     methods: {
+        toggle() {
+            this.menuOpen = !this.menuOpen
+        },
+        toggleAndClear() {
+            this.menuOpen = false
+            this.search = ''
+        },
         filteredItems(items) {
             console.log(items)
             return items.filter(item => {

resources/views/components/magic-search-bar.blade.php

@@ -0,0 +1,71 @@
+@props(['data' => []])
+<div x-data="magicsearchbar">
+    <input x-model="search" class="w-96" x-on:click="open = true" x-on:click.outside="close"
+        placeholder="🪄 Add / find anything" />
+    <div x-cloak x-show="open" class="absolute text-sm top-11 w-[25rem] bg-neutral-800">
+        <template x-for="item in filteredItems" :key="item.name">
+            <div x-on:click="execute(item.action)" class="py-2 pl-4 cursor-pointer hover:bg-neutral-700">
+                <span class="px-2 mr-1 text-xs bg-purple-700 rounded" x-show="item.type" x-text="item.type"></span>
+                <span x-text="item.name"></span>
+            </div>
+        </template>
+    </div>
+</div>
+
+<script>
+    document.addEventListener('alpine:init', () => {
+        const data = @js($data);
+        console.log(data)
+        Alpine.data('magicsearchbar', () => ({
+            open: false,
+            search: '',
+            items: [{
+                name: 'Public Repository',
+                type: 'add',
+                tags: 'application,public,repository',
+                action: 'public-repo',
+            }, {
+                name: 'Private Repository (with GitHub App)',
+                type: 'add',
+                tags: 'application,private,repository',
+                action: 'github-private-repo-app'
+            }, {
+                name: 'Private Repository (with Deploy Key)',
+                type: 'add',
+                tags: 'application,private,repository',
+                action: 'github-private-repo-deploy-key'
+            }, {
+                name: 'Database',
+                type: 'add',
+                tags: 'data,database,mysql,postgres,sql,sqlite,redis,mongodb,maria,percona',
+                action: 'database'
+            }],
+            close() {
+                this.open = false
+                this.search = ''
+            },
+            filteredItems() {
+                if (this.search === '') return this.items
+                return this.items.filter(item => {
+                    return item.name.toLowerCase().includes(this.search.toLowerCase())
+                })
+            },
+            execute(action) {
+                switch (action) {
+                    case 'public-repo':
+                        window.location.href = '/project/new/public-repository'
+                        break
+                    case 'github-private-repo-app':
+                        window.location.href = '/project/new/github-private-repository'
+                        break
+                    case 'github-private-repo-deploy-key':
+                        window.location.href = '/project/new/github-private-repository-deploy-key'
+                        break
+                    case 'database':
+                        window.location.href = '/database/new'
+                        break
+                }
+            }
+        }))
+    })
+</script>

resources/views/components/navbar.blade.php

@@ -7,6 +7,8 @@
         @if (auth()->user()->isRoot())
             <a href="/settings">Settings</a>
         @endif
+        <x-magic-search-bar />
+        <div class="flex-1"></div>
         <form action="/logout" method="POST">
             @csrf
             <x-inputs.button type="submit">Logout</x-inputs.button>

resources/views/project/new.blade.php

@@ -4,9 +4,6 @@
     @elseif ($type === 'resource')
         <h1>New Resource</h1>
     @endif
-    <div id="vue">
-        <magic-search-bar></magic-search-bar>
-    </div>
     <div x-data="{ activeTab: 'choose' }">
         <div class="flex flex-col w-64 gap-2 mb-10">
             <x-inputs.button @click.prevent="activeTab = 'public-repo'">Public Repository</x-inputs.button>