105 lines
2.3 KiB
Vue
105 lines
2.3 KiB
Vue
<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="Choisisez votre contenu"
|
|
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 {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> |