merging device-modal.component, gateway-modal.component and bind-devi…

…ces-modal.component to create-and-bind-modal.component

Signed-off-by: Muhammed <[email protected]>

device-management-ui/src/app/app.module.ts

@@ -9,7 +9,6 @@ import {TenantListComponent} from './components/tenants/tenant-list/tenant-list.
 import {TenantDetailComponent} from './components/tenants/tenant-detail/tenant-detail.component';
 import {DeviceListComponent} from './components/devices/device-list/device-list.component';
 import {DeviceDetailComponent} from './components/devices/device-detail/device-detail.component';
-import {DeviceModalComponent} from './components/modals/device/device-modal.component';
 import {TenantModalComponent} from './components/modals/tenant/tenant-modal.component';
 import {DeleteComponent} from './components/modals/delete/delete.component';
 
@@ -46,9 +45,8 @@ import {ToastContainerComponent} from './components/toast-container/toast-contai
 import {ConfigAccordionComponent} from './components/devices/device-detail/list-config/config-accordion/config-accordion.component';
 import {TruncatePipe} from './shared/truncate.pipe';
 import {GatewayListComponent} from './components/gateways/gateway-list/gateway-list.component';
-import { GatewayModalComponent } from './components/modals/gateway/gateway-modal.component';
 import { SelectDevicesComponent } from './components/modals/select-devices/select-devices.component';
-import { BindDevicesModalComponent } from './components/modals/bind-devices-modal/bind-devices-modal.component';
+import { CreateAndBindModalComponent } from './components/modals/create-and-bind-modal/create-and-bind-modal.component';
 
 @NgModule({
   declarations: [
@@ -57,7 +55,6 @@ import { BindDevicesModalComponent } from './components/modals/bind-devices-moda
     TenantDetailComponent,
     DeviceListComponent,
     DeviceDetailComponent,
-    DeviceModalComponent,
     TenantModalComponent,
     DeleteComponent,
     UpdateConfigModalComponent,
@@ -78,9 +75,8 @@ import { BindDevicesModalComponent } from './components/modals/bind-devices-moda
     ConfigAccordionComponent,
     TruncatePipe,
     GatewayListComponent,
-    GatewayModalComponent,
     SelectDevicesComponent,
-    BindDevicesModalComponent
+    CreateAndBindModalComponent
   ],
   imports: [
     BrowserModule,

device-management-ui/src/app/components/devices/device-detail/device-detail.component.html

@@ -37,7 +37,7 @@
       </button>
     </div>
     <div *ngIf="!isBoundDevice" class="function-element">
-      <button (click)="openBindDevicesModal()" [ngbTooltip]="'Bind Device'" class="btn btn-sm btn-primary"
+      <button (click)="bindNewDevicesToGateway()" [ngbTooltip]="'Bind Device'" class="btn btn-sm btn-primary"
               type="button">
         <fa-icon [icon]="['fas', 'plus']"></fa-icon>
       </button>

device-management-ui/src/app/components/devices/device-detail/device-detail.component.ts

@@ -14,7 +14,7 @@ import {Credentials} from 'src/app/models/credentials/credentials';
 import {CredentialsService} from "../../../services/credentials/credentials.service";
 import {NotificationService} from "../../../services/notification/notification.service";
 import {DatePipe} from "@angular/common";
-import { BindDevicesModalComponent } from '../../modals/bind-devices-modal/bind-devices-modal.component';
+import {CreateAndBindModalComponent} from "../../modals/create-and-bind-modal/create-and-bind-modal.component";
 
 @Component({
   selector: 'app-device-detail',
@@ -25,7 +25,6 @@ export class DeviceDetailComponent {
 
 
   public isGateway: boolean = false;
-  public bindDevices: boolean = false;
   protected tenantIdLabel: string = 'Tenant ID:';
   protected creationTimeLabel: string = 'Created (UTC):';
   protected configLabel: string = 'Configuration';
@@ -215,14 +214,13 @@ export class DeviceDetailComponent {
     });
   }
 
-  protected openBindDevicesModal(){
-    const modalRef = this.modalService.open(BindDevicesModalComponent, {size: 'lg'});
-
+  protected bindNewDevicesToGateway(){
+    const modalRef = this.modalService.open(CreateAndBindModalComponent, {size: 'lg'});
     modalRef.componentInstance.tenantId = this.tenant.id;
-    modalRef.componentInstance.bindDevices = true;
     modalRef.componentInstance.deviceId = this.device.id;
-    modalRef.componentInstance.isGateway = this.isGateway;
+    modalRef.componentInstance.isBindDeviceFlag = true;
     modalRef.componentInstance.boundDevicesCount = this.boundDeviceListCount;
+    modalRef.componentInstance.isGateway = this.isGateway;
 
     modalRef.componentInstance.devicesSelected.subscribe((selectedDevices: Device[]) => {
       this.boundDevicesList.push(...selectedDevices);

device-management-ui/src/app/components/devices/device-list/device-list.component.ts

@@ -1,15 +1,14 @@
 import {Component, EventEmitter, Input, Output, QueryList, ViewChildren} from '@angular/core';
 import {Router} from '@angular/router';
 import {NgbModal} from '@ng-bootstrap/ng-bootstrap';
-import {DeviceModalComponent} from '../../modals/device/device-modal.component';
 import {DeleteComponent} from '../../modals/delete/delete.component';
 import {Tenant} from "../../../models/tenant";
 import {Device} from "../../../models/device";
 import {DeviceService} from "../../../services/device/device.service";
 import {SortableTableDirective, SortEvent} from "../../../services/sortable-table/sortable-table.directive";
 import {SortableTableService} from "../../../services/sortable-table/sortable-table.service";
 import {NotificationService} from "../../../services/notification/notification.service";
-import {BindDevicesModalComponent} from "../../modals/bind-devices-modal/bind-devices-modal.component";
+import {CreateAndBindModalComponent} from "../../modals/create-and-bind-modal/create-and-bind-modal.component";
 
 @Component({
   selector: 'app-device-list',
@@ -107,8 +106,9 @@ export class DeviceListComponent {
   }
 
   protected createDevice(): void {
-    const modalRef = this.modalService.open(DeviceModalComponent, {size: 'lg'});
+    const modalRef = this.modalService.open(CreateAndBindModalComponent, {size: 'lg'});
     modalRef.componentInstance.tenantId = this.tenant.id;
+    modalRef.componentInstance.isDeviceFlag = true;
     modalRef.result.then((device) => {
       if (device) {
         this.deviceCreated.emit();
@@ -168,12 +168,12 @@ export class DeviceListComponent {
   }
 
   protected bindNewDevicesToGateway(){
-    const modalRef = this.modalService.open(BindDevicesModalComponent, {size: 'lg'});
+    const modalRef = this.modalService.open(CreateAndBindModalComponent, {size: 'lg'});
     modalRef.componentInstance.tenantId = this.tenant.id;
-    modalRef.componentInstance.bindDevices = true;
     modalRef.componentInstance.deviceId = this.deviceId;
-    modalRef.componentInstance.isGateway = this.isGateway;
+    modalRef.componentInstance.isBindDeviceFlag = true;
     modalRef.componentInstance.boundDevicesCount = this.boundDeviceListCount;
+    modalRef.componentInstance.isGateway = this.isGateway;
 
     modalRef.componentInstance.devicesSelected.subscribe((selectedDevices: Device[]) => {
       this.devices.push(...selectedDevices);

device-management-ui/src/app/components/gateways/gateway-list/gateway-list.component.ts

@@ -7,8 +7,8 @@ import {NgbModal} from "@ng-bootstrap/ng-bootstrap";
 import {DeviceService} from "../../../services/device/device.service";
 import {SortableTableService} from "../../../services/sortable-table/sortable-table.service";
 import {NotificationService} from "../../../services/notification/notification.service";
-import {GatewayModalComponent} from '../../modals/gateway/gateway-modal.component';
 import {DeleteComponent} from "../../modals/delete/delete.component";
+import {CreateAndBindModalComponent} from "../../modals/create-and-bind-modal/create-and-bind-modal.component";
 
 @Component({
   selector: 'app-gateway-list',
@@ -84,8 +84,9 @@ export class GatewayListComponent {
   }
 
   protected createGateway(): void {
-    const modalRef = this.modalService.open(GatewayModalComponent, {size: 'lg'});
+    const modalRef = this.modalService.open(CreateAndBindModalComponent, {size: 'lg'});
     modalRef.componentInstance.tenantId = this.tenant.id;
+    modalRef.componentInstance.isGatewayFlag = true;
     modalRef.result.then((gateway) => {
       if (gateway) {
         this.gateways = [...this.gateways,gateway]