diff options
Diffstat (limited to 'cds-ui/designer-client')
4 files changed, 288 insertions, 158 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 { diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.module.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.module.ts index d152e1ef3..ad79a1321 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.module.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.module.ts @@ -1,40 +1,41 @@ -import {NgModule} from '@angular/core'; -import {CommonModule, JsonPipe} from '@angular/common'; -import {ApiService} from '../../../common/core/services/api.typed.service'; -import {PackagesRoutingModule} from './packages.routing.module'; -import {NgbPaginationModule} from '@ng-bootstrap/ng-bootstrap'; -import {SharedModulesModule} from '../../shared-modules/shared-modules.module'; -import {PackagesDashboardComponent} from './packages-dashboard/packages-dashboard.component'; -import {PackageListComponent} from './packages-dashboard/package-list/package-list.component'; -import {DesignerComponent} from './designer/designer.component'; -import {SidebarModule} from 'ng-sidebar'; -import {PackagePaginationComponent} from './packages-dashboard/package-pagination/package-pagination.component'; -import {SortPackagesComponent} from './packages-dashboard/sort-packages/sort-packages.component'; -import {PackagesHeaderComponent} from './packages-dashboard/packages-header/packages-header.component'; -import {PackagesSearchComponent} from './packages-dashboard/search-by-packages/search-by-packages.component'; -import {TagsFilteringComponent} from './packages-dashboard/filter-by-tags/filter-by-tags.component'; -import {ConfigurationDashboardComponent} from './configuration-dashboard/configuration-dashboard.component'; -import {ActionsComponent} from './designer/actions/actions.component'; -import {PackageCreationComponent} from './package-creation/package-creation.component'; -import {FormsModule} from '@angular/forms'; -import {ImportsTabComponent} from './package-creation/imports-tab/imports-tab.component'; -import {NgxFileDropModule} from 'ngx-file-drop'; -import {TemplateMappingComponent} from './package-creation/template-mapping/template-mapping.component'; -import {SourceEditorComponent} from './source-editor/source-editor.component'; -import {ScriptsTabComponent} from './package-creation/scripts-tab/scripts-tab.component'; -import {AceEditorModule} from 'ng2-ace-editor'; -import {MetadataTabComponent} from './package-creation/metadata-tab/metadata-tab.component'; -import {DslDefinitionsTabComponent} from './package-creation/dsl-definitions-tab/dsl-definitions-tab.component'; -import {TemplMappCreationComponent} from './package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component'; -import {TemplMappListingComponent} from './package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component'; -import {DataTablesModule} from 'angular-datatables'; -import {DesignerSourceViewComponent} from './designer/source-view/source-view.component'; -import {NgxUiLoaderModule} from 'ngx-ui-loader'; -import {TourMatMenuModule} from 'ngx-tour-md-menu'; -import {ComponentCanDeactivateGuard} from '../../../common/core/canDactivate/ComponentCanDeactivateGuard'; +import { NgModule } from '@angular/core'; +import { CommonModule, JsonPipe } from '@angular/common'; +import { ApiService } from '../../../common/core/services/api.typed.service'; +import { PackagesRoutingModule } from './packages.routing.module'; +import { NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap'; +import { SharedModulesModule } from '../../shared-modules/shared-modules.module'; +import { PackagesDashboardComponent } from './packages-dashboard/packages-dashboard.component'; +import { PackageListComponent } from './packages-dashboard/package-list/package-list.component'; +import { DesignerComponent } from './designer/designer.component'; +import { SidebarModule } from 'ng-sidebar'; +import { PackagePaginationComponent } from './packages-dashboard/package-pagination/package-pagination.component'; +import { SortPackagesComponent } from './packages-dashboard/sort-packages/sort-packages.component'; +import { PackagesHeaderComponent } from './packages-dashboard/packages-header/packages-header.component'; +import { PackagesSearchComponent } from './packages-dashboard/search-by-packages/search-by-packages.component'; +import { TagsFilteringComponent } from './packages-dashboard/filter-by-tags/filter-by-tags.component'; +import { ConfigurationDashboardComponent } from './configuration-dashboard/configuration-dashboard.component'; +import { ActionsComponent } from './designer/actions/actions.component'; +import { PackageCreationComponent } from './package-creation/package-creation.component'; +import { FormsModule } from '@angular/forms'; +import { ImportsTabComponent } from './package-creation/imports-tab/imports-tab.component'; +import { NgxFileDropModule } from 'ngx-file-drop'; +import { TemplateMappingComponent } from './package-creation/template-mapping/template-mapping.component'; +import { SourceEditorComponent } from './source-editor/source-editor.component'; +import { ScriptsTabComponent } from './package-creation/scripts-tab/scripts-tab.component'; +import { AceEditorModule } from 'ng2-ace-editor'; +import { MetadataTabComponent } from './package-creation/metadata-tab/metadata-tab.component'; +import { DslDefinitionsTabComponent } from './package-creation/dsl-definitions-tab/dsl-definitions-tab.component'; +import { TemplMappCreationComponent } from './package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component'; +import { TemplMappListingComponent } from './package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component'; +import { DataTablesModule } from 'angular-datatables'; +import { DesignerSourceViewComponent } from './designer/source-view/source-view.component'; +import { NgxUiLoaderModule } from 'ngx-ui-loader'; +import { TourMatMenuModule } from 'ngx-tour-md-menu'; +import { ComponentCanDeactivateGuard } from '../../../common/core/canDactivate/ComponentCanDeactivateGuard'; import { ImportPackageComponent } from './packages-dashboard/import-package/import-package.component'; import { FunctionsAttributeComponent } from './designer/functions-attribute/functions-attribute.component'; import { ActionAttributesComponent } from './designer/action-attributes/action-attributes.component'; +import { MatInputModule, MatPaginatorModule, MatProgressSpinnerModule, MatSortModule, MatTableModule } from '@angular/material'; @NgModule({ declarations: [PackagesDashboardComponent, @@ -74,7 +75,12 @@ import { ActionAttributesComponent } from './designer/action-attributes/action-a DataTablesModule, // Import NgxUiLoaderModule NgxUiLoaderModule, - TourMatMenuModule.forRoot() + TourMatMenuModule.forRoot(), + MatInputModule, + MatTableModule, + MatPaginatorModule, + MatSortModule, + MatProgressSpinnerModule ], providers: [ApiService, JsonPipe, ComponentCanDeactivateGuard], bootstrap: [] diff --git a/cds-ui/designer-client/src/styles.css b/cds-ui/designer-client/src/styles.css index ce9fdd781..8d4ee8e29 100644 --- a/cds-ui/designer-client/src/styles.css +++ b/cds-ui/designer-client/src/styles.css @@ -3298,7 +3298,7 @@ margin-right: 5px; .mapping-table th{ padding-top: 10px !important; padding-bottom: 10px !important; - background: #F4F9FE; + /* background: #F4F9FE; */ } .mapping-table td{ border-top: 0 !important; |