From 749d31b170bf7427bf7b26ad18ce6bab1e57e076 Mon Sep 17 00:00:00 2001
From: ElonH <elonhhuang@gmail.com>
Date: Mon, 1 Jun 2020 16:17:10 +0800
Subject: [PATCH] feat(task-component): a task manager

---
 src/app/pages/manager/manager.component.ts    |  38 +++++-
 src/app/pages/manager/manager.module.ts       |   4 +
 .../manager/{ => tasks}/task.service.spec.ts  |   0
 .../pages/manager/{ => tasks}/task.service.ts |  46 ++++++-
 .../manager/tasks/tasks.component.spec.ts     |  27 ++++
 .../pages/manager/tasks/tasks.component.ts    | 116 ++++++++++++++++++
 6 files changed, 222 insertions(+), 9 deletions(-)
 rename src/app/pages/manager/{ => tasks}/task.service.spec.ts (100%)
 rename src/app/pages/manager/{ => tasks}/task.service.ts (72%)
 create mode 100644 src/app/pages/manager/tasks/tasks.component.spec.ts
 create mode 100644 src/app/pages/manager/tasks/tasks.component.ts

diff --git a/src/app/pages/manager/manager.component.ts b/src/app/pages/manager/manager.component.ts
index 3ed752f..0b71a7d 100644
--- a/src/app/pages/manager/manager.component.ts
+++ b/src/app/pages/manager/manager.component.ts
@@ -5,16 +5,12 @@ import { CombErr } from 'src/app/@dataflow/core';
 import { map, withLatestFrom } from 'rxjs/operators';
 import { HomeModeComponent } from './homeMode/homeMode.component';
 import { NbDialogService } from '@nebular/theme';
-import {
-	OperationsMkdirFlow,
-	OperationsMkdirFlowInNode,
-	OperationsCopyfileFlow,
-} from 'src/app/@dataflow/rclone';
+import { OperationsMkdirFlow, OperationsMkdirFlowInNode } from 'src/app/@dataflow/rclone';
 import { ConnectionService } from '../connection.service';
 import { NbToastrService } from '@nebular/theme';
 import { FileModeComponent } from './fileMode/fileMode.component';
 import { ClipboardService } from './clipboard/clipboard.service';
-import { TaskService } from './task.service';
+import { TaskService } from './tasks/task.service';
 
 @Component({
 	selector: 'app-manager',
@@ -91,6 +87,27 @@ import { TaskService } from './task.service';
 						</nb-card-body>
 					</nb-card>
 				</ng-template>
+				<nb-action
+					*ngIf="orderCnt !== 0"
+					style="padding-right: 1.5rem;padding-left: 0.5rem;"
+					(click)="dialog(tasksDialog)"
+				>
+					<nb-icon icon="email-outline" style="font-size: 1.5rem"> </nb-icon>
+					<nb-badge [text]="orderCnt" status="info" position="top end"></nb-badge>
+				</nb-action>
+				<ng-template #tasksDialog>
+					<nb-card class="clipboard">
+						<nb-card-header>
+							<nb-action>
+								<nb-icon icon="email-outline" class="clipboard-icon"></nb-icon>
+							</nb-action>
+							Tasks
+						</nb-card-header>
+						<nb-card-body>
+							<manager-tasks> </manager-tasks>
+						</nb-card-body>
+					</nb-card>
+				</ng-template>
 			</nb-actions>
 		</nb-layout-header>
 		<!-- <nb-sidebar fixed right>
@@ -241,11 +258,20 @@ export class ManagerComponent implements OnInit {
 		this.pasteTrigger.next(1);
 	}
 
+	public orderCnt = 0;
+	private tasksDeploy() {
+		this.taskService.detail$.getOutput().subscribe((x) => {
+			if (x[1].length !== 0) return;
+			this.orderCnt = x[0].order.size + x[0].failure.size;
+		});
+	}
+
 	ngOnInit(): void {
 		this.navDeploy();
 		this.mkdirDeploy();
 		this.clipboardDeploy();
 		this.pasteDeploy();
+		this.tasksDeploy();
 	}
 
 	dialog(dialog: TemplateRef<any>) {
diff --git a/src/app/pages/manager/manager.module.ts b/src/app/pages/manager/manager.module.ts
index f01a87a..9153c38 100644
--- a/src/app/pages/manager/manager.module.ts
+++ b/src/app/pages/manager/manager.module.ts
@@ -17,6 +17,7 @@ import {
 	NbTooltipModule,
 	NbBadgeModule,
 	NbTabsetModule,
+	NbAccordionModule,
 } from '@nebular/theme';
 import { BreadcrumbComponent } from './breadcrumb/breadcrumb.component';
 import { HomeModeComponent } from './homeMode/homeMode.component';
@@ -26,6 +27,7 @@ import { TableModule } from 'ngx-easy-table';
 import { ListViewComponent } from './fileMode/listView/listView.component';
 import { ClipboardComponent } from './clipboard/clipboard.component';
 import { ClipboardRemotesTableComponent } from './clipboard/clipboard-remotes-table/clipboard-remotes-table.component';
+import { TasksComponent } from './tasks/tasks.component';
 
 @NgModule({
 	declarations: [
@@ -37,6 +39,7 @@ import { ClipboardRemotesTableComponent } from './clipboard/clipboard-remotes-ta
 		ListViewComponent,
 		ClipboardComponent,
 		ClipboardRemotesTableComponent,
+		TasksComponent,
 	],
 	imports: [
 		CommonModule,
@@ -55,6 +58,7 @@ import { ClipboardRemotesTableComponent } from './clipboard/clipboard-remotes-ta
 		NbTooltipModule,
 		NbBadgeModule,
 		NbTabsetModule,
+		NbAccordionModule,
 	],
 })
 export class ManagerModule {}
diff --git a/src/app/pages/manager/task.service.spec.ts b/src/app/pages/manager/tasks/task.service.spec.ts
similarity index 100%
rename from src/app/pages/manager/task.service.spec.ts
rename to src/app/pages/manager/tasks/task.service.spec.ts
diff --git a/src/app/pages/manager/task.service.ts b/src/app/pages/manager/tasks/task.service.ts
similarity index 72%
rename from src/app/pages/manager/task.service.ts
rename to src/app/pages/manager/tasks/task.service.ts
index 96ac448..ee3d44a 100644
--- a/src/app/pages/manager/task.service.ts
+++ b/src/app/pages/manager/tasks/task.service.ts
@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
 import { OperationsCopyfileFlow, OperationsCopyfileFlowInNode } from 'src/app/@dataflow/rclone';
-import { ClipboardService, Clipboard, ClipboardItem } from './clipboard/clipboard.service';
+import { ClipboardService, Clipboard, ClipboardItem } from '../clipboard/clipboard.service';
 import { Subject, from, Observable } from 'rxjs';
 import {
 	withLatestFrom,
@@ -10,13 +10,19 @@ import {
 	filter,
 	map,
 	zip,
-	debounceTime,
 	mapTo,
+	sampleTime,
 } from 'rxjs/operators';
-import { ConnectionService } from '../connection.service';
+import { ConnectionService } from '../../connection.service';
 import { CombErr, NothingFlow } from 'src/app/@dataflow/core';
 import { NavigationFlowOutNode } from 'src/app/@dataflow/extra';
 
+export interface TasksPoolNode {
+	failure: Clipboard;
+	order: Clipboard;
+}
+export abstract class TasksPoolFlow extends NothingFlow<TasksPoolNode> {}
+
 @Injectable({
 	providedIn: 'root',
 })
@@ -92,13 +98,47 @@ export class TaskService {
 				this.tasksPool.pop(y.srcRemote, y.srcItem.Path); // TODO: replase as del rather pop, for perf
 				this.emptySlot++;
 				if (x[1].length !== 0) this.tasksFailure.add(y.oper, y.srcRemote, y.srcItem, y.dst);
+				this.detailTrigger.next(1);
 				this.postTrigger.next(1);
 			});
 	}
 
+	private detailTrigger = new Subject<number>();
+	public detail$: TasksPoolFlow;
+	private deployDetail() {
+		const outer = this;
+		this.detail$ = new (class extends TasksPoolFlow {
+			public prerequest$: Observable<CombErr<TasksPoolNode>> = outer.detailTrigger.pipe(
+				sampleTime(1000),
+				mapTo<number, CombErr<TasksPoolNode>>([
+					{
+						order: outer.tasksPool,
+						failure: outer.tasksFailure,
+					},
+					[],
+				])
+			);
+		})();
+		this.detail$.deploy();
+	}
+
+	public retryFailureTasks() {
+		this.tasksFailure.values.forEach((v) => {
+			this.tasksPool.add(v.oper, v.srcRemote, v.srcItem, v.dst);
+		});
+		this.removeFailureTasks();
+		this.postTrigger.next(1);
+	}
+
+	public removeFailureTasks() {
+		this.tasksPool.clear();
+		this.detailTrigger.next(1);
+	}
+
 	constructor(private cbService: ClipboardService, private connectService: ConnectionService) {
 		this.deployCreate();
 		this.deployPost();
 		this.deployCopyFile();
+		this.deployDetail();
 	}
 }
diff --git a/src/app/pages/manager/tasks/tasks.component.spec.ts b/src/app/pages/manager/tasks/tasks.component.spec.ts
new file mode 100644
index 0000000..aa83352
--- /dev/null
+++ b/src/app/pages/manager/tasks/tasks.component.spec.ts
@@ -0,0 +1,27 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { TasksComponent } from './tasks.component';
+
+describe('TasksComponent', () => {
+	let component: TasksComponent;
+	let fixture: ComponentFixture<TasksComponent>;
+
+	beforeEach(async(() => {
+		TestBed.configureTestingModule({
+			declarations: [TasksComponent],
+		}).compileComponents();
+	}));
+
+	beforeEach(() => {
+		fixture = TestBed.createComponent(TasksComponent);
+		component = fixture.componentInstance;
+		fixture.detectChanges();
+	});
+
+	it('should create', () => {
+		expect(component).toBeTruthy();
+	});
+});
diff --git a/src/app/pages/manager/tasks/tasks.component.ts b/src/app/pages/manager/tasks/tasks.component.ts
new file mode 100644
index 0000000..0fc3f2d
--- /dev/null
+++ b/src/app/pages/manager/tasks/tasks.component.ts
@@ -0,0 +1,116 @@
+import { Component, OnInit } from '@angular/core';
+import { TaskService } from './task.service';
+import { Config, Columns } from 'ngx-easy-table';
+import { ClipboardItem, IManipulate } from '../clipboard/clipboard.service';
+
+@Component({
+	selector: 'manager-tasks',
+	template: `
+		<nb-accordion multi>
+			<!-- <nb-accordion-item *ngIf="orderSize !== 0"> -->
+			<nb-accordion-item>
+				<nb-accordion-item-header>
+					Order
+				</nb-accordion-item-header>
+				<nb-accordion-item-body>
+					<ngx-table
+						#orderTable
+						[configuration]="conf"
+						[data]="orderData"
+						id="order"
+						[columns]="columns"
+					>
+						<ng-template let-row let-rowIdx="index">
+							<td><nb-icon [icon]="manipulate2Icon(row.oper)"></nb-icon></td>
+							<td>{{ row.srcRemote }}</td>
+							<td>{{ row.srcItem.Path }}</td>
+							<td>{{ row.dst.remote }}</td>
+							<td>{{ row.dst.path }}</td>
+						</ng-template>
+					</ngx-table>
+				</nb-accordion-item-body>
+			</nb-accordion-item>
+
+			<nb-accordion-item *ngIf="failSize !== 0">
+				<nb-accordion-item-header>
+					Failure
+					<button nbButton ghost status="warning" class="right" (click)="retryFailure()">
+						Retry
+					</button>
+					<button nbButton ghost status="danger" class="rightest" (click)="removeFailure()">
+						Remove
+					</button>
+				</nb-accordion-item-header>
+				<nb-accordion-item-body>
+					<ngx-table
+						#failTasksTable
+						[configuration]="conf"
+						[data]="failData"
+						id="fail"
+						[columns]="columns"
+					>
+						<ng-template let-row let-rowIdx="index">
+							<td><nb-icon [icon]="manipulate2Icon(row.oper)"></nb-icon></td>
+							<td>{{ row.srcRemote }}</td>
+							<td>{{ row.srcItem.Path }}</td>
+							<td>{{ row.dst.remote }}</td>
+							<td>{{ row.dst.path }}</td>
+						</ng-template>
+					</ngx-table>
+				</nb-accordion-item-body>
+			</nb-accordion-item>
+		</nb-accordion>
+	`,
+	styles: [
+		`
+			.right {
+				margin-left: auto;
+			}
+			.rightest {
+				margin-right: auto;
+			}
+		`,
+	],
+})
+export class TasksComponent implements OnInit {
+	constructor(private service: TaskService) {}
+	public conf: Config;
+	public columns: Columns[] = [
+		{ key: 'oper', title: '', width: '3%' },
+		{ key: 'srcRemote', title: 'Source Remote', width: '10%' },
+		{ key: 'srcItem.Path', title: 'Source Path', width: '35%' },
+		{ key: 'dst.remote', title: 'Destination Remote', width: '10%' },
+		{ key: 'dst.path', title: 'Destination Path', width: '35%' },
+	];
+
+	orderSize = 0;
+	orderData: ClipboardItem[] = [];
+
+	failSize = 0;
+	failData: ClipboardItem[] = [];
+
+	ngOnInit() {
+		this.service.detail$.getOutput().subscribe((x) => {
+			if (x[1].length !== 0) return;
+			const order = x[0].order;
+			const fail = x[0].failure;
+			this.orderSize = order.size;
+			this.failSize = fail.size;
+			this.orderData = order.values;
+			this.failData = fail.values;
+		});
+	}
+
+	public manipulate2Icon(o: IManipulate): string {
+		if (o === 'del') return 'trash-2';
+		return o;
+	}
+
+	retryFailure() {
+		this.service.retryFailureTasks();
+	}
+
+	removeFailure() {
+		this.service.removeFailureTasks();
+	}
+}