Feature/introduce action menus in overview of action control panel (#2637)

* Introduce action menus

* Exchange rates management
* Coupons management

* Update changelog

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

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,9 +56,21 @@
                   </td>
                   <td class="pl-1">{{ exchangeRate.label2 }}</td>
                   <td>
-                    <a
+                    <button
-                      class="h-100 mx-1 no-min-width px-2"
+                      class="mx-1 no-min-width px-2"
                       mat-button
+                      [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,
@@ -65,16 +78,28 @@
                       }"
                         [routerLink]="['/admin', 'market-data']"
                       >
-                      <ion-icon name="create-outline"></ion-icon>
+                        <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)"
-                      class="h-100 mx-1 no-min-width px-2"
+                        mat-menu-item
-                      mat-button
                         (click)="onDeleteCurrency(exchangeRate.label2)"
                       >
-                      <ion-icon name="trash-outline"></ion-icon>
+                        <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">
+                  <td class="pl-2 text-right">{{ coupon.duration }}</td>
-                    {{ 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
+                      [matMenuTriggerFor]="couponActionsMenu"
+                      (click)="$event.stopPropagation()"
+                    >
+                      <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)"
                       >
-                      <ion-icon name="trash-outline"></ion-icon>
+                        <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>

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,