Merge branch 'upgrade/pinia' into develop

weni-ai · May 23, 2024 · 9721397 · 9721397
2 parents 551e7c6 + 14e591c
commit 9721397
Show file tree

Hide file tree

Showing 22 changed files with 909 additions and 817 deletions.
diff --git a/package.json b/package.json
@@ -20,7 +20,7 @@
     "vue": "^3.3.11",
     "vue-awesome-swiper": "^5.0.1",
     "vue-router": "^4.2.5",
-    "vuex": "^4.1.0"
+    "pinia": "^2.1.7"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.3.3",

diff --git a/src/App.vue b/src/App.vue
@@ -1,20 +1,20 @@
 <template>
   <div id="app">
     <Header v-show="currentRouteName !== 'Onboarding'" />
-    <router-view />
+    <RouterView />
   </div>
 </template>
 
 <script>
-import { mapGetters } from "vuex";
-import Header from "@/components/Header.vue";
+import Header from '@/components/Header.vue';
+
 export default {
-  name: "app",
+  name: 'app',
   components: {
+    // eslint-disable-next-line vue/no-reserved-component-names
     Header,
   },
   computed: {
-    ...mapGetters(["currentModule"]),
     currentRouteName() {
       return this.$route.name;
     },
@@ -25,13 +25,13 @@ export default {
   mounted() {
     window.parent.postMessage(
       {
-        event: "getConnectBaseURL",
+        event: 'getConnectBaseURL',
       },
-      "*"
+      '*',
     );
-    window.addEventListener("message", (event) => {
+    window.addEventListener('message', (event) => {
       const eventName = event.data && event.data.event;
-      if (eventName === "setConnectBaseURL") {
+      if (eventName === 'setConnectBaseURL') {
         this.connectBaseURL = event.data.connectBaseURL;
         this.translateAllLinks();
       }
@@ -43,46 +43,45 @@ export default {
         return;
       }
       const url = new URL(this.connectBaseURL);
-      const debug = url.host && url.host.includes("develop");
-      document.querySelectorAll("a[href]").forEach((link) => {
+      const debug = url.host && url.host.includes('develop');
+      document.querySelectorAll('a[href]').forEach((link) => {
         const internalHref =
-          link.getAttribute("internal-href") || link.getAttribute("href");
+          link.getAttribute('internal-href') || link.getAttribute('href');
         if (
-          ["http://", "https://"].some((initial) =>
-            internalHref.startsWith(initial)
+          ['http://', 'https://'].some((initial) =>
+            internalHref.startsWith(initial),
           )
         ) {
           return;
         }
         const dashHref = this.connectBaseURL + internalHref;
         if (link.translateLinkConnect) {
-          if (link.getAttribute("href") === dashHref) {
+          if (link.getAttribute('href') === dashHref) {
             return;
           }
-          link.removeEventListener("click", link.translateLinkConnect);
+          link.removeEventListener('click', link.translateLinkConnect);
         }
-        link.setAttribute("internal-href", internalHref);
-        link.setAttribute("href", dashHref);
+        link.setAttribute('internal-href', internalHref);
+        link.setAttribute('href', dashHref);
         const randomId = Math.floor(Math.random() * 100);
         link.addEventListener(
-          "click",
+          'click',
           (link.translateLinkConnect = () => {
             if (debug) {
               console.log(`TranslateLinkConnectId ${randomId}`);
             }
-            link.setAttribute("href", internalHref);
+            link.setAttribute('href', internalHref);
             setTimeout(() => {
-              link.setAttribute("href", dashHref);
+              link.setAttribute('href', dashHref);
             }, 0);
-          })
+          }),
         );
       });
     },
   },
 };
 </script>
 
-
 <style lang="scss">
 * {
   margin: 0;

diff --git a/src/components/Banner.vue b/src/components/Banner.vue
@@ -1,5 +1,8 @@
 <template>
-  <div class="link" tabindex="0">
+  <div
+    tabindex="0"
+    class="link"
+  >
     <div
       :class="[
         'banner',
@@ -8,8 +11,14 @@
       ]"
     >
       <div :class="['banner__content']">
-        <p v-if="!expanded" class="banner__content-icon">
-          <img :src="currentModule.image" alt="Module icon" />
+        <p
+          v-if="!expanded"
+          class="banner__content-icon"
+        >
+          <img
+            :src="currentModule.image"
+            alt="Module icon"
+          />
         </p>
         <h3>{{ currentModule.title }}</h3>
         <p
@@ -21,31 +30,40 @@
           {{ currentModule.description }}
         </p>
 
-        <div v-if="currentModule.watched_percentage > 0" class="progress-bar">
+        <div
+          v-if="currentModule.watched_percentage > 0"
+          class="progress-bar"
+        >
           <div
             class="progress"
             :style="`width:${currentModule.watched_percentage}%`"
           />
         </div>
-        <p v-if="expanded" class="percentage-info">
-          {{`${currentModule.watched_percentage}% completo` }}
+        <p
+          v-if="expanded"
+          class="percentage-info"
+        >
+          {{ `${currentModule.watched_percentage}% completo` }}
         </p>
       </div>
-      <div class="hover" v-if="!expanded">
+      <div
+        class="hover"
+        v-if="!expanded"
+      >
         <div class="links">
-          <router-link
+          <RouterLink
             :to="{
               name: 'Home',
               params: {
                 module_id: currentModule.id,
               },
             }"
           >
-            <unnnic-button type="secondary">Abrir</unnnic-button>
-          </router-link>
+            <UnnnicButton type="secondary">Abrir</UnnnicButton>
+          </RouterLink>
         </div>
         <!-- <unnnic-button type="terciary">gerar certificado</unnnic-button> -->
-        <router-link
+        <RouterLink
           v-if="resumeWhereILeft(currentModule)"
           class="continue__class"
           :to="{
@@ -58,23 +76,24 @@
           }"
         >
           Continuar de onde parei →
-        </router-link>
+        </RouterLink>
       </div>
     </div>
   </div>
 </template>
 
 <script>
 export default {
-  name: "Banner",
+  // eslint-disable-next-line vue/multi-word-component-names
+  name: 'Banner',
   props: {
     expanded: {
       type: Boolean,
       default: false,
     },
     bgGradient: {
       type: String,
-      default: "green-yellow",
+      default: 'green-yellow',
     },
     currentModule: {
       type: Object,
@@ -87,7 +106,7 @@ export default {
         (acumulator, current) => {
           return acumulator.concat(current.class_set);
         },
-        []
+        [],
       );
       const lesson = classes?.find((lesson) => {
         return !lesson.lesson_monitoring.watched;
@@ -211,7 +230,9 @@ export default {
   border-radius: $unnnic-border-radius-md;
   background: rgba($unnnic-color-background-carpet, 0.88);
   backdrop-filter: blur(4px);
-  transition: visibility 0s, opacity 0.1s linear;
+  transition:
+    visibility 0s,
+    opacity 0.1s linear;
 
   .links {
     flex: 1;
@@ -266,9 +287,9 @@ export default {
   }
 }
 
-.percentage-info{
+.percentage-info {
   margin-top: $unnnic-spacing-stack-xs;
   font-weight: $unnnic-font-weight-bold;
   color: $unnnic-color-neutral-darkest;
 }
-</style>
+</style>
diff --git a/src/components/Header.vue b/src/components/Header.vue
@@ -1,14 +1,15 @@
 <template>
   <header class="unnnic-grid-span-12">
-    <unnnicBreadcrumb
+    <UnnnicBreadcrumb
       :crumbs="breadcrumbs"
       @crumbClick="handleCrumbClick"
     />
   </header>
 </template>
 
 <script>
-import { mapGetters } from 'vuex';
+import { useHeaderStore } from '@/stores/header';
+import { mapState } from 'pinia';
 
 export default {
   methods: {
@@ -17,13 +18,15 @@ export default {
     },
   },
   computed: {
-    ...mapGetters(['breadcrumbs']),
-  }
+    ...mapState(useHeaderStore, [
+      'breadcrumbs'
+    ]),
+  },
 };
 </script>
 
 <style scoped lang="scss">
-  header {
-    padding: 0 $unnnic-spacing-stack-md;
-  }
-</style>
+header {
+  padding: 0 $unnnic-spacing-stack-md;
+}
+</style>