From 7fa4fd75d64d73d2b11b721953c8d069565f0c5a Mon Sep 17 00:00:00 2001
From: luishsf <49794990+luishsf@users.noreply.github.com>
Date: Wed, 6 Dec 2023 17:33:20 -0300
Subject: [PATCH] update content ai home view

---
 .../repository/home/HomeRepositoryCard.vue    |  39 ++-
 src/components/repository/sidebar/SideBar.vue |   3 -
 src/layout/dashboard/DashboardLayout.vue      | 312 +++++++++---------
 src/locales/pt_br.json                        |   4 +-
 src/views/repository/content/Bases.vue        | 147 +++++----
 src/views/repository/content/BasesForm.vue    |   3 -
 src/views/repository/content/Navigation.vue   |  34 ++
 7 files changed, 303 insertions(+), 239 deletions(-)
 create mode 100644 src/views/repository/content/Navigation.vue

diff --git a/src/components/repository/home/HomeRepositoryCard.vue b/src/components/repository/home/HomeRepositoryCard.vue
index 163720581..29c68c79e 100644
--- a/src/components/repository/home/HomeRepositoryCard.vue
+++ b/src/components/repository/home/HomeRepositoryCard.vue
@@ -14,7 +14,7 @@
         </div>
 
         <div class="unnnic-card-intelligence__header__buttons">
-          <div v-if="hasIntegrationDefined && !hasIntegrationCheckError">
+          <div v-if="type !== 'base' && hasIntegrationDefined && !hasIntegrationCheckError">
             <unnnic-tool-tip
                side="top"
                :text="hasIntegration ?
@@ -33,8 +33,22 @@
             </unnnic-tool-tip>
           </div>
 
+          <div v-else>
+            <unnnic-tool-tip
+               side="top"
+               text="Teste rápido"
+               enabled
+             >
+              <unnnic-button
+                iconCenter="mode_comment"
+                size="small"
+                class="mr-2"
+                type="alternative"
+              />
+            </unnnic-tool-tip>
+          </div>
+
           <unnnic-dropdown
-            v-if="type === 'repository'"
             position="bottom-left"
             :open.sync="dropdownOpen"
           >
@@ -48,7 +62,7 @@
               />
             </div>
 
-            <div v-if=" repositoryDetail.repository_type === 'classifier'">
+            <div v-if="repositoryDetail.repository_type === 'classifier'">
               <unnnic-dropdown-item @click="showDetailModal(intentModal)">
                 <div class="unnnic-card-intelligence__header__buttons__dropdown">
                   <unnnic-icon-svg size="sm" icon="graph-stats-1" />
@@ -87,7 +101,18 @@
 
             </div>
 
-            <div v-else>
+            <div v-else-if="type === 'base'">
+              <unnnic-dropdown-item>
+                <div class="unnnic-card-intelligence__header__buttons__dropdown">
+                  <unnnic-icon-svg size="sm" icon="delete" scheme="feedback-red"/>
+                  <div :style="{color: '#E53E3E'}">
+                    Excluir base
+                  </div>
+                </div>
+              </unnnic-dropdown-item>
+            </div>
+
+            <div v-else-if="type === 'repository'">
               <unnnic-dropdown-item>
                 <div class="unnnic-card-intelligence__header__buttons__dropdown">
                   <unnnic-icon-svg size="sm" icon="article" />
@@ -388,9 +413,9 @@ export default {
       };
     },
     intelligenceForce() {
-      const scoreObject = this.repositoryDetail.repository_score;
-      const scoreResult = (scoreObject.evaluate_size_score
-      + scoreObject.intents_balance_score + scoreObject.intents_size_score) / 3;
+      const scoreObject = this.repositoryDetail?.repository_score;
+      const scoreResult = (scoreObject?.evaluate_size_score
+      + scoreObject?.intents_balance_score + scoreObject?.intents_size_score) / 3;
       return scoreResult.toFixed(0);
     },
   },
diff --git a/src/components/repository/sidebar/SideBar.vue b/src/components/repository/sidebar/SideBar.vue
index 76f428a33..a9b17395d 100644
--- a/src/components/repository/sidebar/SideBar.vue
+++ b/src/components/repository/sidebar/SideBar.vue
@@ -605,9 +605,6 @@ export default {
       &__select {
         z-index: 10;
         padding-bottom: $unnnic-spacing-stack-sm;
-        .icon-right {
-          transform: translateY(110%)
-        }
         .dropdown > div > input {
           height: auto;
         }
diff --git a/src/layout/dashboard/DashboardLayout.vue b/src/layout/dashboard/DashboardLayout.vue
index 13ddb12d6..18c57ff58 100644
--- a/src/layout/dashboard/DashboardLayout.vue
+++ b/src/layout/dashboard/DashboardLayout.vue
@@ -1,156 +1,156 @@
-<template>
-  <div class="dashboard-layout">
-    <div
-      :class="[collapse
-        ? 'dashboard-layout__main-panel'
-        : 'dashboard-layout__main-panel--collapsed',
-        basesNewOrBasesEdit ? 'none' : null]"
-        >
-          <side-bar v-if="!basesNewOrBasesEdit" @collapse="collapseHandle()" />
-      <router-view />
-    </div>
-    <tour
-      v-if="getFinalModal && getFinalMessage !== 'true'"
-      :step-count="1"
-      name="tutorial_button"
-      />
-  </div>
-</template>
-<script>
-
-import SideBar from '@/components/repository/sidebar/SideBar';
-import UserAvatar from '@/components/user/UserAvatar';
-import CustomIcon from '@/components/shared/CustomIcon';
-import { mapActions, mapGetters } from 'vuex';
-import Tour from '@/components/Tour';
-import Analytics from '@/utils/plugins/analytics';
-
-
-export default {
-  name: 'DashboardLayout',
-  components: {
-    SideBar,
-    UserAvatar,
-    CustomIcon,
-    Tour,
-  },
-  data() {
-    return {
-      collapse: true,
-      isLoading: false,
-      isFullPage: true,
-      profilyStyle: '',
-      beginnerTutorialModalOpen: false,
-    };
-  },
-  computed: {
-    ...mapGetters([
-      'getCurrentRepository',
-      'myProfile',
-      'authenticated',
-      'versionEnabled',
-      'getFinalModal',
-      'getFinalMessage',
-      'getRequirements',
-    ]),
-    hasLoaded() {
-      if (this.getCurrentRepository.params) return true;
-      return false;
-    },
-    warningsCount() {
-      if (!this.getCurrentRepository
-        || !this.getCurrentRepository.selectedRepositoryselectedRepository) return 0;
-      return Object.keys(this.getRequirements.languages_warnings).length;
-    },
-    tutorialEnabled() {
-      return runtimeVariables.get('VUE_APP_BOTHUB_WEBAPP_TUTORIAL_ENABLED');
-    },
-    categoryIcon() {
-      if (!this.getCurrentRepository
-      || !this.getCurrentRepository.categories_list
-      || this.getCurrentRepository.categories_list.length < 1) return 'botinho';
-      return this.getCurrentRepository.categories_list[0].icon || 'botinho';
-    },
-
-    basesNewOrBasesEdit() {
-      return this.$route.name === 'repository-content-bases-new'
-        || this.$route.name === 'repository-content-bases-edit'
-    },
-  },
-  destroyed(){
-    this.setRepository({})
-    this.resetRepositoryVersion()
-  },
-  methods: {
-    ...mapActions([
-      'logout',
-      'getFirstFiveVersions',
-      'setTutorialMenuActive',
-      'setRepository',
-      'resetRepositoryVersion'
-    ]),
-    openBeginnerTutorialModal() {
-      if (runtimeVariables.get('VUE_APP_BOTHUB_WEBAPP_TUTORIAL_ENABLED')) {
-        this.setTutorialMenuActive();
-        Analytics.send({ category: 'Tutorial', event: 'tutorial open event' });
-      }
-    },
-    collapseHandle() {
-      this.collapse = !this.collapse;
-    },
-    routerHandle(path) {
-      this.$router.push({
-        name: `${path}`,
-      });
-    },
-    openNewRepository() {
-      this.$router.push({
-        name: 'new',
-      });
-    },
-    signIn() {
-      this.$router.push({
-        name: 'signIn',
-      });
-    },
-    signUp() {
-      this.$router.push({
-        name: 'signUp',
-      });
-    },
-  },
-};
-</script>
-<style lang="scss">
-@import '~@/assets/scss/utilities.scss';
-@import '~@/assets/scss/colors.scss';
-@import '~@/assets/scss/variables.scss';
-
-html{
-  overflow-y:auto
-}
-.dashboard-layout {
-
-  &__notification{
-    top: 0;
-    position: fixed;
-    z-index: 9;
-  }
-
-  &__main-panel {
-    width: calc( 100% - #{$menu-expanded-size - 30});
-    position: relative;
-    float: right;
-    padding: 0 1rem;
-
-    &--collapsed {
-       position: relative;
-       float: right;
-       width: calc( 100% - #{$menu-collapsed-size - 30});
-    }
-  }
-}
-.none {
-  width: 100%;
-}
-</style>
+<template>
+  <div class="dashboard-layout">
+    <div
+      :class="[collapse
+        ? 'dashboard-layout__main-panel'
+        : 'dashboard-layout__main-panel--collapsed',
+        basesNewOrBasesEdit ? 'none' : null]"
+        >
+          <side-bar v-if="!basesNewOrBasesEdit" @collapse="collapseHandle()" />
+      <router-view />
+    </div>
+    <tour
+      v-if="getFinalModal && getFinalMessage !== 'true'"
+      :step-count="1"
+      name="tutorial_button"
+      />
+  </div>
+</template>
+<script>
+
+import SideBar from '@/components/repository/sidebar/SideBar';
+import UserAvatar from '@/components/user/UserAvatar';
+import CustomIcon from '@/components/shared/CustomIcon';
+import { mapActions, mapGetters } from 'vuex';
+import Tour from '@/components/Tour';
+import Analytics from '@/utils/plugins/analytics';
+
+
+export default {
+  name: 'DashboardLayout',
+  components: {
+    SideBar,
+    UserAvatar,
+    CustomIcon,
+    Tour,
+  },
+  data() {
+    return {
+      collapse: true,
+      isLoading: false,
+      isFullPage: true,
+      profilyStyle: '',
+      beginnerTutorialModalOpen: false,
+    };
+  },
+  computed: {
+    ...mapGetters([
+      'getCurrentRepository',
+      'myProfile',
+      'authenticated',
+      'versionEnabled',
+      'getFinalModal',
+      'getFinalMessage',
+      'getRequirements',
+    ]),
+    hasLoaded() {
+      if (this.getCurrentRepository.params) return true;
+      return false;
+    },
+    warningsCount() {
+      if (!this.getCurrentRepository
+        || !this.getCurrentRepository.selectedRepositoryselectedRepository) return 0;
+      return Object.keys(this.getRequirements.languages_warnings).length;
+    },
+    tutorialEnabled() {
+      return runtimeVariables.get('VUE_APP_BOTHUB_WEBAPP_TUTORIAL_ENABLED');
+    },
+    categoryIcon() {
+      if (!this.getCurrentRepository
+      || !this.getCurrentRepository.categories_list
+      || this.getCurrentRepository.categories_list.length < 1) return 'botinho';
+      return this.getCurrentRepository.categories_list[0].icon || 'botinho';
+    },
+
+    basesNewOrBasesEdit() {
+      return (this.$route.name === 'repository-content-bases-new'
+        || this.$route.name === 'repository-content-bases-edit') || this.$route.name.includes('content')
+    },
+  },
+  destroyed(){
+    this.setRepository({})
+    this.resetRepositoryVersion()
+  },
+  methods: {
+    ...mapActions([
+      'logout',
+      'getFirstFiveVersions',
+      'setTutorialMenuActive',
+      'setRepository',
+      'resetRepositoryVersion'
+    ]),
+    openBeginnerTutorialModal() {
+      if (runtimeVariables.get('VUE_APP_BOTHUB_WEBAPP_TUTORIAL_ENABLED')) {
+        this.setTutorialMenuActive();
+        Analytics.send({ category: 'Tutorial', event: 'tutorial open event' });
+      }
+    },
+    collapseHandle() {
+      this.collapse = !this.collapse;
+    },
+    routerHandle(path) {
+      this.$router.push({
+        name: `${path}`,
+      });
+    },
+    openNewRepository() {
+      this.$router.push({
+        name: 'new',
+      });
+    },
+    signIn() {
+      this.$router.push({
+        name: 'signIn',
+      });
+    },
+    signUp() {
+      this.$router.push({
+        name: 'signUp',
+      });
+    },
+  },
+};
+</script>
+<style lang="scss">
+@import '~@/assets/scss/utilities.scss';
+@import '~@/assets/scss/colors.scss';
+@import '~@/assets/scss/variables.scss';
+
+html{
+  overflow-y:auto
+}
+.dashboard-layout {
+
+  &__notification{
+    top: 0;
+    position: fixed;
+    z-index: 9;
+  }
+
+  &__main-panel {
+    width: calc( 100% - #{$menu-expanded-size - 30});
+    position: relative;
+    float: right;
+    padding: 0 1rem;
+
+    &--collapsed {
+       position: relative;
+       float: right;
+       width: calc( 100% - #{$menu-collapsed-size - 30});
+    }
+  }
+}
+.none {
+  width: 100%;
+}
+</style>
diff --git a/src/locales/pt_br.json b/src/locales/pt_br.json
index d4fd873ef..b0f959e92 100644
--- a/src/locales/pt_br.json
+++ b/src/locales/pt_br.json
@@ -325,9 +325,9 @@
       "confirm_with_username_placeholder": "Confirme seu nome de usuário para excluir a conta",
       "confirm_remove_integrate": "Remover integração",
       "bases": {
-        "knowledge_bases": "Bases de conhecimento",
+        "knowledge_bases": "{n} base de conteúdo adicionada | {n} bases de conteúdo adicionadas",
         "description": "As Bases de Conhecimento são as fontes de texto de uma Inteligência de Conteúdo. Distribua o texto da inteligência em bases, reunindo informações semelhantes sobre cada uma. Saiba mais em nossa <a href='https://docs.weni.ai/l/pt/bothub/introdu-o-intelig-ncia-de-conte-do' target='_blank' class='repository-base__description__text--link'>documentação</a>.",
-        "new_knowledge_base": "Adicionar nova base",
+        "new_knowledge_base": "Criar base de conteúdo",
         "adjustments": "Configurações",
         "adjustments_subtitle": "Gerencie as configurações básicas da Inteligência",
         "adjustments_button": "Salvar alterações",
diff --git a/src/views/repository/content/Bases.vue b/src/views/repository/content/Bases.vue
index c5025acc2..18ac00049 100644
--- a/src/views/repository/content/Bases.vue
+++ b/src/views/repository/content/Bases.vue
@@ -5,70 +5,70 @@
         <div class="repository-base__title">
           <unnnic-card
             type="title"
-            :title="$t('webapp.home.description')"
+            :title="repository.name"
             enabled
-            icon="paginate-filter-text-1"
+            icon="neurology"
             infoPosition="right"
             :hasInformationIcon="false"
-            scheme="aux-orange"
+            scheme="aux-blue"
           />
         </div>
-        <div>
-          <vue-markdown
-            :source="repository.description"
-            show
-            html
-            :breaks="false"
-            :linkify="false"
-            emoji
-            typographer
-            toc
-            toc-id="toc"
-            class="repository-base__description__text markdown-body"
-          />
-          <p v-if="repository.description" class="repository-base__description__text" />
-          <p v-else>
-            <i class="text-color-grey-dark">{{ $t("webapp.home.no_description") }}</i>
-          </p>
-        </div>
-        <div class="repository-base__description__header">
+        <section class="repository-base__description__header">
           <div>
-            <unnnic-tag
-              v-for="(category, index) in getAllCategories"
-              :key="index"
-              class="repository-base__header__tag"
-              :text="category"
-              disabled
-              scheme="background-sky"
+            <vue-markdown
+              :source="repository.description"
+              show
+              html
+              :breaks="false"
+              :linkify="false"
+              emoji
+              typographer
+              toc
+              toc-id="toc"
+              class="repository-base__description__text markdown-body"
             />
+            <p v-if="repository.description" class="repository-base__description__text" />
+            <p v-else>
+              <i class="text-color-grey-dark">{{ $t("webapp.home.no_description") }}</i>
+            </p>
+            <div style="display: flex">
+                <unnnic-tag
+                  v-for="(category, index) in getAllCategories"
+                  :key="index"
+                  class="repository-base__header__tag"
+                  :text="category"
+                  disabled
+                  scheme="background-sky"
+                />
+            </div>
           </div>
-        </div>
+          <!-- <unnnic-button
+            @click.prevent.stop="changeIntegrateModalState(true)"
+            iconCenter="settings"
+            type="secondary"
+          /> -->
+          <repository-content-navigation />
+        </section>
       </div>
       <hr />
-      <div>
-        <unnnic-card
-          type="title"
-          :title="$t('webapp.home.bases.knowledge_bases')"
-          enabled
-          icon="book-address-1-2"
-          infoPosition="right"
-          :hasInformationIcon="false"
-          scheme="aux-pink"
+      <div class="repository-base__bases-count">
+        <h1
+          class="u font secondary title-sm bold"
+          v-html="$tc('webapp.home.bases.knowledge_bases', this.bases.length)"
         />
-        <p
-          class="repository-base__description__text"
-          v-html="$t('webapp.home.bases.description')"
-        ></p>
+        <unnnic-button @click="createNewBase" class="ml-auto" iconLeft="add-1">
+          {{ $t('webapp.home.bases.new_knowledge_base') }}
+        </unnnic-button>
       </div>
-      <div class="repository-base__cards">
-        <unnnic-card
-          clickable
-          :text="$t('webapp.home.bases.new_knowledge_base')"
-          type="blank"
-          icon="add-1"
-          class="repository-base__cards__new"
-          @click.native="createNewBase()"
+
+      <div class="repository-base__search-base">
+        <unnnic-input
+          icon-left="search-1"
+          placeholder="Pesquisar base de conteúdo"
         />
+      </div>
+
+      <div class="repository-base__cards">
         <home-repository-card
           type="base"
           v-for="base in bases"
@@ -86,13 +86,15 @@ import RepositoryViewBase from '@/components/repository/RepositoryViewBase';
 import VueMarkdown from 'vue-markdown';
 import RepositoryBase from '../Base';
 import HomeRepositoryCard from '@/components/repository/home/HomeRepositoryCard';
+import RepositoryContentNavigation from './Navigation';
 
 export default {
   name: 'RepositoryBase',
   components: {
     RepositoryViewBase,
     VueMarkdown,
-    HomeRepositoryCard
+    HomeRepositoryCard,
+    RepositoryContentNavigation
   },
   extends: RepositoryBase,
   data() {
@@ -161,19 +163,6 @@ export default {
 @import "~@weni/unnnic-system/src/assets/scss/unnnic.scss";
 
 .repository-base {
-  &__title {
-    font-size: 1.75rem;
-    font-weight: $font-weight-medium;
-    display: flex;
-    align-items: center;
-    font-family: $font-family;
-    color: $color-fake-black;
-
-    div {
-      margin: 0 0 0.2rem 0.2rem;
-    }
-  }
-
   &__header {
     display: flex;
 
@@ -188,7 +177,6 @@ export default {
     &__header {
       display: flex;
       justify-content: space-between;
-      align-items: flex-start;
     }
 
     &__text, i {
@@ -215,6 +203,28 @@ export default {
       margin-bottom: $unnnic-inline-sm;
     }
   }
+
+  &__search-base {
+      margin: $unnnic-spacing-md 0 $unnnic-spacing-sm;
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: $unnnic-spacing-stack-sm $unnnic-spacing-inline-md;
+
+      .unnnic-form {
+        flex: 1;
+      }
+    }
+
+    &__bases-count {
+      display: flex;
+      align-items: center;
+    }
+    ::v-deep {
+      .input.size-md {
+        height: auto;
+      }
+    }
 }
 .tooltipStyle::after {
   font-size: $unnnic-font-size-body-md;
@@ -223,7 +233,7 @@ export default {
   font-family: $font-family;
 }
 .markdown-body {
-  margin: 1.5rem 0;
+  margin: 1rem 0;
 
   a {
     color: $color-primary;
@@ -243,7 +253,7 @@ export default {
     display: none;
   }
   .unnnic-card-intelligence__description {
-    -webkit-line-clamp: 5;
+    -webkit-line-clamp: 2;
   }
   .repository-base__description__text--link {
     color: $unnnic-color-neutral-dark;
@@ -255,4 +265,5 @@ hr {
   background: $unnnic-color-neutral-soft;
   height: 1px;
 }
+
 </style>
diff --git a/src/views/repository/content/BasesForm.vue b/src/views/repository/content/BasesForm.vue
index ccc17907a..aafbae8f2 100644
--- a/src/views/repository/content/BasesForm.vue
+++ b/src/views/repository/content/BasesForm.vue
@@ -536,9 +536,6 @@ export default {
       align-items: center;
     }
   }
-  .icon-right {
-    transform: translateY(100%);
-  }
   .input.size-md {
     height: 46px;
   }
diff --git a/src/views/repository/content/Navigation.vue b/src/views/repository/content/Navigation.vue
new file mode 100644
index 000000000..ac3714863
--- /dev/null
+++ b/src/views/repository/content/Navigation.vue
@@ -0,0 +1,34 @@
+<template>
+  <unnnic-button
+    @click.native="routerHandle('repository-content-adjustments')"
+    iconCenter="settings"
+    type="secondary"
+  />
+</template>
+<script>
+import { mapActions, mapGetters } from 'vuex';
+
+export default {
+  name: 'RepositoryContentNavigation',
+  components: {},
+  data() {
+    return {
+
+    };
+  },
+  methods: {
+    routerHandle(path, opts = {}) {
+      this.$router.push({
+        name: `${path}`,
+        ...opts,
+      });
+    },
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import "~@weni/unnnic-system/dist/unnnic.css";
+@import "~@weni/unnnic-system/src/assets/scss/unnnic.scss";
+
+</style>