</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"
<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)}}
</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>
-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';
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[] = [];
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,
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 => {
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;
}
});
- 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) {
}
}
+ 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 => {
console.log('delete...');
this.resourceDictionaryRes.splice(index, 1);
this.selectedProps.delete(prop);
+ this.rerender();
}
});
});
}
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 {
-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,
DataTablesModule,
// Import NgxUiLoaderModule
NgxUiLoaderModule,
- TourMatMenuModule.forRoot()
+ TourMatMenuModule.forRoot(),
+ MatInputModule,
+ MatTableModule,
+ MatPaginatorModule,
+ MatSortModule,
+ MatProgressSpinnerModule
],
providers: [ApiService, JsonPipe, ComponentCanDeactivateGuard],
bootstrap: []
.mapping-table th{
padding-top: 10px !important;
padding-bottom: 10px !important;
- background: #F4F9FE;
+ /* background: #F4F9FE; */
}
.mapping-table td{
border-top: 0 !important;
Code Review / ccsdk / cds.git / commitdiff