JenHsuan

import { ChangeDetectorRef, Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';

import { Observable, Subject, debounceTime, distinctUntilChanged, filter, map, switchMap, takeUntil, tap } from 'rxjs';
import * as _ from 'lodash';

type ValueType = TopologyController;

@Component({
  selector: 'app-topology-controlbar-assistant',
  templateUrl: './topology-controlbar-assistant.component.html',

JenHsuan

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements AfterViewInit{
  protected undoConfigurationSubject = new BehaviorSubject<TopologyCommand | null>(null);
  undoConfiguration$ = this.undoConfigurationSubject.asObservable();

  protected resetConfigurationSubject = new BehaviorSubject<boolean | null>(null);

JenHsuan

<div class="configuration-container">
  <div class="field-panel">
    <div class="name">
      Asstitant Displaying
    </div>
    <div class="value">
      <app-topology-controlbar-assistant
        [undoConfiguration$]="undoConfiguration$"
        [resetConfiguration$]="resetConfiguration$">
      </app-topology-controlbar-assistant>

JenHsuan

import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, ViewChild } from '@angular/core';

import { BehaviorSubject, Subject, delay, filter, switchMap, takeUntil, tap } from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements AfterViewInit{

JenHsuan

<div class="configuration-container">
  <div class="field-panel">
    <div class="name">
      Asstitant Displaying
    </div>
    <div class="value">
      <app-topology-controlbar-assistant>
      </app-topology-controlbar-assistant>
    </div>
  </div>

JenHsuan

import { ChangeDetectorRef, Component, ElementRef, Input, ViewChild } from '@angular/core';

import * as d3 from 'd3';
import { BehaviorSubject, Subject, delay, filter, switchMap, takeUntil, tap } from 'rxjs';

@Component({
  selector: 'app-topology',
  templateUrl: './topology.component.html',
  styleUrls: ['./topology.component.scss']
})

JenHsuan

@Injectable({
  providedIn: 'root'
})
export class TopologyControlbarAssistantService {
  list(): Observable<TopologyController[]> {
    const groupingItems = _.cloneDeep(topologyControllerAssistantItemsTemplate);
    return of(groupingItems).pipe(
      map(data => this.convertDataList(data)),
    );
  }

JenHsuan

import { ChangeDetectorRef, Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';

import { Observable, Subject, debounceTime, distinctUntilChanged, filter, map, switchMap, takeUntil, tap } from 'rxjs';
import * as _ from 'lodash';

type ValueType = TopologyController;

@Component({
  selector: 'app-topology-controlbar-assistant',
  templateUrl: './topology-controlbar-assistant.component.html',

JenHsuan

<ng-select 
  [items]="options"
  [(ngModel)]="selection"
  bindLabel="name"
  (close)="finalizeSelection()"
  ...
>
</ng-select>

JenHsuan

import * as _ from 'lodash';

import { TopologyAssistantType, TopologyContollerType, TopologyController, TopologyStatusType, topologyControllerAssistantItemsTemplate, topologyControllerGroupingItemsTemplate } from "../topology-controlbar/service/topology-controller.domain";
import { TopologyNodeType } from './topology.domain';

export class TopologyCommand implements TopologyICommand {
  receiver: TopologyCommandReceiver;
  statusType: TopologyStatusType;
  
  configurationItems = _.cloneDeep(