Feature/iot 118 move device

src/app/applications/iot-devices/iot-device-change-application-dialog/iot-device-change-application-dialog.component.html

@@ -0,0 +1,110 @@
+<div class="iot-device-change-application-dialog">
+  <h1 mat-dialog-title>{{ "IOTDEVICE.CHANGE-APPLICATION.TITLE" | translate }}</h1>
+  <div mat-dialog-content>
+    <label class="form-label" for="organizationSelect">{{
+      "IOTDEVICE.CHANGE-APPLICATION.CHOOSE-ORGANIZATION" | translate
+    }}</label>
+    <mat-select
+      id="organizationSelect"
+      class="form-control"
+      panelClass="overflow-x-hidden"
+      [(value)]="iotDeviceUpdate.organizationId"
+      [compareWith]="compare"
+      (selectionChange)="onOrganizationChange()"
+    >
+      <mat-option *ngFor="let organization of organizations | async" [value]="organization.id">
+        {{ organization.name }}
+      </mat-option>
+    </mat-select>
+    <label class="form-label" for="organizationSelect">{{
+      "IOTDEVICE.CHANGE-APPLICATION.CHOOSE-APPLICATION" | translate
+    }}</label>
+    <mat-select
+      id="applicationSelect"
+      class="form-control"
+      panelClass="overflow-x-hidden"
+      [(value)]="iotDeviceUpdate.applicationId"
+      [compareWith]="compare"
+      (selectionChange)="onApplicationChange()"
+    >
+      <mat-option *ngFor="let application of filteredApplications | async" [value]="application.id">
+        {{ application.name }}
+      </mat-option>
+    </mat-select>
+    <label class="form-label" for="organizationSelect">{{
+      "IOTDEVICE.CHANGE-APPLICATION.CHOOSE-DEVICE-MODEL" | translate
+    }}</label>
+    <mat-select
+      id="deviceModelSelect"
+      class="form-control"
+      panelClass="overflow-x-hidden"
+      [(value)]="iotDeviceUpdate.deviceModelId"
+      [compareWith]="compare"
+    >
+      <mat-option *ngFor="let deviceModel of deviceModels" [value]="deviceModel.id">
+        {{ deviceModel.body.name }}
+      </mat-option>
+    </mat-select>
+  </div>
+
+  <div class="container row" class="mt-3" mat-dialog-content>
+    <a (click)="addRow()" class="btn btn-secondary my-2 mb-3 mt-3">{{
+      "IOTDEVICE.CHANGE-APPLICATION.CHOOSE-DATA-TARGET" | translate
+    }}</a>
+    <ng-container *ngIf="payloadDecoders && iotDeviceUpdate.dataTargetToPayloadDecoderIds?.length > 0">
+      <table class="table table-striped table-bordered">
+        <tbody>
+          <tr
+            *ngFor="let element of iotDeviceUpdate.dataTargetToPayloadDecoderIds; let i = index"
+            [attr.data-index]="i"
+          >
+            <td>
+              <div class="row">
+                <mat-form-field appearance="fill">
+                  <mat-label>{{ "IOTDEVICE.CHANGE-APPLICATION.ADD-DATA-TARGET" | translate }}</mat-label>
+                  <mat-select name="dataTarget" [(value)]="element.dataTargetId">
+                    <mat-option *ngFor="let dataTarget of dataTargets" [value]="dataTarget.id">{{
+                      dataTarget.name
+                    }}</mat-option>
+                  </mat-select>
+                </mat-form-field>
+              </div>
+            </td>
+            <td>
+              <div class="row">
+                <mat-form-field appearance="fill">
+                  <mat-label>{{ "QUESTION.DATATARGET.SELECT-PAYLOADDECODER" | translate }}</mat-label>
+                  <mat-select matNativeControl name="payloadDecoder" [(value)]="element.payloadDecoderId">
+                    <mat-option [value]="0">
+                      {{ "QUESTION.DATATARGET.NO-PAYLOAD-DECODER-SELECTED" | translate }}
+                    </mat-option>
+                    <mat-option *ngFor="let payloadDecoder of payloadDecoders" [value]="payloadDecoder.id">
+                      {{ payloadDecoder.name }}
+                    </mat-option>
+                  </mat-select>
+                </mat-form-field>
+              </div>
+            </td>
+            <td>
+              <a (click)="deleteRow(i)">
+                <div class="text-center m-2">
+                  <fa-icon [icon]="faTimesCircle"></fa-icon>
+                  <p>{{ "DATATARGET.DELETE" | translate }}</p>
+                </div>
+              </a>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </ng-container>
+  </div>
+
+  <div mat-dialog-actions class="d-flex flex-row mat-dialog-actions">
+    <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/iot-devices/iot-device-change-application-dialog/iot-device-change-application-dialog.component.scss

@@ -0,0 +1,8 @@
+.iot-device-change-application-dialog {
+  width: 50vw;
+}
+
+.mat-dialog-actions {
+  margin-left: 13px;
+  margin-bottom: 13px;
+}

src/app/applications/iot-devices/iot-device-change-application-dialog/iot-device-change-application-dialog.component.ts

@@ -0,0 +1,204 @@
+import { Component, Inject, OnInit } from "@angular/core";
+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 { DeviceModelService } from "@app/device-model/device-model.service";
+import { DeviceModel } from "@app/device-model/device.model";
+import { Application } from "@applications/application.model";
+import { ApplicationService } from "@applications/application.service";
+import { TranslateService } from "@ngx-translate/core";
+import { IoTDeviceApplicationDialogModel } from "@shared/models/dialog.model";
+import { SharedVariableService } from "@shared/shared-variable/shared-variable.service";
+import { ReplaySubject, Subscription } from "rxjs";
+import { IotDevice, UpdateIoTDeviceApplication } from "../iot-device.model";
+import { IoTDeviceService } from "../iot-device.service";
+import { PayloadDecoder, PayloadDecoderMappedResponse } from "@payload-decoder/payload-decoder.model";
+import { PayloadDecoderService } from "@payload-decoder/payload-decoder.service";
+import { DatatargetService } from "@applications/datatarget/datatarget.service";
+import { Datatarget } from "@applications/datatarget/datatarget.model";
+import {
+  PayloadDeviceDatatarget,
+  PayloadDeviceDatatargetGetByDataTargetResponse,
+} from "@payload-decoder/payload-device-data.model";
+import { PayloadDeviceDatatargetService } from "@payload-decoder/payload-device-datatarget.service";
+import { faTimesCircle } from "@fortawesome/free-solid-svg-icons";
+
+@Component({
+  selector: "app-iot-device-change-application-dialog",
+  templateUrl: "./iot-device-change-application-dialog.component.html",
+  styleUrls: ["./iot-device-change-application-dialog.component.scss"],
+})
+export class IoTDeviceChangeApplicationDialogComponent implements OnInit {
+  public iotDevicesSubscription: Subscription;
+  public applicationsSubscription: Subscription;
+  public organizationsSubscription: Subscription;
+  public deviceModelSubscription: Subscription;
+  private payloadDecoderSubscription: Subscription;
+  private dataTargetSubscription: Subscription;
+  private payloadDeviceDatatargetSubscription: Subscription;
+  public iotDevice: IotDevice;
+  public iotDeviceUpdate: UpdateIoTDeviceApplication;
+  public organizations: ReplaySubject<Organisation[]> = new ReplaySubject<Organisation[]>(1);
+  public applications: Application[];
+  public filteredApplications: ReplaySubject<Application[]> = new ReplaySubject<Application[]>(1);
+  public deviceModels: DeviceModel[];
+  public devices: IotDevice[] = [];
+  public payloadDecoders: PayloadDecoder[] = [];
+  public dataTargets: Datatarget[] = [];
+  faTimesCircle = faTimesCircle;
+
+  constructor(
+    private iotDeviceService: IoTDeviceService,
+    private applicationService: ApplicationService,
+    public translate: TranslateService,
+    private organizationService: OrganisationService,
+    private deviceModelService: DeviceModelService,
+    private payloadDecoderService: PayloadDecoderService,
+    private dateTargetService: DatatargetService,
+    private payloadDeviceDatatargetService: PayloadDeviceDatatargetService,
+    private snackBar: MatSnackBar,
+    private dialog: MatDialogRef<IoTDeviceChangeApplicationDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public dialogModel: IoTDeviceApplicationDialogModel
+  ) {}
+
+  ngOnInit(): void {
+    this.translate.use("da");
+    this.iotDeviceUpdate = {
+      deviceModelId: this.dialogModel.deviceId,
+      applicationId: 0,
+      organizationId: 0,
+      dataTargetToPayloadDecoderIds: [],
+    };
+
+    this.getIoTDeviceAndDefaultData(this.dialogModel.deviceId);
+  }
+
+  getIoTDeviceAndDefaultData(id: number): void {
+    this.iotDevicesSubscription = this.iotDeviceService.getIoTDevice(id).subscribe((iotDevice: IotDevice) => {
+      this.iotDevice = iotDevice;
+      this.getOrganizations();
+      this.getApplications();
+      this.getPayloadDecoders();
+
+      this.getDataTargets(this.iotDevice.application.id);
+      this.getDeviceModels(this.iotDevice.application.belongsTo.id);
+
+      this.iotDeviceUpdate.deviceModelId = this.iotDevice.deviceModel.id;
+      this.iotDeviceUpdate.applicationId = this.iotDevice.application.id;
+      this.iotDeviceUpdate.organizationId = this.iotDevice.application.belongsTo.id;
+
+      this.getIoTDeviceCurrentDataTargetsAndPayloadDecoders(this.dialogModel.deviceId);
+    });
+  }
+
+  getIoTDeviceCurrentDataTargetsAndPayloadDecoders(id: number): void {
+    this.payloadDeviceDatatargetSubscription = this.payloadDeviceDatatargetService
+      .getByIoTDevice(id)
+      .subscribe(dataTargetsAndPayloadDecoders => {
+        const dataTargetsAndPayloadIds = dataTargetsAndPayloadDecoders.data.map(val => {
+          return { dataTargetId: val.dataTarget.id, payloadDecoderId: val.payloadDecoder?.id };
+        });
+        this.iotDeviceUpdate.dataTargetToPayloadDecoderIds.push(...dataTargetsAndPayloadIds);
+      });
+  }
+
+  getOrganizations() {
+    this.organizationsSubscription = this.organizationService.getMultipleWithApplicationAdmin().subscribe(res => {
+      this.organizations.next(res.data.slice());
+    });
+  }
+
+  getApplications(): void {
+    this.applicationsSubscription = this.applicationService
+      .getApplications(1000, 0, "asc", "id")
+      .subscribe(applicationData => {
+        this.applications = applicationData.data;
+        this.filteredApplications.next(
+          this.applications.filter(app => app.belongsTo.id === this.iotDevice.application.belongsTo.id)
+        );
+      });
+  }
+
+  getPayloadDecoders() {
+    this.payloadDecoderSubscription = this.payloadDecoderService
+      .getMultiple(1000, 0, "id", "ASC")
+      .subscribe((response: PayloadDecoderMappedResponse) => {
+        this.payloadDecoders = response.data.sort((a, b) => a.name.localeCompare(b.name, "en", { numeric: true }));
+      });
+  }
+
+  getDataTargets(applicationId: number) {
+    this.dataTargetSubscription = this.dateTargetService
+      .getByApplicationId(1000, 0, applicationId)
+      .subscribe(response => {
+        this.dataTargets = response.data;
+      });
+  }
+
+  getDeviceModels(organizationId: number) {
+    this.deviceModelSubscription = this.deviceModelService
+      .getMultiple(1000, 0, "asc", "id", organizationId)
+      .subscribe(res => {
+        this.deviceModels = res.data;
+      });
+  }
+
+  public addRow() {
+    this.iotDeviceUpdate.dataTargetToPayloadDecoderIds.push({
+      dataTargetId: null,
+      payloadDecoderId: null,
+    });
+  }
+
+  public deleteRow(index) {
+    this.iotDeviceUpdate.dataTargetToPayloadDecoderIds.splice(index, 1);
+  }
+
+  onOrganizationChange() {
+    this.filteredApplications.next(
+      this.applications.filter(app => app.belongsTo.id === this.iotDeviceUpdate.organizationId)
+    );
+    this.iotDeviceUpdate.applicationId = 0;
+    this.iotDeviceUpdate.deviceModelId = 0;
+    this.iotDeviceUpdate.dataTargetToPayloadDecoderIds = [];
+    this.dataTargets = [];
+    this.getDeviceModels(this.iotDeviceUpdate.organizationId);
+  }
+
+  onApplicationChange() {
+    this.getDataTargets(this.iotDeviceUpdate.applicationId);
+    this.iotDeviceUpdate.dataTargetToPayloadDecoderIds = [];
+  }
+
+  public compare(o1: any, o2: any): boolean {
+    return o1 === o2;
+  }
+
+  onSubmit() {
+    if (
+      !this.iotDeviceUpdate.applicationId ||
+      !this.iotDeviceUpdate.organizationId ||
+      !this.iotDeviceUpdate.deviceModelId ||
+      this.iotDeviceUpdate.dataTargetToPayloadDecoderIds.some(val => !val.dataTargetId)
+    )
+      return;
+
+    this.iotDevicesSubscription = this.iotDeviceService
+      .changeIoTDeviceApplication(this.iotDevice.id, this.iotDeviceUpdate)
+      .subscribe(savedIoTDevice => {
+        this.snackBar.open(
+          this.translate.instant("IOTDEVICE.CHANGE-APPLICATION.SNACKBAR-SAVED", {
+            deviceName: savedIoTDevice.name,
+            applicationName: savedIoTDevice.application.name,
+          }),
+          this.translate.instant("DIALOG.OK"),
+          {
+            duration: 10000,
+          }
+        );
+        this.dialog.close(true);
+        this.snackBar._openedSnackBarRef.afterDismissed().subscribe(() => location.reload());
+      });
+  }
+}

src/app/applications/iot-devices/iot-device-detail/iot-device-detail.component.ts

@@ -15,6 +15,8 @@ import { Title } from "@angular/platform-browser";
 import { MeService } from "@shared/services/me.service";
 import { OrganizationAccessScope } from "@shared/enums/access-scopes";
 import { IotDeviceDetailsService } from "@applications/iot-devices/iot-device-details-service";
+import { IoTDeviceChangeApplicationDialogComponent } from "../iot-device-change-application-dialog/iot-device-change-application-dialog.component";
+import { ApplicationDialogModel, IoTDeviceApplicationDialogModel } from "@shared/models/dialog.model";
 
 @Component({
   selector: "app-iot-device",
@@ -70,7 +72,8 @@ export class IoTDeviceDetailComponent implements OnInit, OnDestroy {
     private dialog: MatDialog,
     private titleService: Title,
     private meService: MeService,
-    private iotDeviceDetailsService: IotDeviceDetailsService
+    private iotDeviceDetailsService: IotDeviceDetailsService,
+    private changeApplicationDialog: MatDialog
   ) {}
 
   ngOnInit(): void {
@@ -89,6 +92,7 @@ export class IoTDeviceDetailComponent implements OnInit, OnDestroy {
         label: "",
         editRouterLink: "../../iot-device-edit/" + this.deviceId,
         isErasable: true,
+        extraOptions: [],
       };
     }
 
@@ -115,7 +119,6 @@ export class IoTDeviceDetailComponent implements OnInit, OnDestroy {
         this.resetApiKeyCancel = translations["GEN.CANCEL"];
       });
 
-    this.dropdownButton.extraOptions = [];
     if (this.router.url.split("/").length <= 5) {
       this.router.navigateByUrl(this.router.url + "/details", {
         replaceUrl: true,
@@ -136,6 +139,16 @@ export class IoTDeviceDetailComponent implements OnInit, OnDestroy {
       if (this.canEdit && this.device.type === DeviceType.GENERIC_HTTP) {
         this.dropdownButton.extraOptions.push(this.resetApiKeyOption);
       }
+
+      if (this.device?.type !== DeviceType.SIGFOX) {
+        this.translate.get("IOTDEVICE.CHANGE-APPLICATION.TITLE").subscribe(translation => {
+          this.dropdownButton.extraOptions.push({
+            id: this.deviceId,
+            label: translation,
+            onClick: () => this.onOpenChangeApplicationDialog(),
+          });
+        });
+      }
     });
   }
 
@@ -170,6 +183,14 @@ export class IoTDeviceDetailComponent implements OnInit, OnDestroy {
     }
   }
 
+  onOpenChangeApplicationDialog() {
+    this.changeApplicationDialog.open(IoTDeviceChangeApplicationDialogComponent, {
+      data: {
+        deviceId: this.deviceId,
+      } as IoTDeviceApplicationDialogModel,
+    });
+  }
+
   ngOnDestroy() {
     // prevent memory leak by unsubscribing
     if (this.iotDeviceSubscription) {