@golstats/gsc-reports 1.0.0

package/src/components/template-report-maker/CoverSelector.vue

@@ -0,0 +1,165 @@
+<script setup>
+import { computed, ref, watch } from 'vue'
+
+const props = defineProps({
+  isPostMatch: {
+    type: Boolean,
+    default: true
+  },
+  initialCoverId: {
+    type: Number,
+    default: 1
+  }
+})
+
+const emit = defineEmits(['select-cover'])
+
+const demoCoversPostMatch = ref([
+  {
+    id: 1,
+    src: '/reports/thumbnail-portada-01@2x.png',
+    isSelected: true,
+    isPostMatch: true
+  },
+  {
+    id: 2,
+    src: '/reports/thumbnail-portada-02@2x.png',
+    isSelected: false,
+    isPostMatch: true
+  },
+  {
+    id: 3,
+    src: '/reports/thumbnail-portada-03@2x.png',
+    isSelected: false,
+    isPostMatch: true
+  },
+  {
+    id: 4,
+    src: '/reports/thumbnail-portada-04@2x.png',
+    isSelected: false,
+    isPostMatch: true
+  }
+])
+
+const demoCoversPreMatch = ref([
+  {
+    id: 1,
+    src: '/reports/thumbnail-portada-prmatch-01@2x.png',
+    isSelected: true,
+    isPostMatch: false
+  },
+  {
+    id: 2,
+    src: '/reports/thumbnail-portada-prmatch-02@2x.png',
+    isSelected: false,
+    isPostMatch: false
+  },
+  {
+    id: 3,
+    src: '/reports/thumbnail-portada-prmatch-03@2x.png',
+    isSelected: false,
+    isPostMatch: false
+  },
+  {
+    id: 4,
+    src: '/reports/thumbnail-portada-prmatch-04@2x.png',
+    isSelected: false,
+    isPostMatch: false
+  }
+])
+
+const availableCovers = computed(() => {
+  return props.isPostMatch ? demoCoversPostMatch.value : demoCoversPreMatch.value
+})
+
+watch(() => availableCovers.value, (covers) => {
+  const initialCover = covers.find(c => c.id === props.initialCoverId)
+  if (initialCover) {
+    onClickCover(initialCover)
+  } else {
+    // If the initial cover is not found, select the first one
+    onClickCover(covers[0])
+  }
+},
+
+{ immediate: true })
+
+function onClickCover(cover) {
+  availableCovers.value.forEach((c => c.isSelected = false))
+  cover.isSelected = true
+  emit('select-cover', cover)
+}
+</script>
+
+<template>
+  <div class="cover-selector">
+    <div class="cover-selector__text">
+      Portada
+    </div>
+    <div class="cover-selector__covers">
+      <div
+          v-for="cover of availableCovers"
+          :key="cover.id"
+          class="cover-selector__covers__cover"
+          :class="{ 'is-selected': cover.isSelected }"
+          @click="onClickCover(cover)"
+      >
+        <img :src="cover.src" alt="Cover Image"/>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.cover-selector {
+  display: flex;
+  align-items: center;
+  gap: 18px;
+  padding: 10px 20px;
+  border-radius: 5px;
+  box-shadow: 0 20px 40px 0 rgba(0, 0, 0, 0.25);
+  background-color: #2a3843;
+
+  &__text {
+    font-family: Poppins-Medium, sans-serif;
+    font-size: 16px;
+    font-weight: 500;
+    font-stretch: normal;
+    font-style: normal;
+    line-height: normal;
+    letter-spacing: normal;
+    text-align: left;
+    color: #fff;
+  }
+
+  &__covers {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+
+    &__cover {
+      height: 40px;
+      width: auto;
+      overflow: hidden;
+      cursor: pointer;
+      transition: transform 0.3s ease;
+
+      &.is-selected {
+        border: 1px solid #4289CC;
+        border-radius: 4px;
+      }
+
+      &:hover {
+        transform: scale(1.05);
+      }
+
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+    }
+  }
+}
+</style>