<commit_before><!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<title>Cosmoz Omnitable demo</title>

	<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
	<link rel="import" href="../../polymer/polymer.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="../../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="table-demo-behavior.html">

	<custom-style>
		<style is="custom-style" include="iron-flex iron-flex-alignment iron-positioning"></style>
	</custom-style>

</head>
<body class="fullbleed">
	<dom-module id="x-page">
		<template>
			<style include="iron-flex iron-positioning">
				:host {
					display: block;
					position: relative;
				}

				.action {
					padding: 5px;
					margin: 5px 5px 10px 5px;
				}
				p {
					margin: 0.5ex;
				}
			</style>
			<div class="layout vertical fit">
				<h3>Cosmoz omnitable grouping demo</h3>
				<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>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>
					</div>
					<div class="action">
						<paper-dropdown-menu label="Locale">
							<paper-listbox class="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>
							</paper-listbox>
						</paper-dropdown-menu>
					</div>
				</div>

				<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>
						</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>
					<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>
					<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>
						</template>
					</cosmoz-omnitable-column>
				</cosmoz-omnitable>
			</div>
		</template>
	</dom-module>

	<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);
		}
	});
}());

	</script>
</body>
</html><commit_msg>group demo spacing, es6, indentation<commit_after><!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<title>Cosmoz Omnitable demo</title>

	<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
	<link rel="import" href="../../polymer/polymer.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="../../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="table-demo-behavior.html">

	<custom-style>
		<style is="custom-style" include="iron-flex iron-flex-alignment iron-positioning"></style>
	</custom-style>

</head>
<body class="fullbleed">
	<dom-module id="x-page">
		<template>
			<style include="iron-flex iron-positioning">
				:host {
					display: block;
					position: relative;
				}

				.action {
					padding: 5px;
					margin: 5px 5px 10px 5px;
				}
				p {
					margin: 0.5ex;
				}
			</style>
			<div class="layout vertical fit">
				<h3>Cosmoz omnitable grouping demo</h3>
				<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>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>
					</div>
					<div class="action">
						<paper-dropdown-menu label="Locale">
							<paper-listbox class="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>
							</paper-listbox>
						</paper-dropdown-menu>
					</div>
				</div>

				<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>
						</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>
					<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>
					<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>
						</template>
					</cosmoz-omnitable-column>
				</cosmoz-omnitable>
			</div>
		</template>
	</dom-module>

	<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
				],

				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>
</html>
{'fraction_non_alphanumeric': 0.19228974143563896, 'fraction_numerical': 0.0056940166153271726, 'mean_word_length': 3.477225240284162, 'pattern_counts': {'":': 0, '<': 203, '<?xml version=': 0, '>': 204, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1271185', 'n_tokens_mistral': 4470, 'n_tokens_neox': 3588, 'n_words': 648}