fixed small bugs and adjusted styling #37

Merged
naeem.ullah merged 2 commits from mazdak/UX-styling into dev-pending-01-01-2026 3 weeks ago

@ -1,28 +0,0 @@
import { Pipe, PipeTransform } from '@angular/core';
import { TransactionLog } from '../../models/user';
@Pipe({
name: 'transactionLogFilter',
standalone: true
})
export class TransactionLogFilterPipe implements PipeTransform {
transform(logs: TransactionLog[], searchText: string): TransactionLog[] {
if (!logs || !searchText) {
return logs;
}
const search = searchText.toLowerCase();
return logs.filter(log =>
log.logId?.toString().toLowerCase().includes(search) ||
log.porOrgacode?.toLowerCase().includes(search) ||
log.transactionID?.toLowerCase().includes(search) ||
log.drMbmbkmsnumber?.toLowerCase().includes(search) ||
log.crMbmbkmsnumber?.toLowerCase().includes(search) ||
log.ppmPymdcode?.toLowerCase().includes(search) ||
log.sgtGntrdate?.toLowerCase().includes(search) ||
log.channelCode?.toLowerCase().includes(search) ||
log.createdAt?.toLowerCase().includes(search)
);
}
}

@ -1,22 +0,0 @@
import { Pipe, PipeTransform } from '@angular/core';
import { SetupUser } from '../../models/user';
@Pipe({
name: 'userFilter',
standalone: true
})
export class UserFilterPipe implements PipeTransform {
transform(users: SetupUser[], searchText: string): SetupUser[] {
if (!users || !searchText.trim()) {
return users;
}
const search = searchText.toLowerCase();
return users.filter(user =>
user.userId.toLowerCase().includes(search) ||
user.userFullname.toLowerCase().includes(search) ||
user.email.toLowerCase().includes(search)
);
}
}

@ -32,8 +32,8 @@
<i (click)="exportDataInExcel()" id="downloadReport" class="fa fa-download"></i> <i (click)="exportDataInExcel()" id="downloadReport" class="fa fa-download"></i>
</div> </div>
<i class="materialdesignicons"> <i class="materialdesignicons" (click)="toggleTableCard()">
<ng-container *ngIf="renewalDataExpanded; else collapsedIcon"> <ng-container *ngIf="transactionDataExpanded; else collapsedIcon">
<i class="dripicons-chevron-up float-end"></i> <i class="dripicons-chevron-up float-end"></i>
</ng-container> </ng-container>
<ng-template #collapsedIcon> <ng-template #collapsedIcon>
@ -44,7 +44,7 @@
</div> </div>
<div class="card-body"> <div class="card-body" *ngIf="transactionDataExpanded && allItems.length; else noRecordsFound">
<div *ngIf="isLoading" class="text-center text-muted"> <div *ngIf="isLoading" class="text-center text-muted">
<p>{{'loadingTransactionLogs' | translate}}</p> <p>{{'loadingTransactionLogs' | translate}}</p>
</div> </div>
@ -126,3 +126,8 @@
</div> </div>
</div> </div>
</div> </div>
<ng-template #noRecordsFound>
<div *ngIf="!isLoading && allItems.length === 0" class="text-center text-muted mt-3">
<p>{{'noTransactionLogsFound' | translate}}</p>
</div>
</ng-template>

@ -31,7 +31,8 @@ throw new Error('Method not implemented.');
pagedItems: any[] = []; pagedItems: any[] = [];
errorMessage: string = ''; errorMessage: string = '';
searchText: string = ''; searchText: string = '';
allItems: any; allItems: TransactionLog[] = [];
transactionDataExpanded: boolean = true
constructor( constructor(
private excelExportService: ExcelExportService, private excelExportService: ExcelExportService,
@ -65,7 +66,9 @@ throw new Error('Method not implemented.');
}); });
} }
toggleTableCard(): void {
this.transactionDataExpanded = !this.transactionDataExpanded;
}
itemsPerPageChanged(): void { itemsPerPageChanged(): void {
this.currentPage = 1; this.currentPage = 1;
this.updatePagedItems(); this.updatePagedItems();

@ -127,7 +127,7 @@
{{ 'SelectRole' | translate }}<span class="mandatory">*</span> {{ 'SelectRole' | translate }}<span class="mandatory">*</span>
</label> </label>
<div class="position-relative w-100"> <div class="position-relative w-100">
<ng-select id="userRole" class="form-select" formControlName="userRole" [items]="roleOptions" bindLabel="label" <ng-select id="userRole" class="form-select form-select-narrow" formControlName="userRole" [items]="roleOptions" bindLabel="label"
bindValue="value" placeholder="{{ 'SelectRole' | translate }}" > bindValue="value" placeholder="{{ 'SelectRole' | translate }}" >
</ng-select> </ng-select>

@ -0,0 +1,6 @@
.form-select-narrow{
width: 98.3% !important;
}
.form-select-narrow .ng-clear-zone {
display: none;
}

@ -31,7 +31,7 @@
class="mandatory">*</span> class="mandatory">*</span>
</label> </label>
<div class="password-wrapper position-relative w-100"> <div class="password-wrapper position-relative w-100">
<input type="text" id="renewalDate" <input type="text" id="thirdPartyId"
formControlName="thirdPartyId" formControlName="thirdPartyId"
class="form-control" class="form-control"
placeholder="{{ 'ThirdPartyID' | translate }}" /> placeholder="{{ 'ThirdPartyID' | translate }}" />
@ -52,7 +52,7 @@
class="mandatory">*</span> class="mandatory">*</span>
</label> </label>
<div class="d-flex flex-column w-100"> <div class="d-flex flex-column w-100">
<input type="text" id="renewalDate" <input type="text" id="thirdPartyName"
class="form-control" class="form-control"
formControlName="thirdPartyName" formControlName="thirdPartyName"
placeholder="{{ 'thirdPartyNamePlaceholder' | translate }}" /> placeholder="{{ 'thirdPartyNamePlaceholder' | translate }}" />
@ -68,7 +68,7 @@
<div class="row g-3 mb-3"> <div class="row g-3 mb-3">
<div class="col-md-6"> <div class="col-md-6">
<div class="d-flex align-items-center gap-2"> <div class="d-flex align-items-center gap-2">
<label for="renewalDate" class="text-nowrap"> <label for="email" class="text-nowrap">
{{ 'Email' | translate }}<span {{ 'Email' | translate }}<span
class="mandatory">*</span> class="mandatory">*</span>
</label> </label>
@ -98,7 +98,7 @@
class="mandatory">*</span> class="mandatory">*</span>
</label> </label>
<div class="d-flex flex-column w-100"> <div class="d-flex flex-column w-100">
<input type="text" id="renewalDate" <input type="text" id="address"
class="form-control" class="form-control"
formControlName="address" formControlName="address"
placeholder="{{ 'Address' | translate }}" /> placeholder="{{ 'Address' | translate }}" />
@ -120,7 +120,7 @@
class="mandatory">*</span> class="mandatory">*</span>
</label> </label>
<div class="d-flex flex-column w-100"> <div class="d-flex flex-column w-100">
<input type="text" id="renewalDate" <input type="text" id="phoneNumber"
class="form-control" class="form-control"
formControlName="phoneNumber" formControlName="phoneNumber"
placeholder="{{ 'phoneNumberPlaceholder' | translate }}" /> placeholder="{{ 'phoneNumberPlaceholder' | translate }}" />
@ -145,7 +145,7 @@
class="mandatory">*</span> class="mandatory">*</span>
</label> </label>
<div class="d-flex flex-column w-100"> <div class="d-flex flex-column w-100">
<input type="text" id="renewalDate" <input type="text" id="newNumberOfAccounts"
class="form-control" class="form-control"
formControlName="newNumberOfAccounts" formControlName="newNumberOfAccounts"
placeholder="{{ 'newNoOfAccountsPlaceholder' | translate }}" /> placeholder="{{ 'newNoOfAccountsPlaceholder' | translate }}" />
@ -224,8 +224,8 @@
placeholder="{{ 'search' | translate }}"> placeholder="{{ 'search' | translate }}">
<i class="fas fa-search search-icon"></i> <i class="fas fa-search search-icon"></i>
</div> </div>
<i class="materialdesignicons"> <i class="materialdesignicons" (click)="toggleTableCard()">
<ng-container *ngIf="renewalDataExpanded; else collapsedIcon"> <ng-container *ngIf="thirdPartyRegExpanded; else collapsedIcon">
<i class="dripicons-chevron-up float-end"></i> <i class="dripicons-chevron-up float-end"></i>
</ng-container> </ng-container>
<ng-template #collapsedIcon> <ng-template #collapsedIcon>
@ -234,7 +234,8 @@
</i> </i>
</div> </div>
</div> </div>
<div class="card-body"> <!-- <div class="card-body" *ngIf="thirdPartyRegExpanded && allItems.length; else noRecordsFound"> -->
<div class="card-body" *ngIf="thirdPartyRegExpanded; else noRecordsFound">
<div class="table-responsive"> <div class="table-responsive">
<table class="table mb-0 border"> <table class="table mb-0 border">
<thead class="table-light"> <thead class="table-light">
@ -315,3 +316,8 @@
</div> </div>
</div> </div>
</div> </div>
<ng-template #noRecordsFound>
<div *ngIf="!isLoading && allItems.length === 0" class="text-center text-muted mt-3">
<p>{{'noThirdPartyRegFound' | translate}}</p>
</div>
</ng-template>

@ -24,6 +24,9 @@ export class ThirdPartyRegistrationComponent implements OnInit {
pageSizeOptions = pageSizeOptions; pageSizeOptions = pageSizeOptions;
itemsPerPage: number = 5; itemsPerPage: number = 5;
buttonPermissions: any; buttonPermissions: any;
thirdPartyRegExpanded: boolean = true;
allItems: [] = [];
isLoading: boolean = false;
@ViewChild(PasswordHideShowComponent) passwordHideShow?: PasswordHideShowComponent; @ViewChild(PasswordHideShowComponent) passwordHideShow?: PasswordHideShowComponent;
constructor( constructor(
@ -81,4 +84,8 @@ export class ThirdPartyRegistrationComponent implements OnInit {
getButtonPermissions() { getButtonPermissions() {
this.buttonPermissions = this.buttonManagementService.buttonPermissions["thirdPartyRegistration"]; this.buttonPermissions = this.buttonManagementService.buttonPermissions["thirdPartyRegistration"];
} }
toggleTableCard(): void {
this.thirdPartyRegExpanded = !this.thirdPartyRegExpanded;
}
} }

@ -191,6 +191,7 @@
"transactionLogs": "سجلات المعاملات", "transactionLogs": "سجلات المعاملات",
"loadingTransactionLogs": "جاري تحميل سجلات المعاملات...", "loadingTransactionLogs": "جاري تحميل سجلات المعاملات...",
"noTransactionLogsFound": "لم يتم العثور على سجلات معاملات.", "noTransactionLogsFound": "لم يتم العثور على سجلات معاملات.",
"noThirdPartyRegFound":"لم يتم العثور على تفاصيل تسجيل الطرف الثالث",
"logID": "معرف السجل", "logID": "معرف السجل",
"organization": "المنظمة", "organization": "المنظمة",
"transactionID": "معرف المعاملة", "transactionID": "معرف المعاملة",

@ -250,6 +250,7 @@
"toDateInvalidError": "To Date must be greater than or equal to From Date", "toDateInvalidError": "To Date must be greater than or equal to From Date",
"noLoggingDetailsFound": "No Logging Details found", "noLoggingDetailsFound": "No Logging Details found",
"noUserDetailsFound":"No User Details found", "noUserDetailsFound":"No User Details found",
"noThirdPartyRegFound":"No Third Party Registration Details Found",
"ERR_SEC_0001": "Email already exists", "ERR_SEC_0001": "Email already exists",
"ERR_SEC_0002": "Username already exists", "ERR_SEC_0002": "Username already exists",
"ERR_SEC_0003": "Old Password is not correct", "ERR_SEC_0003": "Old Password is not correct",

Loading…
Cancel
Save