feat(admin-settings): handling array of nested objects on form

ecomplus · Dec 17, 2019 · 671e1d5 · 671e1d5
1 parent 40d72d7
commit 671e1d5
Show file tree

Hide file tree

Showing 2 changed files with 107 additions and 8 deletions.
diff --git a/src/components/html/EcAdminSettingsForm.html b/src/components/html/EcAdminSettingsForm.html
@@ -19,17 +19,72 @@
         </a-alert>
 
         <div
-          v-for="({ schema, hide, field }, i) in fields"
-          :key="`${hide.toString()}-${field}`"
+          v-for="(config, i) in fields"
+          :key="`${config.hide.toString()}-${config.field}`"
         >
+          <template v-if="checkNestedObjectsArray(config.schema)">
+            <div
+              v-for="({ dataList, lowerCaseTitle, field }) in [{
+                ...config,
+                dataList: config.hide ? hiddenData[config.field] : data[config.field],
+                lowerCaseTitle: (config.schema.items.title || '').toLowerCase()
+              }]"
+              key="nested"
+            >
+              <a-button
+                type="dashed"
+                class="mb-3"
+                html-type="button"
+                @click.prevent="dataList.push({})"
+              >
+                {{ `${i19add} ${lowerCaseTitle}` }}
+              </a-button>
+
+              <a-list
+                :dataSource="dataList"
+                class="mb-4"
+                bordered
+              >
+                <a-list-item slot="renderItem" slot-scope="item, index">
+                  <a-list-item-meta
+                    :description="getObjectValues(item)"
+                  >
+                    <a
+                      slot="title"
+                      href="#"
+                      @click.prevent="dataListsIndexes[field] = index"
+                    >
+                      <span
+                        v-if="dataListsIndexes[field] === index"
+                        key="editing"
+                      >
+                        <i class="fas fa-pen-square mr-1"></i>
+                        {{ `${i19editing} ${lowerCaseTitle}` }}
+                      </span>
+
+                      <span v-else key="edit">
+                        <i class="fas fa-pen mr-1"></i>
+                        {{ i19edit }}
+                      </span>
+
+                      <samp class="ml-1">
+                        #{{ (index + 1) }}
+                      </samp>
+                    </a>
+                  </a-list-item-meta>
+                </a-list-item>
+              </a-list>
+            </div>
+          </template>
+
           <a-form-item
             v-for="({
               field,
               name,
               schema,
               component,
               data
-            }) in parseAdminSettingsField({ field, schema, hide })"
+            }) in parseAdminSettingsField(config)"
             v-if="component"
             :key="name"
             :label="schema.title"

diff --git a/src/components/js/EcAdminSettingsForm.js b/src/components/js/EcAdminSettingsForm.js
@@ -2,6 +2,10 @@ import { i18n } from '@ecomplus/utils'
 import getSchemaInput from './../../lib/get-schema-input'
 
 import {
+  i19add,
+  i19edit,
+  // i19empty,
+  // i19editing,
   // i19general,
   i19save
 } from '@ecomplus/i18n'
@@ -19,11 +23,16 @@ export default {
   data () {
     return {
       data: {},
-      hiddenData: {}
+      hiddenData: {},
+      dataListsIndexes: {}
     }
   },
 
   computed: {
+    i19add: () => i18n(i19add),
+    i19edit: () => i18n(i19edit),
+    i19editing: () => 'Editando',
+    i19empty: () => 'Vazio',
     i19general: () => 'Geral',
     i19save: () => i18n(i19save),
 
@@ -61,25 +70,60 @@ export default {
       return schema.type === 'object' || schema.type === 'array'
     },
 
+    checkNestedObjectsArray (schema) {
+      return schema.type === 'array' && schema.items && schema.items.type === 'object'
+    },
+
     getDescriptionHtml (description) {
       return description.replace(
         /(http(s)?:\/\/[^\s]+)/g,
         '<a href="$1" target="_blank" rel="noopener">$1</a>'
       )
     },
 
-    parseAdminSettingsField ({ field, schema, hide, data, parent = '' }) {
+    getObjectValues (obj) {
+      let str = ''
+      for (const prop in obj) {
+        if (obj[prop]) {
+          switch (typeof obj[prop]) {
+            case 'number':
+            case 'string':
+              str += `${obj[prop].toString()} / `
+          }
+        }
+      }
+      return str.length > 3 ? str : `${this.i19empty} ...`
+    },
+
+    parseAdminSettingsField ({ field, schema, hide, data, parentFields = '' }) {
       if (!data) {
         data = hide ? this.hiddenData : this.data
       }
       let fieldObjects = []
-      const { localSchema, component } = getSchemaInput(field, schema)
+      let refSchema
+      if (this.checkNestedObjectsArray(schema)) {
+        if (!data[field] || !data[field].length) {
+          if (parentFields === '') {
+            this.$set(data, field, [{}])
+            this.$set(this.dataListsIndexes, field, 0)
+          } else {
+            data[field] = [{}]
+          }
+        }
+        data = data[field]
+        refSchema = schema.items
+        field = this.dataListsIndexes[field] || 0
+      } else {
+        refSchema = schema
+      }
+      const { localSchema, component } = getSchemaInput(field, refSchema)
+      parentFields = `${parentFields}.${field}`
       if (component) {
         fieldObjects.push({
           field,
           schema,
           data,
-          name: `${parent}.${field}`,
+          name: parentFields,
           component
         })
       }
@@ -96,7 +140,7 @@ export default {
                 field: nestedField,
                 schema: childSchema,
                 data: data[field],
-                parent: `${parent}.${nestedField}`
+                parentFields: `${parentFields}.${nestedField}`
               })
             )
           }