@bildvitta/quasar-ui-asteroid 2.16.0 → 3.0.0-alpha.2

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

@@ -1,55 +1,58 @@
 <template>
-  <component :is="componentTag">
-    <header v-if="hasHeaderSlot">
-      <slot :errors="errors" :fields="fields" :metadata="metadata" name="header" />
+  <component :is="mx_componentTag">
+    <header v-if="mx_hasHeaderSlot">
+      <slot name="header" />
     </header>
 
     <q-form ref="form" @submit="submit">
-      <slot :errors="errors" :fields="fields" :metadata="metadata" />
+      <slot />
 
-      <slot v-if="!readOnly" :errors="errors" :fields="fields" :metadata="metadata" name="actions">
+      <slot v-if="!readOnly" 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" />
           </div>
           <div class="col-12 col-sm-2" :class="saveButtonClass">
-            <qas-btn class="full-width" :data-cy="`btnSave-${entity}`" :disable="disable" :label="submitButton" :loading="isSubmiting" type="submit" />
+            <qas-btn class="full-width" :data-cy="`btnSave-${entity}`" :disable="disable" :label="submitButton" :loading="isSubmitting" type="submit" />
           </div>
         </div>
       </slot>
     </q-form>
 
-    <footer v-if="hasFooterSlot">
-      <slot :errors="errors" :fields="fields" :metadata="metadata" name="footer" />
+    <footer v-if="mx_hasFooterSlot">
+      <slot name="footer" />
     </footer>
 
-    <qas-dialog v-model="showDialog" v-bind="dialogConfig" />
+    <qas-dialog v-model="showDialog" v-bind="defaultDialogProps" />
 
-    <q-inner-loading :showing="isFetching">
+    <q-inner-loading :showing="mx_isFetching">
       <q-spinner color="grey" size="3em" />
     </q-inner-loading>
   </component>
 </template>
 
 <script>
-import { get, isEqual, cloneDeep } from 'lodash'
+import { isEqualWith } from 'lodash-es'
 import { extend } from 'quasar'
+import { onBeforeRouteLeave } from 'vue-router'
 
-import { handleHistory } from '../../helpers/historyHandler'
+import { addRoute, history } from '../../store/history'
 import { NotifyError, NotifySuccess } from '../../plugins'
 
-import QasBtn from '../btn/QasBtn'
-import QasDialog from '../dialog/QasDialog'
+import QasBtn from '../btn/QasBtn.vue'
+import QasDialog from '../dialog/QasDialog.vue'
 
-import viewMixin from '../../mixins/view'
+import { viewMixin, screenMixin } from '../../mixins'
 
 export default {
+  name: 'QasFormView',
+
   components: {
     QasBtn,
     QasDialog
   },
 
-  mixins: [viewMixin],
+  mixins: [viewMixin, screenMixin],
 
   props: {
     cancelButton: {
@@ -90,46 +93,60 @@ export default {
       type: Boolean
     },
 
+    ignoreKeysInUnsavedChanges: {
+      default: () => [],
+      type: Array
+    },
+
     submitButton: {
       default: 'Salvar',
       type: String
     },
 
-    value: {
+    modelValue: {
       default: () => ({}),
       type: Object
+    },
+
+    submitting: {
+      type: Boolean
     }
   },
 
+  emits: [
+    'submit-success',
+    'submit-error',
+    'fetch-success',
+    'fetch-error',
+    'update:modelValue',
+    'update:submitting',
+    'update:errors'
+  ],
+
   data () {
     return {
       cachedResult: {},
       hasResult: false,
-      isSubmiting: false,
+      isSubmitting: false,
       showDialog: false,
+      ignoreRouterGuard: false,
 
-      dialogConfig: {
+      defaultDialogProps: {
         card: {
           title: 'Atenção!',
           description: 'Você está deixando a página e suas alterações serão perdidas. Tem certeza que deseja sair sem salvar?'
         },
 
-        ok: {
-          props: { label: 'Continuar editando' },
-          events: null
-        },
+        ok: { label: 'Continuar editando' },
 
-        cancel: {
-          props: { label: 'Sair' },
-          events: null
-        }
+        cancel: { label: 'Sair' }
       }
     }
   },
 
   computed: {
     cancelButtonClass () {
-      return this.isMobile && 'order-last'
+      return this.mx_isSmall && 'order-last'
     },
 
     fetchURL () {
@@ -148,10 +165,6 @@ export default {
       return this.mode === 'create'
     },
 
-    isMobile () {
-      return this.$q.screen.xs
-    },
-
     resolvedRoute () {
       if (this.route && Object.keys(this.route).length) {
         return this.route
@@ -161,40 +174,60 @@ export default {
     },
 
     saveButtonClass () {
-      return this.isMobile && 'order-first'
+      return this.mx_isSmall && 'order-first'
     },
 
     isCancelButtonDisabled () {
       return this.disable || this.isSubmitting
+    },
+
+    history () {
+      return history.list
+    },
+
+    fieldsNameWithDefaultValue () {
+      return Object.keys(this.fields).filter(field => 'default' in this.fields[field])
     }
   },
 
   watch: {
-    fields (fields) {
-      const models = { ...this.getModelsByFields(fields), ...this.value }
-      this.$emit('input', models)
+    mx_fields (fields) {
+      const models = { ...this.getModelsByFields(fields), ...this.modelValue }
 
       if (!this.hasResult && this.showDialogOnUnsavedChanges) {
-        this.cachedResult = cloneDeep(models)
+        this.cachedResult = extend(true, {}, models)
       }
+    },
+
+    isSubmitting (value) {
+      this.$emit('update:submitting', value)
     }
   },
 
   created () {
+    onBeforeRouteLeave(this.beforeRouteLeave)
+    window.addEventListener('delete-success', this.setIgnoreRouterGuard)
     this.fetch()
   },
 
-  methods: {
-    beforeRouteLeave (to, from, next, fromDelete) {
-      if (!this.showDialogOnUnsavedChanges) {
-        return null
-      }
+  onUnmounted () {
+    window.removeEventListener('delete-success', this.setIgnoreRouterGuard)
+  },
 
-      if (fromDelete || isEqual(this.value, this.cachedResult)) {
+  methods: {
+    beforeRouteLeave (to, from, next) {
+      if (
+        !this.showDialogOnUnsavedChanges ||
+        this.ignoreRouterGuard ||
+        isEqualWith(this.modelValue, this.cachedResult, this.handleIgnoreKeysInUnsavedChanges)
+      ) {
         return next()
       }
 
-      this.handleDialog(next)
+      this.handleDialog(() => {
+        this.ignoreRouterGuard = true
+        next()
+      })
     },
 
     cancel () {
@@ -204,7 +237,7 @@ export default {
     },
 
     async fetch (params) {
-      this.isFetching = true
+      this.mx_isFetching = true
 
       try {
         const response = await this.$store.dispatch(
@@ -213,22 +246,28 @@ export default {
 
         const { errors, fields, metadata, result } = response.data
 
-        this.setErrors(errors)
-        this.setFields(fields)
-        this.setMetadata(metadata)
+        this.mx_setErrors(errors)
+        this.mx_setFields(fields)
+        this.mx_setMetadata(metadata)
+
+        this.mx_updateModels({
+          errors: errors,
+          fields: this.mx_fields,
+          metadata: metadata
+        })
 
         if (result) {
           this.hasResult = true
-          this.$emit('input', { ...this.value, ...result })
+          this.$emit('update:modelValue', { ...this.modelValue, ...result })
           this.cachedResult = this.showDialogOnUnsavedChanges && extend(true, {}, result)
         }
 
-        this.$emit('fetch-success', response, this.value)
+        this.$emit('fetch-success', response, this.modelValue)
       } catch (error) {
-        this.fetchError(error)
+        this.mx_fetchError(error)
         this.$emit('fetch-error', error)
       } finally {
-        this.isFetching = false
+        this.mx_isFetching = false
       }
     },
 
@@ -243,27 +282,44 @@ export default {
     },
 
     handleCancelRoute () {
-      if (this.cancelRoute) {
+      const acceptTypes = ['string', 'object']
+
+      if (this.cancelRoute && acceptTypes.includes(typeof this.cancelRoute)) {
         return this.$router.push(this.cancelRoute)
       }
 
       const [, path] = this.$route.path.split('/')
-      const resolvedPath = this.$router.resolve(`/${path}`).route.path
+      const resolvedPath = this.$router.resolve(`/${path}`)
 
       this.$router.push(resolvedPath)
     },
 
-    handleDialog (fn) {
+    handleDialog (next) {
       this.openDialog()
 
-      this.dialogConfig.ok.events = { click: () => handleHistory().push(this.$route) }
-      this.dialogConfig.cancel.events = { click: fn }
+      this.defaultDialogProps.ok.onClick = () => addRoute(this.$route)
+      this.defaultDialogProps.cancel.onClick = next
     },
 
     openDialog () {
       this.showDialog = true
     },
 
+    // ignora chaves na hora de validar quando usuário está saindo da página
+    handleIgnoreKeysInUnsavedChanges (firstValue, secondValue) {
+      const toIgnore = [
+        ...this.fieldsNameWithDefaultValue,
+        ...this.ignoreKeysInUnsavedChanges
+      ]
+
+      if (!toIgnore.length) return
+
+      toIgnore.forEach(key => {
+        delete firstValue[key]
+        delete secondValue[key]
+      })
+    },
+
     async submit (event) {
       if (event) {
         event.preventDefault()
@@ -273,36 +329,40 @@ export default {
         return null
       }
 
-      this.isSubmiting = true
+      this.isSubmitting = true
 
       try {
         const response = await this.$store.dispatch(
           `${this.entity}/${this.mode}`,
-          { id: this.id, payload: this.value, url: this.url }
+          { id: this.id, payload: this.modelValue, url: this.url }
         )
 
         if (this.showDialogOnUnsavedChanges) {
-          this.cachedResult = cloneDeep(this.value)
+          this.cachedResult = extend(true, {}, this.modelValue)
         }
 
-        this.setErrors()
+        this.mx_setErrors()
         NotifySuccess(response.data.status.text || 'Item salvo com sucesso!')
-        this.$emit('submit-success', response, this.value)
+        this.$emit('submit-success', response, this.modelValue)
       } catch (error) {
-        const errors = get(error, 'response.data.errors')
-        const message = get(error, 'response.data.status.text')
+        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.'
-          : get(error, 'response.data.exception') || error.message
+        this.mx_setErrors(errors)
+        this.$emit('update:errors', this.mx_errors)
 
-        this.setErrors(errors)
         NotifyError(message || 'Ops! Erro ao salvar item.', exception)
 
         this.$emit('submit-error', error)
       } finally {
-        this.isSubmiting = false
+        this.isSubmitting = false
       }
+    },
+
+    setIgnoreRouterGuard ({ detail: { id, entity } }) {
+      this.ignoreRouterGuard = this.id === id && this.entity === entity
     }
   }
 }

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

@@ -0,0 +1,179 @@
+type: component
+
+meta:
+  desc: Componente para C.R.U.D. responsável pela pela criação (Create) e edição (Update).
+
+props:
+  cancel-button:
+    desc: Rótulo do botão "cancelar".
+    default: Cancelar
+    type: String
+
+  cancel-route:
+    desc: Configuração do botão de "cancelar", caso seja "false", não exibe o botão, caso precise passar uma path direto use como string, e se precisar passar uma configuração como "name" ou "params" passe como objeto.
+    default: "''"
+    type: [Boolean, Object, String]
+    examples: [/users, "false", "{ name: 'UsersForm', params: { id: 'uuid-1' } }"]
+
+  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
+    examples: ['my-custom-id']
+
+  disable:
+    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
+    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.
+    default: {}
+    type: Object
+
+  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
+    type: Boolean
+
+  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.
+    default: []
+    type: Array
+    examples: ["['isActive']"]
+
+  submit-button:
+    desc: Rótulo do botão "salvar".
+    default: Salvar
+    type: String
+
+  model-value:
+    desc: Model do componente, controla o payload que será enviado para as actions dos modos create, replace e update.
+    default: {}
+    type: Object
+    examples: [v-model="values"]
+    model: true
+
+  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
+
+  errors:
+    desc: Model de errors, utilizado para recuperar os errors fora do template.
+    default: {}
+    type: Object
+    examples: [v-model:errors="errors"]
+    model: true
+
+  metadata:
+    desc: Model de metadata, utilizado para recuperar os metadata fora do template.
+    default: {}
+    type: Object
+    examples: [v-model:metadata="metadata"]
+    model: 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
+
+slots:
+  header:
+    desc: Slot para acessar o header.
+
+  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.
+
+events:
+  '@update:model-value -> function(value)':
+    desc: Dispara toda vez que o model atualiza.
+    params:
+      value:
+        desc: usado para v-model.
+        type: Object
+
+  '@update:submitting -> function(value)':
+    desc: Dispara logo antes da action do modo "replace" ou "update" e ao cair no bloco "finally", ou seja, quando começar o submeter e após terminar.
+    params:
+      value:
+        desc: Retorna se está ou não submetendo os dados.
+        type: Boolean
+
+  '@update:fields -> function(value)':
+    desc: Dispara quando a action "fetchSingle" é executada com sucesso, é chamado antes do evento "fetch-success".
+    params:
+      value:
+        desc: fields.
+        type: Object
+
+  '@update:errors -> function(value)':
+    desc: Dispara quando a action "fetchSingle" é chamada.
+    params:
+      value:
+        desc: Errors durante o fetch.
+        type: Object
+
+  '@update:metadata -> function(value)':
+    desc: Dispara quando a action "fetchSingle" acontece com sucesso, é chamado antes do evento "fetch-success".
+    params:
+      value:
+        desc: metadata.
+        type: Object
+
+  '@update:fetching -> function(value)':
+    desc: Dispara logo antes da action "fetchSingle" e ao cair no bloco "finally", ou seja, quando começar o fetching e após terminar.
+    params:
+      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