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!`)

src/views/creators/CreatePostButton.vue

@@ -1,80 +0,0 @@
-<template>
-  <div>
-    <button v-if="creator.id === userStore.getCurrentUser().id"
-            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">
-      <template v-slot:default="{ isActive }">
-        <v-card class="text-center rounded-xl">
-          <div class="text-white p-4 rounded-t" :style="{backgroundColor: creator.profileColors.menu || '#A30E79'}">
-            <h2>Publication</h2>
-          </div>
-          <v-card-text class="bg">
-            <v-row class="justify-center mb-4">
-              <v-col class="d-flex align-center justify-end">
-                <v-btn :class="{'v-btn--active': !isArticle}" @click="togglePostType(false)">QUICKY</v-btn>
-              </v-col>
-              <v-col class="d-flex align-center justify-start">
-                <v-btn :class="{'v-btn--active': isArticle}" @click="togglePostType(true)">ARTICLE</v-btn>
-              </v-col>
-            </v-row>
-            <v-textarea label="Écrivez votre message ici..." v-model="message" outlined></v-textarea>
-            <v-file-input
-                label="Ajoutez des fichiers"
-                v-model="files"
-                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="primary" @click="publishPost">Publier</v-btn>
-            <v-btn color="primary" @click="cancelPost">Annuler</v-btn>
-          </v-card-actions>
-        </v-card>
-      </template>
-    </v-dialog>
-  </div>
-</template>
-
-<script setup>
-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 message = ref('');
-const files = ref([]);
-const isArticle = ref(false);
-
-const publishPost = () => {
-  // Logic to publish post
-  console.log('Post published:', message.value, files.value);
-  isDialogActive.value = false;
-  resetPostForm();
-};
-
-const cancelPost = () => {
-  isDialogActive.value = false;
-  resetPostForm();
-};
-
-const resetPostForm = () => {
-  message.value = '';
-  files.value = [];
-};
-
-const togglePostType = (article) => {
-  isArticle.value = article;
-};
-</script>
-

src/views/creators/CreatorBanner.vue

@@ -81,7 +81,7 @@
 </template>
 
 <script setup>
-import CreatePostButton from "@/views/creators/CreatePostButton.vue";
+import CreatePostButton from "@/views/contents/CreatePostButton.vue";
 import {defineProps, ref} from "vue";
 import SeizeIndicator from "@/views/tools/SeizeIndicator.vue";
 import AboutYou from "@/views/creators/AboutYou.vue";

src/views/creators/CreatorPage.vue

@@ -4,38 +4,10 @@
     <creator-banner :creator="creator"></creator-banner>
     <DonationPopup :creator-id="creator.id"></DonationPopup>
 
-    <div class="max-w-[1000px] mx-auto flex flex-row justify-center border-l-2 border-r-2 -mt-6 ">
-      <div class="w-full mt-20">      
-              
-        <v-card-text>
-          <v-tabs-window v-model="tab">
-            <v-tabs-window-item value="content">
-              <div class="w-full h-full p-6">
-                <ContentList v-if="creator.id"
-                             :creator-id="creator.id">
-                </ContentList>
-              </div>
-            </v-tabs-window-item>
-
-            <v-tabs-window-item value="community">
-              <div>
-                <div class="border-b-2 p-6">
-                  <PostMessage v-if="creator.id"
-                               :content-id="creator.id">
-                  </PostMessage>
-                </div>
-
-                <div class="border-b p-6">
-                  <h2 class="font-sans font-semibold">Commentaires</h2>
-                  <MessageList v-if="creator.id"
-                               :content-id="creator.id">
-                  </MessageList>
-                </div>
-              </div>
-            </v-tabs-window-item>
-
-          </v-tabs-window>
-        </v-card-text>
+    <div class="max-w-[800px] mx-auto flex flex-row justify-center border-l-2 border-r-2 -mt-6 ">
+      <div class="w-full mt-20 h-full">
+        <ContentList :creator-id="creator.id">
+        </ContentList>
       </div>
     </div>
 
@@ -66,8 +38,6 @@ import MessageList from "@/views/messages/MessageList.vue";
 import ContentList from "@/views/contents/ContentList.vue";
 import PostMessage from "@/views/messages/PostMessage.vue";
 import DonationPopup from "@/views/main/DonationPopup.vue";
-import CreatorFeed from "@/views/main/CreatorFeed.vue";
-import CreatePostButton from "@/views/creators/CreatePostButton.vue";
 
 const client = useClient();
 const route = useRoute();

src/views/documentation/About.vue

@@ -189,8 +189,4 @@
 
   </div>
 
-</template>
-
-<style>
-@import 'src/cssstyle/documentation.css';
-</style>
+</template>

src/views/messages/Message.vue

@@ -15,7 +15,7 @@
             <span class="font-semibold font-sans mr-2">{{ message.createdBy }}</span>
             <span class="text-sm font-sans text-gray-700">il y a 3 heures</span>
           </div>
-          <v-menu :location="location">
+          <v-menu>
             <template v-slot:activator="{ props }">
               <v-btn variant="plain" icon v-bind="props">
                 <v-icon>mdi-dots-vertical</v-icon>

src/views/messages/PostMessage.vue

@@ -25,7 +25,7 @@
 
     <div class="flex flex-row gap-2 p-2 justify-end">
       <v-btn style="border-radius: 20px" variant="text">Annuler</v-btn>
-      <v-btn style="border-radius: 20px" @click="publish">Ajouter un commentaire</v-btn>
+      <v-btn style="border-radius: 20px" @click="publish">Commenter</v-btn>
     </div>
 
   </div>