155 lines
3.6 KiB
Vue
155 lines
3.6 KiB
Vue
<template>
|
|
<section class="h-full | flex flex-col" style="--row-gap: var(--space-32)">
|
|
<Header
|
|
:selectedTags="selectedTags"
|
|
@update:selectedTags="changeSelectedTags"
|
|
/>
|
|
<div class="h-full | masonry">
|
|
<button
|
|
data-icon="upload"
|
|
class="flex flex-col | bg-white | border border-grey-200 | text-grey-800 | font-medium | rounded-2xl"
|
|
@click="isAddImagesModalOpen = true"
|
|
>
|
|
Ajouter une ou plusieurs images
|
|
</button>
|
|
<template v-for="image in images" :key="image.uri">
|
|
<figure
|
|
v-if="
|
|
selectedTags.length === 0 ||
|
|
selectedTags.some((pageSelectedTag) =>
|
|
image.tags.includes(pageSelectedTag)
|
|
)
|
|
"
|
|
class="image"
|
|
@click="imageDetails = image"
|
|
>
|
|
<span v-for="tag in image.tags" class="tag | btn btn--sm">{{
|
|
tag
|
|
}}</span>
|
|
<img :src="image.url" alt="" />
|
|
</figure>
|
|
</template>
|
|
</div>
|
|
|
|
<AddImagesModal
|
|
v-if="isAddImagesModalOpen"
|
|
:isAddImagesModalOpen="isAddImagesModalOpen"
|
|
:images="images"
|
|
@close="isAddImagesModalOpen = false"
|
|
/>
|
|
<ImageDetailsModal
|
|
v-if="imageDetails"
|
|
:imageDetails="imageDetails"
|
|
@close="imageDetails = null"
|
|
@remove="removeImage"
|
|
/>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup>
|
|
import Header from "./Header.vue";
|
|
import { usePageStore } from "../../../stores/page";
|
|
import { ref } from "vue";
|
|
import ImageDetailsModal from "./ImageDetailsModal.vue";
|
|
import AddImagesModal from "./AddImagesModal.vue";
|
|
|
|
const { page } = usePageStore();
|
|
|
|
const selectedTags = ref([]);
|
|
const imageDetails = ref(null);
|
|
const images = ref(page.images);
|
|
const isAddImagesModalOpen = ref(false);
|
|
|
|
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);
|
|
images.value = 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));
|
|
}
|
|
}
|
|
|
|
function beforeSend(event) {
|
|
const formData = event.formData;
|
|
formData.append(
|
|
"pageUri",
|
|
"projects/miss-dior-blooming-bouquet/client-brief"
|
|
);
|
|
}
|
|
|
|
function changeSelectedTags(newTags) {
|
|
selectedTags.value = newTags;
|
|
}
|
|
|
|
function removeImage(target) {
|
|
console.log("remove", target);
|
|
images.value = images.value.filter((image) => image.uuid !== target.uuid);
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
fieldset {
|
|
appearance: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
border: none;
|
|
}
|
|
|
|
button[data-icon="upload"] {
|
|
padding: 6.875rem 4.875rem;
|
|
}
|
|
[data-pc-name="fileupload"] button:hover {
|
|
background: var(--color-primary-10);
|
|
border-color: var(--color-primary-20);
|
|
color: var(--color-primary-100);
|
|
}
|
|
input[type="file"] {
|
|
display: none;
|
|
}
|
|
|
|
[role="dialog"] {
|
|
position: relative;
|
|
}
|
|
[data-pc-section="mask"] {
|
|
background-color: var(--color-black-50);
|
|
}
|
|
[data-pc-section="header"] {
|
|
height: var(--space-40);
|
|
}
|
|
[data-pc-section="title"] {
|
|
font-weight: 500;
|
|
font-size: var(--text-lg);
|
|
}
|
|
[data-pc-name="pcclosebutton"] {
|
|
position: absolute;
|
|
top: var(--space-16);
|
|
right: var(--space-16);
|
|
padding: 0.625rem;
|
|
width: var(--space-40);
|
|
height: var(--space-40);
|
|
}
|
|
[data-pc-name="pcclosebutton"] svg {
|
|
width: 1.25rem;
|
|
height: 1.25rem;
|
|
}
|
|
[data-pc-name="pcclosebutton"] span {
|
|
display: none;
|
|
}
|
|
[data-pc-section="content"] {
|
|
flex-grow: 1;
|
|
overflow: hidden;
|
|
}
|
|
</style>
|