send blob ok
This commit is contained in:
isUnknown
parent
8c19269e48
commit
ef2eeafa8d
20 changed files with 171 additions and 221 deletions
|
|
@ -24,9 +24,16 @@
|
|||
style="--sidebar-width: 26rem; gap: var(--gap)"
|
||||
>
|
||||
<div class="bg-grey-50 | rounded-2xl | p-8 | overflow-y">
|
||||
<component :is="activeTab.component" :params="activeTab.params" />
|
||||
<template v-for="tab in tabs" :key="tab.name">
|
||||
<component
|
||||
@add-images="addImages"
|
||||
:is="tab.component"
|
||||
:params="tab.params ? tab.params : {}"
|
||||
:class="{ hidden: activeTab.name !== tab.name }"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
<ImagesEditPanel />
|
||||
<ImagesEditPanel :images="images" />
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
|
|
@ -39,21 +46,14 @@
|
|||
style="--row-gap: var(--space-32); --max-w: 40rem"
|
||||
>
|
||||
<p class="text-grey-700 | px-16">
|
||||
Si vous supprimez cette image, celle-ci disparaîtra de votre brief ainsi que toutes les informations qui lui sont attribuées.
|
||||
Si vous supprimez cette image, celle-ci disparaîtra de votre brief ainsi
|
||||
que toutes les informations qui lui sont attribuées.
|
||||
</p>
|
||||
<template #footer>
|
||||
<button
|
||||
class="btn btn--secondary | flex-1"
|
||||
@click="deleteIsOpen = false"
|
||||
>
|
||||
<button class="btn btn--secondary | flex-1" @click="deleteIsOpen = false">
|
||||
Annuler
|
||||
</button>
|
||||
<button
|
||||
class="btn | flex-1"
|
||||
@click=""
|
||||
>
|
||||
Supprimer
|
||||
</button>
|
||||
<button class="btn | flex-1" @click="">Supprimer</button>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
|
@ -63,7 +63,6 @@ import Dialog from "primevue/dialog";
|
|||
import ImagesResources from "./ImagesResources.vue";
|
||||
import ImagesEditPanel from "./ImagesEditPanel.vue";
|
||||
import MyImages from "./MyImages.vue";
|
||||
import { usePageStore } from "../../../../stores/page";
|
||||
import { ref, watch } from "vue";
|
||||
|
||||
const { isAddImagesModalOpen } = defineProps({
|
||||
|
|
@ -76,12 +75,15 @@ watch(isOpen, (newValue) => {
|
|||
emit("close");
|
||||
});
|
||||
|
||||
const images = ref([]);
|
||||
|
||||
const deleteIsOpen = false;
|
||||
|
||||
const tabs = [
|
||||
{
|
||||
name: "Mes images",
|
||||
component: MyImages,
|
||||
params: false,
|
||||
},
|
||||
{
|
||||
name: "Matériauthèque",
|
||||
|
|
@ -100,10 +102,17 @@ const tabs = [
|
|||
{
|
||||
name: "Inspirations",
|
||||
component: ImagesResources,
|
||||
params: false,
|
||||
},
|
||||
];
|
||||
|
||||
const activeTab = ref(tabs[0]);
|
||||
|
||||
function addImages(newImages) {
|
||||
console.log(newImages);
|
||||
images.value = images.value.concat(newImages);
|
||||
console.log(images.value);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
style="--row-gap: var(--space-8)"
|
||||
>
|
||||
<AccordionPanel
|
||||
v-for="(image, index) in page.images"
|
||||
v-for="(image, index) in images"
|
||||
:key="index + 1"
|
||||
:value="index"
|
||||
class="w-full | bg-white | rounded-xl | p-12 pt-8"
|
||||
|
|
@ -30,7 +30,6 @@
|
|||
rows="3"
|
||||
class="border border-grey-200 | rounded-xl | p-16 | w-full"
|
||||
v-model="image.description"
|
||||
@input="saveDescription(image)"
|
||||
></textarea>
|
||||
</div>
|
||||
<fieldset class="image-details__filters | flex-1">
|
||||
|
|
@ -45,7 +44,6 @@
|
|||
:id="`${tag}-image-edit`"
|
||||
:name="`${tag}-image-edit`"
|
||||
:value="`${tag}`"
|
||||
@change="saveTags(image)"
|
||||
v-model="image.tags"
|
||||
/>
|
||||
<label
|
||||
|
|
@ -96,7 +94,7 @@
|
|||
</svg>
|
||||
</template>
|
||||
</Accordion>
|
||||
<button class="btn | w-full | mt-auto">
|
||||
<button class="btn | w-full | mt-auto" @click="addImagesToBrief()">
|
||||
Ajouter les images sélectionnées
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -108,58 +106,88 @@ import AccordionHeader from "primevue/accordionheader";
|
|||
import AccordionContent from "primevue/accordioncontent";
|
||||
import { usePageStore } from "../../../../stores/page";
|
||||
import { toPascalCase } from "../../../../helpers";
|
||||
import debounce from "lodash/debounce";
|
||||
import { storeToRefs } from "pinia";
|
||||
|
||||
const { images } = defineProps({
|
||||
images: Object,
|
||||
});
|
||||
|
||||
const { page } = storeToRefs(usePageStore());
|
||||
|
||||
function saveTags(image) {
|
||||
const headers = {
|
||||
method: "POST",
|
||||
body: JSON.stringify({
|
||||
pageUri: page.value.uri,
|
||||
fileName: image.name,
|
||||
properties: [
|
||||
{
|
||||
name: "tags",
|
||||
value: image.tags,
|
||||
},
|
||||
],
|
||||
}),
|
||||
};
|
||||
fetch("/save-file.json", headers)
|
||||
.then((res) => res.json())
|
||||
.then((json) => {
|
||||
console.log(json);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Erreur lors de la sauvegarde :", error);
|
||||
});
|
||||
}
|
||||
// function saveTags(image) {
|
||||
// const headers = {
|
||||
// method: "POST",
|
||||
// body: JSON.stringify({
|
||||
// pageUri: page.value.uri,
|
||||
// fileName: image.name,
|
||||
// properties: [
|
||||
// {
|
||||
// name: "tags",
|
||||
// value: image.tags,
|
||||
// },
|
||||
// ],
|
||||
// }),
|
||||
// };
|
||||
// fetch("/save-file.json", headers)
|
||||
// .then((res) => res.json())
|
||||
// .then((json) => {
|
||||
// console.log(json);
|
||||
// })
|
||||
// .catch((error) => {
|
||||
// console.error("Erreur lors de la sauvegarde :", error);
|
||||
// });
|
||||
// }
|
||||
|
||||
const saveDescription = debounce((image) => {
|
||||
const headers = {
|
||||
method: "POST",
|
||||
body: JSON.stringify({
|
||||
pageUri: page.value.uri,
|
||||
fileName: image.name,
|
||||
properties: [
|
||||
{
|
||||
name: "description",
|
||||
value: image.description,
|
||||
},
|
||||
],
|
||||
}),
|
||||
};
|
||||
fetch("/save-file.json", headers)
|
||||
.then((res) => res.json())
|
||||
.then((json) => {
|
||||
console.log(json);
|
||||
// const saveDescription = debounce((image) => {
|
||||
// const headers = {
|
||||
// method: "POST",
|
||||
// body: JSON.stringify({
|
||||
// pageUri: page.value.uri,
|
||||
// fileName: image.name,
|
||||
// properties: [
|
||||
// {
|
||||
// name: "description",
|
||||
// value: image.description,
|
||||
// },
|
||||
// ],
|
||||
// }),
|
||||
// };
|
||||
// fetch("/save-file.json", headers)
|
||||
// .then((res) => res.json())
|
||||
// .then((json) => {
|
||||
// console.log(json);
|
||||
// })
|
||||
// .catch((error) => {
|
||||
// console.error("Erreur lors de la sauvegarde :", error);
|
||||
// });
|
||||
// }, 1000);
|
||||
|
||||
function addImagesToBrief() {
|
||||
const formData = new FormData();
|
||||
|
||||
const blobPromises = images.map((item) => {
|
||||
if (item.url.startsWith("blob:")) {
|
||||
return fetch(item.url)
|
||||
.then((response) => response.blob())
|
||||
.then((blob) => {
|
||||
formData.append("images[]", blob, item.name);
|
||||
});
|
||||
} else {
|
||||
formData.append("imageUris[]", item.url);
|
||||
return Promise.resolve();
|
||||
}
|
||||
});
|
||||
|
||||
Promise.all(blobPromises).then(() => {
|
||||
fetch("/upload-images.json?pageUri=" + page.value.uri, {
|
||||
method: "POST",
|
||||
body: formData,
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Erreur lors de la sauvegarde :", error);
|
||||
});
|
||||
}, 1000);
|
||||
.then((res) => res.json())
|
||||
.then((json) => console.log(json))
|
||||
.catch((error) => console.error("Error:", error));
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="auto-grid" style="--min: 15rem; --gap: 0.5rem">
|
||||
<figure v-for="image in images" class="image">
|
||||
<figure v-for="image in images" class="image" @click="addImage(image)">
|
||||
<img :src="image.url" alt="" />
|
||||
</figure>
|
||||
</div>
|
||||
|
|
@ -13,6 +13,7 @@ import { useApiStore } from "../../../../stores/api";
|
|||
const { params } = defineProps({
|
||||
params: Object,
|
||||
});
|
||||
const emit = defineEmits(["add-images"]);
|
||||
|
||||
const api = useApiStore();
|
||||
const images = ref([]);
|
||||
|
|
@ -20,4 +21,8 @@ const images = ref([]);
|
|||
api
|
||||
.fetchPageData(params.targetPage)
|
||||
.then((json) => (images.value = json.images));
|
||||
|
||||
function addImage(image) {
|
||||
emit("add-images", [image]);
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -3,8 +3,7 @@
|
|||
<FileUpload
|
||||
mode="basic"
|
||||
name="images[]"
|
||||
:url="'/upload-images.json?pageUri=' + page.uri"
|
||||
@upload="onAdvancedUpload($event)"
|
||||
@change="addImages($event)"
|
||||
:auto="true"
|
||||
:multiple="true"
|
||||
accept="image/*"
|
||||
|
|
@ -12,6 +11,7 @@
|
|||
invalidFileSizeMessage="Fichier trop lourd"
|
||||
chooseLabel="Ajouter une ou plusieurs images"
|
||||
class="flex flex-col justify-center | bg-white | border border-grey-200 | text-grey-800 | font-medium | rounded-xl"
|
||||
ref="uploadBtn"
|
||||
>
|
||||
<template #chooseicon>
|
||||
<svg
|
||||
|
|
@ -41,7 +41,7 @@
|
|||
<div v-if="files.length > 0">Fichiers importés</div>
|
||||
</template>
|
||||
</FileUpload>
|
||||
<figure v-for="image in page.images" class="image">
|
||||
<figure v-for="image in images" class="image">
|
||||
<img :src="image.url" alt="" />
|
||||
</figure>
|
||||
<Toast />
|
||||
|
|
@ -54,29 +54,48 @@ import Toast from "primevue/toast";
|
|||
import { useToast } from "primevue/usetoast";
|
||||
import FileUpload from "primevue/fileupload";
|
||||
import { storeToRefs } from "pinia";
|
||||
import { ref } from "vue";
|
||||
|
||||
const { page } = storeToRefs(usePageStore());
|
||||
const toast = useToast();
|
||||
|
||||
function onAdvancedUpload(event) {
|
||||
if (event.xhr.status === 200) {
|
||||
toast.add({
|
||||
severity: "success",
|
||||
summary: "Upload réussi",
|
||||
detail: event.xhr.response.success,
|
||||
life: 3000,
|
||||
});
|
||||
const response = JSON.parse(event.xhr.response);
|
||||
console.log(response);
|
||||
page.value.images = response.images;
|
||||
} else {
|
||||
toast.add({
|
||||
severity: "error",
|
||||
summary: "Échec de l'upload",
|
||||
detail: event.xhr.response.error,
|
||||
life: 3000,
|
||||
});
|
||||
console.error(JSON.parse(event.xhr.response));
|
||||
}
|
||||
const emit = defineEmits(["add-images"]);
|
||||
const uploadBtn = ref(null);
|
||||
|
||||
const images = ref([]);
|
||||
|
||||
function addImages(event) {
|
||||
const newImages = uploadBtn.value.files.map((file) => {
|
||||
return {
|
||||
url: URL.createObjectURL(file),
|
||||
description: "",
|
||||
tags: [],
|
||||
name: file.name,
|
||||
};
|
||||
});
|
||||
images.value = images.value.concat(newImages);
|
||||
emit("add-images", newImages);
|
||||
}
|
||||
|
||||
// function onAdvancedUpload(event) {
|
||||
// if (event.xhr.status === 200) {
|
||||
// toast.add({
|
||||
// severity: "success",
|
||||
// summary: "Upload réussi",
|
||||
// detail: event.xhr.response.success,
|
||||
// life: 3000,
|
||||
// });
|
||||
// const response = JSON.parse(event.xhr.response);
|
||||
// console.log(response);
|
||||
// emit("add-images", response.images);
|
||||
// } else {
|
||||
// toast.add({
|
||||
// severity: "error",
|
||||
// summary: "Échec de l'upload",
|
||||
// detail: event.xhr.response.error,
|
||||
// life: 3000,
|
||||
// });
|
||||
// console.error(JSON.parse(event.xhr.response));
|
||||
// }
|
||||
// }
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue