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

Merge pull request #3169 from shubhamkumar9199/fix/products-mix-layout-rearrangement

Browse Source 
WEB-735 refactor(products-mix): rearrange layout - restricted above a…
This commit is contained in:
Gopi Kishan
2026-02-16 06:39:59 +05:30
committed by GitHub
parent 2123f4d075 f7a042927f
commit 81335fa214
3 changed files with 33 additions and 78 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
+31 -31
View File
@@ -6,14 +6,41 @@
file, You can obtain one at http://mozilla.org/MPL/2.0/.
-->
<div class="product-mix-row">
<div class="mat-elevation-z8 inline-table">
<div class="layout-row align-end container m-b-20 gap-12px">
<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="layout-column gap-20px container">
<div class="mat-elevation-z8">
<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>
<mat-paginator #restricted [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
</div>
<div class="mat-elevation-z8">
<table mat-table [dataSource]="allowedProductsDatasource" matSort>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef mat-sort-header [ngClass]="'customWidthClass'">
<th mat-header-cell *matHeaderCellDef mat-sort-header>
{{ 'labels.inputs.Allowed Products' | translate }}
</th>
<td mat-cell *matCellDef="let product" [ngClass]="'customWidthClass'">{{ product.name }}</td>
<td mat-cell *matCellDef="let product">{{ product.name }}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="allowedProductsDisplayedColumns"></tr>
@@ -22,31 +49,4 @@
<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>
<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>
</div>
</div>
</div>
src/app/products/products-mix/view-product-mix/view-product-mix.component.scss
+1 -45
View File
@@ -6,50 +6,6 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
*/
.allowed-products-align {
margin-top: 19px;
}
.product-mix-row {
display: flex;
align-items: flex-start;
gap: 32px;
justify-content: center;
table {
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;
justify-content: space-evenly;
.inline-table {
display: inline-block;
width: 45%;
}
}
src/app/products/products-mix/view-product-mix/view-product-mix.component.ts
+1 -2
View File
@@ -31,7 +31,7 @@ import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.co
import { TranslateService } from '@ngx-translate/core';
import { ProductsService } from 'app/products/products.service';
import { FaIconComponent } from '@fortawesome/angular-fontawesome';
import { NgClass } from '@angular/common';
import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
/**
@@ -50,7 +50,6 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
MatHeaderCellDef,
MatHeaderCell,
MatSortHeader,
NgClass,
MatCellDef,
MatCell,
MatHeaderRowDef,