FEDEO/frontend/components/HelpSlideover.vue

<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>