feat(jobs): fetch group infomation and list it

ElonH · May 26, 2020 · b6f4cb9 · b6f4cb9
1 parent 6b02399
commit b6f4cb9
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 7 deletions.
diff --git a/src/app/pages/jobs/jobs.component.ts b/src/app/pages/jobs/jobs.component.ts
@@ -1,15 +1,34 @@
 import { Component, OnInit } from '@angular/core';
 import { Columns } from 'ngx-easy-table';
+import { ListGroupFlow } from 'src/app/@dataflow/rclone';
+import { Subject } from 'rxjs';
+import { combineLatest, map } from 'rxjs/operators';
+import { CurrentUserService } from '../current-user.service';
 
 @Component({
 	selector: 'app-jobs',
 	template: `
 		<nb-layout>
 			<nb-sidebar>
-				<nb-card-header> Groups </nb-card-header>
-				<nb-card-body>
-					123
-				</nb-card-body>
+				<nb-card-header>
+					Groups
+					<nb-icon icon="refresh" (click)="refreshList()"></nb-icon>
+				</nb-card-header>
+				<nb-list>
+					<nb-list-item
+						(click)="activateGroup('')"
+						[ngClass]="{ 'active-group': activeGroup === '' }"
+					>
+						[all]
+					</nb-list-item>
+					<nb-list-item
+						*ngFor="let item of groups"
+						(click)="activateGroup(item)"
+						[ngClass]="{ 'active-group': activeGroup === item }"
+					>
+						{{ item }}
+					</nb-list-item>
+				</nb-list>
 			</nb-sidebar>
 
 			<nb-layout-column style="padding: 0;">
@@ -69,18 +88,48 @@ import { Columns } from 'ngx-easy-table';
 			nb-card {
 				height: 100%;
 			}
+			.active-group {
+				background-color: lightcoral;
+			}
 		`,
 	],
 })
 export class JobsComponent implements OnInit {
+	public activeGroup: string = '';
+	public groups: string[] = [];
+
+	public activateGroup(group: string) {
+		this.activeGroup = group;
+	}
+
 	public columns: Columns[] = [
 		{ key: 'Name', title: 'Name' },
 		{ key: 'Size', title: 'Size' },
 		{ key: 'percentage', title: 'Percentage' },
 		{ key: 'speed', title: 'Speed' },
 		{ key: 'eta', title: 'eta' },
 	];
-	constructor() {}
+	constructor(private currUserService: CurrentUserService) {}
+
+	private listTrigger = new Subject<number>();
+	public listGroup$: ListGroupFlow;
+	ngOnInit(): void {
+		const outer = this;
+		this.listGroup$ = new (class extends ListGroupFlow {
+			public prerequest$ = outer.listTrigger.pipe(
+				combineLatest(outer.currUserService.currentUserFlow$.getOutput()),
+				map(([, node]) => node)
+			);
+		})();
+		this.listGroup$.deploy();
+		this.listGroup$.getOutput().subscribe((x) => {
+			if (x[1].length !== 0) return;
+			this.groups = x[0].groups;
+		});
+		this.listTrigger.next(1);
+	}
 
-	ngOnInit(): void {}
+	public refreshList() {
+		this.listTrigger.next(1);
+	}
 }
diff --git a/src/app/pages/jobs/jobs.module.ts b/src/app/pages/jobs/jobs.module.ts
@@ -3,7 +3,13 @@ import { CommonModule } from '@angular/common';
 
 import { JobsRoutingModule } from './jobs-routing.module';
 import { JobsComponent } from './jobs.component';
-import { NbSidebarModule, NbLayoutModule, NbCardModule } from '@nebular/theme';
+import {
+	NbSidebarModule,
+	NbLayoutModule,
+	NbCardModule,
+	NbListModule,
+	NbIconModule,
+} from '@nebular/theme';
 import { TableModule } from 'ngx-easy-table';
 
 @NgModule({
@@ -15,6 +21,8 @@ import { TableModule } from 'ngx-easy-table';
 		NbSidebarModule,
 		NbCardModule,
 		TableModule,
+		NbListModule,
+		NbIconModule,
 	],
 })
 export class JobsModule {}