127 lines
3 KiB
Vue
127 lines
3 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 page.images" :key="image.uri">
|
|
<figure
|
|
v-if="
|
|
selectedTags.length === 0 ||
|
|
selectedTags.some((pageSelectedTag) =>
|
|
image.tags.includes(pageSelectedTag)
|
|
)
|
|
"
|
|
class="image"
|
|
:class="{ 'has-description': image.description.length > 0 }"
|
|
@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"
|
|
@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 "./add-images-modal/AddImagesModal.vue";
|
|
import { storeToRefs } from "pinia";
|
|
|
|
const { page } = storeToRefs(usePageStore());
|
|
|
|
const selectedTags = ref([]);
|
|
const imageDetails = ref(null);
|
|
const isAddImagesModalOpen = ref(false);
|
|
|
|
function changeSelectedTags(newTags) {
|
|
selectedTags.value = newTags;
|
|
}
|
|
|
|
function removeImage(target) {
|
|
console.log("remove", target);
|
|
page.value.images = page.value.images.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>
|