Angular - Task list
There are no items to show.
Angular - Source Code
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;
}
}
}