feat(breadcurmb): edit mode, double click to edit path. double again,…

… back to normal

src/app/pages/manager/breadcrumb/breadcrumb.component.ts

@@ -1,10 +1,17 @@
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { NbGlobalLogicalPosition, NbToastrService } from '@nebular/theme';
 import { NavigationFlow, NavigationFlowOutNode } from '../../../@dataflow/extra';
 
 @Component({
 	selector: 'app-manager-breadcrumb',
 	template: `
-		<ol class="breadcrumb rng-noselect" style="flex-wrap: nowrap; overflow-x: auto;">
+		<ol
+			class="breadcrumb rng-noselect"
+			style="flex-wrap: nowrap; overflow-x: auto;"
+			(click)="editTip()"
+			*ngIf="!editMode"
+			(dblclick)="editMode = !editMode"
+		>
 			<li class="breadcrumb-item home">
 				<a (click)="jump.emit({})" *ngIf="remote"> <nb-icon icon="home-outline"></nb-icon> </a>
 				<nb-icon icon="home-outline" *ngIf="!remote"></nb-icon>
@@ -26,13 +33,27 @@ import { NavigationFlow, NavigationFlowOutNode } from '../../../@dataflow/extra'
 				<span class="active">{{ pathSurfix }}</span>
 			</li>
 		</ol>
+		<input
+			*ngIf="editMode"
+			nbInput
+			class="editor"
+			(dblclick)="editMode = !editMode"
+			fullWidth
+			[(ngModel)]="fullPath"
+			(keyup.enter)="editorJump()"
+		/>
 	`,
 	styles: [
 		`
 			.breadcrumb {
 				margin-bottom: 0;
 				width: -webkit-fill-available;
 				white-space: nowrap;
+				cursor: text;
+			}
+			.editor {
+				width: -webkit-fill-available;
+				/* background-color: #e9ecef; */
 			}
 			li {
 				display: flow-root;
@@ -58,8 +79,12 @@ import { NavigationFlow, NavigationFlowOutNode } from '../../../@dataflow/extra'
 	],
 })
 export class BreadcrumbComponent implements OnInit {
+	constructor(private toastrService: NbToastrService) {}
+
+	private static tipable = true;
 	remote: string;
 	path: string;
+	fullPath: string;
 	pathPrefix: string[];
 	pathSurfix: string;
 
@@ -68,7 +93,38 @@ export class BreadcrumbComponent implements OnInit {
 
 	@Output() jump = new EventEmitter<NavigationFlowOutNode>();
 
-	constructor() {}
+	editMode = false;
+	editTip() {
+		if (BreadcrumbComponent.tipable) {
+			this.toastrService.default('Edit Mode will be actived after double click.', 'Breadcurmb', {
+				position: NbGlobalLogicalPosition.BOTTOM_END,
+				icon: 'bulb',
+				duration: 5000,
+			});
+			BreadcrumbComponent.tipable = false;
+		}
+	}
+
+	editorJump() {
+		// Parse fullPath
+		if (typeof this.fullPath === 'string') {
+			if (this.fullPath !== '') {
+				const colon = this.fullPath.indexOf(':');
+				if (colon > -1) {
+					this.remote = this.fullPath.substring(0, colon);
+					this.path = this.fullPath.substring(colon + 1);
+					// remote:path/to/dir/ is error.
+					if (this.path.length > 1 && this.path.endsWith('/'))
+						this.path = this.path.slice(0, this.path.length - 1);
+				} else {
+					this.remote = this.fullPath;
+					this.path = '';
+				}
+				this.jump.emit({ remote: this.remote, path: this.path });
+			} else if (this.remote && this.remote !== '') this.jump.emit({});
+		}
+		this.editMode = !this.editMode;
+	}
 
 	genAddr(i: number): NavigationFlowOutNode {
 		const path = this.pathPrefix.slice(0, i + 1).join('/');
@@ -90,6 +146,7 @@ export class BreadcrumbComponent implements OnInit {
 			this.remote = x[0].remote;
 			[this.pathPrefix, this.pathSurfix] = this.splitPath(x[0].path);
 			this.path = x[0].path;
+			this.fullPath = `${this.remote ? this.remote + ':' : ''}${this.path ? this.path : ''}`;
 		});
 	}
 }

src/app/pages/manager/manager.module.ts

@@ -1,6 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
+import { FormsModule } from '@angular/forms';
 import {
 	NbAccordionModule,
 	NbActionsModule,
@@ -73,6 +74,7 @@ import { TasksDialogComponent } from './tasks/tasks.dialog';
 		ChartsModule,
 		FileSaverModule,
 		RngModule,
+		FormsModule,
 	],
 })
 export class ManagerModule {}