CBSNexora/cbsnexora
4
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix: Manage hooks functionality; Create hook, Edit Hook (#2346)

Browse Source
This commit is contained in:
Pranav Deshmukh
2025-03-23 10:58:35 -06:00
committed by GitHub
parent a218d3491b
commit 684a937af0
5 changed files with 95 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/system/manage-hooks/create-hook/create-hook.component.html
+16 -7
View File
@@ -33,7 +33,7 @@
</div>
<div fxLayout="row wrap" fxLayout.lt-md="column" fxLayoutGap="4%">
<mat-form-field fxFlex="48%" *ngIf="hookForm.controls.name.value === 'Web'">
<mat-form-field fxFlex="40%" *ngIf="hookForm.controls.name.value === 'Web'">
<mat-label>{{ 'labels.inputs.Content Type' | translate }}</mat-label>
<mat-select required formControlName="contentType">
<mat-option [value]="'json'">
@@ -49,7 +49,7 @@
</mat-error>
</mat-form-field>
<mat-form-field fxFlex="48%" *ngIf="hookForm.controls.name.value === 'SMS Bridge'">
<mat-form-field fxFlex="40%" *ngIf="hookForm.controls.name.value === 'SMS Bridge'">
<mat-label>{{ 'labels.inputs.Phone Number' | translate }}</mat-label>
<input matInput type="tel" #input maxlength="10" required formControlName="phoneNumber" />
<mat-hint align="end">{{ input.value?.length || 0 }}/10</mat-hint>
@@ -59,7 +59,7 @@
</mat-error>
</mat-form-field>
<mat-form-field fxFlex="48%">
<mat-form-field fxFlex="40%">
<mat-label>{{ 'labels.inputs.Payload URL' | translate }}</mat-label>
<input matInput required formControlName="payloadUrl" />
<mat-error *ngIf="hookForm.controls.payloadUrl.hasError('required')">
@@ -105,14 +105,23 @@
<br />
<mat-divider [inset]="true"></mat-divider>
<!-- <mat-divider [inset]="true"></mat-divider> -->
<br />
<div fxLayout="row wrap" fxLayoutGap="60%" fxLayout.lt-md="column">
<p fxFlex="20%" class="mat-title">{{ 'labels.inputs.Events' | translate }}</p>
<div fxLayout="row wrap" fxLayout.lt-md="column">
<p fxFlex="20%" class="mat-title">
{{ 'labels.inputs.Events' | translate }}<span style="color: red">*</span>
</p>
<button mat-raised-button fxFlex="20%" type="button" color="primary" (click)="addEvent()">
<button
mat-raised-button
class="AddEventButton"
fxFlex="20%"
type="button"
color="primary"
(click)="addEvent()"
>
<fa-icon icon="plus" class="m-r-10"></fa-icon>
{{ 'labels.buttons.Add' | translate }} {{ 'labels.inputs.Events' | translate }}
</button>
src/app/system/manage-hooks/create-hook/create-hook.component.scss
+8
View File
@@ -11,6 +11,14 @@
}
}
mat-divider {
margin: 0 0 0.5em;
}
table {
width: 100%;
}
.AddEventButton {
margin-bottom: 10px;
}
src/app/system/manage-hooks/edit-hook/edit-hook.component.html
+23 -8
View File
@@ -33,7 +33,7 @@
</div>
<div fxLayout="row wrap" fxLayout.lt-md="column" fxLayoutGap="4%">
<mat-form-field fxFlex="48%" *ngIf="hookForm.controls.name.value === 'Web'">
<mat-form-field fxFlex="40%" *ngIf="hookForm.controls.name.value === 'Web'">
<mat-label>{{ 'labels.inputs.Content Type' | translate }}</mat-label>
<mat-select required formControlName="contentType">
<mat-option [value]="'json'">
@@ -49,7 +49,7 @@
</mat-error>
</mat-form-field>
<mat-form-field fxFlex="48%" *ngIf="hookForm.controls.name.value === 'SMS Bridge'">
<mat-form-field fxFlex="40%" *ngIf="hookForm.controls.name.value === 'SMS Bridge'">
<mat-label>{{ 'labels.inputs.Phone Number' | translate }}</mat-label>
<input matInput type="tel" #input maxlength="10" required formControlName="phoneNumber" />
<mat-hint align="end">{{ input.value?.length || 0 }}/10</mat-hint>
@@ -59,7 +59,7 @@
</mat-error>
</mat-form-field>
<mat-form-field fxFlex="48%">
<mat-form-field fxFlex="40%">
<mat-label>{{ 'labels.inputs.Payload URL' | translate }}</mat-label>
<input matInput required formControlName="payloadUrl" />
<mat-error *ngIf="hookForm.controls.payloadUrl.hasError('required')">
@@ -109,10 +109,19 @@
<br />
<div fxLayout="row wrap" fxLayoutGap="60%" fxLayout.lt-md="column">
<p fxFlex="20%" class="mat-title">{{ 'labels.inputs.Events' | translate }}</p>
<div fxLayout="row wrap" fxLayout.lt-md="column">
<p fxFlex="20%" class="mat-title">
{{ 'labels.inputs.Events' | translate }} <span style="color: red">*</span>
</p>
<button mat-raised-button fxFlex="20%" type="button" color="primary" (click)="addEvent()">
<button
mat-raised-button
class="AddEventButton"
fxFlex="20%"
type="button"
color="primary"
(click)="addEvent()"
>
<fa-icon icon="plus" class="m-r-10"></fa-icon>
{{ 'labels.buttons.Add' | translate }} {{ 'labels.inputs.Events' | translate }}
</button>
@@ -131,6 +140,10 @@
<td mat-cell *matCellDef="let event">{{ event.actionName }}</td>
</ng-container>
<div *ngIf="cannotDeleteLastEvent" class="error-message">
<p>At least one event is required. Cannot delete the last event.</p>
</div>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
<td mat-cell *matCellDef="let i = index">
@@ -146,14 +159,16 @@
</mat-card-content>
<mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
<button type="button" mat-raised-button [routerLink]="['../']">{{ 'labels.inputs.Cancel' | translate }}</button>
<button type="button" mat-raised-button [routerLink]="['../']">
{{ 'labels.buttons.Cancel' | translate }}
</button>
<button
mat-raised-button
color="primary"
[disabled]="(!hookForm.valid || hookForm.pristine) && !eventsDataChanged"
*mifosxHasPermission="'UPDATE_HOOK'"
>
{{ 'labels.inputs.Submit' | translate }}
{{ 'labels.buttons.Submit' | translate }}
</button>
</mat-card-actions>
</form>
src/app/system/manage-hooks/edit-hook/edit-hook.component.scss
+23
View File
@@ -14,3 +14,26 @@
table {
width: 100%;
}
.AddEventButton {
margin-bottom: 10px;
}
.error-message {
color: red;
font-weight: bold;
margin-top: 10px;
padding: 5px;
background-color: #ffe6e6;
border: 1px solid red;
border-radius: 5px;
}
.error-snackbar {
background-color: #f44336;
color: white;
}
.error-snackbar .mat-simple-snackbar-action {
color: white;
}
src/app/system/manage-hooks/edit-hook/edit-hook.component.ts
+25 -1
View File
@@ -5,6 +5,11 @@ import { MatDialog } from '@angular/material/dialog';
import { MatSort } from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material/table';
import { ActivatedRoute, Router } from '@angular/router';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { NgModule } from '@angular/core';
import { MatSnackBar } from '@angular/material/snack-bar';
import { ChangeDetectorRef } from '@angular/core';
/** Custom Services */
import { SystemService } from '../../system.service';
@@ -17,12 +22,18 @@ import { AddEventDialogComponent } from '../add-event-dialog/add-event-dialog.co
/**
* Edit Hook Component.
*/
@Component({
selector: 'mifosx-edit-hook',
templateUrl: './edit-hook.component.html',
styleUrls: ['./edit-hook.component.scss']
})
export class EditHookComponent implements OnInit {
@NgModule({
imports: [
MatSnackBarModule
]
})
/** Hooks Template Data. */
hooksTemplateData: any;
/** Hook Data. */
@@ -39,6 +50,7 @@ export class EditHookComponent implements OnInit {
dataSource: MatTableDataSource<any>;
/** Events Data. */
eventsData: any[] = [];
cannotDeleteLastEvent: boolean = false;
/** Boolean to check if events data is changed or not. */
eventsDataChanged: Boolean = false;
/** Sorter for events table. */
@@ -59,7 +71,9 @@ export class EditHookComponent implements OnInit {
private router: Router,
private formBuilder: UntypedFormBuilder,
private dialog: MatDialog,
private translateService: TranslateService
private translateService: TranslateService,
private snackBar: MatSnackBar,
private cdr: ChangeDetectorRef
) {
this.route.data.subscribe((data: { hooksTemplate: any; hook: any }) => {
this.hooksTemplateData = data.hooksTemplate;
@@ -169,6 +183,14 @@ export class EditHookComponent implements OnInit {
* @param {number} index Array index from where event form needs to be removed.
*/
deleteEvent(index: number) {
if (this.eventsData.length === 1) {
this.snackBar.open('At least one event is required. Cannot delete the last event.', 'Close', {
duration: 3000,
panelClass: ['error-snackbar']
});
return;
}
const deleteEventDialogRef = this.dialog.open(DeleteDialogComponent, {
data: {
deleteContext:
@@ -177,11 +199,13 @@ export class EditHookComponent implements OnInit {
this.eventsData[index].entityName
}
});
deleteEventDialogRef.afterClosed().subscribe((response: any) => {
if (response.delete) {
this.eventsData.splice(index, 1);
this.dataSource.connect().next(this.eventsData);
this.eventsDataChanged = true;
this.cdr.detectChanges();
}
});
}