designtopack/src/components/project/brief/Images.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"
      >
        {{ t('forms.addImages') }}
      </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"
        >
          <p class="tags | flex">
            <span v-for="tag in image.tags" class="tag | btn btn--sm">{{
              tag
            }}</span>
          </p>
          <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 { useI18n } from "vue-i18n";
import ImageDetailsModal from "./ImageDetailsModal.vue";
import AddImagesModal from "./add-images-modal/AddImagesModal.vue";
import { storeToRefs } from "pinia";

const { page } = storeToRefs(usePageStore());
const { t } = useI18n();

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>