From 395d788da79a556948334be21fbd09403aaacdbe Mon Sep 17 00:00:00 2001
From: bnymncoskuner <bnymncoskuner@gmail.com>
Date: Fri, 10 Dec 2021 12:37:17 +0300
Subject: [PATCH] feat: add action column in product

---
 .../src/pages/product/product.component.html  | 22 +++++++++++++++++++
 .../src/pages/product/product.component.ts    |  6 +++++
 .../src/pages/product/product.module.ts       |  3 ++-
 3 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/apps/angular/projects/catalog/src/pages/product/product.component.html b/apps/angular/projects/catalog/src/pages/product/product.component.html
index 6ab694a3..f4e5e651 100644
--- a/apps/angular/projects/catalog/src/pages/product/product.component.html
+++ b/apps/angular/projects/catalog/src/pages/product/product.component.html
@@ -12,6 +12,28 @@
   <div class="card-body">
     <ngx-datatable [rows]="items" [count]="count" [list]="list" default>
       <!-- TODO: localize column headers -->
+      <ngx-datatable-column [name]="'AbpUi::Actions' | abpLocalization" [sortable]="false">
+        <ng-template let-row="row" ngx-datatable-cell-template>
+          <div ngbDropdown container="body" class="d-inline-block">
+            <button
+              class="btn btn-primary btn-sm dropdown-toggle"
+              data-toggle="dropdown"
+              aria-haspopup="true"
+              ngbDropdownToggle
+            >
+              <i class="me-1 fa fa-cog"></i>{{ 'AbpUi::Actions' | abpLocalization }}
+            </button>
+            <div ngbDropdownMenu>
+              <button class="dropdown-item" (click)="onEdit(row)">
+                {{ 'AbpUi::Edit' | abpLocalization }}
+              </button>
+              <button class="dropdown-item" (click)="onDelete(row)">
+                {{ 'AbpUi::Delete' | abpLocalization }}
+              </button>
+            </div>
+          </div>
+        </ng-template>
+      </ngx-datatable-column>
       <ngx-datatable-column name="Code" prop="code"></ngx-datatable-column>
       <ngx-datatable-column name="Name" prop="name"></ngx-datatable-column>
       <ngx-datatable-column name="Price" prop="price"></ngx-datatable-column>
diff --git a/apps/angular/projects/catalog/src/pages/product/product.component.ts b/apps/angular/projects/catalog/src/pages/product/product.component.ts
index ed8a7337..365d2cc7 100644
--- a/apps/angular/projects/catalog/src/pages/product/product.component.ts
+++ b/apps/angular/projects/catalog/src/pages/product/product.component.ts
@@ -24,4 +24,10 @@ export class ProductComponent implements OnInit {
       this.count = response.totalCount;
     });
   }
+
+  onEdit(row: ProductDto) {
+    // this.productService.edit(row);
+  }
+
+  onDelete(row: ProductDto) {}
 }
diff --git a/apps/angular/projects/catalog/src/pages/product/product.module.ts b/apps/angular/projects/catalog/src/pages/product/product.module.ts
index af8743e5..cbbafa70 100644
--- a/apps/angular/projects/catalog/src/pages/product/product.module.ts
+++ b/apps/angular/projects/catalog/src/pages/product/product.module.ts
@@ -2,11 +2,12 @@ import { CoreModule } from '@abp/ng.core';
 import { ThemeSharedModule } from '@abp/ng.theme.shared';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
 import { ProductRoutingModule } from './product-routing.module';
 import { ProductComponent } from './product.component';
 
 @NgModule({
   declarations: [ProductComponent],
-  imports: [CommonModule, ProductRoutingModule, ThemeSharedModule, CoreModule],
+  imports: [CommonModule, ProductRoutingModule, ThemeSharedModule, CoreModule, NgbDropdownModule],
 })
 export class ProductModule {}