comp(mdTable): nextTick selection data

[FossPrime]

The current implementation couldn't handle selection data and table data at the same time, or having selection data before table data #1866

Case 1: Update at same time
https://codesandbox.io/s/lp7117wylq

Case 2: Give selection AOT
https://codesandbox.io/s/6j7n78mz6z

docs/app/App.vue for case 2

<template>
  <div>
    <md-table v-model="people" md-card
        @md-selected="onSelect" :md-selected-value.sync="selected">
      <md-table-toolbar>
        <h1 class="md-title">With auto select and alternate headers</h1>
      </md-table-toolbar>

      <md-table-toolbar slot="md-table-alternate-header" slot-scope="{ count }">
        <div class="md-toolbar-section-start">{{ getAlternateLabel(count) }}</div>

        <div class="md-toolbar-section-end">
          <md-button class="md-icon-button">
            <md-icon>delete</md-icon>
          </md-button>
        </div>
      </md-table-toolbar>

      <md-table-row slot="md-table-row" slot-scope="{ item }" :md-disabled="item.name.includes('Stave')" md-selectable="multiple" md-auto-select>
        <md-table-cell md-label="Name" md-sort-by="name">{{ item.name }}</md-table-cell>
        <md-table-cell md-label="Email" md-sort-by="email">{{ item.email }}</md-table-cell>
        <md-table-cell md-label="Gender" md-sort-by="gender">{{ item.gender }}</md-table-cell>
        <md-table-cell md-label="Job Title" md-sort-by="title">{{ item.title }}</md-table-cell>
      </md-table-row>
    </md-table>

    <p>Selected:</p>
    {{ selected }}
  </div>
</template>

<script>
import '../../dist/vue-material.min.css'
import '../../dist/theme/default.css'

export default {
  name: "TableMultiple",
  data: () => ({
    selected: [],
    people: [],
    peopleServer: [
      {
        name: "Shawna Dubbin",
        email: "sdubbin0@geocities.com",
        gender: "Male",
        title: "Assistant Media Planner"
      },
      {
        name: "Odette Demageard",
        email: "odemageard1@spotify.com",
        gender: "Female",
        title: "Account Coordinator"
      },
      {
        name: "Lonnie Izkovitz",
        email: "lizkovitz3@youtu.be",
        gender: "Female",
        title: "Operator"
      },
      {
        name: "Thatcher Stave",
        email: "tstave4@reference.com",
        gender: "Male",
        title: "Software Test Engineer III"
      },
      {
        name: "Clarinda Marieton",
        email: "cmarietonh@theatlantic.com",
        gender: "Female",
        title: "Paralegal"
      }
    ]
  }),
  methods: {
    onSelect(items) {
      this.selected = items;
    },
    getAlternateLabel(count) {
      let plural = "";

      if (count > 1) {
        plural = "s";
      }

      return `${count} user${plural} selected`;
    }
  },
  created() {
    this.$set(this, "selected", [this.peopleServer[0]]);
    setInterval(async () => {
      this.$set(this, "people", this.peopleServer);
    }, 3000);
  }
};
</script>

<style lang="scss" scoped>
.md-table + .md-table {
  margin-top: 16px;
}
</style>

[Samuell1]

We cant use async/await because of #1182 . Do you think you can change that?

[VdustR]

As @Samuell1 said #1874 (comment)
would you change it to this.$nextTick(() => { /* ... code here */ })?

Additionally, I think this $nextTick could be removed with this fix.
https://github.com/rayfoss/vue-mater/blob/42ce8fcc2ebf38986d9d09d5cf296ecce93212d3/src/components/MdTable/MdTable.vue#L357

[FossPrime]

You're right about the created() -> nextTick(), it became superfluous and the bug fix still works on all cases without it.

[FossPrime]

https://github.com/nodejs/Release Node 6 is in maintenance mode... nothing new should be developed with it, everything old is version locked and won't be affected by non-patch updates. node 7.6 supports Async/await, and even that has been end-of-life since 2017-06-30

We should definitely be supporting async, as all current and active versions of Node support it. Otherwise, we're implying support for Node 6. We should probably enforce this in package.json engines... "node": ">= 7.0" Node 7 is, again end of life. This should be updated on the next minor update 1.1.0.

I saw a horrible tree of nested promises yesterday... I don't want to see those again

[marcosmoura]

@rayfoss There is nothing related with Node version in this case. The problem with async/await is due to Babel code making our bundle way bigger than we need. For 1.0 we don't have any interests to support async/await in our internal code.
On the userland, you can use async/await with your own babel polyfill if necessary, but on Vue Material's internal code, we must think about our bundle size. We can definitely deal with the drawback of nested callbacks.

[FossPrime]

Gotcha... I forgot this is ran on the browser for a second.

On Wed, Jul 25, 2018, 6:28 PM Marcos Moura ***@***.***> wrote: @rayfoss <https://github.com/rayfoss> There is nothing related with Node version in this case. The problem with async/await is due to Babel code making our bundle way bigger than we need. For 1.0 we don't have any interests to support async/await in our internal code. On the userland, you can use async/await with your own babel polyfill if necessary, but on Vue Material's internal code, we must think about our bundle size. We can definitely deal with the drawback of nested callbacks. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1874 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AA1eLD7ifpL1jThhPnB9uwbPo0zgNAEtks5uKP8agaJpZM4Vc-Qb> .

-- *Ray Foss*