rename folde

src/components/project/ClientBrief/Images.vue

@@ -1,155 +0,0 @@
-<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 "./add-images-modal/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>