layers-design-system 2.3.0 → 2.5.1

package/src/components/LSearchTopics/index.vue

@@ -1,750 +0,0 @@
-<template>
-  <div class="search-topics-page l-col l-d-flex column">
-    <SearchTopicsHeader
-      class="drawer-search-topics-header"
-      :kinds="headerKinds"
-      :query="querySearchTopics"
-      :typing="typing"
-      :loading="loading"
-      :hasAnySelectedTopic="selectedTopics.length > 0"
-      @save="onSave"
-      @close="onClose"
-      @input="onInput"
-    />
-    <div class="px-0 py-2 l-container scroll-y l-flex-grow-1">
-      <template v-if="loading || typing">
-        <div class="gray-70--text searching-label mx-3">
-          Procurando {{ searchingSpan }}...
-        </div>
-      </template>
-      <template v-else-if="hasAnySearchedTopic">
-        <div class="mb-5">
-          <div class="recent-search mb-3 mx-3" v-if="showRecentSearchedTopics">
-            <div class="recent-search-title gray-70--text mb-2 l-text-regular">
-              Buscas recentes
-            </div>
-            <RecentTermSearched
-              v-for="(term, index) in recentTopicsFiltered"
-              @click.native="useRecentTermSearched(term)"
-              :term="term"
-              :key="index"
-              class="mb-2 cursor-pointer"
-              @remove="removeFromRecentTopicsSearched(term)"
-            />
-          </div>
-
-          <div
-            class="topic-item-tag-for-all mx-3"
-            v-if="canSendForAll && !this.hasQuery"
-          >
-            <div class="l-flex lead-light--text l-text-regular">
-              Enviar para todos
-            </div>
-            <l-checkbox v-model="forAllTag"></l-checkbox>
-          </div>
-
-          <div class="results-total mb-2 px-3" v-if="total >= 1 && hasQuery">
-            {{ totalLabel }}
-          </div>
-
-          <div
-            class="topics-searched mb-3"
-            v-for="kind in resultKinds"
-            :key="kind"
-          >
-            <h6
-              v-if="isAllEntities"
-              class="topic-kind-title gray-70--text mb-2 px-3"
-            >
-              {{ getKindNamePlural(kind) }} ({{ getTopicTotal(kind) }})
-            </h6>
-
-            <TopicItemGroup
-              v-for="topic in getTopicHits(kind)"
-              @input="updateSelectedTopics($event)"
-              :topic="topic"
-              :populateTopic="populateTopic"
-              :disabled="forAllTagChecked"
-              :checked="isChecked(topic)"
-              :isCheckedFunction="isChecked"
-              :key="topic.id"
-            />
-            <div v-if="isAllEntities && needShowMore(kind)" class="m-3">
-              <l-button
-                :loading="loading"
-                @click.native="filterForKind(kind)"
-                plain
-                fill
-              >
-                Mostrar mais {{ getKindNamePlural(kind).toLowerCase() }}
-              </l-button>
-            </div>
-
-            <div v-if="!isAllEntities && needShowMore(kind)" class="m-3">
-              <l-button
-                class="ma-3"
-                :loading="loadingMore"
-                @click.native="loadMore()"
-                plain
-                fill
-              >
-                Carregar mais
-              </l-button>
-            </div>
-          </div>
-        </div>
-      </template>
-
-      <template v-else>
-        <div style="display: flex; flex-direction: column; height: 100%; align-items: stretch">
-          <div
-            class="topic-item-tag-for-all empty-tags-groups-for-all mx-3"
-            v-if="canSendForAll && !this.hasQuery"
-          >
-            <div class="l-flex lead-light--text l-text-regular">
-              Enviar para todos
-            </div>
-            <l-checkbox v-model="forAllTag"></l-checkbox>
-          </div>
-          <!-- show placeholder  -->
-          <div class="empty-tags-groups-placeholder" v-if="!querySearchTopics.q">
-            <img src="../../assets/search-topics/empty-tags.svg" />
-            <div class="empty-tags-groups-placeholder-text mt-2">
-              <h3>Busque por marcadores, turmas, alunos e usuários</h3>
-              <span class="text-small lead-light--text">
-                Quando você tiver marcadores e turmas, eles aparecerão aqui.
-              </span>
-            </div>
-          </div>
-          <div v-else-if="!typing && !loading" class="not-found-result mx-3">
-            <h4 class="bold lead--text m-0">Não encontramos resultados</h4>
-            <p class="lead-light--text l-text-regular mt-3 mb-0">
-              Tenha certeza que você está digitando uma palavra-chave correta
-            </p>
-          </div>
-        </div>
-      </template>
-    </div>
-
-    <div class="selected-topics" v-if="selectedTopics && selectedTopics.length">
-      <button
-        class="selected-topics-button l-d-flex l-align-items-center"
-        style="padding: 0;"
-        @click="forAllTagChecked ? (forAllTag = false) : (showSelected = true)"
-      >
-        <div class="selected-topics-button-bg"></div>
-        <div class="ml-2 topics-selected-summary l-flex link--text">
-          {{ topicsSummary }}
-        </div>
-        <l-button class="mr-2 bold link--text" type="text">
-          {{ forAllTagChecked ? 'Limpar' : 'ver tudo' }}
-        </l-button>
-      </button>
-
-      <van-action-sheet
-        v-model="showSelected"
-        lock-scroll
-        style="max-height: 500px; min-height: 180px;"
-      >
-        <div class="l-d-flex m-3 l-align-items-center ">
-          <div class="l-flex lead-light--text l-text-regular">
-            Destinatários selecionados
-          </div>
-          <l-button
-            @click="showSelected = false"
-            circle
-            icon="uil-multiply"
-            class="border-none gray-70--text f-24 p-1"
-          >
-          </l-button>
-        </div>
-
-        <div class="mx-3 mb-3">
-          <l-target-chip
-            v-for="topic in selectedTopics"
-            @remove="removeTopic(topic)"
-            :key="topic.id"
-            :kind="topic.kind"
-            :name="topic.name"
-            :closeable="true"
-            class="mr-2 mb-2"
-          />
-        </div>
-      </van-action-sheet>
-    </div>
-  </div>
-</template>
-
-<script>
-import cloneDeep from 'lodash/cloneDeep'
-import get from "lodash/get"
-import filter from 'lodash/filter'
-import debounce from 'lodash/debounce'
-import keys from 'lodash/keys'
-import difference from 'lodash/difference'
-
-import TopicItemGroup from './TopicItem.vue'
-import RecentTermSearched from './RecentTermSearched.vue'
-import SearchTopicsHeader from './header.vue'
-import showDialogConfirmation from './helpers/showDialogConfirmation'
-import showDiscardChangesDialog from './helpers/showDiscardChangesDialog'
-import { errorHandler } from 'layers-utils'
-
-export default {
-  tagName: 'l-search-topics',
-  name: 'LSearchTopics',
-  components: {
-    TopicItemGroup,
-    RecentTermSearched,
-    SearchTopicsHeader,
-  },
-  // props
-  props: {
-    canSendForAll: {
-      type: Boolean,
-      default: false,
-    },
-    searchTopics: {
-      type: Function,
-    },
-    populateTopic: {
-      type: Function,
-    },
-    alreadySelectedTopics: {
-      type: Array,
-    },
-    recentTopicsSearched: {
-      type: Object,
-    },
-  },
-  // data
-  data: function() {
-    return {
-      forAllTagChecked: false,
-      showSelected: false,
-      selectedTopics: [],
-
-      querySearchTopics: {
-        q: null,
-        kind: '*',
-        page: 0,
-      },
-
-      searchedTopics: {
-        tag: {
-          hits: [],
-          total: 0,
-        },
-        group: {
-          hits: [],
-          total: 0,
-        },
-        member: {
-          hits: [],
-          total: 0,
-        },
-        user: {
-          hits: [],
-          total: 0,
-        },
-      },
-
-      total: 0,
-
-      kinds: ['*', 'tag', 'group', 'member', 'user'],
-      kindsIcons: {
-        tag: 'uil-tag-alt',
-        group: 'uil-users-alt',
-        member: 'uil-graduation-cap',
-        user: 'uil-user',
-        '*': '',
-      },
-
-      // waiters
-      typing: false,
-      loading: false,
-      loadingMore: false,
-    }
-  },
-  watch: {
-    selectedTopics(val) {
-      if (!val || val.length === 0) {
-        this.showSelected = false
-      }
-    },
-    querySearchTopics() {
-      if (!this.typing && !this.loadingMore) this.typing = true
-      this.searchDebounced()
-    },
-  },
-  computed: {
-    searchingSpan() {
-      if (this.querySearchTopics.q) return this.querySearchTopics.q
-      if (this.querySearchTopics.kind === '*') return ''
-      return this.getKindNamePlural(this.querySearchTopics.kind).toLowerCase()
-    },
-    hasQuery() {
-      return this.querySearchTopics.q || this.querySearchTopics.kind !== '*'
-    },
-
-    showRecentSearchedTopics() {
-      if (!this.recentTopicsSearched.data) return false
-      return this.recentTopicsSearched.data.length > 0 && !this.hasQuery
-    },
-
-    filteredSearchedTopics() {
-      return {
-        ...this.searchedTopics,
-        tag: {
-          hits: this.searchedTopics.tag.hits.filter((tag) => tag.id !== '*'),
-          total: this.searchedTopics.tag.total,
-        },
-      }
-    },
-
-    forAllTag: {
-      get() {
-        return this.forAllTagChecked
-      },
-      set(val) {
-        const tags = this.searchedTopics.tag.hits
-        if (
-          this.selectedTopics &&
-          this.selectedTopics.length &&
-          this.selectedTopics.find((t) => t.id !== '*') &&
-          val !== 'confirm'
-        ) {
-          this.showForAllTagAlert().then((result) => {
-            if (!result) {
-              this.forAllTagChecked = false
-              return
-            }
-            const tagAll = tags.find((tag) => tag.id === '*')
-            this.setSelectedTopics([tagAll])
-            this.forAllTagChecked = true
-          })
-          return
-        }
-        val = !!val
-        if (val && this.searchedTopics && tags) {
-          const tagAll = tags.find((tag) => tag.id === '*')
-          this.setSelectedTopics([tagAll])
-        } else {
-          this.setSelectedTopics([])
-        }
-        this.forAllTagChecked = val
-      },
-    },
-
-    recentTopicsFiltered() {
-      const terms = cloneDeep(this.recentTopicsSearched.data)
-      return terms.reverse().slice(0, 3)
-    },
-
-    topicsSummary() {
-      if (!this.selectedTopics || !this.selectedTopics.length) return ''
-
-      if (this.forAllTagChecked) {
-        return 'Enviando para todos'
-      }
-
-      const summary = []
-      this.kinds
-        .filter((k) => k !== '*')
-        .forEach((kind) => {
-          const total = filter(this.selectedTopics, { kind }).length
-          if (total === 1)
-            summary.push(`1 ${this.getKindName(kind).toLowerCase()}`)
-          else if (total > 1)
-            summary.push(
-              `${total} ${this.getKindNamePlural(kind).toLowerCase()}`
-            )
-        })
-
-      if (summary.length) {
-        return summary.join(', ')
-      }
-      return null
-    },
-
-    hasAnySearchedTopic() {
-      if (!this.total) return null
-      return this.total > 0
-    },
-
-    headerKinds() {
-      return this.kinds
-        .filter((kind) => kind !== 'tag' || this.canSendForAll)
-        .map((kind) => {
-          return {
-            value: kind,
-            name: this.getKindNamePlural(kind),
-            icon: this.kindsIcons[kind],
-          }
-        })
-    },
-
-    resultKinds() {
-      const filteredKinds = this.kinds.filter((k) => k !== '*')
-      return filteredKinds.filter(
-        (k) =>
-          this.filteredSearchedTopics[k].total &&
-          this.filteredSearchedTopics[k].hits.length
-      )
-    },
-
-    totalLabel() {
-      if (this.total === 1) {
-        return '1 resultado encontrado'
-      }
-
-      return this.total + ' resultados encontrados'
-    },
-
-    isAllEntities() {
-      return this.querySearchTopics.kind === '*'
-    },
-  },
-  async created() {
-    this.loading = true
-    try {
-      const searchResponse = await this.searchTopics(this.querySearchTopics)
-      this.searchedTopics = searchResponse.result
-      this.total = searchResponse.total
-    } catch (error) {
-      this.$notify({
-        ...errorHandler('Erro ao carregar o público alvo.'),
-        duration: 10000,
-        position: 'bottom',
-        showClose: true,
-      })
-    } finally {
-      this.loading = false
-    }
-
-    this.selectedTopics = this.alreadySelectedTopics
-
-    if (
-      this.selectedTopics &&
-      this.selectedTopics.length &&
-      this.selectedTopics.find(
-        (topic) => topic.id === '*' && topic.kind === 'tag'
-      )
-    ) {
-      this.forAllTag = true
-    }
-  },
-
-  destroyed() {
-    this.setSelectedTopics([])
-  },
-
-  methods: {
-    searchDebounced: debounce(
-      async function() {
-        if (get(this.querySearchTopics, 'q.length', null) > 3) {
-          this.recentTopicsSearched.push(this.querySearchTopics.q)
-        }
-        await this.getSearchedTopics(this.querySearchTopics)
-        this.typing = false
-      },
-      500,
-      { leading: false, trailing: true }
-    ),
-
-    useRecentTermSearched(term) {
-      this.setQuerySearchTopics({
-        q: term,
-        kind: '*',
-      })
-    },
-
-    getKindName(kind, locale = 'pt-br') {
-      const names = {
-        'pt-br': {
-          '*': 'Procurar em tudo',
-          tag: 'Marcador',
-          group: 'Turma',
-          member: 'Aluno',
-          user: 'Usuário',
-        },
-        'en-us': {
-          '*': 'Search all',
-          tag: 'Tag',
-          group: 'Group',
-          member: 'Member',
-          user: 'User',
-        },
-      }
-      return names[locale][kind]
-    },
-
-    getKindNamePlural(kind, locale = 'pt-br') {
-      const names = {
-        'pt-br': {
-          '*': 'Procurar em tudo',
-          tag: 'Marcadores',
-          group: 'Turmas',
-          member: 'Alunos',
-          user: 'Usuários',
-        },
-        'en-us': {
-          '*': 'Search all',
-          tag: 'Tags',
-          group: 'Groups',
-          member: 'Members',
-          user: 'Users',
-        },
-      }
-      return names[locale][kind]
-    },
-
-    async getSearchedTopics(params) {
-      if (!this.loadingMore) this.loading = true
-      try {
-        const data = await this.searchTopics(params)
-
-        if (params.page > 0) {
-          // Increment arrays with results from pagination
-          const searchedTopics = cloneDeep(this.searchedTopics)
-
-          await Promise.all(
-            keys(data.result).map((topicKind) => {
-              if (!searchedTopics[topicKind]) {
-                searchedTopics[topicKind] = {
-                  hits: [],
-                  total: null,
-                }
-              }
-              searchedTopics[topicKind].hits = [
-                ...searchedTopics[topicKind].hits,
-                ...data.result[topicKind].hits,
-              ]
-            })
-          )
-          this.searchedTopics = searchedTopics
-        } else {
-          this.searchedTopics = data.result
-          this.total = data.total
-        }
-      } catch (err) {
-        this.$notify({
-          ...errorHandler('Erro ao buscar o público desejado.'),
-          duration: 10000,
-          position: 'bottom',
-          showClose: true,
-        })
-      } finally {
-        this.loading = false
-        this.loadingMore = false
-      }
-    },
-
-    loadMore() {
-      this.loadingMore = true
-      const page = get(this.querySearchTopics, 'page', 0) + 1
-      const q = get(this.querySearchTopics, 'q', null)
-      const kind = get(this.querySearchTopics, 'kind', null)
-
-      this.setQuerySearchTopics({
-        q,
-        kind,
-        page,
-      })
-    },
-
-    getTopicHits(kind) {
-      return get(this.filteredSearchedTopics, `${kind}.hits`, [])
-    },
-
-    getTopicTotal(kind) {
-      return get(this.filteredSearchedTopics, `${kind}.total`, [])
-    },
-
-    needShowMore(kind) {
-      return this.getTopicTotal(kind) > this.getTopicHits(kind).length
-    },
-
-    isChecked(topic) {
-      if (this.forAllTagChecked) return true
-      return (
-        this.selectedTopics.filter(
-          (selectedTopic) =>
-            selectedTopic.kind === topic.kind && selectedTopic.id === topic.id
-        ).length !== 0
-      )
-    },
-
-    filterForKind(kind) {
-      this.setQuerySearchTopics({
-        q: this.querySearchTopics.q,
-        kind: kind,
-        page: 0,
-      })
-    },
-
-    setSelectedTopics(topics) {
-      this.selectedTopics = topics
-    },
-
-    removeFromRecentTopicsSearched(term) {
-      this.recentTopicsSearched.remove(term)
-    },
-
-    setQuerySearchTopics(query) {
-      this.querySearchTopics = query
-    },
-
-    async showForAllTagAlert() {
-      const result = await showDialogConfirmation({
-        title:
-          'Você já selecionou alguns destinatários e eles serão substituídos pela tag todos.',
-        buttonCloseLabel: 'Cancelar',
-        buttonConfirmLabel: 'Continuar',
-      })
-      if (result) return result
-    },
-
-    addTopic(topic) {
-      const filteredSelectedTopics = this.selectedTopics.filter(
-        (selectedTopic) =>
-          selectedTopic.id === topic.id && selectedTopic.kind === topic.kind
-      )
-      if (filteredSelectedTopics.length === 0) {
-        const clone = cloneDeep(this.selectedTopics)
-        clone.push(topic)
-        this.setSelectedTopics(clone)
-      }
-    },
-
-    removeTopic(topic) {
-      const indexToRemove = this.selectedTopics.findIndex(
-        (v) => v.id === topic.id && v.kind === topic.kind
-      )
-      if (indexToRemove == -1) return
-      const clone = cloneDeep(this.selectedTopics)
-      clone.splice(indexToRemove, 1)
-      this.setSelectedTopics(clone)
-    },
-
-    updateSelectedTopics({ topic, value }) {
-      if (!value) {
-        this.removeTopic(topic)
-        return
-      }
-      this.addTopic(topic)
-    },
-
-    // event handlers
-    onSave() {
-      const topics = this.selectedTopics.map((topic) => ({
-        hash: topic.hash,
-        name: topic.name,
-        kind: topic.kind,
-        id: topic.id,
-      }))
-      this.$emit('answer', topics)
-    },
-
-    async onClose() {
-      const alreadySelectedTopics = cloneDeep(this.alreadySelectedTopics).map(v => v.kind + v.id)
-      const selectedTopics = cloneDeep(this.selectedTopics).map(v => v.kind + v.id)
-      const diffs = difference(selectedTopics, alreadySelectedTopics)
-      if (diffs.length === 0) {
-        this.$emit('close')
-        return
-      }
-
-      const result = await showDiscardChangesDialog()
-
-      if (result) {
-        this.$emit('close')
-      }
-    },
-
-    onInput(v) {
-      this.querySearchTopics = v
-    },
-  },
-}
-</script>
-<style type="text/css" scoped>
-.border-none {
-  border: none !important;
-}
-.search-topics-page {
-  flex: 1 1 auto;
-  position: relative;
-  min-height: 100%;
-  padding: 0px !important;
-}
-.topic-kind-title,
-.recent-search-title,
-.results-total {
-  color: var(--gray-70);
-  min-height: 24px;
-  display: flex;
-  align-items: center;
-}
-.topic-item-tag-for-all {
-  min-height: 48px;
-  display: flex;
-  align-items: center;
-}
-.selected-topics-button {
-  cursor: pointer;
-  height: 48px;
-  position: fixed;
-  width: 100%;
-  left: 0px;
-  bottom: 0px;
-  background: white;
-  border: none;
-  text-align: left;
-  z-index: 100;
-}
-.selected-topics-button-bg {
-  left: 0px;
-  background-color: var(--link);
-  opacity: 0.12;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-}
-.searching-label {
-  font-size: 14px;
-  line-height: 18px;
-  display: flex;
-  align-items: center;
-  min-height: 24px;
-}
-.not-found-result {
-  margin-top: 40px;
-  text-align: center;
-}
-
-.empty-tags-groups-placeholder {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-  height: 100%;
-}
-
-.empty-tags-groups-placeholder-text {
-  width: 248px;
-}
-
-.cursor-pointer {
-  cursor: pointer;
-}
-
-@media (min-width: 768px) {
-  .search-topics-page {
-    width: 600px !important;
-    min-width: 600px;
-    max-width: 600px;
-  }
-}
-</style>