layers-design-system 2.4.0 → 2.6.0

package/src/components/LSearchTopics/TopicItem.vue

@@ -1,346 +0,0 @@
-<template>
-  <div class="topic-item-group">
-    <div class="topic-item-group-header l-d-flex l-align-items-center pl-3">
-      <div
-        class="l-flex l-d-flex l-align-items-center"
-        @click.stop="toggleShowIncludes()"
-      >
-        <div
-          v-if="topic.kind == 'group' || topic.kind == 'tag'"
-          class="topic-chevron mr-2"
-        >
-          <l-icon class="gray-60--text" size="24">
-            {{ showIncludes ? 'uil-angle-down' : 'uil-angle-right' }}
-          </l-icon>
-        </div>
-        <div class="topic-icon">
-          <div class="bg-icon" :class="color(topic.kind)"></div>
-          <l-icon :class="color(topic.kind) + '--text'">
-            {{ icon(topic.kind) }}
-          </l-icon>
-        </div>
-
-        <div
-          class="l-flex ml-2 mr-3 l-text-regular ellipsis-2"
-          :class="disabled ? 'gray-70--text' : 'lead-light--text'"
-        >
-          {{ topic.name }}
-        </div>
-      </div>
-      <l-checkbox
-        :disabled="disabled"
-        :checked="isCheckedFunction(topic)"
-        :indeterminate="hasChildChecked()"
-        :key="isCheckedFunction(topic)"
-        @change="updateSelectedTopics(topic, $event)"
-        class="p-3"
-      ></l-checkbox>
-    </div>
-    <hr />
-    <l-transition-expand>
-      <div class="px-3" v-if="showIncludes">
-        <template v-if="initialFetching">
-          <div
-            class="l-d-flex l-align-items-center my-2"
-            style="justify-content: center; width: 100%; height: 40px"
-          >
-            <l-circular-loader :width="40" :height="40"></l-circular-loader>
-          </div>
-          <hr />
-        </template>
-
-        <div v-else>
-          <template v-if="(!includes.length && !hasMore) || error">
-            <div class="no-data-includes l-text-regular gray-60--text">
-              {{ includesNoData }}
-            </div>
-            <hr />
-          </template>
-          <div v-else>
-            <div
-              v-for="includedTopic in includes"
-              :key="includedTopic.id"
-              class="topic-item-group-includes"
-            >
-              <div
-                class="topic-item-group-header l-d-flex l-align-items-center pl-4 ml-2"
-              >
-                <div class="l-flex l-d-flex l-align-items-center">
-                  <div class="topic-icon">
-                    <div
-                      class="bg-icon"
-                      :class="color(includedTopic.kind)"
-                    ></div>
-                    <l-icon :class="color(includedTopic.kind) + '--text'">{{
-                      icon(includedTopic.kind)
-                    }}</l-icon>
-                  </div>
-
-                  <div
-                    class="l-flex ml-2 mr-3 l-text-regular ellipsis-2"
-                    :class="disabled ? 'gray-70--text' : 'lead-light--text'"
-                  >
-                    {{ includedTopic.name }}
-                  </div>
-                </div>
-
-                <l-checkbox
-                  :disabled="disabled"
-                  :checked="isChildChecked(includedTopic)"
-                  :key="isChildChecked(includedTopic)"
-                  @change="topicIncludedChanged(includedTopic, $event)"
-                  class="pl-3 py-3"
-                ></l-checkbox>
-              </div>
-              <hr />
-            </div>
-
-            <div class="mx-3 my-3" v-if="hasMore">
-              <l-button
-                :loading="fetchingIncludes"
-                @click.native="fetch()"
-                plain
-                fill
-              >
-                Carregar mais
-              </l-button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </l-transition-expand>
-  </div>
-</template>
-<script>
-import cloneDeep from 'lodash/cloneDeep'
-import { errorHandler } from 'layers-utils'
-export default {
-  props: {
-    topic: {
-      type: Object,
-    },
-    disabled: {
-      type: Boolean,
-    },
-    checked: {
-      type: Boolean,
-    },
-    isCheckedFunction: {
-      type: Function,
-    },
-    populateTopic: {
-      type: Function,
-    },
-  },
-  data: function() {
-    return {
-      showIncludes: false,
-      fetchingIncludes: false,
-      initialFetching: true,
-      fetched: false,
-      error: false,
-      includes: [],
-      generator: null,
-      buffer: [],
-      hasMore: false,
-      limit: 30,
-    }
-  },
-  created() {
-    this.generator = this.combinedGenerator()
-  },
-  watch: {
-    async showIncludes(v) {
-      if (v === true && this.fetched === false) {
-        this.fetched = true
-        await this.fetch()
-      
-        this.initialFetching = false
-      }
-    },
-  },
-
-  computed: {
-    includesNoData() {
-      return {
-        group: 'Esta turma ainda não tem alunos',
-        tag: 'Esta tag ainda não tem turmas',
-      }[this.topic.kind]
-    },
-  },
-  methods: {
-    async *fetchToGenerator(kind, groupContext = null) {
-      const params = {
-        id: this.topic.id,
-        kind: kind,
-        limit: this.limit + 1,
-        page: 0,
-      }
-      if (groupContext) params.groupContext = groupContext
-      let { hits, total } = await this.populateTopic(params)
-      while (total > 0) {
-        if (hits.length > 0) {
-          yield hits.shift()
-          total--
-          continue
-        }
-        params.page += 1
-        hits = (await this.populateTopic(params)).hits
-      }
-    },
-    async *combinedGenerator() {
-      if (this.topic.kind === 'group') {
-        // populate group
-        yield* this.fetchToGenerator('group', 'member')
-        yield* this.fetchToGenerator('group', 'user')
-      } else {
-        // populate tag
-        yield* this.fetchToGenerator('tag')
-      }
-    },
-    async fetchPage() {
-      const pageSize = this.limit
-      while (this.buffer.length < pageSize + 1) {
-        let result = await this.generator.next()
-        if (result.value) {
-          this.buffer.push(result.value)
-          continue
-        }
-        break
-      }
-      return { results: this.buffer.splice(0, pageSize), hasMore: this.buffer.length > 0 }
-    },
-    async fetch() {
-      const includes = cloneDeep(this.includes)
-      this.fetchingIncludes = true
-      try {
-        const { results, hasMore } = await this.fetchPage()
-
-        this.includes = [...includes, ...results]
-        this.hasMore = hasMore
-      } catch (error) {
-        this.error = error
-        this.$notify({
-          ...errorHandler('Erro ao carregar mais.'),
-          duration: 10000,
-          position: 'bottom',
-          showClose: true,
-        })
-      } finally {
-        this.fetchingIncludes = false
-      }
-    },
-
-    hasChildChecked() {
-      if (this.checked) return false
-
-      if (!this.includes) return false
-      return this.includes.map(this.isCheckedFunction).some((v) => v === true)
-    },
-
-    color(kind) {
-      if (this.disabled) return 'gray-50'
-
-      return (
-        {
-          member: 'purple',
-          group: 'aqua',
-          user: 'link',
-          tag: 'warning',
-        }[kind] || 'lead'
-      )
-    },
-    icon(kind) {
-      return {
-        member: 'uil-graduation-cap',
-        group: 'uil-users-alt',
-        user: 'uil-user',
-        tag: 'uil-tag-alt',
-      }[kind]
-    },
-
-    isChildChecked(includedTopic) {
-      // it is selected or parent is selected
-      return (
-        this.isCheckedFunction(includedTopic) ||
-        this.isCheckedFunction(this.topic)
-      )
-    },
-
-    toggleShowIncludes() {
-      if (this.topic.kind === 'group' || this.topic.kind === 'tag') {
-        this.showIncludes = !this.showIncludes
-      }
-    },
-
-    updateSelectedTopics(topic, value) {
-      this.$emit('input', { topic, value })
-    },
-
-    topicIncludedChanged(topic, value) {
-      if (this.checked && !value) {
-        // uncheck parent
-        this.updateSelectedTopics(this.topic, false)
-        // check all childs
-        this.includes.forEach((includedTopic) => {
-          // excluding unchecked topic
-          if (includedTopic.id !== topic.id) {
-            this.updateSelectedTopics(includedTopic, true)
-          }
-        })
-      }
-      this.updateSelectedTopics(topic, value)
-    },
-  },
-}
-</script>
-
-<style scoped>
-.topic-item-group {
-  position: relative;
-}
-.topic-item-group-header {
-  min-height: 48px;
-  cursor: pointer;
-}
-.topic-icon {
-  width: 24px;
-  height: 24px;
-  border-radius: 12px;
-  position: relative;
-  overflow: hidden;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex: none;
-}
-.bg-icon {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  opacity: 0.1;
-}
-hr {
-  left: 0px;
-  margin: 0px;
-  padding: 0px;
-  border: none;
-  border-bottom: 1px solid var(--gray-30);
-  width: 100vw;
-  position: absolute;
-}
-.topic-item-group:last-child > hr,
-.topic-item-group-includes:last-child > hr {
-  display: none;
-}
-.topic-included {
-  margin-left: 32px;
-  min-height: 48px;
-}
-.no-data-includes {
-  margin-left: 32px;
-  min-height: 48px;
-  display: flex;
-  align-items: center;
-}
-</style>

package/src/components/LSearchTopics/docs/drawer.vue

@@ -1,254 +0,0 @@
-<template>
-  <div class="search-topics-page l-col l-d-flex column">
-    <!-- {{ JSON.stringify(topics, null, '\t') }} -->
-    <l-search-topics
-      :canSendForAll="true"
-      :searchTopics="searchTopics"
-      :populateTopic="populateTopic"
-      :alreadySelectedTopics="selected"
-      :recentTopicsSearched="{
-        data: recentTopicsSearchedData,
-        remove: removeFromRecentTopicsSearched,
-        push: pushToRecentTopicsSearched,
-      }"
-      @answer="$emit('answer', $event)"
-      @close="$emit('close', null)"
-    />
-  </div>
-</template>
-
-<script>
-import cloneDeep from 'lodash/cloneDeep'
-export default {
-  name: 'Drawer',
-
-  props: {
-    selected: Array,
-  },
-
-  data() {
-    return {
-      topics: null,
-      selectedTopics: [],
-      recentTopicsSearchedData: [
-        'user 1',
-        'member 2',
-        'grupo',
-        'grup',
-        'manha',
-      ],
-      member: {
-        id: 'member',
-        name: 'aluno ',
-        kind: 'member',
-        hash: '',
-        includes: [],
-      },
-      user: {
-        id: 'user',
-        name: 'user ',
-        kind: 'user',
-        hash: '',
-        includes: [],
-      },
-      group: {
-        id: 'group',
-        name: 'turma ',
-        kind: 'group',
-        hash: '',
-        includes: [],
-      },
-      tag: {
-        id: 'tag',
-        name: 'marcador',
-        kind: 'tag',
-        hash: '',
-        includes: [],
-      },
-      forAllTag: {
-        id: '*',
-        name: 'Todos',
-        kind: 'tag',
-        hash: '',
-        includes: [],
-      },
-    }
-  },
-  computed: {},
-  created() {
-    this.topics = {
-      result: {
-        tag: {
-          hits: [this.forAllTag, ...this.getEntities(this.tag, 30)],
-          total: 30,
-        },
-        group: {
-          hits: this.getEntities(this.group, 30),
-          total: 30,
-        },
-        member: {
-          hits: this.getEntities(this.member, 30),
-          total: 30,
-        },
-        user: {
-          hits: this.getEntities(this.user, 30),
-          total: 30,
-        },
-      },
-      total: 120,
-    }
-  },
-  methods: {
-    pushToRecentTopicsSearched(term) {
-      const clone = cloneDeep(this.recentTopicsSearchedData)
-      clone.push(term)
-      this.recentTopicsSearchedData = clone
-    },
-    removeFromRecentTopicsSearched(term) {
-      const clone = cloneDeep(this.recentTopicsSearchedData)
-      const indexToRemove = clone.findIndex((v) => v === term)
-      clone.splice(indexToRemove, 1)
-      this.recentTopicsSearchedData = clone
-    },
-    filterEntities(query, entity) {
-      return entity.filter((v) => {
-        if (v.kind === 'tag' && v.id === '*') return false
-        const matchQ = v.name.includes(query.q) || !query.q
-        const matchKind = v.kind === query.kind || query.kind === '*'
-        return matchQ && matchKind
-      })
-    },
-    async simulateRequest() {
-      await new Promise(r => setTimeout(r, 1500));
-    },
-    async searchTopics(query) {
-      await this.simulateRequest()
-      
-      const limit = 15
-      const startingIndex = limit * query.page
-
-      if (!query.q && query.kind === '*') {
-        return {
-          result: {
-            group: {
-              hits: this.topics.result.group.hits.slice(0, 10),
-              total: this.topics.result.group.total,
-            },
-            tag: {
-              hits: this.topics.result.tag.hits.slice(0, 11),
-              total: this.topics.result.tag.total,
-            },
-            user: { hits: [], total: 0 },
-            member: { hits: [], total: 0 },
-          },
-          total: this.topics.result.group.total + this.topics.result.tag.total,
-        }
-      }
-      const filteredMembers = this.filterEntities(
-        query,
-        this.topics.result.member.hits
-      )
-      const filteredUsers = this.filterEntities(
-        query,
-        this.topics.result.user.hits
-      )
-      const filteredGroups = this.filterEntities(
-        query,
-        this.topics.result.group.hits
-      )
-      const filteredTags = this.filterEntities(
-        query,
-        this.topics.result.tag.hits
-      )
-
-      return {
-        result: {
-          member: {
-            hits: filteredMembers.slice(startingIndex, startingIndex + limit),
-            total: filteredMembers.length,
-          },
-          group: {
-            hits: filteredGroups.slice(startingIndex, startingIndex + limit),
-            total: filteredGroups.length,
-          },
-          user: {
-            hits: filteredUsers.slice(startingIndex, startingIndex + limit),
-            total: filteredUsers.length,
-          },
-          tag: {
-            hits: filteredTags.slice(startingIndex, startingIndex + limit),
-            total: filteredTags.length,
-          },
-        },
-        total:
-          filteredMembers.length +
-          filteredGroups.length +
-          filteredUsers.length +
-          filteredTags.length,
-      }
-    },
-    getEntity(entity, index) {
-      return {
-        name: `${entity.name} ${index + 1}`,
-        id: `${entity.id}${index}`,
-        hash: `${entity.hash}${index}`,
-        kind: entity.kind,
-      }
-    },
-    getEntities(entity, number) {
-      let entities = []
-      for (let i = 0; i < number; i++) {
-        entities.push(this.getEntity(entity, i))
-      }
-      return entities
-    },
-
-    sliceTopic(kind, index, limit) {
-      const result = this.topics.result[kind].hits.slice(index, index + limit)
-      return result
-    },
-
-    async populateTopic(params) {
-      await this.simulateRequest()
-
-      const startingIndex = params.page * params.limit
-
-      if (params.kind === 'tag') {
-        const groups = this.sliceTopic('group', startingIndex, params.limit)
-        return {
-          hits: groups,
-          total: 30,
-        }
-      } else if (params.groupContext === 'member') {
-        const members = this.sliceTopic('member', startingIndex, params.limit)
-        return {
-          hits: members,
-          total: 30,
-        }
-      } else if (params.groupContext === 'user') {
-        const users = this.sliceTopic('user', startingIndex, params.limit)
-        return {
-          hits: users,
-          total: 30,
-        }
-      }
-    },
-  },
-}
-</script>
-<style type="text/css" scoped>
-.search-topics-page {
-  flex: 1 1 auto;
-  position: relative;
-  min-height: 100%;
-  padding: 0px !important;
-}
-
-@media (min-width: 768px) {
-  .search-topics-page {
-    width: 600px !important;
-    min-width: 600px;
-    max-width: 600px;
-  }
-}
-</style>

package/src/components/LSearchTopics/docs.vue

@@ -1,60 +0,0 @@
-<template>
-  <div id="app">
-    <h1>SearchTopics</h1>
-
-    <h3 class="mt-3">Selected Topics</h3>
-    <div @click="openModal()">
-      <l-target-input
-        style="cursor:pointer"
-        :topics="answer"
-        :limit="3"
-        editable
-      ></l-target-input>
-    </div>
-  </div>
-</template>
-
-<script>
-import Drawer from './docs/drawer.vue'
-import VueModals from '@tenda.digital/vue-modals'
-
-export default {
-  name: 'SearchTopics',
-  data() {
-    return {
-      answer: [{ id: '*', kind: 'tag', name: 'Todos' }],
-    }
-  },
-  computed: {},
-  methods: {
-    async openModal() {
-      // eslint-disable-next-line no-console
-      console.log('open modal')
-      const modalStack = VueModals.Modals.stack()
-      try {
-        const modal = await modalStack.push({
-          layout: 'drawer',
-          component: Drawer,
-          props: {
-            selected: this.answer,
-          },
-        })
-        if (modal) {
-          this.answer = modal
-        }
-      } catch (error) {
-        // ignore
-      }
-      return
-    },
-  },
-}
-</script>
-
-<style scoped>
-.topics-box {
-  border: 1px solid var(--gray-50);
-  border-radius: 5px;
-  padding: 16px;
-}
-</style>