Back

Angular - Task list

There are no items to show.

Angular - Source Code

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

import { GuiListFieldType, GuiListField } from '@generic-ui/ngx-list';


@Component({
	template: './component.html',
	changeDetection: ChangeDetectionStrategy.OnPush,
	encapsulation: ViewEncapsulation.None
})
export class TaskListComponent implements OnInit {

	source: ReadonlyArray<Task> = [];

	fields: ReadonlyArray<GuiListField> = [{
		field: 'name',
		type: GuiListFieldType.STRING
	},
		{
			field: 'description',
			type: GuiListFieldType.STRING
		}];

	searching = {
		enabled: true,
		placeholder: 'Find task'
	};

	constructor(private readonly cd: ChangeDetectorRef,
				private readonly taskRepository: TaskRepository) {
	}

	ngOnInit() {

		this.taskRepository
			.onTasks()
			.subscribe((tasks: ReadonlyArray<Task>) => {
				this.source = tasks;
				this.cd.detectChanges();
			});
	}

	changeStatus(id: number, status: string): void {
		this.taskRepository.changeStatus(id, status);
	}

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

}
<gui-list class="task-list-example"
		  [searching]="searching"
		  [fields]="fields"
		  [source]="source">

	<gui-list-item>

		<ng-template let-item="item">

			<div class="task__item"
				 [ngClass]="{
						'task__book': item.type === 'Books',
						'task__test': item.type === 'Test',
						'task__idea': item.type === 'Idea',
						'task__brush': item.type === 'Brush'
						}">

				<div class="task__icon"
					 (click)="onIcon(item)">
					<img src="{{item.src}}">
				</div>

				<div class="task__info">
					<div class="task__name">
						{{item.name}}
						<span class="task__status">
							{{item.status}}
						</span>
					</div>

					<div class="task__desc">{{item.description}}</div>
				</div>

				<div class="task__panel">

					<div class="task__remove" (click)="removeTask(item.id)">
						<img src="./assets/example/task-list/delete.png" />
					</div>

					<gui-dropdown [dropdownText]="'...'" [arrow]="false" [width]="160">
						<gui-dropdown-item (click)="changeStatus(item.id, 'Open')">
							Open
						</gui-dropdown-item>
						<gui-dropdown-item (click)="changeStatus(item.id, 'In progress')">
							In progress
						</gui-dropdown-item>
						<gui-dropdown-item (click)="changeStatus(item.id, 'Closed')">
							Close
						</gui-dropdown-item>
					</gui-dropdown>
				</div>

			</div>

		</ng-template>


	</gui-list-item>

</gui-list>
$blue: #5f80f5;
$yellow: #F6DA6A;
$red: #FF7E7D;
$green: #69cda1;
$gray: #e8e7ed;

$blue-light: lighten($blue, 28);
$yellow-light: lighten($yellow, 25);
$red-light: lighten($red, 22);
$green-light: lighten($green, 32);
$gray-light: darken($gray, 20);

.task-list-example {

	.gui-list-item {

		background: white;
		border-radius: 12px;
		box-shadow: none;
		border-color: rgba(0, 0, 0, 0.01);

		padding: 24px 0 24px 24px;
	}

	.gui-list-item-container {
		padding: 0;
	}

	.gui-dropdown-container {
		border: 0 !important;
		width: auto !important;

	}

	.gui-dropdown-text {
		font-weight: bold;
		font-size: 24px !important;
		color: #777;

		&:hover {
			color: black;
		}
	}

	.gui-search-bar {
		background: transparent;

		form {
			background: transparent;
		}

		input {
			border: 2px solid $gray;
			border-radius: 8px;
			color: $gray-light;
			padding-bottom: 12px;
			padding-top: 12px;

			&::placeholder {
				color: $gray-light;
			}
		}
	}

	.task__remove {
		cursor: pointer;
		margin-top: 6px;
		margin-right: 2px;
	}

	.task__item {
		display: flex;
	}

	.task__icon {
		display: flex;
		align-items: center;
		justify-content: center;

		height: 72px;
		width: 72px;
		flex-basis: 72px;
		margin-right: 24px;

		background: #fef5f6;
		border-radius: 8px;
	}

	.task__book {
		.task__icon {
			background: $green-light;
		}

		.task__status {
			border-color: $green;
		}
	}

	.task__test {
		.task__icon {
			background: $blue-light;
		}

		.task__status {
			border-color: $blue;
		}
	}

	.task__idea {
		.task__icon {
			background: $yellow-light;
		}

		.task__status {
			border-color: $yellow;
		}
	}

	.task__brush {
		.task__icon {
			background: $red-light;
		}

		.task__status {
			border-color: $red;
		}
	}

	.task__info {
		flex-basis: 200px;
		flex-grow: 2;
	}

	.task__status {
		border: 2px solid #ff98a2;
		border-radius: 10px;
		font-size: 12px;
		padding: 2px 12px;
		margin-left: 12px;
	}

	.task__panel {
		align-items: flex-start;
		display: flex;
		justify-content: flex-end;
		flex-basis: 200px;
		width: 200px;
	}

	.task__name {
		color: #555;
		font-size: 18px;
		padding-bottom: 12px;
		display: flex;
		align-items: center;
	}

	.task__desc {
		color: #aaa;
		font-size: 15px;
		height: 36px;
		overflow: hidden;
		text-wrap: normal;
	}

	.task__panel .gui-dropdown-text {
		writing-mode: vertical-lr;
	}

}

export class Task {

	public readonly src: string;

	constructor(
		public readonly id: number,
		public name: string,
		public description: string,
		public status: string,
		public type: string
	) {

		switch (type) {

			case 'Books':
				this.src = './assets/books.png';
				break;

			case 'Idea':
				this.src = './assets/idea.png';
				break;

			case 'Test':
				this.src = './assets/test-tube.png';
				break;

			case 'Brush':
				this.src = './assets/brush.png';
				break;
		}

	}
}