Many Changes

spaces/components/GlobalSearch.vue

@@ -0,0 +1,110 @@
+<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-customer',
+    label: 'Kunde hinzufügen',
+    icon: 'i-heroicons-document-plus',
+    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',
+    to: "/contacts/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}`}})
+    }
+    ].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>

spaces/components/HistoryDisplay.vue

@@ -10,36 +10,22 @@ const props = defineProps({
     type: String
   }
 })
+const dataStore = useDataStore()
 const user = useSupabaseUser()
 const supabase = useSupabaseClient()
 const toast = useToast()
 const {type, elementId} = props
 const showAddHistoryItemModal = ref(false)
 const colorMode = useColorMode()
-/*const historyItems = ref([
-  {
-    user: "86e67794-0ea8-41b0-985a-1072e84f56e9",
-    text: "<a class='text-primary-500'>@marielesindern</a> magst du die einmal anschauen",
-  },
-  {
-    user: "3b795486-6b71-4ed8-a1f6-dbc52360d826",
-    text: "<a class='text-primary-500'>@florianfederspiel</a> Jo alles bestens",
-  },
-  {
-    user: "Spaces Bot",
-    text: "Erstellt",
-  }
-])*/
-
-const {profiles} = storeToRefs(useDataStore())
-const {getHistoryItemsByCustomer, fetchHistoryItems} = useDataStore()
 
 const historyItems = computed(() => {
 
   let items = []
 
   if(type === "customer") {
-    items = getHistoryItemsByCustomer(elementId)
+    items = dataStore.getHistoryItemsByCustomer(elementId)
+  } else if(type === "vendor") {
+    items = dataStore.getHistoryItemsByVendor(elementId)
   }
 
   return items.reverse()
@@ -68,7 +54,7 @@ const addHistoryItem = async () => {
   } else {
     toast.add({title: "Eintrag erfolgreich erstellt"})
     showAddHistoryItemModal.value = false
-    await fetchHistoryItems()
+    await dataStore.fetchHistoryItems()
   }
 
 }
@@ -130,11 +116,11 @@ const renderText = (text) => {
             :src="colorMode.value === 'light' ? '/spaces_hell.svg' : '/spaces.svg' "
         />
         <UAvatar
-            :alt="profiles.find(profile => profile.id === item.user).fullName"
+            :alt="dataStore.profiles.find(profile => profile.id === item.user).fullName"
             v-else
         />
         <div>
-          <h3 v-if="item.user">{{profiles.find(profile => profile.id === item.user) ? profiles.find(profile => profile.id === item.user).fullName : ""}}</h3>
+          <h3 v-if="item.user">{{dataStore.profiles.find(profile => profile.id === item.user) ? dataStore.profiles.find(profile => profile.id === item.user).fullName : ""}}</h3>
           <h3 v-else>Spaces Bot</h3>
           <span v-html="renderText(item.text)"/><br>
           <span class="text-gray-500">{{dayjs(item.created_at).format("DD:MM:YY HH:mm")}}</span>

spaces/components/Placeholder.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="relative overflow-hidden rounded border border-dashed border-gray-400 dark:border-gray-500 opacity-75 px-4 flex items-center justify-center">
+    <svg class="absolute inset-0 h-full w-full stroke-gray-900/10 dark:stroke-white/10" fill="none">
+      <defs>
+        <pattern
+            id="pattern-5c1e4f0e-62d5-498b-8ff0-cf77bb448c8e"
+            x="0"
+            y="0"
+            width="10"
+            height="10"
+            patternUnits="userSpaceOnUse"
+        >
+          <path d="M-3 13 15-5M-5 5l18-18M-1 21 17 3" />
+        </pattern>
+      </defs>
+      <rect stroke="none" fill="url(#pattern-5c1e4f0e-62d5-498b-8ff0-cf77bb448c8e)" width="100%" height="100%" />
+    </svg>
+
+    <slot />
+  </div>
+</template>