Add content creation

src/views/contents/ContentPage.vue

@@ -0,0 +1,74 @@
+<template>
+
+  <div class="flex flex-column w-full">
+
+    <div class="border-b-2 p-6 font-sans space-y-2">
+      <div v-if="data && data.uri">
+        Uri: {{ data?.uri }}
+      </div>
+      <div v-if="data && data.title" class="font-semibold">
+        Title: {{ data?.title }}
+      </div>
+      <div v-if="data && data.description">
+        Description: {{ data?.description }}
+      </div>
+      <div v-if="data && data.createdAt">
+        Date: {{ data?.createdAt }}
+      </div>
+      <div v-if="data && data.createdBy">
+        Creator: {{ data?.createdBy }}
+      </div>
+    </div>
+
+    <div class="border-b-2 p-6">
+      <PostMessage :content-id="contentId">
+      </PostMessage>
+    </div>
+
+    <div class="border-b-2 p-6">
+      <h2 class="font-sans font-semibold">Commentaires</h2>
+      <MessageList :content-id="contentId">
+      </MessageList>
+    </div>
+
+  </div>
+
+</template>
+
+<script setup async>
+import PostMessage from "@/views/messages/PostMessage.vue";
+import MessageList from "@/views/messages/MessageList.vue";
+import {useClient} from "@/plugins/api.js";
+import {onMounted, watch, ref, computed} from 'vue';
+import {useRoute} from 'vue-router';
+
+const data = ref()
+
+const route = useRoute()
+const client = useClient()
+
+const contentId = computed(() => {
+  return route.params.contentId;
+});
+
+const fetchContentData = async (contentId) => {
+  try {
+    const response = await client.get(`/api/contents/${contentId}`)
+    data.value = response.data
+  } catch (error) {
+    console.error(`Error fetching content: ${error}`)
+  }
+}
+
+onMounted(() => {
+  fetchContentData(contentId.value);
+});
+
+watch(contentId, (newContentId) => {
+  fetchContentData(newContentId);
+});
+
+</script>
+  
+  
+