Restructured Project Rep

components/HistoryDisplay.vue

@@ -0,0 +1,200 @@
+<script setup>
+import dayjs from "dayjs"
+const props = defineProps({
+  type: {
+    required: true,
+    type: String
+  },
+  elementId: {
+    required: true,
+    type: String
+  },
+  renderHeadline: {
+    type: Boolean
+  }
+})
+const { metaSymbol } = useShortcuts()
+const dataStore = useDataStore()
+const user = useSupabaseUser()
+const supabase = useSupabaseClient()
+const toast = useToast()
+const {type, elementId} = props
+const showAddHistoryItemModal = ref(false)
+const colorMode = useColorMode()
+
+const historyItems = computed(() => {
+
+  let items = []
+
+  if(type === "customer") {
+    items = dataStore.historyItems.filter(i => i.customer === elementId)
+  } else if(type === "vendor") {
+    items = dataStore.historyItems.filter(i => i.vendor === elementId)
+  } else if(type === "project") {
+    items = dataStore.historyItems.filter(i => i.project === elementId)
+  } else if(type === "plant") {
+    items = dataStore.historyItems.filter(i => i.plant === elementId)
+  } else if(type === "incomingInvoice") {
+    items = dataStore.historyItems.filter(i => i.incomingInvoice === elementId)
+  } else if(type === "document") {
+    items = dataStore.historyItems.filter(i => i.document === elementId)
+  } else if(type === "contact") {
+    items = dataStore.historyItems.filter(i => i.contact === elementId)
+  } else if(type === "contract") {
+    items = dataStore.historyItems.filter(i => i.contract === elementId)
+  } else if(type === "inventoryitem") {
+    items = dataStore.historyItems.filter(i => i.inventoryitem === elementId)
+  } else if(type === "product") {
+    items = dataStore.historyItems.filter(i => i.product === elementId)
+  } else if(type === "profile") {
+    items = dataStore.historyItems.filter(i => i.profile === elementId)
+  } else if(type === "absencerequest") {
+    items = dataStore.historyItems.filter(i => i.absenceRequest === elementId)
+  }
+
+  return items
+
+})
+const addHistoryItemData = ref({
+  text: "",
+  user: ""
+})
+
+const addHistoryItem = async () => {
+  addHistoryItemData.value.user = user.value.id
+
+  if(type === "customer") {
+    addHistoryItemData.value.customer = elementId
+  } else if(type === "vendor") {
+    addHistoryItemData.value.vendor = elementId
+  } else if(type === "project") {
+    addHistoryItemData.value.project = elementId
+  } else if(type === "plant") {
+    addHistoryItemData.value.plant = elementId
+  } else if(type === "incomingInvoice") {
+    addHistoryItemData.value.incomingInvoice = elementId
+  } else if(type === "document") {
+    addHistoryItemData.value.document = elementId
+  } else if(type === "contact") {
+    addHistoryItemData.value.contact = elementId
+  } else if(type === "contract") {
+    addHistoryItemData.value.contract = elementId
+  } else if(type === "inventoryitem") {
+    addHistoryItemData.value.inventoryitem = elementId
+  } else if(type === "product") {
+    addHistoryItemData.value.product = elementId
+  } else if(type === "profile") {
+    addHistoryItemData.value.profile = elementId
+  } else if(type === "absencerequest") {
+    addHistoryItemData.value.absenceRequest = elementId
+  }
+
+
+  const {data,error} = await supabase
+      .from("historyitems")
+      .insert([{...addHistoryItemData.value, tenant: dataStore.currentTenant}])
+      .select()
+
+  if(error) {
+    console.log(error)
+  } else {
+    addHistoryItemData.value = {}
+    toast.add({title: "Eintrag erfolgreich erstellt"})
+    showAddHistoryItemModal.value = false
+    await dataStore.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"
+          @keyup.meta.enter="addHistoryItem"
+        />
+<!--        <template #help>
+          <UKbd>{{metaSymbol}}</UKbd> <UKbd>Enter</UKbd> Speichern
+        </template>-->
+
+      </UFormGroup>
+
+
+      <template #footer>
+        <UButton @click="addHistoryItem">Speichern</UButton>
+      </template>
+    </UCard>
+  </UModal>
+  <Toolbar
+    v-if="!renderHeadline"
+  >
+    <UButton
+        @click="showAddHistoryItemModal = true"
+    >
+      + Eintrag
+    </UButton>
+  </Toolbar>
+  <div v-else>
+    <div :class="`flex justify-between`">
+      <p class="text-2xl">Logbuch</p>
+      <UButton
+          @click="showAddHistoryItemModal = true"
+      >
+        + Eintrag
+      </UButton>
+    </div>
+    <UDivider class="mt-3"/>
+  </div>
+
+
+  <div
+      v-if="historyItems.length > 0"
+      v-for="(item,index) in historyItems.slice().reverse()"
+  >
+    <UDivider
+        class="my-3"
+        v-if="index !== 0"
+    />
+    <div class="flex items-center gap-3">
+      <UAvatar
+          v-if="!item.user"
+          :src="colorMode.value === 'light' ? '/Logo.png' : '/Logo_Dark.png' "
+      />
+      <UAvatar
+          :alt="dataStore.profiles.find(profile => profile.id === item.user).fullName"
+          v-else
+      />
+      <div>
+        <h3 v-if="item.user">{{dataStore.getProfileById(item.user) ? dataStore.getProfileById(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>
+</template>
+
+<style scoped>
+
+</style>