Skip to content

Instantly share code, notes, and snippets.

@johntom
Forked from vegarringdal/app.html
Last active July 6, 2016 18:42
Show Gist options
  • Save johntom/246b7b3e944c019253194bcfbe2077d2 to your computer and use it in GitHub Desktop.
Save johntom/246b7b3e944c019253194bcfbe2077d2 to your computer and use it in GitHub Desktop.
test filter bug
<template>
<require from="valueConverters"></require>
<div class="row">
<v-grid
class="col-md-6"
style="height:350px"
v-row-height="25"
v-current-entity.bind=myCurrentEntity
v-collection.bind="myCollection| selected:'isSelected':showOnlySelected"
v-grid-context.bind=myGrid>
<v-grid-row-repeat>
<label><input type="checkbox" checked.bind="rowRef.isSelected" /> ${rowRef.id}</label>
</v-grid-row-repeat>
</v-grid>
<!-- Form to the right -->
<div class="col-md-6">
<label><input type="checkbox" checked.bind="showOnlySelected" />show only selected</label>
</div>
</div>
</template>
export class BasicUse {
//utillity functions
myGrid = {};
//current entity, link this to inputs etc
myCurrentEntity = {};
//collection to display
myCollection = [];
//helper for dummy data
constructor() {
//get this element
for (let i = 0; i < 1000; i++) {
this.myCollection.push({ id: i, title: `item ${i+1}`, isSelected: false });
}
}
}
<!doctype html>
<html>
<head>
<title>Aurelia</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body aurelia-app="main">
<h1>Loading...</h1>
<script src="https://cdn.rawgit.com/vegarringdal/vGridGistRunJSPMBundle/v.1.0.1/jspm_packages/system.js"></script>
<script src="https://cdn.rawgit.com/vegarringdal/vGridGistRunJSPMBundle/v.1.0.1/config.js"></script>
<script>
System.import('aurelia-bootstrapper');
</script>
</body>
</html>
export function configure(aurelia) {
aurelia.use
.standardConfiguration()
.developmentLogging()
.plugin('aurelia-v-grid');
aurelia.start().then(a => a.setRoot());
}
/**
* Created by vegar on 6/8/2016.
*/
import moment from 'moment';
export class DateFormatValueConverter {
toView(value) {
if(value){
var x = moment(value).format('DD.MM.YYYY');
return x;
} else {
return value;
}
}
fromView(value) {
if(value){
return new Date(moment(value,'DD.MM.YYYY')._d);
} else {
return value;
}
}
}
import numeral from 'numeral';
export class NumberFormatValueConverter {
toView(value) {
if (value) {
return numeral(value).format('($0,0.00)');
} else {
return value;
}
}
fromView(value) {
if (value) {
return numeral().unformat(value);
} else {
return value;
}
}
}
export class SelectedValueConverter {
toView(array, selectedProperty, isActive) {
if (array) {
if (isActive) {
return array.filter(item => {
return item.isSelected;
});
} else {
return array;
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment