Sortable row groups (+ group child rows) with Aurelia

Question

I found an example here https://jdanyow.github.io/aurelia-converters-sample/ (search for SortValueConverter) - Just need to somehow extend the toView function:

export class SortValueConverter {
  toView(array, propertyName, direction) {
    var factor = direction === 'ascending' ? 1 : -1;
    return array
      .slice(0)
      .sort((a, b) => {
        return (a[propertyName] - b[propertyName]) * factor
      });
  }
}

so that it does not only sort each row, but so that it:

1. sorts each row group object - inside the array of table rows - which has the boolean isGroup: true set
2. Together with sorting the row itself, it should however also sort the row group children belonging under each group
3. And of course these rows would also need to be moved together with their group rows, so they stay below the group row.

In my js code I've flattened the array, so I can show it in a table. isGroup:true/false marks when a new group begins.

• robots (isGroup: true)
• R2-D2
• terminator
• wall-e
• robocop
• C-3PO
• animals (isGroup:true)
• dog
• shark
• cat
• monkey

How could you rewrite the sort value converter (ideally) to sort both row groups and row group children eg. alphabetically asc/desc. I guess it doesn't have to be done using a value converter but could in theory just be done directly on the array in the js code, but I think the best solution would be to extend the sort value converter to support this row grouping also.

To keep this example as "simple" as possible, let's reduce the row objects to a bare minimum of:

{
   name: 'group or robot name'
   isGroup: true/false
}

so eg.

[
    {
        name: 'robots',
        isGroup: true
    },
    {
        name: 'R2-D2',
        isGroup: false
    },
    {
        name: 'terminator',
        isGroup: false
    },
    {
        name: 'wall-e',
        isGroup: false
    },
    {
        name: 'robocop',
        isGroup: false
    },
    {
        name: 'C-3PO',
        isGroup: false
    },
    {
        name: 'animals',
        isGroup: true
    },
    {
        name: 'dog',
        isGroup: false
    },
    {
        name: 'shark',
        isGroup: false
    },
    {
        name: 'cat',
        isGroup: false
    },
    {
        name: 'monkey',
        isGroup: false
    }
]

Any ideas?

Answer 1

I would recommend slightly changing your data structure. The data structure as you currently have it is somewhat ambiguous, since the ordering of the list determines which group an item is in. I would change the structure to look like this:

[
  {
    name: 'R2-D2',
    group: 'robots'
  },
  //...

Then, we can group and sort this array using a value converter that looks like this:

export class GroupedSortValueConverter {
  toView(value) {

    let sortedArray = value.splice(0).sort((a, b) => {
      const left = a.name,
        right = b.name;

      return caseInsensitiveStringComparer(left, right);
    });

    const groups = new Map();

    for (let item of sortedArray) {
      let group = groups.get(item.group);
      if (group === undefined) {
        groups.set(item.group, [item]);
      } else {
        group.push(item);
      }
    }

    let sortedGroups = new Map(Array.from(groups.entries()).sort((a, b) => {
      const left = a[0];
      const right = b[0];

      return caseInsensitiveStringComparer(left, right);
    }));

    return sortedGroups;
  }
}

function caseInsensitiveStringComparer(left, right) {
  const lowerLeft = left.toLowerCase(),
    lowerRight = right.toLowerCase();

  if (lowerLeft < lowerRight) { //sort string ascending
    return -1;
  } else if (lowerLeft > lowerRight) {
    return 1;
  } else {
    return 0;
  }
}

And we can iterate this Map using code like this. Note that I'm having to use a template element to wrap the group repeater as there is not a single "natural wrapping element" for the repeater:

<template>
  <require from="./grouped-sort"></require>
  <table>
    <template repeat.for="[group, items] of myArray | groupedSort">
      <tr>
        <td>
          ${group}
        </td>
      </tr>
      <tr repeat.for="item of items">
        <td>
          ${item.name}
        </td>
        </tr>
    </template>
  </table>
</template>

A runnable gist is here: https://gist.run/?id=27a6e61996cb884d97fbeed0acb310bf

Note that I used this StackOverflow answer to help produce this answer: Is it possible to sort a ES6 map object?

Answer 2

Instead of flattening your data before submitting it to the value converter, you can have the converter do it for you. Doing so will make sorting on multiple criteria (group and items names) much easier.

I assume your data is in a format similar to this:

let groups = [{
    name: "robots",
    items: ['R2D2', 'terminator', 'wall-e', 'robocop']
}, {
    name: "animals",
    items: ['dog', 'shark', 'cat', 'monkey']
}];

Here's the value converter:

export class SortValueConverter {

    toView(array, direction = 'ascending') {
        let factor = direction === 'ascending' ? 1 : -1;
        let arrayToSort = array.slice(0); // Use a copy.

        // Sort the items within each group.
        for (let group of arrayToSort) {
            group.items = group.items.slice(0).sort((a, b) => (a > b ? 1 : -1) * factor); // Sort a copy of the items.
        }

        // Now sort the groups.
        arrayToSort.sort((a, b) => (a.name > b.name ? 1 : -1) * factor);

        // Flatten the result.
        let result = [];

        for (let group of arrayToSort) {
            result.push({name: group.name, isGroup: true});

            for (let item of group.items) {
                result.push({name: item, isGroup: false});
            }
        }

        return result;
    }

}

Note that I took out the propertyName parameter for simplicity, but it can be easily added in for more flexibility if you want to do this with other similar data structures.