@bildvitta/quasar-ui-asteroid 3.0.0-beta.13 → 3.0.0-beta.16

package/dist/vetur/asteroid-attributes.json

@@ -355,6 +355,14 @@
     "description": "Altera ordem dos campos.",
     "type": "array"
   },
+  "qas-form-view/before-fetch": {
+    "description": "Callback para controlar como funciona o comportamento do fetch.",
+    "type": "function"
+  },
+  "qas-form-view/before-submit": {
+    "description": "Callback para controlar como funciona o comportamento do submit.",
+    "type": "function"
+  },
   "qas-form-view/cancel-button-label": {
     "description": "Rótulo do botão \"cancelar\".",
     "type": "string"
@@ -567,6 +575,10 @@
     "description": "Controla se exibe ou não seção de actions, onde fica o Ícone de redirecionamento.",
     "type": "boolean"
   },
+  "qas-list-view/before-fetch": {
+    "description": "Callback para controlar como funciona o comportamento do fetchList.",
+    "type": "function"
+  },
   "qas-list-view/entity": {
     "description": "Entidade da store, por exemplo se tiver que trabalhar com modulo de usuários, teremos o model \"users\" na store, que vai ser nossa \"entity\".",
     "type": "string"
@@ -611,6 +623,10 @@
     "description": "Controla o [pull-to-refresh](https://quasar.dev/vue-components/pull-to-refresh#basic).",
     "type": "boolean"
   },
+  "qas-list-view/use-results-area-only": {
+    "description": "Controla se irá sempre ser exibido os resultados independente se não há nenhum resultado a ser exibido.",
+    "type": "boolean"
+  },
   "qas-map/center-position": {
     "description": "Opções de localização onde o mapa vai ser centralizado.",
     "type": "object"
@@ -663,6 +679,10 @@
     "description": "Espaçamento entre cada campo.",
     "type": "string"
   },
+  "qas-nested-fields/identifier-item-key": {
+    "description": "Define um identificador para o item. O identificador será utilizado para validar exclusão do item, por exemplo.",
+    "type": "string"
+  },
   "qas-nested-fields/model-value": {
     "description": "Model do componente",
     "type": "array"
@@ -991,6 +1011,10 @@
     "description": "Rótulo do uploader.",
     "type": "string"
   },
+  "qas-single-view/before-fetch": {
+    "description": "Callback para controlar como funciona o comportamento do fetchSingle.",
+    "type": "function"
+  },
   "qas-single-view/custom-id": {
     "description": "Por padrão, o componente vai pegar o \"id\" que vem como parâmetro na url, caso queira que o id seja diferente da url, use esta prop.",
     "type": "string"

package/dist/vetur/asteroid-tags.json

@@ -189,6 +189,8 @@
   },
   "qas-form-view": {
     "attributes": [
+      "before-fetch",
+      "before-submit",
       "cancel-button-label",
       "cancel-route",
       "custom-id",
@@ -277,6 +279,7 @@
   },
   "qas-list-view": {
     "attributes": [
+      "before-fetch",
       "entity",
       "errors",
       "fetching",
@@ -287,7 +290,8 @@
       "url",
       "use-boundary",
       "use-filter",
-      "use-refresh"
+      "use-refresh",
+      "use-results-area-only"
     ],
     "description": "Componente para C.R.U.D. responsável pela parte de listagem (Read)."
   },
@@ -311,6 +315,7 @@
       "fields-props",
       "form-columns",
       "form-gutter",
+      "identifier-item-key",
       "model-value",
       "row-label",
       "row-object",
@@ -453,6 +458,7 @@
   },
   "qas-single-view": {
     "attributes": [
+      "before-fetch",
       "custom-id",
       "entity",
       "errors",

package/package.json

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

package/src/components/form-view/QasFormView.vue

@@ -4,7 +4,7 @@
       <slot name="header" />
     </header>
 
-    <q-form ref="form" @submit="submit">
+    <q-form ref="form" @submit="submitHandler">
       <slot />
 
       <slot v-if="useActions" name="actions">
@@ -122,6 +122,11 @@ export default {
     useSubmitButton: {
       default: true,
       type: Boolean
+    },
+
+    beforeSubmit: {
+      default: null,
+      type: Function
     }
   },
 
@@ -215,7 +220,7 @@ export default {
 
     window.addEventListener('delete-success', this.setIgnoreRouterGuard)
 
-    this.fetch()
+    this.mx_fetchHandler({ form: true, id: this.id, url: this.fetchURL }, this.fetch)
   },
 
   onUnmounted () {
@@ -350,6 +355,7 @@ export default {
       const { addRoute } = useHistory()
 
       this.defaultDialogProps.ok.onClick = () => addRoute(this.$route)
+
       this.defaultDialogProps.cancel.onClick = next
     },
 
@@ -369,17 +375,35 @@ export default {
       })
     },
 
-    async submit (event) {
-      if (this.disable) return null
-
+    /**
+     * Se existe a propriedade com callback "beforeSubmit", então o controle de quando e como chamar o método "submit"
+     * está sendo controlado fora do QasFormView, se não existir a propriedade "beforeSubmit", então o controle do método
+     * submit é feito pelo próprio QasFormView, chamado pelo evento @submit.
+    */
+    submitHandler (event) {
       if (event) {
         event.preventDefault()
       }
 
+      const hasBeforeSubmit = typeof this.beforeSubmit === 'function'
+
+      if (hasBeforeSubmit) {
+        return this.beforeSubmit({
+          payload: { id: this.id, payload: this.modelValue, url: this.url },
+          resolve: payload => this.submit(payload)
+        })
+      }
+
+      this.submit()
+    },
+
+    async submit (externalPayload = {}) {
+      if (this.disable) return null
+
       this.isSubmitting = true
 
       try {
-        const payload = { id: this.id, payload: this.modelValue, url: this.url }
+        const payload = { id: this.id, payload: this.modelValue, url: this.url, ...externalPayload }
 
         this.$qas.logger.group(
           `QasFormView - submit -> payload do ${this.entity}/${this.mode}`, [payload]

package/src/components/form-view/QasFormView.yml

@@ -4,6 +4,18 @@ meta:
   desc: Componente para C.R.U.D. responsável pela pela criação (Create) e edição (Update).
 
 props:
+  before-fetch:
+    desc: Callback para controlar como funciona o comportamento do fetch.
+    default: null
+    type: Function
+    examples: ['beforeFetch({ payload, resolve })']
+
+  before-submit:
+    desc: Callback para controlar como funciona o comportamento do submit.
+    default: null
+    type: Function
+    examples: ['beforeSubmit({ payload, resolve })']
+
   cancel-button-label:
     desc: Rótulo do botão "cancelar".
     default: Cancelar

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

@@ -10,7 +10,7 @@
       </slot>
 
       <main class="relative-position">
-        <div v-if="hasResults">
+        <div v-if="showResults">
           <slot />
         </div>
 
@@ -72,6 +72,10 @@ export default {
     useFilter: {
       default: true,
       type: Boolean
+    },
+
+    useResultsAreaOnly: {
+      type: Boolean
     }
   },
 
@@ -107,13 +111,17 @@ export default {
 
     totalPages () {
       return this.$store.getters[`${this.entity}/totalPages`]
+    },
+
+    showResults () {
+      return this.hasResults || this.useResultsAreaOnly
     }
   },
 
   watch: {
     $route (to, from) {
       if (to.name === from.name) {
-        this.fetchList()
+        this.mx_fetchHandler({ ...this.mx_context, url: this.url }, this.fetchList)
         this.setCurrentPage()
       }
     },
@@ -128,7 +136,8 @@ export default {
   },
 
   created () {
-    this.fetchList()
+    this.mx_fetchHandler({ ...this.mx_context, url: this.url }, this.fetchList)
+
     this.setCurrentPage()
   },
 
@@ -138,16 +147,14 @@ export default {
       this.$router.push({ query })
     },
 
-    async fetchList (filters = {}) {
+    async fetchList (externalPayload = {}) {
       this.mx_isFetching = true
 
-      const hasFilters = !!Object.keys(filters).length
-
       try {
         const payload = {
           ...this.mx_context,
           url: this.url,
-          ...(hasFilters && { filters })
+          ...externalPayload
         }
 
         this.$qas.logger.group(
@@ -171,7 +178,7 @@ export default {
         this.$emit('fetch-success', response)
 
         this.$qas.logger.group(
-          `QasListView - fetchSingle -> resposta da action ${this.entity}/fetchList`, [response]
+          `QasListView - fetchList -> resposta da action ${this.entity}/fetchList`, [response]
         )
       } catch (error) {
         this.mx_fetchError(error)

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

@@ -4,6 +4,12 @@ meta:
   desc: Componente para C.R.U.D. responsável pela parte de listagem (Read).
 
 props:
+  before-fetch:
+    desc: Callback para controlar como funciona o comportamento do fetchList.
+    default: null
+    type: Function
+    examples: ['beforeFetch({ payload, resolve, done })']
+
   entity:
     desc: Entidade da store, por exemplo se tiver que trabalhar com modulo de usuários, teremos o model "users" na store, que vai ser nossa "entity".
     required: true
@@ -67,6 +73,10 @@ props:
     default: true
     type: Boolean
 
+  use-results-area-only:
+    desc: Controla se irá sempre ser exibido os resultados independente se não há nenhum resultado a ser exibido.
+    type: Boolean
+
 slots:
   default:
     desc: 'Slot para ter o conteúdo principal (dentro do main).'

package/src/components/nested-fields/QasNestedFields.vue

@@ -159,6 +159,11 @@ export default {
       }
     },
 
+    identifierItemKey: {
+      type: String,
+      default: 'uuid'
+    },
+
     rowLabel: {
       type: String,
       default: ''
@@ -261,13 +266,8 @@ export default {
     modelValue: {
       handler (value) {
         this.nested = extend(true, [], value)
-      },
-      immediate: true
-    },
 
-    field: {
-      handler () {
-        !this.modelValue.length && this.setDefaultNestedValue()
+        if (!this.nested.length) return this.setDefaultNestedValue()
       },
       immediate: true
     }
@@ -276,6 +276,11 @@ export default {
   methods: {
     add (row = {}) {
       const payload = { ...this.rowObject, ...row }
+      const hasIdentifierKey = payload[this.identifierItemKey]
+
+      if (hasIdentifierKey) {
+        delete payload[this.identifierItemKey]
+      }
 
       this.nested.push(payload)
 
@@ -301,7 +306,7 @@ export default {
     },
 
     destroy (index, row) {
-      this.useRemoveOnDestroy
+      !row[this.identifierItemKey] || this.useRemoveOnDestroy
         ? this.nested.splice(index, 1)
         : this.nested.splice(index, 1, { [this.destroyKey]: true, ...row })
 

package/src/components/nested-fields/QasNestedFields.yml

@@ -56,6 +56,12 @@ props:
     type: String
     examples: [xs, sm, md, lg, xl]
 
+  identifier-item-key:
+    desc: Define um identificador para o item. O identificador será utilizado para validar exclusão do item, por exemplo.
+    default: uuid
+    type: String
+    examples: [id, uuid, slug]
+
   model-value:
     desc: Model do componente
     default: []

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

@@ -66,7 +66,9 @@ export default {
 
   watch: {
     $route (to, from) {
-      to.name === from.name && this.fetchSingle()
+      if (to.name === from.name) {
+        this.mx_fetchHandler({ id: this.id, url: this.url }, this.fetchSingle)
+      }
     },
 
     resultModel (value) {
@@ -75,15 +77,15 @@ export default {
   },
 
   created () {
-    this.fetchSingle()
+    this.mx_fetchHandler({ id: this.id, url: this.url }, this.fetchSingle)
   },
 
   methods: {
-    async fetchSingle (params = {}) {
+    async fetchSingle (externalPayload = {}) {
       this.mx_isFetching = true
 
       try {
-        const payload = { id: this.id, url: this.url, params }
+        const payload = { id: this.id, url: this.url, ...externalPayload }
 
         this.$qas.logger.group(
           `QasSingleView - fetchSingle -> payload do parâmetro do ${this.entity}/fetchSingle`,

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

@@ -4,6 +4,12 @@ meta:
   desc: Componente para C.R.U.D. responsável pela visualização (Read) ou conhecido também como "show".
 
 props:
+  before-fetch:
+    desc: Callback para controlar como funciona o comportamento do fetchSingle.
+    default: null
+    type: Function
+    examples: ['beforeFetch({ payload, resolve, done })']
+
   custom-id:
     desc: Por padrão, o componente vai pegar o "id" que vem como parâmetro na url, caso queira que o id seja diferente da url, use esta prop.
     type: String

package/src/mixins/view.js

@@ -35,6 +35,11 @@ export default {
     useBoundary: {
       default: true,
       type: Boolean
+    },
+
+    beforeFetch: {
+      default: null,
+      type: Function
     }
   },
 
@@ -50,7 +55,7 @@ export default {
       mx_errors: {},
       mx_fields: {},
       mx_metadata: {},
-
+      mx_cancelBeforeFetch: false,
       mx_isFetching: false
     }
   },
@@ -116,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()
     }
   }
 }