redesign page with outbound mappings

mqtt-mapping-ui/mqtt-mapping/src/mqtt-mapping/core/mapping.service.ts

@@ -19,7 +19,7 @@
  * @authors Christof Strack
  */
 import { Injectable } from "@angular/core";
-import { FetchClient, IFetchResponse, InventoryService, QueriesUtil } from "@c8y/client";
+import { FetchClient, IFetchResponse, IIdentified, InventoryService, QueriesUtil } from "@c8y/client";
 import * as _ from "lodash";
 import { BehaviorSubject } from "rxjs";
 import { BrokerConfigurationService } from "../../mqtt-configuration/broker-configuration.service";
@@ -129,6 +129,22 @@ export class MappingService {
     return m;
   }
 
+  async deleteSubscriptions(device: IIdentified): Promise<any> {
+    let response = this.client.fetch(
+      `${BASE_URL}/${PATH_SUBSCRIPTION_ENDPOINT}/${device.id}`,
+      {
+        headers: {
+          "content-type": "application/json",
+        },
+        method: "DELETE",
+      }
+    );
+    let data = await response;
+    if (!data.ok) throw new Error(data.statusText)!;
+    let m = await data.text();
+    return m;
+  }
+
    async getSubscriptions(): Promise<C8YAPISubscription> {
     if (!this._feature) {
       this._feature = await this.configurationService.getFeatures();

mqtt-mapping-ui/mqtt-mapping/src/mqtt-mapping/grid/mapping.component.html

@@ -58,96 +58,80 @@
     {{ "Manage subscriptions" | translate }}
   </button>
 </c8y-action-bar-item>
-<div class="card">
-  <div class="col-xs-12 col-sm-10 col-md-8 col-lg-12 bg-white">
+<div class="col-xs-12 col-sm-10 col-md-8 col-lg-12 bg-white">
+  <div class="card">
     <div class="card-block">
       <c8y-data-grid
-        [title]="title | translate"
-        [columns]="columns"
+        [title]="titleMapping | translate"
+        [columns]="columnsMappings"
         [rows]="mappings"
         [pagination]="pagination"
-        [actionControls]="actionControls"
+        [actionControls]="actionControlMapping"
         [refresh]="refresh"
       >
       </c8y-data-grid>
     </div>
-  </div>
-
-  <!-- <div *ngIf="stepperConfiguration.direction == Direction.OUTBOUND">  -->
-  <!-- <div>
-    <c8y-list-group>
-      <c8y-li
-        *c8yFor="
-          let sub of subscription?.devices;
-          loadMore: 'show';
-          enableVirtualScroll: true;
-          virtualScrollElementSize: 40;
-          virtualScrollStrategy: 'fixed';
-          virtualScrollContainerHeight: 400
-        "
-      >
-        <c8y-li-icon [icon]="'device'"></c8y-li-icon> {{sub.id}}
-        <c8y-li-footer>
-          Device name:
-          {{ sub.name }}
-        </c8y-li-footer>
-      </c8y-li>
-    </c8y-list-group>
-  </div> -->
-  <div class="col-xs-12 col-sm-10 col-md-8 col-lg-12 bg-white" *ngIf="stepperConfiguration.direction == Direction.OUTBOUND">
-    <div class="card-block">
-      <c8y-list-group>
-        <c8y-li>
-          <label>Subscriptions for outbound mappings</label>
-        </c8y-li>
-        <c8y-li *ngFor="let sub of subscription?.devices">
-          <c8y-li-icon [icon]="'sensor'"></c8y-li-icon> Device: {{ sub.id }} - {{ sub.name }} 
-        </c8y-li>
-      </c8y-list-group>
+    <div class="card-block col-md-offset-5 bg-white">
+      <div class="c8y-empty-state" *ngIf="mappings.length === 0">
+        <h1 [c8yIcon]="'file-text'"></h1>
+        <p>
+          <strong>No mappings available.</strong><br />
+          <small translate>Add a new mapping by clicking below.</small><br />
+          <button
+            class="btn btn-primary"
+            title="Add record"
+            (click)="onAddMapping()"
+            translate
+          >
+            Add mapping
+          </button>
+        </p>
+      </div>
     </div>
   </div>
+</div>
 
-  <div class="card-block col-md-offset-5 bg-white">
-    <div class="c8y-empty-state" *ngIf="mappings.length === 0">
-      <h1 [c8yIcon]="'file-text'"></h1>
-      <p>
-        <strong>No mappings available.</strong><br />
-        <small translate>Add a new mapping by clicking below.</small><br />
-        <button
-          class="btn btn-primary"
-          title="Add record"
-          (click)="onAddMapping()"
-          translate
-        >
-          Add mapping
-        </button>
-      </p>
+<div class="col-xs-12 col-sm-10 col-md-8 col-lg-12 bg-white">
+  <div
+    class="card"
+    *ngIf="stepperConfiguration.direction == Direction.OUTBOUND"
+  >
+    <div class="card-block">
+      <c8y-data-grid
+        [title]="titleSubsription | translate"
+        [columns]="columnsSubscriptions"
+        [rows]="subscription?.devices"
+        [pagination]="pagination"
+        [actionControls]="actionControlSubscription"
+        [refresh]="refresh"
+      >
+      </c8y-data-grid>
     </div>
   </div>
+</div>
 
-  <div [ngClass]="{ drawerOpen: showConfigMapping }">
-    <div class="bottom-drawer">
-      <mapping-stepper
-        *ngIf="showConfigMapping"
-        (onCancel)="showConfigMapping = false"
-        (onCommit)="onCommitMapping($event)"
-        [mapping]="mappingToUpdate"
-        [mappings]="mappings"
-        [stepperConfiguration]="stepperConfiguration"
-      >
-      </mapping-stepper>
-    </div>
+<div [ngClass]="{ drawerOpen: showConfigMapping }">
+  <div class="bottom-drawer">
+    <mapping-stepper
+      *ngIf="showConfigMapping"
+      (onCancel)="showConfigMapping = false"
+      (onCommit)="onCommitMapping($event)"
+      [mapping]="mappingToUpdate"
+      [mappings]="mappings"
+      [stepperConfiguration]="stepperConfiguration"
+    >
+    </mapping-stepper>
   </div>
+</div>
 
-  <div [ngClass]="{ drawerOpen: showConfigSubscription }">
-    <div class="bottom-drawer">
-      <mapping-subscription
-        *ngIf="showConfigSubscription"
-        (onCancel)="showConfigSubscription = false"
-        (onCommit)="onCommitSubscriptions($event)"
-        [deviceList]="subscription.devices"
-      >
-      </mapping-subscription>
-    </div>
+<div [ngClass]="{ drawerOpen: showConfigSubscription }">
+  <div class="bottom-drawer">
+    <mapping-subscription
+      *ngIf="showConfigSubscription"
+      (onCancel)="showConfigSubscription = false"
+      (onCommit)="onCommitSubscriptions($event)"
+      [deviceList]="subscription.devices"
+    >
+    </mapping-subscription>
   </div>
 </div>

mqtt-mapping-ui/mqtt-mapping/src/mqtt-mapping/grid/mapping.component.ts

@@ -100,7 +100,8 @@ export class MappingComponent implements OnInit {
     editorMode: EditorMode.UPDATE,
     direction: Direction.INBOUND,
   };
-  title: string = `Mapping List ${this.stepperConfiguration.direction}`;
+  titleMapping: string;
+  titleSubsription: string = `Subscription on devices for mapping OUTBOUND`;
 
   displayOptions: DisplayOptions = {
     bordered: true,
@@ -109,10 +110,10 @@ export class MappingComponent implements OnInit {
     gridHeader: true,
   };
 
-  columns: Column[] = [
+  columnsMappings: Column[] = [
     {
       name: "id",
-      header: "#",
+      header: "System ID",
       path: "id",
       filterable: false,
       dataType: ColumnDataType.TextShort,
@@ -188,6 +189,23 @@ export class MappingComponent implements OnInit {
     },
   ];
 
+  columnsSubscriptions: Column[] = [
+    {
+      name: "id",
+      header: "System ID",
+      path: "id",
+      filterable: false,
+      dataType: ColumnDataType.TextShort,
+      visible: true,
+    },
+    {
+      header: "Name",
+      name: "name",
+      path: "name",
+      filterable: true,
+    },
+  ];
+
   value: string;
   mappingType: MappingType;
   destroy$: Subject<boolean> = new Subject<boolean>();
@@ -197,7 +215,8 @@ export class MappingComponent implements OnInit {
     pageSize: 3,
     currentPage: 1,
   };
-  actionControls: ActionControl[] = [];
+  actionControlMapping: ActionControl[] = [];
+  actionControlSubscription: ActionControl[] = [];
 
   constructor(
     public mappingService: MappingService,
@@ -214,33 +233,32 @@ export class MappingComponent implements OnInit {
       : Direction.OUTBOUND;
 
     if (this.stepperConfiguration.direction == Direction.OUTBOUND) {
-      this.columns[1] = {
+      this.columnsMappings[1] = {
         header: "Publish Topic",
         name: "publishTopic",
         path: "publishTopic",
         filterable: true,
         gridTrackSize: "12.5%",
-      }
-      this.columns[2] = {
+      };
+      this.columnsMappings[2] = {
         header: "Template Topic Sample",
         name: "templateTopicSample",
         path: "templateTopicSample",
         filterable: true,
         gridTrackSize: "12.5%",
-      }
+      };
     }
+    this.titleMapping = `Mapping ${this.stepperConfiguration.direction}`;
     this.loadSubscriptions();
   }
-  
-  async loadSubscriptions () {
+
+  async loadSubscriptions() {
     this.subscription = await this.mappingService.getSubscriptions();
   }
 
   ngOnInit() {
-    this.title = `Mapping List ${this.stepperConfiguration.direction}`;
-
     this.loadMappings();
-    this.actionControls.push(
+    this.actionControlMapping.push(
       {
         type: BuiltInActionType.Edit,
         callback: this.updateMapping.bind(this),
@@ -256,6 +274,10 @@ export class MappingComponent implements OnInit {
         callback: this.deleteMapping.bind(this),
       }
     );
+    this.actionControlSubscription.push({
+      type: BuiltInActionType.Delete,
+      callback: this.deleteSubscription.bind(this),
+    });
 
     this.mappingService.listToReload().subscribe(() => {
       this.loadMappings();
@@ -354,6 +376,17 @@ export class MappingComponent implements OnInit {
     this.showConfigMapping = true;
   }
 
+  async deleteSubscription(device: IIdentified) {
+    console.log("Delete device", device);
+    try {
+      await this.mappingService.deleteSubscriptions(device);
+      this.alertService.success(gettext("Subscription for this device deleted successfully"));
+      this.loadSubscriptions();
+    } catch (error) {
+      this.alertService.danger(gettext("Failed to delete subscription:") + error);
+    }
+  }
+
   updateMapping(mapping: Mapping) {
     if (!mapping.direction)
       this.stepperConfiguration.direction = Direction.INBOUND;

mqtt-mapping-ui/mqtt-mapping/src/mqtt-mapping/subscription/mapping-subscription.component.html

@@ -34,6 +34,7 @@ <h4 class="card-title">
         (onSelected)="selectionChanged($event)"
         [config]="{
           groupsSelectable: false,
+          showUnassignedDevices:true,
           multi: true,
           search: true
         }"