discovery

@overflow/discovery/component/discovery/service-selector/service-selector.component.html

@@ -1,3 +1,21 @@
-<p-listbox [options]="metaCrawlers$ | async" [(ngModel)]="selected" multiple="multiple" checkbox="checkbox" filter="filter" optionLabel="description"
-  metaKeySelection="true" (onChange)="onChange($event)" [style]="{'width':'100%'}" [listStyle]="{'max-height':'250px'}">
-</p-listbox>
+<div *ngIf="!disabled">
+    <of-error-message [error]="error$ | async" [closable]="false"></of-error-message>
+    <of-block-progressbar [target]="content" [pending]="pending$ | async"></of-block-progressbar>
+    <p-panel #content [showHeader]="false" class="block-panel">
+        <div class="ui-g" dir="rtl">
+            <a style="cursor: pointer" (click)="onUnselectAll()">Unselect All</a>
+            <a style="cursor: pointer" (click)="onSelectAll()">Select All</a>
+        </div>
+
+        <p-table selectionMode="multiple" [scrollable]="true" scrollHeight="200px" [value]="metaCrawlers" [(selection)]="includeServices"
+            dataKey="id" (onRowSelect)="onSelect($event.data)" (onRowUnselect)="onUnselect($event.data)">
+            <ng-template pTemplate="body" let-rowData let-columns="columns">
+                <tr [pSelectableRow]="rowData">
+                    <td>
+                        {{rowData.description}}
+                    </td>
+                </tr>
+            </ng-template>
+        </p-table>
+    </p-panel>
+</div>

@overflow/discovery/component/discovery/service-selector/service-selector.component.ts

@@ -14,38 +14,37 @@ import { catchError, exhaustMap, map, tap } from 'rxjs/operators';
 import { RPCClientError } from '@loafer/ng-rpc';
 import { MetaCrawler } from '@overflow/commons-typescript/model/meta';
 
-import { MetaCrawlerService } from '../../../../meta/service/meta-crawler.service';
+import { MetaCrawlerService } from '@overflow/meta/service/meta-crawler.service';
 
 @Component({
   selector: 'of-service-selector',
   templateUrl: './service-selector.component.html',
 })
 export class ServiceSelectorComponent implements OnInit, AfterContentInit, OnDestroy {
-  @Output() crawlerSelected = new EventEmitter<MetaCrawler>();
-  @Input() includeServices;
+  includeServices: MetaCrawler[];
+
+  @Output() change = new EventEmitter<MetaCrawler[]>();
   @Input() disabled: boolean;
 
-  metaCrawlers$: Observable<MetaCrawler[]>;
+  metaCrawlers: MetaCrawler[];
   pending$: Observable<boolean>;
   error$: Observable<any>;
 
-  selected = [];
-
   constructor(
     protected store: Store<any>,
     protected metaCrawlerService: MetaCrawlerService,
   ) {
-
+    this.includeServices = [];
   }
 
   ngOnInit() {
-    this.metaCrawlers$ = this.metaCrawlerService.readAll()
+    this.metaCrawlerService.readAll()
       .pipe(
         tap(() => {
           this.pending$ = of(true);
         }),
         map((metaCrawlers: MetaCrawler[]) => {
-          return metaCrawlers;
+          this.metaCrawlers = metaCrawlers;
         }),
         catchError(error => {
           this.error$ = of(error);
@@ -53,8 +52,10 @@ export class ServiceSelectorComponent implements OnInit, AfterContentInit, OnDes
         }),
         tap(() => {
           this.pending$ = of(false);
+          this.includeServices = this.metaCrawlers.slice();
+          this.change.emit(this.includeServices);
         }),
-      ).take(1);
+    ).take(1).subscribe();
   }
 
   ngOnDestroy() {
@@ -65,9 +66,24 @@ export class ServiceSelectorComponent implements OnInit, AfterContentInit, OnDes
     // this.listStore.dispatch(new ListStore.ReadAll());
   }
 
-  onChange(e) {
-    this.selected.push(e.value);
-    console.log(e);
+  onSelectAll() {
+    this.includeServices = [];
+    this.metaCrawlers.forEach((value) => {
+      this.includeServices.push(value);
+    });
+    this.change.emit(this.includeServices);
+  }
+
+  onUnselectAll() {
+    this.includeServices = [];
+    this.change.emit(this.includeServices);
+  }
+
+  onSelect(crawler: MetaCrawler) {
+    this.change.emit(this.includeServices);
+  }
+  onUnselect(crawler: MetaCrawler) {
+    this.change.emit(this.includeServices);
   }
 
 }

@overflow/discovery/component/search-config.component.html

@@ -84,7 +84,7 @@
   </div>
 
   <div class="ui-g-12 ui-g-nopad">
-    <of-service-selector [disabled]="!serviceChecked" [(includeServices)]="includeServices"></of-service-selector>
+    <of-service-selector [disabled]="!serviceChecked" (change)="includeServices = $event"></of-service-selector>
   </div>
 
   <div class="ui-g-12" dir="rtl">

@overflow/discovery/component/search-config.component.ts

@@ -7,6 +7,7 @@ import * as CIDR from 'ip-cidr';
 import * as ipRangeCheck from 'ip-range-check';
 import { DiscoverPort, DiscoverService, DiscoverZone } from '@overflow/commons-typescript/model/discovery';
 import { Checkbox } from 'primeng/primeng';
+import { MetaCrawler } from '@overflow/commons-typescript/model/meta';
 
 @Component({
   selector: 'of-discovery-search-config',
@@ -101,7 +102,7 @@ export class SearchConfigComponent implements OnChanges {
     let discoverService: DiscoverService = null;
 
     if (this.serviceChecked) {
-      const services = new Array();
+      const services = [];
       for (const service of this.includeServices) {
         services.push(service.description);
       }
@@ -128,6 +129,7 @@ export class SearchConfigComponent implements OnChanges {
       },
     };
 
+    console.log(discoverZone);
     this.requestDiscovery.emit(discoverZone);
   }