@bildvitta/quasar-ui-asteroid 3.17.0-beta.23 → 3.17.0-beta.25

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bildvitta/quasar-ui-asteroid",
   "description": "Asteroid",
-  "version": "3.17.0-beta.23",
+  "version": "3.17.0-beta.25",
   "author": "Bild & Vitta <systemteam@bild.com.br>",
   "license": "MIT",
   "main": "dist/asteroid.cjs.min.js",

package/src/components/app-user/QasAppUser.vue

@@ -108,23 +108,29 @@ const props = defineProps({
   }
 })
 
+// emits
 const emit = defineEmits(['sign-out', 'toggle-notifications'])
 
-// vindo direto do boot api.js
+// globals
 const axios = inject('axios')
 
+// composables
 const router = useRouter()
 
 const { isNotificationsEnabled, unreadNotificationsCount } = useNotifications()
 
 const { reset } = useQueryCache()
 
+const { avatarNotificationCountProps } = useAvatarNotifications()
+
+// refs
 const companiesModel = ref('')
 const loading = ref(false)
 
-const { avatarNotificationCountProps } = useAvatarNotifications()
+// consts
+const IS_ME_VERSION_2 = process.env.ME_VERSION === 2
 
-// computed
+// computeds
 const defaultCompanyProps = computed(() => {
   return {
     loading: loading.value,
@@ -148,42 +154,7 @@ watch(() => props.companyProps.modelValue, value => {
   companiesModel.value = value
 }, { immediate: true })
 
-// composable
-function useAvatarNotifications () {
-  const hasAnimated = ref(false)
-
-  watch(() => unreadNotificationsCount.value, () => {
-    hasAnimated.value = true
-
-    setTimeout(() => {
-      hasAnimated.value = false
-    }, 1000)
-  })
-
-  const avatarNotificationCountProps = computed(() => {
-    const classes = [
-      'qas-app-user__notification-avatar',
-      'animated',
-      {
-        rubberBand: hasAnimated.value
-      }
-    ]
-
-    return {
-      class: classes,
-      color: 'red-14',
-      size: 'xs',
-      title: unreadNotificationsToString.value,
-      useCropTitle: false
-    }
-  })
-
-  return {
-    avatarNotificationCountProps
-  }
-}
-
-// métodos
+// functions
 function signOut () {
   emit('sign-out')
 }
@@ -194,7 +165,10 @@ async function setCompanies (value) {
   loading.value = true
 
   try {
-    await axios.patch('users/me', { companies: value })
+    await axios.patch('users/me', {
+      [IS_ME_VERSION_2 ? 'currentMainCompany' : 'companies']: value
+    })
+
     setTimeout(() => location.reload(), 1500)
 
     NotifySuccess('Vínculo alterado com sucesso.')
@@ -224,6 +198,41 @@ function onMenuHide () {
 function toggleNotificationsDrawer () {
   emit('toggle-notifications')
 }
+
+// composables definitions
+function useAvatarNotifications () {
+  const hasAnimated = ref(false)
+
+  watch(() => unreadNotificationsCount.value, () => {
+    hasAnimated.value = true
+
+    setTimeout(() => {
+      hasAnimated.value = false
+    }, 1000)
+  })
+
+  const avatarNotificationCountProps = computed(() => {
+    const classes = [
+      'qas-app-user__notification-avatar',
+      'animated',
+      {
+        rubberBand: hasAnimated.value
+      }
+    ]
+
+    return {
+      class: classes,
+      color: 'red-14',
+      size: 'xs',
+      title: unreadNotificationsToString.value,
+      useCropTitle: false
+    }
+  })
+
+  return {
+    avatarNotificationCountProps
+  }
+}
 </script>
 
 <style lang="scss">

package/src/components/chart-view/QasChartView.vue

@@ -46,8 +46,9 @@ import zoomPlugin from 'chartjs-plugin-zoom'
 import chartDataLabels from 'chartjs-plugin-datalabels'
 
 // Outras importações
-import { extend } from 'quasar'
 import { filterListByHandle } from '../../helpers'
+
+import { extend, is } from 'quasar'
 import { getAction } from '@bildvitta/store-adapter'
 
 const ChartTypes = {
@@ -131,6 +132,11 @@ export default {
       type: String
     },
 
+    urlQueryList: {
+      default: () => (['company']),
+      type: Array
+    },
+
     useBox: {
       type: Boolean,
       default: true
@@ -332,6 +338,10 @@ export default {
           ...(this.useBox && { ...this.boxProps })
         }
       }
+    },
+
+    queryFromURL () {
+      return this.getQueryFromURL(this.$route.query)
     }
   },
 
@@ -342,6 +352,10 @@ export default {
 
     isFetching (value) {
       this.$emit('update:fetching', value)
+    },
+
+    $route (to, from) {
+      this.onRouteChange(to, from)
     }
   },
 
@@ -357,9 +371,10 @@ export default {
   methods: {
     handleFetchData () {
       const hasBeforeFetch = typeof this.beforeFetch === 'function'
+
       const payload = {
         url: this.url,
-        filters: this.filters
+        filters: { ...this.filters, ...this.queryFromURL }
       }
 
       if (hasBeforeFetch && !this.cancelBeforeFetch) {
@@ -435,6 +450,44 @@ export default {
         ...this.defaultChartItems,
         ...this.elementsChartItems[this.type]
       )
+    },
+
+    onRouteChange (to, from) {
+      const { query } = to
+
+      const isSameRoute = to.name === from.name
+      const hasQueryInURLQueryList = this.urlQueryList.some(urlQuery => query[urlQuery])
+
+      /**
+       * feito com função para evitar um deepEqual desnecessário, uma vez que
+       * caso "isSameRoute" seja falso, ou "hasQueryInURLQueryList" seja falso,
+       * não é necessário fazer a comparação.
+       */
+      const hasQueryChanged = () => !is.deepEqual(this.queryFromURL, this.getQueryFromURL(from.query))
+
+      /**
+       * Verifica se a rota atual é a mesma, se há uma query na URL que corresponde à queryList,
+       * e se a query correspondente à queryList foi alterada. Se todas essas condições forem
+       * verdadeiras, faz a requisição de dados.
+       */
+      if (isSameRoute && hasQueryInURLQueryList && hasQueryChanged()) this.handleFetchData()
+    },
+
+    /**
+     * "urlQueryList" é uma lista de query que o componente deve pegar da URL.
+     */
+    getQueryFromURL (query = {}) {
+      const newQuery = {}
+
+      this.urlQueryList.forEach(urlQuery => {
+        const queryValue = query[urlQuery]
+
+        if (queryValue) {
+          newQuery[urlQuery] = queryValue
+        }
+      })
+
+      return newQuery
     }
   }
 }

package/src/components/chart-view/QasChartView.yml

@@ -70,6 +70,12 @@ props:
     desc: Envia como parâmetro para a action "fetchList" do modulo correspondente a "entity".
     type: String
 
+  url-query-list:
+    desc: Lista de query que serão recuperadas da URL e enviadas como parâmetro para a action "fetchList" do modulo correspondente a "entity".
+    type: Array
+    default:
+      - company
+
   use-box:
     desc: Controla se o componente vai ter o QasBox englobando ou não.
     default: true

package/src/components/expansion-item/QasExpansionItem.vue

@@ -1,6 +1,6 @@
 <template>
   <div ref="expansionItem" class="full-width qas-expansion-item" :class="classes" v-bind="expansionProps.parent">
-    <component :is="component.is" class="qas-expansion-item__box" v-bind="boxProps">
+    <qas-box class="qas-expansion-item__box" v-bind="boxProps">
       <q-expansion-item v-model="modelValue" v-bind="expansionProps.item" header-class="text-bold q-mt-sm q-pa-none qas-expansion-item__header" @show="setShowContent">
         <template #header>
           <div class="full-width justify-between no-wrap row">
@@ -28,17 +28,13 @@
           </div>
         </template>
 
-        <q-separator v-if="hasHeaderSeparator" class="q-my-md" />
-
         <div :class="contentClasses">
           <slot v-if="showContent" name="content">
             <qas-grid-generator v-if="hasGridGenerator" use-inline v-bind="gridGeneratorProps" />
           </slot>
         </div>
-
-        <q-separator v-if="hasBottomSeparator" class="q-mt-md" />
       </q-expansion-item>
-    </component>
+    </qas-box>
 
     <div v-if="hasError" class="q-pt-sm qas-expansion-item__error-message text-caption text-negative">
       {{ props.errorMessage }}
@@ -49,7 +45,7 @@
 <script setup>
 import QasBox from '../box/QasBox.vue'
 
-import { computed, provide, inject, onMounted, ref, useAttrs } from 'vue'
+import { computed, provide, inject, ref, useAttrs } from 'vue'
 
 defineOptions({
   name: 'QasExpansionItem',
@@ -97,11 +93,6 @@ const props = defineProps({
   maxContentHeight: {
     type: String,
     default: ''
-  },
-
-  useHeaderSeparator: {
-    type: Boolean,
-    default: undefined
   }
 })
 
@@ -116,37 +107,18 @@ const slots = defineSlots()
 
 // refs
 const expansionItem = ref(null)
-const hasNextSibling = ref(false)
 const showContent = ref(false)
 
-onMounted(setHasNextSibling)
-
 // constants
 const isNestedExpansionItem = inject('isExpansionItem', false)
 const isNestedBox = inject('isBox', false)
 
-const component = {
-  is: isNestedExpansionItem ? 'div' : QasBox
-}
-
 // computed
 const hasBadges = computed(() => !!props.badges.length)
 const hasError = computed(() => props.error || !!props.errorMessage)
 const hasGridGenerator = computed(() => !!Object.keys(props.gridGeneratorProps).length)
-const hasBottomSeparator = computed(() => isNestedExpansionItem && hasNextSibling.value)
 const hasHeaderBottom = computed(() => !!slots['header-bottom'])
 
-/**
- * Verifica se o componente deve adicionar um separador no header.
- *
- * - Se a propriedade useHeaderSeparator for true, retorna separador.
- * - Se a propriedade useHeaderSeparator for undefined, retorna separador apenas se não for um componente aninhado.
- * - Se a propriedade useHeaderSeparator for false, não retorna separador.
- */
-const hasHeaderSeparator = computed(() => {
-  return typeof props.useHeaderSeparator === 'undefined' ? !isNestedExpansionItem : props.useHeaderSeparator
-})
-
 const classes = computed(() => {
   return {
     'qas-expansion-item--error': hasError.value,
@@ -157,8 +129,7 @@ const classes = computed(() => {
 
 const contentClasses = computed(() => {
   return {
-    'q-mt-sm': isNestedExpansionItem,
-    'q-mt-md': !isNestedExpansionItem && !props.useHeaderSeparator,
+    'q-mt-md': true,
     'qas-expansion-item__content overflow-auto': !!props.maxContentHeight
   }
 })
@@ -196,10 +167,10 @@ const expansionProps = computed(() => {
 
 const boxProps = computed(() => {
   /**
-   * Caso o QasExpansionItem estiver dentro de um QasBox e não for um QasExpansionItem
+   * Caso o QasExpansionItem estiver dentro de um QasBox ou for um QasExpansionItem
    * dentro de outro QasExpansionItem, o componente terá uma borda.
   */
-  const isBoxed = isNestedBox && !isNestedExpansionItem
+  const isBoxed = isNestedBox || isNestedExpansionItem
 
   if (!isBoxed) return {}
 
@@ -212,20 +183,6 @@ const boxProps = computed(() => {
 const isDisabled = computed(() => props.disable || props.disableButton)
 
 // functions
-
-/**
- * Caso o componente esteja dentro de um QasExpansionItem, verifica se existe um próximo irmão
- * para adicionar um separador.
- */
-function setHasNextSibling () {
-  if (!isNestedExpansionItem) return
-
-  const hasTextContentSibling = !!expansionItem.value.nextSibling?.textContent?.trim?.()
-  const hasElementSibling = !!expansionItem.value.nextElementSibling
-
-  hasNextSibling.value = hasElementSibling || hasTextContentSibling
-}
-
 function setShowContent () {
   showContent.value = true
 }

package/src/components/expansion-item/QasExpansionItem.yml

@@ -49,11 +49,6 @@ props:
     desc: Propriedades que serão repassadas para o QasGridGenerator.
     type: Object
 
-  use-header-separator:
-    desc: Propriedade para forçar o QSeparator no header.
-    type: Boolean
-    default: undefined
-
 slots:
   header:
     desc: Slot para substituir o conteúdo do header (não inclui o botão dropdown).

package/src/components/list-view/QasListView.vue

@@ -43,10 +43,12 @@
 <script>
 import QasFilters from '../filters/QasFilters.vue'
 import QasPagination from '../pagination/QasPagination.vue'
+
+import { viewMixin, contextMixin } from '../../mixins'
+
 import debug from 'debug'
 import { extend } from 'quasar'
 import { getState, getAction } from '@bildvitta/store-adapter'
-import { viewMixin, contextMixin } from '../../mixins'
 import { computed } from 'vue'
 
 const log = debug('asteroid-ui:qas-list-view')

package/src/components/select-filter/QasSelectFilter.vue

@@ -0,0 +1,65 @@
+<template>
+  <qas-select v-model="internalModel" :label="props.label" :options="props.options" use-filter-mode @update:model-value="onUpdateModel" />
+</template>
+
+<script setup>
+import useDefaultFilters from '../../composables/use-default-filters'
+
+import { extend } from 'quasar'
+import { watch, ref, nextTick } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+
+defineOptions({ name: 'QasSelectFilter' })
+
+const props = defineProps({
+  label: {
+    type: String,
+    default: 'Selecione uma empresa vinculada'
+  },
+
+  name: {
+    type: String,
+    default: 'company'
+  },
+
+  options: {
+    type: Array,
+    default: () => []
+  }
+})
+
+// composables
+const router = useRouter()
+const route = useRoute()
+const { setFilterQuery, triggerDefaultFiltersChange, filterQuery } = useDefaultFilters()
+
+// models
+const model = defineModel({ type: String, default: '' })
+
+// refs
+const internalModel = ref(route.query[props.name] || model.value)
+
+// watch
+watch(() => route.query[props.name], setModels)
+
+// functions
+/**
+ * Adiciona o valor na URL, atualizando a rota, isto vai fazer com que o componente
+ * seja atualizado com o novo valor, pois cai no watch que atualiza o model interno e externo.
+ */
+function onUpdateModel (value) {
+  const { ...query } = route.query
+
+  router.push({ query: { ...query, [props.name]: value } })
+}
+
+function setModels (value) {
+  model.value = value
+  internalModel.value = value
+
+  const oldFilters = extend(true, {}, filterQuery.value)
+
+  setFilterQuery(value, props.name)
+  nextTick(() => triggerDefaultFiltersChange(filterQuery.value, oldFilters))
+}
+</script>

package/src/components/select-filter/QasSelectFilter.yml

@@ -0,0 +1,36 @@
+type: component
+
+meta:
+  desc: Componente para gerar dinamicamente checkbox agrupados.
+
+props:
+  inline:
+    desc: Controla se o componente vai aparece em linha ou em bloco.
+    default: true
+    type: Boolean
+
+  label:
+    desc: Label utilizada em casos de ser checkbox-group.
+    default: ''
+    type: String
+
+  model-value:
+    desc: Model do componente, usado para v-model.
+    default: []
+    type: Array
+    examples: [v-model"value"]
+    model: true
+
+  options:
+    desc: Opções para gerar os checkbox.
+    default: []
+    type: Array
+
+events:
+  '@update:model-value -> function(value)':
+    desc: Dispara quando o model-value altera, também usado para v-model.
+    params:
+      value:
+        desc: Novo valor do model.
+        default: []
+        type: Array

package/src/composables/index.js

@@ -1,8 +1,10 @@
 export { default as useContext } from './use-context.js'
+export { default as useDefaultFilters } from './use-default-filters.js'
 export { default as useForm } from './use-form.js'
 export { default as useHistory } from './use-history.js'
+export { default as useNotifications } from './use-notifications.js'
 export { default as useQueryCache } from './use-query-cache.js'
 export { default as useScreen } from './use-screen.js'
-export { default as useNotifications } from './use-notifications.js'
 
 export * from './use-notifications.js'
+export * from './use-default-filters.js'

package/src/composables/use-default-filters.js

@@ -0,0 +1,106 @@
+import { computed, ref } from 'vue'
+import { LocalStorage, is } from 'quasar'
+
+const filterQuery = ref({})
+
+const defaultFiltersHooks = {
+  defaultFiltersChange: []
+}
+
+/**
+ * Define os filtros padrão antes de entrar na rota.
+ *
+ * Prioridade de aplicação dos filtros:
+ * 1 - Se o filtro estiver salvo no estado global, então utiliza ele.
+ * 2 - Se o filtro já estiver na query, então utiliza ele.
+ * 3 - Se o filtro já estiver salvo no LocalStorage, então utiliza ele.
+ *
+ * @param {Object} to - Rota de destino.
+ * @param {Object} _from - Rota de origem.
+ * @param {Function} next - Função de redirecionamento.
+ * @param {Array} queryList='company' - Lista de filtros a serem aplicados.
+ */
+export function setDefaultFiltersBeforeEnter (to, _from, next, queryList = ['company']) {
+  const { getDefaultFiltersFromStorage, setFilterQuery } = useDefaultFilters()
+
+  const { query } = to
+  const newQuery = { ...query }
+
+  // recupera os filtros padrão do LocalStorage
+  const defaultFiltersFromStorage = getDefaultFiltersFromStorage()
+
+  queryList.forEach(name => {
+    // 1. se o filtro já estiver salvo no estado, então utiliza ele
+    if (filterQuery.value[name]) {
+      newQuery[name] = filterQuery.value[name]
+      return
+    }
+
+    // 2. se o filtro já estiver na query, então utiliza ele
+    if (query[name]) {
+      setFilterQuery(query[name], name)
+
+      return
+    }
+
+    const storedFilter = defaultFiltersFromStorage[name]
+
+    // 3. se o filtro já estiver salvo no LocalStorage, então utiliza ele
+    if (storedFilter) {
+      setFilterQuery(storedFilter, name)
+      newQuery[name] = storedFilter
+    }
+  })
+
+  /**
+   * Verifica se houve mudanças na query antes de redirecionar, sem essa validação
+   * o redirecionamento ocorre mesmo que a query seja a mesma, gerando loop infinito.
+   */
+  if (!is.deepEqual(newQuery, query)) return next({ ...to, query: newQuery, replace: true })
+
+  next()
+}
+
+/**
+ * Este composable recupera os filtros default salvos no LocalStorage na chave 'defaultFilters'.
+ */
+export default function useDefaultFilters () {
+  const hasFilterQuery = computed(() => !!Object.keys(filterQuery.value).length)
+
+  function setFilterQuery (query, name = 'company') {
+    filterQuery.value[name] = query
+  }
+
+  function getDefaultFiltersFromStorage () {
+    const defaultFiltersFromStorage = LocalStorage.getItem('defaultFilters') || {}
+
+    return defaultFiltersFromStorage
+  }
+
+  function triggerDefaultFiltersChange (newFilters, oldFilters) {
+    // necessário verificar se houve mudanças antes de disparar o evento para não duplicar.
+    if (is.deepEqual(newFilters, oldFilters)) return
+
+    defaultFiltersHooks.defaultFiltersChange.forEach(hook => hook(newFilters, oldFilters))
+  }
+
+  function onDefaultFiltersChange (callback) {
+    defaultFiltersHooks.defaultFiltersChange.push(callback)
+  }
+
+  function removeOnDefaultFiltersChange (callback) {
+    const index = defaultFiltersHooks.defaultFiltersChange.indexOf(callback)
+
+    if (~index) defaultFiltersHooks.defaultFiltersChange.splice(index, 1)
+  }
+
+  return {
+    filterQuery,
+    hasFilterQuery,
+    getDefaultFiltersFromStorage,
+    onDefaultFiltersChange,
+    removeOnDefaultFiltersChange,
+    setFilterQuery,
+    triggerDefaultFiltersChange
+  }
+}

package/src/composables/use-query-cache.js

@@ -19,7 +19,7 @@ export default function () {
   }
 
   function findOne (key, filter) {
-    return cachedFilters[key][filter]
+    return cachedFilters[key]?.[filter]
   }
 
   function findAll (key) {

package/src/vue-plugin.js

@@ -14,6 +14,7 @@ import QasBtnDropdown from './components/btn-dropdown/QasBtnDropdown.vue'
 import QasCard from './components/card/QasCard.vue'
 import QasCardImage from './components/card-image/QasCardImage.vue'
 import QasCheckbox from './components/checkbox/QasCheckbox.vue'
+import QasSelectFilter from './components/select-filter/QasSelectFilter.vue'
 import QasCopy from './components/copy/QasCopy.vue'
 import QasDate from './components/date/QasDate.vue'
 import QasDateTimeInput from './components/date-time-input/QasDateTimeInput.vue'
@@ -112,6 +113,7 @@ async function install (app) {
   app.component('QasCard', QasCard)
   app.component('QasCardImage', QasCardImage)
   app.component('QasCheckbox', QasCheckbox)
+  app.component('QasSelectFilter', QasSelectFilter)
   app.component('QasCopy', QasCopy)
   app.component('QasDate', QasDate)
   app.component('QasDateTimeInput', QasDateTimeInput)
@@ -213,6 +215,7 @@ export {
   QasCard,
   QasCheckbox,
   QasCopy,
+  QasSelectFilter,
   QasDate,
   QasDateTimeInput,
   QasDebugger,