Improve coupon management

apps/client/src/app/components/admin-overview/admin-overview.html

@@ -113,24 +113,80 @@
               </div>
             </div>
           }
-          @if (hasPermissionForSubscription) {
+          <div class="d-flex my-3">
-            <div class="d-flex my-3 subscription">
+            <div class="w-50" i18n>Housekeeping</div>
-              <div class="w-50" i18n>Coupons</div>
             <div class="w-50">
-                <table>
+              <div class="align-items-start d-flex flex-column">
-                  @for (coupon of coupons; track coupon) {
+                @if (hasPermissionToSyncDemoUserAccount) {
-                    <tr>
+                  <button
-                      <td>
+                    class="mb-2"
+                    color="accent"
+                    mat-flat-button
+                    (click)="onSyncDemoUserAccount()"
+                  >
+                    <ion-icon class="mr-1" name="sync-outline" />
+                    <span i18n>Sync Demo User Account</span>
+                  </button>
+                }
+                <button color="warn" mat-flat-button (click)="onFlushCache()">
+                  <ion-icon class="mr-1" name="close-circle-outline" />
+                  <span i18n>Flush Cache</span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </mat-card-content>
+      </mat-card>
+    </div>
+  </div>
+
+  @if (hasPermissionForSubscription) {
+    <div class="row">
+      <div class="col">
+        <mat-card appearance="outlined">
+          <mat-card-header>
+            <mat-card-title i18n>Coupons</mat-card-title>
+          </mat-card-header>
+          <mat-card-content>
+            <div class="overflow-x-auto">
+              <table
+                class="gf-table w-100"
+                mat-table
+                [dataSource]="couponsDataSource"
+              >
+                <ng-container matColumnDef="code">
+                  <th *matHeaderCellDef class="px-1" mat-header-cell>
+                    <ng-container i18n>Code</ng-container>
+                  </th>
+                  <td *matCellDef="let element" class="px-1" mat-cell>
                     <gf-value
                       class="text-monospace"
                       [enableCopyToClipboardButton]="true"
-                          [value]="coupon.code"
+                      [value]="element.code"
                     />
                   </td>
-                      <td class="pl-2 text-right">
+                </ng-container>
-                        {{ formatStringValue(coupon.duration) }}
+
+                <ng-container matColumnDef="duration">
+                  <th *matHeaderCellDef class="px-1" mat-header-cell>
+                    <ng-container i18n>Duration</ng-container>
+                  </th>
+                  <td *matCellDef="let element" class="px-1" mat-cell>
+                    {{ formatStringValue(element.duration) }}
                   </td>
-                      <td>
+                </ng-container>
+
+                <ng-container matColumnDef="actions" stickyEnd>
+                  <th
+                    *matHeaderCellDef
+                    class="px-1 text-right"
+                    mat-header-cell
+                  ></th>
+                  <td
+                    *matCellDef="let element"
+                    class="px-1 text-right"
+                    mat-cell
+                  >
                     <button
                       class="mx-1 no-min-width px-2"
                       mat-button
@@ -141,12 +197,12 @@
                     </button>
                     <mat-menu
                       #couponActionsMenu="matMenu"
-                          class="h-100 mx-1 no-min-width px-2"
+                      class="no-max-width"
                       xPosition="before"
                     >
                       <button
                         mat-menu-item
-                            (click)="onDeleteCoupon(coupon.code)"
+                        (click)="onDeleteCoupon(element.code)"
                       >
                         <span class="align-items-center d-flex">
                           <ion-icon class="mr-2" name="trash-outline" />
@@ -155,15 +211,22 @@
                       </button>
                     </mat-menu>
                   </td>
-                    </tr>
+                </ng-container>
-                  }
+
+                <tr
+                  *matHeaderRowDef="couponsDisplayedColumns"
+                  mat-header-row
+                ></tr>
+                <tr
+                  *matRowDef="let row; columns: couponsDisplayedColumns"
+                  mat-row
+                ></tr>
               </table>
-                <div class="mt-2">
+            </div>
-                  <form #couponForm="ngForm" class="align-items-center d-flex">
+          </mat-card-content>
-                    <mat-form-field
+          <mat-card-actions align="end">
-                      appearance="outline"
+            <form #couponForm="ngForm" class="align-items-stretch d-flex">
-                      class="mr-2 without-hint"
+              <mat-form-field appearance="outline" class="mr-1 without-hint">
-                    >
                 <mat-select
                   name="duration"
                   [value]="couponDuration"
@@ -190,42 +253,17 @@
                 </mat-select>
               </mat-form-field>
               <button
-                      class="mt-1"
+                class="h-auto rounded"
                 color="primary"
                 mat-flat-button
                 (click)="onAddCoupon()"
               >
-                      <span i18n>Add</span>
+                <ng-container i18n>Add</ng-container>
               </button>
             </form>
-                </div>
+          </mat-card-actions>
-              </div>
-            </div>
-          }
-          <div class="d-flex my-3">
-            <div class="w-50" i18n>Housekeeping</div>
-            <div class="w-50">
-              <div class="align-items-start d-flex flex-column">
-                @if (hasPermissionToSyncDemoUserAccount) {
-                  <button
-                    class="mb-2"
-                    color="accent"
-                    mat-flat-button
-                    (click)="onSyncDemoUserAccount()"
-                  >
-                    <ion-icon class="mr-1" name="sync-outline" />
-                    <span i18n>Sync Demo User Account</span>
-                  </button>
-                }
-                <button color="warn" mat-flat-button (click)="onFlushCache()">
-                  <ion-icon class="mr-1" name="close-circle-outline" />
-                  <span i18n>Flush Cache</span>
-                </button>
-              </div>
-            </div>
-          </div>
-        </mat-card-content>
         </mat-card>
       </div>
     </div>
+  }
 </div>