Adding messaging / content

2024-07-18 20:50:15 -04:00
parent 17ba6449af
commit e71d02c45b
10 changed files with 201 additions and 144 deletions
--- a/src/views/contents/CreatePostButton.vue
+++ b/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>
+