@bildvitta/quasar-ui-asteroid 3.0.0-beta.2 → 3.0.0-beta.20

package/src/components/form-generator/QasFormGenerator.yml

@@ -4,27 +4,46 @@ meta:
   desc: Componente para criação de múltiplos campos dinâmicos a partir do componente `QasField`.
 
 props:
+  columns:
+    desc: Colunas do grid de cada campo.
+    default: col-6
+    type: [Array, String, Object]
+    examples: ["{ name: { sm: 6, md: 12 } }", "[{ sm: 6, md: 12 }]"]
+
   error:
     desc: Objeto contendo propriedades contendo a mensagem de erro.
     default: {}
     type: Object
 
+  fields-props:
+    desc: Propriedade para repassar propriedades para cada campo individualmente.
+    default: {}
+    type: Object
+    examples: ["{ name: { dense: true, onClick: () => alert('Estou sendo clicado') } }"]
+
   fields:
     desc: Lista de field contendo informações necessárias para a criação do campo correspondente.
     default: {}
     type: Object
     examples: ["{ email: { name: 'email', type: 'email', label: 'E-mail' } }"]
 
-  fields-props:
-    desc: Propriedade para repassar propriedades para cada campo individualmente.
+  fieldset:
+    desc: Lista para agrupar elementos por rótulo (label).
     default: {}
     type: Object
-    examples: ["{ name: { dense: true, onClick: () => alert('Estou sendo clicado') } }"]
+    examples: ["{ personalInformation: { label: 'Informações pessoais', fields: [name, email] } }"]
 
-  order:
-    desc: Altera ordem dos campos.
-    default: []
-    type: Array
+  fieldset-gutter:
+    desc: Espaçamento entre rótulos (label).
+    default: lg
+    type: [String, Boolean]
+    examples: [xs, sm, md, lg, xl, false]
+
+  gutter:
+    desc: Espaçamento entre colunas.
+    default: md
+    type: [String, Boolean]
+    examples: [xs, sm, md, lg, xl, false]
 
   model-value:
     desc: Model do componente, usado para o v-model.
@@ -34,17 +53,10 @@ props:
     examples: [v-model="value"]
     model: true
 
-  columns:
-    desc: Colunas do grid de cada campo.
-    default: col-6
-    type: [Array, String, Object]
-    examples: ["{ name: { sm: 6, md: 12 } }", "[{ sm: 6, md: 12 }]"]
-
-  gutter:
-    desc: Espaçamento entre colunas.
-    default: md
-    type: String
-    examples: [xs, sm, md, lg, xl]
+  order:
+    desc: Altera ordem dos campos.
+    default: []
+    type: Array
 
 slots:
   'field-[nome-da-chave]':
@@ -54,6 +66,8 @@ slots:
         desc: Payload do campo atual.
         default: {}
         type: Object
+'legend-[nome-da-chave]':
+    desc: Acessa o slot de um rótulo (label).
 
 events:
   '@update:model-value -> function(value)':

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

@@ -4,16 +4,17 @@
       <slot name="header" />
     </header>
 
-    <q-form ref="form" @submit="submit">
+    <q-form ref="form" @submit="submitHandler">
       <slot />
 
-      <slot v-if="!readOnly" name="actions">
+      <slot v-if="useActions" name="actions">
         <div class="justify-end q-col-gutter-md q-my-lg row">
           <div v-if="hasCancelButton" class="col-12 col-sm-2" :class="cancelButtonClass">
-            <qas-btn v-close-popup="dialog" class="full-width" :data-cy="`btnCancel-${entity}`" :disable="isCancelButtonDisabled" :label="cancelButton" outline type="button" @click="cancel" />
+            <qas-btn v-close-popup class="full-width" :data-cy="`btnCancel-${entity}`" :disable="isCancelButtonDisabled" :label="cancelButtonLabel" outline type="button" @click="cancel" />
           </div>
-          <div class="col-12 col-sm-2" :class="saveButtonClass">
-            <qas-btn class="full-width" :data-cy="`btnSave-${entity}`" :disable="disable" :label="submitButton" :loading="isSubmitting" type="submit" />
+
+          <div v-if="useSubmitButton" class="col-12 col-sm-2" :class="submitButtonClass">
+            <qas-btn class="full-width" :data-cy="`btnSave-${entity}`" :disable="disable" :label="submitButtonLabel" :loading="isSubmitting" type="submit" />
           </div>
         </div>
       </slot>
@@ -42,7 +43,7 @@ import { NotifyError, NotifySuccess } from '../../plugins'
 import QasBtn from '../btn/QasBtn.vue'
 import QasDialog from '../dialog/QasDialog.vue'
 
-import { viewMixin, screenMixin } from '../../mixins'
+import { viewMixin } from '../../mixins'
 
 export default {
   name: 'QasFormView',
@@ -52,10 +53,10 @@ export default {
     QasDialog
   },
 
-  mixins: [viewMixin, screenMixin],
+  mixins: [viewMixin],
 
   props: {
-    cancelButton: {
+    cancelButtonLabel: {
       default: 'Cancelar',
       type: String
     },
@@ -79,16 +80,12 @@ export default {
       type: String
     },
 
-    readOnly: {
-      type: Boolean
-    },
-
     route: {
       default: () => ({}),
       type: Object
     },
 
-    showDialogOnUnsavedChanges: {
+    useDialogOnUnsavedChanges: {
       default: true,
       type: Boolean
     },
@@ -98,7 +95,7 @@ export default {
       type: Array
     },
 
-    submitButton: {
+    submitButtonLabel: {
       default: 'Salvar',
       type: String
     },
@@ -110,6 +107,26 @@ export default {
 
     submitting: {
       type: Boolean
+    },
+
+    useActions: {
+      default: true,
+      type: Boolean
+    },
+
+    useCancelButton: {
+      default: true,
+      type: Boolean
+    },
+
+    useSubmitButton: {
+      default: true,
+      type: Boolean
+    },
+
+    beforeSubmit: {
+      default: null,
+      type: Function
     }
   },
 
@@ -126,7 +143,6 @@ export default {
   data () {
     return {
       cachedResult: {},
-      hasResult: false,
       isSubmitting: false,
       showDialog: false,
       ignoreRouterGuard: false,
@@ -146,7 +162,7 @@ export default {
 
   computed: {
     cancelButtonClass () {
-      return this.mx_isSmall && 'order-last'
+      return this.$qas.screen.isSmall && 'order-last'
     },
 
     fetchURL () {
@@ -154,7 +170,7 @@ export default {
     },
 
     hasCancelButton () {
-      return !(typeof this.cancelRoute === 'boolean' && !this.cancelRoute)
+      return !(typeof this.cancelRoute === 'boolean' && !this.cancelRoute) && this.useCancelButton
     },
 
     id () {
@@ -173,37 +189,27 @@ export default {
       return this.$route
     },
 
-    saveButtonClass () {
-      return this.mx_isSmall && 'order-first'
+    submitButtonClass () {
+      return this.$qas.screen.isSmall && 'order-first'
     },
 
     isCancelButtonDisabled () {
       return this.disable || this.isSubmitting
-    },
-
-    fieldsNameWithDefaultValue () {
-      return Object.keys(this.fields).filter(field => 'default' in this.fields[field])
     }
   },
 
   watch: {
-    mx_fields (fields) {
-      const models = { ...this.getModelsByFields(fields), ...this.modelValue }
-
-      if (!this.hasResult && this.showDialogOnUnsavedChanges) {
-        this.cachedResult = extend(true, {}, models)
-      }
-    },
-
     isSubmitting (value) {
       this.$emit('update:submitting', value)
     }
   },
 
   created () {
-    onBeforeRouteLeave(this.beforeRouteLeave)
+    this.useDialogOnUnsavedChanges && onBeforeRouteLeave(this.beforeRouteLeave)
+
     window.addEventListener('delete-success', this.setIgnoreRouterGuard)
-    this.fetch()
+
+    this.mx_fetchHandler({ form: true, id: this.id, url: this.fetchURL }, this.fetchSingle)
   },
 
   onUnmounted () {
@@ -212,14 +218,32 @@ export default {
 
   methods: {
     beforeRouteLeave (to, from, next) {
+      const clonedModelValue = extend(true, {}, this.modelValue)
+      const clonedCachedResult = extend(true, {}, this.cachedResult)
+
+      /**
+       * Se a propriedade "useDialogOnUnsavedChanges" for false ou a variável
+       * "ignoreRouterGuard" for true, então **não** iremos checar se o usuário
+       * alterou algum campo antes de sair da pagina, senão iremos validar pela função isEqualWith
+       * e mostrar um dialog antes do usuário sair da página.
+      */
       if (
-        !this.showDialogOnUnsavedChanges ||
+        !this.useDialogOnUnsavedChanges ||
         this.ignoreRouterGuard ||
-        isEqualWith(this.modelValue, this.cachedResult, this.handleIgnoreKeysInUnsavedChanges)
+        isEqualWith(
+          clonedModelValue,
+          clonedCachedResult,
+          this.handleIgnoreKeysInUnsavedChanges
+        )
       ) {
         return next()
       }
 
+      this.$qas.logger.group(
+        'QasFormView - beforeRouteLeave -> dialog chamado, modelValue diferente do cachedResult',
+        [{ modelValue: clonedModelValue, cachedResult: clonedCachedResult }]
+      )
+
       this.handleDialog(() => {
         this.ignoreRouterGuard = true
         next()
@@ -227,41 +251,64 @@ export default {
     },
 
     cancel () {
-      if (!this.dialog) {
-        this.handleCancelRoute()
-      }
+      this.handleCancelRoute()
     },
 
-    async fetch (params) {
+    async fetchSingle (externalPayload = {}) {
       this.mx_isFetching = true
 
       try {
-        const response = await this.$store.dispatch(
-          `${this.entity}/fetchSingle`, { form: true, id: this.id, params, url: this.fetchURL }
+        const payload = {
+          form: true,
+          id: this.id,
+          url: this.fetchURL,
+          ...externalPayload
+        }
+
+        this.$qas.logger.group(
+          `QasFormView - fetchSingle -> payload do parâmetro do ${this.entity}/fetchSingle`, [payload]
         )
 
+        const response = await this.$store.dispatch(`${this.entity}/fetchSingle`, payload)
+
         const { errors, fields, metadata, result } = response.data
 
+        const modelValue = { ...this.getModelsByFields(fields), ...this.modelValue }
+
         this.mx_setErrors(errors)
         this.mx_setFields(fields)
         this.mx_setMetadata(metadata)
 
         this.mx_updateModels({
-          errors: errors,
+          errors,
           fields: this.mx_fields,
           metadata
         })
 
-        if (result) {
-          this.hasResult = true
-          this.$emit('update:modelValue', { ...this.modelValue, ...result })
-          this.cachedResult = this.showDialogOnUnsavedChanges && extend(true, {}, result)
+        result && Object.assign(modelValue, result)
+
+        this.$qas.logger.group(
+          `QasFormView - fetchSingle -> resposta da action ${this.entity}/fetchSingle`, [response]
+        )
+
+        if (this.useDialogOnUnsavedChanges) {
+          this.cachedResult = extend(true, {}, result || modelValue)
+          this.$qas.logger.group('QasFormView - fetchSingle -> cachedResult', [this.cachedResult])
         }
 
+        this.$emit('update:modelValue', modelValue)
         this.$emit('fetch-success', response, this.modelValue)
+
+        this.$qas.logger.group('QasFormView - fetchSingle -> modelValue', [modelValue])
       } catch (error) {
         this.mx_fetchError(error)
         this.$emit('fetch-error', error)
+
+        this.$qas.logger.group(
+          `QasFormView - fetchSingle -> exceção da action ${this.entity}/fetchSingle`,
+          [error],
+          { error: true }
+        )
       } finally {
         this.mx_isFetching = false
       }
@@ -298,6 +345,7 @@ export default {
       const { addRoute } = useHistory()
 
       this.defaultDialogProps.ok.onClick = () => addRoute(this.$route)
+
       this.defaultDialogProps.cancel.onClick = next
     },
 
@@ -307,48 +355,76 @@ export default {
 
     // ignora chaves na hora de validar quando usuário está saindo da página
     handleIgnoreKeysInUnsavedChanges (firstValue, secondValue) {
-      const toIgnore = [
-        ...this.fieldsNameWithDefaultValue,
-        ...this.ignoreKeysInUnsavedChanges
-      ]
+      if (!this.ignoreKeysInUnsavedChanges.length) return
 
-      if (!toIgnore.length) return
+      this.ignoreKeysInUnsavedChanges.forEach(key => {
+        if (!firstValue) return
 
-      toIgnore.forEach(key => {
         delete firstValue[key]
         delete secondValue[key]
       })
     },
 
-    async submit (event) {
+    /**
+     * 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()
       }
 
-      if (this.disable || this.readyOnly) {
-        return null
+      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 response = await this.$store.dispatch(
-          `${this.entity}/${this.mode}`,
-          { 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]
         )
 
-        if (this.showDialogOnUnsavedChanges) {
+        const response = await this.$store.dispatch(`${this.entity}/${this.mode}`, payload)
+
+        if (this.useDialogOnUnsavedChanges) {
           this.cachedResult = extend(true, {}, this.modelValue)
         }
 
         this.mx_setErrors()
         NotifySuccess(response.data.status.text || 'Item salvo com sucesso!')
         this.$emit('submit-success', response, this.modelValue)
+
+        this.$qas.logger.group(
+          `QasFormView - submit -> resposta da action ${this.entity}/${this.mode}`, [response]
+        )
       } catch (error) {
         const errors = error?.response?.data?.errors
         const message = error?.response?.data?.status?.text
         const exceptionResponse = error?.response?.data?.exception
-        const exception = errors ? 'Existem erros de validação no formulário.' : exceptionResponse || error.message
+
+        const exception = errors
+          ? 'Existem erros de validação no formulário.'
+          : exceptionResponse || error.message
 
         this.mx_setErrors(errors)
         this.$emit('update:errors', this.mx_errors)
@@ -356,6 +432,12 @@ export default {
         NotifyError(message || 'Ops! Erro ao salvar item.', exception)
 
         this.$emit('submit-error', error)
+
+        this.$qas.logger.group(
+          `QasFormView - submit -> exceção da action ${this.entity}/${this.mode}`,
+          [error],
+          { error: true }
+        )
       } finally {
         this.isSubmitting = false
       }

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

@@ -4,7 +4,19 @@ meta:
   desc: Componente para C.R.U.D. responsável pela pela criação (Create) e edição (Update).
 
 props:
-  cancel-button:
+  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
     type: String
@@ -29,25 +41,30 @@ props:
     desc: Desabilita o submit.
     type: Boolean
 
-  mode:
-    desc: Existem 3 modos no QasFormView, para criação (create) (equivalente a um método POST no http), e edição que são 2 diferentes, replace (equivalente a um método PUT no http) e update (equivalente a um método PATCH no http).
-    default: create
+  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
     type: String
-    examples: [create, replace, update]
-
-  read-only:
-    desc: Controla o slot de actions.
-    type: Boolean
 
-  route:
-    desc: Você pode passar uma configuração de rota customizada.
+  errors:
+    desc: Model de errors, utilizado para recuperar os errors fora do template.
     default: {}
     type: Object
+    examples: [v-model:errors="errors"]
+    model: true
 
-  show-dialog-on-unsaved-changes:
-    desc: Vamos imaginar um cenário onde o usuário entra na nossa tela de editar/criar, faz tudo o que precisa e sem querer clica no menu para ir para outra tela, caso essa prop esteja "true", vai aparece um modal perguntando se ele quer continuar editando ou ir para a tela no qual foi inicialmente redirecionado.
-    default: true
+  fetching:
+    desc: Model de fetching, utilizado para saber se o componente está fazendo fetching de dados.
     type: Boolean
+    examples: [v-model:fetching="isFetching"]
+    model: true
+
+  fields:
+    desc: Model de fields, utilizado para recuperar os fields fora do template.
+    default: {}
+    type: Object
+    examples: [v-model:fields="fields"]
+    model: true
 
   ignore-keys-in-unsaved-changes:
     desc: Vamos imaginar um cenário onde você precisa alterar valores do v-model por qualquer motivo que seja, mas quando o usuário sair da tela, não pode aparecer o modal perguntando se ele quer sair ou continuar editando, por que o usuário de fato não fez nenhuma alteração nos dados, esta prop serve para você dizer quais keys dentro do v-model você quer ignorar.
@@ -55,10 +72,18 @@ props:
     type: Array
     examples: ["['isActive']"]
 
-  submit-button:
-    desc: Rótulo do botão "salvar".
-    default: Salvar
+  metadata:
+    desc: Model de metadata, utilizado para recuperar os metadata fora do template.
+    default: {}
+    type: Object
+    examples: [v-model:metadata="metadata"]
+    model: true
+
+  mode:
+    desc: Existem 3 modos no QasFormView, para criação (create) (equivalente a um método POST no http), e edição que são 2 diferentes, replace (equivalente a um método PUT no http) e update (equivalente a um método PATCH no http).
+    default: create
     type: String
+    examples: [create, replace, update]
 
   model-value:
     desc: Model do componente, controla o payload que será enviado para as actions dos modos create, replace e update.
@@ -67,66 +92,79 @@ props:
     examples: [v-model="values"]
     model: true
 
+  route:
+    desc: Você pode passar uma configuração de rota customizada.
+    default: {}
+    type: Object
+
+  submit-button-label:
+    desc: Rótulo do botão "salvar".
+    default: Salvar
+    type: String
+
   submitting:
     desc: Model que que mostra quando o componente está fazendo um submitting ou não.
     type: Boolean
     examples: [v-model:submitting="isSubmitting"]
     model: true
 
-  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
-    type: String
-
-  dialog:
-    desc: Este componente pode ser utilizado dentro de um dialog, neste caso o componente pai não pode ser um "QPage" e sim uma "div", esta prop cuida disto.
-    type: Boolean
-
   url:
     desc: Envia como parâmetro para a action "fetchSingle" do modulo correspondente a "entity".
     type: String
 
-  fields:
-    desc: Model de fields, utilizado para recuperar os fields fora do template.
-    default: {}
-    type: Object
-    examples: [v-model:fields="fields"]
-    model: true
+  use-actions:
+    desc: Controla se vai ter ou não o slot de actions.
+    default: true
+    type: Boolean
 
-  errors:
-    desc: Model de errors, utilizado para recuperar os errors fora do template.
-    default: {}
-    type: Object
-    examples: [v-model:errors="errors"]
-    model: true
+  use-boundary:
+    desc: Controla o limite que o FormView terá, quando é "false", a tag pai deixa de ser um "QPage" para ser uma "div" e é removido as classes "container" e "spaced", comumente utilizando quando precisa usar o QasFormView dentro de um dialog.
+    default: true
+    type: Boolean
 
-  metadata:
-    desc: Model de metadata, utilizado para recuperar os metadata fora do template.
-    default: {}
-    type: Object
-    examples: [v-model:metadata="metadata"]
-    model: true
+  use-cancel-button:
+    desc: Controla se vai ter ou não botão de "cancelar".
+    default: true
+    type: Boolean
 
-  fetching:
-    desc: Model de fetching, utilizado para saber se o componente está fazendo fetching de dados.
+  use-dialog-on-unsaved-changes:
+    desc: Vamos imaginar um cenário onde o usuário entra na nossa tela de editar/criar, faz tudo o que precisa e sem querer clica no menu para ir para outra tela, caso essa prop esteja "true", vai aparece um modal perguntando se ele quer continuar editando ou ir para a tela no qual foi inicialmente redirecionado.
+    default: true
+    type: Boolean
+
+  use-submit-button:
+    desc: Controla se vai ter ou não botão de submit.
+    default: true
     type: Boolean
-    examples: [v-model:fetching="isFetching"]
-    model: true
 
 slots:
-  header:
-    desc: Slot para acessar o header.
+  actions:
+    desc: Slot para acessar a seção onde ficam os botões de ações (salvar e cancelar).
 
   default:
     desc: Slot para ter o conteúdo principal (dentro do main).
 
-  actions:
-    desc: Slot para acessar a seção onde ficam os botões de ações (salvar e cancelar).
-
   footer:
     desc: Slot para acessar o footer.
 
+  header:
+    desc: Slot para acessar o header.
+
 events:
+  '@fetch-success -> function(value)':
+    desc: Dispara quando a action "fetchSingle" é executada com sucesso.
+    params:
+      value:
+        desc: Retorna todos os dados "cru" respondido pelo fetch.
+        type: Object
+
+  '@fetch-error -> function(value)':
+    desc: Dispara quando a action "fetchSingle" cai em uma exceção.
+    params:
+      value:
+        desc: Retorna todos os dados "cru" respondido na exceção do fetch.
+        type: Object
+
   '@update:model-value -> function(value)':
     desc: Dispara toda vez que o model atualiza.
     params:
@@ -168,17 +206,3 @@ events:
       value:
         desc: Retorna se está ou não fazendo fetching de dados.
         type: Boolean
-
-  '@fetch-success -> function(value)':
-    desc: Dispara quando a action "fetchSingle" é executada com sucesso.
-    params:
-      value:
-        desc: Retorna todos os dados "cru" respondido pelo fetch.
-        type: Object
-
-  '@fetch-error -> function(value)':
-    desc: Dispara quando a action "fetchSingle" cai em uma exceção.
-    params:
-      value:
-        desc: Retorna todos os dados "cru" respondido na exceção do fetch.
-        type: Object