Skip to content

Commit

Permalink
fixed alert dialog issue on north and south page
Browse files Browse the repository at this point in the history 
Signed-off-by: Mohd. Shariq <mohd.shariq@nerdapplabs.com>
  • Loading branch information
@mshariq-nerd
mshariq-nerd committed Jul 28, 2022
1 parent 1933b5b commit 32c77cb
Show file tree
Hide file tree
Showing 6 changed files with 78 additions and 66 deletions.
15 changes: 6 additions & 9 deletions src/app/components/common/alert-dialog/alert-dialog.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,9 @@
<header class="modal-card-head">
<p *ngIf="childData" class="modal-card-title is-size-6">{{childData.headerTextValue}}</p>
<p *ngIf="serviceRecord" class="modal-card-title is-size-6">{{serviceRecord.headerTextValue}}</p>
<p *ngIf="deleteTaskData" class="modal-card-title is-size-6">{{deleteTaskData.headerTextValue}}</p>
<p *ngIf="notificationRecord" class="modal-card-title is-size-6">{{notificationRecord.headerTextValue}}</p>
<p *ngIf="notificationServiceRecord" class="modal-card-title is-size-6">{{notificationServiceRecord.headerTextValue}}</p>
<p *ngIf="notificationServiceRecord" class="modal-card-title is-size-6">
{{notificationServiceRecord.headerTextValue}}</p>
</header>

<section *ngIf="childData" class="modal-card-body">
Expand All @@ -23,18 +23,15 @@
<section *ngIf="notificationServiceRecord" class="modal-card-body">
{{notificationServiceRecord.message}}?
</section>
<section *ngIf="deleteTaskData" class="modal-card-body">
{{deleteTaskData.message}}
</section>

<footer class="modal-card-foot">
<button class="button is-small" (click)="toggleModal(false)">Cancel</button>
<button *ngIf="childData" class="button is-small" [ngClass]="{'is-danger': childData.actionButtonValue === 'Delete', 'is-warning': childData.actionButtonValue === 'Restore' || 'Clear Sessions' }"
<button *ngIf="childData" class="button is-small"
[ngClass]="{'is-danger': childData.actionButtonValue === 'Delete', 'is-warning': childData.actionButtonValue === 'Restore' || 'Clear Sessions' }"
(click)="triggerAction()">{{childData.actionButtonValue}}</button>
<button *ngIf="serviceRecord" class="button is-small is-danger" (click)="triggerAction()">Delete</button>
<button *ngIf="notificationRecord" class="button is-small is-danger" (click)="triggerAction()">Delete</button>
<button *ngIf="notificationServiceRecord" class="button is-small is-danger" (click)="triggerAction()">Delete</button>
<button *ngIf="deleteTaskData" class="button is-small is-danger" (click)="triggerAction()">Delete</button>
<button *ngIf="notificationServiceRecord" class="button is-small is-danger"
(click)="triggerAction()">Delete</button>
</footer>
</div>
</div>
21 changes: 5 additions & 16 deletions src/app/components/common/alert-dialog/alert-dialog.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,8 @@ import { Component, EventEmitter, Input, OnChanges, OnInit, Output, HostListener
export class AlertDialogComponent implements OnInit, OnChanges {
@Input() notificationRecord: { name: string, message: string, key: string, headerTextValue: any };
@Input() notificationServiceRecord: { name: string, message: string, key: string, headerTextValue: any };
@Input() childData: { id: Number, name: any, key: any, message: any, actionButtonValue: any, headerTextValue: any};
@Input() childData: { id: Number, name: any, key: any, message: any, actionButtonValue: any, headerTextValue: any };
@Input() serviceRecord: { port: Number, key: any, name: any, message: any, protocol: string, headerTextValue: any };
@Input() deleteTaskData: { name: any, message: any, key: any, headerTextValue: any };
@Output() delete = new EventEmitter<Number>();
@Output() deleteService = new EventEmitter<Object>();
@Output() deleteNotification = new EventEmitter<Object>();
Expand Down Expand Up @@ -67,17 +66,15 @@ export class AlertDialogComponent implements OnInit, OnChanges {
this.serviceRecord.headerTextValue = 'Delete Service';
}
}
if (this.deleteTaskData) {
this.deleteTaskData.headerTextValue = this.deleteTaskData.key === 'deleteTask' ? 'Delete Instance' : 'Delete Service';
}

if (this.notificationRecord) {
if (this.notificationRecord.key === 'deleteNotification') {
this.notificationRecord.headerTextValue = 'Delete Instance';
}
}
if (this.notificationServiceRecord) {
if (this.notificationServiceRecord.key === 'deleteNotificationService') {
this.notificationServiceRecord.headerTextValue = 'Delete Service';
this.notificationServiceRecord.headerTextValue = 'Delete Service';
}
}
}
Expand Down Expand Up @@ -110,11 +107,11 @@ export class AlertDialogComponent implements OnInit, OnChanges {
this.toggleModal(false);
}
if (this.childData.key === 'deleteCertificate') {
this.deleteCertificate.emit({name: this.childData.name, type: 'cert'});
this.deleteCertificate.emit({ name: this.childData.name, type: 'cert' });
this.toggleModal(false);
}
if (this.childData.key === 'deleteKey') {
this.deleteCertificate.emit({name: this.childData.name, type: 'key'});
this.deleteCertificate.emit({ name: this.childData.name, type: 'key' });
this.toggleModal(false);
}
if (this.childData.key === 'clearSessions') {
Expand Down Expand Up @@ -161,13 +158,5 @@ export class AlertDialogComponent implements OnInit, OnChanges {
this.toggleModal(false);
}
}
if (this.deleteTaskData) {
if (this.deleteTaskData.key === 'deleteTask' || this.deleteTaskData.key === 'deleteService') {
this.deleteTask.emit({
name: this.deleteTaskData.name
});
this.toggleModal(false);
}
}
}
}
18 changes: 16 additions & 2 deletions src/app/components/core/north/north-task-modal/north-task-modal.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -173,8 +173,10 @@
</div>
<div class="field has-text-right">
<p class="buttons is-pulled-right">
<button *ngIf="task != undefined"
<!-- <button *ngIf="task != undefined"
(click)="openDeleteModal(task.name, 'Deleting this ' + btnTxt + ' can not be undone. Continue?')"
class="button is-small">Delete {{btnTxt}}</button> -->
<button *ngIf="task != undefined" (click)="openModal('delete-task-dialog')"
class="button is-small">Delete {{btnTxt}}</button>
</p>
</div>
Expand All @@ -188,7 +190,19 @@
</ng-container>
</section>
</div>
<app-alert-dialog (deleteTask)='onDelete($event)' [deleteTaskData]='deleteTaskData'></app-alert-dialog>
<app-filter-alert *ngIf="isFilterOrderChanged || isFilterDeleted" (discardChanges)="discardChanges()"
[filerDialogData]='confirmationDialogData'></app-filter-alert>
</div>
<app-confirmation-dialog id="delete-task-dialog">
<header class="modal-card-head">
<span class="modal-card-title is-size-6">Delete {{btnTxt}}</span>
<button class="delete" aria-label="close" (click)="closeModal('delete-task-dialog')"></button>
</header>
<section class="modal-card-body">
{{'Deleting this ' + btnTxt + ' can not be undone. Continue?'}}
</section>
<footer class="modal-card-foot">
<button class="button is-small" (click)="closeModal('delete-task-dialog')">Cancel</button>
<button class="button is-small is-danger" (click)="onDelete(task)">Delete</button>
</footer>
</app-confirmation-dialog>
43 changes: 28 additions & 15 deletions src/app/components/core/north/north-task-modal/north-task-modal.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import {
} from '../../configuration-manager/view-config-item/view-config-item.component';
import { FilterAlertComponent } from '../../filter/filter-alert/filter-alert.component';
import { ConfigChildrenComponent } from '../../configuration-manager/config-children/config-children.component';
import { DialogService } from '../../../common/confirmation-dialog/dialog.service';

@Component({
selector: 'app-north-task-modal',
Expand Down Expand Up @@ -53,17 +54,17 @@ export class NorthTaskModalComponent implements OnInit, OnChanges {

@Input() task: { task: any };
@Output() notify: EventEmitter<any> = new EventEmitter<any>();
@ViewChild(AlertDialogComponent, { static: true }) child: AlertDialogComponent;
// @ViewChild(AlertDialogComponent, { static: true }) child: AlertDialogComponent;
@ViewChildren('filterConfigView') filterConfigViewComponents: QueryList<ViewConfigItemComponent>;
@ViewChild(FilterAlertComponent) filterAlert: FilterAlertComponent;
@ViewChild('configChildComponent') configChildComponent: ConfigChildrenComponent;

// Object to hold data of north task to delete
public deleteTaskData = {
name: '',
message: '',
key: ''
};
// public deleteTaskData = {
// name: '',
// message: '',
// key: ''
// };
constructor(
private router: Router,
private schedulesService: SchedulesService,
Expand All @@ -73,6 +74,7 @@ export class NorthTaskModalComponent implements OnInit, OnChanges {
private filterService: FilterService,
private validateFormService: ValidateFormService,
public fb: FormBuilder,
private dialogService: DialogService,
public ngProgress: ProgressBarService,
private servicesApiService: ServicesApiService,
private docService: DocService
Expand Down Expand Up @@ -166,6 +168,15 @@ export class NorthTaskModalComponent implements OnInit, OnChanges {
modal.classList.remove('is-active');
}

openModal(id: string) {
this.dialogService.open(id);
}

closeModal(id: string) {
this.dialogService.close(id);
}


public getCategory(): void {
/** request started */
this.ngProgress.start();
Expand Down Expand Up @@ -331,15 +342,15 @@ export class NorthTaskModalComponent implements OnInit, OnChanges {
* @param message message to show on alert
* @param action here action is 'deleteTask'
*/
openDeleteModal(name, message) {
this.deleteTaskData = {
name: name,
message: message,
key: this.task['processName'] === 'north_C' ? 'deleteService' : 'deleteTask'
};
// call child component method to toggle modal
this.child.toggleModal(true);
}
// openDeleteModal(name, message) {
// this.deleteTaskData = {
// name: name,
// message: message,
// key: this.task['processName'] === 'north_C' ? 'deleteService' : 'deleteTask'
// };
// // call child component method to toggle modal
// this.child.toggleModal(true);
// }

onDelete(payload) {
if (this.task['processName'] === 'north_C') {
Expand All @@ -362,6 +373,7 @@ export class NorthTaskModalComponent implements OnInit, OnChanges {
this.ngProgress.done();
this.alertService.success(data['result'], true);
this.toggleModal(false);
this.closeModal('delete-task-dialog');
this.notify.emit();
},
(error) => {
Expand All @@ -387,6 +399,7 @@ export class NorthTaskModalComponent implements OnInit, OnChanges {
this.ngProgress.done();
this.alertService.success(data['result'], true);
this.toggleModal(false);
this.closeModal('delete-task-dialog');
this.notify.emit();
},
(error) => {
Expand Down
19 changes: 15 additions & 4 deletions src/app/components/core/south/south-service-modal/south-service-modal.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -132,9 +132,7 @@
<button (click)="getAssetReadings(service)" class="button is-small">
<span>Export Readings</span>
</button>
<button
(click)="openDeleteModal(service.management_port, service.protocol, service.name, 'Deleting this service can not be undone. Continue?', 'deleteService')"
class="button is-small">Delete Service</button>
<button (click)="openModal('delete-service-dialog')" class="button is-small">Delete Service</button>
</p>
</ng-container>
</div>
Expand All @@ -146,7 +144,20 @@
</ng-container>
</section>
</div>
<app-alert-dialog (deleteService)='deleteService($event)' [serviceRecord]='serviceRecord'></app-alert-dialog>
<app-filter-alert *ngIf="isFilterOrderChanged || isFilterDeleted" (discardChanges)="discardChanges()"
[filerDialogData]='confirmationDialogData'></app-filter-alert>
</div>

<app-confirmation-dialog id="delete-service-dialog">
<header class="modal-card-head">
<span class="modal-card-title is-size-6">Delete Service</span>
<button class="delete" aria-label="close" (click)="closeModal('delete-service-dialog')"></button>
</header>
<section class="modal-card-body">
Deleting this service can not be undone. Continue?
</section>
<footer class="modal-card-foot">
<button class="button is-small" (click)="closeModal('delete-service-dialog')">Cancel</button>
<button class="button is-small is-danger" (click)="deleteService(service)">Delete</button>
</footer>
</app-confirmation-dialog>
28 changes: 8 additions & 20 deletions src/app/components/core/south/south-service-modal/south-service-modal.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,12 @@ import {
import { DocService } from '../../../../services/doc.service';
import { ValidateFormService } from '../../../../services/validate-form.service';
import { MAX_INT_SIZE } from '../../../../utils';
import { AlertDialogComponent } from '../../../common/alert-dialog/alert-dialog.component';
import {
ViewConfigItemComponent
} from '../../configuration-manager/view-config-item/view-config-item.component';
import { FilterAlertComponent } from '../../filter/filter-alert/filter-alert.component';
import { ConfigChildrenComponent } from '../../configuration-manager/config-children/config-children.component';
import { DialogService } from '../../../common/confirmation-dialog/dialog.service';

@Component({
selector: 'app-south-service-modal',
Expand All @@ -44,7 +44,6 @@ export class SouthServiceModalComponent implements OnInit, OnChanges {
public filterItemIndex;
public isWizard;
// Object to hold data of south service to delete
public serviceRecord;
public selectedFilterPlugin;

confirmationDialogData = {};
Expand All @@ -54,7 +53,6 @@ export class SouthServiceModalComponent implements OnInit, OnChanges {
@Output() notify: EventEmitter<any> = new EventEmitter<any>();
@ViewChildren('filterConfigView') filterConfigViewComponents: QueryList<ViewConfigItemComponent>;
@ViewChild('configChildComponent') configChildComponent: ConfigChildrenComponent;
@ViewChild(AlertDialogComponent, { static: true }) child: AlertDialogComponent;
@ViewChild(FilterAlertComponent) filterAlert: FilterAlertComponent;

constructor(
Expand All @@ -68,6 +66,7 @@ export class SouthServiceModalComponent implements OnInit, OnChanges {
private servicesApiService: ServicesApiService,
private validateFormService: ValidateFormService,
private schedulesService: SchedulesService,
private dialogService: DialogService,
private docService: DocService) { }

@HostListener('document:keydown.escape', ['$event']) onKeydownHandler() {
Expand Down Expand Up @@ -273,25 +272,13 @@ export class SouthServiceModalComponent implements OnInit, OnChanges {
document.getElementById('ss').click();
}



/**
* Open delete modal
* @param message message to show on alert
* @param action here action is 'deleteService'
*/
openDeleteModal(port, protocol, name, message, action) {
this.serviceRecord = {
port: port,
protocol: protocol,
name: name,
message: message,
key: action
};
// call child component method to toggle modal
this.child.toggleModal(true);
openModal(id: string) {
this.dialogService.open(id);
}

closeModal(id: string) {
this.dialogService.close(id);
}

/**
* Open confirmation modal
Expand Down Expand Up @@ -368,6 +355,7 @@ export class SouthServiceModalComponent implements OnInit, OnChanges {
this.ngProgress.done();
this.alertService.success(data['result'], true);
this.toggleModal(false);
this.closeModal('delete-service-dialog');
setTimeout(() => {
this.notify.emit();
}, 6000);
Expand Down

0 comments on commit 32c77cb

Please sign in to comment.