Added Frontend

frontend/components/HelpSlideover.vue

@@ -0,0 +1,231 @@
+<script setup>
+const { isHelpSlideoverOpen } = useDashboard()
+const { metaSymbol } = useShortcuts()
+
+const shortcuts = ref(false)
+const dataStore = useDataStore()
+const profileStore = useProfileStore()
+const query = ref('')
+const supabase = useSupabaseClient()
+const toast = useToast()
+const router = useRouter()
+
+
+const links = [{
+  label: 'Shortcuts',
+  icon: 'i-heroicons-key',
+  trailingIcon: 'i-heroicons-arrow-right-20-solid',
+  onClick: () => {
+    shortcuts.value = true
+  }
+},/* {
+  label: 'Tickets',
+  icon: 'i-heroicons-clipboard-document',
+  to: '/support',
+},*/  {
+  label: 'Webseite',
+  icon: 'i-heroicons-globe-europe-africa',
+  to: 'https://fedeo.de',
+  target: '_blank'
+}, {
+  label: 'Versionshistorie',
+  icon: 'i-heroicons-rocket-launch',
+  to: 'https://fedeo.de/changelog',
+  target: '_blank'
+},/* {
+  label: 'Roadmap',
+  icon: 'i-heroicons-rocket-launch',
+  to: 'https://fedeo.de/roadmap',
+  target: '_blank'
+},*/ {
+  label: 'Doku',
+  icon: 'i-heroicons-book-open',
+  to: 'https://fedeo.de/docs',
+  target: '_blank'
+}, {
+  label: 'Status',
+  icon: 'i-heroicons-shield-check',
+  to: 'https://uptime.fedeo.io/status/fedeo',
+  target: '_blank'
+}/*, {
+  label: 'Bugs & Features',
+  icon: 'i-heroicons-book-open',
+  to: 'https://gitlab.federspiel.software/fedeo/software-features',
+  target: '_blank'
+}, {
+  label: 'GitHub repository',
+  icon: 'i-simple-icons-github',
+  to: 'https://github.com/nuxt/ui-pro',
+  target: '_blank'
+}, {
+  label: 'Buy Nuxt UI Pro',
+  icon: 'i-heroicons-credit-card',
+  to: 'https://ui.nuxt.com/pro/purchase',
+  target: '_blank'
+}*/]
+
+const categories = computed(() => [{
+  title: 'General',
+  items: [
+    { shortcuts: [metaSymbol.value, 'K'], name: 'Hauptmenü' },
+    { shortcuts: ['N'], name: 'Benachrichtigungen' },
+    { shortcuts: ['?'], name: 'Help & Support' },
+    { shortcuts: ['/'], name: 'Suche' }
+  ]
+}, {
+  title: 'Navigation',
+  items: [
+    { shortcuts: ['G', 'H'], name: 'Gehe zu Dashboard' },
+    { shortcuts: ['G', 'A'], name: 'Gehe zu Aufgaben' },
+    { shortcuts: ['G', 'D'], name: 'Gehe zu Dokumente' },
+    { shortcuts: ['G', 'K'], name: 'Gehe zu Kunden' },
+    { shortcuts: ['G', 'L'], name: 'Gehe zu Lieferanten' },
+    { shortcuts: ['G', 'P'], name: 'Gehe zu Projekte' },
+    { shortcuts: ['G', 'V'], name: 'Gehe zu Verträge' },
+    { shortcuts: ['G', 'O'], name: 'Gehe zu Objekte' },/*
+    { shortcuts: ['G', 'I'], name: 'Go to Inbox' },
+    { shortcuts: ['G', 'U'], name: 'Go to Users' },*/
+    { shortcuts: ['G', 'S'], name: 'Gehe zu Einstellungen' },
+    { shortcuts: ['↑'], name: 'Vorheriger Eintrag' },
+    { shortcuts: ['↓'], name: 'Nächster Eintrag' },
+    { shortcuts: ['↵'], name: 'Eintrag Öffnen' },
+    { shortcuts: ['←'], name: 'Tab nach links wechseln' },
+    { shortcuts: ['→'], name: 'Tab nach rechts wechseln' },
+  ]
+}, /*{
+  title: 'Inbox',
+  items: [
+    { shortcuts: ['↑'], name: 'Prev notification' },
+    { shortcuts: ['↓'], name: 'Next notification' }
+  ]
+}*/])
+
+const filteredCategories = computed(() => {
+  return categories.value.map(category => ({
+    title: category.title,
+    items: category.items.filter(item => {
+      return item.name.search(new RegExp(query.value, 'i')) !== -1
+    })
+  })).filter(category => !!category.items.length)
+})
+
+const contactRequestData = ref({
+  message: "",
+  title: "",
+})
+
+const loadingContactRequest = ref(false)
+
+const addContactRequest = async () => {
+  console.log("ADD")
+  loadingContactRequest.value = true
+  const retVal = await useFunctions().useCreateTicket(contactRequestData.value.title,contactRequestData.value.message,router.currentRoute.value.fullPath,"helpSlideover",)
+
+  if(retVal) {
+    toast.add({title: "Anfrage erfolgreich erstellt"})
+    resetContactRequest()
+  } else {
+    toast.add({title: "Anfrage konnte nicht erstellt werden",color:"rose"})
+  }
+  loadingContactRequest.value = false
+}
+
+const resetContactRequest = () => {
+  contactRequestData.value = {
+    message: "",
+    title: "",
+  }
+}
+</script>
+
+<template>
+  <UDashboardSlideover v-model="isHelpSlideoverOpen">
+    <template #title>
+      <UButton
+          v-if="shortcuts"
+          color="gray"
+          variant="ghost"
+          size="sm"
+          icon="i-heroicons-arrow-left-20-solid"
+          @click="shortcuts = false"
+      />
+
+      {{ shortcuts ? 'Shortcuts' : 'Hilfe & Information' }}
+    </template>
+
+    <div v-if="shortcuts" class="space-y-6">
+      <UInput v-model="query" icon="i-heroicons-magnifying-glass" placeholder="Search..." autofocus color="gray" />
+
+      <div v-for="(category, index) in filteredCategories" :key="index">
+        <p class="mb-3 text-sm text-gray-900 dark:text-white font-semibold">
+          {{ category.title }}
+        </p>
+
+        <div class="space-y-2">
+          <div v-for="(item, i) in category.items" :key="i" class="flex items-center justify-between">
+            <span class="text-sm text-gray-500 dark:text-gray-400">{{ item.name }}</span>
+
+            <div class="flex items-center justify-end flex-shrink-0 gap-0.5">
+              <UKbd v-for="(shortcut, j) in item.shortcuts" :key="j">
+                {{ shortcut }}
+              </UKbd>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div v-else class="flex flex-col gap-y-3">
+      <UButton v-for="(link, index) in links" :key="index" color="white" v-bind="link" />
+    </div>
+<!--    <div class="mt-5" v-if="!loadingContactRequest">
+      <h1 class="font-semibold">Kontaktanfrage:</h1>
+      <UForm
+        class="p-3"
+        @submit="addContactRequest"
+        @reset="resetContactRequest"
+      >
+&lt;!&ndash;        <UFormGroup
+          label="Art:"
+        >
+          <USelectMenu
+              :options="['Hilfe','Software Problem / Bug','Funktionsanfrage','Kontakt','Sonstiges']"
+              v-model="contactRequestData.contactType"
+          />
+        </UFormGroup>&ndash;&gt;
+        <UFormGroup
+          label="Titel:"
+        >
+          <UInput
+            v-model="contactRequestData.title"
+          />
+        </UFormGroup>
+        <UFormGroup
+          label="Nachricht:"
+        >
+          <UTextarea
+              v-model="contactRequestData.message"
+              rows="6"
+          />
+        </UFormGroup>
+        <InputGroup class="mt-3">
+          <UButton
+            type="submit"
+            :disabled="!contactRequestData.title || !contactRequestData.message"
+          >
+            Senden
+          </UButton>
+          <UButton
+            type="reset"
+            color="rose"
+            variant="outline"
+            :disabled="!contactRequestData.title && !contactRequestData.message"
+          >
+            Zurücksetzen
+          </UButton>
+        </InputGroup>
+
+      </UForm>
+    </div>
+    <UProgress class="mt-5" animation="carousel" v-else/>-->
+  </UDashboardSlideover>
+</template>