Implemented modal handling. Added screenshots.

Cumulocity-IoT · May 15, 2023 · 0144743 · 0144743
1 parent 6135eb5
commit 0144743
Show file tree

Hide file tree

Showing 22 changed files with 333 additions and 163 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,17 @@
 # Service request plugin
 
 Acknowledge alarms by adding new views and a widget
+
+## Sample images
+
+Overview dashboard
+![alt See alarms and service requests](/docs/notifications-dashboard.png)
+
+You can create service requests from scratch, or based on an alarm.
+![alt Create or edit service requests](/docs/edit-service-request.png)
+
+Users can comment on service requests
+![alt Layers](/docs/comments.png)
 ## Recommended versions
 node v 14.x
 npm v 6.x

diff --git a/docs/comments.png b/docs/comments.png
diff --git a/docs/edit-service-request.png b/docs/edit-service-request.png
diff --git a/docs/notifications-dashboard.png b/docs/notifications-dashboard.png
diff --git a/i18n.ts b/i18n.ts
@@ -0,0 +1,4 @@
+import '@c8y/ngx-components/locales/en.po';
+
+// adding strings to translation
+import './locales/en.po';
diff --git a/index.ts b/index.ts
@@ -1,4 +1,5 @@
 import './polyfills';
+import './i18n';
 
 import { enableProdMode } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

diff --git a/locales/en.po b/locales/en.po
@@ -0,0 +1,96 @@
+msgid ""
+msgstr ""
+"Project-Id-Version: c8yui\n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: \n"
+"PO-Revision-Date: \n"
+"Last-Translator: \n"
+"Language: en\n"
+"Language-Team: \n"
+"Content-Type: text/plain; charset=utf-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"Plural-Forms: nplurals=2; plural=(n != 1);\n"
+
+msgid "service-request-details.card-title"
+msgstr "Notification"
+
+msgid "service-request-details.comment-button-submit"
+msgstr "Submit"
+
+msgid "service-request-details.comment-form-title"
+msgstr "Create a new comment"
+
+msgid "service-request-details.field-set-sap"
+msgstr "SAP Master data"
+
+msgid "service-request-details.field-set-snapshot"
+msgstr "Snapshot"
+
+msgid "service-request-details.form-description-label"
+msgstr "Description"
+
+msgid "service-request-details.form-files-label"
+msgstr "Files"
+
+msgid "service-request-details.form-priority-label"
+msgstr "Priority"
+
+msgid "service-request-details.form-status-label"
+msgstr "Status"
+
+msgid "service-request-details.form-title-label"
+msgstr "Title"
+
+msgid "service-request-details.not-available-in-mvp"
+msgstr "Not available in MVP."
+
+msgid "service-request-list-item.description"
+msgstr "Description"
+
+msgid "service-request-list-item.description--empty"
+msgstr "No description provided."
+
+msgid "service-request-list-item.device-name-title"
+msgstr "Name of the device"
+
+msgid "service-request-list-item.empty-comments"
+msgstr "No Comments to display."
+
+msgid "service-request-list-item.header-tooltip"
+msgstr "Priority: "
+
+msgid "service-request-list-item.last-update-title"
+msgstr "Date of the latest update of the notification."
+
+msgid "service-request-list-item.status-title"
+msgstr "Status"
+
+msgid "service-request-list-item.timeline"
+msgstr "Comments"
+
+msgid "service-request-list-widget.empty-service-requests"
+msgstr "No notifications to display."
+
+msgid "card-footer.button-submit"
+msgstr "Submit"
+
+msgid "card-footer.button-update"
+msgstr "Update"
+
+msgid "card-footer.button-reset"
+msgstr "Reset"
+
+msgid "card-footer.button-resolve"
+msgstr "Resolve"
+
+msgid "service-request.comment.feedback--created"
+msgstr "Comment created"
+
+msgid "service-request.request.feedback--empty"
+msgstr "Could not create comment"
+
+msgid "service-request.action--resolve"
+msgstr "Resolve"
+
+msgid "service-request.comment.feedback--not-resolved"
+msgstr "Could not create comment"
diff --git a/...uest-plugin/service-request/components/alarm-list-widget/alarm-list-widget.component.html b/...uest-plugin/service-request/components/alarm-list-widget/alarm-list-widget.component.html
@@ -34,8 +34,8 @@
             </p>
           </div>
      </c8y-li-body>
-      <c8y-li-action (click)="createServiceRequest(alarm)" icon="online-support">
-        Create service request
+      <c8y-li-action (click)="openServiceRequestModal(alarm)" icon="online-support">
+        {{ 'Create service request' | translate }}
       </c8y-li-action>
       <c8y-li-collapse>
        <!--  Source: <a [routerLink]="['/device', alarm.source.id]">{{  alarm.source.id }}</a> -->

diff --git a/...equest-plugin/service-request/components/alarm-list-widget/alarm-list-widget.component.ts b/...equest-plugin/service-request/components/alarm-list-widget/alarm-list-widget.component.ts
@@ -1,9 +1,7 @@
 import { Component, Input } from "@angular/core";
-import { AlarmService, AlarmStatus, IAlarm, IManagedObject, IResultList, InventoryService } from "@c8y/client";
+import { AlarmService, AlarmStatus, IAlarm, IManagedObject, IResultList } from "@c8y/client";
 import { set } from "lodash";
-import { take } from "rxjs/operators";
-import { BsModalService } from "ngx-bootstrap/modal";
-import { ServiceRequestModalComponent } from "../service-request-modal/service-request-modal.component";
+import { ServiceRequestModalService } from "../../service/service-request-modal.service";
 
 @Component({
     templateUrl: './alarm-list-widget.component.html'
@@ -17,7 +15,6 @@ export class AlarmListWidgetComponent {
     name: string,
   }}) {
     if (value && value.device) {
-     this.loadDevice(value.device);
       set(this.filter, 'source', value.device.id);
       this.loadAlarms();
     }
@@ -36,25 +33,13 @@ export class AlarmListWidgetComponent {
       pageSize: 50
     };
 
-    constructor(private alarmService: AlarmService, private bsModalService: BsModalService, private inventory: InventoryService) {
-
-    }
-
-    async loadDevice(device: {id: string}) {
-      this.device = (await this.inventory.detail(device)).data;
-    }
+    constructor(private alarmService: AlarmService, private serviceRequestModal: ServiceRequestModalService) {}
 
     async loadAlarms() {
       this.alarms = await this.alarmService.list(this.filter);
     }
 
     openServiceRequestModal(alarm: IAlarm): void {
-      const modalRef = this.bsModalService.show(ServiceRequestModalComponent, {
-        class: "modal-lg",
-      });
-      modalRef.content.requestDetails.alarm = alarm;
-      modalRef.content.requestDetails.device = this.device;
-      modalRef.content.requestDetails.init();
-      modalRef.content.closeSubject.pipe(take(1)).subscribe();
+      this.serviceRequestModal.openForAlarm(alarm);
     }
 }
diff --git a/...-request-plugin/service-request/components/alarm-list-widget/assets/preview.png b/...-request-plugin/service-request/components/alarm-list-widget/assets/preview.png
diff --git a/...rvice-request/components/service-request-dashboard/service-request-dashboard.component.ts b/...rvice-request/components/service-request-dashboard/service-request-dashboard.component.ts
@@ -3,9 +3,7 @@ import { ActivatedRoute } from '@angular/router';
 import { Widget } from '@c8y/ngx-components';
 import { Subscription } from 'rxjs';
 import { IManagedObject } from '@c8y/client';
-import { ServiceRequestModalComponent } from '../service-request-modal/service-request-modal.component';
-import { BsModalService } from "ngx-bootstrap/modal";
-import { take } from 'rxjs/operators';
+import { ServiceRequestModalService } from '../../service/service-request-modal.service';
 
 
 @Component({
@@ -18,7 +16,7 @@ export class ServiceRequestDashboardComponent implements OnInit, OnDestroy {
   device: IManagedObject;
   widgets: Widget[];
 
-  constructor(private activatedRoute: ActivatedRoute, private bsModalService: BsModalService) {
+  constructor(private activatedRoute: ActivatedRoute, private serviceRequestModal: ServiceRequestModalService) {
     this.device = this.activatedRoute.parent.snapshot.data.contextData as IManagedObject;
   }
 
@@ -64,12 +62,7 @@ export class ServiceRequestDashboardComponent implements OnInit, OnDestroy {
   }
 
   openServiceRequestModal(): void {
-    const modalRef = this.bsModalService.show(ServiceRequestModalComponent, {
-      class: "modal-lg",
-    });
-    modalRef.content.requestDetails.device = this.device;
-    modalRef.content.requestDetails.init();
-    modalRef.content.closeSubject.pipe(take(1)).subscribe();
+    this.serviceRequestModal.openForDevice(this.device);
   }
 
   ngOnDestroy(): void {

diff --git a/...list-widget/components/service-request-list-item/service-request-list-item.component.html b/...list-widget/components/service-request-list-item/service-request-list-item.component.html
@@ -19,9 +19,9 @@
 
     <!-- title -->
     <div class="list-item-body">
-      <a [routerLink]="['/device', serviceRequest.source.id, 'notifications', serviceRequest.id]">
+      <button class="btn btn-link" (click)="openServiceRequestModal(serviceRequest)">
         {{ serviceRequest.title }}
-      </a>
+      </button>
 
       <small class="d-block m-t-4">
         <!-- updated -->
@@ -108,7 +108,7 @@
               <div class="d-flex">
                 <div class="list-item-body">
                   <small class="d-block m-b-8">
-                    {{ c.owner }} - {{ c.creationTime | date : 'dd MMM YYYY HH:mm' }}
+                    <i c8yIcon="clock-o"></i> {{ c.creationTime | c8yDate }} - <b>{{ c.owner }}</b> {{ 'wrote' | translate }}:
                   </small>
                   <p [innerHtml]="c.text | nl2br"></p>
                 </div>

diff --git a/...t-list-widget/components/service-request-list-item/service-request-list-item.component.ts b/...t-list-widget/components/service-request-list-item/service-request-list-item.component.ts
@@ -5,6 +5,7 @@ import {
 } from '../../../../models/service-request.model';
 import { ServiceRequestService } from '../../../../service/service-request.service';
 import { SERVICE_REQUEST_CLOSED } from '../../models/service-request.model';
+import { ServiceRequestModalService } from '../../../../service/service-request-modal.service';
 
 const displayedCommentsLimit = 10;
 
@@ -22,7 +23,7 @@ export class ServiceRequestListItemComponent {
 
   @Input('serviceRequest') serviceRequest: ServiceRequestObject;
 
-  constructor(private serviceRequestService: ServiceRequestService) {}
+  constructor(private serviceRequestService: ServiceRequestService, private serviceRequestModal: ServiceRequestModalService ) {}
 
   async loadComments(): Promise<void> {
     this.loading = true;
@@ -36,6 +37,10 @@ export class ServiceRequestListItemComponent {
     this.loading = false;
   }
 
+  openServiceRequestModal(serviceRequest: ServiceRequestObject) {
+    this.serviceRequestModal.open(serviceRequest);
+  }
+
   toggle(collapsed = !this.collapsed): void {
     this.collapsed = collapsed;
 

diff --git a/...st-widget/components/service-request-list-widget/service-request-list-widget.component.ts b/...st-widget/components/service-request-list-widget/service-request-list-widget.component.ts
@@ -2,6 +2,8 @@ import { Component, OnDestroy, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { ServiceRequestObject } from '../../../../models/service-request.model';
 import { ServiceRequestService } from '../../../../service/service-request.service';
+import { ServiceRequestModalService } from '../../../../service/service-request-modal.service';
+import { Subscription } from 'rxjs';
 
 @Component({
   selector: 'ene-service-request-list-widget-component-widget',
@@ -13,29 +15,41 @@ export class SeriveRequestListWidgetComponent implements OnInit, OnDestroy {
   private pollingTimer: NodeJS.Timeout;
   serviceRequests: ServiceRequestObject[] = [];
   public loading = false;
+  private changeSub: Subscription;
 
   constructor(
     private activatedRoute: ActivatedRoute,
     private serviceRequestService: ServiceRequestService,
-  ) {}
+    serviceRequestModal: ServiceRequestModalService
+  ) {
+    this.changeSub = serviceRequestModal.change$.subscribe(() => {
+      void this.reload();
+    });
+  }
 
-  private async initSource(): Promise<void> {
+  private async reload(): Promise<void> {
     this.loading = true;
     // TODO: verify this works
-   const contextData = this.activatedRoute.snapshot.data.contextData || this.activatedRoute.snapshot.parent.data.contextData;
-    this.serviceRequests = await this.serviceRequestService.list({ sourceId: contextData.id });
-    this.loading = false;
+    const contextData = this.activatedRoute.snapshot.data.contextData || this.activatedRoute.snapshot.parent.data.contextData;
+    try {
+      this.serviceRequests = await this.serviceRequestService.list({ sourceId: contextData.id });
+    } finally {
+      this.loading = false;
+    }
   }
 
   ngOnInit(): void {
-    void this.initSource();
+    void this.reload();
 
     this.pollingTimer = setInterval(() => {
-      void this.initSource();
+      void this.reload();
     }, this.intervalTime);
   }
 
   ngOnDestroy(): void {
     delete this.pollingTimer;
+    if (this.changeSub) {
+      this.changeSub.unsubscribe();
+    }
   }
 }
diff --git a/...vice-request/components/service-request-list-widget/service-request-list-widget.module.ts b/...vice-request/components/service-request-list-widget/service-request-list-widget.module.ts
@@ -9,6 +9,7 @@ import { ServiceRequestIconComponent } from './components/service-request-icon/s
 import { ServiceRequestListItemComponent } from './components/service-request-list-item/service-request-list-item.component';
 import { ServiceRequestListWidgetConfigComponent } from './components/service-request-list-widget-config/service-request-list-widget-config.component';
 import { SeriveRequestListWidgetComponent } from './components/service-request-list-widget/service-request-list-widget.component';
+import { Nl2brPipe } from '../../pipes/nl2br.pipe';
 
 @NgModule({
   imports: [CommonModule, CoreModule, CollapseModule, RouterModule, TooltipModule],
@@ -17,6 +18,7 @@ import { SeriveRequestListWidgetComponent } from './components/service-request-l
     ServiceRequestListWidgetConfigComponent,
     ServiceRequestListItemComponent,
     ServiceRequestIconComponent,
+    Nl2brPipe
   ],
   entryComponents: [SeriveRequestListWidgetComponent, ServiceRequestListWidgetConfigComponent],
   providers: [

diff --git a/...ents/service-request-modal/service-request-details/service-request-details.component.html b/...ents/service-request-modal/service-request-details/service-request-details.component.html
@@ -56,7 +56,7 @@ <h4 class="card-title" translate>service-request-details.card-title</h4>
             <div class="form-group">
               <ene-device-select
                 [(device)]="device"
-                [disabled]="serviceRequestId"
+                [disabled]="isEdit"
               ></ene-device-select>
             </div>
 
@@ -154,7 +154,7 @@ <h4 class="card-title" translate>service-request-details.card-title</h4>
           <!-- form actions -->
           <div class="card-footer separator">
             <div class="row">
-              <ng-container *ngIf="!serviceRequestId; else updateFormActions">
+              <ng-container *ngIf="!isEdit; else updateFormActions">
                 <div class="col-md-12">
                   <button
                     type="submit"
@@ -226,8 +226,8 @@ <h4 class="card-title" translate>service-request-details.card-title</h4>
   </div>
 
   <!-- comments -->
-  <ng-container *ngIf="serviceRequestId">
-    <h4 class="m-t-16">Comments</h4>
+  <ng-container *ngIf="isEdit">
+    <h4 class="m-t-16">Comments {{ '('+ comments.length +')'}}</h4>
 
     <div class="row m-t-16 m-b-16">
       <div class="col-md-6">
@@ -273,7 +273,7 @@ <h4 class="m-t-16">Comments</h4>
     </div>
 
     <!-- comments display -->
-    <div class="row" *ngIf="serviceRequestId">
+    <div class="row" *ngIf="isEdit">
       <div class="col-md-6">
         <ng-container *ngIf="loadingComments">
           <ng-container *ngTemplateOutlet="loadingData"></ng-container>
@@ -284,7 +284,7 @@ <h4 class="m-t-16">Comments</h4>
             <div class="d-flex">
               <div class="list-item-body">
                 <small class="d-block m-b-8">
-                  {{ c.owner }} - {{ c.creationTime | date : 'dd MMM YYYY HH:mm' }}
+                  <i c8yIcon="clock-o"></i> {{ c.creationTime | c8yDate }} - <b>{{ c.owner }}</b> {{ 'wrote' | translate }}:
                 </small>
                 <p [innerHtml]="c.text | nl2br"></p>
               </div>