Merge pull request 'param-table flow' (#1) from param-table into main
merged param table
This commit is contained in:
commit
fd3bf6c940
@ -8,11 +8,16 @@ import { NotFoundComponent } from './shared/components/not-found/not-found.compo
|
|||||||
import { UserSettingsComponent } from './user-settings/user-settings.component';
|
import { UserSettingsComponent } from './user-settings/user-settings.component';
|
||||||
import { RegisterComponent } from './register/register.component';
|
import { RegisterComponent } from './register/register.component';
|
||||||
import { ForgotPasswordComponent } from './forgot-password/forgot-password.component';
|
import { ForgotPasswordComponent } from './forgot-password/forgot-password.component';
|
||||||
|
import { ParamTableComponent } from './param/table/param-table.component';
|
||||||
|
import { ManageTableRecordComponent } from './param/manage-table-record/manage-table-record.component';
|
||||||
|
import { ManageParamRecordComponent } from './param/manage-param-record/manage-param-record.component';
|
||||||
|
|
||||||
export const routes: Routes = [
|
export const routes: Routes = [
|
||||||
{ path: 'login', component: LoginComponent },
|
{ path: 'login', component: LoginComponent },
|
||||||
{ path: 'register', component: RegisterComponent },
|
{ path: 'register', component: RegisterComponent },
|
||||||
{ path: 'forgot-password', component: ForgotPasswordComponent },
|
{ path: 'forgot-password', component: ForgotPasswordComponent },
|
||||||
|
{ path: 'table-record', component: ManageTableRecordComponent },
|
||||||
|
{ path: 'param-record/:id', component: ManageParamRecordComponent },
|
||||||
{ path: 'usersettings', component: UserSettingsComponent, canActivate: [AuthGuard] },
|
{ path: 'usersettings', component: UserSettingsComponent, canActivate: [AuthGuard] },
|
||||||
{ path: 'home', component: HomeComponent, canActivate: [AuthGuard] },
|
{ path: 'home', component: HomeComponent, canActivate: [AuthGuard] },
|
||||||
{ path: 'service-provider/:id', component: EditServiceProviderComponent, canActivate: [AuthGuard] },
|
{ path: 'service-provider/:id', component: EditServiceProviderComponent, canActivate: [AuthGuard] },
|
||||||
|
|||||||
@ -8,6 +8,7 @@
|
|||||||
<a class="nav-link" (click)="navigateTo('/home')">Home</a>
|
<a class="nav-link" (click)="navigateTo('/home')">Home</a>
|
||||||
<a class="nav-link" (click)="navigateTo('/manageusers')">Users</a>
|
<a class="nav-link" (click)="navigateTo('/manageusers')">Users</a>
|
||||||
<a class="nav-link" (click)="navigateTo('/regions')">Regions</a>
|
<a class="nav-link" (click)="navigateTo('/regions')">Regions</a>
|
||||||
|
<a class="nav-link" (click)="navigateTo('/table-record')">Parameters</a>
|
||||||
|
|
||||||
<div class="profile-container">
|
<div class="profile-container">
|
||||||
<button mat-icon-button (click)="toggleProfileMenu()" class="profile-button">
|
<button mat-icon-button (click)="toggleProfileMenu()" class="profile-button">
|
||||||
|
|||||||
22
src/app/core/models/param/parameters.ts
Normal file
22
src/app/core/models/param/parameters.ts
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
|
||||||
|
export interface ParamProperties {
|
||||||
|
paramId?: number;
|
||||||
|
spid?: number;
|
||||||
|
paramType: string;
|
||||||
|
paramDesc: string;
|
||||||
|
paramValue: string;
|
||||||
|
addlParamValue1: string | null;
|
||||||
|
addlParamValue2: string | null;
|
||||||
|
addlParamValue3: string | null;
|
||||||
|
addlParamValue4: string | null;
|
||||||
|
addlParamValue5: string | null;
|
||||||
|
sortSeq?: number;
|
||||||
|
inactiveCodeFlag: 'Y' | 'N' | null;
|
||||||
|
inactiveDate: string | null;
|
||||||
|
createdBy: string;
|
||||||
|
dateCreated: string;
|
||||||
|
lastUpdatedBy: string | null;
|
||||||
|
lastUpdatedDate: string | null;
|
||||||
|
errorMesg: string | null;
|
||||||
|
userId?: string;
|
||||||
|
}
|
||||||
1
src/app/core/models/param/types.ts
Normal file
1
src/app/core/models/param/types.ts
Normal file
@ -0,0 +1 @@
|
|||||||
|
export type TABLE_MODE = 'TABLE-RECORD' | 'PARAM-RECORD';
|
||||||
113
src/app/core/services/param/param.service.ts
Normal file
113
src/app/core/services/param/param.service.ts
Normal file
@ -0,0 +1,113 @@
|
|||||||
|
import { inject, Injectable } from "@angular/core";
|
||||||
|
import { environment } from "../../../../environments/environment";
|
||||||
|
import { HttpClient } from "@angular/common/http";
|
||||||
|
import { UserService } from "../common/user.service";
|
||||||
|
import { ParamProperties } from "../../models/param/parameters";
|
||||||
|
import { map, Observable } from "rxjs";
|
||||||
|
|
||||||
|
@Injectable({
|
||||||
|
providedIn: 'root'
|
||||||
|
})
|
||||||
|
export class ParamService {
|
||||||
|
private apiUrl = environment.apiUrl;
|
||||||
|
private apiDb = environment.apiDb;
|
||||||
|
|
||||||
|
private http = inject(HttpClient);
|
||||||
|
private userService = inject(UserService);
|
||||||
|
|
||||||
|
getParameters(P_PARAMTYPE: string): Observable<ParamProperties[]> {
|
||||||
|
return this.http.get<any[]>(`${this.apiUrl}/${this.apiDb}/GetParamValues?P_SPID=${this.userService.getUserSpid()}&P_PARAMTYPE=${P_PARAMTYPE}`).pipe(
|
||||||
|
map(response => this.mapToParamValue(response))
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
private mapToParamValue(data: any[]): ParamProperties[] {
|
||||||
|
return data.map((paramValue: any) => ({
|
||||||
|
paramId: paramValue.PARAMID,
|
||||||
|
spid: paramValue.SPID,
|
||||||
|
paramType: paramValue.PARAMTYPE,
|
||||||
|
paramDesc: paramValue.PARAMDESC,
|
||||||
|
paramValue: paramValue.PARAMVALUE,
|
||||||
|
addlParamValue1: paramValue.ADDLPARAMVALUE1,
|
||||||
|
addlParamValue2: paramValue.ADDLPARAMVALUE2,
|
||||||
|
addlParamValue3: paramValue.ADDLPARAMVALUE3,
|
||||||
|
addlParamValue4: paramValue.ADDLPARAMVALUE4,
|
||||||
|
addlParamValue5: paramValue.ADDLPARAMVALUE5,
|
||||||
|
sortSeq: paramValue.SORTSEQ,
|
||||||
|
inactiveCodeFlag: paramValue.INACTIVECODEFLAG,
|
||||||
|
inactiveDate: paramValue.INACTIVEDATE,
|
||||||
|
createdBy: paramValue.CREATEDBY,
|
||||||
|
dateCreated: paramValue.DATECREATED,
|
||||||
|
lastUpdatedBy: paramValue.LASTUPDATEDBY,
|
||||||
|
lastUpdatedDate: paramValue.LASTUPDATEDDATE,
|
||||||
|
errorMesg: paramValue.ERRORMESG,
|
||||||
|
}));
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
createTableRecord(description: string): Observable<any> {
|
||||||
|
|
||||||
|
const paramDetails = {
|
||||||
|
P_TABLEFULLDESC: description,
|
||||||
|
P_USERID: this.userService.getUser(),
|
||||||
|
};
|
||||||
|
|
||||||
|
return this.http.post(`${this.apiUrl}/${this.apiDb}/CreateTableRecord`, paramDetails);
|
||||||
|
}
|
||||||
|
|
||||||
|
createParamRecord(data: ParamProperties): Observable<any> {
|
||||||
|
|
||||||
|
const paramDetails = {
|
||||||
|
p_spid: this.userService.getUserSpid(),
|
||||||
|
P_PARAMTYPE: data.paramType,
|
||||||
|
P_PARAMDESC: data.paramDesc,
|
||||||
|
P_PARAMVALUE: data.paramValue,
|
||||||
|
P_ADDLPARAMVALUE1: data.addlParamValue1,
|
||||||
|
P_ADDLPARAMVALUE2: data.addlParamValue2,
|
||||||
|
P_ADDLPARAMVALUE3: data.addlParamValue3,
|
||||||
|
P_ADDLPARAMVALUE4: data.addlParamValue4,
|
||||||
|
P_ADDLPARAMVALUE5: data.addlParamValue5,
|
||||||
|
P_SORTSEQ: data.sortSeq,
|
||||||
|
P_USERID: this.userService.getUser(),
|
||||||
|
};
|
||||||
|
|
||||||
|
return this.http.post(`${this.apiUrl}/${this.apiDb}/CreateParamRecord`, paramDetails);
|
||||||
|
}
|
||||||
|
|
||||||
|
updateParamRecord(data: ParamProperties): Observable<any> {
|
||||||
|
|
||||||
|
const paramDetails = {
|
||||||
|
P_SPID: this.userService.getUserSpid(),
|
||||||
|
P_PARAMID: data.paramId,
|
||||||
|
P_PARAMDESC: data.paramDesc,
|
||||||
|
P_ADDLPARAMVALUE1: data.addlParamValue1,
|
||||||
|
P_ADDLPARAMVALUE2: data.addlParamValue2,
|
||||||
|
P_ADDLPARAMVALUE3: data.addlParamValue3,
|
||||||
|
P_ADDLPARAMVALUE4: data.addlParamValue4,
|
||||||
|
P_ADDLPARAMVALUE5: data.addlParamValue5,
|
||||||
|
P_SORTSEQ: data.sortSeq,
|
||||||
|
P_USERID: this.userService.getUser(),
|
||||||
|
};
|
||||||
|
|
||||||
|
console.log(paramDetails);
|
||||||
|
|
||||||
|
return this.http.patch(`${this.apiUrl}/${this.apiDb}/UpdateParamRecord`, paramDetails);
|
||||||
|
}
|
||||||
|
|
||||||
|
inActivateParamRecord(paramId: number) {
|
||||||
|
|
||||||
|
const data = {
|
||||||
|
P_PARAMID: paramId,
|
||||||
|
P_USERID: this.userService.getSafeUser()
|
||||||
|
}
|
||||||
|
return this.http.patch(`${this.apiUrl}/${this.apiDb}/InActivateParamRecord`, data);
|
||||||
|
}
|
||||||
|
|
||||||
|
reActivateParamRecord(paramId: number) {
|
||||||
|
const data = {
|
||||||
|
P_PARAMID: paramId,
|
||||||
|
P_USERID: this.userService.getSafeUser()
|
||||||
|
}
|
||||||
|
return this.http.patch(`${this.apiUrl}/${this.apiDb}/ReActivateParamRecord`, data);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1 @@
|
|||||||
|
<app-param-table [table_mode]="table_mode" [paramHeading]="paramHeading"></app-param-table>
|
||||||
@ -0,0 +1,25 @@
|
|||||||
|
import { Component, inject } from '@angular/core';
|
||||||
|
import { TABLE_MODE } from '../../core/models/param/types';
|
||||||
|
import { ParamTableComponent } from '../table/param-table.component';
|
||||||
|
import { ActivatedRoute } from '@angular/router';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-manage-param-record',
|
||||||
|
imports: [ParamTableComponent],
|
||||||
|
templateUrl: './manage-param-record.component.html',
|
||||||
|
styleUrl: './manage-param-record.component.scss'
|
||||||
|
})
|
||||||
|
export class ManageParamRecordComponent {
|
||||||
|
table_mode: TABLE_MODE = 'PARAM-RECORD'
|
||||||
|
paramHeading: string = '';
|
||||||
|
|
||||||
|
private route = inject(ActivatedRoute);
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
|
||||||
|
const param = this.route.snapshot.queryParamMap.get('param');
|
||||||
|
|
||||||
|
this.paramHeading = param || '';
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1 @@
|
|||||||
|
<app-param-table [table_mode]="table_mode"></app-param-table>
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
import { Component } from '@angular/core';
|
||||||
|
import { ParamTableComponent } from '../table/param-table.component';
|
||||||
|
import { TABLE_MODE } from '../../core/models/param/types';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-manage-table-record',
|
||||||
|
imports: [ParamTableComponent],
|
||||||
|
templateUrl: './manage-table-record.component.html',
|
||||||
|
styleUrl: './manage-table-record.component.scss'
|
||||||
|
})
|
||||||
|
export class ManageTableRecordComponent {
|
||||||
|
table_mode: TABLE_MODE = 'TABLE-RECORD'
|
||||||
|
}
|
||||||
264
src/app/param/table/param-table.component.html
Normal file
264
src/app/param/table/param-table.component.html
Normal file
@ -0,0 +1,264 @@
|
|||||||
|
<h2 class="page-header">Manage - {{paramHeading | properCase}}</h2>
|
||||||
|
|
||||||
|
<div class="results-section">
|
||||||
|
<div class="loading-shade" *ngIf="isLoading">
|
||||||
|
<mat-spinner diameter="50"></mat-spinner>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="search-bar">
|
||||||
|
<mat-form-field appearance="outline" floatLabel="auto" class="full-width">
|
||||||
|
<mat-label>Search</mat-label>
|
||||||
|
<input matInput (keyup)="applyFilter($event)" placeholder="Search record..." />
|
||||||
|
<mat-icon matSuffix>search</mat-icon>
|
||||||
|
</mat-form-field>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="actions-bar" [ngClass]="{ 'mb-40': !isParamRecord, 'mb-10': isParamRecord }">
|
||||||
|
<mat-slide-toggle (change)="toggleShowInactiveData()" *ngIf="isParamRecord" [disabled]="paramData.length === 0">
|
||||||
|
<div class="icon-text">Show Inactive Records</div>
|
||||||
|
</mat-slide-toggle>
|
||||||
|
|
||||||
|
<button mat-raised-button color="primary" (click)="addNewParam()">
|
||||||
|
<mat-icon>add</mat-icon>
|
||||||
|
Add New Record
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<table mat-table [dataSource]="dataSource" class="results-table" matSort>
|
||||||
|
|
||||||
|
<!-- PARAMTYPE Column -->
|
||||||
|
<ng-container matColumnDef="ParamType">
|
||||||
|
<th mat-header-cell *matHeaderCellDef mat-sort-header>Type</th>
|
||||||
|
<td mat-cell *matCellDef="let client">{{ client.paramType }}</td>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- PARAMDESC Column -->
|
||||||
|
<ng-container matColumnDef="ParamDesc">
|
||||||
|
<th mat-header-cell *matHeaderCellDef mat-sort-header>Description</th>
|
||||||
|
<td mat-cell *matCellDef="let client">{{ client.paramDesc || '--'}}</td>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- PARAMVALUE Column -->
|
||||||
|
<ng-container matColumnDef="paramvalue">
|
||||||
|
<th mat-header-cell *matHeaderCellDef mat-sort-header>Value</th>
|
||||||
|
<td mat-cell *matCellDef="let client">{{ client.paramValue }}</td>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- ADDLPARAMVALUE1 Column -->
|
||||||
|
<ng-container matColumnDef="addlparamvalue1">
|
||||||
|
<th mat-header-cell *matHeaderCellDef mat-sort-header>Additional Value 1</th>
|
||||||
|
<td mat-cell *matCellDef="let client">{{ client.addlParamValue1 || '--' }}</td>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- ADDLPARAMVALUE2 Column -->
|
||||||
|
<ng-container matColumnDef="addlparamvalue2">
|
||||||
|
<th mat-header-cell *matHeaderCellDef mat-sort-header>Additional Value 2</th>
|
||||||
|
<td mat-cell *matCellDef="let client">{{ client.addlParamValue2 || '--'}}</td>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- ADDLPARAMVALUE3 Column -->
|
||||||
|
<ng-container matColumnDef="addlparamvalue3">
|
||||||
|
<th mat-header-cell *matHeaderCellDef mat-sort-header>Additional Value 3</th>
|
||||||
|
<td mat-cell *matCellDef="let client">{{ client.addlParamValue3 || '--' }}</td>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- ADDLPARAMVALUE4 Column -->
|
||||||
|
<ng-container matColumnDef="addlparamvalue4">
|
||||||
|
<th mat-header-cell *matHeaderCellDef mat-sort-header>Additional Value 4</th>
|
||||||
|
<td mat-cell *matCellDef="let client">{{ client.addlParamValue4 || '--' }}</td>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- ADDLPARAMVALUE5 Column -->
|
||||||
|
<ng-container matColumnDef="addlparamvalue5">
|
||||||
|
<th mat-header-cell *matHeaderCellDef mat-sort-header>Additional Value 5</th>
|
||||||
|
<td mat-cell *matCellDef="let client">{{ client.addlParamValue5 || '--'}}</td>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- Actions Column -->
|
||||||
|
<ng-container matColumnDef="actions">
|
||||||
|
<th mat-header-cell *matHeaderCellDef class="actions-header">Actions</th>
|
||||||
|
<td mat-cell *matCellDef="let client" class="actions-cell">
|
||||||
|
<div class="action-container">
|
||||||
|
<button mat-icon-button color="primary" *ngIf="!isParamRecord"
|
||||||
|
(click)="onRecordClick(client?.paramValue , client?.paramDesc )"
|
||||||
|
[matTooltip]="client.paramDesc ">
|
||||||
|
<mat-icon>chevron_right</mat-icon>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button mat-icon-button color="primary" *ngIf="isParamRecord" (click)="onEditParam(client)"
|
||||||
|
[matTooltip]="'edit'">
|
||||||
|
<mat-icon>edit</mat-icon>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button mat-icon-button color="warn"
|
||||||
|
*ngIf="isParamRecord && (client.inactiveCodeFlag === 'N' || !client.inactiveCodeFlag)"
|
||||||
|
matTooltip="Inactivate" (click)="inActivateParamRecord(client.paramId)">
|
||||||
|
<mat-icon>delete</mat-icon>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button mat-icon-button color="warn" *ngIf="(isParamRecord) && client.inactiveCodeFlag === 'Y'"
|
||||||
|
matTooltip="Reactivate" (click)="reActivateParamRecord(client.paramId)">
|
||||||
|
<mat-icon>delete_outline</mat-icon>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||||
|
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
||||||
|
|
||||||
|
<tr matNoDataRow *matNoDataRow>
|
||||||
|
<td [attr.colspan]="displayedColumns.length" class="no-data-message">
|
||||||
|
<mat-icon>info</mat-icon>
|
||||||
|
<span>No records found matching your criteria</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
<mat-paginator [length]="dataSource.data.length" [pageSizeOptions]="[userPreferences.pageSize || 2]"
|
||||||
|
[hidePageSize]="true" showFirstLastButtons></mat-paginator>
|
||||||
|
|
||||||
|
<!-- Contact Form -->
|
||||||
|
<div class="form-container" *ngIf="showForm">
|
||||||
|
<form [formGroup]="paramForm" (ngSubmit)="saveRecord()">
|
||||||
|
<div class="form-header">
|
||||||
|
<h3>{{ !isParamRecord ? 'Add New Table' : isEditing ? 'Edit Param' : 'Add New Param' }}
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-row">
|
||||||
|
<mat-form-field appearance="outline" *ngIf="isParamRecord">
|
||||||
|
<mat-label>Param Type</mat-label>
|
||||||
|
<input matInput formControlName="paramType" readonly required>
|
||||||
|
<mat-error *ngIf="paramForm.get('paramType')?.errors?.['required']">
|
||||||
|
Param Type is required
|
||||||
|
</mat-error>
|
||||||
|
<mat-error *ngIf="paramForm.get('paramType')?.errors?.['maxlength']">
|
||||||
|
Maximum 10 characters allowed
|
||||||
|
</mat-error>
|
||||||
|
</mat-form-field>
|
||||||
|
|
||||||
|
<mat-form-field appearance="outline">
|
||||||
|
<mat-label>{{!isParamRecord ? 'Description' : 'Description'}}</mat-label>
|
||||||
|
<input matInput formControlName="paramDesc" required>
|
||||||
|
<mat-error *ngIf="paramForm.get('paramDesc')?.errors?.['required']">
|
||||||
|
{{!isParamRecord ? 'Table Description' : 'Param Description'}} is required
|
||||||
|
</mat-error>
|
||||||
|
<mat-error *ngIf="paramForm.get('paramDesc')?.errors?.['maxlength']">
|
||||||
|
Maximum 100 characters allowed
|
||||||
|
</mat-error>
|
||||||
|
</mat-form-field>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-row">
|
||||||
|
|
||||||
|
<mat-form-field appearance="outline" *ngIf="isParamRecord">
|
||||||
|
<mat-label>Value</mat-label>
|
||||||
|
<input matInput formControlName="paramValue" [readonly]="isEditing" required>
|
||||||
|
<mat-error *ngIf="paramForm.get('paramValue')?.errors?.['required']">
|
||||||
|
Param Value is required
|
||||||
|
</mat-error>
|
||||||
|
<mat-error *ngIf="paramForm.get('paramValue')?.errors?.['maxlength']">
|
||||||
|
Maximum 20 characters allowed
|
||||||
|
</mat-error>
|
||||||
|
</mat-form-field>
|
||||||
|
|
||||||
|
<mat-form-field appearance="outline" *ngIf="isParamRecord">
|
||||||
|
<mat-label>Additional Value 1</mat-label>
|
||||||
|
<input matInput formControlName="addlParamValue1">
|
||||||
|
<mat-error *ngIf="paramForm.get('addlParamValue1')?.errors?.['maxlength']">
|
||||||
|
Maximum 20 characters allowed
|
||||||
|
</mat-error>
|
||||||
|
</mat-form-field>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-row">
|
||||||
|
|
||||||
|
<mat-form-field appearance="outline" *ngIf="isParamRecord">
|
||||||
|
<mat-label>Additional Value 2</mat-label>
|
||||||
|
<input matInput formControlName="addlParamValue2">
|
||||||
|
<mat-error *ngIf="paramForm.get('addlParamValue2')?.errors?.['maxlength']">
|
||||||
|
Maximum 20 characters allowed
|
||||||
|
</mat-error>
|
||||||
|
</mat-form-field>
|
||||||
|
|
||||||
|
<mat-form-field appearance="outline" *ngIf="isParamRecord">
|
||||||
|
<mat-label>Additional Value 3</mat-label>
|
||||||
|
<input matInput formControlName="addlParamValue3">
|
||||||
|
<mat-error *ngIf="paramForm.get('addlParamValue3')?.errors?.['maxlength']">
|
||||||
|
Maximum 20 characters allowed
|
||||||
|
</mat-error>
|
||||||
|
</mat-form-field>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-row">
|
||||||
|
|
||||||
|
<mat-form-field appearance="outline" *ngIf="isParamRecord">
|
||||||
|
<mat-label>Additional Value 4</mat-label>
|
||||||
|
<input matInput formControlName="addlParamValue4">
|
||||||
|
<mat-error *ngIf="paramForm.get('addlParamValue4')?.errors?.['maxlength']">
|
||||||
|
Maximum 20 characters allowed
|
||||||
|
</mat-error>
|
||||||
|
</mat-form-field>
|
||||||
|
|
||||||
|
<mat-form-field appearance="outline" *ngIf="isParamRecord">
|
||||||
|
<mat-label>Additional Value 5</mat-label>
|
||||||
|
<input matInput formControlName="addlParamValue5">
|
||||||
|
<mat-error *ngIf="paramForm.get('addlParamValue5')?.errors?.['maxlength']">
|
||||||
|
Maximum 20 characters allowed
|
||||||
|
</mat-error>
|
||||||
|
</mat-form-field>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div *ngIf="isEditing" class="readonly-section">
|
||||||
|
<div class="readonly-fields">
|
||||||
|
<div class="field-column">
|
||||||
|
<!-- Last Changed By -->
|
||||||
|
<div class="readonly-field">
|
||||||
|
<label>Last Changed By</label>
|
||||||
|
<div class="readonly-value">
|
||||||
|
{{paramReadOnlyFields.lastChangedBy || 'N/A'}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Inactive status -->
|
||||||
|
<div class="readonly-field">
|
||||||
|
<label>Inactive Status </label>
|
||||||
|
<div class="readonly-value">
|
||||||
|
{{paramReadOnlyFields.isInactive === true ? 'Yes' : 'No' }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="field-column">
|
||||||
|
|
||||||
|
<!-- Last Changed Date -->
|
||||||
|
<div class="readonly-field">
|
||||||
|
<label>Last Changed Date</label>
|
||||||
|
<div class="readonly-value">
|
||||||
|
{{(paramReadOnlyFields.lastChangedDate | date:'mediumDate':'UTC') || 'N/A'}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Inactivated Date -->
|
||||||
|
<div class="readonly-field">
|
||||||
|
<label>Inactivated Date</label>
|
||||||
|
<div class="readonly-value">
|
||||||
|
{{(paramReadOnlyFields.inactivatedDate | date:'mediumDate':'UTC') || 'N/A'}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-actions">
|
||||||
|
<button mat-raised-button color="primary" type="submit" [disabled]="paramForm.invalid">
|
||||||
|
{{ isEditing ? 'Update' : 'Save' }}
|
||||||
|
</button>
|
||||||
|
<button mat-button type="button" (click)="cancelEdit()">Cancel</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
188
src/app/param/table/param-table.component.scss
Normal file
188
src/app/param/table/param-table.component.scss
Normal file
@ -0,0 +1,188 @@
|
|||||||
|
.page-header {
|
||||||
|
margin: 0.5rem 0px;
|
||||||
|
color: var(--mat-sys-primary);
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.actions-bar {
|
||||||
|
clear: both;
|
||||||
|
margin-bottom: -16px;
|
||||||
|
|
||||||
|
&.mb-40 {
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.mb-10 {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
mat-slide-toggle {
|
||||||
|
transform: scale(0.8);
|
||||||
|
margin-left: -1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-text {
|
||||||
|
padding-left: 10px !important;
|
||||||
|
font-size: 18px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-container {
|
||||||
|
background-color: white;
|
||||||
|
padding: 24px;
|
||||||
|
border-radius: 8px;
|
||||||
|
margin-top: 16px;
|
||||||
|
|
||||||
|
.form-header {
|
||||||
|
margin-bottom: 24px;
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
margin: 0;
|
||||||
|
color: var(--mat-sys-primary);
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
form {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 16px;
|
||||||
|
|
||||||
|
.form-row {
|
||||||
|
display: flex;
|
||||||
|
gap: 16px;
|
||||||
|
|
||||||
|
mat-form-field {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.small-field {
|
||||||
|
max-width: 120px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-actions {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
gap: 16px;
|
||||||
|
margin-top: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.readonly-section {
|
||||||
|
padding-top: 0.5rem;
|
||||||
|
border-top: 1px solid #eee;
|
||||||
|
|
||||||
|
.readonly-fields {
|
||||||
|
display: flex;
|
||||||
|
gap: 2rem;
|
||||||
|
|
||||||
|
.field-column {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.readonly-field {
|
||||||
|
label {
|
||||||
|
display: block;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: #666;
|
||||||
|
margin-bottom: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.readonly-value {
|
||||||
|
padding: 0.25rem;
|
||||||
|
font-size: 0.9375rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.results-section {
|
||||||
|
position: relative;
|
||||||
|
overflow: auto;
|
||||||
|
border-radius: 8px;
|
||||||
|
|
||||||
|
.loading-shade {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background: rgba(255, 255, 255, 0.7);
|
||||||
|
z-index: 1;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
mat-table {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
mat-icon {
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
transform: scale(1.1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-column-actions {
|
||||||
|
width: 180px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-column-defaultContact {
|
||||||
|
width: 80px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.no-data-message {
|
||||||
|
text-align: center;
|
||||||
|
padding: 0.9rem;
|
||||||
|
color: rgba(0, 0, 0, 0.54);
|
||||||
|
|
||||||
|
mat-icon {
|
||||||
|
font-size: 1rem;
|
||||||
|
width: 1rem;
|
||||||
|
height: 1rem;
|
||||||
|
margin-bottom: -3px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
mat-paginator {
|
||||||
|
border-top: 1px solid rgba(0, 0, 0, 0.12);
|
||||||
|
border-radius: 0 0 8px 8px;
|
||||||
|
padding-top: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-container {
|
||||||
|
display: flex !important;
|
||||||
|
justify-content: center !important;
|
||||||
|
align-items: center !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-bar {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 10px;
|
||||||
|
|
||||||
|
|
||||||
|
.full-width {
|
||||||
|
flex: 1;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
264
src/app/param/table/param-table.component.ts
Normal file
264
src/app/param/table/param-table.component.ts
Normal file
@ -0,0 +1,264 @@
|
|||||||
|
import { Component, inject, Input, ViewChild } from '@angular/core';
|
||||||
|
import { AngularMaterialModule } from '../../shared/module/angular-material.module';
|
||||||
|
import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
|
||||||
|
import { CommonModule } from '@angular/common';
|
||||||
|
import { MatPaginator } from '@angular/material/paginator';
|
||||||
|
import { MatSort } from '@angular/material/sort';
|
||||||
|
import { UserPreferences } from '../../core/models/user-preference';
|
||||||
|
import { UserPreferencesService } from '../../core/services/user-preference.service';
|
||||||
|
import { MatTableDataSource } from '@angular/material/table';
|
||||||
|
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
|
||||||
|
import { NavigationService } from '../../core/services/common/navigation.service';
|
||||||
|
import { ActivatedRoute } from '@angular/router';
|
||||||
|
import { ParamService } from '../../core/services/param/param.service';
|
||||||
|
import { ParamProperties } from '../../core/models/param/parameters';
|
||||||
|
import { ApiErrorHandlerService } from '../../core/services/common/api-error-handler.service';
|
||||||
|
import { NotificationService } from '../../core/services/common/notification.service';
|
||||||
|
import { TABLE_MODE } from '../../core/models/param/types';
|
||||||
|
import { ProperCasePipe } from '../../shared/pipes/properCase.pipe';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-param-table',
|
||||||
|
imports: [AngularMaterialModule, ReactiveFormsModule, CommonModule, MatSlideToggleModule, ProperCasePipe],
|
||||||
|
templateUrl: './param-table.component.html',
|
||||||
|
styleUrl: './param-table.component.scss'
|
||||||
|
})
|
||||||
|
export class ParamTableComponent {
|
||||||
|
@ViewChild(MatPaginator) paginator!: MatPaginator;
|
||||||
|
@ViewChild(MatSort) sort!: MatSort;
|
||||||
|
|
||||||
|
@Input() table_mode: TABLE_MODE = 'TABLE-RECORD';
|
||||||
|
@Input() paramHeading: string = 'Table Records';
|
||||||
|
|
||||||
|
isLoading: boolean = false;
|
||||||
|
userPreferences: UserPreferences;
|
||||||
|
paramType: string | null = null;
|
||||||
|
paramData: any = [];
|
||||||
|
showInactiveData: boolean = false;
|
||||||
|
isEditing: boolean = false;
|
||||||
|
showForm: boolean = false;
|
||||||
|
currentParamid: number | null = null;
|
||||||
|
|
||||||
|
paramReadOnlyFields: any = {
|
||||||
|
lastChangedDate: null,
|
||||||
|
lastChangedBy: null,
|
||||||
|
isInactive: null,
|
||||||
|
inactivatedDate: null
|
||||||
|
};
|
||||||
|
|
||||||
|
private paramService = inject(ParamService);
|
||||||
|
private errorHandler = inject(ApiErrorHandlerService);
|
||||||
|
private notificationService = inject(NotificationService);
|
||||||
|
|
||||||
|
dataSource = new MatTableDataSource<any>([]);
|
||||||
|
paramForm: FormGroup;
|
||||||
|
|
||||||
|
ngAfterViewInit() {
|
||||||
|
this.dataSource.paginator = this.paginator;
|
||||||
|
this.dataSource.sort = this.sort;
|
||||||
|
this.dataSource.data = this.paramData;
|
||||||
|
}
|
||||||
|
|
||||||
|
displayedColumns: string[] = ['ParamType', 'ParamDesc', 'paramvalue', 'addlparamvalue1', 'addlparamvalue2', 'addlparamvalue3',
|
||||||
|
'addlparamvalue4', 'addlparamvalue5', 'actions'];
|
||||||
|
|
||||||
|
formControls: any = {};
|
||||||
|
|
||||||
|
getForm(): void {
|
||||||
|
if (this.table_mode === 'PARAM-RECORD') {
|
||||||
|
this.formControls = {
|
||||||
|
paramType: ['', [Validators.required, Validators.maxLength(10)]],
|
||||||
|
paramValue: ['', [Validators.required, Validators.maxLength(20)]],
|
||||||
|
paramDesc: ['', [Validators.required, Validators.maxLength(100)]],
|
||||||
|
addlParamValue1: ['', [Validators.maxLength(20)]],
|
||||||
|
addlParamValue2: ['', [Validators.maxLength(20)]],
|
||||||
|
addlParamValue3: ['', [Validators.maxLength(20)]],
|
||||||
|
addlParamValue4: ['', [Validators.maxLength(20)]],
|
||||||
|
addlParamValue5: ['', [Validators.maxLength(20)]],
|
||||||
|
};
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
this.formControls = {
|
||||||
|
paramDesc: ['', [Validators.required, Validators.maxLength(100)]],
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
applyFilter(event: Event) {
|
||||||
|
const filterValue = (event.target as HTMLInputElement).value;
|
||||||
|
this.dataSource.filter = filterValue.trim().toLowerCase();
|
||||||
|
}
|
||||||
|
|
||||||
|
get isParamRecord(): boolean {
|
||||||
|
return this.table_mode === 'PARAM-RECORD';
|
||||||
|
}
|
||||||
|
|
||||||
|
constructor(
|
||||||
|
private userPrefenceService: UserPreferencesService,
|
||||||
|
private navigationService: NavigationService,
|
||||||
|
private fb: FormBuilder,
|
||||||
|
) {
|
||||||
|
this.userPreferences = this.userPrefenceService.getPreferences();
|
||||||
|
this.getForm();
|
||||||
|
this.paramForm = this.fb.group(this.formControls);
|
||||||
|
}
|
||||||
|
|
||||||
|
cancelEdit(): void {
|
||||||
|
this.showForm = false;
|
||||||
|
this.isEditing = false;
|
||||||
|
this.currentParamid = null;
|
||||||
|
this.paramForm.reset();
|
||||||
|
}
|
||||||
|
|
||||||
|
private route = inject(ActivatedRoute);
|
||||||
|
|
||||||
|
ngOnInit(): void {
|
||||||
|
this.paramType = this.route.snapshot.paramMap.get('id');
|
||||||
|
this.getParameters();
|
||||||
|
}
|
||||||
|
|
||||||
|
toggleShowInactiveData(): void {
|
||||||
|
this.showInactiveData = !this.showInactiveData;
|
||||||
|
this.renderParamData();
|
||||||
|
}
|
||||||
|
|
||||||
|
onRecordClick(id: string, paramDesc: string): void {
|
||||||
|
this.navigationService.navigate(['param-record', id], { queryParams: { param: paramDesc } });
|
||||||
|
}
|
||||||
|
|
||||||
|
addNewParam(): void {
|
||||||
|
this.getForm();
|
||||||
|
this.paramForm = this.fb.group(this.formControls);
|
||||||
|
this.showForm = true;
|
||||||
|
this.isEditing = false;
|
||||||
|
this.currentParamid = null;
|
||||||
|
this.paramForm.reset();
|
||||||
|
this.paramForm.get('paramType')?.setValue(this.paramType);
|
||||||
|
}
|
||||||
|
|
||||||
|
onEditParam(param: any): void {
|
||||||
|
this.getForm();
|
||||||
|
this.paramForm = this.fb.group(this.formControls);
|
||||||
|
|
||||||
|
this.showForm = true;
|
||||||
|
this.isEditing = true;
|
||||||
|
this.currentParamid = param.paramId;
|
||||||
|
this.paramForm.patchValue({
|
||||||
|
paramType: param.paramType,
|
||||||
|
paramValue: param.paramValue,
|
||||||
|
paramDesc: param.paramDesc,
|
||||||
|
addlParamValue1: param.addlParamValue1,
|
||||||
|
addlParamValue2: param.addlParamValue2,
|
||||||
|
addlParamValue3: param.addlParamValue3,
|
||||||
|
addlParamValue4: param.addlParamValue4,
|
||||||
|
addlParamValue5: param.addlParamValue5
|
||||||
|
});
|
||||||
|
|
||||||
|
this.paramForm.get('paramType')?.setValue(this.paramType);
|
||||||
|
|
||||||
|
this.paramReadOnlyFields.lastChangedDate = param.lastUpdatedDate ?? param.dateCreated;
|
||||||
|
this.paramReadOnlyFields.lastChangedBy = param.lastUpdatedBy ?? param.createdBy;
|
||||||
|
this.paramReadOnlyFields.isInactive = param.inactiveCodeFlag === 'N' || !param.inactiveCodeFlag ? 'No' : 'Yes';
|
||||||
|
this.paramReadOnlyFields.inactivatedDate = param.inactiveDate;
|
||||||
|
}
|
||||||
|
|
||||||
|
renderParamData() {
|
||||||
|
if (this.showInactiveData && this.table_mode === 'PARAM-RECORD') {
|
||||||
|
this.dataSource.data = this.paramData.filter((data: any) => data?.inactiveCodeFlag === 'Y');
|
||||||
|
}
|
||||||
|
else if (!this.showInactiveData && this.table_mode === 'PARAM-RECORD') {
|
||||||
|
this.dataSource.data = this.paramData.filter((data: any) => data?.inactiveCodeFlag === 'N' || data?.inactiveCodeFlag === null);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
this.dataSource.data = this.paramData;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
getParameters(): void {
|
||||||
|
|
||||||
|
this.isLoading = true;
|
||||||
|
|
||||||
|
const P_PARAMTYPE: string = this.paramType ? this.paramType : '000';
|
||||||
|
|
||||||
|
this.paramService.getParameters(P_PARAMTYPE).subscribe({
|
||||||
|
next: (paramData: ParamProperties[]) => {
|
||||||
|
this.paramData = paramData
|
||||||
|
this.renderParamData()
|
||||||
|
this.isLoading = false;
|
||||||
|
},
|
||||||
|
error: (error: any) => {
|
||||||
|
let errorMessage = this.errorHandler.handleApiError(error, 'Failed to search preparers');
|
||||||
|
this.notificationService.showError(errorMessage);
|
||||||
|
this.isLoading = false;
|
||||||
|
console.error('Error loading preparers:', error);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
saveRecord(): void {
|
||||||
|
if (this.paramForm.invalid) {
|
||||||
|
this.paramForm.markAllAsTouched();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const paramData: ParamProperties = this.paramForm.value;
|
||||||
|
|
||||||
|
paramData.paramId = this.currentParamid ?? 0;
|
||||||
|
paramData.sortSeq = 1;
|
||||||
|
|
||||||
|
const saveObservable = this.table_mode === 'TABLE-RECORD' ?
|
||||||
|
this.paramService.createTableRecord(this.paramForm.value.paramDesc)
|
||||||
|
:
|
||||||
|
this.isEditing
|
||||||
|
? this.paramService.updateParamRecord(paramData as ParamProperties)
|
||||||
|
: this.paramService.createParamRecord(paramData as ParamProperties);
|
||||||
|
|
||||||
|
saveObservable.subscribe({
|
||||||
|
next: () => {
|
||||||
|
this.notificationService.showSuccess(`Record ${this.isEditing && (this.table_mode !== 'TABLE-RECORD') ? 'updated' : 'added'} successfully`);
|
||||||
|
this.getParameters();
|
||||||
|
if (this.table_mode === 'PARAM-RECORD') {
|
||||||
|
this.cancelEdit();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
error: (error) => {
|
||||||
|
let errorMessage = this.errorHandler.handleApiError(error, `Failed to ${this.isEditing && (this.table_mode !== 'TABLE-RECORD') ? 'update' : 'add'} Record`);
|
||||||
|
this.notificationService.showError(errorMessage);
|
||||||
|
console.error('Error saving Record:', error);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
inActivateParamRecord(paramId: number): void {
|
||||||
|
this.paramService.inActivateParamRecord(paramId).subscribe(
|
||||||
|
{
|
||||||
|
next: (data: any) => {
|
||||||
|
this.notificationService.showSuccess(`Param Inactivated successfully`);
|
||||||
|
this.getParameters();
|
||||||
|
},
|
||||||
|
error: (error: any) => {
|
||||||
|
let errorMessage = this.errorHandler.handleApiError(error, `Failed to Inactivate Param`);
|
||||||
|
this.notificationService.showError(errorMessage);
|
||||||
|
console.error('Error Inactivating Param:', error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
reActivateParamRecord(paramId: number): void {
|
||||||
|
this.paramService.reActivateParamRecord(paramId).subscribe(
|
||||||
|
{
|
||||||
|
next: (data: any) => {
|
||||||
|
this.notificationService.showSuccess(`Param Reactivated successfully`);
|
||||||
|
this.getParameters();
|
||||||
|
},
|
||||||
|
error: (error: any) => {
|
||||||
|
let errorMessage = this.errorHandler.handleApiError(error, `Failed to Reactivate Param`);
|
||||||
|
this.notificationService.showError(errorMessage);
|
||||||
|
console.error('Error Reactivating Param:', error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
15
src/app/shared/pipes/properCase.pipe.ts
Normal file
15
src/app/shared/pipes/properCase.pipe.ts
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
import { Pipe, PipeTransform } from '@angular/core';
|
||||||
|
|
||||||
|
@Pipe({
|
||||||
|
name: 'properCase'
|
||||||
|
})
|
||||||
|
export class ProperCasePipe implements PipeTransform {
|
||||||
|
|
||||||
|
transform(value: string): string {
|
||||||
|
if (!value) return '';
|
||||||
|
|
||||||
|
return value
|
||||||
|
.toLowerCase()
|
||||||
|
.replace(/\b\w/g, char => char.toUpperCase());
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user