designtopack/src/components/project/brief/add-images-modal/AddImagesModal.vue

<template>
  <Dialog
    id="add-images"
    v-model:visible="isOpen"
    :draggable="false"
    :dismissableMask="true"
    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
            v-for="tab in tabs"
            :class="{ active: activeTabId === tab.id }"
            @click="activeTabId = tab.id"
          >
            <span>{{ tab.name }}</span>
            <ul v-if="tab.id === 'inspirations'">
              <li
                v-for="collection in tab.collections"
                :class="{ active: collection.isActive }"
                @click="
                  tab.images = collection.media;
                  tab.collections.map((item) => (item.isActive = false));
                  collection.isActive = true;
                "
              >
                <span>{{ collection.title }}</span>
              </li>
            </ul>
          </li>
        </ul>
      </nav>
      <div
        class="with-sidebar | h-full"
        data-side="right"
        style="--sidebar-width: 26rem; gap: var(--gap)"
      >
        <div class="bg-grey-50 | rounded-2xl | p-8 | overflow-y">
          <template v-for="tab in tabs" :key="tab.name">
            <component
              @add-images="addImages"
              :is="tab.component"
              :id="tab.id"
              :class="{ hidden: activeTab.name !== tab.name }"
            />
          </template>
        </div>
        <ImagesEditPanel @close="close" />
      </div>
    </div>
  </Dialog>
  <Dialog
    id="delete-image"
    v-model:visible="deleteIsOpen"
    modal
    header="Êtes-vous sûr de vouloir supprimer cette image ?"
    class="bg-white | text-grey-800 | rounded-2xl | overflow-hidden | text-center | w-full max-w | p-16 pt-32"
    style="--row-gap: var(--space-32); --max-w: 40rem"
  >
    <p class="text-grey-700 | px-16">
      Si vous supprimez cette image, celle-ci disparaîtra de votre brief ainsi
      que toutes les informations qui lui sont attribuées.
    </p>
    <template #footer>
      <button class="btn btn--secondary | flex-1" @click="deleteIsOpen = false">
        Annuler
      </button>
      <button class="btn | flex-1" @click="">Supprimer</button>
    </template>
  </Dialog>
</template>

<script setup>
import Dialog from 'primevue/dialog';
import ImagesEditPanel from './ImagesEditPanel.vue';
import { ref, watch } from 'vue';
import { storeToRefs } from 'pinia';
import { useAddImagesModalStore } from '../../../../stores/addImagesModal';

const { isAddImagesModalOpen } = defineProps({
  isAddImagesModalOpen: Boolean,
});

const emit = defineEmits('close');
const { activeTab, activeTabId, tabs } = storeToRefs(useAddImagesModalStore());

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

function close() {
  isOpen.value = false;
}

const deleteIsOpen = false;
</script>

<style>
#add-images {
  --sidebar-width: 12.5rem;
  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 [data-pc-section='content'] {
  height: calc(100% - 3.75rem);
}
#add-images nav li > span {
  position: relative;
  display: inline-block;
  min-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;
  width: 100%;
}
#add-images nav li:hover > span,
#add-images nav li.active > span {
  color: var(--color-grey-800);
  border-left-color: var(--color-grey-800);
}
#add-images nav > ul > li.active > span::before {
  content: '';
  width: 2px;
  position: absolute;
  top: 0;
  left: -1px;
  bottom: 0;
  background: var(--color-grey-800);
}
#add-images nav > ul > li:not(.active) ul {
  display: none;
}
#add-images nav > ul ul > li > span {
  min-height: var(--space-32);
  padding: var(--space-8) var(--space-16) var(--space-8) var(--space-32);
  font-family: var(--font-serif);
  font-size: var(--text-sm);
}
#add-images nav > ul ul > li.active > span {
  border-left-width: 2px;
}

#add-images [data-pc-name='fileupload'] button {
  padding: 3rem;
  aspect-ratio: 1/1;
}
#add-images .image {
  aspect-ratio: 1/1;
  border-radius: var(--rounded-xl);
}
#add-images .image img {
  height: 100%;
  width: 100%;
}

#delete-image [data-pc-section='footer'] {
  display: flex;
  gap: var(--space-16);
  margin-top: var(--space-32);
}
#delete-image [data-pc-name='pcclosebutton'] {
  display: none;
}
#delete-image_header {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
}

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