Add content creation

src/views/contents/PostContent.vue

@@ -0,0 +1,106 @@
+<template>
+
+  <div class="flex flex-column">
+
+    <div class="h-full bg-yellow p-2 rounded-2xl m-4">
+      <post-content-menu></post-content-menu>
+    </div>
+
+    <div class="flex flex-column m-4 gap-4">
+      <v-form>
+        <v-file-input
+            v-model="selectedFile"
+            label="Select Image"
+            accept="image/*"
+            prepend-icon="mdi-camera"
+            @change="onFileSelected">
+        </v-file-input>
+        
+        <v-img
+            v-if="url"
+            :src="url"
+            max-height="375"
+            contain
+        ></v-img>
+        
+        <v-text-field
+            v-model="title"
+            density="comfortable"
+            variant="outlined"
+            label="Titre"
+            hide-details
+            clearable>
+        </v-text-field>
+
+        <v-text-field
+            v-model="description"
+            density="comfortable"
+            variant="outlined"
+            label="Description"
+            hide-details
+            clearable>
+        </v-text-field>
+
+      </v-form>
+
+    </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';
+import PostContentMenu from "@/views/contents/PostContentMenu.vue";
+
+const props = defineProps({
+  contentId: {
+    type: String,
+    required: true
+  }
+});
+
+const client = useClient();
+
+const selectedFile = ref("");
+const url = ref("");
+const title = ref("");
+const description = ref("");
+
+const onFileSelected = () => {
+  if (selectedFile.value) {
+    const fileReader = new FileReader();
+    fileReader.readAsDataURL(selectedFile.value);
+    fileReader.onload = () => {
+      url.value = fileReader.result;
+    };
+  }
+};
+
+const publish = async () => {
+  const response = await client.post(
+      `/api/contents/`,
+      {
+        "url": url.value,
+        "title": title.value,
+        "description": description.value
+      })
+
+  if (response.status !== 200) {
+    console.info(`Content created!`)
+  } else {
+    console.error(`Failed to create content ${response.data}`)
+  }
+
+}
+
+
+</script>