Themes

import { Component } from '@angular/core';

import { GuiCellView, GuiPaging, GuiTheme } from '@generic-ui/ngx-grid';

import { source } from './source';

@Component({
	selector: 'themes-grid',
	template: `
		Theme:
		<gui-select [options]="themes"
					[placeholder]="'Select theme'"
					[selected]="'FABRIC'"
					(optionChanged)="setTheme($event)">
		</gui-select>

		<gui-grid [columns]="columns"
				  [source]="source"
				  [paging]="paging"
				  [theme]="theme">
		</gui-grid>
	`
})
export class ThemesGridComponent {

	columns = [{
		header: 'Number',
		field: 'number',
		view: GuiCellView.CHIP,
		width: 80
	}, {
		header: 'Name',
		field: 'name',
		view: GuiCellView.ITALIC
	}, {
		header: 'Position',
		field: 'position',
		view: GuiCellView.BOLD
	}, {
		header: 'Team',
		field: 'team',
		view: GuiCellView.LINK
	}, {
		header: 'Check',
		field: 'check',
		width: 60,
		view: GuiCellView.CHECKBOX
	}, {
		header: 'Comments',
		field: 'comments',
		view: GuiCellView.ITALIC
	}];

	source = source;

	paging: GuiPaging = {
		enabled: true,
		pageSizes: [10, 25],
		pageSize: 10
	};

	theme: GuiTheme;

	themes = Object.keys(GuiTheme)
				   .map((key: string) => GuiTheme[key])
				   .filter((val) => !Number.isInteger(val));

	setTheme(theme: GuiTheme): void {
		this.theme = theme;
	}
}

export const source = [{
	name: 'Kobe Bryant',
	number: 8,
	position: 'SG',
	team: 'Los Angeles Lakers'
}, {
	name: 'Tracy McGrady',
	number: 1,
	position: 'SG',
	team: 'Houston Rockets'
}, {
	name: 'Lebron James',
	number: 23,
	position: 'PF',
	team: 'Los Angeles Lakers'
}, {
	name: 'Dwayne Wade',
	number: 3,
	position: 'SG',
	team: 'Miami Heat'
}, {
	name: 'Vince Carter',
	number: 15,
	position: 'SG',
	team: 'Atlanta Hawks'
}, {
	name: 'Charles Barkley',
	number: 34,
	position: 'PF',
	team: 'N/A'
}, {
	name: 'Nikola Jokic',
	number: 15,
	position: 'PF',
	team: 'Denver Nuggets'
}, {
	name: 'Russell Westbrook',
	number: 0,
	position: 'PG',
	team: 'Houston Rockets'
}, {
	name: 'Kevin Durant',
	number: 7,
	position: 'PF',
	team: 'Brooklyn Nets'
}, {
	name: 'James Harden',
	number: 13,
	position: 'PG/SG',
	team: 'Houston Rockets'
}, {
	name: 'Paul George',
	number: 13,
	position: 'SG',
	team: 'Los Angeles Clippers'
}, {
	name: 'Ben Simmons',
	number: 25,
	position: 'PG',
	team: 'Philadelphia 76ers'
}, {
	name: 'Kawhi Leonard',
	number: 2,
	position: 'SG/SF',
	team: 'Los Angeles Clippers'
}, {
	name: 'Joel Embiid',
	number: 21,
	position: 'C',
	team: 'Philadelphia 76ers'
}, {
	name: 'Janis Andetokunmbo',
	number: 34,
	position: 'PF',
	team: 'Milwaukee Bucks'
}, {
	name: 'Stephen Curry',
	number: 30,
	position: 'PG',
	team: 'Golden State Warriors'
}, {
	name: 'Klay Thompson',
	number: 11,
	position: 'SG',
	team: 'Golden State Warriors'
}, {
	name: 'Anthony Davis',
	number: 23,
	position: 'PF',
	team: 'Los Angeles Lakers'
}];