From fbf1f78d64d8c842d37d4d108b3656595f734d57 Mon Sep 17 00:00:00 2001
From: flfeders <f.federspiel@federspiel.tech>
Date: Wed, 20 Nov 2024 21:08:50 +0100
Subject: [PATCH] Added Chats

---
 components/MainNav.vue    |   9 ++-
 pages/chats/create.vue    | 119 ++++++++++++++++++++++++++++++++++++
 pages/chats/index.vue     | 125 ++++++++++++++++++++++++++++++++++++++
 pages/chats/show/[id].vue | 121 ++++++++++++++++++++++++++++++++++++
 4 files changed, 371 insertions(+), 3 deletions(-)
 create mode 100644 pages/chats/create.vue
 create mode 100644 pages/chats/index.vue
 create mode 100644 pages/chats/show/[id].vue

diff --git a/components/MainNav.vue b/components/MainNav.vue
index 70e6681..123c708 100644
--- a/components/MainNav.vue
+++ b/components/MainNav.vue
@@ -51,11 +51,14 @@ const links = computed(() => {
           label: "E-Mail",
           to: "/email/new",
           icon: "i-heroicons-envelope"
-        },
-        {
+        }, {
           label: "Logbücher",
           to: "/communication/historyItems",
-          icon: "i-heroicons-envelope"
+          icon: "i-heroicons-book-open"
+        }, {
+          label: "Chats",
+          to: "/chats",
+          icon: "i-heroicons-chat-bubble-left"
         }
       ]
     },
diff --git a/pages/chats/create.vue b/pages/chats/create.vue
new file mode 100644
index 0000000..743e035
--- /dev/null
+++ b/pages/chats/create.vue
@@ -0,0 +1,119 @@
+<script setup>
+
+const dataStore = useDataStore()
+const supabase = useSupabaseClient()
+
+const profiles = ref([])
+
+const itemInfo = ref({})
+const selectedProfiles = ref([])
+
+const setup = async () => {
+  profiles.value = await useSupabaseSelect("profiles")
+  selectedProfiles.value = [dataStore.activeProfile.id]
+}
+
+setup()
+
+const createChat = async () => {
+  const {data,error} = await supabase.from("chats").insert({
+    tenant: dataStore.currentTenant,
+    name: itemInfo.value.name
+  }).select()
+
+  if(error) {
+    console.log(error)
+  } else if(data){
+    console.log(data)
+
+    let memberships = selectedProfiles.value.map(i => {
+      return {
+        profile_id: i,
+        chat_id: data[0].id
+      }
+    })
+
+    const {error} = await supabase.from("chatmembers").insert(memberships)
+
+    if(error) {
+      console.log(error)
+    } else {
+      navigateTo("/chats")
+    }
+
+  }
+
+}
+
+</script>
+
+<template>
+  <UDashboardNavbar>
+    <template #left>
+      <UButton
+          icon="i-heroicons-chevron-left"
+          variant="outline"
+          @click="navigateTo(`/chats`)"
+      >
+        Chats
+      </UButton>
+    </template>
+    <template #center>
+      <h1
+          v-if="itemInfo"
+          class="text-xl font-medium"
+      >Chat Erstellen</h1>
+    </template>
+    <template #right>
+      <UButton
+          @click="createChat"
+      >
+        Erstellen
+      </UButton>
+      <UButton
+          @click="navigateTo(`/chats`)"
+          color="red"
+          class="ml-2"
+      >
+        Abbrechen
+      </UButton>
+    </template>
+  </UDashboardNavbar>
+  <UDashboardPanelContent>
+    <UForm>
+      <UFormGroup
+          label="Name:"
+      >
+        <UInput
+            v-model="itemInfo.name"
+        />
+      </UFormGroup>
+
+
+
+
+      <UFormGroup
+          label="Beteiligte Benutzer:"
+      >
+        <USelectMenu
+            v-model="selectedProfiles"
+            :options="profiles"
+            option-attribute="fullName"
+            value-attribute="id"
+            searchable
+            multiple
+            :search-attributes="['fullName']"
+        >
+          <template #label>
+            {{selectedProfiles.length > 0 ? selectedProfiles.map(i => dataStore.getProfileById(i).fullName).join(", ") : "Keine Benutzer ausgewählt"}}
+          </template>
+        </USelectMenu>
+      </UFormGroup>
+    </UForm>
+  </UDashboardPanelContent>
+
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/pages/chats/index.vue b/pages/chats/index.vue
new file mode 100644
index 0000000..9b38686
--- /dev/null
+++ b/pages/chats/index.vue
@@ -0,0 +1,125 @@
+<script setup>
+definePageMeta({
+  middleware: "auth"
+})
+
+defineShortcuts({
+  '/': () => {
+    //console.log(searchinput)
+    //searchinput.value.focus()
+    document.getElementById("searchinput").focus()
+  },
+  '+': () => {
+    router.push("/chats/create")
+  },
+  'Enter': {
+    usingInput: true,
+    handler: () => {
+      router.push(`/chats/show/${filteredRows.value[selectedItem.value].id}`)
+    }
+  },
+  'arrowdown': () => {
+    if(selectedItem.value < filteredRows.value.length - 1) {
+      selectedItem.value += 1
+    } else {
+      selectedItem.value = 0
+    }
+  },
+  'arrowup': () => {
+    if(selectedItem.value === 0) {
+      selectedItem.value = filteredRows.value.length - 1
+    } else {
+      selectedItem.value -= 1
+    }
+  }
+})
+
+const router = useRouter()
+const items = ref([])
+const selectedItem = ref(0)
+
+const setup = async () => {
+  items.value = await useSupabaseSelect("chats","*, profiles(*)")
+  //items.value = await useSupabaseSelect("chats","*, profiles(*), chatmessages(*)")
+}
+
+const templateColumns = [
+  {
+    key: "name",
+    label: "Name"
+  },{
+    key: "profiles",
+    label: "Mitglieder"
+  },
+
+]
+const selectedColumns = ref(templateColumns)
+const columns = computed(() => templateColumns.filter((column) => selectedColumns.value.includes(column)))
+
+const searchString = ref('')
+
+const filteredRows = computed(() => {
+
+  return useListFilter(searchString.value, items.value)
+})
+
+setup()
+</script>
+
+<template>
+  <UDashboardNavbar title="Chats" :badge="filteredRows.length">
+    <template #right>
+      <UInput
+          id="searchinput"
+          v-model="searchString"
+          icon="i-heroicons-funnel"
+          autocomplete="off"
+          placeholder="Suche..."
+          class="hidden lg:block"
+          @keydown.esc="$event.target.blur()"
+      >
+        <template #trailing>
+          <UKbd value="/" />
+        </template>
+      </UInput>
+
+      <UButton @click="router.push(`/chats/create`)">+ Chat</UButton>
+    </template>
+  </UDashboardNavbar>
+  <UDashboardToolbar>
+    <template #right>
+      <USelectMenu
+          v-model="selectedColumns"
+          icon="i-heroicons-adjustments-horizontal-solid"
+          :options="templateColumns"
+          multiple
+          class="hidden lg:block"
+          by="key"
+      >
+        <template #label>
+          Spalten
+        </template>
+      </USelectMenu>
+    </template>
+  </UDashboardToolbar>
+  <UTable
+      :rows="filteredRows"
+      :columns="columns"
+      class="w-full"
+      :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
+      @select="(i) => router.push(`/chats/show/${i.id}`) "
+      :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Chats anzuzeigen' }"
+  >
+    <template #name-data="{row}">
+      <span class="text-primary-500 font-bold" v-if="row === filteredRows[selectedItem]">{{row.name}}</span>
+      <span v-else>{{row.name}}</span>
+    </template>
+    <template #profiles-data="{row}">
+      {{row.profiles.map(i => i.fullName).join(", ")}}
+    </template>
+  </UTable>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/pages/chats/show/[id].vue b/pages/chats/show/[id].vue
new file mode 100644
index 0000000..94d1c53
--- /dev/null
+++ b/pages/chats/show/[id].vue
@@ -0,0 +1,121 @@
+<script setup>
+import { format, isToday } from 'date-fns'
+import dayjs from "dayjs"
+
+definePageMeta({
+  middleware: "auth"
+})
+
+defineShortcuts({
+  ' ': () => {
+    document.getElementById("textinput").focus()
+  },
+})
+
+const itemInfo = ref({})
+const dataStore = useDataStore()
+const supabase = useSupabaseClient()
+
+const setup = async () => {
+  itemInfo.value = await useSupabaseSelectSingle("chats",useRoute().params.id,"*, profiles(*), chatmessages(*)")
+
+  let unseenMessages = itemInfo.value.chatmessages.filter(i => !i.seenBy.includes(dataStore.activeProfile.id))
+
+
+  for await (const message of unseenMessages){
+    await supabase.from("chatmessages").update({seenBy: [...message.seenBy, dataStore.activeProfile.id]}).eq("id",message.id)
+  }
+
+
+}
+setup()
+
+const messageText = ref("")
+const sendMessage = async () => {
+  if(messageText.value.length > 0) {
+    const message = {
+      origin: dataStore.activeProfile.id,
+      destinationchat: itemInfo.value.id,
+      text: messageText.value,
+      tenant: dataStore.currentTenant
+    }
+
+    const {data,error} = await supabase.from("chatmessages").insert(message)
+
+    if(error) {
+      console.log(error)
+    } else {
+      //Reset
+      messageText.value = ""
+      //Create Notifications
+      let notifications = itemInfo.value.profiles.filter(i => i.id !== dataStore.activeProfile.id).map(i => {
+        return {
+          tenant: dataStore.currentTenant,
+          profile: i.id,
+          initiatingProfile: dataStore.activeProfile.id,
+          title: `Sie wurden im Chat ${itemInfo.value.name} erwähnt`,
+          link: `/chats/show/${itemInfo.value.id}`,
+          message: message.text
+        }
+      })
+
+      console.log(notifications)
+
+      const {error} = await supabase.from("notifications").insert(notifications)
+
+      setup()
+    }
+  }
+}
+
+</script>
+
+<template>
+  <UDashboardNavbar :title="itemInfo.name">
+    <template #center>
+
+    </template>
+    <template #right>
+      <UAvatarGroup size="sm" :max="2">
+        <UAvatar
+            v-if="itemInfo.profiles"
+            v-for="avatar in itemInfo.profiles.map(i => i.fullName)"
+            :alt="avatar" size="sm" />
+      </UAvatarGroup>
+
+    </template>
+  </UDashboardNavbar>
+  <div class="scrollList p-5">
+    <UAlert
+        :color="message.seenBy.includes(dataStore.activeProfile.id) ? 'white' : 'primary'"
+        :variant="message.seenBy.includes(dataStore.activeProfile.id) ? 'solid' : 'outline'"
+        class="my-2"
+        v-for="message in itemInfo.chatmessages"
+        :description="message.text"
+        :avatar="{ alt: dataStore.getProfileById(message.origin).fullName }"
+        :title="`${dataStore.getProfileById(message.origin).fullName} - ${isToday(new Date(message.created_at)) ? dayjs(message.created_at).format('HH:mm') : dayjs(message.created_at).format('DD.MM.YYYY HH:mm')}`"
+      />
+
+  </div>
+  <div class="flex flex-row justify-between p-5">
+    <UInput
+        class="flex-auto mr-2"
+        v-model="messageText"
+        @keyup.enter="sendMessage"
+        placeholder="Deine Nachricht"
+        id="textinput"
+    />
+    <UButton
+        icon="i-heroicons-chevron-double-right-solid"
+        @click="sendMessage"
+        :disabled="messageText.length === 0"
+    >
+
+    </UButton>
+  </div>
+
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file