201 lines
6 KiB
Vue
201 lines
6 KiB
Vue
<template>
|
|
<div
|
|
class="flex flex-col items-start | bg-grey-50 | rounded-2xl | w-full | p-8"
|
|
>
|
|
<Accordion
|
|
value="0"
|
|
class="flex flex-col | w-full"
|
|
style="--row-gap: var(--space-8)"
|
|
>
|
|
<AccordionPanel
|
|
v-for="(image, index) in activeTab.selectedImages"
|
|
:key="index + 1"
|
|
:value="index"
|
|
class="w-full | bg-white | rounded-xl | p-12 pt-8"
|
|
>
|
|
<AccordionHeader>
|
|
<span class="badge">{{ index + 1 }}</span>
|
|
</AccordionHeader>
|
|
<AccordionContent>
|
|
<div class="image-details__description | my-16">
|
|
<label
|
|
for="image-description"
|
|
class="flex | text-sm text-grey-700 | mb-8"
|
|
>Description</label
|
|
>
|
|
<textarea
|
|
name="image-description"
|
|
id="image-description"
|
|
placeholder="Ajoutez une description à cette image…"
|
|
rows="3"
|
|
class="border border-grey-200 | rounded-xl | p-16 | w-full"
|
|
v-model="image.description"
|
|
></textarea>
|
|
</div>
|
|
<fieldset class="image-details__filters | flex-1">
|
|
<legend class="text-sm text-grey-700 | mb-8">
|
|
Sélectionner un ou plusieurs tags
|
|
</legend>
|
|
<div class="flex" style="gap: var(--space-8)">
|
|
<template v-for="tag in page.tags" :key="tag">
|
|
<input
|
|
class="sr-only"
|
|
type="checkbox"
|
|
:id="`${tag}-image-edit`"
|
|
:name="`${tag}-image-edit`"
|
|
:value="`${tag}`"
|
|
v-model="image.tags"
|
|
/>
|
|
<label
|
|
class="btn btn--sm btn--primary"
|
|
:for="`${tag}-image-edit`"
|
|
>{{ StringUtils.toPascalCase(tag) }}</label
|
|
>
|
|
</template>
|
|
</div>
|
|
</fieldset>
|
|
</AccordionContent>
|
|
</AccordionPanel>
|
|
<template #collapseicon>
|
|
<svg
|
|
aria-hidden="true"
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 20 20"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
style="transform: rotate(180deg)"
|
|
>
|
|
<path
|
|
d="M1.875 6.0625L9.5625 13.75C9.61861 13.8098 9.68638 13.8574 9.76163 13.89C9.83688 13.9226 9.918 13.9394 10 13.9394C10.082 13.9394 10.1631 13.9226 10.2384 13.89C10.3136 13.8574 10.3814 13.8098 10.4375 13.75L18.125 6.0625"
|
|
stroke="#5E6060"
|
|
stroke-width="1.25"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
</svg>
|
|
</template>
|
|
<template #expandicon>
|
|
<svg
|
|
aria-hidden="true"
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 20 20"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M1.875 6.0625L9.5625 13.75C9.61861 13.8098 9.68638 13.8574 9.76163 13.89C9.83688 13.9226 9.918 13.9394 10 13.9394C10.082 13.9394 10.1631 13.9226 10.2384 13.89C10.3136 13.8574 10.3814 13.8098 10.4375 13.75L18.125 6.0625"
|
|
stroke="#5E6060"
|
|
stroke-width="1.25"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
</svg>
|
|
</template>
|
|
</Accordion>
|
|
<button class="btn | w-full | mt-auto" @click="addImagesToBrief()">
|
|
Ajouter les images sélectionnées
|
|
</button>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import Accordion from "primevue/accordion";
|
|
import AccordionPanel from "primevue/accordionpanel";
|
|
import AccordionHeader from "primevue/accordionheader";
|
|
import AccordionContent from "primevue/accordioncontent";
|
|
import { usePageStore } from "../../../../stores/page";
|
|
import StringUtils from "../../../../utils/string";
|
|
import { storeToRefs } from "pinia";
|
|
import { useAddImagesModalStore } from "../../../../stores/addImagesModal";
|
|
|
|
const { page } = storeToRefs(usePageStore());
|
|
|
|
const { activeTab } = storeToRefs(useAddImagesModalStore());
|
|
|
|
// 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);
|
|
// })
|
|
// .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,
|
|
})
|
|
.then((res) => res.json())
|
|
.then((json) => (page.value.images = json.images))
|
|
.catch((error) => console.error("Error:", error));
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
/* Accordion */
|
|
[data-pc-name="accordionheader"] {
|
|
height: var(--space-40);
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
</style>
|