FEDEO/components/HistoryDisplay.vue

<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 profileStore = useProfileStore()
const user = useSupabaseUser()
const supabase = useSupabaseClient()
const toast = useToast()
const {type, elementId} = props
const showAddHistoryItemModal = ref(false)
const colorMode = useColorMode()

const items = ref([])

const setup = async () => {

  items.value = (await supabase.from("historyitems").select().eq(type,elementId).order("created_at",{ascending: true})).data || []

  /*if(type === "customer") {
    items.value = (await supabase.from("historyitems").select().eq("customer",elementId)).data || []
  } else if(type === "vendor") {
    items.value = (await supabase.from("historyitems").select().eq("vendor",elementId)).data || []
  } else if(type === "project") {
    items.value = (await supabase.from("historyitems").select().eq("project",elementId)).data || []
  } else if(type === "plant") {
    items.value = (await supabase.from("historyitems").select().eq("plant",elementId)).data || []
  } else if(type === "incomingInvoice") {
    items.value = (await supabase.from("historyitems").select().eq("incomingInvoice",elementId)).data || []
  } else if(type === "document") {
    items.value = (await supabase.from("historyitems").select().eq("document",elementId)).data || []
  } else if(type === "contact") {
    items.value = (await supabase.from("historyitems").select().eq("contact",elementId)).data || []
  } else if(type === "contract") {
    items.value = (await supabase.from("historyitems").select().eq("contract",elementId)).data || []
  } else if(type === "inventoryitem") {
    items.value = (await supabase.from("historyitems").select().eq("inventoryitem",elementId)).data || []
  } else if(type === "product") {
    items.value = (await supabase.from("historyitems").select().eq("product",elementId)).data || []
  } else if(type === "profile") {
    items.value = (await supabase.from("historyitems").select().eq("profile",elementId)).data || []
  } else if(type === "absencerequest") {
    items.value = (await supabase.from("historyitems").select().eq("absenceRequest",elementId)).data || []
  } else if(type === "event") {
    items.value = (await supabase.from("historyitems").select().eq("event",elementId)).data || []
  } else if(type === "task") {
    items.value = (await supabase.from("historyitems").select().eq("task",elementId)).data || []
  } else if(type === "vehicle") {
    items.value = (await supabase.from("historyitems").select().eq("vehicle",elementId)).data || []
  } else if(type === "space") {
    items.value = (await supabase.from("historyitems").select().eq("space",elementId)).data || []
  } else if(type === "trackingtrip") {
    items.value = (await supabase.from("historyitems").select().eq("trackingtrip",elementId)).data || []
  }*/
}

setup()



const addHistoryItemData = ref({
  text: "",
  config: {
    type: type,
    id: elementId
  }
})

const addHistoryItem = async () => {
  console.log(addHistoryItemData.value)
  addHistoryItemData.value.createdBy = profileStore.activeProfile.id

  addHistoryItemData.value[type] = elementId

  const {data,error} = await supabase
      .from("historyitems")
      .insert([{...addHistoryItemData.value, tenant: profileStore.currentTenant}])
      .select()

  if(error) {
    console.log(error)
  } else {
    if(addHistoryItemData.value.text.includes("@")){
      let usernames = [...addHistoryItemData.value.text.matchAll(/@(\S*)/gm)]

      const {data:profiles} = await supabase.from("profiles").select("id,username")

      let notifications = usernames.map(i => {
        let rawUsername = i[1]

        return {
          tenant: profileStore.currentTenant,
          profile: profiles.find(x => x.username === rawUsername).id,
          initiatingProfile: profileStore.activeProfile.id,
          title: "Sie wurden im Logbuch erwähnt",
          link: `/${type}s/show/${elementId}`,
          message: addHistoryItemData.value.text
        }
      })

      console.log(notifications)

      const {error} = await supabase.from("notifications").insert(notifications)
    }

    addHistoryItemData.value = {}
    toast.add({title: "Eintrag erfolgreich erstellt"})
    showAddHistoryItemModal.value = false
    await setup()
  }

}

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"
        />
<!-- TODO: Add Dropdown and Checking for Usernames  -->
<!--        <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=""><span class="text-xl">Logbuch</span> <UBadge variant="outline">{{items.length}}</UBadge></p>
      <UButton
          @click="showAddHistoryItemModal = true"
      >
        + Eintrag
      </UButton>
    </div>
    <UDivider class="my-3"/>
  </div>

  <!-- ITEM LIST  -->
  <div style="height: 90%; overflow-y: scroll">
    <div
        v-if="items.length > 0"
        v-for="(item,index) in items.slice().reverse()"
    >
      <UDivider
          class="my-3"
          v-if="index !== 0"
      />
      <div class="flex items-center gap-3">
        <UAvatar
            v-if="!item.createdBy"
            :src="colorMode.value === 'light' ? '/Logo.png' : '/Logo_Dark.png' "
        />
        <UAvatar
            :alt="profileStore.getProfileById(item.createdBy).fullName"
            v-else
        />
        <div>
          <h3 v-if="item.createdBy">{{profileStore.getProfileById(item.createdBy) ? profileStore.getProfileById(item.createdBy).fullName : ""}}</h3>
          <h3 v-else>FEDEO 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>
  </div>



</template>

<style scoped>

</style>