@bildvitta/quasar-ui-asteroid 3.1.0 → 3.2.0-beta.0

package/dist/vetur/asteroid-attributes.json

@@ -1247,6 +1247,62 @@
     "description": "Nos options, você pode passar um array de objeto com qualquer chave/valor, esta prop serve para identificar qual será o equivalente ao \"value\".",
     "type": "string"
   },
+  "qas-tree-generator/form-generator-props": {
+    "description": "Propriedades enviadas para o \"QasFormGenerator\".",
+    "type": "object"
+  },
+  "qas-tree-generator/form-view-props": {
+    "description": "Propriedades enviadas para o \"QasFormView\".",
+    "type": "object"
+  },
+  "qas-tree-generator/label-key": {
+    "description": "Chave identificadora da label, por padrão o componente considera label, é possível alterar o valor enviado para API através desta chave.",
+    "type": "string"
+  },
+  "qas-tree-generator/lazy-nodes": {
+    "description": "Model do lazy, toda vez que é adicionado/editado/excluído um nó este model é atualizado, ele não é um \"two way data binding\" alterações fora do componente não afetarão o componente.",
+    "type": "array"
+  },
+  "qas-tree-generator/nodes": {
+    "description": "Nested de Array de objeto contendo label, uuid, lazy e children, é a propriedade responsável por montar a árvore, precisa ser enviado toda a árvore de uma vez.",
+    "type": "array"
+  },
+  "qas-tree-generator/readonly": {
+    "description": "Habilita a árvore para modo de visualização somente, não sendo possível adicionar/editar/remover nenhum ramo.",
+    "type": "boolean"
+  },
+  "qas-tree-generator/resource": {
+    "description": "Usado como endpoint da API para adicionar/remover/excluir, quando não utilizar o QasFormView.",
+    "type": "string"
+  },
+  "qas-tree-generator/tree-props": {
+    "description": "Propriedades enviada para o QTree.",
+    "type": "object"
+  },
+  "qas-tree-generator/use-add-button": {
+    "description": "Habilita o botão de adicionar novos ramos.",
+    "type": "boolean"
+  },
+  "qas-tree-generator/use-destroy-button": {
+    "description": "Habilita o botão de remover os ramos.",
+    "type": "boolean"
+  },
+  "qas-tree-generator/use-destroy-on-first-node": {
+    "description": "Habilita o botão de remover o primeiro ramo da árvore.",
+    "type": "boolean"
+  },
+  "qas-tree-generator/use-edit-button": {
+    "description": "Habilita o botão de editar os ramos.",
+    "type": "boolean"
+  },
+  "qas-tree-generator/use-form-view-edit": {
+    "description": "Habilita o form-view como componente a ser renderizado ao abrir o dialog em modo de edição.",
+    "type": "boolean"
+  },
+  "qas-tree-generator/use-form-view-add": {
+    "description": "Habilita o form-view como componente a ser renderizado ao abrir o dialog em modo de adição.",
+    "type": "boolean"
+  },
   "qas-uploader/accept-resize-types": {
     "description": "Tipos de arquivos aceitos para fazer o redimensionamento antes de upar.",
     "type": "array"

package/dist/vetur/asteroid-tags.json

@@ -545,6 +545,25 @@
     ],
     "description": "Componente para transferir itens entre 2 lista (colunas)."
   },
+  "qas-tree-generator": {
+    "attributes": [
+      "form-generator-props",
+      "form-view-props",
+      "label-key",
+      "lazy-nodes",
+      "nodes",
+      "readonly",
+      "resource",
+      "tree-props",
+      "use-add-button",
+      "use-destroy-button",
+      "use-destroy-on-first-node",
+      "use-edit-button",
+      "use-form-view-edit",
+      "use-form-view-add"
+    ],
+    "description": "Componente de árvore onde é possível adicionar/editar/excluir sem limites de ramos."
+  },
   "qas-uploader": {
     "attributes": [
       "accept-resize-types",

package/package.json

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

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

@@ -320,8 +320,16 @@ export default {
       return this.$emit('update:modelValue', value || this.nested)
     },
 
+    /*
+    * Se o item que for removido não tiver o identificador (uuid por ex) e "useRemoveOnDestroy" for "false"
+    * ou "useRemoveOnDestroy" for "true" removemos o item do array, senão adicionamos a flag [destroyKey]
+    * no item referente do array.
+    *
+    * Ex: ao adicionar um item e remover sem salvar, mesmo que useRemoveOnDestroy for false ele será removido
+    * ao invés de adicionar a flag [destroyKey]
+    */
     destroy (index, row) {
-      !row[this.identifierItemKey] && this.useRemoveOnDestroy
+      !row[this.identifierItemKey] || this.useRemoveOnDestroy
         ? this.nested.splice(index, 1)
         : this.nested.splice(index, 1, { [this.destroyKey]: true, ...row })
 

package/src/components/transfer/QasTransfer.yml

@@ -27,6 +27,7 @@ props:
     desc: Model do componente, controla quais itens estão na segunda coluna.
     default: []
     type: Array
+    model: true
 
   options:
     desc: Array de objetos com todos items que serão transferidos

package/src/components/tree-generator/QasTreeForm.vue

@@ -0,0 +1,62 @@
+<!--
+  * Este é um componente interno para ser utilizado dentro do componente "QasTreeGenerator"
+  * por isto não existe documentação para este componente e nem é exportado para fora do asteroid
+-->
+<template>
+  <qas-form-view ref="formView" v-model="values" v-model:errors="errors" v-model:fields="fields" :use-actions="false" :use-boundary="false" v-bind="formViewProps">
+    <template #default>
+      <qas-form-generator v-model="values" :errors="errors" :fields="fields" v-bind="formGeneratorProps" />
+    </template>
+  </qas-form-view>
+</template>
+
+<script>
+import QasFormGenerator from '../form-generator/QasFormGenerator.vue'
+import QasFormView from '../form-view/QasFormView.vue'
+
+export default {
+  name: 'QasTreeForm',
+
+  components: {
+    QasFormGenerator,
+    QasFormView
+  },
+
+  props: {
+    formGeneratorProps: {
+      type: Object,
+      default: () => ({})
+    },
+
+    formViewProps: {
+      type: Object,
+      default: () => ({})
+    },
+
+    parent: {
+      type: String,
+      default: ''
+    }
+  },
+
+  data () {
+    return {
+      errors: {},
+      fields: {},
+      values: {}
+    }
+  },
+
+  watch: {
+    parent (parent) {
+      Object.assign(this.values, { parent })
+    }
+  },
+
+  methods: {
+    submit () {
+      return this.$refs.formView.submitHandler()
+    }
+  }
+}
+</script>

package/src/components/tree-generator/QasTreeGenerator.vue

@@ -0,0 +1,488 @@
+<template>
+  <div class="qas-tree-generator">
+    <q-tree ref="tree" v-bind="treeProps" node-key="uuid" :nodes="parsedNodes" @lazy-load="onLazyLoad">
+      <template #default-header="{ node, tree }">
+        <div>
+          <span>
+            {{ node.label }}
+          </span>
+
+          <span v-if="hasMenuButton(node)" class="q-ml-sm">
+            <qas-btn dense flat icon="o_more_vert" round @click.stop>
+              <q-menu auto-close>
+                <q-list separator>
+                  <q-item v-if="useAddButton" v-ripple class="qas-tree-generator__item" clickable @click="handleTreeFormDialog(node, true, tree)">
+                    <q-item-section avatar>
+                      <q-icon name="o_add_circle_outline" />
+                    </q-item-section>
+
+                    <q-item-section>Adicionar subnível</q-item-section>
+                  </q-item>
+
+                  <q-item v-if="useEditButton" v-ripple class="qas-tree-generator__item" clickable @click="handleTreeFormDialog(node)">
+                    <q-item-section avatar>
+                      <q-icon name="o_edit" />
+                    </q-item-section>
+
+                    <q-item-section>Editar</q-item-section>
+                  </q-item>
+
+                  <q-item v-if="hasDestroyButton(node)" v-ripple class="qas-tree-generator__item" clickable @click="onDestroy(node)">
+                    <q-item-section avatar>
+                      <q-icon name="o_highlight_off" />
+                    </q-item-section>
+
+                    <q-item-section>Excluir</q-item-section>
+                  </q-item>
+                </q-list>
+              </q-menu>
+            </qas-btn>
+          </span>
+        </div>
+      </template>
+    </q-tree>
+
+    <qas-dialog v-model="showDestroyDialog" v-bind="destroyDialogConfig" />
+
+    <qas-dialog v-model="showFormDialog" v-bind="formDialogConfig" use-form @hide="resetModels" @validate="onValidate">
+      <template #description>
+        <div>
+          <qas-field v-if="hasAddField" v-model="editModel" :disable="isAdd" :field="addField" :label="nodeTitle" :rules="[required]" />
+
+          <qas-nested-fields v-if="hasNestedAdd" v-model="nestedModel" class="q-mt-md" :field="nestedFieldProp" :fields-props="fieldsProps" :form-columns="nestedColumns" :row-object="rowObject" :use-duplicate="false" use-inline-actions />
+
+          <qas-tree-form v-if="hasFormView" ref="treeForm" v-model:submitting="isSubmitting" :form-generator-props="formGeneratorProps" :form-view-props="defaultFormViewProps" @submit-success="onSubmitSuccess" />
+        </div>
+      </template>
+    </qas-dialog>
+  </div>
+</template>
+
+<script>
+import destroyNestedChildrenByKey from '../../helpers/destroy-nested-children-by-key.js'
+import findChildrenByKey from '../../helpers/find-children-by-key.js'
+import promiseHandler from '../../helpers/promise-handler.js'
+import { required } from '../../helpers/rules.js'
+import { extend } from 'quasar'
+import axios from 'axios'
+
+import QasTreeForm from './QasTreeForm.vue'
+
+export default {
+  name: 'QasTreeGenerator',
+
+  components: {
+    QasTreeForm
+  },
+
+  props: {
+    formGeneratorProps: {
+      type: Object,
+      default: () => ({})
+    },
+
+    formViewProps: {
+      type: Object,
+      default: () => ({})
+    },
+
+    labelKey: {
+      type: String,
+      default: 'name'
+    },
+
+    lazyNodes: {
+      type: Array,
+      default: () => []
+    },
+
+    nodes: {
+      type: Array,
+      default: () => []
+    },
+
+    readonly: {
+      type: Boolean
+    },
+
+    resource: {
+      type: String,
+      default: ''
+    },
+
+    treeProps: {
+      type: Object,
+      default: () => ({})
+    },
+
+    useAddButton: {
+      type: Boolean,
+      default: true
+    },
+
+    useDestroyButton: {
+      type: Boolean,
+      default: true
+    },
+
+    useDestroyOnFirstNode: {
+      type: Boolean
+    },
+
+    useEditButton: {
+      type: Boolean,
+      default: true
+    },
+
+    useFormViewEdit: {
+      type: Boolean
+    },
+
+    useFormViewAdd: {
+      type: Boolean
+    }
+  },
+
+  emits: [
+    'update:lazyNodes'
+  ],
+
+  data () {
+    return {
+      showDestroyDialog: false,
+      currentNode: {},
+      showFormDialog: false,
+      nestedModel: [],
+      singleModel: { label: '' },
+      editModel: '',
+      isAdd: true,
+      parsedNodes: [],
+      isSubmitting: false
+    }
+  },
+
+  computed: {
+    addField () {
+      return { name: 'add', type: 'text', label: this.nodeTitle }
+    },
+
+    destroyDialogConfig () {
+      return {
+        card: {
+          title: 'Excluir ramo da árvore?',
+          description: 'Todas as informações serão perdidas. Deseja realmente continuar?'
+        },
+        ok: {
+          label: 'Excluir',
+          onClick: this.destroy
+        },
+        cancel: {
+          onClick: this.resetCurrentNode
+        }
+      }
+    },
+
+    formDialogConfig () {
+      return {
+        card: {
+          title: this.isAdd ? 'Adicionar ramo' : 'Editar ramo'
+        },
+        ok: {
+          label: 'Salvar',
+          loading: this.isSubmitting
+        }
+      }
+    },
+
+    nestedFieldProp () {
+      return {
+        type: 'nested',
+        label: 'Adicionar itens',
+        name: 'nested',
+        children: {
+          label: {
+            type: 'text',
+            label: 'Adicionar um novo item',
+            name: 'label'
+          }
+        }
+      }
+    },
+
+    rowObject () {
+      return { label: '' }
+    },
+
+    nestedColumns () {
+      return {
+        label: {
+          col: 12
+        }
+      }
+    },
+
+    nodeTitle () {
+      if (!this.isAdd) {
+        return 'Nome do ramo'
+      }
+
+      return this.currentNode.label || 'ramo'
+    },
+
+    fieldsProps () {
+      return {
+        label: {
+          rules: [required]
+        }
+      }
+    },
+
+    messages () {
+      return {
+        error: 'Ops! Erro ao salvar item.',
+        success: 'Item salvo com sucesso!'
+      }
+    },
+
+    defaultFormViewProps () {
+      return {
+        ...this.formViewProps,
+        ...(!this.isAdd && { customId: this.currentNode.uuid }),
+        ...(this.isAdd && { parent: this.currentNode.uuid }),
+        mode: this.isAdd ? 'create' : 'replace'
+      }
+    },
+
+    hasAddField () {
+      return this.isAdd || !this.hasFormView
+    },
+
+    hasNestedAdd () {
+      return (!this.hasFormView || !this.useFormViewAdd) && this.isAdd
+    },
+
+    hasFormView () {
+      return this.isAdd ? this.useFormViewAdd : this.useFormViewEdit
+    },
+
+    parentsList () {
+      return this.nodes.map(({ uuid }) => uuid)
+    }
+  },
+
+  watch: {
+    nodes: {
+      handler () {
+        this.setInitialValue()
+      },
+      immediate: true,
+      deep: true
+    },
+
+    parsedNodes: {
+      handler (nodes) {
+        this.$emit('update:lazyNodes', nodes)
+      },
+      immediate: true,
+      deep: true
+    }
+  },
+
+  methods: {
+    required,
+
+    handleTreeFormDialog (node, isAdd) {
+      this.showFormDialog = !this.showFormDialog
+      this.isAdd = !!isAdd
+      this.currentNode = node
+
+      if (!this.isAdd) {
+        this.editModel = node.label
+      }
+    },
+
+    async add () {
+      const { data, error } = await promiseHandler(
+        this.nestedModel.map(({ label }) => {
+          return axios.post(this.resource, { parent: this.currentNode.uuid, [this.labelKey]: label, lazy: true })
+        }),
+        {
+          successMessage: this.messages.success,
+          errorMessage: this.messages.error
+        }
+      )
+
+      if (error) return
+
+      const nestedResponse = data.map(response => {
+        const { result } = response.data
+        const { name, uuid } = result
+
+        return {
+          label: name,
+          lazy: true,
+          uuid
+        }
+      })
+
+      // Precisa abrir antes de adicionar para casos de ramos que ainda não foram abertos.
+      this.$refs.tree.setExpanded(this.currentNode.uuid, true)
+
+      if (this.currentNode.children) {
+        this.currentNode.children.push(...nestedResponse)
+      } else {
+        this.currentNode.children = [...nestedResponse]
+      }
+
+      this.$nextTick(() => this.$refs.tree.setExpanded(this.currentNode.uuid, true))
+    },
+
+    async edit () {
+      const { uuid } = this.currentNode
+
+      const { error } = await promiseHandler(
+        axios.put(
+          `${this.resource}/${uuid}`,
+          {
+            [this.labelKey]: this.editModel,
+            uuid,
+            lazy: true
+          }
+        ),
+        {
+          successMessage: this.messages.success,
+          errorMessage: this.messages.error
+        }
+      )
+
+      if (error) return
+
+      this.currentNode.label = this.editModel
+      this.$refs.tree.setExpanded(uuid, true)
+    },
+
+    onDestroy (children) {
+      this.showDestroyDialog = !this.showDestroyDialog
+      this.currentNode = children
+    },
+
+    async destroy () {
+      const { error } = await promiseHandler(
+        axios.delete(`${this.resource}/${this.currentNode.uuid}`),
+        {
+          successMessage: 'Item deletado com sucesso!',
+          errorMessage: 'Ops! Não foi possível deletar o item.'
+        }
+      )
+
+      if (error) return
+
+      this.currentNode.destroyed = true
+      destroyNestedChildrenByKey(this.parsedNodes)
+    },
+
+    resetCurrentNode () {
+      this.currentNode = {}
+    },
+
+    resetModels () {
+      this.nestedModel = [{ label: '' }]
+      this.singleModel = {}
+      this.editModel = ''
+    },
+
+    async onValidate (isValid) {
+      if (isValid) {
+        const canUseFormViewOnAdd = this.isAdd && this.useFormViewAdd
+        const canUseFormViewOnEdit = !this.isAdd && this.useFormViewEdit
+
+        if (canUseFormViewOnAdd || canUseFormViewOnEdit) {
+          this.$refs.treeForm.submit()
+          return
+        }
+
+        // espera requisição finalizar para poder adicionar/editar
+        this.isAdd ? await this.add() : await this.edit()
+      }
+
+      this.showFormDialog = !isValid
+    },
+
+    /*
+    * neste método pode ser implementado uma logica para receber os nós da árvore parcialmente
+    * utilizando chamadas de API.
+    */
+    onLazyLoad ({ key, done }) {
+      // retorna um proximo nó caso exista.
+      return done(this.findNextNode(this.nodes, key, true) || [])
+    },
+
+    setInitialValue () {
+      const { children, ...payload } = { ...this.nodes?.[0] }
+      this.parsedNodes = Object.keys(payload).length ? [payload] : []
+    },
+
+    findNextNode (list, key, deleteMode) {
+      const children = findChildrenByKey(list, 'uuid', key)?.children
+
+      if (!children?.length) return []
+
+      // retorna um proximo nó caso exista.
+      return (extend(true, [], children).map(item => {
+        if (deleteMode) {
+          delete item.children
+        }
+
+        return item
+      }))
+    },
+
+    onSubmitSuccess (response) {
+      const { data: { result } } = response
+
+      this.currentNode.label = result[this.labelKey]
+      this.showFormDialog = false
+    },
+
+    hasDestroyButton ({ uuid }) {
+      if (!this.useDestroyButton) return false
+
+      return !this.useDestroyOnFirstNode ? !this.parentsList.includes(uuid) : true
+    },
+
+    hasMenuButton (node) {
+      if (this.readonly) return false
+
+      const hasEditOrAddButton = this.useAddButton || this.useEditButton
+
+      if (!this.useDestroyOnFirstNode) {
+        const hasDestroyButton = this.hasDestroyButton(node)
+
+        return hasEditOrAddButton || hasDestroyButton
+      }
+
+      return hasEditOrAddButton || this.useDestroyButton
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.qas-tree-generator {
+  &__item:hover {
+    color: var(--q-primary);
+  }
+
+  .q-tree__node-header {
+    margin-top: 16px;
+
+    &::before {
+      top: -16px;
+    }
+
+    &::after {
+      top: -16px;
+    }
+  }
+}
+</style>