BruceL33t/app.html

## app.html
<template>
  <require from="./grouped-sort"></require>
  <table>
    <template repeat.for="[group, items] of myArray2 | groupedSort">
      <tr>
        <td>
          ${group}
        </td>
      </tr>
      <tr repeat.for="item of items">
        <td>
          ${item.name}
        </td>
        </tr>
    </template>
  </table>
  <a click.delegate="clickMe()">click me</a>
</template>

## app.js
export class App {
  myArray2 = [];
  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'
    }
  ];


  attached(){

  }

  clickMe(){
    let self = this;
    for(let i = 0; i < self.myArray.length; i++){
      (function(index) {
        setTimeout(function() {
          self.myArray2.push(self.myArray[i]);
          self.myArray2 = [...self.myArray2];

        }, i * 1000);
      })(i);
    }
  }

}

## grouped-sort.js
export class GroupedSortValueConverter {
  toView(value) {
    console.log(value);
    const groups = new Map();

    for(let item of value) {
      let group = groups.get(item.group);
      if( group === undefined) {
        groups.set(item.group, [item]);
      } else {
        group.push(item);
      }
    }
    console.log(groups)
    console.log(groups.entries())
    let sortedGroups = new Map([...groups.entries()].sort());
    console.log(sortedGroups)

    for(let [group, entries] of sortedGroups) {
      entries.sort((a,b) => {
        const nameA=a.name.toLowerCase(),
              nameB=b.name.toLowerCase();

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

    return sortedGroups;
  }
}

## 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 myArray2 \| groupedSort">
	<tr>
	<td>
	${group}
	</td>
	</tr>
	<tr repeat.for="item of items">
	<td>
	${item.name}
	</td>
	</tr>
	</template>
	</table>
	<a click.delegate="clickMe()">click me</a>
	</template>
	export class App {
	myArray2 = [];
	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'
	}
	];



	attached(){

	}

	clickMe(){
	let self = this;
	for(let i = 0; i < self.myArray.length; i++){
	(function(index) {
	setTimeout(function() {
	self.myArray2.push(self.myArray[i]);
	self.myArray2 = [...self.myArray2];

	}, i * 1000);
	})(i);
	}
	}

	}
	export class GroupedSortValueConverter {
	toView(value) {
	console.log(value);
	const groups = new Map();

	for(let item of value) {
	let group = groups.get(item.group);
	if( group === undefined) {
	groups.set(item.group, [item]);
	} else {
	group.push(item);
	}
	}
	console.log(groups)
	console.log(groups.entries())
	let sortedGroups = new Map([...groups.entries()].sort());
	console.log(sortedGroups)

	for(let [group, entries] of sortedGroups) {
	entries.sort((a,b) => {
	const nameA=a.name.toLowerCase(),
	nameB=b.name.toLowerCase();

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

	return sortedGroups;
	}
	}
	<!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>