From 6df0195ed8ddf4a4ca9550449725417271c096ec Mon Sep 17 00:00:00 2001 From: Naeem Ullah Date: Thu, 22 Jan 2026 16:16:52 +0500 Subject: [PATCH] Refactor logging component UI and logic Simplified and modernized the logging.component.html layout, replacing nested cards and redundant markup with a cleaner structure. Refactored logging.component.ts to improve data flow: search, filtering, and pagination are now handled in the component instead of the template pipe. Updated page size options in app.constants.ts for better usability. Minor cleanup in setup-user.component.ts. --- src/app/logging/logging.component.html | 360 ++++++++---------- src/app/logging/logging.component.ts | 167 +++++--- .../setup-user/setup-user.component.ts | 1 - src/app/utils/app.constants.ts | 6 +- 4 files changed, 259 insertions(+), 275 deletions(-) diff --git a/src/app/logging/logging.component.html b/src/app/logging/logging.component.html index 269b92a..b3947f1 100644 --- a/src/app/logging/logging.component.html +++ b/src/app/logging/logging.component.html @@ -1,224 +1,164 @@
-
-
-
-
-
- -
-
+
+
+ +
+
+
+
+ {{ "loggerManager" | translate }}
-
-
-
-
-
-
-
-
-
-
- {{'loggerManager' | translate}} -
-
-
-
-
-
- -
-
- - -
-
- {{ 'fieldRequired' | translate }} -
-
-
-
-
-
- -
- - -
-
- {{ 'fieldRequired' | translate }} -
- -
- {{ 'toDateInvalidError' | translate }} -
-
- {{ 'toDateGreaterThanToday' | translate }} -
-
- - - -
-
-
- -
- -
-
- - - -
-
+ +
+
+ + +
- -
-
-
-
-
-
-
-
+
+ +
+
+ +
+ +
+ +
+
+
+ + +
+
+
+ {{ "loggerManagerDetails" | translate }} + +
+ + + + + + + + + +
-
-
-
-
-
-
-
-
-
-
- {{'loggerManagerDetails' | translate}} -
-
- - -
+
- - - - - - - - - - -
-
-
-
- - - - - - - - - - - - - - - - - - - - - -
{{'loggingID' | translate}}{{'loggingRequestUri' | translate}}{{'loggingResponseCode' | translate}}{{'loggingRemoteIP' | translate}}{{'loggingDateTime' | translate}}{{'loggingMethod' | translate}}
{{logs?.id}}{{logs?.requestUri}}{{logs?.responseCode}}{{logs?.remoteIp}}{{logs?.dateTime | date:'dd-MM-yyyy, hh:mm a'}}{{logs?.method}}
-
-
- - -
+
+ +
+ {{ "noLoggingDetailsFound" | translate }} +
-
- {{'page' | translate}} {{currentPage}} {{'of' | - translate}} {{totalPages()}} ({{allItems.length}} - {{'totalItems' | translate}}) -
-
- {{'no_record' | translate}} -
-
- {{'page' | translate}} {{currentPage}} {{'of' | - translate}} {{totalPages()}} ({{allItems.length}} - {{'record' | translate}}) -
+ +
+ + + + + + + + + + + + + + + + + + + + + + +
{{ "loggingID" | translate }}{{ "loggingRequestUri" | translate }}{{ "loggingResponseCode" | translate }}{{ "loggingRemoteIP" | translate }}{{ "loggingDateTime" | translate }}{{ "loggingMethod" | translate }}
{{ logs.id }}{{ logs.requestUri }}{{ logs.responseCode }}{{ logs.remoteIp }}{{ logs.dateTime | date: "dd-MM-yyyy, hh:mm a" }}{{ logs.method }}
+ + +
+ + + +
+ {{ "page" | translate }} {{ currentPage }} + {{ "of" | translate }} {{ totalPages() }} ({{ + filteredItems.length + }} + {{ "totalItems" | translate }}) +
-
- - -
-
-
-
-
-
-
-
-
-
-
+
+ + +
+
+
+
+
- -
-

{{'noLoggingDetailsFound' | translate}}

-
- \ No newline at end of file diff --git a/src/app/logging/logging.component.ts b/src/app/logging/logging.component.ts index 2aa4cd8..af96f56 100644 --- a/src/app/logging/logging.component.ts +++ b/src/app/logging/logging.component.ts @@ -1,95 +1,139 @@ import { Component, OnInit } from '@angular/core'; -import { FormBuilder, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms'; +import { + FormBuilder, + FormGroup, + FormsModule, + ReactiveFormsModule, + Validators, +} from '@angular/forms'; import { NgSelectModule } from '@ng-select/ng-select'; import { TranslateModule } from '@ngx-translate/core'; -import { LOGGING_DETAILS_FILE_NAME, pageSizeOptions, toDateAfterFromDateValidator } from '../utils/app.constants'; +import { + LOGGING_DETAILS_FILE_NAME, + pageSizeOptions, + toDateAfterFromDateValidator, +} from '../utils/app.constants'; import { CommonModule, DatePipe } from '@angular/common'; import { HttpParams } from '@angular/common/http'; import { URIKey } from '../utils/uri-enums'; import { HttpURIService } from '../app.http.uri.service'; import { LogsManagementResponse } from '../utils/app.interfaces'; -import { TableFilterPipe } from '../shared/pipes/table-filter.pipe'; import { ExcelExportService } from '../shared/services/excel-export.service'; @Component({ selector: 'app-logging', - imports: [ TranslateModule, FormsModule, NgSelectModule, CommonModule, ReactiveFormsModule, - TableFilterPipe - ], - providers: [ DatePipe ], + standalone: true, + imports: [ + TranslateModule, + FormsModule, + NgSelectModule, + CommonModule, + ReactiveFormsModule, + ], + providers: [DatePipe], templateUrl: './logging.component.html', - styleUrl: './logging.component.scss' + styleUrl: './logging.component.scss', }) export class LoggingComponent implements OnInit { - currentPage: number = 1; - pageSizeOptions = pageSizeOptions - logsDataExpanded: boolean = true - itemsPerPage: number = 5; - searchText: any = ''; - allItems: any[] = []; - pagedItems: any[] = []; - logsList: LogsManagementResponse[] = []; logsSearchForm!: FormGroup; - isLoading: boolean = false; + + pageSizeOptions = pageSizeOptions; + itemsPerPage = 10; + currentPage = 1; + + searchText = ''; + + logsDataExpanded = true; + isLoading = false; + + /** DATA LAYERS (do not mix these) */ + allItems: LogsManagementResponse[] = []; // raw API data + filteredItems: LogsManagementResponse[] = []; // after search + pagedItems: LogsManagementResponse[] = []; // table view constructor( private fb: FormBuilder, private httpService: HttpURIService, private datePipe: DatePipe, - private excelExportServic: ExcelExportService - ) { } + private excelExportService: ExcelExportService, + ) {} - ngOnInit() { - this.initializeLogsSearchForm(); - } - - initializeLogsSearchForm() { - this.logsSearchForm = this.fb.group({ - fromDate: ['', Validators.required], - toDate: ['', Validators.required] - }, + ngOnInit(): void { + this.logsSearchForm = this.fb.group( { - validators: toDateAfterFromDateValidator - }) + fromDate: ['', Validators.required], + toDate: ['', Validators.required], + }, + { validators: toDateAfterFromDateValidator }, + ); } - getlogsData(){ - if(this.logsSearchForm.invalid) - return; + getlogsData(): void { + if (this.logsSearchForm.invalid) return; - let formValues = this.logsSearchForm.value; this.isLoading = true; - let fromDateTransformed = this.datePipe.transform(formValues.fromDate, "dd-MM-yyyy"); - let toDateTransformed = this.datePipe.transform(formValues.toDate, "dd-MM-yyyy"); + const { fromDate, toDate } = this.logsSearchForm.value; const params = new HttpParams() - .set('fromDate', fromDateTransformed!) - .set('toDate', toDateTransformed!); - - this.httpService.requestGET(URIKey.LOGGER_MANAGER_URI, params).subscribe({ - next: (response) => { - this.logsList = response; - this.allItems = [...this.logsList]; - this.updatePagedItems(); - this.isLoading = false; - }, - error: (err) => { - console.error('Error fetching logging details data:', err); - this.logsList = []; - this.isLoading = false; - } - }); + .set('fromDate', this.datePipe.transform(fromDate, 'dd-MM-yyyy')!) + .set('toDate', this.datePipe.transform(toDate, 'dd-MM-yyyy')!); + + this.httpService + .requestGET(URIKey.LOGGER_MANAGER_URI, params) + .subscribe({ + next: (response) => { + this.allItems = response ?? []; + this.filteredItems = [...this.allItems]; + this.currentPage = 1; + this.updatePagedItems(); + this.isLoading = false; + }, + error: () => { + this.allItems = []; + this.filteredItems = []; + this.pagedItems = []; + this.isLoading = false; + }, + }); + } + + /** SEARCH — filters DATA, not DOM */ + applySearch(): void { + const value = this.searchText.toLowerCase().trim(); + + if (!value) { + this.filteredItems = [...this.allItems]; + } else { + this.filteredItems = this.allItems.filter((item) => + [ + 'id', + 'method', + 'remoteIp', + 'requestUri', + 'responseCode', + 'userId', + 'dateTime', + ].some((key) => + String((item as any)[key] ?? '') + .toLowerCase() + .includes(value), + ), + ); + } + + this.currentPage = 1; + this.updatePagedItems(); } updatePagedItems(): void { - const startIndex = (this.currentPage - 1) * this.itemsPerPage; - const endIndex = startIndex + this.itemsPerPage; - this.pagedItems = this.allItems.slice(startIndex, endIndex); + const start = (this.currentPage - 1) * this.itemsPerPage; + const end = start + this.itemsPerPage; + this.pagedItems = this.filteredItems.slice(start, end); } totalPages(): number { - return Math.ceil(this.allItems.length / this.itemsPerPage); + return Math.ceil(this.filteredItems.length / this.itemsPerPage); } previousPage(): void { @@ -111,13 +155,14 @@ export class LoggingComponent implements OnInit { this.updatePagedItems(); } - toggleTableCard(){ + toggleTableCard(): void { this.logsDataExpanded = !this.logsDataExpanded; } - exportDataInExcel(){ - this.excelExportServic.exportExcel(this.logsList, LOGGING_DETAILS_FILE_NAME) + exportDataInExcel(): void { + this.excelExportService.exportExcel( + this.filteredItems, + LOGGING_DETAILS_FILE_NAME, + ); } - - } diff --git a/src/app/user-management/setup-user/setup-user.component.ts b/src/app/user-management/setup-user/setup-user.component.ts index ddbe116..39444de 100644 --- a/src/app/user-management/setup-user/setup-user.component.ts +++ b/src/app/user-management/setup-user/setup-user.component.ts @@ -14,7 +14,6 @@ import { HttpErrorResponse, HttpParams } from '@angular/common/http'; import { HttpURIService } from '../../app.http.uri.service'; import { I18NService } from '../../services/i18n.service'; import { SuccessMessages } from '../../utils/enums'; -import { ToastrService, ActiveToast, ToastRef } from 'ngx-toastr'; @Component({ diff --git a/src/app/utils/app.constants.ts b/src/app/utils/app.constants.ts index 77ff20b..6bce9d8 100644 --- a/src/app/utils/app.constants.ts +++ b/src/app/utils/app.constants.ts @@ -5,9 +5,9 @@ export const CONSTANTS = { }; export const pageSizeOptions = [ - { label: '5 items', value: 5 }, - { label: '10 items', value: 10 }, - { label: '20 items', value: 20 } + { value: 10, label: '10 items' }, + { value: 20, label: '20 items' }, + { value: 50, label: '50 items' }, ]; export const toDateAfterFromDateValidator: ValidatorFn = (