Added Frontend

frontend/components/GlobalSearch.vue

@@ -0,0 +1,140 @@
+<script setup>
+
+const showCommandPalette = ref(false)
+const selectedCommand = ref("")
+const commandPaletteRef = ref()
+const router = useRouter()
+const dataStore = useDataStore()
+const openCommandPalette = () => {
+  showCommandPalette.value = true
+  console.log("Open Command Palette")
+}
+
+defineShortcuts({
+  meta_k: {
+    usingInput: true,
+    handler: () => {
+      openCommandPalette()
+    }
+  }
+})
+
+const actions = [
+
+  {
+    id: 'new-task',
+    label: 'Aufgabe hinzufügen',
+    icon: 'i-heroicons-rectangle-stack',
+    to: "/tasks/create" ,
+  },
+  {
+    id: 'new-customer',
+    label: 'Kunde hinzufügen',
+    icon: 'i-heroicons-user-group',
+    to: "/customers/create" ,
+  },
+  {
+    id: 'new-vendor',
+    label: 'Lieferant hinzufügen',
+    icon: 'i-heroicons-truck',
+    to: "/vendors/create" ,
+  },
+  {
+    id: 'new-contact',
+    label: 'Ansprechpartner hinzufügen',
+    icon: 'i-heroicons-user-group',
+    to: "/contacts/create" ,
+  },
+  {
+    id: 'new-project',
+    label: 'Projekt hinzufügen',
+    icon: 'i-heroicons-clipboard-document-check',
+    to: "/projects/create" ,
+  },{
+    id: 'new-plant',
+    label: 'Objekt hinzufügen',
+    icon: 'i-heroicons-clipboard-document',
+    to: "/plants/create" ,
+  },
+  {
+    id: 'new-product',
+    label: 'Artikel hinzufügen',
+    icon: 'i-heroicons-puzzle-piece',
+    to: "/products/create" ,
+  }
+]
+
+
+const groups = computed(() =>
+    [{
+      key: 'actions',
+      commands: actions
+    },{
+      key: "customers",
+      label: "Kunden",
+      commands: dataStore.customers.map(item => { return {id: item.id, label: item.name, to: `/customers/show/${item.id}`}})
+    },{
+      key: "vendors",
+      label: "Lieferanten",
+      commands: dataStore.vendors.map(item => { return {id: item.id, label: item.name, to: `/vendors/show/${item.id}`}})
+    },{
+      key: "contacts",
+      label: "Ansprechpartner",
+      commands: dataStore.contacts.map(item => { return {id: item.id, label: item.fullName, to: `/contacts/show/${item.id}`}})
+    },{
+      key: "products",
+      label: "Artikel",
+      commands: dataStore.products.map(item => { return {id: item.id, label: item.name, to: `/products/show/${item.id}`}})
+    },{
+      key: "tasks",
+      label: "Aufgaben",
+      commands: dataStore.tasks.map(item => { return {id: item.id, label: item.name, to: `/tasks/show/${item.id}`}})
+    },{
+      key: "plants",
+      label: "Objekte",
+      commands: dataStore.plants.map(item => { return {id: item.id, label: item.name, to: `/plants/show/${item.id}`}})
+    },{
+      key: "projects",
+      label: "Projekte",
+      commands: dataStore.projects.map(item => { return {id: item.id, label: item.name, to: `/projects/show/${item.id}`}})
+    }
+    ].filter(Boolean))
+
+function onSelect (option) {
+  if (option.click) {
+    option.click()
+  } else if (option.to) {
+    router.push(option.to)
+  } else if (option.href) {
+    window.open(option.href, '_blank')
+  }
+
+  showCommandPalette.value = false
+
+}
+</script>
+
+<template>
+  <UButton
+      icon="i-heroicons-magnifying-glass"
+      variant="ghost"
+      @click="openCommandPalette"
+
+  />
+
+  <UModal
+      v-model="showCommandPalette"
+  >
+    <UCommandPalette
+        v-model="selectedCommand"
+        :groups="groups"
+        :autoselect="false"
+        @update:model-value="onSelect"
+        ref="commandPaletteRef"
+    />
+  </UModal>
+</template>
+
+<style scoped>
+
+</style>