Merge branch 'master' of github.com:maoberlehner/vuex-map-fields

# Conflicts: # src/index.js
maoberlehner · Mar 23, 2021 · 3eb78d6 · 3eb78d6
2 parents 96fa6b3 + 029f8e8
commit 3eb78d6
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 14 deletions.
diff --git a/src/index.js b/src/index.js
@@ -73,21 +73,31 @@ export const mapMultiRowFields = normalizeNamespace((
     entries[key] = {
       get() {
         const store = this.$store;
-        const rows = objectEntries(store.getters[getterType](path));
+        const rows = store.getters[getterType](path);
 
-        return rows
-          .map(fieldsObject => Object.keys(fieldsObject[1]).reduce((prev, fieldKey) => {
-            const fieldPath = `${path}[${fieldsObject[0]}].${fieldKey}`;
+        const defineProperties = (fieldsObject, index, path) => {
+          return Object.keys(fieldsObject).reduce((prev, fieldKey) => {
+
+            let fieldPath = index !== false ? `${path}[${index}].${fieldKey}` : `${path}.${fieldKey}`;
 
             return Object.defineProperty(prev, fieldKey, {
               get() {
+                if (typeof fieldsObject[fieldKey] === 'object' && fieldsObject[fieldKey] !== null) {
+                  return defineProperties(fieldsObject[fieldKey], false, fieldPath)
+                }
                 return store.getters[getterType](fieldPath);
               },
               set(value) {
                 store.commit(mutationType, { path: fieldPath, value });
               },
             });
-          }, {}));
+          }, {})
+        };
+
+        return rows
+          .map((fieldsObject, index) => {
+            return defineProperties(fieldsObject, index, path)
+          });
       },
     };
 

diff --git a/src/index.spec.js b/src/index.spec.js
@@ -150,8 +150,9 @@ describe(`index`, () => {
           bar: `Bar`,
         },
         {
-          foo: `Foo`,
-          bar: `Bar`,
+          foo: {
+            bar: `Bar`,
+          },
         },
       ];
       const mockGetField = jest.fn().mockReturnValue(mockFieldRows);
@@ -166,8 +167,8 @@ describe(`index`, () => {
       expect(mockGetField).lastCalledWith(`fieldRows[0].bar`);
 
       // eslint-disable-next-line no-unused-vars
-      const y = getterSetters[1].foo; // Trigger getter function.
-      expect(mockGetField).lastCalledWith(`fieldRows[1].foo`);
+      const y = getterSetters[1].foo.bar; // Trigger nested getter function.
+      expect(mockGetField).lastCalledWith(`fieldRows[1].foo.bar`);
     });
 
     test(`It should commit new values to the store.`, () => {
@@ -177,8 +178,9 @@ describe(`index`, () => {
           bar: `Bar`,
         },
         {
-          foo: `Foo`,
-          bar: `Bar`,
+          foo: {
+            bar: `Bar`,
+          },
         },
       ];
       const mockCommit = jest.fn();
@@ -194,8 +196,8 @@ describe(`index`, () => {
       getterSetters[0].bar = `New Bar`; // Trigger setter function.
       expect(mockCommit).toBeCalledWith(`updateField`, { path: `fieldRows[0].bar`, value: `New Bar` });
 
-      getterSetters[1].foo = `New Foo`; // Trigger setter function.
-      expect(mockCommit).toBeCalledWith(`updateField`, { path: `fieldRows[1].foo`, value: `New Foo` });
+      getterSetters[1].foo.bar = `New Bar`; // Trigger nested setter function.
+      expect(mockCommit).toBeCalledWith(`updateField`, { path: `fieldRows[1].foo.bar`, value: `New Bar` });
     });
   });
 

diff --git a/test/multi-row.test.js b/test/multi-row.test.js
@@ -19,6 +19,7 @@ describe(`Component initialized with multi row setup.`, () => {
           <div v-for="user in users">
             <input v-model="user.name">
             <input v-model="user.email">
+            <input v-model="user.address.city">
           </div>
         </div>
       `,
@@ -33,10 +34,23 @@ describe(`Component initialized with multi row setup.`, () => {
           {
             name: `Foo`,
             email: `foo@foo.com`,
+            address: {
+              city: 'Foo Bar'
+            },
           },
           {
             name: `Bar`,
             email: `bar@bar.com`,
+            address: {
+              city: 'Foo Bar'
+            },
+          },
+          {
+            name: `Foo`,
+            email: `foo@foo.com`,
+            address: {
+              city: 'Foo Bar'
+            },
           },
         ],
       },
@@ -58,11 +72,13 @@ describe(`Component initialized with multi row setup.`, () => {
   test(`It should update field values when the store is updated.`, async () => {
     store.state.users[0].name = `New Name`;
     store.state.users[1].email = `new@email.com`;
-
+    store.state.users[2].address.city = `New City Name`;
+
     await wrapper.vm.$nextTick();
 
     expect(wrapper.find(`input`).element.value).toBe(`New Name`);
     expect(wrapper.find(`div:nth-child(2) input:nth-child(2)`).element.value).toBe(`new@email.com`);
+    expect(wrapper.find(`div:nth-child(3) input:nth-child(3)`).element.value).toBe(`New City Name`);
   });
 
   test(`It should update the store when the field values are updated.`, () => {
@@ -77,7 +93,11 @@ describe(`Component initialized with multi row setup.`, () => {
     wrapper.find(`div:nth-child(2) input:nth-child(2)`).element.value = `new@email.com`;
     wrapper.find(`div:nth-child(2) input:nth-child(2)`).trigger(`input`);
 
+    wrapper.find(`div:nth-child(2) input:nth-child(3)`).element.value = `New City Name`;
+    wrapper.find(`div:nth-child(2) input:nth-child(3)`).trigger(`input`);
+
     expect(store.state.users[0].name).toBe(`New Name`);
     expect(store.state.users[1].email).toBe(`new@email.com`);
+    expect(store.state.users[1].address.city).toBe(`New City Name`);
   });
 });