aboutsummaryrefslogtreecommitdiffstats
path: root/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation
diff options
context:
space:
mode:
authorAhmedeldeeb50 <ahmed.eldeeb.ext@orange.com>2020-10-18 16:12:27 +0200
committerAhmedeldeeb50 <ahmed.eldeeb.ext@orange.com>2020-10-18 16:13:55 +0200
commit427d142fc68c98f92ad7d7d07e0554c602c19972 (patch)
tree87094621952f1e29b14d3fd7101dd18ae3a766b4 /cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation
parent5122cccd4434bd9ff8974a1fc3e04c7621c771d4 (diff)
Replace the existing mapping table with MatTable
Issue-ID: CCSDK-2920 Signed-off-by: Ahmedeldeeb50 <ahmed.eldeeb.ext@orange.com> Change-Id: Ib5f557ac038395416e61057b350a1b2f616299d3
Diffstat (limited to 'cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation')
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html281
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.ts87
2 files changed, 246 insertions, 122 deletions
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html
index 6dc120728..be84e7127 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html
@@ -130,6 +130,12 @@
</div>
<div id="mapping-table" [hidden]="resourceDictionaryRes?.length == 0" class="mapping-table mx-4 my-2">
+
+ <mat-form-field>
+ <mat-label>Filter</mat-label>
+ <input matInput (keyup)="initApplyFilter($event)" placeholder="Ex. Mia" #input>
+ </mat-form-field>
+
<div class="btn-group mapping-editBar" role="group">
<div class="custom-control custom-checkbox" tooltip="Select All" placement="bottom">
<input type="checkbox" (click)="selectAllProps()" class="custom-control-input"
@@ -146,53 +152,63 @@
<span>({{resourceDictionaryRes.length}} attributes in total)</span>
</div>
</div>
- <table datatable id="init-table" [dtOptions]="initDtOptions" [dtTrigger]="dtTrigger"
- class="row-border hover">
- <thead>
- <tr>
- <th></th>
- <th>Required</th>
- <th>Template Input</th>
- <th>Parameter Name</th>
- <th>Dictionary Name</th>
- <th>Dictionary Source</th>
- <th>Dependancies</th>
- <th>Default</th>
- <th>Velocity</th>
- <th>Data Type</th>
- <th>Entry Schema</th>
- </tr>
- </thead>
- <tbody>
- <tr *ngFor="let dict of resourceDictionaryRes;let i=index;trackBy: identify">
- <td>
+
+ <div class="mat-elevation-z8">
+ <table mat-table [dataSource]="initDataSource" matSort>
+
+ <!-- Required Column -->
+ <ng-container matColumnDef="select">
+ <th mat-header-cell *matHeaderCellDef> </th>
+ <td mat-cell *matCellDef="let dict">
<div class="custom-control custom-checkbox" tooltip="Select" placement="bottom">
<input type="checkbox" class="custom-control-input"
id="customCheck-{{dict.name}}" [checked]="selectedProps.has(dict.name)"
(click)="selectProp(dict.name)">
<label class="custom-control-label" for="customCheck-{{dict.name}}"></label>
</div>
- <!-- <input type="checkbox" [checked]="selectedProps.has(dict.name)"
- (click)="selectProp(dict.name)"></td> -->
</td>
- <td>
+ </ng-container>
+ <!-- Required Column -->
+ <ng-container matColumnDef="Required">
+ <th mat-header-cell *matHeaderCellDef> Required </th>
+ <td mat-cell *matCellDef="let dict">
<div class="custom-control custom-checkbox reuiredInput">
<input type="checkbox" class="custom-control-input" #requiredInput
- (click)="setProp(requiredInput,'required',i)"
+ (click)="setProp(requiredInput,'required',initDataSource.filteredData.indexOf(dict))"
id="requiredCheck-{{dict.name}}">
<label class="custom-control-label" for="requiredCheck-{{dict.name}}"></label>
</div>
</td>
- <td>
+ </ng-container>
+
+ <!-- Name Column -->
+ <ng-container matColumnDef="Template Input">
+ <th mat-header-cell *matHeaderCellDef> Template Input </th>
+ <td mat-cell *matCellDef="let dict">
<div class="custom-control custom-checkbox reuiredInput">
<input type="checkbox" class="custom-control-input" #tempInput
- (click)="setProp(tempInput,'input-param',i)" id="inputCheck-{{dict.name}}">
+ (click)="setProp(tempInput,'input-param',initDataSource.filteredData.indexOf(dict))"
+ id="inputCheck-{{dict.name}}">
<label class="custom-control-label" for="inputCheck-{{dict.name}}"></label>
</div>
</td>
- <td>{{ dict.name }}</td>
- <td>{{ dict.name }}</td>
- <td>
+ </ng-container>
+
+ <!-- Weight Column -->
+ <ng-container matColumnDef="name">
+ <th mat-header-cell *matHeaderCellDef mat-sort-header> Parameter Name </th>
+ <td mat-cell *matCellDef="let dict"> {{dict['name'] }} </td>
+ </ng-container>
+ <!-- Weight Column -->
+ <ng-container matColumnDef="Dictionary Name">
+ <th mat-header-cell *matHeaderCellDef mat-sort-header> Dictionary Name </th>
+ <td mat-cell *matCellDef="let dict"> {{dict['name'] }} </td>
+ </ng-container>
+
+ <!-- Symbol Column -->
+ <ng-container matColumnDef="dictionary-source">
+ <th mat-header-cell *matHeaderCellDef mat-sort-header> Dictionary Source </th>
+ <td mat-cell *matCellDef="let dict">
<select class="custom-select" (click)="selectSource(dict,$event)">
<option *ngFor="let val of dict.definition.sources | keyvalue">
{{initMap(dict.name,val)}}
@@ -200,93 +216,162 @@
</select>
</td>
- <td>
- <!-- <select class="custom-select">
- <option *ngFor="let val of getKeys(dependancies)">
- {{ getValue(dict.name)}}</option>
- </select> -->
+ </ng-container>
+
+
+ <!-- Symbol Column -->
+ <ng-container matColumnDef="dependencies">
+ <th mat-header-cell *matHeaderCellDef> Dependancies </th>
+ <td mat-cell *matCellDef="let dict">
<input type="text" class="form-control" [ngModel]="getValue(dict.name)">
- <!-- {{ dict.definition.sources }} -->
</td>
- <td>{{ dict.definition?.property?.default }}</td>
- <td><input type="text" class="form-control" #velocity
- (input)="setVelocity(i,velocity.value)"></td>
- <td>{{ dict.definition?.property?.type }}</td>
- <td>{{ dict.definition?.property['entry_schema'] }}</td>
+ </ng-container>
+
+ <!-- Symbol Column -->
+ <ng-container matColumnDef="default">
+ <th mat-header-cell *matHeaderCellDef mat-sort-header> Default </th>
+ <td mat-cell *matCellDef="let dict"> {{ dict.definition?.property?.default }} </td>
+ </ng-container>
+
+ <!-- Symbol Column -->
+ <ng-container matColumnDef="Velocity">
+ <th mat-header-cell *matHeaderCellDef mat-sort-header> Velocity </th>
+ <td mat-cell *matCellDef="let dict">
+ <input type="text" class="form-control" #velocity
+ (input)="setVelocity(initDataSource.filteredData.indexOf(dict),velocity.value)">
+ </td>
+
+
+
+ </ng-container>
+
+ <!-- Symbol Column -->
+ <ng-container matColumnDef="Data Type">
+ <th mat-header-cell *matHeaderCellDef mat-sort-header> Data Type </th>
+ <td mat-cell *matCellDef="let dict"> {{ dict.definition?.property?.type }} </td>
+ </ng-container>
+
+ <!-- Symbol Column -->
+ <ng-container matColumnDef="Entry Schema">
+ <th mat-header-cell *matHeaderCellDef mat-sort-header> Entry Schema </th>
+ <td mat-cell *matCellDef="let dict"> {{dict.definition?.property['entry_schema']}} </td>
+ </ng-container>
+
+ <tr mat-header-row *matHeaderRowDef="initColumn"></tr>
+ <tr mat-row *matRowDef="let row; columns: initColumn;"></tr>
+
+ <!-- Row shown when there is no matching data. -->
+ <tr class="mat-row" *matNoDataRow>
+ <td class="mat-cell" colspan="4">No data matching the filter "{{input.value}}"</td>
</tr>
- </tbody>
- </table>
- </div>
+ </table>
+ <mat-paginator [pageSizeOptions]="[10, 25,50, 100]"></mat-paginator>
+ </div>
+ </div>
+ <!------ View Table------->
<div id="mapping-table-res" [hidden]="mappingRes?.length == 0" class="mapping-table mx-4 my-2">
- <!-- <div class="btn-group mapping-editBar" role="group">
- <div class="custom-control custom-checkbox" tooltip="Select All" placement="bottom">
- <input type="checkbox" (click)="selectAllProps()" class="custom-control-input"
- id="customCheck2"
- [checked]="resourceDictionaryRes.length>0&&resourceDictionaryRes.length === this.selectedProps.size">
- <label class="custom-control-label" for="customCheck2"></label>
- </div>
- <button [disabled]="selectedProps.size <=0" type="button" class="btn" (click)="reMap()"
- tooltip="Re-mapping" placement="bottom"><i class="icon-autoMap"></i></button>
- <button [disabled]="selectedProps.size <=0" type="button" class="btn" (click)="removeProps()"
- tooltip="Remove" placement="bottom"><i class="icon-delete-sm"></i></button>
- </div> -->
- <table datatable id="res-table" [dtOptions]="dtOptions" [dtTrigger]="resTableDtTrigger"
- class="row-border hover">
- <thead>
- <tr>
- <!-- <th></th> -->
- <th>Required</th>
- <th>Template Input</th>
- <th>Parameter Name</th>
- <th>Dictionary Name</th>
- <th>Dictionary Source</th>
- <th>Dependancies</th>
- <th>Default</th>
- <th>Velocity</th>
- <th>Data Type</th>
- <th>Entry Schema</th>
- </tr>
- </thead>
- <tbody>
- <tr *ngFor="let dict of mappingRes">
- <!-- <td>
- <div class="custom-control custom-checkbox" tooltip="Select" placement="bottom">
- <input type="checkbox" class="custom-control-input"
- id="customCheck2-{{dict.name}}" [checked]="selectedProps.has(dict.name)"
- (click)="selectProp(dict.name)">
- <label class="custom-control-label" for="customCheck2-{{dict.name}}"></label>
- </div>
- </td> -->
- <td>
+
+
+ <mat-form-field>
+ <mat-label>Filter</mat-label>
+ <input matInput (keyup)="applyFilter($event)" placeholder="Ex. Mia" #input>
+ </mat-form-field>
+
+ <div class="mat-elevation-z8">
+ <table mat-table [dataSource]="dataSource" matSort>
+
+ <!-- Required Column -->
+ <ng-container matColumnDef="Required">
+ <th mat-header-cell *matHeaderCellDef> Required </th>
+ <td mat-cell *matCellDef="let dict">
<img *ngIf="dict?.property?.required" src="/assets/img/icon-required-yes.svg">
<img *ngIf="!dict?.property?.required" src="/assets/img/icon-required-no.svg">
</td>
- <td>
+ </ng-container>
+
+ <!-- Name Column -->
+ <ng-container matColumnDef="Template Input">
+ <th mat-header-cell *matHeaderCellDef> Template Input </th>
+ <td mat-cell *matCellDef="let dict">
<img *ngIf="dict['input-param']" src="/assets/img/icon-required-yes.svg">
<img *ngIf="!dict['input-param']" src="/assets/img/icon-required-no.svg">
</td>
- <td>{{ dict['name'] }}</td>
- <td>{{ dict['name'] }}</td>
- <td>
+ </ng-container>
+
+ <!-- Weight Column -->
+ <ng-container matColumnDef="name">
+ <th mat-header-cell *matHeaderCellDef mat-sort-header> Parameter Name </th>
+ <td mat-cell *matCellDef="let dict"> {{dict['name'] }} </td>
+ </ng-container>
+ <!-- Weight Column -->
+ <ng-container matColumnDef="Dictionary Name">
+ <th mat-header-cell *matHeaderCellDef mat-sort-header> Dictionary Name </th>
+ <td mat-cell *matCellDef="let dict"> {{dict['name'] }} </td>
+ </ng-container>
+
+ <!-- Symbol Column -->
+ <ng-container matColumnDef="dictionary-source">
+ <th mat-header-cell *matHeaderCellDef mat-sort-header> Dictionary Source </th>
+ <td mat-cell *matCellDef="let dict">
<input type="text" class="form-control" [value]="dict['dictionary-source']"
disabled>
-
</td>
- <td>
+ </ng-container>
+
+
+ <!-- Symbol Column -->
+ <ng-container matColumnDef="dependencies">
+ <th mat-header-cell *matHeaderCellDef> Dependancies </th>
+ <td mat-cell *matCellDef="let dict">
<input type="text" class="form-control" [value]="dict['dependencies']" disabled>
- <!-- {{ dict.definition.sources }} -->
</td>
- <td>{{ dict['property']['default'] }}</td>
- <td *ngIf="dict?.property?.metadata">
- {{dict?.property?.metadata['transform-template']}}
+ </ng-container>
+
+ <!-- Symbol Column -->
+ <ng-container matColumnDef="default">
+ <th mat-header-cell *matHeaderCellDef mat-sort-header> Default </th>
+ <td mat-cell *matCellDef="let dict"> {{dict['property']['default']}} </td>
+ </ng-container>
+
+ <!-- Symbol Column -->
+ <ng-container matColumnDef="Velocity">
+ <th mat-header-cell *matHeaderCellDef mat-sort-header> Velocity </th>
+ <td mat-cell *matCellDef="let dict">
+ <span *ngIf="dict?.property?.metadata">
+ {{dict?.property?.metadata['transform-template']}}
+ </span>
+ <span *ngIf="!dict?.property?.metadata"></span>
</td>
- <td *ngIf="!dict?.property?.metadata"></td>
- <td>{{ dict['property']['type'] }}</td>
- <td>{{ dict['property']['entry_schema'] }}</td>
+
+
+
+ </ng-container>
+
+ <!-- Symbol Column -->
+ <ng-container matColumnDef="Data Type">
+ <th mat-header-cell *matHeaderCellDef mat-sort-header> Data Type </th>
+ <td mat-cell *matCellDef="let dict"> {{ dict['property']['type'] }} </td>
+ </ng-container>
+
+ <!-- Symbol Column -->
+ <ng-container matColumnDef="Entry Schema">
+ <th mat-header-cell *matHeaderCellDef mat-sort-header> Entry Schema </th>
+ <td mat-cell *matCellDef="let dict"> {{dict['property']['entry_schema']}} </td>
+ </ng-container>
+
+ <tr mat-header-row *matHeaderRowDef="resColumns"></tr>
+ <tr mat-row *matRowDef="let row; columns: resColumns;"></tr>
+
+ <!-- Row shown when there is no matching data. -->
+ <tr class="mat-row" *matNoDataRow>
+ <td class="mat-cell" colspan="4">No data matching the filter "{{input.value}}"</td>
</tr>
- </tbody>
- </table>
+ </table>
+
+ <mat-paginator [pageSizeOptions]="[10, 25,50, 100]"></mat-paginator>
+ </div>
+
</div>
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.ts
index 3a8a94bf2..0bf4d9c54 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.ts
@@ -1,4 +1,4 @@
-import { Component, EventEmitter, OnDestroy, OnInit, Output, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, EventEmitter, OnDestroy, OnInit, Output, ViewChild } from '@angular/core';
import { FileSystemFileEntry, NgxFileDropEntry } from 'ngx-file-drop';
import { PackageCreationStore } from '../../package-creation.store';
import { TemplateInfo, TemplateStore } from '../../template.store';
@@ -15,14 +15,17 @@ import { TourService } from 'ngx-tour-md-menu';
import { PackageCreationService } from '../../package-creation.service';
import { ParserFactory } from '../utils/ParserFactory/ParserFactory';
import { TemplateType, FileExtension } from '../utils/TemplateType';
+import { MatPaginator, MatSort, MatTableDataSource } from '@angular/material';
+import { ChangeDetectorRef } from '@angular/core';
declare var $: any;
+
@Component({
selector: 'app-templ-mapp-creation',
templateUrl: './templ-mapp-creation.component.html',
styleUrls: ['./templ-mapp-creation.component.css']
})
-export class TemplMappCreationComponent implements OnInit, OnDestroy {
+export class TemplMappCreationComponent implements OnInit, OnDestroy, AfterViewInit {
@Output() showListView = new EventEmitter<any>();
@Output() showCreationView = new EventEmitter<any>();
public uploadedFiles: FileSystemFileEntry[] = [];
@@ -56,6 +59,25 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy {
fileToDelete: any = {};
parserFactory: ParserFactory;
selectedProps: Set<string>;
+ resColumns: string[] = [
+ 'Required', 'Template Input',
+ 'name', 'Dictionary Name',
+ 'dictionary-source', 'dependencies',
+ 'default', 'Velocity', 'Data Type',
+ 'Entry Schema'
+ ];
+ initColumn: string[] = ['select', ...this.resColumns];
+
+
+
+ // displayedColumns: string[] = ['id', 'name', 'progress', 'color'];
+ dataSource: MatTableDataSource<{}>;
+ initDataSource: MatTableDataSource<{}>;
+ // dataSource = new MatTableDataSource();
+ @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
+ @ViewChild(MatSort, { static: true }) sort: MatSort;
+ @ViewChild(MatPaginator, { static: true }) initPaginator: MatPaginator;
+ @ViewChild(MatSort, { static: true }) initSort: MatSort;
constructor(
private packageCreationStore: PackageCreationStore,
@@ -65,10 +87,21 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy {
private sharedService: SharedService,
private packageCreationService: PackageCreationService,
private tourService: TourService,
+ private cdr: ChangeDetectorRef
) {
}
+ ngAfterViewInit() {
+ try {
+ this.dataSource.paginator = this.paginator;
+ this.dataSource.sort = this.sort;
+ this.initDataSource.paginator = this.initPaginator;
+ this.initDataSource.sort = this.initSort;
+ } catch (e) { }
+ }
+
ngOnInit() {
+
this.selectedProps = new Set<string>();
this.parserFactory = new ParserFactory();
this.templateStore.state$.subscribe(templateInfo => {
@@ -85,7 +118,13 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy {
this.mappingRes = templateInfo.mapping;
this.currentMapping = Object.assign({}, templateInfo);
this.resourceDictionaryRes = [];
- this.resTableDtTrigger.next();
+ // Assign the data to the data source for the table to render
+ this.dataSource = new MatTableDataSource(this.mappingRes);
+ // this.cdr.detectChanges();
+ this.dataSource.paginator = this.paginator;
+ this.dataSource.sort = this.sort;
+
+
} else {
this.mappingRes = [];
this.currentMapping = Any;
@@ -124,26 +163,6 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy {
}
});
- this.initDtOptions = {
- pagingType: 'full_numbers',
- pageLength: 25,
- destroy: true,
- retrieve: true,
- columnDefs: [
- {
- targets: [0, 1, 2], // column or columns numbers
- orderable: false, // set orderable for selected columns
- searchable: false,
- },
-
- ],
- };
- this.dtOptions = {
- pagingType: 'full_numbers',
- pageLength: 25,
- destroy: true,
- retrieve: true,
- };
}
setProp(e, propName, index) {
@@ -159,6 +178,22 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy {
}
}
+ applyFilter(event: Event) {
+ const filterValue = (event.target as HTMLInputElement).value;
+ this.dataSource.filter = filterValue.trim().toLowerCase();
+ if (this.dataSource.paginator) {
+ this.dataSource.paginator.firstPage();
+ }
+ }
+
+ initApplyFilter(event: Event) {
+ const filterValue = (event.target as HTMLInputElement).value;
+ this.initDataSource.filter = filterValue.trim().toLowerCase();
+ if (this.initDataSource.paginator) {
+ this.initDataSource.paginator.firstPage();
+ }
+ }
+
removeProps() {
console.log(this.selectedProps);
this.selectedProps.forEach(prop => {
@@ -167,6 +202,7 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy {
console.log('delete...');
this.resourceDictionaryRes.splice(index, 1);
this.selectedProps.delete(prop);
+ this.rerender();
}
});
});
@@ -481,7 +517,10 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy {
}
rerender(): void {
- this.dtTrigger.next();
+ this.initDataSource = new MatTableDataSource(this.resourceDictionaryRes);
+ // this.cdr.detectChanges();
+ this.initDataSource.paginator = this.initPaginator;
+ this.initDataSource.sort = this.initSort;
}
ngOnDestroy(): void {