feat(card):add button click event

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

4 files changed, 30 insertions, 6 deletions

diff --git a/components/datalake-handler/admin/src/src/app/shared/modules/card/card.component.html b/components/datalake-handler/admin/src/src/app/shared/modules/card/card.component.html
index 7081054f..7b8d865b 100644
--- a/components/datalake-handler/admin/src/src/app/shared/modules/card/card.component.html
+++ b/components/datalake-handler/admin/src/src/app/shared/modules/card/card.component.html
@@ -17,7 +17,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ============LICENSE_END=========================================================
 -->
-<div class="card-panel d-flex flex-column">
+<div class="card-panel d-flex flex-column" (click)="cardClick()">
   <div class="d-flex flex-row p-2">
     <div class="dl-h4 title mr-auto ml-3 mt-2">{{ this.title }}</div>
 
@@ -26,10 +26,10 @@ limitations under the License.
         <i class="fas fa-ellipsis-h fa-2x dl-icon-enable"></i>
       </a>
       <div class="dropdown-menu action-icon-btn">
-        <button class="dropdown-item" type="button">
+        <button class="dropdown-item" type="button" (click)="cardMoreAction('edit')">
           {{ 'EDIT' | translate }}
         </button>
-        <button class="dropdown-item" type="button">
+        <button class="dropdown-item" type="button" (click)="cardMoreAction('delete')">
           {{ 'DELETE' | translate }}
         </button>
       </div>
diff --git a/components/datalake-handler/admin/src/src/app/shared/modules/card/card.component.ts b/components/datalake-handler/admin/src/src/app/shared/modules/card/card.component.ts
index c5f90d22..9be0b84a 100644
--- a/components/datalake-handler/admin/src/src/app/shared/modules/card/card.component.ts
+++ b/components/datalake-handler/admin/src/src/app/shared/modules/card/card.component.ts
@@ -23,7 +23,7 @@
  * @author Ekko Chang
  *
  */
-import { Component, OnInit, Input } from "@angular/core";
+import { Component, OnInit, Input, Output, EventEmitter  } from "@angular/core";
 
 @Component({
   selector: "app-card",
@@ -38,7 +38,19 @@ export class CardComponent implements OnInit {
   @Input() modifiable: boolean;
   @Input() iconSize: string[] = ["sm", "md", "lg"];
 
+  @Output() cardAction = new EventEmitter<object>();
+  @Output() edit = new EventEmitter<object>();
+
   constructor() {}
 
   ngOnInit() {}
+
+  cardClick() {
+    this.cardAction.emit();
+  }
+
+  cardMoreAction(type) {
+    this.edit.emit(type);
+  }
+
 }
diff --git a/components/datalake-handler/admin/src/src/app/views/test/test.component.html b/components/datalake-handler/admin/src/src/app/views/test/test.component.html
index 6f077f60..549fa545 100644
--- a/components/datalake-handler/admin/src/src/app/views/test/test.component.html
+++ b/components/datalake-handler/admin/src/src/app/views/test/test.component.html
@@ -3,13 +3,13 @@
   <div>
     <p>Module 1 -----> card</p>
     <app-card [iconPath]="this.cardIconPath" [iconSize]="'md'" [subcontent]="this.cardSubcontent"
-      [modifiable]="this.cardModifiable">
+      [modifiable]="this.cardModifiable" (edit)="cardMoreAction($event)">
     </app-card>
     <br>
     <app-card [title]="this.cardTitle" [content]="this.cardContent">
     </app-card>
     <br>
-    <app-card [iconPath]="this.cardAddicon" [iconSize]="'sm'">
+    <app-card [iconPath]="this.cardAddicon" [iconSize]="'sm'" (cardAction)="cardClick()">
     </app-card>
     <br>
   </div>
diff --git a/components/datalake-handler/admin/src/src/app/views/test/test.component.ts b/components/datalake-handler/admin/src/src/app/views/test/test.component.ts
index 97866123..d7dbc962 100644
--- a/components/datalake-handler/admin/src/src/app/views/test/test.component.ts
+++ b/components/datalake-handler/admin/src/src/app/views/test/test.component.ts
@@ -141,4 +141,16 @@ export class TestComponent implements OnInit {
       modalRef.close();
     });
   }
+
+  cardMoreAction($event) {
+    if($event == "edit"){
+      this.openModalDemo()
+    }else {
+      console.log($event,"$event")
+    }
+  }
+  cardClick(){
+    this.openModalDemo();
+  }
+
 }