Help Slideover

components/HelpSlideover.vue

@@ -3,7 +3,10 @@ const { isHelpSlideoverOpen } = useDashboard()
 const { metaSymbol } = useShortcuts()
 
 const shortcuts = ref(false)
+const dataStore = useDataStore()
 const query = ref('')
+const supabase = useSupabaseClient()
+const toast = useToast()
 
 const links = [{
   label: 'Shortcuts',
@@ -14,15 +17,30 @@ const links = [{
   }
 }, {
   label: 'Webseite',
-  icon: 'i-heroicons-book-open',
+  icon: 'i-heroicons-globe-europe-africa',
   to: 'https://fedeo.de',
   target: '_blank'
 }, {
+  label: 'Roadmap',
+  icon: 'i-heroicons-rocket-launch-solid',
+  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',
@@ -78,6 +96,43 @@ const filteredCategories = computed(() => {
     })
   })).filter(category => !!category.items.length)
 })
+
+const contactRequestData = ref({
+  source: "helpSlideover",
+  tenant: dataStore.currentTenant,
+  message: "",
+  title: "",
+  contactName: dataStore.activeProfile.fullName,
+  contactTel: dataStore.activeProfile.phoneMobile || dataStore.activeProfile.phoneHome,
+  contactMail: dataStore.activeProfile.email,
+  contactType: "Hilfe"
+})
+
+const addContactRequest = async () => {
+  const {data,error} = await supabase.from("contactRequests").insert(contactRequestData.value)
+
+  if(error) {
+    toast.add({title: "Anfrage konnte nicht erstellt werden",color:"rose"})
+  } else {
+    toast.add({title: "Anfrage erfolgreich erstellt"})
+    resetContactRequest()
+  }
+}
+
+const resetContactRequest = () => {
+  contactRequestData.value = {
+    source: "helpSlideover",
+    tenant: dataStore.currentTenant,
+    message: "",
+    title: "",
+    contactName: dataStore.activeProfile.fullName,
+    contactTel: dataStore.activeProfile.phoneMobile || dataStore.activeProfile.phoneHome,
+    contactMail: dataStore.activeProfile.email,
+    contactType: "Hilfe"
+  }
+}
+
+
 </script>
 
 <template>
@@ -119,5 +174,52 @@ const filteredCategories = computed(() => {
     <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">
+      <h1 class="font-semibold">Kontaktanfrage:</h1>
+      <UForm
+        class="p-3"
+        @submit="addContactRequest"
+        @reset="resetContactRequest"
+      >
+        <UFormGroup
+          label="Art:"
+        >
+          <USelectMenu
+              :options="['Hilfe','Software Problem / Bug','Funktionsanfrage','Kontakt','Sonstiges']"
+              v-model="contactRequestData.contactType"
+          />
+        </UFormGroup>
+        <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"
+          >
+            Senden
+          </UButton>
+          <UButton
+            type="reset"
+            color="rose"
+            variant="outline"
+          >
+            Zurücksetzen
+          </UButton>
+        </InputGroup>
+
+      </UForm>
+    </div>
   </UDashboardSlideover>
 </template>