Merge pull request #191 from plumelo/feature/NEOV-236-grouping-tests-…

…demo-fixes Group, sort demo fixes; Group, sort tests for column, boolean, amount columns
Neovici · Jun 20, 2018 · c9b8df0 · c9b8df0
2 parents eab158c + 1fc63aa
commit c9b8df0
Show file tree

Hide file tree

Showing 11 changed files with 2,320 additions and 1,808 deletions.
diff --git a/.travis.yml b/.travis.yml
@@ -1,5 +1,5 @@
 language: node_js
-node_js: 6
+node_js: 8
 dist: trusty
 sudo: required
 env:

diff --git a/cosmoz-omnitable-item.html b/cosmoz-omnitable-item.html
@@ -4,7 +4,9 @@
 
 <dom-module id="cosmoz-omnitable-item">
 	<template>
-		<style include="paper-item-shared-styles"></style>
+		<style include="paper-item-shared-styles">
+			/* polymer-cli v1.7.x linter breaks with empty line */
+	 	</style>
 		<style>
 		:host {
 			@apply --layout-horizontal;

diff --git a/cosmoz-omnitable.html b/cosmoz-omnitable.html
@@ -42,7 +42,9 @@
 -->
 <dom-module id="cosmoz-omnitable">
 	<template>
-		<style include="cosmoz-omnitable-styles iron-flex"></style>
+		<style include="cosmoz-omnitable-styles iron-flex">
+			/* polymer-cli v1.7.x linter breaks with empty line */
+		</style>
 
 		<cosmoz-page-location id="location" route-hash="{{ _routeHash }}"></cosmoz-page-location>
 

diff --git a/demo/group-on-demo.html b/demo/group-on-demo.html
@@ -8,13 +8,15 @@
 
 	<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
 	<link rel="import" href="../../polymer/polymer.html">
+	<link rel="import" href="../../neon-animation/web-animations.html">
 	<link rel="import" href="../../iron-flex-layout/iron-flex-layout.html">
 	<link rel="import" href="../../iron-flex-layout/iron-flex-layout-classes.html">
+	<link rel="import" href="../../paper-dropdown-menu/paper-dropdown-menu-light.html">
 	<link rel="import" href="../../iron-icons/editor-icons.html">
 	<link rel="import" href="../../iron-icons/iron-icons.html">
 	<link rel="import" href="../../paper-button/paper-button.html">
-	<link rel="import" href="../../cosmoz-i18next/cosmoz-i18next.html">
 	<link rel="import" href="../cosmoz-omnitable.html">
+	<link rel="import" href="./helpers/cosmoz-translations.html">
 
 	<link rel="import" href="table-demo-behavior.html">
 
@@ -42,18 +44,19 @@
 			</style>
 			<div class="layout vertical fit">
 				<h3>Cosmoz omnitable grouping demo</h3>
+				<cosmoz-translations locale="[[ locale ]]"></cosmoz-translations>
 				<div>
-					<p>Table sould be grouped by column <code>Group</code> on load. Current <code>groupOn</code> value: <span style="color: red">{{group}}</span>.</p>
+					<p>Table sould be grouped by column <code>Group</code> on load. Current <code>groupOn</code> value: <span style="color: red">{{ group }}</span>.</p>
 					<p>You can group the table only by columns Boolean, Group, Date, DateJSON and Sub-property</p>
 				</div>
 				<div class="layout horizontal center">
 					<button class="action" on-tap="changeData">Generate a new data set</button>
 					<div class="action">
-						Selected items count: <span>{{selectedItems.length}}</span>
+						Selected items count: <span>{{ selectedItems.length }}</span>
 					</div>
 					<div class="action">
-						<paper-dropdown-menu label="Locale">
-							<paper-listbox class="dropdown-content" selected="{{locale}}" attr-for-selected="value">
+						<paper-dropdown-menu label="Locale" no-animations>
+							<paper-listbox class="dropdown-content" slot="dropdown-content" selected="{{ locale }}" attr-for-selected="value">
 								<paper-item value="en">en</paper-item>
 								<paper-item value="fr">fr</paper-item>
 								<paper-item value="sv">sv</paper-item>
@@ -62,31 +65,31 @@ <h3>Cosmoz omnitable grouping demo</h3>
 					</div>
 				</div>
 
-				<cosmoz-omnitable id="omnitable" class="flex" data="[[data]]"
-					selection-enabled selected-items="{{selectedItems}}" group-on="{{group}}">
+				<cosmoz-omnitable id="omnitable" class="flex" data="[[ data ]]"
+					selection-enabled selected-items="{{ selectedItems }}" group-on="{{ group }}">
 					<cosmoz-omnitable-column title="Id" name="id" value-path="id" sort-on="id">
 						<template class="cell">
-							<a href="#!/purchase/suppliers/view?id=[[item.id]]">[[item.id]]</a>
+							<a href="#!/purchase/suppliers/view?id=[[ item.id ]]">[[ item.id ]]</a>
 						</template>
 					</cosmoz-omnitable-column>
 					<cosmoz-omnitable-column-boolean title="Boolean" name="bool" value-path="bool" sort-on="bool" group-on="bool"
 						true-label="Oui" false-label="Non">
 					</cosmoz-omnitable-column-boolean>
-					<cosmoz-omnitable-column-number title="Value" name="value" value-path="value" locale="{{locale}}" sort-on="value">
+					<cosmoz-omnitable-column-number title="Value" name="value" value-path="value" locale="{{ locale }}" sort-on="value">
 					</cosmoz-omnitable-column-number>
 					<cosmoz-omnitable-column title="Group" name="group" value-path="group" bind-values sort-on="group" group-on="group">
 					</cosmoz-omnitable-column>
 					<cosmoz-omnitable-column-amount title="Amount" name="amount" value-path="amount" sort-on="amount">
 					</cosmoz-omnitable-column-amount>
-					<cosmoz-omnitable-column-date title="Date" name="date" value-path="date" locale="{{locale}}" sort-on="date" group-on="date">
+					<cosmoz-omnitable-column-date title="Date" name="date" value-path="date" locale="{{ locale }}" sort-on="date" group-on="date">
 					</cosmoz-omnitable-column-date>
-					<cosmoz-omnitable-column-date title="DateJSON" name="datejson" value-path="dateJSON" locale="{{locale}}" sort-on="dateJSON" group-on="dateJSON">
+					<cosmoz-omnitable-column-date title="DateJSON" name="datejson" value-path="dateJSON" locale="{{ locale }}" sort-on="dateJSON" group-on="dateJSON">
 					</cosmoz-omnitable-column-date>
 					<cosmoz-omnitable-column title="Sub-property" name="subproperty" value-path="sub.subProp" sort-on="sub.subProp" group-on="sub.subProp">
 					</cosmoz-omnitable-column>
 					<cosmoz-omnitable-column title="Name" name="name" value-path="name" bind-values sort-on="name">
 						<template class="cell">
-							<a href="#!/purchase/suppliers/view?id=[[item.id]]">[[item.name]]</a>
+							<a href="#!/purchase/suppliers/view?id=[[ item.id ]]">[[ item.name ]]</a>
 						</template>
 					</cosmoz-omnitable-column>
 				</cosmoz-omnitable>
@@ -97,68 +100,63 @@ <h3>Cosmoz omnitable grouping demo</h3>
 	<x-page class="fit"></x-page>
 
 	<script type="text/javascript">
-/*global document, window, Cosmoz, Polymer */
-(function () {
-	'use strict';
-
-
-	Polymer({
-		is: 'x-page',
-
-		properties: {
-			data: {
-				type: Array
-			},
-			selectedItems: {
-				type: Array
-			},
-			locale: {
-				type: String,
-				value: null
-			},
-			group: {
-				type: String,
-				value: 'group'
-			}
-		},
-
-		behaviors: [
-			Cosmoz.TableDemoBehavior
-		],
-
-		ready: function () {
-			//this.changeData();
-		},
-
-		attached: function () {
-			this.data = this.generateTableDemoData(20, 25, 25);
-		},
-
-		changeData: function () {
-			this.data = this.generateTableDemoData(20, 25, 10);
-		},
-
-		_localeChanged: function (locale, oldLocale) {
-			console.log('_localeChanged', locale, oldLocale);
-		},
-
-		_computeLabel: function (text, count) {
-			return text + ' ' + count + ' items';
-		},
-
-		updateSelectedRows: function (event, detail) {
-			detail.items.forEach(function (item) {
-				this.$.omnitable.setItemValue(item, 'randomString3', 'blablablalbal');
-			}, this);
-
-		},
-
-		removeItems: function (event, detail) {
-			console.log('runAction', detail.items, event, detail, detail.items);
-			detail.omnitable.removeItems(detail.items);
-		}
-	});
-}());
+		/*global document, window, Cosmoz, Polymer */
+		(function () {
+			'use strict';
+
+
+			Polymer({
+				is: 'x-page',
+
+				properties: {
+					data: {
+						type: Array
+					},
+					selectedItems: {
+						type: Array
+					},
+					locale: {
+						type: String,
+						value: null
+					},
+					group: {
+						type: String,
+						value: 'group'
+					}
+				},
+
+				behaviors: [
+					Cosmoz.TableDemoBehavior
+				],
+
+				attached() {
+					this.data = this.generateTableDemoData(20, 25, 25);
+				},
+
+				changeData() {
+					this.data = this.generateTableDemoData(20, 25, 10);
+				},
+
+				_localeChanged(locale, oldLocale) {
+					console.log('_localeChanged', locale, oldLocale);
+				},
+
+				_computeLabel(text, count) {
+					return text + ' ' + count + ' items';
+				},
+
+				updateSelectedRows(event, detail) {
+					detail.items.forEach(item => {
+						this.$.omnitable.setItemValue(item, 'randomString3', 'blablablalbal');
+					}, this);
+				},
+
+				removeItems(event, detail) {
+					console.log('runAction', detail.items, event, detail, detail.items);
+					detail.omnitable.removeItems(detail.items);
+				}
+			});
+		}());
 
 	</script>
 </body>

diff --git a/demo/helpers/cosmoz-translations.html b/demo/helpers/cosmoz-translations.html
@@ -0,0 +1,64 @@
+<link rel="import" href="../../../cosmoz-i18next/cosmoz-i18next.html">
+
+<dom-module id="cosmoz-translations">
+	<template>
+		<cosmoz-i18next
+			translations="[[ _getTranslations(locale) ]]"
+			interpolation-prefix="{"
+			interpolation-suffix="}"
+			key-separator="::"
+			ns-separator=":::">
+		</cosmoz-i18next>
+	</template>
+	<script>
+		(function () {
+			'use strict';
+
+			Polymer({
+				is: 'cosmoz-translations',
+
+				_getTranslations(locale) {
+					if (locale === 'sv') {
+						return {
+							'Ascending': 'stigande',
+							'Descending': 'fallande',
+							'Amount': 'Belopp',
+							'Group': 'Grupp',
+							'{0} group': '{0} grupp',
+							'{0} group_plural': '{0} grupper',
+							'{0} row': '{0} rad',
+							'{0} row_plural': '{0} rader',
+							'{0} selected item': '{0} valt objekt',
+							'{0} selected item_plural': '{0} valda objekt',
+							'Group on': 'Gruppera på',
+							'Sort on': 'Sortera på',
+							'No grouping': 'Ingen gruppering',
+							'No sorting': 'Ingen sortering'
+						};
+
+					} else if (locale === 'fr') {
+						return {
+							'Ascending': 'croissant',
+							'Descending': 'décroissant',
+							'Amount': 'Montant',
+							'Save as CSV': 'Eporter en CSV',
+							'Group': 'Groupe',
+							'{0} group': '{0} groupe',
+							'{0} group_plural': '{0} groupes',
+							'{0} row': '{0} ligne',
+							'{0} row_plural': '{0} lignes',
+							'{0} selected item': '{0} élément sélectionné',
+							'{0} selected item_plural': '{0} éléments sélectionnés',
+							'Group on': 'Grouper sur',
+							'Sort on': 'Trier sur',
+							'No grouping': 'Pas de groupement',
+							'No sorting': 'Pas de tri'
+						};
+					}
+
+					return {};
+				}
+			});
+		}());
+	</script>
+</dom-module>
diff --git a/demo/helpers/x-page.html b/demo/helpers/x-page.html
@@ -7,10 +7,10 @@
 <link rel="import" href="../../../iron-icons/iron-icons.html">
 <link rel="import" href="../../../paper-button/paper-button.html">
 <link rel="import" href="../../../paper-toggle-button/paper-toggle-button.html">
-<link rel="import" href="../../../cosmoz-i18next/cosmoz-i18next.html">
 <link rel="import" href="../../../cosmoz-viewinfo/cosmoz-viewinfo.html">
 <link rel="import" href="../../cosmoz-omnitable.html">
 <link rel="import" href="../table-demo-behavior.html">
+<link rel="import" href="cosmoz-translations.html">
 
 <dom-module id="x-page">
 	<template>
@@ -30,13 +30,7 @@
 		<cosmoz-viewinfo class="layout vertical fit">
 			<h3>Cosmoz omnitable demo</h3>
 
-			<cosmoz-i18next
-				translations="[[ _getTranslations(locale) ]]"
-				interpolation-prefix="{"
-				interpolation-suffix="}"
-				key-separator="::"
-				ns-separator=":::"></cosmoz-i18next>
-
+			<cosmoz-translations locale="[[ locale ]]"></cosmoz-translations>
 			<div class="layout horizontal center">
 				<button class="action" on-tap="changeData">Generate a new data set</button>
 				<button class="action" on-tap="changeSmallData">Generate a new small data set</button>
@@ -205,49 +199,6 @@ <h3>Cosmoz omnitable demo</h3>
 				return new Array(numSelected).fill(undefined).map(function (none, i) {
 					return 'action ' + (i + 1);
 				});
-			},
-
-			_getTranslations: function (locale) {
-				if (locale === 'sv') {
-					return {
-						'Ascending': 'stigande',
-						'Descending': 'fallande',
-						'Amount': 'Belopp',
-						'Group': 'Grupp',
-						'{0} group': '{0} grupp',
-						'{0} group_plural': '{0} grupper',
-						'{0} row': '{0} rad',
-						'{0} row_plural': '{0} rader',
-						'{0} selected item': '{0} valt objekt',
-						'{0} selected item_plural': '{0} valda objekt',
-						'Group on': 'Gruppera på',
-						'Sort on': 'Sortera på',
-						'No grouping': 'Ingen gruppering',
-						'No sorting': 'Ingen sortering'
-					};
-
-				} else if (locale === 'fr') {
-					return {
-						'Ascending': 'croissant',
-						'Descending': 'décroissant',
-						'Amount': 'Montant',
-						'Save as CSV': 'Eporter en CSV',
-						'Group': 'Groupe',
-						'{0} group': '{0} groupe',
-						'{0} group_plural': '{0} groupes',
-						'{0} row': '{0} ligne',
-						'{0} row_plural': '{0} lignes',
-						'{0} selected item': '{0} élément sélectionné',
-						'{0} selected item_plural': '{0} éléments sélectionnés',
-						'Group on': 'Grouper sur',
-						'Sort on': 'Trier sur',
-						'No grouping': 'Pas de groupement',
-						'No sorting': 'Pas de tri'
-					};
-				}
-
-				return {
-				};
 			}
 
 		});