Added Chat

Restructured Calendar
Some Changes in Timetracking

spaces/pages/chat.vue

@@ -0,0 +1,157 @@
+<script setup>
+definePageMeta({
+  layout: "default"
+})
+
+
+import dayjs from "dayjs";
+
+
+const supabase = useSupabaseClient()
+const user = useSupabaseUser()
+
+const dataStore = useDataStore()
+const selectedChat = ref({})
+const messageText = ref("")
+const createMessage = async () => {
+  const {data,error} = await supabase
+      .from("messages")
+      .insert([{
+        text: messageText.value,
+        origin: user.value.id,
+        destination: selectedChat.value.id
+      }])
+      .select()
+
+  if(error) {
+    console.log(error)
+  }
+  messageText.value = ""
+  console.log("OK")
+  dataStore.fetchMessages()
+
+
+}
+
+
+
+</script>
+
+<template>
+  <div class="flex h-full">
+    <div class="w-1/5 mr-2">
+      <a
+          v-for="chat in dataStore.chats"
+          @click="selectedChat = chat"
+      >
+        <UAlert
+            :title="chat.title ? chat.title : chat.members.map(i => { if(i !== user.id) return dataStore.getProfileById(i).fullName}).join(' ')"
+            :avatar="{alt: chat.members.map(i => { if(i !== user.id) return dataStore.getProfileById(i).fullName}).join(' ')}"
+            :color="selectedChat.id === chat.id ? 'primary' : 'white'"
+            variant="outline"
+        />
+
+      </a>
+    </div>
+    <div class="w-full">
+<!--      <UCard class="h-full" v-if="selectedChat.id">
+        <template #header>
+          <Placeholder class="h-8"/>
+        </template>
+
+        <div class="h-full">
+          <UAlert
+              v-for="message in dataStore.getMessagesByChatId(selectedChat.id)"
+              :color="message.origin === user.id ? 'primary' : 'white'"
+              variant="outline"
+              :avatar="{alt: dataStore.getProfileById(message.origin).fullName}"
+              :title="message.text"
+              :description="dayjs(message.created_at).isSame(dayjs(), 'day') ? dayjs(message.created_at).format('HH:mm') : dayjs(message.created_at).format('DD.MM.YY HH:mm')"
+              class="mb-3"
+          />
+        </div>
+
+        <template #footer>
+          <div class="h-8">
+            <UButtonGroup class="w-full">
+              <UInput
+                  class="flex-auto"
+                  placeholder="Neue Nachricht"
+                  v-model="messageText"
+                  @keyup.enter="createMessage"
+              />
+              <UButton
+                @click="createMessage"
+              >
+                Senden
+              </UButton>
+            </UButtonGroup>
+
+          </div>
+
+        </template>
+      </UCard>-->
+
+      <div class="w-full  h-full px-5 flex flex-col justify-between" v-if="selectedChat.id">
+        <div class="flex flex-col mt-5">
+
+          <div
+            v-for="message in dataStore.getMessagesByChatId(selectedChat.id)"
+          >
+            <div class="flex justify-end mb-4" v-if="message.origin === user.id">
+              <div
+                  class="mr-2 py-3 px-4 bg-primary-400 rounded-bl-3xl rounded-tl-3xl rounded-tr-xl text-white"
+              >
+                {{message.text}}
+              </div>
+              <UAvatar
+                :alt="dataStore.getProfileById(message.origin) ? dataStore.getProfileById(message.origin).fullName : ''"
+                size="md"
+              />
+            </div>
+            <div class="flex justify-start mb-4" v-else>
+              <UAvatar
+                  :alt="dataStore.getProfileById(message.origin) ? dataStore.getProfileById(message.origin).fullName : ''"
+                  size="md"
+              />
+              <div
+                  class="ml-2 py-3 px-4 bg-gray-400 rounded-br-3xl rounded-tr-3xl rounded-tl-xl text-white"
+              >
+                {{message.text}}
+              </div>
+            </div>
+          </div>
+        </div>
+
+
+
+        <div class="py-5">
+          <UButtonGroup class="w-full">
+            <UInput
+                variant="outline"
+                color="primary"
+                placeholder="Neue Nachricht"
+                v-model="messageText"
+                @keyup.enter="createMessage"
+                class="flex-auto"
+            />
+            <UButton
+              @click="createMessage"
+            >
+              Senden
+            </UButton>
+          </UButtonGroup>
+
+
+        </div>
+      </div>
+
+    </div>
+  </div>
+
+
+</template>
+
+<style scoped>
+
+</style>