Skip to content

Commit 101b8d8

Browse files
augusthjerrildaugusthjerrild
authored
Merge pull request #57 from OS2iot/issue/47_prompt-user-when-deleting-sigfox-application
Added functionality and prompt message when attempting to delete app with sigfox
2 parents ac22517 + 0ca1526 commit 101b8d8

File tree

4 files changed

+173
-125
lines changed

4 files changed

+173
-125
lines changed

‎src/app/applications/application-detail/application-detail.component.ts‎

Lines changed: 85 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -1,103 +1,109 @@
1-
import { Component, EventEmitter, OnDestroy, OnInit, Output } from '@angular/core';
1+
import {
2+
Component,
3+
EventEmitter,
4+
OnDestroy,
5+
OnInit,
6+
Output,
7+
} from '@angular/core';
28
import { Title } from '@angular/platform-browser';
39
import { ActivatedRoute, Router } from '@angular/router';
410
import { Application } from '@applications/application.model';
511
import { ApplicationService } from '@applications/application.service';
612
import { TranslateService } from '@ngx-translate/core';
713
import { DeleteDialogService } from '@shared/components/delete-dialog/delete-dialog.service';
14+
import { DeviceType } from '@shared/enums/device-type';
815
import { BackButton } from '@shared/models/back-button.model';
916
import { DropdownButton } from '@shared/models/dropdown-button.model';
1017
import { MeService } from '@shared/services/me.service';
1118
import { Subscription } from 'rxjs';
1219

1320
@Component({
14-
selector: 'app-application',
15-
templateUrl: './application-detail.component.html',
16-
styleUrls: ['./application-detail.component.scss'],
21+
selector: 'app-application',
22+
templateUrl: './application-detail.component.html',
23+
styleUrls: ['./application-detail.component.scss'],
1724
})
1825
export class ApplicationDetailComponent implements OnInit, OnDestroy {
19-
@Output() deleteApplication = new EventEmitter();
20-
public applicationsSubscription: Subscription;
21-
private deleteDialogSubscription: Subscription;
22-
public application: Application;
23-
public backButton: BackButton = { label: '', routerLink: '/applications' };
24-
public id: number;
25-
public dropdownButton: DropdownButton;
26-
public errorMessage: string;
27-
public canEdit = false;
26+
@Output() deleteApplication = new EventEmitter();
27+
public applicationsSubscription: Subscription;
28+
public application: Application;
29+
public backButton: BackButton = { label: '', routerLink: '/applications' };
30+
public id: number;
31+
public dropdownButton: DropdownButton;
32+
public errorMessage: string;
33+
public canEdit = false;
2834

29-
constructor(
30-
private applicationService: ApplicationService,
31-
private route: ActivatedRoute,
32-
public translate: TranslateService,
33-
public router: Router,
34-
private meService: MeService,
35-
private titleService: Title,
36-
private deleteDialogService: DeleteDialogService
37-
) { }
35+
constructor(
36+
private applicationService: ApplicationService,
37+
private route: ActivatedRoute,
38+
public translate: TranslateService,
39+
public router: Router,
40+
private meService: MeService,
41+
private titleService: Title,
42+
private deleteDialogService: DeleteDialogService
43+
) {}
3844

39-
ngOnInit(): void {
40-
this.id = +this.route.snapshot.paramMap.get('id');
41-
if (this.id) {
42-
this.bindApplication(this.id);
43-
this.dropdownButton = {
44-
label: '',
45-
editRouterLink: '../../edit-application/' + this.id,
46-
isErasable: true,
47-
};
45+
ngOnInit(): void {
46+
this.id = +this.route.snapshot.paramMap.get('id');
47+
if (this.id) {
48+
this.bindApplication(this.id);
49+
this.dropdownButton = {
50+
label: '',
51+
editRouterLink: '../../edit-application/' + this.id,
52+
isErasable: true,
53+
};
4854

49-
console.log(this.id);
50-
}
51-
52-
this.translate.get(['NAV.APPLICATIONS', 'APPLICATION-TABLE-ROW.SHOW-OPTIONS', 'TITLE.APPLICATION'])
53-
.subscribe(translations => {
54-
this.backButton.label = translations['NAV.APPLICATIONS'];
55-
this.dropdownButton.label = translations['APPLICATION-TABLE-ROW.SHOW-OPTIONS'];
56-
this.titleService.setTitle(translations['TITLE.APPLICATION']);
57-
});
58-
this.canEdit = this.meService.canWriteInTargetOrganization();
55+
console.log(this.id);
5956
}
6057

61-
onDeleteApplication() {
62-
let message: string;
63-
if (this.applicationHasDevices()) {
64-
message = this.translate.instant('APPLICATION.DELETE-HAS-DEVICES-PROMPT');
65-
}
66-
67-
this.deleteDialogSubscription = this.deleteDialogService.showSimpleDialog(message).subscribe(
68-
(response) => {
69-
if (response) {
70-
this.applicationService.deleteApplication(this.application.id).subscribe((response) => {
71-
if (response.ok && response.body.affected > 0) {
72-
console.log('delete application with id:' + this.application.id.toString());
73-
this.router.navigate(['applications']);
74-
} else {
75-
this.errorMessage = response?.error?.message;
76-
}
77-
});
78-
} else {
79-
console.log(response);
80-
}
81-
}
82-
);
83-
}
58+
this.translate
59+
.get([
60+
'NAV.APPLICATIONS',
61+
'APPLICATION-TABLE-ROW.SHOW-OPTIONS',
62+
'TITLE.APPLICATION',
63+
])
64+
.subscribe((translations) => {
65+
this.backButton.label = translations['NAV.APPLICATIONS'];
66+
this.dropdownButton.label =
67+
translations['APPLICATION-TABLE-ROW.SHOW-OPTIONS'];
68+
this.titleService.setTitle(translations['TITLE.APPLICATION']);
69+
});
70+
this.canEdit = this.meService.canWriteInTargetOrganization();
71+
}
8472

85-
applicationHasDevices(): boolean {
86-
return this.application.iotDevices?.length > 0;
87-
}
73+
onDeleteApplication() {
74+
this.deleteDialogService
75+
.showApplicationDialog(this.application)
76+
.subscribe((response) => {
77+
if (response) {
78+
this.applicationService
79+
.deleteApplication(this.application.id)
80+
.subscribe((response) => {
81+
if (response.ok && response.body.affected > 0) {
82+
console.log(
83+
'delete application with id:' + this.application.id.toString()
84+
);
85+
this.router.navigate(['applications']);
86+
} else {
87+
this.errorMessage = response?.error?.message;
88+
}
89+
});
90+
} else {
91+
console.log(response);
92+
}
93+
});
94+
}
8895

89-
bindApplication(id: number): void {
90-
this.applicationsSubscription = this.applicationService.getApplication(id).subscribe((application) => {
91-
this.application = application;
92-
});
93-
}
96+
bindApplication(id: number): void {
97+
this.applicationsSubscription = this.applicationService
98+
.getApplication(id)
99+
.subscribe((application) => {
100+
this.application = application;
101+
});
102+
}
94103

95-
ngOnDestroy() {
96-
if (this.applicationsSubscription) {
97-
this.applicationsSubscription.unsubscribe();
98-
}
99-
if (this.deleteDialogSubscription) {
100-
this.deleteDialogSubscription.unsubscribe();
101-
}
104+
ngOnDestroy() {
105+
if (this.applicationsSubscription) {
106+
this.applicationsSubscription.unsubscribe();
102107
}
108+
}
103109
}

‎src/app/applications/applications-list/applications-table/applications-table.component.ts‎

Lines changed: 28 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,10 @@
1-
import { Component, ViewChild, AfterViewInit, Input, OnInit } from '@angular/core';
1+
import {
2+
Component,
3+
ViewChild,
4+
AfterViewInit,
5+
Input,
6+
OnInit,
7+
} from '@angular/core';
28
import { MatPaginator } from '@angular/material/paginator';
39
import { MatSort } from '@angular/material/sort';
410
import { Router } from '@angular/router';
@@ -10,6 +16,7 @@ import { DeleteDialogService } from '@shared/components/delete-dialog/delete-dia
1016
import { MeService } from '@shared/services/me.service';
1117
import { merge, Observable, of as observableOf } from 'rxjs';
1218
import { catchError, map, startWith, switchMap } from 'rxjs/operators';
19+
import { DeviceType } from '@shared/enums/device-type';
1320

1421
/**
1522
* @title Table retrieving data through HTTP
@@ -40,7 +47,7 @@ export class ApplicationsTableComponent implements AfterViewInit, OnInit {
4047
private router: Router,
4148
private meService: MeService,
4249
private deleteDialogService: DeleteDialogService
43-
) { }
50+
) {}
4451

4552
ngOnInit() {
4653
this.canEdit = this.meService.canWriteInTargetOrganization();
@@ -87,33 +94,28 @@ export class ApplicationsTableComponent implements AfterViewInit, OnInit {
8794
}
8895

8996
deleteApplication(id: number) {
90-
let message: string;
91-
if (this.applicationHasDevices(id)) {
92-
message = this.translate.instant('APPLICATION.DELETE-HAS-DEVICES-PROMPT');
93-
}
97+
const applicationToDelete = this.data?.find((app) => app.id === id);
9498

95-
this.deleteDialogService.showSimpleDialog(message).subscribe((response) => {
96-
if (response) {
97-
this.applicationService.deleteApplication(id).subscribe((response) => {
98-
if (response.ok && response.body.affected > 0) {
99-
this.paginator.page.emit({
100-
pageIndex: this.paginator.pageIndex,
101-
pageSize: this.paginator.pageSize,
102-
length: this.resultsLength,
99+
this.deleteDialogService
100+
.showApplicationDialog(applicationToDelete)
101+
.subscribe((response) => {
102+
if (response) {
103+
this.applicationService
104+
.deleteApplication(id)
105+
.subscribe((response) => {
106+
if (response.ok && response.body.affected > 0) {
107+
this.paginator.page.emit({
108+
pageIndex: this.paginator.pageIndex,
109+
pageSize: this.paginator.pageSize,
110+
length: this.resultsLength,
111+
});
112+
} else {
113+
this.errorMessage = response?.error?.message;
114+
}
103115
});
104-
} else {
105-
this.errorMessage = response?.error?.message;
106-
}
107-
});
108-
}
109-
});
116+
}
117+
});
110118
}
111-
112-
applicationHasDevices(id: number): boolean {
113-
const applicationToDelete = this.data?.find(app => app.id === id);
114-
return applicationToDelete && applicationToDelete.iotDevices.length > 0;
115-
}
116-
117119
navigateToEditPage(applicationId: string) {
118120
this.router.navigate(['applications', 'edit-application', applicationId]);
119121
}

‎src/app/shared/components/delete-dialog/delete-dialog.service.ts‎

Lines changed: 59 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,72 @@
11
import { Injectable } from '@angular/core';
22
import { MatDialog } from '@angular/material/dialog';
33
import { DeleteDialogComponent } from './delete-dialog.component';
4-
import { Observable } from 'rxjs';
4+
import { Observable, Subscription } from 'rxjs';
5+
import { Application } from '@applications/application.model';
6+
import { DeviceType } from '@shared/enums/device-type';
7+
import { TranslateService } from '@ngx-translate/core';
58
@Injectable({
69
providedIn: 'root',
710
})
811
export class DeleteDialogService {
9-
12+
private deleteDialogSubscription: Subscription;
1013
constructor(
11-
private dialog: MatDialog
12-
) { }
14+
private dialog: MatDialog,
15+
public translate: TranslateService,
16+
) {}
17+
18+
showSimpleDialog(
19+
message?: string,
20+
showAccept = true,
21+
showCancel = true,
22+
showOk = false,
23+
infoTitle = ''
24+
): Observable<any> {
25+
return new Observable((observer) => {
26+
const dialog = this.dialog.open(DeleteDialogComponent, {
27+
data: {
28+
infoTitle,
29+
showOk,
30+
showAccept,
31+
showCancel,
32+
message: message ? message : 'Er du sikker på at du vil slette?',
33+
},
34+
});
35+
36+
dialog.afterClosed().subscribe((result) => {
37+
observer.next(result);
38+
});
39+
});
40+
}
1341

14-
showSimpleDialog(message?: string, showAccept = true, showCancel = true, showOk = false, infoTitle = ''): Observable<any> {
15-
return new Observable(
16-
(observer) => {
17-
const dialog = this.dialog.open(DeleteDialogComponent, {
18-
data: {
19-
infoTitle,
20-
showOk,
21-
showAccept,
22-
showCancel,
23-
message: message ? message : 'Er du sikker på at du vil slette?'
24-
}
25-
});
42+
showApplicationDialog(application: Application): Observable<any> {
43+
let message: string;
44+
let showAccept: boolean = true;
45+
const hasSigfoxDevices: boolean = this.applicationHasSigFoxDevices(
46+
application
47+
);
2648

27-
dialog.afterClosed().subscribe((result) => {
28-
observer.next(result);
29-
});
49+
if (hasSigfoxDevices) {
50+
message = this.translate.instant(
51+
'APPLICATION.DELETE-HAS-SIGFOX-DEVICES-PROMPT'
52+
);
53+
showAccept = false;
54+
} else if (this.applicationHasDevices(application)) {
55+
message = this.translate.instant(
56+
'APPLICATION.DELETE-HAS-DEVICES-PROMPT'
57+
);
3058
}
31-
);
59+
return this.showSimpleDialog(message, showAccept);
60+
}
61+
62+
applicationHasDevices(application: Application): boolean {
63+
return application.iotDevices?.length > 0;
64+
}
65+
66+
applicationHasSigFoxDevices(application: Application): boolean {
67+
const sigfoxDevice = application.iotDevices.find((device) => {
68+
return device.type === DeviceType.SIGFOX;
69+
});
70+
return sigfoxDevice !== undefined;
3271
}
3372
}

‎src/assets/i18n/da.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,7 @@
8181
"SAVE": "Gem applikation",
8282
"DELETE": "Slet applikation",
8383
"DELETE-HAS-DEVICES-PROMPT": "Der er knyttet IoT-enheder til denne applikation. Disse vil også blive slettet. Slet alligevel?",
84+
"DELETE-HAS-SIGFOX-DEVICES-PROMPT": "Applikationen kan ikke slettes, da der er knyttet Sigfox enheder til den",
8485
"NAME": "Applikationens navn",
8586
"DESCRIPTION": "Applikationens beskrivelse",
8687
"ATTACHED-IOT": "Tilknyttede IoT enheder",

0 commit comments

Comments
 (0)