designtopack/src/components/project/ClientBrief/AddImagesModal.vue

<template>
  <Dialog
    id="add-images"
    v-model:visible="isOpen"
    modal
    header="Ajouter des images"
    class="bg-white | text-grey-800 | rounded-2xl | overflow-hidden | p-32"
  >
    <div class="with-sidebar | h-full">
      <nav>
        <ul>
          <li class="active">Mes Images</li>
          <li>Matériauthèque</li>
          <li>Réalisations</li>
          <li>Inspirations</li>
        </ul>
      </nav>
      <div class="with-sidebar | h-full" data-side="right" style="--sidebar-width: 26rem; gap: var(--gap)">
        <div class="bg-grey-50 | border border-grey-200 | rounded-2xl | p-8 | overflow-y">
          <div
            class="auto-grid"
            style="--min: 15rem; --gap: 0.5rem"
          >
            <FileUpload
              mode="basic"
              name="images[]"
              :url="'/upload-images.json?pageUri=' + page.uri"
              @upload="onAdvancedUpload($event)"
              :auto="true"
              :multiple="true"
              accept="image/*"
              :maxFileSize="1000000"
              invalidFileSizeMessage="Fichier trop lourd"
              chooseLabel="Ajouter une ou plusieurs images"
              class="flex flex-col justify-center | bg-white | border border-grey-200 | text-grey-800 | font-medium | rounded-xl"
            >
              <template #chooseicon>
                <svg
                  width="20"
                  height="20"
                  viewBox="0 0 20 20"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M0.714355 15.0001V16.4286C0.714355 17.1864 1.01538 17.9131 1.55119 18.4489C2.08701 18.9848 2.81374 19.2858 3.5715 19.2858H16.4286C17.1864 19.2858 17.9131 18.9848 18.4489 18.4489C18.9848 17.9131 19.2858 17.1864 19.2858 16.4286V15.0001M5.71436 5.71436L10.0001 0.714355M10.0001 0.714355L14.2858 5.71436M10.0001 0.714355V13.5715"
                    stroke="currentColor"
                    stroke-width="1.25"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  />
                </svg>
              </template>
              <template
                #content="{
                  files,
                  uploadedFiles,
                  removeUploadedFileCallback,
                  removeFileCallback,
                }"
              >
                <div v-if="files.length > 0">Fichiers importés</div>
              </template>
            </FileUpload>
            <figure class="image">
              <img
                src="https://images.unsplash.com/photo-1541643600914-78b084683601?q=80&w=2008&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                alt=""
              />
            </figure>
            <figure class="image">
              <img
                src="https://images.unsplash.com/photo-1541643600914-78b084683601?q=80&w=2008&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                alt=""
              />
            </figure>
            <figure class="image">
              <img
                src="https://images.unsplash.com/photo-1541643600914-78b084683601?q=80&w=2008&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                alt=""
              />
            </figure>
            <figure class="image">
              <img
                src="https://images.unsplash.com/photo-1541643600914-78b084683601?q=80&w=2008&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                alt=""
              />
            </figure>
            <figure class="image">
              <img
                src="https://images.unsplash.com/photo-1541643600914-78b084683601?q=80&w=2008&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                alt=""
              />
            </figure>
            <Toast />
          </div>
        </div>
        <div class="flex flex-col items-start | bg-grey-50 | border border-grey-200 | rounded-2xl | w-full | p-8">
          <Accordion value="0" class="flex flex-col" style="--row-gap:var(--space-8)">
            <AccordionPanel v-for="tab in tabs" :key="tab.title" :value="tab.value" class="w-full | bg-white | rounded-xl | p-12 pt-8">
              <AccordionHeader>
                <span class="badge">{{ tab.title }}</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"
                    @input="saveDescription()"
                  ></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 ['Parachèvements', 'Forme & Design', 'Matériaux & Textures', 'Coloris & Nuances']" :key="tag">
                      <input
                        class="sr-only"
                        type="checkbox"
                        :id="`${tag}`"
                        :name="`${tag}`"
                        :value="`${tag}`"
                        v-model="localSelectedTags"
                      />
                      <label class="btn btn--sm btn--primary" :for="`${tag}`">{{ 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">Ajouter les images sélectionnées</button>
        </div>
      </div>
    </div>
  </Dialog>
</template>

<script setup>
import Dialog from "primevue/dialog";
import Toast from "primevue/toast";
import { useToast } from "primevue/usetoast";
import FileUpload from "primevue/fileupload";
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 { ref, watch } from "vue";

const { page } = usePageStore();
const toast = useToast();

const { isAddImagesModalOpen } = defineProps({
  isAddImagesModalOpen: Boolean,
});
const emit = defineEmits(["update:isAddImagesModalOpen"]);

const isOpen = ref(isAddImagesModalOpen);
watch(isOpen, (newValue) => {
  emit("close");
});

const tabs = [
  {
    "title": "1",
    "value": "0"
  },
  {
    "title": "2",
    "value": "1"
  },
  {
    "title": "3",
    "value": "2"
  },
  {
    "title": "4",
    "value": "3"
  }
]
</script>

<style>
#add-images {
  --sidebar-width: 12.5rem;
  counter-set: selected-images;
  width: min(100vw - var(--gutter) * 2, 100rem);
  height: min(100vh - var(--gutter) * 2, 60rem);
  padding-top: var(--space-16);
  row-gap: var(--space-32);
}
#add-images nav li {
  position: relative;
  height: var(--space-48);
  border-left: 1px solid var(--color-grey-400);
  padding: var(--space-12) var(--space-16);
  color: var(--color-grey-400);
  font-weight: 500;
  cursor: pointer;
}
#add-images nav li:hover,
#add-images nav li.active {
  color: var(--color-grey-800);
  border-left-color: var(--color-grey-800);
}
#add-images nav li.active::before {
  content: "";
  width: 2px;
  position: absolute;
  top: 0;
  left: -1px;
  bottom: 0;
  background: var(--color-grey-800);
}
#add-images [data-pc-name="fileupload"] button {
  padding: 3rem;
  aspect-ratio: 1/1;
}
#add-images .image {
  counter-increment: selected-images;
  aspect-ratio: 1/1;
  border-radius: var(--rounded-xl);
}
#add-images .image::after {
  content: counter(selected-images);
  top: var(--space-12);
  right: var(--space-12);
  border-radius: 50%;
  color: var(--color-white);
  font-weight: 700;
  background: var(--color-grey-800);
  mask: none;
  display: grid;
  place-items: center;
  text-align: center;
  width: 1.5rem;
  height: 1.5rem;
}

.with-sidebar[data-side="right"] > * {
  height: 100%;
  overflow-y: auto;
}

/* Accordion */
[data-pc-name="accordionheader"] {
  height: var(--space-40);
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>