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

package/src/helpers/camelize-fields-name.js

@@ -0,0 +1,15 @@
+import { camelize } from 'humps'
+
+export default function camelizeFieldsName (fields) {
+  for (const field in fields) {
+    const currentField = fields[field]
+
+    currentField.name = camelize(currentField.name)
+
+    if (Object.keys(currentField.children || {}).length) {
+      camelizeFieldsName(currentField.children)
+    }
+  }
+
+  return fields
+}

package/src/helpers/filters.js

@@ -114,6 +114,8 @@ function humanize (field = {}, value) {
     case 'time': return time(value)
     case 'radio': return selectLabel(field.options, value)
     case 'percent': return formatPercent(value)
+    case 'money': return money(value)
+    case 'decimal': return decimal(value)
     default: return value
   }
 }

package/src/helpers/get-normalized-options.js

@@ -0,0 +1,20 @@
+/**
+ * param {options: object[], label: string, value: string} object
+ *
+ * @example getNormalizedOptions({
+ *  options: [{ name: 'Test 1', uuid: '1' }, { name: 'Test 2', uuid: '2' }],
+ *  label: 'name'
+ *  value: 'uuid'
+ * }) // retorna [{ label: 'Test 1', value: '1' }, { label: 'Test 2', value: '2' }]
+ */
+export default ({ options = [], label, value }) => {
+  return options.map(option => {
+    const { [label]: labelKey, [value]: valueKey, ...payload } = option
+
+    return {
+      label: option[label],
+      value: option[value],
+      ...payload
+    }
+  })
+}

package/src/helpers/handle-process.js

@@ -0,0 +1,13 @@
+/**
+ * @param {function} processEnv função que retorna o process.env.
+ * @param {string} defaultValue valor default caso não exista a process.env
+ *
+ * @example handleProcess(() => process.env.MY_ENV, 'meu-valor-default')
+ */
+export default (processEnv = () => {}, defaultValue) => {
+  try {
+    return processEnv() || defaultValue
+  } catch {
+    return defaultValue
+  }
+}

package/src/helpers/index.js

@@ -8,6 +8,9 @@ export { default as filterObject } from './filter-object.js'
 export { default as getGreatestCommonDivisor } from './get-greatest-common-divisor.js'
 export { default as filterObjectToArray } from './filter-object-to-array.js'
 export { default as filterListByHandle } from './filter-list-by-handle.js'
+export { default as camelizeFieldsName } from './camelize-fields-name.js'
+export { default as getNormalizedOptions } from './get-normalized-options.js'
+export { default as handleProcess } from './handle-process.js'
 
 export * from './filters.js'
 export * from './images.js'

package/src/mixins/generator.js

@@ -15,7 +15,9 @@ export default {
     gutter: {
       default: 'md',
       type: [String, Boolean],
-      validator: value => ['xs', 'sm', 'md', 'lg', 'xl'].includes(value)
+      validator: value => {
+        return typeof value === 'boolean' || ['xs', 'sm', 'md', 'lg', 'xl'].includes(value)
+      }
     }
   },
 
@@ -64,7 +66,13 @@ export default {
     },
 
     mx_handleColumnsByIndex (index, isGridGenerator) {
-      const fields = isGridGenerator ? this.fields : this.groupedFields.visible
+      const fields = isGridGenerator ? this.fields : {}
+
+      if (!isGridGenerator) {
+        for (const key in this.normalizedFields) {
+          Object.assign(fields, this.normalizedFields[key].fields.visible)
+        }
+      }
 
       if (!Array.isArray(fields)) {
         index = Object.keys(fields).findIndex(field => field === index)

package/src/mixins/index.js

@@ -1,6 +1,7 @@
 import contextMixin from './context.js'
 import formMixin from './form.js'
 import generatorMixin from './generator.js'
+import searchFilterMixin from './search-filter.js'
 import passwordMixin from './password.js'
 import viewMixin from './view.js'
 
@@ -8,6 +9,7 @@ export {
   contextMixin,
   formMixin,
   generatorMixin,
+  searchFilterMixin,
   passwordMixin,
   viewMixin
 }

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 () {
@@ -86,7 +92,9 @@ export default {
       this.$qas.error('Ops! Erro ao obter os dados.', exception)
 
       const status = response?.status
-      const redirect = ({ 403: 'Forbidden', 404: 'NotFound' })[status]
+      const redirect = status >= 500
+        ? 'ServerError'
+        : ({ 401: 'Unauthorized', 403: 'Forbidden', 404: 'NotFound' })[status]
 
       if (redirect) {
         this.$router.replace({ name: redirect })
@@ -98,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 = {}) {
@@ -115,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/pages/Forbidden.vue

@@ -3,9 +3,11 @@
 </template>
 
 <script>
-import ErrorComponent from './ErrorComponent'
+import ErrorComponent from './ErrorComponent.vue'
 
 export default {
+  name: 'Forbidden',
+
   components: {
     ErrorComponent
   },

package/src/pages/NotFound.vue

@@ -3,9 +3,11 @@
 </template>
 
 <script>
-import ErrorComponent from './ErrorComponent'
+import ErrorComponent from './ErrorComponent.vue'
 
 export default {
+  name: 'NotFound',
+
   components: {
     ErrorComponent
   },

package/src/pages/ServerError.vue

@@ -3,9 +3,11 @@
 </template>
 
 <script>
-import ErrorComponent from './ErrorComponent'
+import ErrorComponent from './ErrorComponent.vue'
 
 export default {
+  name: 'ServerError',
+
   components: {
     ErrorComponent
   },

package/src/pages/Unauthorized.vue

@@ -0,0 +1,28 @@
+<template>
+  <error-component v-bind="errorProps" />
+</template>
+
+<script>
+import ErrorComponent from './ErrorComponent.vue'
+
+export default {
+  name: 'Unauthorized',
+
+  components: {
+    ErrorComponent
+  },
+
+  computed: {
+    errorProps () {
+      return {
+        code: '401',
+        title: 'Ops! Parece que você está sem acesso ao sistema!',
+        buttonProps: {
+          to: { path: '/auth/login' },
+          label: 'Fazer login'
+        }
+      }
+    }
+  }
+}
+</script>

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,