From 427d142fc68c98f92ad7d7d07e0554c602c19972 Mon Sep 17 00:00:00 2001 From: Ahmedeldeeb50 Date: Sun, 18 Oct 2020 16:12:27 +0200 Subject: Replace the existing mapping table with MatTable Issue-ID: CCSDK-2920 Signed-off-by: Ahmedeldeeb50 Change-Id: Ib5f557ac038395416e61057b350a1b2f616299d3 --- .../templ-mapp-creation.component.html | 281 ++++++++++++++------- .../templ-mapp-creation.component.ts | 87 +++++-- .../feature-modules/packages/packages.module.ts | 76 +++--- 3 files changed, 287 insertions(+), 157 deletions(-) (limited to 'cds-ui/designer-client/src/app/modules/feature-modules/packages') 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 @@
+ + + Filter + + +
({{resourceDictionaryRes.length}} attributes in total)
- - - - - - - - - - - - - - - - - - -
RequiredTemplate InputParameter NameDictionary NameDictionary SourceDependanciesDefaultVelocityData TypeEntry Schema
+ +
+ + + + + + - + - + - - - + + + + + + + + + + + + - + - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - -
- 		+ + + + Required
+ + + + + Template Input
+ (click)="setProp(tempInput,'input-param',initDataSource.filteredData.indexOf(dict))" + id="inputCheck-{{dict.name}}">
{{ dict.name }}{{ dict.name }} + + + + + Parameter Name {{dict['name'] }} Dictionary Name {{dict['name'] }} Dictionary Source - + + + + + + Dependancies - {{ dict.definition?.property?.default }}{{ dict.definition?.property?.type }}{{ dict.definition?.property['entry_schema'] }} Default {{ dict.definition?.property?.default }} Velocity + + Data Type {{ dict.definition?.property?.type }} Entry Schema {{dict.definition?.property['entry_schema']}}
No data matching the filter "{{input.value}}"
-
+
+ +
+ +
- - - - - - - - - - - - - - - - - - - - -
RequiredTemplate InputParameter NameDictionary NameDictionary SourceDependanciesDefaultVelocityData TypeEntry Schema
+ + + + Filter + + + +
+ + + + + + - + - - - + + + + + + + + + + + + - + - - + + + + + + + - - - + + + + + + + + + + + + + + + + + + + + + + + - -
Required + + + + + Template Input {{ dict['name'] }}{{ dict['name'] }} + + + + + Parameter Name {{dict['name'] }} Dictionary Name {{dict['name'] }} Dictionary Source - + + + + + + Dependancies - {{ dict['property']['default'] }} - {{dict?.property?.metadata['transform-template']}} + + + + + Default {{dict['property']['default']}} Velocity + + {{dict?.property?.metadata['transform-template']}} + + {{ dict['property']['type'] }}{{ dict['property']['entry_schema'] }} Data Type {{ dict['property']['type'] }} Entry Schema {{dict['property']['entry_schema']}}
No data matching the filter "{{input.value}}"
+
+ + +
+ 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(); @Output() showCreationView = new EventEmitter(); public uploadedFiles: FileSystemFileEntry[] = []; @@ -56,6 +59,25 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy { fileToDelete: any = {}; parserFactory: ParserFactory; selectedProps: Set; + 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(); 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: [] -- cgit 1.2.3-korg