extended-brief working

src/components/project/brief/Images.vue

@@ -0,0 +1,127 @@
+<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.moodboard" :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.moodboard = page.value.moodboard.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>