Template interface Function modification

Change-Id: I2fcca1b978855abbc25bf73f731f0dcc2c973f70
Issue-ID: DCAEGEN2-1625
Signed-off-by: cyuamber <xuranyjy@chinamobile.com>

8 files changed, 74 insertions, 56 deletions

diff --git a/components/datalake-handler/admin/src/src/app/core/models/template.model.ts b/components/datalake-handler/admin/src/src/app/core/models/template.model.ts
index 5df69721..5342d70f 100644
--- a/components/datalake-handler/admin/src/src/app/core/models/template.model.ts
+++ b/components/datalake-handler/admin/src/src/app/core/models/template.model.ts
@@ -34,7 +34,7 @@
 export class Template {
     id:number;
     name:string;
-    submitted:true;
+    submitted:boolean;
     body: string;
     note:string;
     topic: string;
@@ -43,7 +43,7 @@ export class Template {
 
 export class newTemplate {
   name:string;
-  submitted:true;
+  submitted:boolean;
   body: string;
   note:string;
   topic: string;
diff --git a/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/edit-template-modal/edit-template-modal.component.html b/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/edit-template-modal/edit-template-modal.component.html
index 3b276c14..4e5a4bbc 100644
--- a/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/edit-template-modal/edit-template-modal.component.html
+++ b/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/edit-template-modal/edit-template-modal.component.html
@@ -19,6 +19,7 @@
         <div class="row">
           <div class="col-md-12">
             <label class="dl-h3">{{ templateInputTitle }}</label>
+            <i class="fas fa-plus fa-2x close-btn-icon" (click)="activeModal.close('Close click')"></i>
           </div>
         </div>
         <div class="row">
@@ -33,10 +34,10 @@
 
         <div class="form-group">
           <div class="row">
-            <div class="col-md-4">
+            <div class="col-md-3">
               <label class="dl-emphasis1" for="inputtemplateName">{{ 'TEMPLATE_NAME' | translate }}</label>
             </div>
-            <div class="col-md-4">
+            <div class="col-md-5">
               <input  #inputtemplateName [(ngModel)]="this.templateInput.name" class="form-control dl-input-text" type="text" placeholder="Username" />
             </div>
           </div>
@@ -44,21 +45,21 @@
 
         <div class="form-group">
             <div class="row">
-              <div class="col-md-4">
+              <div class="col-md-3">
                 <label class="dl-emphasis1" for="templatebody">{{ 'TEMPLATE_BODY'| translate }}</label>
               </div>
-              <div class="col-md-8">
-                  <textarea #templatebody [(ngModel)]="this.templateInput.body"  class="form-control dl-input-text" placeholder="Put the template design here..." rows="3"></textarea>
+              <div class="col-md-9">
+                  <textarea #templatebody [(ngModel)]="this.templateInput.body"  class="form-control dl-input-text" placeholder="Put the template design here..." rows="3" style="min-height: 300px!important;"></textarea>
               </div>
             </div>
           </div>
 
         <div class="form-group">
           <div class="row">
-            <div class="col-md-4">
+            <div class="col-md-3">
               <label class="dl-emphasis1">{{ 'TEMPLATE_TYPE' | translate }}</label>
             </div>
-            <div class="col-md-6">
+            <div class="col-md-7">
               <select #templatetype class="custom-select dl-input-text" id="selDataFormat">
                 <option *ngFor="let item of templatetypedata" [selected]="item == this.templateInput.designType">{{item}}</option>
               </select>
@@ -68,10 +69,10 @@
 
         <div class="form-group">
             <div class="row">
-              <div class="col-md-4">
-                <label class="dl-emphasis1">{{ 'TOPICS' | translate }}</label>
+              <div class="col-md-3">
+                <label class="dl-emphasis1">{{ 'TOPICS_NAME' | translate }}</label>
               </div>
-              <div class="col-md-6">
+              <div class="col-md-7">
                 <select #topic class="custom-select dl-input-text" id="selDataFormat">
                   <option *ngFor="let item of topicname" [selected]="item == this.templateInput.topic">{{item}}</option>
                 </select>
diff --git a/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/edit-template-modal/edit-template-modal.component.ts b/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/edit-template-modal/edit-template-modal.component.ts
index eab30e25..5b69f6c8 100644
--- a/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/edit-template-modal/edit-template-modal.component.ts
+++ b/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/edit-template-modal/edit-template-modal.component.ts
@@ -70,6 +70,7 @@ export class EditTemplateModalComponent implements OnInit {
     };
     this.templateInput = feed;
     this.templateInputTitle = ""+this.edittemplate.name;
+    console.log(this.templateInput,"this.templateInput")
   }
   getTopicName(){
     this.dashboardApiService.getTopicName().subscribe(data => {
diff --git a/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/new-template-modal/new-template-modal.component.html b/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/new-template-modal/new-template-modal.component.html
index 6b36bc51..9d01765b 100644
--- a/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/new-template-modal/new-template-modal.component.html
+++ b/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/new-template-modal/new-template-modal.component.html
@@ -19,6 +19,7 @@
       <div class="row">
         <div class="col-md-12">
           <label class="dl-h3">{{ "NEW_TEMPLATE" | translate }}</label>
+          <i class="fas fa-plus fa-2x close-btn-icon" (click)="activeModal.close('Close click')"></i>
         </div>
       </div>
       <div class="row">
@@ -33,10 +34,10 @@
 
       <div class="form-group">
         <div class="row">
-          <div class="col-md-4">
+          <div class="col-md-3">
             <label class="dl-emphasis1" for="inputtemplateName">{{ 'TEMPLATE_NAME' | translate }}</label>
           </div>
-          <div class="col-md-4">
+          <div class="col-md-5">
             <input #inputtemplateName [(ngModel)]="this.templateInput.name" class="form-control dl-input-text" type="text" name="inputtemplateName" placeholder="Username" required="required"/>
           </div>
         </div>
@@ -44,21 +45,21 @@
 
       <div class="form-group">
           <div class="row">
-            <div class="col-md-4">
+            <div class="col-md-3">
               <label class="dl-emphasis1" for="templatebody">{{ 'TEMPLATE_BODY'| translate }}</label>
             </div>
-            <div class="col-md-8">
-                <textarea #templatebody [(ngModel)]="this.templateInput.body" class="form-control dl-input-text" placeholder="Put the template design here..." rows="3"></textarea>
+            <div class="col-md-9">
+                <textarea #templatebody [(ngModel)]="this.templateInput.body" class="form-control dl-input-text" placeholder="Put the template design here..." rows="3" style="min-height: 300px!important;"></textarea>
             </div>
           </div>
         </div>
 
       <div class="form-group">
         <div class="row">
-          <div class="col-md-4">
+          <div class="col-md-3">
             <label class="dl-emphasis1">{{ 'TEMPLATE_TYPE' | translate }}</label>
           </div>
-          <div class="col-md-6">
+          <div class="col-md-7">
             <select #templatetype class="custom-select dl-input-text">
               <option *ngFor="let item of templatetypedata" [selected]="item==templatetypedata[0]">{{item}}</option>
             </select>
@@ -68,10 +69,10 @@
 
       <div class="form-group">
           <div class="row">
-            <div class="col-md-4">
-              <label class="dl-emphasis1">{{ 'TOPICS' | translate }}</label>
+            <div class="col-md-3">
+              <label class="dl-emphasis1">{{ 'TOPICS_NAME' | translate }}</label>
             </div>
-            <div class="col-md-6">
+            <div class="col-md-7">
               <select #topic class="custom-select dl-input-text">
                 <option *ngFor="let item of topicname" [selected]="item==topicname[0]">{{item}}</option>
               </select>
diff --git a/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/new-template-modal/new-template-modal.component.ts b/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/new-template-modal/new-template-modal.component.ts
index 9519ff45..640ab31e 100644
--- a/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/new-template-modal/new-template-modal.component.ts
+++ b/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/new-template-modal/new-template-modal.component.ts
@@ -102,7 +102,7 @@ export class NewTemplateModalComponent implements OnInit {
     this.template.designType = this.templatetype.nativeElement.value;
     this.template.topic = this.topic.nativeElement.value;
     // this.template.id = this.templatelist_length+1;
-    this.template.submitted = true;
+    this.template.submitted = false;
     this.template.note = "";
     console.log(this.template);
     this.passEntry.emit(this.template);
diff --git a/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/template-list.component.html b/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/template-list.component.html
index e58db0be..aa1297a0 100644
--- a/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/template-list.component.html
+++ b/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/template-list.component.html
@@ -42,20 +42,20 @@
   <!-- datatable -->
   <div class="row">
     <div class="col-md-12">
-      <ngx-datatable #mydatatable class="bootstrap" [rows]="template_list" [columnMode]="'force'" [headerHeight]="40"
+      <ngx-datatable #mytemlate class="bootstrap" [rows]="template_list" [columnMode]="'force'" [headerHeight]="40"
         [footerHeight]="40" [rowHeight]="50" [scrollbarV]="true" [scrollbarH]="true"
-        [loadingIndicator]="loadingIndicator" [messages]="mesgNoData" [limit]="10">
+        [loadingIndicator]="loadingIndicator" [messages]="mesgNoData" [limit]="10"  (activate)="onActivate($event)">
 
-        <ngx-datatable-column [width]="40" name="{{ 'No' | translate }}" prop="id"
-          headerClass="d-flex justify-content-center" cellClass="d-flex justify-content-center">
-          <div>
-            <ng-template let-row="row">
-              <span>{{ row.id }}</span>
-            </ng-template>
-          </div>
-        </ngx-datatable-column>
+        <!--<ngx-datatable-column [width]="40" name="{{ 'No' | translate }}" prop="id"-->
+          <!--headerClass="d-flex justify-content-center" cellClass="d-flex justify-content-center">-->
+          <!--<div>-->
+            <!--<ng-template let-row="row">-->
+              <!--<span>{{ row.id }}</span>-->
+            <!--</ng-template>-->
+          <!--</div>-->
+        <!--</ngx-datatable-column>-->
 
-        <ngx-datatable-column [width]="200" name="{{ 'TEMPLATE_NAME' | translate }}" prop="name">
+        <ngx-datatable-column [width]="100" name="{{ 'TEMPLATE_NAME' | translate }}" prop="name" headerClass="d-flex justify-content-center" cellClass="d-flex justify-content-center">
           <ng-template let-row="row" ngx-datatable-cell-template>
             <span>{{ row.name }}</span>
           </ng-template>
@@ -413,7 +413,7 @@
           headerClass="d-flex justify-content-center" cellClass="d-flex justify-content-center">
           <div>
             <ng-template let-row="row" ngx-datatable-cell-template>
-              <span  (click)="this.deployTemplate(row.id);"  class="dl-btn-dark">&nbsp;&nbsp;{{ 'DEPLOY' | translate }}&nbsp;&nbsp;</span>
+              <span  (click)="this.deployTemplate(row.id);"  class="dl-btn-dark" style="cursor: pointer">&nbsp;&nbsp;{{ 'DEPLOY' | translate }}&nbsp;&nbsp;</span>
             </ng-template>
           </div>
         </ngx-datatable-column>
@@ -424,11 +424,6 @@
                 <i class="fas fa-trash-alt fa-xs"></i>
               </button>
             </span>
-            <span>
-              <button class="btn action-icon-setting" (click)="this.editTemplateModal(row.id);">
-                <i class="fas fa-cog fa-xs"></i>
-              </button>
-            </span>
           </ng-template>
         </ngx-datatable-column>
 
diff --git a/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/template-list.component.ts b/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/template-list.component.ts
index 9d774c49..328ceeb5 100644
--- a/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/template-list.component.ts
+++ b/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/template-list.component.ts
@@ -51,7 +51,6 @@ export class TemplateListComponent {
     `
   };
   @ViewChild("searchText") searchText: ElementRef;
-
   constructor(
     private modalService: NgbModal,
     private dashboardApiService: DashboardApiService,
@@ -115,7 +114,7 @@ export class TemplateListComponent {
     this.selectedLangs = sessionStorage.getItem("selectedLang");
     let tips = "";
     const modalRef = this.modalService.open(NewTemplateModalComponent, {
-      windowClass: "dl-md-modal",
+      windowClass: "dl-md-modal templatess",
       centered: true
     });
     this.Template_New = new Template();
@@ -137,22 +136,22 @@ export class TemplateListComponent {
               this.template_list = [...this.template_list];
               console.log(this.template_list, "this.template_list,inserted");
               if (this.selectedLangs == "en-us") {
-                tips = "Success inserted."
+                tips = "Successfully created."
               } else if (this.selectedLangs == "zh-hans") {
                 tips = "新增成功。"
               } else if (this.selectedLangs == "zh-hant") {
                 tips = "新增成功。"
               }
-              this.notificationService.success('"' + name + '"' + tips);
+              this.notificationService.success(tips);
             } else {
               if (this.selectedLangs == "en-us") {
-                tips = "Fail inserted."
+                tips = "Fail created."
               } else if (this.selectedLangs == "zh-hans") {
                 tips = "新增失败。"
               } else if (this.selectedLangs == "zh-hant") {
                 tips = "新增失敗。"
               }
-              this.notificationService.error('"' + name + '"' + tips);
+              this.notificationService.error(tips);
             }
             modalRef.close();
           },
@@ -164,13 +163,23 @@ export class TemplateListComponent {
     });
   }
 
-  editTemplateModal(id: number) {
+  onActivate(event) {
+    const emitType = event.type;
+    if(emitType == "dblclick"){
+      console.log('Activate Event', event);
+      let id = event.row.id;
+      this.editTemplateModal(id);
+    }
+
+  }
+
+  editTemplateModal(id) {
     this.selectedLangs = sessionStorage.getItem("selectedLang");
     let tips = "";
     const index = this.template_list.findIndex(t => t.id === id);
     // const name = this.template_list[index].name;
     const modalRef = this.modalService.open(EditTemplateModalComponent, {
-      windowClass: "dl-md-modal",
+      windowClass: "dl-md-modal templatess",
       centered: true
     });
     modalRef.componentInstance.selectedLangs = this.selectedLangs;
@@ -188,7 +197,7 @@ export class TemplateListComponent {
               this.template_list = [...this.template_list];
               console.log(this.template_list, "this.template_list,update");
               if (this.selectedLangs == "en-us") {
-                tips = "Success updated."
+                tips = "Successfully updated."
               } else if (this.selectedLangs == "zh-hans") {
                 tips = "更新成功。"
               } else if (this.selectedLangs == "zh-hant") {
@@ -246,13 +255,13 @@ export class TemplateListComponent {
             this.template_list.splice(index, 1);
             this.template_list = [...this.template_list];
             if (this.selectedLangs == "en-us") {
-              tips = "Success deleted."
+              tips = "Successfully deleted."
             } else if (this.selectedLangs == "zh-hans") {
               tips = "删除成功。"
             } else if (this.selectedLangs == "zh-hant") {
               tips = "刪除成功。"
             }
-            this.notificationService.success('"' + name + '"' + tips);
+            this.notificationService.success(tips);
           } else {
             console.log("Fail deleted template");
             if (this.selectedLangs == "en-us") {
@@ -262,7 +271,7 @@ export class TemplateListComponent {
             } else if (this.selectedLangs == "zh-hant") {
               tips = "刪除失敗。"
             }
-            this.notificationService.error('"' + name + '"' + tips);
+            this.notificationService.error(tips);
           }
 
           modalRef.close();
@@ -298,7 +307,7 @@ export class TemplateListComponent {
         console.log(JSON.stringify(res).length,"JSON.stringify(res).length");
         if (JSON.stringify(res).length<=2) {
           if (this.selectedLangs == "en-us") {
-            tips = "Success deploy."
+            tips = "deploy successful."
           } else if (this.selectedLangs == "zh-hans") {
             tips = "部署成功。"
           } else if (this.selectedLangs == "zh-hant") {
@@ -307,7 +316,7 @@ export class TemplateListComponent {
           this.notificationService.success('"' + name + '"' + tips);
         } else {
           if (this.selectedLangs == "en-us") {
-            tips = "Fail deleted."
+            tips = "deploy fail."
           } else if (this.selectedLangs == "zh-hans") {
             tips = "部署失败。"
           } else if (this.selectedLangs == "zh-hant") {
diff --git a/components/datalake-handler/admin/src/src/styles.css b/components/datalake-handler/admin/src/src/styles.css
index 94a04d93..8dcf761e 100644
--- a/components/datalake-handler/admin/src/src/styles.css
+++ b/components/datalake-handler/admin/src/src/styles.css
@@ -65,7 +65,7 @@ body {
   font-family: "Open Sans", sans-serif;
   font-weight: 400;
   font-size: 14px;
-  letter-spacing: 0.6px;
+  letter-spacing: 1px;
   color: #ffffff;
   text-align: left;
 }
@@ -82,7 +82,7 @@ body {
 
 .menu .navbar-expand-lg .navbar-nav .nav-link {
   color: #ffffff;
-  padding-left: 20px;
+  /*padding-left: 20px;*/
   padding-right: 20px;
 }
 
@@ -601,3 +601,14 @@ input#switch:checked+.dl-slider:before {
 .p-1 .alert-delete-content {
   padding: 1.25rem 4.5rem !important;
 }
+ngb-modal-window.templatess .modal-dialog-centered {
+  max-width: 900px !important;
+  overflow: auto !important;
+}
+.close-btn-icon{
+  color: #b5b6b8;
+  -webkit-transform: rotate(45deg);
+  transform: rotate(45deg);
+  float: right;
+  cursor: pointer;
+}