CBSNexora/cbsnexora
4
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

WEB-438 Improve Visibility and Placement of Edit and Delete Buttons on Product Mix Page

Browse Source
This commit is contained in:
Soni Jay
2025-12-03 04:35:34 +05:30
parent fe49b281fb
commit 8c132384e5
2 changed files with 62 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/products/products-mix/view-product-mix/view-product-mix.component.html
+25 -23
View File
@@ -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
+37
View File
@@ -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;