Merge pull request #647 from SoftwareBrothers/#645/fix-array-items-for-nested-properties

fix: array manipulaton in deeply nested properties

Author: wojtek-krysiak

example-app/src/employees/employee.entity.js

@@ -1,5 +1,33 @@
 const mongoose = require('mongoose')
 
+const Skill = new mongoose.Schema({
+  name: String,
+  level: {
+    type: String,
+    enum: ['junior', 'middle', 'senior'],
+  },
+  Profession: {
+    type: mongoose.SchemaTypes.ObjectId,
+    ref: 'Profession',
+  },
+})
+
+const OtherSchema = new mongoose.Schema({
+  name: String,
+  arrayed: {
+    type: [Skill],
+  },
+})
+
+const Skills = new mongoose.Schema({
+  softShills: [{
+    type: Skill,
+  }],
+  hardSkills: [{
+    type: Skill,
+  }],
+})
+
 const EmployeeSchema = new mongoose.Schema({
   name: {
     type: String,
@@ -16,10 +44,21 @@ const EmployeeSchema = new mongoose.Schema({
     type: mongoose.SchemaTypes.ObjectId,
     ref: 'Company',
   },
+  interests: {
+    type: [String],
+  },
   professions: [{
     type: mongoose.SchemaTypes.ObjectId,
     ref: 'Profession',
   }],
+
+  Skills: {
+    type: Skills,
+  },
+
+  otherField: {
+    type: [OtherSchema],
+  },
 })
 
 const Employee = mongoose.model('Employee', EmployeeSchema)

src/backend/adapters/record/base-record.ts

@@ -1,4 +1,4 @@
-import { flat } from '../../../utils/flat'
+import { flat, GetOptions } from '../../../utils/flat'
 import { ParamsType } from './params.type'
 import BaseResource from '../resource/base-resource'
 import ValidationError, { RecordError, PropertyErrors } from '../../utils/errors/validation-error'
@@ -69,11 +69,12 @@ class BaseRecord {
    *
    * @param {string} [propertyPath]     path for the property. If not set function returns an entire
    *                                    unflatten object
+   * @param {GetOptions} [options]
    * @return {any}                      unflatten data under given path
    * @new in version 3.3
    */
-  get(propertyPath?: string): any {
-    return flat.get(this.params, propertyPath)
+  get(propertyPath?: string, options?: GetOptions): any {
+    return flat.get(this.params, propertyPath, options)
   }
 
   /**
@@ -96,11 +97,25 @@ class BaseRecord {
    * @param   {string}  prefix
    *
    * @return  {object | undefined}
+   * @deprecated in favour of {@link selectParams}
    */
   namespaceParams(prefix: string): Record<string, any> | void {
     return flat.selectParams(this.params, prefix)
   }
 
+  /**
+   * Returns object containing all params keys starting with prefix
+   *
+   * @param   {string}  prefix
+   * @param {GetOptions} [options]
+   *
+   * @return  {object | undefined}
+   * @new in version 3.3
+   */
+  selectParams(prefix: string, options?: GetOptions): Record<string, any> | void {
+    return flat.selectParams(this.params, prefix, options)
+  }
+
   /**
    * Updates given Record in the data store. Practically it invokes
    * {@link BaseResource.update} method.

src/backend/controllers/api-controller.spec.js

@@ -38,6 +38,7 @@ describe('ApiController', function () {
         resourceActions: () => [this.action],
         recordActions: () => [this.action],
         recordsDecorator: records => records,
+        getFlattenProperties: this.sinon.stub().returns([property]),
         id: this.resourceName,
       }),
       find: this.sinon.stub().returns([]),

src/backend/decorators/property/property-decorator.spec.ts

@@ -193,7 +193,7 @@ describe('PropertyDecorator', () => {
         'isArray',
         'custom',
         'resourceId',
-        'path',
+        'propertyPath',
         'isRequired',
         'isVirtual',
         'props',

src/backend/decorators/property/property-decorator.ts

@@ -3,7 +3,7 @@ import PropertyOptions from './property-options.interface'
 import BaseResource from '../../adapters/resource/base-resource'
 import BaseProperty, { PropertyType } from '../../adapters/property/base-property'
 import ResourceDecorator from '../resource/resource-decorator'
-import { PropertyPlace, PropertyJSON } from '../../../frontend/interfaces'
+import { PropertyPlace, BasePropertyJSON } from '../../../frontend/interfaces'
 import { overrideFromOptions } from './utils'
 
 /**
@@ -23,7 +23,7 @@ class PropertyDecorator {
    * This path serves as a key in {@link PropertyOptions} to identify which
    * property has to be updated
    */
-  public path: string
+  public propertyPath: string
 
   /**
    * Indicates if given property has been created in AdminBro and hasn't been returned by the
@@ -63,7 +63,7 @@ class PropertyDecorator {
     this.property = property
     this._admin = admin
     this._resource = resource
-    this.path = path || property.name()
+    this.propertyPath = path || property.name()
     this.isVirtual = !!isVirtual
     this.virtualSubProperties = []
 
@@ -123,7 +123,7 @@ class PropertyDecorator {
    * @return  {string}
    */
   label(): string {
-    return this._admin.translateProperty(this.path, this._resource.id())
+    return this._admin.translateProperty(this.propertyPath, this._resource.id())
   }
 
   /**
@@ -153,7 +153,7 @@ class PropertyDecorator {
       return values.map(val => ({
         value: val,
         label: this._admin.translateProperty(
-          `${this.path}.${val}`,
+          `${this.propertyPath}.${val}`,
           this._resource.id(),
           { defaultValue: val },
         ),
@@ -246,7 +246,7 @@ class PropertyDecorator {
    *
    * @return {PropertyJSON}
    */
-  toJSON(where?: PropertyPlace): PropertyJSON {
+  toJSON(where?: PropertyPlace): BasePropertyJSON {
     return {
       isTitle: this.isTitle(),
       isId: this.isId(),
@@ -256,7 +256,7 @@ class PropertyDecorator {
       isRequired: this.isRequired(),
       availableValues: this.availableValues(),
       name: this.name(),
-      path: this.path,
+      propertyPath: this.propertyPath,
       isDisabled: this.isDisabled(),
       label: this.label(),
       type: this.type(),
@@ -280,7 +280,7 @@ class PropertyDecorator {
    */
   subProperties(): Array<PropertyDecorator> {
     const dbSubProperties = this.property.subProperties().map((subProperty) => {
-      const path = `${this.path}.${subProperty.name()}`
+      const path = `${this.propertyPath}.${subProperty.name()}`
       const decorated = new PropertyDecorator({
         property: subProperty,
         admin: this._admin,
@@ -301,14 +301,14 @@ class PropertyDecorator {
    * Returns PropertyOptions passed by the user for a subProperty. Furthermore
    * it changes property name to the nested property key.
    *
-   * @param   {BaseProperty}     subProperty
+   * @param   {String}     propertyPath
    * @return  {PropertyOptions}
    * @private
    */
-  private getOptionsForSubProperty(path: string): PropertyOptions {
+  private getOptionsForSubProperty(propertyPath: string): PropertyOptions {
     const propertyOptions = (this._resource.options || {}).properties || {}
     return {
-      ...propertyOptions[path],
+      ...propertyOptions[propertyPath],
     }
   }
 }

src/backend/decorators/resource/resource-decorator.spec.ts

@@ -159,7 +159,7 @@ describe('ResourceDecorator', function () {
       const decoratedProperty = decorator.getPropertyByKey(path) as PropertyDecorator
 
       expect(decoratedProperty).to.be.an.instanceof(PropertyDecorator)
-      expect(decoratedProperty.path).to.eq(path)
+      expect(decoratedProperty.propertyPath).to.eq(path)
     })
 
     it('returns nested property under 2 level nested mixed', function () {
@@ -171,7 +171,7 @@ describe('ResourceDecorator', function () {
       const decoratedProperty = decorator.getPropertyByKey(path) as PropertyDecorator
 
       expect(decoratedProperty).to.be.an.instanceof(PropertyDecorator)
-      expect(decoratedProperty.path).to.eq(path)
+      expect(decoratedProperty.propertyPath).to.eq(path)
     })
 
     it('returns property when it is an array', function () {
@@ -182,7 +182,7 @@ describe('ResourceDecorator', function () {
       const decoratedProperty = decorator.getPropertyByKey(path) as PropertyDecorator
 
       expect(decoratedProperty).to.be.an.instanceof(PropertyDecorator)
-      expect(decoratedProperty.path).to.eq(arrayProperty.path())
+      expect(decoratedProperty.propertyPath).to.eq(arrayProperty.path())
     })
 
     it('returns property when it is an nested array', function () {
@@ -196,7 +196,7 @@ describe('ResourceDecorator', function () {
       const decoratedProperty = decorator.getPropertyByKey(path) as PropertyDecorator
 
       expect(decoratedProperty).to.be.an.instanceof(PropertyDecorator)
-      expect(decoratedProperty.path).to.eq([arrayProperty.path(), nested1Property.path()].join('.'))
+      expect(decoratedProperty.propertyPath).to.eq([arrayProperty.path(), nested1Property.path()].join('.'))
     })
   })
 

src/backend/decorators/resource/resource-decorator.ts

@@ -7,7 +7,7 @@ import AdminBro from '../../../admin-bro'
 
 import { ResourceOptions } from './resource-options.interface'
 import { CurrentAdmin } from '../../../current-admin.interface'
-import { ResourceJSON, PropertyJSON, PropertyPlace } from '../../../frontend/interfaces'
+import { ResourceJSON, PropertyPlace } from '../../../frontend/interfaces'
 import {
   decorateActions,
   decorateProperties,
@@ -86,7 +86,7 @@ class ResourceDecorator {
     this.options.properties = this.options.properties || {}
 
     /**
-     * List of all decorated properties
+     * List of all decorated root properties
      * @type {Array<PropertyDecorator>}
      */
     this.properties = decorateProperties(resource, admin, this)
@@ -179,14 +179,17 @@ class ResourceDecorator {
     return properties
   }
 
-  getFlattenProperties(): Record<string, PropertyJSON> {
+  /**
+   * Returns all the properties with corresponding subProperties in one object.
+   */
+  getFlattenProperties(): Record<string, PropertyDecorator> {
     return Object.keys(this.properties).reduce((memo, propertyName) => {
       const property = this.properties[propertyName]
 
       const subProperties = flatSubProperties(property)
       return {
         ...memo,
-        [propertyName]: property.toJSON(),
+        [propertyName]: property,
         ...subProperties,
       }
     }, {})
@@ -294,6 +297,12 @@ class ResourceDecorator {
    * @return  {ResourceJSON}
    */
   toJSON(currentAdmin?: CurrentAdmin): ResourceJSON {
+    const flattenProperties = this.getFlattenProperties()
+    const flattenPropertiesJSON = Object.keys(flattenProperties).reduce((memo, key) => ({
+      ...memo,
+      [key]: flattenProperties[key].toJSON(),
+    }), {})
+
     return {
       id: this.id(),
       name: this.getResourceName(),
@@ -302,7 +311,7 @@ class ResourceDecorator {
       titleProperty: this.titleProperty().toJSON(),
       resourceActions: this.resourceActions(currentAdmin).map(ra => ra.toJSON(currentAdmin)),
       actions: Object.values(this.actions).map(action => action.toJSON(currentAdmin)),
-      properties: this.getFlattenProperties(),
+      properties: flattenPropertiesJSON,
       listProperties: this.getProperties({
         where: 'list', max: DEFAULT_MAX_COLUMNS_IN_LIST,
       }).map(property => property.toJSON('list')),

src/backend/decorators/resource/utils/decorate-properties.ts

@@ -74,7 +74,7 @@ const organizeNestedProperties = (
     // reverse because we start by by finding from the longest path
     // and removes itself. (skips arrays)
     // changes 'root.nested.0.nested1' to [root.nested', 'root']
-    const parts = pathToParts(property.path, { skipArrayIndexes: true }).reverse().splice(1)
+    const parts = pathToParts(property.propertyPath, { skipArrayIndexes: true }).reverse().splice(1)
     if (parts.length) {
       const mixedPropertyPath = parts.find(part => (
         properties[part] && properties[part].type() === 'mixed'

src/backend/decorators/resource/utils/find-sub-property.ts

@@ -16,9 +16,9 @@ export const findSubProperty = (
 ): PropertyDecorator | null => {
   const subProperties = rootProperty.subProperties()
   const foundPath = pathParts.find(path => (
-    subProperties.find(supProperty => supProperty.path === path)))
+    subProperties.find(supProperty => supProperty.propertyPath === path)))
   if (foundPath) {
-    const subProperty = subProperties.find(supProperty => supProperty.path === foundPath)
+    const subProperty = subProperties.find(supProperty => supProperty.propertyPath === foundPath)
     if (subProperty && foundPath !== pathParts[pathParts.length - 1]) {
       // if foundPath is not the last (full) path - checkout recursively all subProperties
       return findSubProperty(pathParts, subProperty)

src/backend/decorators/resource/utils/flat-sub-properties.ts

@@ -1,5 +1,4 @@
 import PropertyDecorator from '../../property/property-decorator'
-import { PropertyJSON } from '../../../../frontend/interfaces'
 
 /**
  * Bu default all subProperties are nested as an array in root Property. This is easy for
@@ -15,10 +14,10 @@ import { PropertyJSON } from '../../../../frontend/interfaces'
  */
 export const flatSubProperties = (
   rootProperty: PropertyDecorator,
-): Record<string, PropertyJSON> => (
+): Record<string, PropertyDecorator> => (
   rootProperty.subProperties().reduce((subMemo, subProperty) => ({
     ...subMemo,
-    [subProperty.path]: subProperty.toJSON(),
+    [subProperty.propertyPath]: subProperty,
     ...flatSubProperties(subProperty),
   }), {})
 )

src/backend/utils/populator/populate-property.spec.ts

@@ -25,7 +25,7 @@ describe('populateProperty', () => {
     property.resource.returns(resourceDecorator as unknown as ResourceDecorator)
     property.reference.returns(referenceResource as unknown as BaseResource)
     property.property = { reference: 'someRawReference' } as unknown as BaseProperty
-    property.path = path
+    property.propertyPath = path
   })
 
   afterEach(() => {
@@ -39,6 +39,7 @@ describe('populateProperty', () => {
   context('2 same records with reference key', () => {
     beforeEach(async () => {
       record.get.returns(userId)
+      record.selectParams.returns({ [path]: userId })
       userRecord.id.returns(userId)
       referenceResource.findMany.resolves([userRecord])