139 lines
2.9 KiB
Vue
139 lines
2.9 KiB
Vue
<script setup>
|
|
import * as dayjs from "dayjs"
|
|
const props = defineProps({
|
|
type: {
|
|
required: true,
|
|
type: String
|
|
},
|
|
elementId: {
|
|
required: true,
|
|
type: String
|
|
}
|
|
})
|
|
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.getHistoryItemsByCustomer(elementId)
|
|
} else if(type === "vendor") {
|
|
items = dataStore.getHistoryItemsByVendor(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 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"
|
|
/>
|
|
</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="dataStore.profiles.find(profile => profile.id === item.user).fullName"
|
|
v-else
|
|
/>
|
|
<div>
|
|
<h3 v-if="item.user">{{dataStore.profiles.find(profile => profile.id === item.user) ? dataStore.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> |