@bildvitta/quasar-ui-asteroid 3.0.0-beta.9 → 3.0.0

package/src/mixins/search-filter.js

@@ -0,0 +1,227 @@
+import { decamelize } from 'humps'
+import { isEqual } from 'lodash'
+import { getNormalizedOptions } from '../helpers'
+
+export default {
+  props: {
+    entity: {
+      default: '',
+      type: String
+    },
+
+    lazyLoadingProps: {
+      default: () => ({}),
+      type: Object
+    },
+
+    name: {
+      default: '',
+      type: String
+    },
+
+    useLazyLoading: {
+      type: Boolean
+    },
+
+    fetching: {
+      type: Boolean
+    }
+  },
+
+  emits: [
+    'update:modelValue',
+    'update:fetching',
+    'fetch-options-success',
+    'fetch-options-error'
+  ],
+
+  data () {
+    return {
+      mx_filteredOptions: [],
+      mx_hasFetchError: false,
+      mx_isFetching: false,
+      mx_isScrolling: false,
+      mx_search: '',
+      mx_fetchCount: 0,
+      mx_pagination: {
+        page: 1,
+        lastPage: null,
+        hasCount: true,
+        hasNextPage: false
+      }
+    }
+  },
+
+  computed: {
+    mx_defaultLazyLoadingProps () {
+      const {
+        url,
+        params,
+        decamelizeFieldName
+      } = this.lazyLoadingProps
+
+      const defaultParams = { limit: 48 }
+
+      return {
+        url: url || '',
+        params: {
+          ...defaultParams,
+          ...params
+        },
+        decamelizeFieldName: decamelizeFieldName === undefined ? true : decamelizeFieldName
+      }
+    },
+
+    mx_hasFilteredOptions () {
+      return !!this.mx_filteredOptions.length
+    },
+
+    mx_isFilterByFuse () {
+      return !this.useLazyLoading
+    }
+  },
+
+  watch: {
+    lazyLoadingProps: {
+      handler (value, oldValue) {
+        if (isEqual(value, oldValue)) return
+
+        this.mx_filterOptionsByStore('')
+        this.$emit('update:modelValue', '')
+      }
+    }
+  },
+
+  methods: {
+    async mx_filterOptionsByStore (search) {
+      this.mx_resetFilter(search)
+      await this.mx_setFetchOptions()
+    },
+
+    mx_resetFilter (search) {
+      this.mx_filteredOptions = []
+      this.mx_search = search
+      this.mx_pagination = {
+        page: 1,
+        lastPage: null,
+        hasCount: true,
+        hasNextPage: false
+      }
+    },
+
+    async mx_onVirtualScroll ({ index, ref }) {
+      const lastIndex = this.mx_filteredOptions.length - 1
+
+      if (index === lastIndex && this.mx_canFetchOptions()) {
+        await this.mx_loadMoreOptions()
+
+        this.$nextTick(() => {
+          ref.reset()
+          ref.refresh(lastIndex)
+        })
+      }
+    },
+
+    async mx_loadMoreOptions () {
+      this.mx_isScrolling = true
+
+      const options = await this.mx_fetchOptions()
+      this.mx_filteredOptions.push(...options)
+
+      // this is to prevent the virtual-scroll event to be fired again
+      this.$nextTick(() => {
+        this.mx_isScrolling = false
+      })
+    },
+
+    async mx_fetchOptions () {
+      this.mx_fetchCount++
+
+      try {
+        if (!this.entity) this.mx_setMissingPropsMessage('entity')
+        if (!this.name) this.mx_setMissingPropsMessage('name')
+
+        this.mx_hasFetchError = false
+        this.mx_isFetching = true
+
+        this.$emit('update:fetching', true)
+
+        const { url, params, decamelizeFieldName } = this.mx_defaultLazyLoadingProps
+
+        const { data } = await this.$store.dispatch(`${this.entity}/fetchFieldOptions`, {
+          url,
+          field: decamelizeFieldName ? decamelize(this.name, { separator: '-' }) : this.name,
+          params: {
+            ...params,
+            search: this.mx_search,
+            offset: (this.mx_pagination.page - 1) * params.limit
+          }
+        })
+
+        const { results, count, hasNextPage } = data
+        const hasCount = count !== undefined
+
+        this.mx_pagination = {
+          page: this.mx_pagination.page + 1,
+          lastPage: hasCount ? Math.ceil(count / params.limit) : null,
+          hasCount,
+          hasNextPage
+        }
+
+        this.$emit('fetch-options-success', data)
+
+        return this.mx_handleOptions(results)
+      } catch (error) {
+        this.$qas.logger.group(
+          `Mixin: searchFilterMixin - mx_fetchOptions -> exceção da action ${this.entity}/fetchFieldOptions`,
+          [error],
+          { error: true }
+        )
+
+        this.mx_hasFetchError = true
+        this.$emit('fetch-options-error', error)
+
+        return []
+      } finally {
+        this.mx_isFetching = false
+        this.$emit('update:fetching', false)
+      }
+    },
+
+    async mx_setFetchOptions () {
+      this.mx_filteredOptions = await this.mx_fetchOptions()
+    },
+
+    mx_canFetchOptions () {
+      const { lastPage, page, hasCount, hasNextPage } = this.mx_pagination
+
+      const hasMorePages = hasCount ? lastPage && page <= lastPage : hasNextPage
+
+      return hasMorePages && !this.mx_isFetching && !this.mx_isScrolling && this.useLazyLoading
+    },
+
+    mx_handleOptions (options) {
+      if (this.labelKey && this.valueKey) {
+        return getNormalizedOptions({
+          options,
+          label: this.labelKey,
+          value: this.valueKey
+        })
+      }
+
+      return options
+    },
+
+    mx_getMissingPropsMessage (prop) {
+      return `A propriedade "${prop}" é obrigatória quando a propriedade "useLazyLoading" está ativa.`
+    },
+
+    mx_setMissingPropsMessage (prop) {
+      throw new Error(this.mx_getMissingPropsMessage(prop))
+    },
+
+    mx_getNormalizedFuseResults (results = []) {
+      return results.map(({ item }) => item)
+    }
+  }
+}

package/src/mixins/view.js

@@ -1,12 +1,8 @@
-import { camelize } from 'humps'
+import { camelizeFieldsName } from '../helpers'
 import { markRaw } from 'vue'
 
 export default {
   props: {
-    dialog: {
-      type: Boolean
-    },
-
     entity: {
       required: true,
       type: String
@@ -34,6 +30,16 @@ export default {
 
     fetching: {
       type: Boolean
+    },
+
+    useBoundary: {
+      default: true,
+      type: Boolean
+    },
+
+    beforeFetch: {
+      default: null,
+      type: Function
     }
   },
 
@@ -49,7 +55,7 @@ export default {
       mx_errors: {},
       mx_fields: {},
       mx_metadata: {},
-
+      mx_cancelBeforeFetch: false,
       mx_isFetching: false
     }
   },
@@ -62,11 +68,11 @@ export default {
 
   computed: {
     mx_componentTag () {
-      return this.dialog ? 'div' : 'q-page'
+      return this.useBoundary ? 'q-page' : 'div'
     },
 
     mx_componentClass () {
-      return !this.dialog && 'container spaced'
+      return this.useBoundary && 'container spaced'
     },
 
     mx_hasFooterSlot () {
@@ -100,11 +106,9 @@ export default {
     },
 
     mx_setFields (fields = {}) {
-      for (const field in fields) {
-        fields[field].name = camelize(fields[field].name)
-      }
+      const camelizedFields = camelizeFieldsName(fields)
 
-      this.mx_fields = markRaw(fields)
+      this.mx_fields = markRaw(camelizedFields)
     },
 
     mx_setMetadata (metadata = {}) {
@@ -117,6 +121,22 @@ export default {
 
         this.$emit(`update:${key}`, models[key])
       }
+    },
+
+    mx_fetchHandler (payload, resolve) {
+      const hasBeforeFetch = typeof this.beforeFetch === 'function'
+
+      if (hasBeforeFetch && !this.mx_cancelBeforeFetch) {
+        return this.beforeFetch({
+          payload,
+          resolve: payload => resolve(payload),
+          done: () => {
+            this.mx_cancelBeforeFetch = true
+          }
+        })
+      }
+
+      resolve()
     }
   }
 }

package/src/plugins/index.js

@@ -1,11 +1,13 @@
 import Dialog from './dialog/Dialog.js'
+import Logger from './logger/Logger.js'
 import NotifyError from './notify-error/NotifyError.js'
 import NotifySuccess from './notify-success/NotifySuccess.js'
 import Screen from './screen/Screen.js'
 
 export {
   Dialog,
+  Logger,
   NotifyError,
-  Screen,
-  NotifySuccess
+  NotifySuccess,
+  Screen
 }

package/src/plugins/logger/Logger.js

@@ -0,0 +1,44 @@
+export default () => {
+  const isDebugEnabled = process.env.DEBUGGING
+
+  const normalizeMessage = msg => `%c ${msg}`
+  const getStyle = isError => (
+    `
+      background: ${isError ? '#C10015 ' : '#1976d2'};
+      font-weight: bold;
+      color: white;
+      padding: 6px 20px;
+      border-radius: 4px;
+      display: block;
+      width: 100%;
+      font-size: 12px;
+    `
+  )
+
+  return {
+    group (message, payload = [], { error } = {}) {
+      if (!isDebugEnabled) return
+
+      console.groupCollapsed(normalizeMessage(message), getStyle(error))
+
+      for (const item of payload) {
+        if (typeof item === 'string') {
+          console.info(normalizeMessage(item), getStyle(error))
+          continue
+        }
+
+        console.table(item)
+      }
+
+      console.groupEnd()
+    },
+
+    info (message) {
+      isDebugEnabled && console.info(normalizeMessage(message), getStyle())
+    },
+
+    error (message) {
+      isDebugEnabled && console.info(normalizeMessage(message), getStyle(true))
+    }
+  }
+}

package/src/plugins/logger/Logger.yml

@@ -0,0 +1,9 @@
+type: component
+
+meta:
+  desc: Plugin para adicionar loggers.
+
+inject:
+  'this.$qas.logger':
+    default: {}
+    type: Object

package/src/vue-plugin.js

@@ -55,7 +55,8 @@ import {
   Dialog,
   NotifyError,
   NotifySuccess,
-  Screen
+  Screen,
+  Logger
 } from './plugins'
 
 import packageInfo from '../package.json'
@@ -124,8 +125,9 @@ function install (app) {
   app.config.globalProperties.$qas = {
     dialog: Dialog,
     error: NotifyError,
-    success: NotifySuccess,
-    screen: Screen()
+    logger: Logger(),
+    screen: Screen(),
+    success: NotifySuccess
   }
 
   app.directive(Test.name, Test)
@@ -186,6 +188,7 @@ export {
 
   // plugins
   Dialog,
+  Logger,
   NotifyError,
   NotifySuccess,
   Screen,