Adding messaging / content

src/views/contents/ContentCard.vue

@@ -1,9 +1,10 @@
 <template>
 
+  <div class="shadow-lg rounded-lg">
 
-  <div class=" shadow-lg rounded-lg max-w-sm">
-
-    <div class="h-48 object-cover bg-purple">
+    <div class="text-lg font-bold">{{ props.content.title }}</div>
+    
+    <div class="h-48 object-cover bg-purple rounded-md">
 
       <v-img :src="props.content.url"
              v-if="!isHttpUrl">
@@ -19,11 +20,33 @@
 
     </div>
 
-    <router-link :to="'content/' + props?.content?.id">
-    
-      <div class="text-lg font-bold">{{ props.content.title }}</div>
-      <div class="text-sm text-gray-500">{{ props.content.description }}</div>
-    </router-link>
+
+    <div class="flex flex-row">
+
+      <div>
+        <div class="text-sm text-gray-500">{{ props.content.description }}</div>
+      </div>
+
+      <div>
+        <router-link :to="'content/' + props?.content?.id">
+          <div class="bg-blue-500 rounded-lg py-1 px-2">Plus ...</div>
+        </router-link>
+      </div>
+
+    </div>
+
+    <div>
+
+      <div class="border-b p-6">
+        <h2 class="font-sans font-semibold">Commentaires</h2>
+        <MessageList :content-id="props.content.id">
+        </MessageList>
+      </div>
+      <div class="border-b-2 p-6">
+        <PostMessage :content-id="props.content.id">
+        </PostMessage>
+      </div>
+    </div>
 
   </div>
 
@@ -32,6 +55,8 @@
 <script setup>
 
 import {defineProps, computed} from 'vue';
+import MessageList from "@/views/messages/MessageList.vue";
+import PostMessage from "@/views/messages/PostMessage.vue";
 
 const isHttpUrl = computed(() => props.content?.uri?.startsWith('http'))
 

src/views/contents/ContentList.vue

@@ -1,18 +1,31 @@
 <template>
 
-  <div class="flex">
+  <v-infinite-scroll :items="contents"
+                     :onLoad="load"
+                     class="bg-teal justify-items-center">
+
     <ContentCard v-for="content in contents"
                  :content="content"
-                 class="m-2 bg-red w-full">
+                 class="my-2 p-4 bg-yellow-300 w-full"
+    >
     </ContentCard>
-  </div>
+
+    <template v-slot:empty>
+      Il n'y a pas plus de contenus
+    </template>
+
+    <template v-slot:error>
+      <v-alert type="error">{{ errorMessage }}</v-alert>
+    </template>
+
+  </v-infinite-scroll>
 
 </template>
 
 <script setup>
 
 import {useClient} from '@/plugins/api.js';
-import {defineProps, onBeforeMount, ref} from 'vue';
+import {defineProps, ref} from 'vue';
 import ContentCard from "./ContentCard.vue";
 
 const props = defineProps({
@@ -22,20 +35,41 @@ const props = defineProps({
   }
 });
 
-const client = useClient();
-const contents = ref();
+const client = useClient()
+const contents = ref([])
+const max_items = 10
+const errorMessage = ref()
+let last_id = null
 
-onBeforeMount(async () => {
-  if (props.creatorId == null) return
+async function load({done}) {
   try {
-    const response = await client.get(`/api/contents/user/${props.creatorId}`)
-    if (response.status >= 200 && response.status < 300) {      
-      contents.value = response.data
-      console.table(contents.value)
+    let uri = `/api/contents/user/${props.creatorId}?max_items=${max_items}`
+    if (last_id !== null) uri = uri + `&last_id=${last_id}`
+
+    console.log(`Fetching content at: ${uri}`)
+    const response = await client.get(uri)
+
+    if (response.status >= 200 && response.status < 300) {
+
+      contents.value.push(...response.data)
+      console.table(response.data)
+      
+      const [last_content] = response.data.slice(-1)
+      console.table(last_content)
+      
+      last_id = last_content.id
+      console.table(last_id)
+
+      if (response.data.length < max_items)
+        done('empty')
+      else
+        done('ok')
     }
   } catch (error) {
     console.error("Failed to fetch posts", error);
+    errorMessage.value = error
+    done('error')
   }
-})
+}
 
 </script>

src/views/contents/CreatePostButton.vue

@@ -0,0 +1,112 @@
+<template>
+
+  <div v-if="creator.id === userStore.getCurrentUser().id">
+
+    <button
+        class="flex items-center text-white transform transition-transform duration-200 hover:text-gray-300 hover:scale-125 px-4"
+        @click="isDialogActive = true">
+      <v-icon style="font-size: 35px; height: 35px; width: 55px;">mdi-text-box-plus-outline</v-icon>
+    </button>
+
+    <v-dialog v-model="isDialogActive" max-width="500">
+
+      <v-card class="text-center rounded-xl">
+
+        <v-card-title class="text-white p-4 rounded-t"
+                      :style="{backgroundColor: creator.profileColors.menu || '#A30E79'}">
+          Quicky
+        </v-card-title>
+
+
+        <v-card-text>
+
+          <v-text-field v-model="title"
+                        class="p-2"
+                        label="Titre"
+                        density="comfortable"
+                        variant="outlined"
+                        hide-details
+                        clearable>
+          </v-text-field>
+
+          <v-textarea v-model="message"
+                      label="Écrivez votre message ici..."
+                      class="p-2"
+                      density="comfortable"
+                      variant="outlined"
+                      hide-details
+                      clearable
+                      outlined>
+          </v-textarea>
+
+          <v-file-input v-model="files"
+                        label="Ajoutez des fichiers"
+                        class="p-2"
+                        outlined
+                        multiple
+                        dropzone
+                        placeholder="Glissez et déposez des fichiers ici ou cliquez pour sélectionner des fichiers"
+          ></v-file-input>
+
+        </v-card-text>
+
+        <v-card-actions class="justify-end">
+          <v-btn color="secondary" @click="cancelPost">Annuler</v-btn>
+          <v-btn color="primary" @click="publishPost">Publier</v-btn>
+        </v-card-actions>
+
+      </v-card>
+
+    </v-dialog>
+
+  </div>
+
+</template>
+
+<script setup>
+import {useClient} from '@/plugins/api.js';
+import {defineProps, ref} from 'vue';
+import {useUserStore} from '@/stores/user.js';
+
+const props = defineProps({
+  creator: {type: Object, required: true},
+});
+
+const userStore = useUserStore();
+
+const isDialogActive = ref(false);
+const title = ref('');
+const message = ref('');
+const files = ref([]);
+
+const client = useClient();
+
+const publishPost = async () => {
+
+  try {
+    await client.post(
+        `/api/contents/`,
+        {
+          "title": title.value,
+          "description": message.value
+        })
+
+    closeDialog()
+  } catch (error) {
+    console.error(error)
+  }
+}
+
+const cancelPost = () => {
+  closeDialog()
+}
+
+const closeDialog = () => {
+  isDialogActive.value = false
+  title.value = ''
+  message.value = ''
+  files.value = []
+}
+
+</script>
+

src/views/contents/PostContent.vue

@@ -92,7 +92,7 @@ const publish = async () => {
         "url": url.value,
         "title": title.value,
         "description": description.value
-      })
+      })  
 
   if (response.status !== 200) {
     console.info(`Content created!`)