You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and dots ('.'), can be up to 35 characters long. Letters must be lowercase.
81 lines
2.5 KiB
81 lines
2.5 KiB
<script setup> |
|
import { Head, Link, useForm } from '@inertiajs/vue3'; |
|
import File from '@/file'; |
|
import GuestLayout from '@/Layouts/GuestLayout.vue'; |
|
import Dropzone from '@/Components/Dropzone.vue'; |
|
import TextInput from '@/Components/TextInput.vue'; |
|
import InputError from '@/Components/InputError.vue'; |
|
import { onMounted, reactive, ref } from 'vue'; |
|
|
|
const dropzone = ref(null); |
|
|
|
const imageState = reactive({ |
|
"url": "", |
|
}) |
|
|
|
const form = useForm({ |
|
name: "", |
|
path: "", |
|
}) |
|
|
|
const emits = defineEmits(["close"]); |
|
|
|
const imageAdded = (file) => { |
|
form.path = file.key; |
|
imageState.url = file.url; |
|
if(form.name === "") form.name = File.Basename(file.key).split("_")[1]; |
|
} |
|
|
|
const imageRemoved = (file) => { |
|
form.path = ""; |
|
} |
|
|
|
const submit = () => { |
|
form.post("/photo", { |
|
headers: { |
|
"Content-Type": "application/json", |
|
"X-CSRF-Token": document.querySelector('input[name=_token]').value, |
|
}, |
|
}); |
|
|
|
imageState.url = ""; |
|
form.path = ""; |
|
form.name = ""; |
|
dropzone.value.removeFiles(); |
|
emits("close"); |
|
} |
|
</script> |
|
|
|
<template> |
|
<div class="text-left text-black w-[30rem] shadow-lg shadow-gray-400 rounded-lg bg-gray-50 overflow-hidden |
|
border border-gray-300"> |
|
<div v-if="imageState.url" class="max-h-72 overflow-hidden flex items-center"> |
|
<img :src="imageState.url"> |
|
</div> |
|
<div class="px-10 pb-5 pt-5"> |
|
<div @click="() => emits('close')" class="w-full flex justify-end "> |
|
<img src="/icons/cancel.svg" class="h-5"> |
|
</div> |
|
<form @submit.prevent="submit"> |
|
<p>Fichier image</p> |
|
<Dropzone |
|
ref="dropzone" |
|
@file-added="imageAdded" |
|
@file-removed="imageRemoved" |
|
:name="photos" |
|
:empty="'Téléversé une image'" |
|
:multiple="false" |
|
:accept="'image/*'" |
|
:class="'mb-1'" |
|
/> |
|
<InputError :message="form.errors.path"/> |
|
<p class="mt-3">Nom</p> |
|
<TextInput :class="'mb-1 w-full'" v-model="form.name" required :placeholder="'Nom de la photo'"/> |
|
<InputError :message="form.errors.name"/> |
|
<div class="w-full flex justify-end mt-3"> |
|
<button type="submit" class="text-white font-semibold p-1 px-2 bg-primary rounded-md">Ajouter</button> |
|
</div> |
|
</form> |
|
</div> |
|
</div> |
|
</template> |