param-table flow
This commit is contained in:
Kallesh B S
parent
fc9b976f82
commit
0a69b2a3c9
@ -8,11 +8,16 @@ import { NotFoundComponent } from './shared/components/not-found/not-found.compo
|
||||
import { UserSettingsComponent } from './user-settings/user-settings.component';
|
||||
import { RegisterComponent } from './register/register.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 = [
|
||||
{ path: 'login', component: LoginComponent },
|
||||
{ path: 'register', component: RegisterComponent },
|
||||
{ path: 'forgot-password', component: ForgotPasswordComponent },
|
||||
{ path: 'table-record', component: ManageTableRecordComponent },
|
||||
{ path: 'param-record/:id', component: ManageParamRecordComponent },
|
||||
{ path: 'usersettings', component: UserSettingsComponent, canActivate: [AuthGuard] },
|
||||
{ path: 'home', component: HomeComponent, 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('/manageusers')">Users</a>
|
||||
<a class="nav-link" (click)="navigateTo('/regions')">Regions</a>
|
||||
<a class="nav-link" (click)="navigateTo('/table-record')">Parameters</a>
|
||||
|
||||
<div class="profile-container">
|
||||
<button mat-icon-button (click)="toggleProfileMenu()" class="profile-button">
|
||||
|
||||
47
src/app/core/models/param/paramValue.ts
Normal file
47
src/app/core/models/param/paramValue.ts
Normal file
@ -0,0 +1,47 @@
|
||||
|
||||
export interface ParamValue {
|
||||
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;
|
||||
}
|
||||
|
||||
|
||||
export interface ParamValueForm {
|
||||
P_SPID?: number;
|
||||
P_PARAMTYPE: string;
|
||||
P_PARAMID?: number;
|
||||
P_PARAMDESC: string;
|
||||
P_PARAMVALUE: string;
|
||||
P_ADDLPARAMVALUE1: string | null;
|
||||
P_ADDLPARAMVALUE2: string | null;
|
||||
P_ADDLPARAMVALUE3: string | null;
|
||||
P_ADDLPARAMVALUE4: string | null;
|
||||
P_ADDLPARAMVALUE5: string | null;
|
||||
P_SORTSEQ?: number;
|
||||
P_USERID?: string;
|
||||
}
|
||||
|
||||
export interface ParamTableForm {
|
||||
P_TABLEFULLDESC: string;
|
||||
P_USERID?: string;
|
||||
}
|
||||
|
||||
export interface ParamStatusForm {
|
||||
P_PARAMID: number;
|
||||
P_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';
|
||||
110
src/app/core/services/param/param.service.ts
Normal file
110
src/app/core/services/param/param.service.ts
Normal file
@ -0,0 +1,110 @@
|
||||
import { inject, Injectable } from "@angular/core";
|
||||
import { environment } from "../../../../environments/environment";
|
||||
import { HttpClient } from "@angular/common/http";
|
||||
import { UserService } from "../common/user.service";
|
||||
import { ParamStatusForm, ParamTableForm, ParamValue, ParamValueForm } from "../../models/param/paramValue";
|
||||
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);
|
||||
|
||||
getParamValues(P_PARAMTYPE: string): Observable<ParamValue[]> {
|
||||
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[]): ParamValue[] {
|
||||
return data.map((paramValue: ParamValue) => ({
|
||||
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(data: ParamTableForm): Observable<any> {
|
||||
|
||||
const paramDetails = {
|
||||
P_TABLEFULLDESC: data.P_TABLEFULLDESC,
|
||||
P_USERID: this.userService.getUser(),
|
||||
};
|
||||
|
||||
return this.http.post(`${this.apiUrl}/${this.apiDb}/CreateTableRecord`, paramDetails);
|
||||
}
|
||||
|
||||
CreateParamRecord(data: ParamValueForm): Observable<any> {
|
||||
|
||||
const paramDetails = {
|
||||
p_spid: this.userService.getUserSpid(),
|
||||
P_PARAMTYPE: data.P_PARAMTYPE,
|
||||
P_PARAMDESC: data.P_PARAMDESC,
|
||||
P_PARAMVALUE: data.P_PARAMVALUE,
|
||||
P_ADDLPARAMVALUE1: data.P_ADDLPARAMVALUE1,
|
||||
P_ADDLPARAMVALUE2: data.P_ADDLPARAMVALUE2,
|
||||
P_ADDLPARAMVALUE3: data.P_ADDLPARAMVALUE3,
|
||||
P_ADDLPARAMVALUE4: data.P_ADDLPARAMVALUE4,
|
||||
P_ADDLPARAMVALUE5: data.P_ADDLPARAMVALUE5,
|
||||
P_SORTSEQ: data.P_SORTSEQ,
|
||||
P_USERID: this.userService.getUser(),
|
||||
};
|
||||
|
||||
return this.http.post(`${this.apiUrl}/${this.apiDb}/CreateParamRecord`, paramDetails);
|
||||
}
|
||||
|
||||
UpdateParamRecord(data: ParamValueForm): Observable<any> {
|
||||
|
||||
const paramDetails = {
|
||||
P_SPID: this.userService.getUserSpid(),
|
||||
P_PARAMID: data.P_PARAMID,
|
||||
P_PARAMDESC: data.P_PARAMDESC,
|
||||
P_ADDLPARAMVALUE1: data.P_ADDLPARAMVALUE1,
|
||||
P_ADDLPARAMVALUE2: data.P_ADDLPARAMVALUE2,
|
||||
P_ADDLPARAMVALUE3: data.P_ADDLPARAMVALUE3,
|
||||
P_ADDLPARAMVALUE4: data.P_ADDLPARAMVALUE4,
|
||||
P_ADDLPARAMVALUE5: data.P_ADDLPARAMVALUE5,
|
||||
P_SORTSEQ: data.P_SORTSEQ,
|
||||
P_USERID: this.userService.getUser(),
|
||||
};
|
||||
|
||||
return this.http.patch(`${this.apiUrl}/${this.apiDb}/UpdateParamRecord`, paramDetails);
|
||||
}
|
||||
|
||||
InActivateParamRecord(PARAMID: number) {
|
||||
|
||||
const data: ParamStatusForm = {
|
||||
P_PARAMID: PARAMID,
|
||||
P_USERID: this.userService.getSafeUser()
|
||||
}
|
||||
return this.http.patch(`${this.apiUrl}/${this.apiDb}/InActivateParamRecord`, data);
|
||||
}
|
||||
|
||||
ReActivateParamRecord(PARAMID: number) {
|
||||
const data: ParamStatusForm = {
|
||||
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'
|
||||
}
|
||||
265
src/app/param/table/param-table.component.html
Normal file
265
src/app/param/table/param-table.component.html
Normal file
@ -0,0 +1,265 @@
|
||||
<h2 class="page-header">Manage Param - {{paramHeading}}</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" [ngStyle]="{'margin-bottom': !isParamRecord ? '40px' : '10px'}">
|
||||
<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 style="display: flex; justify-content: center; align-items: center;">
|
||||
<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 ? 'Table Description' : 'Param Description'}}</mat-label>
|
||||
<input matInput formControlName="paramDescription" required>
|
||||
<mat-error *ngIf="paramForm.get('paramDescription')?.errors?.['required']">
|
||||
{{!isParamRecord ? 'Table Description' : 'Param Description'}} is required
|
||||
</mat-error>
|
||||
<mat-error *ngIf="paramForm.get('paramDescription')?.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>Param 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 Param Value 1</mat-label>
|
||||
<input matInput formControlName="Additional_Param_Value1">
|
||||
<mat-error *ngIf="paramForm.get('Additional_Param_Value1')?.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 Param Value 2</mat-label>
|
||||
<input matInput formControlName="Additional_Param_Value2">
|
||||
<mat-error *ngIf="paramForm.get('Additional_Param_Value2')?.errors?.['maxlength']">
|
||||
Maximum 20 characters allowed
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field appearance="outline" *ngIf="isParamRecord">
|
||||
<mat-label>Additional Param Value 3</mat-label>
|
||||
<input matInput formControlName="Additional_Param_Value3">
|
||||
<mat-error *ngIf="paramForm.get('Additional_Param_Value3')?.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 Param Value 4</mat-label>
|
||||
<input matInput formControlName="Additional_Param_Value4">
|
||||
<mat-error *ngIf="paramForm.get('Additional_Param_Value4')?.errors?.['maxlength']">
|
||||
Maximum 20 characters allowed
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field appearance="outline" *ngIf="isParamRecord">
|
||||
<mat-label>Additional Param Value 5</mat-label>
|
||||
<input matInput formControlName="Additional_Param_Value5">
|
||||
<mat-error *ngIf="paramForm.get('Additional_Param_Value5')?.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>
|
||||
174
src/app/param/table/param-table.component.scss
Normal file
174
src/app/param/table/param-table.component.scss
Normal file
@ -0,0 +1,174 @@
|
||||
.page-header {
|
||||
margin: 0.5rem 0px;
|
||||
color: var(--mat-sys-primary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.actions-bar {
|
||||
clear: both;
|
||||
margin-bottom: -16px;
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
|
||||
|
||||
.full-width {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
280
src/app/param/table/param-table.component.ts
Normal file
280
src/app/param/table/param-table.component.ts
Normal file
@ -0,0 +1,280 @@
|
||||
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 { ParamTableForm, ParamValue, ParamValueForm } from '../../core/models/param/paramValue';
|
||||
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';
|
||||
|
||||
@Component({
|
||||
selector: 'app-param-table',
|
||||
imports: [AngularMaterialModule, ReactiveFormsModule, CommonModule, MatSlideToggleModule],
|
||||
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)]],
|
||||
paramDescription: ['', [Validators.required, Validators.maxLength(100)]],
|
||||
Additional_Param_Value1: ['', [Validators.maxLength(20)]],
|
||||
Additional_Param_Value2: ['', [Validators.maxLength(20)]],
|
||||
Additional_Param_Value3: ['', [Validators.maxLength(20)]],
|
||||
Additional_Param_Value4: ['', [Validators.maxLength(20)]],
|
||||
Additional_Param_Value5: ['', [Validators.maxLength(20)]],
|
||||
};
|
||||
}
|
||||
else {
|
||||
this.formControls = {
|
||||
paramDescription: ['', [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.getParamValues();
|
||||
}
|
||||
|
||||
getParamValues(): void {
|
||||
|
||||
this.isLoading = true;
|
||||
|
||||
const P_PARAMTYPE: string = this.paramType ? this.paramType : '000';
|
||||
|
||||
this.paramService.getParamValues(P_PARAMTYPE).subscribe({
|
||||
next: (paramData: ParamValue[]) => {
|
||||
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);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
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,
|
||||
paramDescription: param.PARAMDESC,
|
||||
Additional_Param_Value1: param.ADDLPARAMVALUE1,
|
||||
Additional_Param_Value2: param.ADDLPARAMVALUE2,
|
||||
Additional_Param_Value3: param.ADDLPARAMVALUE3,
|
||||
Additional_Param_Value4: param.ADDLPARAMVALUE4,
|
||||
Additional_Param_Value5: 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;
|
||||
}
|
||||
|
||||
saveRecord(): void {
|
||||
if (this.paramForm.invalid) {
|
||||
this.paramForm.markAllAsTouched();
|
||||
return;
|
||||
}
|
||||
|
||||
let paramData: ParamTableForm | ParamValueForm;
|
||||
|
||||
if (this.table_mode === 'TABLE-RECORD') {
|
||||
paramData = {
|
||||
P_TABLEFULLDESC: this.paramForm.value.paramDescription,
|
||||
} as ParamTableForm;
|
||||
} else {
|
||||
paramData = {
|
||||
P_PARAMTYPE: this.paramForm.value.paramType,
|
||||
...(this.isEditing && { P_PARAMID: this.currentParamid ?? 0 }),
|
||||
P_PARAMDESC: this.paramForm.value.paramDescription,
|
||||
P_PARAMVALUE: this.paramForm.value.paramValue,
|
||||
P_ADDLPARAMVALUE1: this.paramForm.value.Additional_Param_Value1,
|
||||
P_ADDLPARAMVALUE2: this.paramForm.value.Additional_Param_Value2,
|
||||
P_ADDLPARAMVALUE3: this.paramForm.value.Additional_Param_Value3,
|
||||
P_ADDLPARAMVALUE4: this.paramForm.value.Additional_Param_Value4,
|
||||
P_ADDLPARAMVALUE5: this.paramForm.value.Additional_Param_Value5,
|
||||
P_SORTSEQ: 1
|
||||
} as ParamValueForm;
|
||||
}
|
||||
|
||||
const saveObservable = this.table_mode === 'TABLE-RECORD' ?
|
||||
this.paramService.CreateTableRecord(paramData as ParamTableForm)
|
||||
:
|
||||
this.isEditing
|
||||
? this.paramService.UpdateParamRecord(paramData as ParamValueForm)
|
||||
: this.paramService.CreateParamRecord(paramData as ParamValueForm);
|
||||
|
||||
saveObservable.subscribe({
|
||||
next: () => {
|
||||
this.notificationService.showSuccess(`Record ${this.isEditing && (this.table_mode !== 'TABLE-RECORD') ? 'updated' : 'added'} successfully`);
|
||||
this.getParamValues();
|
||||
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.getParamValues();
|
||||
},
|
||||
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.getParamValues();
|
||||
},
|
||||
error: (error: any) => {
|
||||
let errorMessage = this.errorHandler.handleApiError(error, `Failed to Reactivate Param`);
|
||||
this.notificationService.showError(errorMessage);
|
||||
console.error('Error Reactivating Param:', error);
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user