From f567e25f2778e2cd09abe0e424699014164408c5 Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Sat, 11 Nov 2023 18:48:23 +0100
Subject: [PATCH] Feature/introduce action menus in overview of action control
 panel (#2637)

* Introduce action menus

* Exchange rates management
* Coupons management

* Update changelog
---
 CHANGELOG.md                                  |  1 +
 .../admin-overview/admin-overview.html        | 88 ++++++++++++++-----
 .../admin-overview/admin-overview.module.ts   |  2 +
 3 files changed, 68 insertions(+), 23 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 49825ad3c..fbeff96ca 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -15,6 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 
 - Optimized the style of the carousel component on mobile for the testimonial section on the landing page
+- Introduced action menus in the overview of the admin control panel
 - Harmonized the name column in the historical market data table of the admin control panel
 
 ## 2.21.0 - 2023-11-09
diff --git a/apps/client/src/app/components/admin-overview/admin-overview.html b/apps/client/src/app/components/admin-overview/admin-overview.html
index da14baea0..c0ce87c88 100644
--- a/apps/client/src/app/components/admin-overview/admin-overview.html
+++ b/apps/client/src/app/components/admin-overview/admin-overview.html
@@ -38,7 +38,7 @@
             <div class="w-50">
               <table>
                 <tr *ngFor="let exchangeRate of exchangeRates">
-                  <td class="d-flex">
+                  <td>
                     <gf-value
                       [locale]="user?.settings?.locale"
                       [value]="1"
@@ -46,8 +46,9 @@
                   </td>
                   <td class="pl-1">{{ exchangeRate.label1 }}</td>
                   <td class="px-1">=</td>
-                  <td class="d-flex justify-content-end">
+                  <td align="right">
                     <gf-value
+                      class="d-inline-block"
                       [locale]="user?.settings?.locale"
                       [precision]="4"
                       [value]="exchangeRate.value"
@@ -55,26 +56,50 @@
                   </td>
                   <td class="pl-1">{{ exchangeRate.label2 }}</td>
                   <td>
-                    <a
-                      class="h-100 mx-1 no-min-width px-2"
+                    <button
+                      class="mx-1 no-min-width px-2"
                       mat-button
-                      [queryParams]="{
+                      [matMenuTriggerFor]="exchangeRateActionsMenu"
+                      (click)="$event.stopPropagation()"
+                    >
+                      <ion-icon name="ellipsis-horizontal"></ion-icon>
+                    </button>
+                    <mat-menu
+                      #exchangeRateActionsMenu="matMenu"
+                      class="h-100 mx-1 no-min-width px-2"
+                      xPosition="before"
+                    >
+                      <a
+                        mat-menu-item
+                        [queryParams]="{
                         assetProfileDialog: true,
                         dataSource: exchangeRate.dataSource,
                         symbol: exchangeRate.symbol
                       }"
-                      [routerLink]="['/admin', 'market-data']"
-                    >
-                      <ion-icon name="create-outline"></ion-icon>
-                    </a>
-                    <button
-                      *ngIf="customCurrencies.includes(exchangeRate.label2)"
-                      class="h-100 mx-1 no-min-width px-2"
-                      mat-button
-                      (click)="onDeleteCurrency(exchangeRate.label2)"
-                    >
-                      <ion-icon name="trash-outline"></ion-icon>
-                    </button>
+                        [routerLink]="['/admin', 'market-data']"
+                      >
+                        <span class="align-items-center d-flex">
+                          <ion-icon
+                            class="mr-2"
+                            name="create-outline"
+                          ></ion-icon>
+                          <span i18n>Edit</span>
+                        </span>
+                      </a>
+                      <button
+                        *ngIf="customCurrencies.includes(exchangeRate.label2)"
+                        mat-menu-item
+                        (click)="onDeleteCurrency(exchangeRate.label2)"
+                      >
+                        <span class="align-items-center d-flex">
+                          <ion-icon
+                            class="mr-2"
+                            name="trash-outline"
+                          ></ion-icon>
+                          <span i18n>Delete</span>
+                        </span>
+                      </button>
+                    </mat-menu>
                   </td>
                 </tr>
               </table>
@@ -149,17 +174,34 @@
               <table>
                 <tr *ngFor="let coupon of coupons">
                   <td class="text-monospace">{{ coupon.code }}</td>
-                  <td class="d-flex justify-content-end pl-2">
-                    {{ coupon.duration }}
-                  </td>
+                  <td class="pl-2 text-right">{{ coupon.duration }}</td>
                   <td>
                     <button
-                      class="h-100 mx-1 no-min-width px-2"
+                      class="mx-1 no-min-width px-2"
                       mat-button
-                      (click)="onDeleteCoupon(coupon.code)"
+                      [matMenuTriggerFor]="couponActionsMenu"
+                      (click)="$event.stopPropagation()"
                     >
-                      <ion-icon name="trash-outline"></ion-icon>
+                      <ion-icon name="ellipsis-horizontal"></ion-icon>
                     </button>
+                    <mat-menu
+                      #couponActionsMenu="matMenu"
+                      class="h-100 mx-1 no-min-width px-2"
+                      xPosition="before"
+                    >
+                      <button
+                        mat-menu-item
+                        (click)="onDeleteCoupon(coupon.code)"
+                      >
+                        <span class="align-items-center d-flex">
+                          <ion-icon
+                            class="mr-2"
+                            name="trash-outline"
+                          ></ion-icon>
+                          <span i18n>Delete</span>
+                        </span>
+                      </button>
+                    </mat-menu>
                   </td>
                 </tr>
               </table>
diff --git a/apps/client/src/app/components/admin-overview/admin-overview.module.ts b/apps/client/src/app/components/admin-overview/admin-overview.module.ts
index 554118bb3..d0762e79f 100644
--- a/apps/client/src/app/components/admin-overview/admin-overview.module.ts
+++ b/apps/client/src/app/components/admin-overview/admin-overview.module.ts
@@ -3,6 +3,7 @@ import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
+import { MatMenuModule } from '@angular/material/menu';
 import { MatSelectModule } from '@angular/material/select';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { RouterModule } from '@angular/router';
@@ -20,6 +21,7 @@ import { AdminOverviewComponent } from './admin-overview.component';
     GfValueModule,
     MatButtonModule,
     MatCardModule,
+    MatMenuModule,
     MatSelectModule,
     MatSlideToggleModule,
     ReactiveFormsModule,