AshleyGrant/app.html

## app.html
<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>

## app.js
export class App {
  myArray = [
    {
        name: 'R2-D2',
        group: 'robots'
    },
    {
        name: 'terminator',
        group: 'robots'
    },
    {
        name: 'wall-e',
        group: 'robots'
    },
    {
        name: 'robocop',
        group: 'robots'
    },
    {
        name: 'C-3PO',
        group: 'robots'
    },
    {
        name: 'dog',
        group: 'animals'
    },
    {
        name: 'shark',
        group: 'animals'
    },
    {
        name: 'cat',
        group: 'animals'
    },
    {
        name: 'monkey',
        group: 'animals'
    }
]
}

## grouped-sort.js
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;
  }
}

## index.html
<!doctype html>
<html>
  <head>
    <title>Aurelia</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
   </head>
  <body aurelia-app>
    <script src="https://jdanyow.github.io/rjs-bundle/node_modules/requirejs/require.js"></script>
    <script src="https://jdanyow.github.io/rjs-bundle/config.js"></script>
    <script src="https://jdanyow.github.io/rjs-bundle/bundles/aurelia.js"></script>
    <script src="https://jdanyow.github.io/rjs-bundle/bundles/babel.js"></script>
    <script>
      require(['aurelia-bootstrapper']);
    </script>
  </body>
</html>
	<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>
	export class App {
	myArray = [
	{
	name: 'R2-D2',
	group: 'robots'
	},
	{
	name: 'terminator',
	group: 'robots'
	},
	{
	name: 'wall-e',
	group: 'robots'
	},
	{
	name: 'robocop',
	group: 'robots'
	},
	{
	name: 'C-3PO',
	group: 'robots'
	},
	{
	name: 'dog',
	group: 'animals'
	},
	{
	name: 'shark',
	group: 'animals'
	},
	{
	name: 'cat',
	group: 'animals'
	},
	{
	name: 'monkey',
	group: 'animals'
	}
	]
	}
	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;
	}
	}
	<!doctype html>
	<html>
	<head>
	<title>Aurelia</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>
	<body aurelia-app>
	<script src="https://jdanyow.github.io/rjs-bundle/node_modules/requirejs/require.js"></script>
	<script src="https://jdanyow.github.io/rjs-bundle/config.js"></script>
	<script src="https://jdanyow.github.io/rjs-bundle/bundles/aurelia.js"></script>
	<script src="https://jdanyow.github.io/rjs-bundle/bundles/babel.js"></script>
	<script>
	require(['aurelia-bootstrapper']);
	</script>
	</body>
	</html>