@golstats/gsc-reports 1.0.0

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

@@ -0,0 +1,675 @@
+<script setup>
+import CoverSelector from '@/components/template-report-maker/CoverSelector.vue'
+import TemplateReportPage from '@/components/template-report-maker/TemplateReportPage.vue'
+import Cover from '@/components/template-report-maker/CoverPage.vue'
+import Filters from '@/components/filters.vue'
+import { nextTick, ref, watch } from 'vue'
+import emitter from 'tiny-emitter/instance'
+
+const pages = ref([
+  {
+    title: 'Page 1',
+    id: String(Date.now()),
+    items: [
+      {
+        name: 'Volumetrica',
+        id: `w-${String(Date.now())}`,
+        x: 0,
+        y: 0,
+        w: 4,
+        h: 6,
+        maxWidth: 4,
+        maxHeight: 4,
+        noResize: false,
+        noMove: false,
+        componentProps: {},
+      },
+      {
+        name: 'Volumetrica',
+        id: String(Date.now()),
+        x: 4,
+        y: 0,
+        w: 4,
+        h: 4,
+        maxWidth: 4,
+        maxHeight: 4,
+        noResize: false,
+        noMove: false,
+        componentProps: {},
+      },
+    ],
+  },
+])
+const coverSelected = ref(null)
+const currentPageIndex = ref(0)
+const isVisible = ref(false)
+const templateToEdit = ref(null)
+const templateAux = ref(null)
+const isTemplateMode = ref(true)
+const isPostMatch = ref(false)
+const coverId = ref(0)
+const showFiltersMenu = ref(false)
+
+watch(
+  () => isVisible.value,
+  (newValue) => {
+    if (newValue) {
+      // Reset the current page index when the template maker is shown
+      currentPageIndex.value = 0
+      //   disable body scroll
+      document.body.style.overflow = 'hidden'
+    } else {
+      // Enable body scroll when the template maker is closed
+      document.body.style.overflow = ''
+    }
+  },
+)
+
+function getTwoDigitNumber(num) {
+  return num < 10 ? `0${num}` : num
+}
+
+function onSelectCover(cover) {
+  coverSelected.value = cover
+  console.log('coverSelected.value', coverSelected.value)
+}
+
+function onClickAddPage(index) {
+  if (index !== undefined && index >= -1) {
+    pages.value.splice(index + 1, 0, {
+      title: `Page ${pages.value.length + 1}`,
+      id: `p-${Date.now()}`,
+      items: [],
+    })
+  } else {
+    pages.value.push({
+      title: `Page ${pages.value.length + 1}`,
+      id: `p-${Date.now()}`,
+      items: [],
+    })
+  }
+}
+
+function onClickPage(pageIndex) {
+  if (pageIndex < -1 || pageIndex >= pages.value.length + 1) {
+    return // Invalid page index
+  }
+  const pageElement = document.getElementById(`page-${pageIndex}`)
+  if (pageElement) {
+    pageElement.scrollIntoView({ behavior: 'smooth', block: 'start' })
+  }
+}
+
+function onClickAddView() {
+  showFiltersMenu.value = true
+  //emitter.emit('add-view')
+}
+
+function onIntersectionChanged(isVisible, pageIndex) {
+  if (isVisible) {
+    currentPageIndex.value = pageIndex + 1 // +1 because the first page is the cover
+  }
+}
+
+function show(initialConfig) {
+  console.log('show, initialConfig', initialConfig)
+  isTemplateMode.value = initialConfig.isTemplateMode
+  if (initialConfig.isTemplateMode) {
+    templateToEdit.value = initialConfig.template
+    templateAux.value = JSON.parse(JSON.stringify(initialConfig.template)) // Deep copy
+    isPostMatch.value = templateToEdit.value.template_type === 2
+    const cover = templateToEdit.value.pages.find((page) => page.is_front_page)
+    console.log('cover')
+    coverId.value = cover ? cover.type : 1
+    pages.value = templateToEdit.value.pages.reduce((acc, page) => {
+      if (!page.is_front_page) {
+        const pageAux = {
+          originalPage: JSON.parse(JSON.stringify(page)),
+          title: page.name,
+          id: `p-${Date.now()}`,
+          items: [],
+        }
+        if (page.components && page.components.length > 0) {
+          pageAux.items = page.components.map((component) => ({
+            originalComponent: JSON.parse(JSON.stringify(component)),
+            title: component.title,
+            idAux: component.id,
+            id: `w-${Date.now()}`,
+            x: component.column,
+            y: component.row,
+            w: component.colspan,
+            h: component.rowspan,
+            maxWidth: component.max_column,
+            maxHeight: component.max_row,
+            minWidth: component.min_column,
+            minHeight: component.min_row,
+            noResize: false,
+            noMove: false,
+            isTemplateMode: isTemplateMode.value,
+          }))
+        }
+        acc.push(pageAux)
+      }
+      return acc
+    }, [])
+    isVisible.value = true
+  } else if (initialConfig.report) {
+    isVisible.value = true
+  }
+}
+
+defineProps({
+  token: {
+    type: String,
+    required: true,
+  },
+})
+
+defineExpose({
+  show,
+})
+emitter.on('add-page-view', ({ pageId, view, grid }) => {
+  console.log('++++++++++++++++++++++++++++++++++++++++++++++')
+  console.log('view', view)
+  const page = pages.value.find((p) => p.id === pageId)
+  if (page) {
+    if (!page.items) {
+      page.items = []
+    }
+    page.items.push(view)
+    nextTick(() => {
+      const el = document.querySelector(`[gs-id="${view.id}"]`)
+      grid.makeWidget(el)
+    })
+  }
+  console.log('page', page)
+})
+
+function onClickClose() {
+  isVisible.value = false
+}
+</script>
+
+<template>
+  <Teleport to="body">
+    <div v-if="isVisible && (templateToEdit || report)" class="template-maker">
+      <Filters v-if="showFiltersMenu" :token="token" @close="showFiltersMenu = false" />
+      <div class="template-maker__header">
+        {{ templateToEdit ? templateToEdit.name : 'Nuevo template' }}
+        <div class="template-maker__header__close" @click="onClickClose">
+          <svg
+            width="16"
+            height="16"
+            viewBox="0 0 16 16"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            @click="$emit('close')"
+          >
+            <path
+              d="M1.33398 1.33398L14.6673 14.6673"
+              stroke="#FFFFFF"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+            <path
+              d="M14.666 1.33398L1.33268 14.6673"
+              stroke="#FFFFFF"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
+        </div>
+      </div>
+      <div class="template-maker__content">
+        <div class="template-maker__content__sidebar">
+          <!--          Plantillas-->
+        </div>
+        <div class="template-maker__content__main">
+          <div class="container-main">
+            <div class="template-maker__content__main__cover-selector">
+              <CoverSelector
+                v-if="isTemplateMode"
+                :is-post-match="true"
+                :initial-cover-id="coverId"
+                @select-cover="onSelectCover"
+              />
+            </div>
+            <div class="template-maker__content__main__pages">
+              <Cover
+                v-if="coverSelected"
+                id="page-0"
+                :cover-id="coverSelected.id"
+                :is-post-match="coverSelected.isPostMatch"
+                @intersection-changed="onIntersectionChanged($event, -1)"
+              />
+              <div
+                class="new-items-buttons"
+                :style="{ 'margin-bottom': pages.length === 0 ? '30px' : '0' }"
+              >
+                <div
+                  class="new-items-buttons__add-page new-item-button"
+                  @click="onClickAddPage(-1)"
+                >
+                  <div>+ Nueva página</div>
+                  <svg
+                    width="16"
+                    height="16"
+                    viewBox="0 0 16 16"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M8.66797 1.33203H4.0013C3.64768 1.33203 3.30854 1.47251 3.05849 1.72256C2.80844 1.9726 2.66797 2.31174 2.66797 2.66536V13.332C2.66797 13.6857 2.80844 14.0248 3.05849 14.2748C3.30854 14.5249 3.64768 14.6654 4.0013 14.6654H12.0013C12.3549 14.6654 12.6941 14.5249 12.9441 14.2748C13.1942 14.0248 13.3346 13.6857 13.3346 13.332V5.9987L8.66797 1.33203Z"
+                      stroke="white"
+                      stroke-width="1.33333"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                    />
+                    <path
+                      d="M8.66797 1.33203V5.9987H13.3346"
+                      stroke="white"
+                      stroke-width="1.33333"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                    />
+                  </svg>
+                </div>
+              </div>
+              <div
+                v-for="(page, index) of pages"
+                :key="index"
+                :id="`page-${index + 1}`"
+                class="template-maker__content__main__pages__page"
+              >
+                <div class="page-indicator">
+                  <div class="page-indicator__index">Pag {{ getTwoDigitNumber(index + 2) }}</div>
+                </div>
+                <TemplateReportPage
+                  v-if="coverSelected"
+                  :page="page"
+                  :isTemplateMode="isTemplateMode"
+                  :is-post-match="coverSelected.isPostMatch"
+                  @intersection-changed="onIntersectionChanged($event, index)"
+                />
+                <div
+                  class="new-items-buttons"
+                  :style="{
+                    'margin-bottom': index + 1 === pages.length ? '30px' : '0',
+                    'margin-top': '10px',
+                  }"
+                >
+                  <div
+                    class="new-items-buttons__add-page new-item-button"
+                    @click="onClickAddPage(index)"
+                  >
+                    <div>+ Nueva página</div>
+                    <svg
+                      width="16"
+                      height="16"
+                      viewBox="0 0 16 16"
+                      fill="none"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M8.66797 1.33203H4.0013C3.64768 1.33203 3.30854 1.47251 3.05849 1.72256C2.80844 1.9726 2.66797 2.31174 2.66797 2.66536V13.332C2.66797 13.6857 2.80844 14.0248 3.05849 14.2748C3.30854 14.5249 3.64768 14.6654 4.0013 14.6654H12.0013C12.3549 14.6654 12.6941 14.5249 12.9441 14.2748C13.1942 14.0248 13.3346 13.6857 13.3346 13.332V5.9987L8.66797 1.33203Z"
+                        stroke="white"
+                        stroke-width="1.33333"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                      />
+                      <path
+                        d="M8.66797 1.33203V5.9987H13.3346"
+                        stroke="white"
+                        stroke-width="1.33333"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                      />
+                    </svg>
+                  </div>
+                  <div
+                    class="new-items-buttons__add-item new-item-button"
+                    @click="onClickAddView()"
+                  >
+                    <div>+ Agregar gráfico</div>
+                    <svg
+                      width="16"
+                      height="16"
+                      viewBox="0 0 16 16"
+                      fill="none"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M12 13.3346V6.66797"
+                        stroke="white"
+                        stroke-width="1.33333"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                      />
+                      <path
+                        d="M8 13.3346V2.66797"
+                        stroke="white"
+                        stroke-width="1.33333"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                      />
+                      <path
+                        d="M4 13.332V9.33203"
+                        stroke="white"
+                        stroke-width="1.33333"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                      />
+                    </svg>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="template-maker__content__main__footer">
+            <div class="template-maker__content__main__footer__paginator">
+              <div class="template-maker__content__main__footer__paginator__nav">
+                <div>Páginas</div>
+                <div
+                  class="template-maker__content__main__footer__paginator__nav__arrow"
+                  @click="onClickPage(currentPageIndex - 1)"
+                >
+                  <svg
+                    width="6"
+                    height="10"
+                    viewBox="0 0 6 10"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      fill-rule="evenodd"
+                      clip-rule="evenodd"
+                      d="M2.22444 5L5.29079 8.57741C5.56974 8.90285 5.56974 9.43049 5.29079 9.75592C5.01184 10.0814 4.55958 10.0814 4.28064 9.75592L0.709209 5.58926C0.430263 5.26382 0.430263 4.73618 0.709209 4.41074L4.28064 0.244078C4.55958 -0.0813593 5.01184 -0.0813592 5.29079 0.244078C5.56974 0.569515 5.56974 1.09715 5.29079 1.42259L2.22444 5Z"
+                      fill="#92929D"
+                    />
+                  </svg>
+                </div>
+                <div
+                  class="template-maker__content__main__footer__paginator__nav__arrow"
+                  @click="onClickPage(currentPageIndex + 1)"
+                >
+                  <svg
+                    width="6"
+                    height="10"
+                    viewBox="0 0 6 10"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      fill-rule="evenodd"
+                      clip-rule="evenodd"
+                      d="M3.77556 5L0.70921 8.57741C0.430264 8.90285 0.430264 9.43049 0.70921 9.75592C0.988156 10.0814 1.44042 10.0814 1.71936 9.75592L5.29079 5.58926C5.56974 5.26382 5.56974 4.73618 5.29079 4.41074L1.71936 0.244078C1.44042 -0.0813593 0.988155 -0.0813592 0.709209 0.244078C0.430264 0.569515 0.430264 1.09715 0.70921 1.42259L3.77556 5Z"
+                      fill="#92929D"
+                    />
+                  </svg>
+                </div>
+              </div>
+              <div class="template-maker__content__main__footer__paginator__numbers">
+                <div
+                  role="button"
+                  :class="{ active: currentPageIndex === 0 }"
+                  @click="onClickPage(0)"
+                >
+                  {{ getTwoDigitNumber(1) }}
+                </div>
+                <div
+                  role="button"
+                  v-for="(page, index) of pages"
+                  :key="index"
+                  :class="{ active: index + 1 === currentPageIndex }"
+                  @click="onClickPage(index + 1)"
+                >
+                  {{ getTwoDigitNumber(index + 2) }}
+                </div>
+              </div>
+            </div>
+            <div role="button" class="template-maker__content__main__footer__save save-button">
+              <div>Guardar</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<style scoped lang="scss">
+$header-height: 64px;
+
+.page-indicator {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 998px;
+  border-top: 1px dashed #496290;
+  margin: 2px 0 4px;
+
+  &__index {
+    position: absolute;
+    left: -60px;
+    top: 0;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 12px;
+    color: #ffffff;
+    font-family: Poppins-Regular, sans-serif;
+    font-weight: normal;
+    font-stretch: normal;
+    font-style: normal;
+    line-height: 1.71;
+    letter-spacing: normal;
+  }
+}
+
+.save-button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 7px 14px 7px 12px;
+  border-radius: 5px;
+  border: solid 1px rgba(255, 255, 255, 0.1);
+  background-color: rgba(255, 255, 255, 0.05);
+  cursor: pointer;
+}
+
+.new-items-buttons {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  margin-top: 2px;
+}
+
+.new-item-button {
+  width: 100%;
+  padding: 10px 14px;
+  border-radius: 8px;
+  border: solid 1px #8a8a8a;
+  background-color: rgba(255, 255, 255, 0.05);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 12px;
+  cursor: pointer;
+  font-family: Poppins-Regular, sans-serif;
+  font-size: 14px;
+  font-weight: normal;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: 1.71;
+  letter-spacing: normal;
+  text-align: left;
+  color: #fff;
+}
+
+.container-main {
+  height: calc(100vh - $header-height);
+  width: 100%;
+  padding: 24px 16px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  overflow-y: scroll;
+  position: relative;
+  margin-bottom: 180px;
+}
+
+.template-maker {
+  position: fixed;
+  height: 100vh;
+  width: 100vw;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #0d1d29;
+  z-index: 4999;
+
+  display: flex;
+  flex-direction: column;
+
+  &__header {
+    height: $header-height;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px 27px;
+    -webkit-backdrop-filter: blur(60px);
+    backdrop-filter: blur(60px);
+    border-bottom: solid 1px #3d4a54;
+    background-color: rgba(38, 50, 60, 0.8);
+
+    font-family: Poppins-Regular, sans-serif;
+    font-size: 16px;
+    font-weight: normal;
+    font-stretch: normal;
+    font-style: normal;
+    line-height: 1.38;
+    letter-spacing: normal;
+    text-align: left;
+    color: #fff;
+
+    &__close {
+      cursor: pointer;
+    }
+  }
+
+  &__content {
+    display: grid;
+    grid-template-columns: 0px 1fr;
+
+    &__sidebar {
+      height: calc(100vh - $header-height);
+      width: 0px;
+      -webkit-backdrop-filter: blur(60px);
+      backdrop-filter: blur(60px);
+      background-color: rgba(45, 62, 75, 0.8);
+    }
+
+    &__main {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+
+      &__cover-selector {
+        width: 352px;
+        height: fit-content;
+      }
+
+      &__pages {
+        width: 100%;
+        max-width: 998px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 4px;
+        margin-top: 18px;
+        margin-bottom: 70px;
+
+        &__page {
+          width: 100%;
+          max-width: 998px;
+        }
+      }
+
+      &__footer {
+        width: 100%;
+        position: absolute;
+        display: flex;
+        justify-content: space-between;
+        max-width: 1202px;
+        bottom: 0;
+        padding: 10px 14px 14px;
+        box-shadow: 0 -4px 24px 0 rgba(0, 0, 0, 0.5);
+        background-color: #182531;
+
+        &__paginator {
+          display: flex;
+          gap: 12px;
+          flex-grow: 1;
+
+          &__nav {
+            display: flex;
+            align-items: center;
+            gap: 4px;
+
+            & > div:first-child {
+              opacity: 0.5;
+              font-family: Poppins-Regular, sans-serif;
+              font-size: 14px;
+              font-weight: normal;
+              font-stretch: normal;
+              font-style: normal;
+              line-height: 1.71;
+              letter-spacing: normal;
+              text-align: left;
+              color: #fff;
+            }
+
+            &__arrow {
+              padding: 4px 6px;
+              cursor: pointer;
+            }
+          }
+
+          &__numbers {
+            display: flex;
+            align-items: center;
+            font-size: 14px;
+            color: #ffffff;
+
+            & > div {
+              padding: 4px;
+              opacity: 0.6;
+              font-family: Poppins-Regular, sans-serif;
+              font-size: 14px;
+              font-weight: normal;
+              font-stretch: normal;
+              font-style: normal;
+              //line-height: 1.71;
+              letter-spacing: normal;
+              text-align: left;
+              color: #fff;
+              cursor: pointer;
+
+              &.active {
+                opacity: 1;
+                border-bottom: solid 1px #cbee6b;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>