@golstats/gsc-reports 1.0.0

package/src/components/gsc-reports.vue

@@ -0,0 +1,452 @@
+<template>
+  <GSCTemplateReportMaker ref="reportTemplateMaker" :token="token" />
+  <div ref="containerRef" class="reports-container">
+    <ModalSoloEscritorio v-if="showMobileWarning" />
+    <h1 class="title">Mis reportes</h1>
+    <div class="top-bar">
+      <div class="tabs-container">
+        <div class="tabs">
+          <div
+            class="tab tab-templates"
+            :class="{ active: activeTab === 'templates' }"
+            @click="activeTab = 'templates'"
+          >
+            Templates
+          </div>
+          <div
+            class="tab tab-reports"
+            :class="{ active: activeTab === 'reports' }"
+            @click="activeTab = 'reports'"
+          >
+            Tus reportes
+          </div>
+        </div>
+      </div>
+      <div class="actions" v-if="activeTab === 'templates'">
+        <div class="search-container">
+          <img
+            src="http://golstatsimages.blob.core.windows.net/playlist-icons/icn-search@3x.png"
+            alt="Buscar"
+            class="search-icon"
+          />
+          <input v-model="searchQuery" class="search" type="text" placeholder="Buscar template" />
+          <button v-if="searchQuery" @click="clearSearch" class="clear-search-btn" type="button">
+            <svg
+              width="12"
+              height="12"
+              viewBox="0 0 12 12"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M9 3L3 9M3 3L9 9"
+                stroke="#8B98A9"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </button>
+        </div>
+        <button class="create-template-btn" @click="showModalCreateTemplate = true">
+          <img
+            src="http://golstatsimages.blob.core.windows.net/playlist-icons/icn-agregar@3x.png"
+            alt="Agregar"
+            class="create-icon"
+          />
+          Crear template
+        </button>
+      </div>
+      <div class="actions" v-if="activeTab === 'reports'">
+        <div class="search-container">
+          <img
+            src="http://golstatsimages.blob.core.windows.net/playlist-icons/icn-search@3x.png"
+            alt="Buscar"
+            class="search-icon"
+          />
+          <input
+            v-model="searchQueryReports"
+            class="search search-reports"
+            type="text"
+            placeholder="Buscar reporte"
+          />
+          <button
+            v-if="searchQueryReports"
+            @click="clearSearchReports"
+            class="clear-search-btn"
+            type="button"
+          >
+            <svg
+              width="12"
+              height="12"
+              viewBox="0 0 12 12"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M9 3L3 9M3 3L9 9"
+                stroke="#8B98A9"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </button>
+        </div>
+      </div>
+    </div>
+    <TemplatesSection
+      v-if="activeTab === 'templates'"
+      :userId="userId"
+      :token="token"
+      :team="team"
+      :searchQuery="searchQuery"
+      @switch-to-reports="activeTab = 'reports'"
+      @open-modal-new-template="onOpenModalNewTemplate"
+      @edit-template="onEditTemplate"
+    />
+    <ReportsSection
+      v-else
+      :userId="userId"
+      :token="token"
+      :team="team"
+      :searchQuery="searchQueryReports"
+      @open-report="onOpenReport"
+    />
+    <ModalCreateTemplate
+      v-if="showModalCreateTemplate"
+      :token="token"
+      @close="showModalCreateTemplate = false"
+    >
+      <!-- Aquí irá el contenido del modal -->
+    </ModalCreateTemplate>
+  </div>
+</template>
+
+<script setup>
+// import ReportTemplateMaker from '@/components/template-report-maker/ReportAndTemplateMaker.vue'
+import '@@/@golstats/gsc-template-report-maker/dist/gsc-template-report-maker.css'
+import { GSCTemplateReportMaker } from '@@/@golstats/gsc-template-report-maker'
+import { ref, onMounted, onBeforeUnmount, watch } from 'vue'
+import TemplatesSection from './TemplatesSection.vue'
+import ReportsSection from './ReportsSection.vue'
+import ModalCreateTemplate from './elementsTemplates/ModalCreateTemplate.vue'
+import ModalSoloEscritorio from './elementsTemplates/ModalSoloEscritorio.vue'
+
+// Definir las props
+const props = defineProps({
+  userId: {
+    type: Number,
+    required: true,
+  },
+  team: {
+    type: Number,
+    required: true,
+  },
+  token: {
+    type: String,
+    required: true,
+  },
+})
+
+// Usar las props
+const { userId, team, token } = props
+
+const activeTab = ref('templates')
+const showMobileWarning = ref(false)
+const containerRef = ref(null)
+const showModalCreateTemplate = ref(false)
+const searchQuery = ref('')
+const searchQueryReports = ref('')
+const reportTemplateMaker = ref(null)
+
+function checkContainerWidth() {
+  if (containerRef.value) {
+    const width = containerRef.value.offsetWidth
+    showMobileWarning.value = width < 1028
+  }
+}
+
+watch(showMobileWarning, (val) => {
+  if (val) {
+    document.body.style.overflow = 'hidden'
+  } else {
+    document.body.style.overflow = ''
+  }
+})
+
+onBeforeUnmount(() => {
+  document.body.style.overflow = ''
+})
+
+onMounted(() => {
+  checkContainerWidth()
+  window.addEventListener('resize', checkContainerWidth)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', checkContainerWidth)
+})
+
+function onOpenModalNewTemplate(template) {
+  console.log('onOpenModalNewTemplate, gsc-reports:', template)
+  onEditTemplate(template)
+}
+
+function onEditTemplate(template) {
+  console.log('onEditTemplate, template:', template)
+  //if (reportTemplateMaker.value) {
+  reportTemplateMaker.value.show({
+    template: template,
+    isTemplateMode: true,
+  })
+  //}
+}
+
+const clearSearch = () => {
+  searchQuery.value = ''
+}
+
+const clearSearchReports = () => {
+  searchQueryReports.value = ''
+}
+
+function onOpenReport(report) {
+  console.log('gsc-report onOpenReport, report:', report)
+  if (reportTemplateMaker.value) {
+    reportTemplateMaker.value.show({
+      template: report,
+      isTemplateMode: false,
+    })
+  }
+}
+</script>
+<style>
+.grid-stack-item-content {
+  //background: #3498db;
+  //color: white;
+  //text-align: center;
+  //padding: 20px;
+  //box-sizing: border-box;
+  overflow-y: hidden !important;
+  overflow-x: hidden !important;
+  box-shadow: 0 3px 14px 0 rgba(0, 0, 0, 0.25);
+  border-radius: 5px;
+}
+</style>
+
+<style scoped>
+.reports-container {
+  min-height: 100vh;
+  color: #fff;
+  margin-top: 54px;
+  font-family: 'Montserrat', sans-serif;
+}
+.title {
+  font-size: 22px;
+  font-weight: 500;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: normal;
+  letter-spacing: normal;
+  text-align: left;
+  color: #fff;
+  font-family: 'Poppins-Medium';
+  margin-bottom: 16px;
+}
+.top-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 30px;
+  margin-bottom: 30px;
+}
+.tabs-container {
+  display: flex;
+  align-items: center;
+}
+.tabs {
+  display: flex;
+  gap: 0;
+  border-bottom: none;
+  width: 419px;
+}
+.tab {
+  text-align: center;
+  padding: 10px 0;
+  font-size: 16px;
+  font-family: 'Poppins-Medium';
+  font-size: 16px;
+  font-weight: 500;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: 1.25;
+  letter-spacing: normal;
+  text-align: center;
+  color: #fff;
+  opacity: 0.6;
+  cursor: pointer;
+  position: relative;
+  transition: color 0.2s;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
+}
+.tab-templates {
+  width: 168px;
+  flex: 0 0 168px;
+}
+.tab-reports {
+  flex: 1 1 0;
+}
+.tab.active {
+  opacity: 1;
+  border-bottom: 1px solid #cbee6b;
+}
+.tab.active::after {
+  content: '';
+  display: none;
+}
+.actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+.search-container {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+.search-icon {
+  position: absolute;
+  left: 12px;
+  width: 16px;
+  height: 16px;
+  z-index: 1;
+  pointer-events: none;
+}
+.search {
+  width: 187px;
+  height: 40px;
+  flex-grow: 0;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  padding: 4px 8px 4px 40px;
+  border-radius: 4px;
+  border: solid 1px #3d4a54;
+  background-color: #0d1d29;
+  color: #fafafb;
+  font-family: 'Poppins-Regular';
+  font-size: 14px;
+  font-weight: normal;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: normal;
+  letter-spacing: 0.1px;
+  text-align: left;
+  outline: none;
+  box-sizing: border-box;
+  transition: width 0.3s ease;
+}
+
+.search:focus {
+  width: 400px;
+}
+
+.search-reports {
+  width: 370px;
+}
+
+.search-reports:focus {
+  width: 520px;
+}
+
+.search::placeholder {
+  opacity: 0.41;
+}
+
+.clear-search-btn {
+  position: absolute;
+  right: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+  background: none;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 4px;
+  border-radius: 4px;
+  transition: background-color 0.2s;
+  z-index: 2;
+}
+
+.clear-search-btn:hover {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+.create-template-btn {
+  width: 171px;
+  height: 40px;
+  border-radius: 4px;
+  border: solid 1px #3d4a54;
+  background-color: #0d1d29;
+  color: #fafafb;
+  font-family: 'Poppins-Regular';
+  font-size: 14px;
+  font-weight: normal;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: normal;
+  letter-spacing: 0.1px;
+  text-align: left;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  cursor: pointer;
+  transition: background 0.2s;
+  box-sizing: border-box;
+}
+.create-template-btn:hover {
+  background: #2c3744;
+}
+.create-icon {
+  width: 20px;
+  height: 14px;
+}
+.mobile-warning {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 400px;
+}
+.mobile-warning-box {
+  border: 2px solid #cbee6b;
+  background: #0d1d29;
+  color: #fafafb;
+  padding: 32px 24px;
+  border-radius: 8px;
+  font-family: 'Poppins-Medium';
+  font-size: 18px;
+  text-align: center;
+  max-width: 350px;
+}
+@media (max-width: 1028px) {
+  .top-bar {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 16px;
+  }
+  .tabs-container,
+  .actions {
+    width: 100%;
+    justify-content: flex-start;
+  }
+  .actions {
+    margin-top: 0;
+    margin-bottom: 0;
+    display: none;
+  }
+}
+</style>