map only one row - mapRowFields

[guilemos]

Support to map only one row that lives at a array/object when we are out of a loop.

This is useful when working with "active row".

const state = {
  byId: {
    "/rooms/1": {
        name: "Nice room"
    },
    "/rooms/2": {
        name: "Nice room 2"
    },
  },
  allIds: ["/rooms/1", "/rooms/2"],
};

...mapRowFields('rooms', { item: 'byId[/rooms/2]' }),

<template>
    <v-input v-model="item.name" />
</template>

However, I am stuck with the best way to use it. For this PR be worth, we should be able to make row parameter dynamic.

...mapRowFields('rooms', { item: 'byId[/rooms/2]' }), //<-- '/rooms/2' must be dynamic

Reading the docs, I think same happens here: 'addresses[0].town',

export default {
  computed: {
    // When using nested data structures, the string
    // after the last dot (e.g. `firstName`) is used
    // for defining the name of the computed property.
    ...mapFields([
      'user.firstName',
      'user.lastName',
      // It's also possible to access
      // nested properties in arrays.
      'addresses[0].town',
    ]),
  },
};

I think this is a limitation related with vuex#863
Maybe I can make this PR better using a 'active property' approach, like:

const state = {
  byId: {
    "/rooms/1": {
        name: "Nice room"
    },
    "/rooms/2": {
        name: "Nice room 2",
        vuexMapFieldsActiveRow: true
    },
  },
  allIds: ["/rooms/1", "/rooms/2"],
};

...mapRowFields('rooms', { item: 'byId' }),

<template>
    <v-input v-model="item.name" /> //<-- Two-wat enabled for row '/rooms/2' 
</template>

Any ideas?

Best regards

[coveralls]

Coverage remained the same at 100.0% when pulling 570b5d9 on guilemos:feature/mapRow into ae30a03 on maoberlehner:master.

[guilemos]

I think this PR solves #43

[guilemos]

Hello @maoberlehner, could you take a look at this? Thank you

[guilemos]

I did move forward with this PR in my project and solve the 'dynamic parameter' like this:

  data() {
    return {
      itemId: this.$route.params.room ? decodeURIComponent(this.$route.params.room) : uuid(),
    };
  },

 ...mapRowFields('rooms', { item: (c) => { return `byId[${c.itemId}]`; } }),

[maoberlehner]

Hey @guilemos thanks for contributing!

There are a couple of things that need to be fixed before I can consider to merge this PR:

• It looks like you changed permissions on a couple (all?) files. In the "Files changed" tab are a lot of files listed with no changes. Please fix that.
• You unnecessarily removed whitespace here and here.
• Please install and use ESLint and fix all the linting errors.
• Please update the README with information how and when to use this. Most importantly focus on what's the difference to mapMultiRowFields() and when to use one over the other.

Thanks!

[guilemos]

Hi @maoberlehner,

Once mapRowFields feature is much more similar to mapFields than mapMultiRowFields, I wondering if make more sense add two features to mapFields function:

1. Ability to map all properties when path return a object, e.g.: users[0];
2. Ability to mapFields to accept functions as path to make feature above dynamic.

So I did submit PR #95 which implements the solution above. I'll keep PR #88 so you can decide which one is a best solution.

In short, PR #88 creates a new function semantically similar to mapFields once target is "map fields" of only one "row" inside a array, just like current mapFields function does inside "store". #95 add 2 new abilities to the mapFields function so we can avoid 2 functions with same semantic.

Thank you!

[guilemos]

I’ll update the docs after you decide.

Regards