From 6b6e6a2b5207ad72894466fbd399eea9c6a29d45 Mon Sep 17 00:00:00 2001 From: Mads Apollo Lauridsen Date: Mon, 9 Sep 2024 16:51:02 +0200 Subject: [PATCH 1/8] Added change organization dialog component. This can be opened from details page, and the table. Dialog is still in progress. --- .../application-detail.component.html | 1 + .../application-detail.component.ts | 32 ++++++- .../change-organization-dialog.component.html | 19 ++++ .../change-organization-dialog.component.scss | 0 .../change-organization-dialog.component.ts | 89 +++++++++++++++++++ .../applications-table.component.html | 5 ++ .../applications-table.component.ts | 14 ++- src/app/applications/applications.module.ts | 2 + src/app/shared/models/dialog.model.ts | 4 + src/assets/i18n/da.json | 3 +- 10 files changed, 166 insertions(+), 3 deletions(-) create mode 100644 src/app/applications/application-detail/change-organization-dialog/change-organization-dialog.component.html create mode 100644 src/app/applications/application-detail/change-organization-dialog/change-organization-dialog.component.scss create mode 100644 src/app/applications/application-detail/change-organization-dialog/change-organization-dialog.component.ts diff --git a/src/app/applications/application-detail/application-detail.component.html b/src/app/applications/application-detail/application-detail.component.html index 9a6262efe..72ea3db4a 100644 --- a/src/app/applications/application-detail/application-detail.component.html +++ b/src/app/applications/application-detail/application-detail.component.html @@ -7,6 +7,7 @@ [dropDownButton]="dropdownButton" (deleteSelectedInDropdown)="onDeleteApplication()" [canEdit]="canEdit" + (extraDropdownOptions)="onExtraDropdownOptionClicked($event)" >
diff --git a/src/app/applications/application-detail/application-detail.component.ts b/src/app/applications/application-detail/application-detail.component.ts index ba55cbfe0..54edc69d4 100644 --- a/src/app/applications/application-detail/application-detail.component.ts +++ b/src/app/applications/application-detail/application-detail.component.ts @@ -17,6 +17,9 @@ import { map } from "rxjs/operators"; import { SharedVariableService } from "@shared/shared-variable/shared-variable.service"; import { ChirpstackGatewayService } from "@shared/services/chirpstack-gateway.service"; import { Gateway, GatewayResponseMany } from "@app/gateway/gateway.model"; +import { MatDialog } from "@angular/material/dialog"; +import { ChangeOrganizationDialogComponent } from "./change-organization-dialog/change-organization-dialog.component"; +import { ApplicationDialogModel } from "@shared/models/dialog.model"; @Component({ selector: "app-application", @@ -57,6 +60,7 @@ export class ApplicationDetailComponent implements OnInit, OnDestroy, AfterViewI public redMarker = "/assets/images/red-marker.png"; public greenMarker = "/assets/images/green-marker.png"; public greyMarker = "/assets/images/grey-marker.png"; + private dropdownButtonExtraOptionsHandlers: Map void> = new Map(); constructor( private applicationService: ApplicationService, @@ -68,7 +72,8 @@ export class ApplicationDetailComponent implements OnInit, OnDestroy, AfterViewI private deleteDialogService: DeleteDialogService, private restService: RestService, private sharedVariableService: SharedVariableService, - private chirpstackGatewayService: ChirpstackGatewayService + private chirpstackGatewayService: ChirpstackGatewayService, + private changeOrganizationDialog: MatDialog ) {} ngOnInit(): void { @@ -79,7 +84,18 @@ export class ApplicationDetailComponent implements OnInit, OnDestroy, AfterViewI label: "", editRouterLink: "../edit-application/" + this.id, isErasable: true, + extraOptions: [], }; + + this.translate.get("APPLICATION.CHANGE_ORGANIZATION").subscribe(translation => { + const changeOrganizationButton = { + id: this.id, + label: translation, + onClick: () => this.onOpenChangeOrganizationDialog(), + }; + this.dropdownButton.extraOptions.push(changeOrganizationButton); + this.dropdownButtonExtraOptionsHandlers.set(changeOrganizationButton.id, changeOrganizationButton.onClick); + }); } this.translate @@ -193,6 +209,20 @@ export class ApplicationDetailComponent implements OnInit, OnDestroy, AfterViewI }); } + onOpenChangeOrganizationDialog() { + this.changeOrganizationDialog.open(ChangeOrganizationDialogComponent, { + data: { + id: this.id, + } as ApplicationDialogModel, + }); + } + + onExtraDropdownOptionClicked(id: string) { + const handler = this.dropdownButtonExtraOptionsHandlers.get(Number(id)); + + handler && handler(); + } + bindApplication(id: number): void { this.applicationsSubscription = this.applicationService.getApplication(id).subscribe(application => { this.application = application; diff --git a/src/app/applications/application-detail/change-organization-dialog/change-organization-dialog.component.html b/src/app/applications/application-detail/change-organization-dialog/change-organization-dialog.component.html new file mode 100644 index 000000000..d2d0e7e58 --- /dev/null +++ b/src/app/applications/application-detail/change-organization-dialog/change-organization-dialog.component.html @@ -0,0 +1,19 @@ +

{{ "APPLICATION.CHANGE_ORGANIZATION" | translate }}

+
+ + + + + {{ permission.name }} + + + {{ "QUESTION.APPLICATION.PERMISSION-HINT" | translate }} +
diff --git a/src/app/applications/application-detail/change-organization-dialog/change-organization-dialog.component.scss b/src/app/applications/application-detail/change-organization-dialog/change-organization-dialog.component.scss new file mode 100644 index 000000000..e69de29bb diff --git a/src/app/applications/application-detail/change-organization-dialog/change-organization-dialog.component.ts b/src/app/applications/application-detail/change-organization-dialog/change-organization-dialog.component.ts new file mode 100644 index 000000000..70d6f4c7f --- /dev/null +++ b/src/app/applications/application-detail/change-organization-dialog/change-organization-dialog.component.ts @@ -0,0 +1,89 @@ +import { Component, Inject, OnInit } from "@angular/core"; +import { UntypedFormControl } from "@angular/forms"; +import { MAT_DIALOG_DATA } from "@angular/material/dialog"; +import { ActivatedRoute } from "@angular/router"; +import { PermissionResponse } from "@app/admin/permission/permission.model"; +import { PermissionService } from "@app/admin/permission/permission.service"; +import { Application, ApplicationRequest } from "@applications/application.model"; +import { TranslateService } from "@ngx-translate/core"; +import { ApplicationDialogModel } from "@shared/models/dialog.model"; +import { RestService } from "@shared/services/rest.service"; +import { SharedVariableService } from "@shared/shared-variable/shared-variable.service"; +import { ReplaySubject, Subscription } from "rxjs"; + +@Component({ + selector: "app-change-organization-dialog", + templateUrl: "./change-organization-dialog.component.html", + styleUrls: ["./change-organization-dialog.component.scss"], +}) +export class ChangeOrganizationDialogComponent implements OnInit { + public applicationsSubscription: Subscription; + public permissionsSubscription: Subscription; + public permissionMultiCtrl: UntypedFormControl = new UntypedFormControl(); + public permissionMultiFilterCtrl: UntypedFormControl = new UntypedFormControl(); + application = new ApplicationRequest(); + public permissions: PermissionResponse[]; + public filteredPermissionsMulti: ReplaySubject = new ReplaySubject(1); + + constructor( + private restService: RestService, + private route: ActivatedRoute, + public translate: TranslateService, + private permissionService: PermissionService, + private sharedVariableService: SharedVariableService, + @Inject(MAT_DIALOG_DATA) public dialogModel: ApplicationDialogModel + ) { + this.permissionMultiCtrl.setValue(this.application.permissionIds); + } + + ngOnInit(): void { + this.translate.use("da"); + if (this.dialogModel.id) { + this.getApplication(this.dialogModel.id); + } + this.getPermissions(this.sharedVariableService.getUserInfo().user.id); + } + + public compare(o1: any, o2: any): boolean { + return o1 === o2; + } + + getApplication(id: number): void { + this.applicationsSubscription = this.restService + .get("application", {}, id) + .subscribe((application: Application) => { + this.application = new ApplicationRequest(); + this.application.name = application.name; + this.application.description = application.description; + this.application.organizationId = application.belongsTo.id; + this.application.status = application.status; + this.application.startDate = application.startDate; + this.application.endDate = application.endDate; + + this.application.category = application.category; + this.application.owner = application.owner; + this.application.contactPerson = application.contactPerson; + this.application.contactEmail = application.contactEmail; + this.application.contactPhone = application.contactPhone; + this.application.personalData = application.personalData; + this.application.hardware = application.hardware; + this.application.controlledProperties = application.controlledProperties.map(ctrlProperty => ctrlProperty.type); + this.application.deviceTypes = application.deviceTypes.map(deviceType => deviceType.type); + this.application.permissionIds = application.permissionIds; + this.permissionMultiCtrl.setValue(this.application.permissionIds); + }); + } + + getPermissions(userId: number) { + this.permissionsSubscription = this.permissionService + .getPermissions(1000, 0, undefined, undefined, userId, this.sharedVariableService.getSelectedOrganisationId()) + .subscribe(res => { + this.permissions = res.data.sort((a, b) => a.name.localeCompare(b.name, "da-DK", { numeric: true })); + this.filteredPermissionsMulti.next(this.permissions.slice()); + if (!this.dialogModel.id) { + this.application.permissionIds = [this.permissions[0].id]; + this.permissionMultiCtrl.setValue(this.application.permissionIds); + } + }); + } +} diff --git a/src/app/applications/applications-list/applications-table/applications-table.component.html b/src/app/applications/applications-list/applications-table/applications-table.component.html index 7b4ec785c..1c49e7998 100644 --- a/src/app/applications/applications-list/applications-table/applications-table.component.html +++ b/src/app/applications/applications-list/applications-table/applications-table.component.html @@ -161,6 +161,11 @@ "APPLICATION-TABLE-ROW.EDIT" | translate }} +
- - +
+

{{ "APPLICATION.CHANGE-ORGANIZATION.TITLE" | translate }}

+
+ + + + {{ organization.name }} + + + + + + {{ permission.name }} + + + {{ "APPLICATION.CHANGE-ORGANIZATION.USER-GROUP-AUTO-SELECT" | translate }} +
+
+ + +
diff --git a/src/app/applications/application-detail/change-organization-dialog/change-organization-dialog.component.scss b/src/app/applications/application-detail/change-organization-dialog/change-organization-dialog.component.scss index e69de29bb..ff69e82d9 100644 --- a/src/app/applications/application-detail/change-organization-dialog/change-organization-dialog.component.scss +++ b/src/app/applications/application-detail/change-organization-dialog/change-organization-dialog.component.scss @@ -0,0 +1,3 @@ +.change-organization-dialog { + width: 50vw; +} From 392a1c7f2f5b2534630c1e60e6822a4bf9166e89 Mon Sep 17 00:00:00 2001 From: Mads Apollo Lauridsen Date: Thu, 12 Sep 2024 12:09:08 +0200 Subject: [PATCH 6/8] changed name of change organization dialog --- ...application-change-organization-dialog.component.html} | 2 +- .../application-change-organization-dialog.component.scss | 3 +++ .../application-change-organization-dialog.component.ts} | 8 ++++---- .../application-detail/application-detail.component.ts | 4 ++-- .../change-organization-dialog.component.scss | 3 --- .../applications-table/applications-table.component.ts | 4 ++-- src/app/applications/applications.module.ts | 4 ++-- 7 files changed, 14 insertions(+), 14 deletions(-) rename src/app/applications/{application-detail/change-organization-dialog/change-organization-dialog.component.html => application-change-organization-dialog/application-change-organization-dialog.component.html} (96%) create mode 100644 src/app/applications/application-change-organization-dialog/application-change-organization-dialog.component.scss rename src/app/applications/{application-detail/change-organization-dialog/change-organization-dialog.component.ts => application-change-organization-dialog/application-change-organization-dialog.component.ts} (93%) delete mode 100644 src/app/applications/application-detail/change-organization-dialog/change-organization-dialog.component.scss diff --git a/src/app/applications/application-detail/change-organization-dialog/change-organization-dialog.component.html b/src/app/applications/application-change-organization-dialog/application-change-organization-dialog.component.html similarity index 96% rename from src/app/applications/application-detail/change-organization-dialog/change-organization-dialog.component.html rename to src/app/applications/application-change-organization-dialog/application-change-organization-dialog.component.html index f4ff17d1a..8a678505e 100644 --- a/src/app/applications/application-detail/change-organization-dialog/change-organization-dialog.component.html +++ b/src/app/applications/application-change-organization-dialog/application-change-organization-dialog.component.html @@ -1,4 +1,4 @@ -
+

{{ "APPLICATION.CHANGE-ORGANIZATION.TITLE" | translate }}