ing

@overflow/sensor/component/setting/target-selector/target-selector.component.html

@@ -0,0 +1,11 @@
+<div *ngIf="preTarget === null" class="ui-width-100-">
+  <p-orderList [value]="targets" [listStyle]="{'height':'200px'}" [responsive]="true" filterBy="displayName" 
+  (onSelectionChange)="onSelectionChange($event)" class="ui_orderlist_controls_none">
+    <ng-template let-target pTemplate="item">
+      <div class="ui-helper-clearfix">
+        <img src="assets/demo/images/car/BMW.gif" style="display:inline-block;margin:2px 0 2px 2px" />
+        <div style="font-size:14px;float:right;margin:15px 5px 0 0">{{ target.displayName }}</div>
+      </div>
+    </ng-template>
+  </p-orderList>
+</div>

@overflow/sensor/component/setting/target-selector/target-selector.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TargetSelectorComponent } from './target-selector.component';
+
+describe('FilterComponent', () => {
+  let component: TargetSelectorComponent;
+  let fixture: ComponentFixture<TargetSelectorComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ TargetSelectorComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TargetSelectorComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

@overflow/sensor/component/setting/target-selector/target-selector.component.ts

@@ -0,0 +1,92 @@
+import { Component, OnInit, Output, EventEmitter, Input, AfterContentInit, OnChanges } from '@angular/core';
+import { Router } from '@angular/router';
+import { Target } from '@overflow/commons-typescript/model/target';
+import { RPCClientError } from '@loafer/ng-rpc';
+import { Domain } from '@overflow/commons-typescript/model/domain';
+import { AuthSelector } from '@overflow/member/store';
+import * as ListStore from '@overflow/infra/store/list';
+import { ListSelector } from '@overflow/infra/store';
+import { Store, select } from '@ngrx/store';
+// import { Page, PageParams } from 'app/commons/model';
+import { SelectItem } from 'primeng/primeng';
+
+@Component({
+    selector: 'of-target-selector',
+    templateUrl: './target-selector.component.html',
+})
+export class TargetSelectorComponent implements OnInit, OnChanges {
+
+    targets$ = this.store.pipe(select(ListSelector.select('page')));
+
+    @Input() preTarget: Target = null;
+    @Input() visible;
+    @Output() targetSelected = new EventEmitter<Target>();
+    targets: Target[] = null;
+
+    constructor(
+        private router: Router,
+        private store: Store<ListStore.State>
+    ) { }
+
+    ngOnInit() {
+        // this.targets$.subscribe(
+        //     (page: Page) => {
+        //         if (page !== null) {
+        //             this.convertInfraToTarget(page);
+        //         }
+        //     },
+        //     (error: RPCClientError) => {
+        //         console.log(error.response.message);
+        //     }
+        // );
+    }
+
+    ngOnChanges(changes) {
+        this.targets = [];
+        if (this.preTarget === null) {
+            this.getTargetList();
+        } else {
+            this.targets.push(this.preTarget);
+            this.targetSelected.emit(this.preTarget);
+        }
+    }
+
+    // convertInfraToTarget(page: Page) {
+    //     for (const infra of page.content) {
+    //         this.targets.push(infra.target);
+    //     }
+    // }
+
+    getTargetList() {
+        // this.store.select(AuthSelector.select('domain')).subscribe(
+        //     (domain: Domain) => {
+        //         const pageParams: PageParams = {
+        //             pageNo: '0',
+        //             countPerPage: '9999',
+        //             sortCol: 'id',
+        //             sortDirection: 'descending'
+        //         };
+        //         this.store.dispatch(new ListStore.ReadAllByDomain({ domain, pageParams }));
+        //     },
+        //     (error) => {
+        //         console.log(error);
+        //     }
+        // );
+
+        // Temporary data
+        for (let i = 0; i < 10; i++) {
+            const t: Target = {
+                id: i,
+                displayName: 'DisplayName' + i,
+                createDate: new Date(),
+                description: 'Description' + i,
+            };
+            this.targets.push(t);
+        }
+    }
+
+    onSelectionChange(event) {
+        this.targetSelected.emit(event.value[0]);
+    }
+
+}