Changes in Props

components/HistoryDisplay.vue

@@ -2,21 +2,21 @@
 import dayjs from "dayjs"
 const props = defineProps({
   type: {
-    type: String
+    type: String,
+    required: true
   },
   elementId: {
-    type: String
+    type: String,
+    required: true
   },
   renderHeadline: {
-    type: Boolean
+    type: Boolean,
+    default: false
   }
 })
-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()
 
@@ -24,8 +24,8 @@ const items = ref([])
 
 const setup = async () => {
 
-  if(type && elementId){
-    items.value = (await supabase.from("historyitems").select().eq(type,elementId).order("created_at",{ascending: true})).data || []
+  if(props.type && props.elementId){
+    items.value = (await supabase.from("historyitems").select().eq(props.type,props.elementId).order("created_at",{ascending: true})).data || []
   } else {
     items.value = (await supabase.from("historyitems").select().order("created_at",{ascending: true})).data || []
 
@@ -39,8 +39,8 @@ setup()
 const addHistoryItemData = ref({
   text: "",
   config: {
-    type: type,
-    id: elementId
+    type: props.type,
+    id: props.elementId
   }
 })
 
@@ -48,7 +48,7 @@ const addHistoryItem = async () => {
   console.log(addHistoryItemData.value)
   addHistoryItemData.value.createdBy = profileStore.activeProfile.id
 
-  addHistoryItemData.value[type] = elementId
+  addHistoryItemData.value[props.type] = props.elementId
 
   const {data,error} = await supabase
       .from("historyitems")
@@ -71,7 +71,7 @@ const addHistoryItem = async () => {
           profile: profiles.find(x => x.username === rawUsername).id,
           initiatingProfile: profileStore.activeProfile.id,
           title: "Sie wurden im Logbuch erwähnt",
-          link: `/${type}s/show/${elementId}`,
+          link: `/${props.type}s/show/${props.elementId}`,
           message: addHistoryItemData.value.text
         }
       })
@@ -129,7 +129,7 @@ const renderText = (text) => {
     </UCard>
   </UModal>
   <Toolbar
-      v-if="!renderHeadline && elementId && type"
+      v-if="!props.renderHeadline && props.elementId && props.type"
   >
     <UButton
         @click="showAddHistoryItemModal = true"
@@ -137,7 +137,7 @@ const renderText = (text) => {
       + Eintrag
     </UButton>
   </Toolbar>
-  <div v-else-if="renderHeadline && elementId && type">
+  <div v-else-if="props.renderHeadline && props.elementId && props.type">
     <div :class="`flex justify-between`">
       <p class=""><span class="text-xl">Logbuch</span> <UBadge variant="outline">{{items.length}}</UBadge></p>
       <UButton