Back

Angular - Agile users

Name
Company
Rating
Status
Training
Budget
Stark Industries
9
Active
$ -2700.00
Dunder Mifflin
18
Active
$ 3700.00
Wayne Enterprises
22
Active
$ 33000.00
Bubba Gump
13
Inactive
$ 6000.00
Cyberdyne Systems
1
Active
$ 17000.00
ACME Corporation
8
Active
$ 6100.00
The New York Inquirer
15
Active
$ -3300.00
Duff Beer
16
Active
$ 6500.00
Dist8
Dist8
Dist8
Dist2
Dist8
Sum 473
Dist8
Avg8287.5
Dist8

Angular - Source Code

component.ts
component.html
component.scss
user.ts
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit, ViewEncapsulation } from '@angular/core';

import { GuiColumnMenu, GuiRowSelection, GuiRowSelectionMode, GuiRowSelectionType, GuiSorting, GuiSortingOrder, GuiSummaries } from '@generic-ui/ngx-grid';


@Component({
	selector: 'agile-user-list',
	template: './component.html',
	changeDetection: ChangeDetectionStrategy.OnPush,
	encapsulation: ViewEncapsulation.None
})
export class NgExampleAgileComponent implements OnInit {

	source: ReadonlyArray<AgileUser> = [];

	columnSorting = {
		enabled: true,
		matcher: (user: AgileUser) => user.name,
		order: GuiSortingOrder.ASC
	};

	cellEditingEnabled = {
		enabled: true
	};

	cellEditingDisabled = {
		enabled: false
	};

	summaries: GuiSummaries = {
		enabled: true
	};

	budgetSummaries = {
		enabled: true,
		summariesTypes: [
			'sum'
		]
	};

	trainingSummaries = {
		enabled: true,
		summariesTypes: [
			'average'
		]
	};

	columnMatcher = (item: any) => item.name;

	sorting: GuiSorting = {
		enabled: true,
		multiSorting: true
	};

	columnMenu: GuiColumnMenu = {
		enabled: true,
		columnsManager: true
	};

	loading: boolean = false;

	rowSelection: boolean | GuiRowSelection = {
		enabled: true,
		type: GuiRowSelectionType.CHECKBOX,
		mode: GuiRowSelectionMode.MULTIPLE
	};

	constructor(private readonly cd: ChangeDetectorRef,
				private readonly userRepository: AgileUserRepository) {
	}

	ngOnInit() {

		this.userRepository
			.onUsers()
			.subscribe((users) => {
				this.source = users;
				this.cd.detectChanges();
			});
	}

	remove(id: number): void {
		this.userRepository.remove(id);
	}

	showDetails(item: AgileUser): void {
		alert(item.name)
	}

}

<gui-grid #grid
		  id="agile-grid"
		  [theme]="'generic'"
		  [source]="source"
		  [rowColoring]="'none'"
		  [sorting]="sorting"
		  [paging]="false"
		  [columnMenu]="columnMenu"
		  [verticalGrid]="false"
		  [horizontalGrid]="true"
		  [cellEditing]="true"
		  [rowHeight]="70"
		  [rowSelection]="rowSelection"
		  [summaries]="summaries"
		  [loading]="loading"
		  [infoPanel]="false">

	<gui-grid-column header="Name" type="string" width="250"
					 [sorting]="columnSorting" [cellEditing]="false" [matcher]="columnMatcher">
		<ng-template let-value="value" let-index="index" let-item="item">

			<span class="gui-user-wrapper">
				<img src="{{item.avatar}}" class="gui-user-img" />
			</span>

			<div class="gui-user-info" >
				<span class="gui-user-info-name" >{{item.name}}</span>
				<span class="gui-user-info-position" >{{item.position}}</span>
			</div>

		</ng-template>
	</gui-grid-column>

	<gui-grid-column header="Company" [field]="'company'" type="string" view="text"
					 [cellEditing]="true">
	</gui-grid-column>

	<gui-grid-column header="Rating" field="rating" type="number" width="100"
					 [cellEditing]="true">
	</gui-grid-column>

	<gui-grid-column header="Mobile" field="mobile" type="string" view="italic"
					 [enabled]="false"
					 [cellEditing]="false" align="right">
	</gui-grid-column>

	<gui-grid-column header="Status" field="status" type="string" width="160" sorting="false"
					 [cellEditing]="false" >
		<ng-template let-value="value" let-item="item">

			<gui-select [options]="[{value: 'Active'}, {value: 'Inactive'}]"
						[selected]="{value: value}"
						[width]="60">
			</gui-select>

		</ng-template>
	</gui-grid-column>

	<gui-grid-column header="Training" field="training" type="number" view="bar" width="140"
					 [summaries]="budgetSummaries"
					 [cellEditing]="true" >
	</gui-grid-column>

	<gui-grid-column header="Budget" field="budget" type="number" width="150"
					 [summaries]="trainingSummaries"
					 [cellEditing]="true" >
		<ng-template let-value="value">

			<ng-container *ngIf="value > 0">
				<div class="gui-align-right gui-budget" style="color: #268e28">$ {{value}}.00</div>
			</ng-container>

			<ng-container *ngIf="value === 0">
				<div class="gui-align-right gui-budget" style="color: #0747a6">$ {{value}}.00</div>
			</ng-container>

			<ng-container *ngIf="value < 0">
				<div class="gui-align-right gui-budget" style="color: #951f1d">$ {{value}}.00</div>
			</ng-container>

		</ng-template>
	</gui-grid-column>

	<gui-grid-column [cellEditing]="false" [sorting]="false" width="60" >
		<ng-template let-value="value" let-item="item">

			<button mat-icon-button [matMenuTriggerFor]="menu">
				<mat-icon>more_vert</mat-icon>
			</button>
			<mat-menu #menu="matMenu">
				<button mat-menu-item (click)="showDetails(item)">
					<mat-icon>info</mat-icon>
					<span>Show details</span>
				</button>
				<button mat-menu-item disabled>
					<mat-icon>edit</mat-icon>
					<span>Edit</span>
				</button>
				<button mat-menu-item (click)="remove(item.id)">
					<mat-icon>delete</mat-icon>
					<span>Remove</span>
				</button>
			</mat-menu>

		</ng-template>
	</gui-grid-column>

</gui-grid>


#agile-grid {

	.gui-structure {
		background: #f4f8f9;
	}

	.gui-structure-border {
		border: 0 !important;
	}

	.gui-header-cell {
		background: #f4f8f9;
		font-weight: bold;

		.gui-text-view span {
			font-size: 13px;
			text-transform: uppercase;
		}

	}

	.gui-structure.gui-generic .gui-header-cell,
	.gui-structure.gui-generic .gui-structure-header-columns {
		height: 60px !important;
	}

	.gui-horizontal-grid .gui-structure-container-element .gui-content .gui-row {
		border-bottom: 10px solid transparent;
		background: transparent;

		&.selected {
			.gui-cell {
				background: #e7f4f9;
			}
		}

		.gui-cell {
			background: white;

			&:first-of-type {
				border-radius: 8px 0 0 8px;
			}

			&:last-of-type {
				border-radius: 0 8px 8px 0;
			}
		}
	}

	.gui-user-info {
		display: inline-flex;
		flex-direction: column;
		align-items: stretch;
		align-content: center;
		justify-content: center;
	}

	.gui-user-info-name {
		padding-bottom: 4px;
	}

	.gui-user-info-position {
		color: #606060;
		font-style: italic;
		font-size: 13px;
		overflow: hidden;
	}

	.gui-user-wrapper {
		width: 36px;
		height: 36px;
		margin-right: 16px;
		display: flex;
	}

	.gui-user-img {
		width: 100%;
		min-height: 100%;
		display: block;
		border-radius: 50%;
		object-fit: cover;
		object-position: center;
	}

	.gui-structure-summaries-panel {
		background: transparent;
	}

	.gui-structure-summaries-cell {
		border: 0;
		background: transparent;
	}

	button {
		border: inherit;
	}

}

export class AgileUser {

	constructor(
		public readonly id?: number,
		public readonly name?: string,
		public readonly avatar?: string,
		public readonly company?: string,
		public readonly position?: string,
		public readonly performance?: number, // 0-5
		public readonly training?: number, // 0-100
		public readonly rating?: number,
		public readonly mobile?: string,
		public readonly budget?: number,
		public readonly status?: string
	) {
	}

}