Changed STore Type and corrected all Pages

Added HistoryDisplay.vue Added NumberRanges
2023-12-27 21:52:55 +01:00
parent 9e092823e4
commit c41b99f29d
33 changed files with 1094 additions and 812 deletions
--- a/spaces/components/HistoryDisplay.vue
+++ b/spaces/components/HistoryDisplay.vue
@@ -0,0 +1,153 @@
+<script setup>
+import * as dayjs from "dayjs"
+const props = defineProps({
+  type: {
+    required: true,
+    type: String
+  },
+  elementId: {
+    required: true,
+    type: String
+  }
+})
+const user = useSupabaseUser()
+const supabase = useSupabaseClient()
+const toast = useToast()
+const {type, elementId} = props
+const showAddHistoryItemModal = ref(false)
+const colorMode = useColorMode()
+/*const historyItems = ref([
+  {
+    user: "86e67794-0ea8-41b0-985a-1072e84f56e9",
+    text: "<a class='text-primary-500'>@marielesindern</a> magst du die einmal anschauen",
+  },
+  {
+    user: "3b795486-6b71-4ed8-a1f6-dbc52360d826",
+    text: "<a class='text-primary-500'>@florianfederspiel</a> Jo alles bestens",
+  },
+  {
+    user: "Spaces Bot",
+    text: "Erstellt",
+  }
+])*/
+
+const {profiles} = storeToRefs(useDataStore())
+const {getHistoryItemsByCustomer, fetchHistoryItems} = useDataStore()
+
+const historyItems = computed(() => {
+
+  let items = []
+
+  if(type === "customer") {
+    items = getHistoryItemsByCustomer(elementId)
+  }
+
+  return items.reverse()
+
+})
+const addHistoryItemData = ref({
+  text: "",
+  user: ""
+})
+
+const addHistoryItem = async () => {
+  addHistoryItemData.value.user = user.value.id
+
+  if(type === "customer") {
+    addHistoryItemData.value.customer = elementId
+  }
+
+
+  const {data,error} = await supabase
+      .from("historyItems")
+      .insert([addHistoryItemData.value])
+      .select()
+
+  if(error) {
+    console.log(error)
+  } else {
+    toast.add({title: "Eintrag erfolgreich erstellt"})
+    showAddHistoryItemModal.value = false
+    await fetchHistoryItems()
+  }
+
+}
+
+const renderText = (text) => {
+  const regex = /(@\w*)/g
+
+  text = text.replaceAll(regex, "<a class='text-primary-500'>$&</a>")
+
+  return text
+}
+
+</script>
+
+<template>
+  <UModal
+    v-model="showAddHistoryItemModal"
+  >
+    <UCard>
+      <template #header>
+        Eintrag hinzufügen
+      </template>
+
+      <UFormGroup
+        label="Text:"
+      >
+        <UTextarea
+          v-model="addHistoryItemData.text"
+        />
+      </UFormGroup>
+
+
+      <template #footer>
+        <UButton @click="addHistoryItem">Hinzufügen</UButton>
+      </template>
+    </UCard>
+  </UModal>
+  <UCard class="mt-5">
+    <template #header>
+      <InputGroup>
+        <UButton
+          @click="showAddHistoryItemModal = true"
+        >
+          + Eintrag
+        </UButton>
+      </InputGroup>
+    </template>
+    <div
+      v-if="historyItems.length > 0"
+      v-for="(item,index) in historyItems"
+    >
+      <UDivider
+          class="my-3"
+          v-if="index !== 0"
+      />
+      <div class="flex items-center gap-3">
+        <UAvatar
+            v-if="!item.user"
+            :src="colorMode.value === 'light' ? '/spaces_hell.svg' : '/spaces.svg' "
+        />
+        <UAvatar
+            :alt="profiles.find(profile => profile.id === item.user).fullName"
+            v-else
+        />
+        <div>
+          <h3 v-if="item.user">{{profiles.find(profile => profile.id === item.user) ? profiles.find(profile => profile.id === item.user).fullName : ""}}</h3>
+          <h3 v-else>Spaces Bot</h3>
+          <span v-html="renderText(item.text)"/><br>
+          <span class="text-gray-500">{{dayjs(item.created_at).format("DD:MM:YY HH:mm")}}</span>
+        </div>
+      </div>
+
+
+    </div>
+
+
+  </UCard>
+</template>
+
+<style scoped>
+
+</style>