Merge pull request #2842 from JaySoni1/WEB-438-improve-visibility-and-placement-of-edit-and-delete-buttons-on-product-mix-page

WEB-438 Improve visibility and placement of edit and delete buttons on product mix page

Author: alberto-art3ch

src/app/products/products-mix/view-product-mix/view-product-mix.component.html

@@ -1,15 +1,4 @@
-<div class="container m-b-20 layout-row layout-lt-md-column layout-align-end gap-20px">
-  <button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_PRODUCTMIX'">
-    <fa-icon icon="edit" class="m-r-10"></fa-icon>
-    {{ 'labels.buttons.Edit' | translate }}
-  </button>
-  <button mat-raised-button color="warn" (click)="delete()" *mifosxHasPermission="'DELETE_PRODUCTMIX'">
-    <fa-icon icon="trash" class="m-r-10"></fa-icon>
-    {{ 'labels.buttons.Delete' | translate }}
-  </button>
-</div>
-
-<div class="container">
+<div class="product-mix-row">
   <div class="mat-elevation-z8 inline-table">
     <table mat-table [dataSource]="allowedProductsDatasource" matSort>
       <ng-container matColumnDef="name">
@@ -25,18 +14,31 @@
 
     <mat-paginator #allowed [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
   </div>
+  <div class="restricted-products-col">
+    <div class="action-buttons">
+      <button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_PRODUCTMIX'">
+        <fa-icon icon="edit" class="m-r-10"></fa-icon>
+        {{ 'labels.buttons.Edit' | translate }}
+      </button>
+      <button mat-raised-button color="warn" (click)="delete()" *mifosxHasPermission="'DELETE_PRODUCTMIX'">
+        <fa-icon icon="trash" class="m-r-10"></fa-icon>
+        {{ 'labels.buttons.Delete' | translate }}
+      </button>
+    </div>
+    <div class="mat-elevation-z8 inline-table restricted-products-box">
+      <table mat-table [dataSource]="restrictedProductsDatasource" matSort>
+        <ng-container matColumnDef="name">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header>
+            {{ 'labels.inputs.Restricted products' | translate }}
+          </th>
+          <td mat-cell *matCellDef="let product">{{ product.name }}</td>
+        </ng-container>
 
-  <div class="mat-elevation-z8 inline-table">
-    <table mat-table [dataSource]="restrictedProductsDatasource" matSort>
-      <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Restricted products' | translate }}</th>
-        <td mat-cell *matCellDef="let product">{{ product.name }}</td>
-      </ng-container>
-
-      <tr mat-header-row *matHeaderRowDef="restrictedProductsDisplayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: restrictedProductsDisplayedColumns"></tr>
-    </table>
+        <tr mat-header-row *matHeaderRowDef="restrictedProductsDisplayedColumns"></tr>
+        <tr mat-row *matRowDef="let row; columns: restrictedProductsDisplayedColumns"></tr>
+      </table>
 
-    <mat-paginator #restricted [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
+      <mat-paginator #restricted [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
+    </div>
   </div>
 </div>

src/app/products/products-mix/view-product-mix/view-product-mix.component.scss

@@ -1,3 +1,40 @@
+.allowed-products-align {
+  margin-top: 19px;
+}
+
+.product-mix-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 32px;
+  justify-content: center;
+  width: 100%;
+}
+
+.restricted-products-col {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  min-width: 340px;
+  justify-content: flex-start;
+}
+
+.action-buttons-wrapper {
+  width: 45%;
+  margin-left: auto;
+  margin-bottom: 8px;
+}
+
+.restricted-products-box {
+  position: relative;
+}
+
+.action-buttons {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  margin-bottom: 16px;
+}
+
 .container {
   display: flex;
   align-items: flex-start;