@bildvitta/quasar-ui-asteroid 3.16.0-beta.2 → 3.16.0-beta.4

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bildvitta/quasar-ui-asteroid",
   "description": "Asteroid",
-  "version": "3.16.0-beta.2",
+  "version": "3.16.0-beta.4",
   "author": "Bild & Vitta <systemteam@bild.com.br>",
   "license": "MIT",
   "main": "dist/asteroid.cjs.min.js",
@@ -43,6 +43,7 @@
     "sass": "^1.62.1"
   },
   "dependencies": {
+    "@bildvitta/composables": "^1.0.0-beta.7",
     "@bildvitta/store-adapter": "^1.0.0",
     "autonumeric": "^4.9.0",
     "axios": "^1.4.0",

package/src/components/actions-menu/QasActionsMenu.vue

@@ -3,7 +3,7 @@
     <qas-btn-dropdown v-bind="btnDropdownProps">
       <q-list data-cy="actions-menu-list">
         <slot v-for="(item, key) in formattedList.dropdownList" :item="item" :name="key">
-          <q-item v-bind="getItemProps(item)" :key="key" clickable data-cy="actions-menu-list-item" @click="setClickHandler(item)">
+          <q-item v-bind="getItemProps(item)" :key="key" active-class="primary" clickable data-cy="actions-menu-list-item" @click="setClickHandler(item)">
             <q-item-section avatar>
               <q-icon :name="item.icon" />
             </q-item-section>
@@ -240,10 +240,11 @@ const { showTooltip, tooltipLabels } = useTooltips({ formattedList, fullList, pr
 
 // functions
 function getItemProps (item) {
-  const { disable, props: itemProps } = item
+  const { disable, props: itemProps, to } = item
 
   return {
     disable,
+    to,
     ...itemProps
   }
 }

package/src/components/header-actions/QasHeaderActions.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="justify-between no-wrap q-col-gutter-x-md q-mb-xl row text-body1 text-grey-8" :class="containerClass">
+  <div class="justify-between no-wrap q-col-gutter-x-md row text-body1 text-grey-8" :class="containerClass">
     <div :class="leftClass">
       <slot name="left">
         {{ props.text }}
@@ -18,6 +18,8 @@
 
 <script setup>
 import { FlexAlign } from '../../enums/Align'
+import { Spacing } from '../../enums/Spacing'
+import { gutterValidator } from '../../helpers/private/gutter-validator'
 
 import { computed, useSlots } from 'vue'
 
@@ -43,13 +45,20 @@ const props = defineProps({
   text: {
     type: String,
     default: ''
+  },
+
+  spacing: {
+    default: Spacing.Xl,
+    type: String,
+    validator: gutterValidator
   }
 })
 
 const slots = useSlots()
 
 // computed
-const containerClass = computed(() => `items-${props.alignColumns}`)
+const containerClass = computed(() => `items-${props.alignColumns} q-mb-${props.spacing}`)
+
 const leftClass = computed(() => hasRightSide.value ? 'col-9 col-md-9 col-sm-8' : 'col-12')
 
 const hasDefaultButton = computed(() => !!Object.keys(props.buttonProps).length)

package/src/components/header-actions/QasHeaderActions.yml

@@ -24,6 +24,12 @@ props:
     desc: Descrição da seção a esquerda.
     type: String
 
+  spacing:
+    desc: Espaçamento entre o componente e o conteúdo abaixo.
+    default: xl
+    type: String
+    examples: [none, xs, sm, md, lg, xl, '2xl', '3xl', '4xl', '5xl']
+
 slots:
   left:
     desc: slot para acessar seção da esquerda (descrição).

package/src/components/single-view/QasSingleView.vue

@@ -1,6 +1,6 @@
 <template>
-  <div :class="mx_componentClass">
-    <header v-if="mx_hasHeaderSlot">
+  <div :class="componentClass">
+    <header v-if="hasHeaderSlot">
       <slot name="header" />
     </header>
 
@@ -8,117 +8,160 @@
       <slot />
     </template>
 
-    <qas-empty-result-text v-else-if="!mx_isFetching" class="q-my-xl" />
+    <qas-empty-result-text v-else-if="!viewState.fetching" class="q-my-xl" />
 
-    <footer v-if="mx_hasFooterSlot">
+    <footer v-if="hasFooterSlot">
       <slot name="footer" />
     </footer>
 
-    <q-inner-loading :showing="mx_isFetching">
+    <q-inner-loading :showing="viewState.fetching">
       <q-spinner color="grey" size="3em" />
     </q-inner-loading>
   </div>
 </template>
 
-<script>
-import viewMixin from '../../mixins/view'
+<script setup>
+import useView, { baseProps, baseEmits } from '../../composables/private/use-view'
 
-import { markRaw } from 'vue'
-import { getGetter, getAction } from '@bildvitta/store-adapter'
 import debug from 'debug'
+import { decamelize } from 'humps'
+import { markRaw, computed, watch, inject } from 'vue'
+import { useRoute } from 'vue-router'
 
 const log = debug('asteroid-ui:qas-single-view')
 
-export default {
-  name: 'QasSingleView',
+defineOptions({ name: 'QasSingleView' })
 
-  mixins: [viewMixin],
+const props = defineProps({
+  ...baseProps,
 
-  props: {
-    customId: {
-      default: '',
-      type: [Number, String]
-    },
-
-    result: {
-      default: () => ({}),
-      type: Object
-    }
+  customId: {
+    default: '',
+    type: [Number, String]
   },
 
-  emits: [
-    'update:result',
-    'fetch-success',
-    'fetch-error'
-  ],
+  result: {
+    default: () => ({}),
+    type: Object
+  }
+})
 
-  computed: {
-    hasResult () {
-      return !!this.resultModel
-    },
+const emit = defineEmits([
+  ...baseEmits,
 
-    id () {
-      return this.customId || this.$route.params.id
-    },
+  'update:result',
+  'fetch-success',
+  'fetch-error'
+])
 
-    resultModel () {
-      return getGetter.call(this, { entity: this.entity, key: 'byId' })(this.id) || {}
-    }
-  },
+const slots = defineSlots()
 
-  watch: {
-    $route (to, from) {
-      if (to.name === from.name) {
-        this.mx_fetchHandler({ id: this.id, url: this.url }, this.fetchSingle)
-      }
-    },
+// globals
+const axios = inject('axios')
+const qas = inject('qas')
 
-    resultModel (value) {
-      this.$emit('update:result', markRaw({ ...value }))
-    }
-  },
+// composables
+const route = useRoute()
 
-  created () {
-    this.mx_fetchHandler({ id: this.id, url: this.url }, this.fetchSingle)
-  },
+const {
+  // state
+  viewState,
+
+  // computed
+  componentClass,
+  hasHeaderSlot,
+  hasFooterSlot,
+
+  // functions
+  errorHandler,
+  fetchHandler,
+  setErrors,
+  setFields,
+  setMetadata,
+  setResult,
+  updateModels
+} = useView({ emit, props, slots, mode: 'single' })
+
+// computed
+const id = computed(() => props.customId || route.params.id)
+
+const resultModel = computed(() => {
+  if (props.useStore) return qas.getGetter({ entity: props.entity, key: 'byId' })(id.value) || {}
+
+  return viewState.value.result || {}
+})
+
+const hasResult = computed(() => !!resultModel.value)
+
+// watch
+watch(() => route, (to, from) => {
+  if (to.name === from.name) {
+    fetchHandler({ id: id.value, url: props.url }, fetchSingle)
+  }
+})
+
+watch(() => resultModel.value, value => emit('update:result', markRaw({ ...value })))
+
+// created
+fetchHandler({ id: id.value, url: props.url }, fetchSingle)
+
+// functions
+async function fetchSingle (externalPayload = {}) {
+  viewState.value.fetching = true
+
+  try {
+    const payload = { id: id.value, url: props.url, ...externalPayload }
+
+    const response = await getAction(payload)
 
-  methods: {
-    async fetchSingle (externalPayload = {}) {
-      this.mx_isFetching = true
+    const { errors, fields, metadata, result } = response.data
 
-      try {
-        const payload = { id: this.id, url: this.url, ...externalPayload }
+    setErrors(errors)
+    setFields(fields)
+    setMetadata(metadata)
 
-        const response = await getAction.call(this, {
-          entity: this.entity,
-          key: 'fetchSingle',
-          payload
-        })
+    /**
+     * result só precisa ser adicionado ao estado se não estiver usando store,
+     * pois com a store é usado o getter.
+     */
+    !props.useStore && setResult(result)
 
-        const { errors, fields, metadata } = response.data
+    updateModels({
+      errors: viewState.value.errors,
+      fields: viewState.value.fields,
+      metadata: viewState.value.metadata,
 
-        this.mx_setErrors(errors)
-        this.mx_setFields(fields)
-        this.mx_setMetadata(metadata)
+      ...(!props.useStore && { result: viewState.value.result })
+    })
 
-        this.mx_updateModels({
-          errors: this.mx_errors,
-          fields: this.mx_fields,
-          metadata: this.mx_metadata
-        })
+    emit('fetch-success', response)
 
-        this.$emit('fetch-success', response)
+    log(`[${props.entity}]:fetchSingle:success`, response)
+  } catch (error) {
+    errorHandler(error)
+    emit('fetch-error', error)
 
-        log(`[${this.entity}]:fetchSingle:success`, response)
-      } catch (error) {
-        this.mx_fetchError(error)
-        this.$emit('fetch-error', error)
+    log(`[${props.entity}]:fetchSingle:error`, error)
+  } finally {
+    viewState.value.fetching = false
+  }
+}
 
-        log(`[${this.entity}]:fetchSingle:error`, error)
-      } finally {
-        this.mx_isFetching = false
-      }
-    }
+function getAction (payload) {
+  if (props.useStore) {
+    return qas.getAction({
+      entity: props.entity,
+      key: 'fetchSingle',
+      payload
+    })
   }
+
+  const { id: unusedID, url: unusedURL, ...externalPayload } = payload
+
+  const decamelizedEntity = decamelize(props.entity, { separator: '-' })
+
+  const url = props.url || `${decamelizedEntity}/${id.value}`
+
+  return axios.get(url, { ...externalPayload })
 }
 </script>

package/src/components/single-view/QasSingleView.yml

@@ -62,6 +62,11 @@ props:
     default: true
     type: Boolean
 
+  use-route:
+    desc: Controla se o componente usará internamente uma store do vuex/pinia ou se vai ser utilizado o axios diretamente.
+    default: true
+    type: Boolean
+
 slots:
   default:
     desc: 'Slot para ter o conteúdo principal (dentro do main).'

package/src/composables/private/index.js

@@ -0,0 +1,2 @@
+export { default as useView } from './use-view'
+export { default as useGenerator } from './use-generator'

package/src/composables/private/use-view.js

@@ -0,0 +1,180 @@
+import { NotifyError } from '../../plugins'
+import { camelizeFieldsName } from '../../helpers'
+
+import { useView as useViewComposable } from '@bildvitta/composables'
+import { ref, computed, watch, markRaw } from 'vue'
+import { useRouter } from 'vue-router'
+
+export const baseProps = {
+  beforeFetch: {
+    default: null,
+    type: Function
+  },
+
+  errors: {
+    default: () => ({}),
+    type: Object
+  },
+
+  entity: {
+    type: String,
+    required: ''
+  },
+
+  fetching: {
+    type: Boolean
+  },
+
+  fields: {
+    default: () => ({}),
+    type: Object
+  },
+
+  metadata: {
+    default: () => ({}),
+    type: Object
+  },
+
+  url: {
+    default: '',
+    type: String
+  },
+
+  useBoundary: {
+    default: true,
+    type: Boolean
+  },
+
+  useStore: {
+    default: true,
+    type: Boolean
+  }
+}
+
+export const baseEmits = [
+  'update:fields',
+  'update:errors',
+  'update:metadata',
+  'update:fetching'
+]
+
+/**
+ * @param {{
+ *  mode: import('@bildvitta/composables').ViewModeTypes,
+ *  props: baseProps,
+ *  emit: (baseEmits: string) => void,
+ *  slots: import('vue').Slots
+ * }} config
+ */
+export default function useView (config) {
+  const {
+    emit,
+    mode,
+    slots,
+    props
+  } = config
+
+  // composables
+  const router = useRouter()
+  const { viewState } = useViewComposable({ mode })
+
+  // refs
+  const cancelBeforeFetch = ref(false)
+
+  // constants
+  const fetchErrorMessage = 'Ops… Não conseguimos acessar as informações. Por favor, tente novamente em alguns minutos.'
+
+  // computed
+  const componentClass = computed(() => props.useBoundary && 'container spaced')
+  const hasFooterSlot = computed(() => !!slots.footer)
+  const hasHeaderSlot = computed(() => !!slots.header)
+
+  // watch
+  watch(() => viewState.value.fetching, value => emit('update:fetching', value))
+
+  // functions
+  function errorHandler (error) {
+    const { response } = error
+
+    const status = response?.status
+
+    const redirect = status >= 500
+      ? 'ServerError'
+      : ({ 403: 'Forbidden', 404: 'NotFound' })[status]
+
+    /**
+     * caso exista um desses status será redirecionado sem aparecer o "notify"
+     */
+    if (redirect) {
+      router.replace({ name: redirect })
+
+      return
+    }
+
+    NotifyError(fetchErrorMessage)
+  }
+
+  function setErrors (errors = {}) {
+    viewState.value.errors = markRaw(errors)
+  }
+
+  function setFields (fields = {}) {
+    const camelizedFields = camelizeFieldsName(fields)
+
+    viewState.value.fields = markRaw(camelizedFields)
+  }
+
+  function setMetadata (metadata = {}) {
+    viewState.value.metadata = markRaw(metadata)
+  }
+
+  function setResult (result = {}) {
+    viewState.value.result = result
+  }
+
+  function updateModels (models) {
+    for (const key in models) {
+      if (!models[key]) continue
+
+      emit(`update:${key}`, models[key])
+    }
+  }
+
+  function fetchHandler (payload, resolve) {
+    const hasBeforeFetch = typeof props.beforeFetch === 'function'
+
+    if (hasBeforeFetch && !cancelBeforeFetch.value) {
+      return props.beforeFetch({
+        payload,
+        resolve: payload => resolve(payload),
+        done: () => {
+          cancelBeforeFetch.value = true
+        }
+      })
+    }
+
+    resolve()
+  }
+
+  return {
+    // state
+    viewState,
+
+    // constants
+    fetchErrorMessage,
+
+    // computed
+    componentClass,
+    hasFooterSlot,
+    hasHeaderSlot,
+
+    // functions
+    errorHandler,
+    fetchHandler,
+    setErrors,
+    setFields,
+    setResult,
+    setMetadata,
+    updateModels
+  }
+}

package/src/vue-plugin.js

@@ -72,7 +72,7 @@ import QasWhatsappLink from './components/whatsapp-link/QasWhatsappLink.vue'
 
 import { Notify, Loading, Quasar, Dialog as QuasarDialog } from 'quasar'
 
-import { getAction } from '@bildvitta/store-adapter'
+import { getAction, getGetter } from '@bildvitta/store-adapter'
 
 // Plugins
 import {
@@ -176,7 +176,8 @@ async function install (app) {
   app.provide('qas', {
     delete: params => Delete.call(app.config.globalProperties, params),
 
-    getAction: params => getAction.call(app.config.globalProperties, params)
+    getAction: params => getAction.call(app.config.globalProperties, params),
+    getGetter: params => getGetter.call(app.config.globalProperties, params)
   })
 
   app.directive(Test.name, Test)