From 68b20dd4eab08d399225d3c799ef2fc499bb31a1 Mon Sep 17 00:00:00 2001
From: Thomas <4159106+dtslvr@users.noreply.github.com>
Date: Sat, 11 Nov 2023 18:35:56 +0100
Subject: [PATCH] Introduce action menus

* Exchange rates management
* Coupons management
---
 .../admin-overview/admin-overview.html        | 86 ++++++++++++++-----
 .../admin-overview/admin-overview.module.ts   |  2 +
 2 files changed, 67 insertions(+), 21 deletions(-)

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..2ce164216 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,36 @@
               <table>
                 <tr *ngFor="let coupon of coupons">
                   <td class="text-monospace">{{ coupon.code }}</td>
-                  <td class="d-flex justify-content-end pl-2">
+                  <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,