Adds messages

src/views/messages/CreatePost.vue

@@ -0,0 +1,61 @@
+<template>
+
+  <div class="flex flex-column">
+
+    <div class="flex flex-row">
+
+      <div class="px-1 content-center">
+        <img src="/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png"
+             alt="Profile Image"
+             class="rounded-full"
+             width="32px"
+             height="32px">
+      </div>
+
+      <v-text-field
+          v-model="message"
+          density="compact"
+          variant="solo-inverted"
+          placeholder="Votre commentaire..."
+          hide-details
+          clearable>
+      </v-text-field>
+
+    </div>
+
+    <div class="flex flex-row gap-2 p-2 justify-end">
+      <v-btn style="border-radius: 20px" variant="text">Canceller</v-btn>
+      <v-btn style="border-radius: 20px" @click="publish">Publier</v-btn>
+    </div>
+
+  </div>
+
+</template>
+
+<script setup>
+// import posts from "@/views/posts/posts.json";
+
+import {useClient} from '@/plugins/api.js';
+import {defineProps, ref} from 'vue';
+
+const props = defineProps({
+  contentId: {
+    type: String,
+    required: true
+  }
+});
+
+const client = useClient();
+const message = ref("");
+
+const publish = async () => {
+  await client.post(
+      `/api/messages/`,
+      {
+        "contentId": props.contentId,
+        "message": message.value
+      });
+}
+
+
+</script>

src/views/messages/Message.vue

@@ -0,0 +1,65 @@
+<template>
+
+  <div class="flex flex-column">
+
+    <div class="flex flex-row p-1">
+
+      <div class="px-2 content-center">
+        <img :src="message.portrait"
+             alt="Profile Image"
+             class="rounded-full"
+             width="32px"
+             height="32px">
+      </div>
+
+      <div class="p-2">
+
+        <div>
+          <span class="font-semibold font-sans mr-2">{{ message.created_by }}</span>
+          <span class="text-sm font-sans text-gray-700">il y a 3 heures</span>
+        </div>
+
+        <div class="font-sans">
+          {{ message.value }}
+        </div>
+
+        <div class="flex px-4">
+
+          <div>
+            <v-icon>mdi-thumb-up-outline</v-icon>
+            {{ message.thumb_up_count }}
+          </div>
+
+          <div>
+            <v-icon>mdi-thumb-down-outline</v-icon>
+            {{ message.thumb_down_count }}
+          </div>
+
+          <div>
+            <v-btn variant="flat">Reply</v-btn>
+          </div>
+        </div>
+
+      </div>
+
+    </div>
+
+  </div>
+
+</template>
+
+<script setup>
+
+import {defineProps} from 'vue';
+
+defineProps({
+  message: {
+    type: Object,
+    required: true
+  }
+});
+
+</script>
+
+
+

src/views/messages/PostList.vue

@@ -0,0 +1,36 @@
+<template>
+
+  <div v-for="(message, index) in messages" :key="index">
+    <Message :message="message"></Message>
+  </div>
+
+</template>
+
+<script setup>
+
+import Message from "@/views/messages/Message.vue";
+// import posts from "@/views/posts/posts.json";
+
+import {useClient} from '@/plugins/api.js';
+import {defineProps, onBeforeMount, ref} from 'vue';
+
+const props = defineProps({
+  contentId: {
+    type: String,
+    required: true
+  }
+});
+
+const client = useClient();
+const messages = ref();
+
+onBeforeMount(async () => {
+  try {
+    const response = await client.get(`/api/messages/${props.contentId}`)
+    messages.value = response.data
+  } catch (error) {
+    console.error("Failed to fetch posts", error);
+  }
+})
+
+</script>

src/views/messages/posts.json

@@ -0,0 +1,29 @@
+[
+  {
+    "content": "40C28A05-2262-43F4-862A-09A4246A8DDE",
+    "portrait": "/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png",
+    "created_by": "@marchy",
+    "created_at": "",
+    "message": "Hello World!",
+    "thumb_up_count": 0,
+    "thumb_down_count": 0
+  },
+  {
+    "content": "40C28A05-2262-43F4-862A-09A4246A8DDE",
+    "portrait": "/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png",
+    "created_by": "@marchy",
+    "created_at": "",
+    "message": "Welcome to life!",
+    "thumb_up_count": 0,
+    "thumb_down_count": 3
+  },
+  {
+    "content": "40C28A05-2262-43F4-862A-09A4246A8DDE",
+    "portrait": "/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png",
+    "created_by": "@marchy",
+    "created_at": "",
+    "message": "We love you!",
+    "thumb_up_count": 1,
+    "thumb_down_count": 0
+  }
+]