aConnect
/
aConnect-UX
7
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

Refactor logging component UI and logic

Browse Source 
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.
dev-pending-20-01-2026-v1
Naeem Ullah 2 weeks ago
parent efbf56adbc
commit 6df0195ed8
4 changed files with 259 additions and 275 deletions
Show Stats Download Patch File Download Diff File

272
src/app/logging/logging.component.html
Unescape Escape View File

@ -1,205 +1,157 @@
<div id="layout-wrapper">
<div class="inner-pg-sp">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="d-sm-flex align-items-center justify-content-between navbar-header p-0">
</div>
</div>
</div>
<div class="container-fluid">
<!-- SEARCH FORM -->
<div class="col-xl-12 mt-4">
<div class="card border">
<div class="card-body">
<div class="table-section">
<div class="row">
<div class="col-lg-12">
<div class="card-body mt-2 p-0">
<div class="card mb-0 mt-2">
<div
class="card-header font-edit-13-child d-flex justify-content-between align-items-center">
{{'loggerManager' | translate}}
<div class="card-header font-edit-13-child">
{{ "loggerManager" | translate }}
</div>
<div class="card-body">
<form [formGroup]="logsSearchForm">
<div class="row g-3 mb-3">
<div class="col-md-6">
<div class="d-flex align-items-center gap-2">
<label for="fromDate" class="text-nowrap">
{{ 'fromDate' | translate }}<span
class="mandatory">*</span>
<label>
{{ "fromDate" | translate }}
<span class="mandatory">*</span>
</label>
<div
class="password-wrapper position-relative w-100">
<div
class="d-flex flex-row align-items-stretch">
<input formControlName="fromDate"
type="date" id="fromDate"
class="form-control" appNoWhitespaces />
</div>
<div class="text-danger"
*ngIf="logsSearchForm.get('fromDate')?.touched && logsSearchForm.get('fromDate')?.invalid">
{{ 'fieldRequired' | translate }}
</div>
</div>
</div>
<input
type="date"
formControlName="fromDate"
class="form-control"
/>
</div>
<div class="col-md-6">
<div class="d-flex align-items-start gap-2">
<label for="toDate" class="text-nowrap mt-2">
{{ 'toDate' | translate }}<span
class="mandatory">*</span>
<label>
{{ "toDate" | translate }} <span class="mandatory">*</span>
</label>
<div
class="password-wrapper position-relative w-100">
<input formControlName="toDate" id="toDate"
type="date" class="form-control"
maxlength="500" appNoWhitespaces rows="3" />
<div class="text-danger" *ngIf="
logsSearchForm.get('toDate')?.touched &&
(logsSearchForm.get('toDate')?.invalid || logsSearchForm.errors?.['toDateInvalid'] || logsSearchForm.errors?.['toDateGreaterThanToday'])
">
<div
*ngIf="logsSearchForm.get('toDate')?.hasError('required')">
{{ 'fieldRequired' | translate }}
<input
type="date"
formControlName="toDate"
class="form-control"
/>
</div>
<div
*ngIf="logsSearchForm.errors?.['toDateInvalid']">
{{ 'toDateInvalidError' | translate }}
</div>
<div
*ngIf="logsSearchForm.errors?.['toDateGreaterThanToday']">
{{ 'toDateGreaterThanToday' | translate }}
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row g-3 mb-3">
<div class="col-md-6 ms-auto text-end">
<button [disabled]="logsSearchForm.invalid"
<div class="text-end">
<button
class="btn btn-primary"
[disabled]="logsSearchForm.invalid"
(click)="getlogsData()"
class="btn btn-primary waves-effect waves-light">{{'findLogs'
| translate}}</button>
</div>
>
{{ "findLogs" | translate }}
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<!-- TABLE -->
<div class="col-xl-12 mt-4">
<div class="card border">
<div class="card-body">
<div class="table-section">
<div class="row">
<div class="col-lg-12">
<div class="card-body mt-2 p-0">
<div class="card mb-0 mt-2">
<div
class="card-header font-edit-13-child d-flex justify-content-between align-items-center">
{{'loggerManagerDetails' | translate}}
<div class="d-flex align-items-center gap-2" *ngIf="allItems.length">
<div class="search-box">
<input type="text" class="form-control form-control-sm" [(ngModel)]="searchText"
placeholder="{{ 'search' | translate }}">
<i class="fas fa-search search-icon"></i>
</div>
<i (click)="exportDataInExcel()" id="downloadReport" class="fa fa-download"></i>
<i class="materialdesignicons" (click)="toggleTableCard()">
<ng-container *ngIf="logsDataExpanded; else collapsedIcon">
<i class="dripicons-chevron-up float-end"></i>
</ng-container>
<ng-template #collapsedIcon>
<i class="dripicons-chevron-down float-end"></i>
class="card-header d-flex justify-content-between align-items-center"
>
{{ "loggerManagerDetails" | translate }}
<div class="d-flex gap-2" *ngIf="allItems.length">
<input
type="text"
class="form-control form-control-sm"
placeholder="{{ 'search' | translate }}"
[(ngModel)]="searchText"
(ngModelChange)="applySearch()"
/>
<i
class="fa fa-download cursor-pointer"
(click)="exportDataInExcel()"
></i>
<i class="cursor-pointer" (click)="toggleTableCard()">
<i
*ngIf="logsDataExpanded; else down"
class="dripicons-chevron-up"
></i>
<ng-template #down>
<i class="dripicons-chevron-down"></i>
</ng-template>
</i>
</div>
</div>
<div class="card-body" *ngIf="logsDataExpanded && allItems.length; else noRecordsFound">
<div class="table-responsive">
<table class="table mb-0 border">
<div class="card-body" *ngIf="logsDataExpanded">
<!-- NO RECORDS -->
<div *ngIf="!filteredItems.length" class="text-center text-muted">
{{ "noLoggingDetailsFound" | translate }}
</div>
<!-- TABLE -->
<div *ngIf="filteredItems.length" class="table-responsive">
<table class="table table-bordered mb-0">
<thead class="table-light">
<tr>
<th>{{'loggingID' | translate}}</th>
<th>{{'loggingRequestUri' | translate}}</th>
<th>{{'loggingResponseCode' | translate}}</th>
<th>{{'loggingRemoteIP' | translate}}</th>
<th>{{'loggingDateTime' | translate}}</th>
<th>{{'loggingMethod' | translate}}</th>
<th>{{ "loggingID" | translate }}</th>
<th>{{ "loggingRequestUri" | translate }}</th>
<th>{{ "loggingResponseCode" | translate }}</th>
<th>{{ "loggingRemoteIP" | translate }}</th>
<th>{{ "loggingDateTime" | translate }}</th>
<th>{{ "loggingMethod" | translate }}</th>
</tr>
</thead>
<tbody>
<tr
*ngFor="let logs of (allItems | tableFilter: searchText: ['id','method','remoteIp','requestBody','requestUri','responseCode','userId','dateTime']).slice((currentPage-1)*itemsPerPage, currentPage*itemsPerPage)">
<td>{{logs?.id}}</td>
<td>{{logs?.requestUri}}</td>
<td>{{logs?.responseCode}}</td>
<td>{{logs?.remoteIp}}</td>
<td>{{logs?.dateTime | date:'dd-MM-yyyy, hh:mm a'}}</td>
<td>{{logs?.method}}</td>
<tr *ngFor="let logs of pagedItems">
<td>{{ logs.id }}</td>
<td>{{ logs.requestUri }}</td>
<td>{{ logs.responseCode }}</td>
<td>{{ logs.remoteIp }}</td>
<td>{{ logs.dateTime | date: "dd-MM-yyyy, hh:mm a" }}</td>
<td>{{ logs.method }}</td>
</tr>
</tbody>
</table>
<!-- FOOTER -->
<div
class="d-flex justify-content-between align-items-center mt-3">
<div class="form-group mb-0">
<ng-select class="form-select-sm"
[items]="pageSizeOptions" bindLabel="label"
bindValue="value" [(ngModel)]="itemsPerPage"
class="d-flex justify-content-between align-items-center mt-3"
>
<ng-select
[items]="pageSizeOptions"
bindLabel="label"
bindValue="value"
[(ngModel)]="itemsPerPage"
(change)="itemsPerPageChanged()"
[searchable]="false"
(change)="itemsPerPageChanged()" [clearable]="false"
[dropdownPosition]="'top'">
[clearable]="false">
</ng-select>
</div>
<div class="text-muted" *ngIf="allItems.length > 1">
{{'page' | translate}} {{currentPage}} {{'of' |
translate}} {{totalPages()}} ({{allItems.length}}
{{'totalItems' | translate}})
</div>
<div class="text-muted" *ngIf="allItems.length === 0">
{{'no_record' | translate}}
</div>
<div class="text-muted" *ngIf="allItems.length === 1">
{{'page' | translate}} {{currentPage}} {{'of' |
translate}} {{totalPages()}} ({{allItems.length}}
{{'record' | translate}})
<div class="text-muted">
{{ "page" | translate }} {{ currentPage }}
{{ "of" | translate }} {{ totalPages() }} ({{
filteredItems.length
}}
{{ "totalItems" | translate }})
</div>
<div class="btn-group">
<button class="btn btn-primary waves-effect waves-light"
<button
class="btn btn-primary"
(click)="previousPage()"
[disabled]="currentPage === 1">
{{ 'previous' | translate }}
[disabled]="currentPage === 1"
>
{{ "previous" | translate }}
</button>
<button class="btn btn-primary waves-effect waves-light"
<button
class="btn btn-primary"
(click)="nextPage()"
[disabled]="currentPage >= totalPages()">
{{ 'next' | translate }}
[disabled]="currentPage >= totalPages()"
>
{{ "next" | translate }}
</button>
</div>
</div>
@ -209,16 +161,4 @@
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<ng-template #noRecordsFound>
<div *ngIf="!isLoading && logsList.length === 0" class="text-center text-muted mt-3">
<p>{{'noLoggingDetailsFound' | translate}}</p>
</div>
</ng-template>

149
src/app/logging/logging.component.ts
Unescape Escape View File

@ -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
standalone: true,
imports: [
TranslateModule,
FormsModule,
NgSelectModule,
CommonModule,
ReactiveFormsModule,
],
providers: [ DatePipe ],
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
) { }
ngOnInit() {
this.initializeLogsSearchForm();
}
private excelExportService: ExcelExportService,
) {}
initializeLogsSearchForm() {
this.logsSearchForm = this.fb.group({
ngOnInit(): void {
this.logsSearchForm = this.fb.group(
{
fromDate: ['', Validators.required],
toDate: ['', Validators.required]
toDate: ['', Validators.required],
},
{
validators: toDateAfterFromDateValidator
})
{ 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!);
.set('fromDate', this.datePipe.transform(fromDate, 'dd-MM-yyyy')!)
.set('toDate', this.datePipe.transform(toDate, 'dd-MM-yyyy')!);
this.httpService.requestGET<LogsManagementResponse[]>(URIKey.LOGGER_MANAGER_URI, params).subscribe({
this.httpService
.requestGET<LogsManagementResponse[]>(URIKey.LOGGER_MANAGER_URI, params)
.subscribe({
next: (response) => {
this.logsList = response;
this.allItems = [...this.logsList];
this.allItems = response ?? [];
this.filteredItems = [...this.allItems];
this.currentPage = 1;
this.updatePagedItems();
this.isLoading = false;
},
error: (err) => {
console.error('Error fetching logging details data:', err);
this.logsList = [];
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,
);
}
}

1
src/app/user-management/setup-user/setup-user.component.ts
Unescape Escape View File

@ -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({

6
src/app/utils/app.constants.ts
Unescape Escape View File

@ -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 = (

Write Preview
Loading…
Cancel
Save