From d74812841d24d5ddbe7e02b57886bd76eb8c23de Mon Sep 17 00:00:00 2001
From: Gildardo Diaz <100874861+gildardoSOD@users.noreply.github.com>
Date: Mon, 8 May 2023 16:07:37 -0700
Subject: [PATCH] Merge branch Stg into Main (#609)

* Merge branch Dev into Stg (#608)

* fix(SNW-181): Fix Search bar on Learn Page (#607)
---
 src/components/dynamic/cards/CardSearch.vue  | 651 +++++++------------
 src/components/dynamic/ecosystem/Filters.vue |  65 +-
 src/templates/LearnPortal.vue                |  32 +-
 3 files changed, 291 insertions(+), 457 deletions(-)

diff --git a/src/components/dynamic/cards/CardSearch.vue b/src/components/dynamic/cards/CardSearch.vue
index 8415f6d5..fb5f0e56 100644
--- a/src/components/dynamic/cards/CardSearch.vue
+++ b/src/components/dynamic/cards/CardSearch.vue
@@ -1,481 +1,316 @@
 <template>
-  <div>
-    <div class="learn-search">
-      <!-- FILTER -->
-      <div class="filter v3">
-        <div class="titles">
-          <h5 class="mini-title">{{ spotlight_title }}</h5>
-          <h2>{{ title }}</h2>
-        </div>
-        <div class="search">
+  <div class="card-search">
+    <div class="card-search__filters">
+      <div class="titles">
+        <h5>{{ spotlight_title }}</h5>
+        <h2>{{ title }}</h2>
+      </div>
+      <input
+        v-model="search"
+        class="search"
+        type="text"
+        placeholder="Search"
+        @input="onInput(true)"
+      />
+      <div class="chips">
+        <label
+          v-for="(category, index) of categories"
+          :key="index"
+          :for="category"
+        >
           <input
-            class="search-filter"
-            type="text"
-            ref="inputSearch"
-            v-model="searchInputValue"
-            @keyup="searchFilter()"
-            placeholder="Search"
+            :id="category"
+            v-model="checkedCategories"
+            :value="category"
+            type="checkbox"
+            @change="onInput()"
           />
-        </div>
-        <ul
-          class="custom-checkbox"
-          :class="'selected-' + selectedTag"
-          v-if="hasCategories"
-        >
-          <li v-for="(category, index) of featured_tags" :key="index">
-            <label @click="searchFilterReset">
-              <input
-                :id="category"
-                type="checkbox"
-                :value="category.tag"
-                v-model="checkedCategories"
-              />
-              <span class="title">
-                {{ category.tag }}
-                <img
-                  src="/img/icons/icon-remove-filter.svg"
-                  alt="Remove icon"
-                  loading="lazy"
-                />
-              </span>
-            </label>
-          </li>
-        </ul>
+          <span class="title">
+            {{ category }}
+          </span>
+        </label>
       </div>
-
-      <div class="elements-container">
-        <!-- GRID -->
-        <div class="elements-grid NOPAGINATED">
-          <!-- Default state -->
-          <div
-            class="no-results"
-            v-if="!searchInputValue && checkedCategories.length === 0"
-          >
-            <img
-              src="/img/icons/illustration-search-default.svg"
-              alt="Magnifying glass"
-              loading="lazy"
-            />
-            <h3>{{ empty_title }}</h3>
-            <p>{{ empty_subtitle }}</p>
-          </div>
-          <!-- Results -->
-          <div
-            class="elements-grid__helper"
-            v-if="searchInputValue || checkedCategories.length >= 1"
-          >
-            <div
-              class="card-element search-card"
-              v-for="element in filteredElements"
-              :key="element.id"
-            >
-              <a
-                class="card-element__overall-link"
-                :href="element.route ? element.route : ''"
-                target="blank"
-                rel="noopener noreferrer"
-              >
-                <div class="card-element__header">
-                  <ResponsiveImage
-                    classes="card-element__header__logo"
-                    :src="element.comp_1_article_hero.image.formats.thumbnail"
-                  />
-                </div>
-                <div
-                  class="card-element__meta"
-                  :class="{ 'meta--with-categories': hasCategories }"
-                >
-                  <div class="card-element__meta__header">
-                    <h6
-                      v-for="({ tag }, index) in element.tags"
-                      :key="index"
-                      class="card-element__meta__header__tag"
-                    >
-                      {{ tag.toUpperCase() }}
-                    </h6>
-                    <h5 class="card-element__meta__header__title">
-                      {{ element.title }}
-                    </h5>
-                  </div>
-                </div>
-              </a>
-            </div>
-            <div class="no-results" v-if="searchNoResults">
-              <img
-                src="/img/icons/illustration-no-matches.svg"
-                alt="Magnifying glass"
-                loading="lazy"
-              />
-              <h3>{{ no_results_title }}</h3>
-              <p class="no_results_subtitle">{{ no_results_subtitle }}</p>
-            </div>
-          </div>
+    </div>
+    <div
+      v-if="filteredData.length && (search || checkedCategories.length)"
+      class="card-search__container"
+    >
+      <a
+        v-for="element in filteredData"
+        :key="element.id"
+        :href="element.route ? element.route : ''"
+        class="card-element search-card"
+        target="blank"
+        rel="noopener noreferrer"
+      >
+        <ResponsiveImage
+          v-if="element.Hero.length"
+          class="card-element__image"
+          :src="element.Hero[0].image"
+        />
+        <div class="card-element__content">
+          <h6 v-for="({ tag }, index) in element.tags" :key="index">
+            {{ tag.toUpperCase() }}
+          </h6>
+          <h5>{{ element.title }}</h5>
         </div>
-      </div>
+      </a>
+    </div>
+    <div
+      v-else-if="!filteredData.length && (search || checkedCategories.length)"
+      class="card-search__no-results"
+    >
+      <img
+        src="/img/icons/illustration-no-matches.svg"
+        alt="Magnifying glass"
+        loading="lazy"
+      />
+      <h3>{{ no_results_title }}</h3>
+      <p class="small">
+        {{ no_results_subtitle }}
+      </p>
+    </div>
+    <div v-else class="card-search__no-results">
+      <img
+        src="/img/icons/illustration-search-default.svg"
+        alt="Magnifying glass"
+        loading="lazy"
+      />
+      <h3>{{ empty_title }}</h3>
+      <p>{{ empty_subtitle }}</p>
     </div>
   </div>
 </template>
 
 <script>
 export default {
+  props: {
+    title: { type: String, required: true },
+    searchDataset: { type: Object, required: true },
+    spotlight_title: { type: String, required: false, default: "" },
+    empty_title: { type: String, required: false, default: "" },
+    empty_subtitle: { type: String, required: false, default: "" },
+    no_results_title: { type: String, required: false, default: "" },
+    no_results_subtitle: { type: String, required: false, default: "" },
+    featured_tags: { type: Object, required: false, default: null },
+  },
   data() {
     return {
       search: "",
-      searchInputValue: "",
-      searchNoResults: false,
-      currentPage: 0,
       checkedCategories: [],
-      selectedTag: "All"
+      filteredData: [],
     };
   },
+  computed: {
+    collections() {
+      const newCollection = { ...this.searchDataset.LearnArticle };
+      delete newCollection.meta;
 
-  props: {
-    props: ["value"],
-    title: { type: String, required: true },
-    collection: { type: String, required: false },
-    header: { type: String, required: false, default: "" },
-    pageSize: { type: Number, required: false, default: 10 },
-    isPaginated: { type: Boolean, required: false, default: false },
-    hasCategories: { type: Boolean, default: true },
-    searchDataset: { type: Object, required: true },
-    spotlight_title: String,
-    empty_title: String,
-    empty_subtitle: String,
-    no_results_title: String,
-    no_results_subtitle: String,
-    featured_tags: Object
-  },
+      return Object.values(newCollection)
+        .filter(({ route }) => route.startsWith("/learn/"))
+        .sort((a, b) => {
+          if (!a.title || !b.title) return 0;
 
-  methods: {
-    searchFilter() {
-      const cardEl = document.querySelectorAll(".search-card");
-      let hiddenEls = [];
-      this.resetCheck();
-      this.search = this.searchInputValue.toLowerCase();
+          const titleA = a.title.toLowerCase();
+          const titleB = b.title.toLowerCase();
 
-      cardEl.forEach(item => {
-        if (!item.innerText.toLowerCase().includes(this.search)) {
-          item.classList.add("hidden");
-          hiddenEls.push(".");
-        }
-        if (
-          !this.search ||
-          item.innerText.toLowerCase().includes(this.search)
-        ) {
-          item.classList.remove("hidden");
-        }
-      });
-      if (cardEl.length !== hiddenEls.length) this.searchNoResults = false;
-      if (cardEl.length === hiddenEls.length) this.searchNoResults = true;
-    },
-    searchFilterReset() {
-      this.search = "";
-      const cardEl = document.querySelectorAll(".search-card");
-      this.searchInputValue = "";
-      cardEl.forEach(item => {
-        item.classList.remove("hidden");
-      });
-    },
-    formatCategory(category) {
-      if (!category) return "";
-      return category.includes("_") ? category.replace("_", " ") : category;
-    },
-    setPagesFather(number) {
-      this.currentPage = number;
+          if (titleA < titleB) return -1;
+          if (titleA > titleB) return 1;
+          return 0;
+        });
     },
-    resetCheck() {
-      this.checkedCategories = [];
+    categories() {
+      return Object.values(this.featured_tags).map(({ tag }) => tag);
     },
-    evaluateTags(size) {
-      if (!size) return;
+  },
+  methods: {
+    onInput(fromInput = false) {
+      const search = this.search.toLowerCase();
 
-      if (size < 5) {
-        return "tag-card-" + size;
+      if (fromInput) {
+        this.resetCheck();
       } else {
-        return "tag-card-5";
+        this.resetSearch();
       }
-    }
-  },
-  computed: {
-    filteredElements() {
-      const collections = this.collections;
-      const sortedCollection = collections.sort((a, b) => {
-        if (a.title == null || b.title == null) return 0;
-
-        const titleA = a.title.toLowerCase();
-        const titleB = b.title.toLowerCase();
 
-        if (titleA < titleB) return -1;
-        if (titleA > titleB) return 1;
-        return 0;
-      });
-
-      if (!this.checkedCategories.length) {
-        return sortedCollection;
+      if (this.checkedCategories.length) {
+        this.filteredData = [...this.collections].filter(({ tags }) =>
+          Object.values(tags).some(({ tag }) =>
+            this.checkedCategories.includes(tag),
+          ),
+        );
+      } else {
+        this.filteredData = [...this.collections].filter(({ title }) =>
+          title.toLowerCase().includes(search),
+        );
       }
-      return sortedCollection.filter(({ tags }) =>
-        Object.values(tags).some(({ tag }) =>
-          this.checkedCategories.includes(tag)
-        )
-      );
     },
-
-    pagedArray() {
-      const start = this.currentPage * this.pageSize;
-      const end = start + this.pageSize;
-      return this.filteredElements.slice(start, end);
+    resetSearch() {
+      if (this.search) {
+        this.search = "";
+      }
     },
-
-    collections() {
-      const { meta, ...newCollection } = { ...this.searchDataset.LearnArticle };
-      return Object.values(newCollection);
+    resetCheck() {
+      if (this.checkedCategories.length) {
+        this.checkedCategories = [];
+      }
     },
-
-    categories() {
-      const data = [];
-      this.collections.forEach(elem => {
-        Object.values(elem.tags).forEach(({ tag }) => data.push(tag));
-      });
-      return [...new Set(data)];
-    }
-  }
+  },
 };
 </script>
 
-<style lang="scss">
-@import "../../../sass/functions/theme";
+<style lang="scss" scoped>
 @import "../../../sass/_text.scss";
 @import "@lkmx/flare/src/functions/respond-to";
 
-.learn-search {
+.card-search {
   display: grid;
   grid-template-columns: 1fr;
   gap: var(--f-gutter-xl);
-  margin-top: 0;
   align-content: start;
   text-align: center;
+  padding: 32px var(--f-gutter);
 
-  @include respond-to("<=m") {
-    grid-template-columns: 1fr;
+  * {
+    margin: 0;
   }
 
-  @include respond-to("<=s") {
-    padding: 32px var(--f-gutter);
-  }
+  &__filters {
+    display: grid;
+    justify-content: center;
+    gap: 32px;
+    padding: 26px 0 var(--f-gutter) 0;
+
+    .titles {
+      h5 {
+        color: var(--color-ver2-primary-orange);
+        text-transform: uppercase;
+      }
 
-  .titles {
-    .mini-title {
-      color: var(--color-ver2-primary-orange);
-      text-transform: uppercase;
+      h2 {
+        font-family: var(--f-default-headers-font);
+        font-size: 36px;
+        font-weight: 600;
+        line-height: 42px;
+      }
     }
 
-    h2 {
-      font-family: var(--f-default-headers-font);
-      font-size: 36px;
-      font-weight: 600;
-      line-height: 42px;
+    input.search {
+      max-width: 400px;
+      margin: auto;
+      background: var(--color-neutral-dark-mode-04);
+      background-image: url("/img/icons/search-icon-gray.svg");
+      background-repeat: no-repeat;
+      border: none;
+      background-position: 8px;
+      padding-left: 32px;
+
+      &::placeholder {
+        color: var(--color-neutral-dark-mode-06);
+        font-size: 16px;
+      }
     }
-  }
 
-  .filter {
-    &.v3 {
-      display: grid;
+    .chips {
+      gap: 10px;
+      display: flex;
       justify-content: center;
-      gap: 32px;
-      padding: 26px 0 var(--f-gutter) 0;
-      * {
-        margin: 0;
-      }
-      .custom-checkbox {
-        gap: 10px;
-        display: flex;
-        justify-content: center;
-        li {
-          text-align: center;
-          display: grid;
-          align-items: center;
-          font-size: 16px;
-          color: var(--color-neutral-dark-mode-05);
-          font-family: hind;
-          * {
-            margin: 0;
-          }
-          label {
-            padding: 0;
-            border: 0;
-            transition: 0.2s ease;
+      flex-wrap: wrap;
+
+      label {
+        height: 36px;
+        display: grid;
+        align-items: center;
+        border-radius: 100px;
+        padding: 7px 16px 5px 16px;
+        border: none;
+        background-color: var(--color-neutral-dark-mode-04);
+        transition: 0.3s ease;
+        user-select: none;
+        cursor: pointer;
 
-            &:hover {
-              color: var(--color-analog-primary-white);
-            }
-            span {
-              display: grid;
-              gap: 2px;
-              grid-auto-flow: column;
-              align-items: center;
-              font-size: 18px;
-              text-transform: capitalize;
-              border-radius: 100px;
-              padding: 7px 16px 5px 16px;
-              border: none;
-              background-color: var(--color-neutral-dark-mode-04);
-              color: var(--color-neutral-dark-mode-06);
-              font-weight: 600;
+        &:has(input:checked) {
+          background-color: var(--color-ver2-primary-orange);
+        }
 
-              transition: 0.2s ease;
-              img {
-                width: 0px;
-                height: 0px;
-              }
-            }
-            input {
-              &:checked {
-                ~ .title {
-                  background-color: var(--color-ver2-primary-orange);
-                  border: none;
-                }
-              }
-            }
-          }
-          span {
-            padding: 8px;
-            border: 1px solid white;
-            border-radius: 4px;
-            cursor: pointer;
-          }
+        input[type="checkbox"] {
+          display: none;
         }
-      }
-      .search-filter {
-        max-width: 400px;
-        margin: auto;
-        background: var(--color-neutral-dark-mode-04);
-        background-image: url("/img/icons/search-icon-gray.svg");
-        background-repeat: no-repeat;
-        border: none;
-        background-position: 8px;
-        padding-left: 32px;
 
-        &::placeholder {
+        span {
+          line-height: 16px;
+          font-weight: 600;
+          font-size: 18px;
           color: var(--color-neutral-dark-mode-06);
-          font-size: 16px;
+          font-family: "Hind";
+          text-transform: capitalize;
         }
       }
     }
   }
-  .elements-container {
-    .elements-grid {
-      display: grid;
 
-      &__helper {
-        display: grid;
-        grid-template-columns: repeat(auto-fit, minmax(3, 1fr));
-        @include respond-to("<=xs") {
-          justify-content: center;
-          grid-template-columns: repeat(auto-fit, minmax(250px, 380px));
-        }
-        @include respond-to(">=l") {
-          grid-template-columns: repeat(3, 1fr);
-        }
-        @include respond-to(">=xl") {
-          grid-template-columns: repeat(3, 1fr);
-        }
-        gap: var(--f-gutter);
-        .card-element {
-          border-radius: var(--f-radius);
-          overflow: hidden;
-          background: var(--theme-card-bg-default);
-          transition: 0.2s ease;
-          display: grid;
-          text-align: center;
-          border-radius: 10px;
-          * {
-            margin: 0;
-          }
-          &__overall-link {
-            display: grid;
-            gap: var(--f-gutter);
-            padding: var(--f-gutter);
-          }
-          &__header {
-            display: grid;
-            grid-template-columns: 1fr;
-            align-items: start;
-            gap: 4px;
-            &__logo {
-              border-radius: 10px;
-              padding: 0;
-              object-fit: cover;
-              height: 206px;
-              width: 100%;
-              background-color: var(--color-neutral-dark-mode-04);
-            }
-          }
+  &__container {
+    display: grid;
+    justify-content: center;
+    gap: 26px;
+
+    @include respond-to(">=m") {
+      grid-template-columns: repeat(2, 1fr);
+    }
 
-          &__meta {
-            display: grid;
-            gap: 0;
-            text-align: left;
-            &__header {
-              display: grid;
-              gap: 0;
-              align-content: start;
-              &__tag {
-                color: var(--color-ver2-secondary-orange);
-              }
-              &__title {
-                color: white;
-              }
-            }
-            p {
-              min-width: 196px;
-            }
-          }
-          &.hidden {
-            display: none;
-          }
+    @include respond-to(">=l") {
+      grid-template-columns: repeat(3, 1fr);
+    }
 
-          & img {
-            object-fit: cover;
-            //width: 100%;
-            aspect-ratio: 1 / 1;
-          }
+    .card-element {
+      display: flex;
+      flex-direction: column;
+      text-align: center;
+      transition: 0.5s ease;
+      gap: var(--f-gutter);
+      padding: var(--f-gutter);
+      border-radius: var(--f-radius);
+      background: var(--theme-card-bg-default);
 
-          &:hover {
-            background: var(--color-neutral-dark-mode-04);
-          }
+      &:hover {
+        background: var(--color-neutral-dark-mode-04);
+      }
 
-          * {
-            margin: 0;
-          }
-        }
+      &__image {
+        overflow: hidden;
+        border-radius: 10px;
       }
 
-      .no-results {
+      &__content {
         display: grid;
-        grid-column: span 5;
-        justify-items: center;
-        gap: var(--f-gutter);
-        padding: var(--f-gutter-l) 0;
-        * {
-          margin: 0;
-        }
-        img {
-          max-width: 150px;
-        }
-        p {
-          max-width: 405px;
-          text-align: center;
+        gap: 0;
+        text-align: left;
+        align-content: start;
+        color: white;
 
-          span {
-            @include respond-to(">=m") {
-              display: block;
-            }
-          }
+        h6 {
+          color: var(--color-ver2-secondary-orange);
         }
+      }
+    }
+  }
 
-        .no_results_subtitle {
-          max-width: 190px;
-        }
+  &__no-results {
+    display: grid;
+    justify-items: center;
+    gap: var(--f-gutter);
+    padding: var(--f-gutter-l) 0;
+
+    img {
+      max-width: 150px;
+    }
+
+    p {
+      max-width: 405px;
+      text-align: center;
+
+      &.small {
+        max-width: 190px;
       }
     }
   }
diff --git a/src/components/dynamic/ecosystem/Filters.vue b/src/components/dynamic/ecosystem/Filters.vue
index 5955f584..cff22d48 100644
--- a/src/components/dynamic/ecosystem/Filters.vue
+++ b/src/components/dynamic/ecosystem/Filters.vue
@@ -2,26 +2,27 @@
   <div class="filters">
     <div class="filters__search">
       <input
+        v-model="search"
         class="search"
         type="text"
         placeholder="Search"
-        v-model="search"
-        @input="filterData()"
+        @input="filterData(true)"
       />
     </div>
-    <div class="filters__chips" v-if="categories.length">
+    <div v-if="categories.length" class="filters__chips">
       <span class="title">Filter:</span>
       <div class="chips">
         <label
-          :for="category"
           v-for="(category, index) of categories"
           :key="index"
+          :for="category"
         >
           <input
             :id="category"
-            type="checkbox"
-            :value="category"
             v-model="checkedCategories"
+            :value="category"
+            type="checkbox"
+            @change="filterData()"
           />
           <span>{{ formatName(category) }}</span>
         </label>
@@ -35,35 +36,49 @@ export default {
   props: {
     title: {
       type: String,
-      required: true
+      required: true,
     },
     collections: {
       type: Array,
-      required: true
+      required: true,
     },
     categories: {
       type: Array,
-      required: true
-    }
+      required: true,
+    },
   },
   data() {
     return {
       search: "",
       checkedCategories: [],
-      filteredData: [...this.collections]
+      filteredData: [...this.collections],
     };
   },
+  watch: {
+    filteredData() {
+      this.emitData();
+    },
+  },
+  mounted() {
+    this.emitData();
+  },
   methods: {
-    filterData() {
+    filterData(fromInput = false) {
       const searchValue = this.search.toLowerCase();
 
+      if (fromInput) {
+        this.resetCheck();
+      } else {
+        this.resetSearch();
+      }
+
       if (this.checkedCategories.length) {
-        this.filteredData = [...this.collections].filter(item =>
-          item.types.some(tag => this.checkedCategories.includes(tag.name))
+        this.filteredData = [...this.collections].filter((item) =>
+          item.types.some((tag) => this.checkedCategories.includes(tag.name)),
         );
       } else {
-        this.filteredData = [...this.collections].filter(item =>
-          item.title.toLowerCase().includes(searchValue)
+        this.filteredData = [...this.collections].filter((item) =>
+          item.title.toLowerCase().includes(searchValue),
         );
       }
     },
@@ -80,26 +95,10 @@ export default {
         this.checkedCategories = [];
       }
     },
-    onInput() {
-      this.resetCheck();
-      this.filterData();
-    },
     emitData() {
       this.$emit("filterData", this.filteredData);
-    }
-  },
-  mounted() {
-    this.emitData();
-  },
-  watch: {
-    checkedCategories() {
-      this.resetSearch();
-      this.filterData();
     },
-    filteredData() {
-      this.emitData();
-    }
-  }
+  },
 };
 </script>
 
diff --git a/src/templates/LearnPortal.vue b/src/templates/LearnPortal.vue
index 5aba5e5f..ac374509 100644
--- a/src/templates/LearnPortal.vue
+++ b/src/templates/LearnPortal.vue
@@ -2,10 +2,10 @@
   <default-layout class="learn-subpage">
     <column
       v-for="(component, index) in $context.components"
+      :key="index"
       class="bg-black-gradient learn-subpage__content"
       :class="[`comp-name__${component.comp_name}`]"
       :mode="getColumnMode(component.comp_name)"
-      :key="index"
     >
       <block>
         <component :is="component.comp_name" v-bind="component">
@@ -31,7 +31,7 @@ import {
   addScrollSmooth,
   pageMetaData,
   metaDataArray,
-  canonicalTag
+  canonicalTag,
 } from "@/utils";
 import Carousel from "@/components/dynamic/carousel/Carousel.vue";
 import LearnHeader from "@/components/dynamic/heros/LearnHeader.vue";
@@ -47,35 +47,35 @@ export default {
     OptionalCalloutBox,
     Callout,
     CtaGrid,
-    CardSearch
+    CardSearch,
   },
   metaInfo() {
     return {
       title: this.getMetaData.title,
       meta: metaDataArray(this.getMetaData),
-      link: canonicalTag(this.getMetaData)
+      link: canonicalTag(this.getMetaData),
     };
   },
-  methods: {
-    getColumnMode(compName) {
-      return compName === "carousel" || compName === "learn-header"
-        ? "full"
-        : "normal";
-    }
-  },
   computed: {
     getMetaData() {
       return pageMetaData(this.$page, this.$context.route);
-    }
+    },
   },
   watch: {
     $route: {
-      handler(to, from) {
+      handler(to) {
         addScrollSmooth(to);
       },
-      immediate: true
-    }
-  }
+      immediate: true,
+    },
+  },
+  methods: {
+    getColumnMode(compName) {
+      return compName === "carousel" || compName === "learn-header"
+        ? "full"
+        : "normal";
+    },
+  },
 };
 </script>