Feature/IOT-1583: Move application

src/app/applications/application-change-organization-dialog/application-change-organization-dialog.component.html

@@ -0,0 +1,44 @@
+<div class="application-change-organization-dialog">
+  <h1 mat-dialog-title>{{ "APPLICATION.CHANGE-ORGANIZATION.TITLE" | translate }}</h1>
+  <div mat-dialog-content>
+    <label class="form-label" for="userGroup">{{
+      "APPLICATION.CHANGE-ORGANIZATION.CHOOSE-ORGANIZATION" | translate
+    }}</label>
+    <mat-select
+      id="userGroup"
+      class="form-control"
+      panelClass="overflow-x-hidden"
+      [(value)]="application.organizationId"
+      [compareWith]="compare"
+      (selectionChange)="onOrganizationChange()"
+    >
+      <mat-option *ngFor="let organization of filteredOrganizations | async" [value]="organization.id">
+        {{ organization.name }}
+      </mat-option>
+    </mat-select>
+    <label class="form-label" for="userGroup">{{
+      "APPLICATION.CHANGE-ORGANIZATION.CHOOSE-USER-GROUPS" | translate
+    }}</label>
+    <mat-select
+      id="userGroup"
+      class="form-control"
+      [multiple]="true"
+      panelClass="overflow-x-hidden"
+      [(value)]="application.permissionIds"
+      [compareWith]="compare"
+    >
+      <mat-option *ngFor="let permission of filteredPermissionsMulti | async" [value]="permission.id">
+        {{ permission.name }}
+      </mat-option>
+    </mat-select>
+    <mat-hint>{{ "APPLICATION.CHANGE-ORGANIZATION.USER-GROUP-AUTO-SELECT" | translate }}</mat-hint>
+  </div>
+  <div mat-dialog-actions class="d-flex flex-row">
+    <button (click)="onSubmit()" class="btn btn-primary">
+      {{ "GEN.SAVE" | translate }}
+    </button>
+    <button mat-dialog-close [mat-dialog-close]="false" class="btn btn-secondary ml-2">
+      {{ "GEN.CANCEL" | translate }}
+    </button>
+  </div>
+</div>

src/app/applications/application-change-organization-dialog/application-change-organization-dialog.component.scss

@@ -0,0 +1,3 @@
+.application-change-organization-dialog {
+  width: 50vw;
+}

src/app/applications/application-change-organization-dialog/application-change-organization-dialog.component.ts

@@ -0,0 +1,110 @@
+import { Component, Inject, OnInit } from "@angular/core";
+import { UntypedFormControl } from "@angular/forms";
+import { MAT_DIALOG_DATA, MatDialogRef } from "@angular/material/dialog";
+import { MatSnackBar } from "@angular/material/snack-bar";
+import { Organisation } from "@app/admin/organisation/organisation.model";
+import { OrganisationService } from "@app/admin/organisation/organisation.service";
+import { PermissionResponse } from "@app/admin/permission/permission.model";
+import { PermissionService } from "@app/admin/permission/permission.service";
+import { Application, UpdateApplicationOrganization } from "@applications/application.model";
+import { ApplicationService } from "@applications/application.service";
+import { TranslateService } from "@ngx-translate/core";
+import { ApplicationDialogModel } from "@shared/models/dialog.model";
+import { SharedVariableService } from "@shared/shared-variable/shared-variable.service";
+import { ReplaySubject, Subscription } from "rxjs";
+
+@Component({
+  selector: "app-change-organization-dialog",
+  templateUrl: "./application-change-organization-dialog.component.html",
+  styleUrls: ["./application-change-organization-dialog.component.scss"],
+})
+export class ApplicationChangeOrganizationDialogComponent implements OnInit {
+  public applicationsSubscription: Subscription;
+  public permissionsSubscription: Subscription;
+  public organizationsSubscription: Subscription;
+  public application: UpdateApplicationOrganization;
+  public permissions: PermissionResponse[];
+  public organizations: Organisation[];
+  public filteredPermissionsMulti: ReplaySubject<PermissionResponse[]> = new ReplaySubject<PermissionResponse[]>(1);
+  public filteredOrganizations: ReplaySubject<Organisation[]> = new ReplaySubject<Organisation[]>(1);
+
+  constructor(
+    private applicationService: ApplicationService,
+    public translate: TranslateService,
+    private permissionService: PermissionService,
+    private organizationService: OrganisationService,
+    private sharedVariableService: SharedVariableService,
+    private snackBar: MatSnackBar,
+    private dialog: MatDialogRef<ApplicationChangeOrganizationDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public dialogModel: ApplicationDialogModel
+  ) {
+    this.application = {
+      organizationId: this.dialogModel.organizationId ?? this.sharedVariableService.getSelectedOrganisationId(),
+      permissionIds: [],
+    };
+  }
+
+  ngOnInit(): void {
+    this.translate.use("da");
+    if (this.dialogModel.id) {
+      this.getApplication(this.dialogModel.id);
+    }
+    this.getOrganizations();
+    this.getPermissions();
+  }
+
+  getApplication(id: number): void {
+    this.applicationsSubscription = this.applicationService.getApplication(id).subscribe((application: Application) => {
+      this.application.permissionIds = application.permissionIds;
+    });
+  }
+
+  getOrganizations() {
+    this.organizationsSubscription = this.organizationService.getMinimal().subscribe(res => {
+      this.organizations = res.data;
+      this.filteredOrganizations.next(this.organizations.slice());
+    });
+  }
+
+  getPermissions() {
+    this.permissionsSubscription = this.permissionService.getPermissions(1000, 0).subscribe(res => {
+      this.permissions = res.data.sort((a, b) => a.name.localeCompare(b.name, "da-DK", { numeric: true }));
+      this.filteredPermissionsMulti.next(
+        this.permissions.filter(p => p?.organization?.id === this?.application?.organizationId)
+      );
+    });
+  }
+
+  public compare(o1: any, o2: any): boolean {
+    return o1 === o2;
+  }
+
+  onOrganizationChange() {
+    this.filteredPermissionsMulti.next(
+      this.permissions.filter(p => p?.organization?.id === this?.application?.organizationId)
+    );
+    this.filteredPermissionsMulti.subscribe(res => {
+      this.application.permissionIds = res
+        .filter(permission => permission.automaticallyAddNewApplications)
+        .map(permission => permission.id);
+    });
+  }
+
+  onSubmit() {
+    this.applicationsSubscription = this.applicationService
+      .updateApplicationOrganization(this.application, this.dialogModel.id)
+      .subscribe(savedApplication => {
+        this.snackBar.open(
+          this.translate.instant("APPLICATION.CHANGE-ORGANIZATION.SNACKBAR-SAVED", {
+            applicationName: savedApplication.name,
+            organizationName: savedApplication.belongsTo.name,
+          }),
+          "",
+          {
+            duration: 10000,
+          }
+        );
+        this.dialog.close(true);
+      });
+  }
+}

src/app/applications/application-detail/application-detail.component.html

@@ -7,6 +7,7 @@
     [dropDownButton]="dropdownButton"
     (deleteSelectedInDropdown)="onDeleteApplication()"
     [canEdit]="canEdit"
+    (extraDropdownOptions)="onExtraDropdownOptionClicked($event)"
   >
   </app-top-bar>
   <div class="container-fluid">

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 { ApplicationChangeOrganizationDialogComponent } from "../application-change-organization-dialog/application-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<number, () => 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.TITLE").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,21 @@ export class ApplicationDetailComponent implements OnInit, OnDestroy, AfterViewI
     });
   }
 
+  onOpenChangeOrganizationDialog() {
+    this.changeOrganizationDialog.open(ApplicationChangeOrganizationDialogComponent, {
+      data: {
+        id: this.id,
+        organizationId: this.application.belongsTo.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;

src/app/applications/application.model.ts

@@ -61,3 +61,8 @@ export interface ApplicationData {
   ok?: boolean;
   count?: number;
 }
+
+export class UpdateApplicationOrganization {
+  public organizationId: number;
+  public permissionIds: number[];
+}

src/app/applications/application.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from "@angular/core";
-import { Application, ApplicationData } from "@applications/application.model";
+import { Application, ApplicationData, UpdateApplicationOrganization } from "@applications/application.model";
 import { RestService } from "../shared/services/rest.service";
 import { Observable } from "rxjs";
 import { map } from "rxjs/operators";
@@ -76,4 +76,10 @@ export class ApplicationService {
   deleteApplication(id: number) {
     return this.restService.delete("application", id);
   }
+
+  updateApplicationOrganization(body: UpdateApplicationOrganization, id: number): Observable<Application> {
+    return this.restService.put("application/updateApplicationOrganization", body, id, {
+      observe: "response",
+    });
+  }
 }

src/app/applications/applications-list/applications-table/applications-table.component.html

@@ -161,6 +161,11 @@
                   "APPLICATION-TABLE-ROW.EDIT" | translate
                 }}</a>
               </li>
+              <li class="dropdown-item">
+                <a (click)="onOpenChangeOrganizationDialog(element.id)" routerLinkActive="active">{{
+                  "APPLICATION.CHANGE-ORGANIZATION.TITLE" | translate
+                }}</a>
+              </li>
               <li class="dropdown-item">
                 <a (click)="deleteApplication(element.id)" [routerLink]="[]">{{
                   "APPLICATION-TABLE-ROW.DELETE" | translate

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

@@ -24,6 +24,9 @@ import { ApplicationDeviceType } from "@applications/models/application-device-t
 import { Datatarget } from "@applications/datatarget/datatarget.model";
 import { faFlag } from "@fortawesome/free-solid-svg-icons";
 import { TableColumn } from "@shared/types/table.type";
+import { MatDialog } from "@angular/material/dialog";
+import { ApplicationDialogModel } from "@shared/models/dialog.model";
+import { ApplicationChangeOrganizationDialogComponent } from "@applications/application-change-organization-dialog/application-change-organization-dialog.component";
 
 const columnDefinitions: TableColumn[] = [
   {
@@ -144,7 +147,8 @@ export class ApplicationsTableComponent implements AfterViewInit, OnInit {
     private applicationService: ApplicationService,
     private router: Router,
     private deleteDialogService: DeleteDialogService,
-    private cdRef: ChangeDetectorRef
+    private cdRef: ChangeDetectorRef,
+    private changeOrganizationDialog: MatDialog
   ) {}
 
   ngOnInit() {
@@ -268,5 +272,19 @@ export class ApplicationsTableComponent implements AfterViewInit, OnInit {
     return !!result;
   }
 
+  onOpenChangeOrganizationDialog(id: number) {
+    const dialog = this.changeOrganizationDialog.open(ApplicationChangeOrganizationDialogComponent, {
+      data: {
+        id: id,
+      } as ApplicationDialogModel,
+    });
+
+    dialog.afterClosed().subscribe(res => {
+      if (!res) return;
+
+      location.reload();
+    });
+  }
+
   protected readonly columnDefinitions = columnDefinitions;
 }

src/app/applications/applications.module.ts

@@ -19,6 +19,7 @@ import { PipesModule } from "@shared/pipes/pipes.module";
 import { ApplicationsTableComponent } from "./applications-list/applications-table/applications-table.component";
 import { MulticastModule } from "./multicast/multicast.module";
 import { ReactiveFormsModule } from "@angular/forms";
+import { ApplicationChangeOrganizationDialogComponent } from "./application-change-organization-dialog/application-change-organization-dialog.component";
 
 @NgModule({
   declarations: [
@@ -28,6 +29,7 @@ import { ReactiveFormsModule } from "@angular/forms";
     ApplicationsListComponent,
     ApplicationsTableComponent,
     BulkImportComponent,
+    ApplicationChangeOrganizationDialogComponent,
   ],
   exports: [ApplicaitonsRoutingModule, ApplicationsComponent, ApplicationsTableComponent],
   imports: [

src/app/shared/models/dialog.model.ts

@@ -12,3 +12,8 @@ export class DialogModel {
 export class WelcomeDialogModel {
   hasSomePermission: boolean;
 }
+
+export class ApplicationDialogModel {
+  id: number;
+  organizationId?: number;
+}