Minor UX improvements (#99)

* Minor feedback changes * Sort permissions * Don't show welcome dialog more than once * Fix kombit login spinner * Remove console.log in sort-by-translation.pipe
OS2iot · Jun 2, 2022 · 8ccca2f · 8ccca2f
1 parent caf8f94
commit 8ccca2f
Show file tree

Hide file tree

Showing 17 changed files with 237 additions and 123 deletions.
diff --git a/src/app/admin/permission/permission-edit/permission-edit.component.html b/src/app/admin/permission/permission-edit/permission-edit.component.html
@@ -29,7 +29,7 @@
             [placeholder]="'PERMISSION.EDIT.TYPE-PLACEHOLDER' | translate"
             [compareWith]="compareLevels"
             [multiple]="true">
-            <mat-option *ngFor="let level of allowedLevels" [value]="level">
+            <mat-option *ngFor="let level of allowedLevels | sortByTranslation: 'type':'asc':'PERMISSION-TYPE.'" [value]="level">
               {{'PERMISSION-TYPE.' + level.type | translate}}
             </mat-option>
         </mat-select>

diff --git a/src/app/admin/users/user-page/user-page.component.html b/src/app/admin/users/user-page/user-page.component.html
@@ -32,16 +32,10 @@ <h6 class="mt-5">
               </li>
             </ul>
           </div>
-          <div class="form-group mt-3">
-            <mat-form-field appearance="outline">
-              <mat-label
-                *ngIf="checkForRemainingOrganizations; else noMultiOrgs"
-                >{{ 'NAV.ORGANISATIONS' | translate }}</mat-label
-              >
-              <ng-template #noMultiOrgs>
-                <mat-label>{{ 'USER_PAGE.NO_ORGS' | translate }}</mat-label>
-              </ng-template>
+          <div class="form-group mt-3 mb-5">
               <mat-select
+                class="form-control"
+                [placeholder]="(!checkForRemainingOrganizations ? 'USER_PAGE.NO_ORGS' : 'NAV.ORGANISATIONS') | translate"
                 multiple
                 name="organizations"
                 [compareWith]="compare"
@@ -54,15 +48,14 @@ <h6 class="mt-5">
                 ></mat-select-search>
 
                 <mat-option
-                  *ngFor="let org of filteredOrganisations | async"
+                  *ngFor="let org of filteredOrganisations | async | sortBy:'name'"
                   [value]="org"
                   >{{ org.name }}</mat-option
                 >
               </mat-select>
-            </mat-form-field>
           </div>
           <div class="form-group mt-3">
-            <button class="btn btn-primary ml-2" type="submit">
+            <button class="btn btn-primary" type="submit">
               {{ 'USERS.SAVE' | translate }}
             </button>
           </div>

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -29,6 +29,7 @@ import { NGMaterialModule } from '@shared/Modules/materiale.module';
 import { MatSelectSearchModule } from '@shared/components/mat-select-search/mat-select-search.module';
 import { UserPageComponent } from './admin/users/user-page/user-page.component';
 import { SharedModule } from '@shared/shared.module';
+import { PipesModule } from '@shared/pipes/pipes.module';
 
 export function HttpLoaderFactory(http: HttpClient) {
     return new TranslateHttpLoader(http, './assets/i18n/', '.json');
@@ -81,6 +82,7 @@ export function tokenGetter() {
         }),
         MonacoEditorModule.forRoot(),
         WelcomeDialogModule,
+        PipesModule,
     ],
     bootstrap: [AppComponent],
     exports: [TranslateModule],

diff --git a/src/app/applications/applications-list/applications-list.component.ts b/src/app/applications/applications-list/applications-list.component.ts
@@ -14,6 +14,8 @@ import { OrganizationAccessScope } from '@shared/enums/access-scopes';
 import { MeService } from '@shared/services/me.service';
 import { WelcomeDialogModel } from '@shared/models/dialog.model';
 
+const welcomeDialogId = 'welcome-dialog';
+
 @Component({
   providers: [NavbarComponent],
   selector: 'app-applications-list',
@@ -121,16 +123,19 @@ export class ApplicationsListComponent implements OnInit {
       this.isGlobalAdmin = this.meService.hasGlobalAdmin();
       const hasSeenWelcomeScreen = this.userMinimalService.getHasSeenWelcomeScreen();
       this.hasSomePermission = this.sharedVariableService.getHasAnyPermission();
+      const isOpen = !!this.dialog?.getDialogById(welcomeDialogId);
 
       if (
         !this.hasSomePermission ||
         (!this.isGlobalAdmin &&
           !hasSeenWelcomeScreen &&
-          userInfo?.user?.showWelcomeScreen)
+          userInfo?.user?.showWelcomeScreen &&
+          !isOpen)
       ) {
         this.userMinimalService.setHasSeenWelcomeScreen();
 
         this.dialog.open(WelcomeDialogComponent, {
+          id: welcomeDialogId,
           disableClose: true,
           closeOnNavigation: true,
           panelClass: 'welcome-screen',

diff --git a/src/app/applications/iot-devices/iot-device-detail/iot-device-detail.component.ts b/src/app/applications/iot-devices/iot-device-detail/iot-device-detail.component.ts
@@ -324,7 +324,10 @@ export class IoTDeviceDetailComponent implements OnInit, OnDestroy {
               this.iotDeviceService
                 .resetHttpDeviceApiKey(this.device.id)
                 .subscribe((response) => {
-                  this.device.apiKey = response.apiKey;
+                  this.device = {
+                    ...this.device,
+                    apiKey: response.apiKey
+                  };
                 });
             }
           });

diff --git a/src/app/gateway/gateway-detail/gateway-detail.component.html b/src/app/gateway/gateway-detail/gateway-detail.component.html
@@ -1,99 +1,104 @@
 <div *ngIf="gateway">
-    <app-top-bar [data]="gateway" [backButton]="backButton" [subPage]="true" [addDetailDowndown]="true"
-        [dropDownButton]="dropdownButton" (deleteSelectedInDropdown)="onDeleteGateway()" [canEdit]="canEdit"></app-top-bar>
-    <div class="container-fluid">
-        <div class="row">
-            <div class="col-md-6 d-flex align-items-stretch">
-                <div class="jumbotron jumbotron--m-right jumbotron--full-width">
-                    <h3>{{ 'GATEWAY.DETAILS' | translate }}</h3>
-                    <p><strong>{{ 'GATEWAY.ID' | translate }}</strong>{{gateway.id}}</p>
-                    <p><strong>{{ 'GATEWAY.ORGANIZATION' | translate }}</strong>{{gateway.internalOrganizationName}}</p>
-                    <app-general-details [data]="gateway"></app-general-details>
-                    <p><strong>{{ 'GATEWAY.TAGS' | translate }}</strong>{{gateway.tagsString}}</p>
-                    <p *ngIf="gateway.description">
-                        <strong>{{ 'GATEWAY.DESCRIPTION' | translate }}</strong></p>
-                    <pre><p>{{gateway.description}}</p></pre>
-                </div>
-            </div>
-            <div class="col-md-6 d-flex align-items-stretch">
-                <div class="jumbotron jumbotron--m-left jumbotron--full-width">
-                    <div *ngIf="gateway.location; else locationElseBlock">
-                        <h3>{{ 'GATEWAY.LOCATION' | translate }}</h3>
-                        <app-map [coordinates]="getCoordinates()"></app-map>
-                        <div class="row">
-                            <div class="col-4">
-                                <p><strong>{{ 'GATEWAY.LONGITUDE' | translate }}</strong>
-                                    {{gateway.location?.longitude | number:'2.1-6'}}</p>
-                            </div>
-                            <div class="col-4">
-                                <p><strong>{{ 'GATEWAY.LATITUDE' | translate }}</strong>
-                                    {{gateway.location.latitude | number:'2.1-6'}}</p>
-                            </div>
-                            <div class="col-4">
-                                <p><strong>{{ 'GATEWAY.ALTITUDE' | translate }}</strong>
-                                    {{gateway.location.altitude | number:'2.1-6'}}</p>
-                            </div>
-                        </div>
-                    </div>
-                    <ng-template #locationElseBlock>
-                        <p class="mb-5">{{ 'GATEWAY.NOLOCATION' | translate}}</p>
-                    </ng-template>
-                </div>
+  <app-top-bar [data]="gateway" [backButton]="backButton" [subPage]="true" [addDetailDowndown]="true"
+    [dropDownButton]="dropdownButton" (deleteSelectedInDropdown)="onDeleteGateway()" [canEdit]="canEdit"></app-top-bar>
+  <div class="container-fluid">
+    <div class="row">
+      <div class="col-md-6 d-flex align-items-stretch">
+        <div class="jumbotron jumbotron--m-right jumbotron--full-width">
+          <h3>{{ 'GATEWAY.DETAILS' | translate }}</h3>
+          <p><strong>{{ 'GATEWAY.ID' | translate }}</strong>{{gateway.id}}</p>
+          <p><strong>{{ 'GATEWAY.ORGANIZATION' | translate }}</strong>{{gateway.internalOrganizationName}}</p>
+          <app-general-details [data]="gateway"></app-general-details>
+          <p><strong>{{ 'GATEWAY.TAGS' | translate }}</strong>{{gateway.tagsString}}</p>
+          <p *ngIf="gateway.description">
+            <strong>{{ 'GATEWAY.DESCRIPTION' | translate }}</strong>
+          </p>
+          <pre><p>{{gateway.description}}</p></pre>
+        </div>
+      </div>
+      <div class="col-md-6 d-flex align-items-stretch">
+        <div class="jumbotron jumbotron--m-left jumbotron--full-width">
+          <div *ngIf="gateway.location; else locationElseBlock">
+            <h3>{{ 'GATEWAY.LOCATION' | translate }}</h3>
+            <app-map [coordinates]="getCoordinates()"></app-map>
+            <div class="row">
+              <div class="col-4">
+                <p><strong>{{ 'GATEWAY.LONGITUDE' | translate }}</strong>
+                  {{gateway.location?.longitude | number:'2.1-6'}}</p>
+              </div>
+              <div class="col-4">
+                <p><strong>{{ 'GATEWAY.LATITUDE' | translate }}</strong>
+                  {{gateway.location.latitude | number:'2.1-6'}}</p>
+              </div>
+              <div class="col-4">
+                <p><strong>{{ 'GATEWAY.ALTITUDE' | translate }}</strong>
+                  {{gateway.location.altitude | number:'2.1-6'}}</p>
+              </div>
             </div>
+          </div>
+          <ng-template #locationElseBlock>
+            <p class="mb-5">{{ 'GATEWAY.NOLOCATION' | translate}}</p>
+          </ng-template>
         </div>
+      </div>
     </div>
+  </div>
 </div>
-<div class="row">
+<div class="container-fluid">
+  <div class="row">
     <div class="col-12">
-        <div class="jumbotron">
-          <app-gateway-status [isVisibleSubject]="isGatewayStatusVisibleSubject" [gatewayId]="id" paginatorClass="d-none"
-              [shouldLinkToDetails]="false" [title]="'GATEWAY.ONLINE-STATUS' | translate">
-            </app-gateway-status>
-        </div>
+      <div class="jumbotron">
+        <app-gateway-status [isVisibleSubject]="isGatewayStatusVisibleSubject" [gatewayId]="id" paginatorClass="d-none"
+          [shouldLinkToDetails]="false" [title]="'GATEWAY.ONLINE-STATUS' | translate">
+        </app-gateway-status>
+      </div>
 
-        <div class="jumbotron">
-            <h3>{{ 'GATEWAY.DATA-PACKETS' | translate }}</h3>
-            <div class="loading-shade" *ngIf="isLoadingResults">
-                <mat-spinner *ngIf="isLoadingResults"></mat-spinner>
-            </div>
+      <div class="jumbotron">
+        <h3>{{ 'GATEWAY.DATA-PACKETS' | translate }}</h3>
+        <div class="loading-shade" *ngIf="isLoadingResults">
+          <mat-spinner *ngIf="isLoadingResults"></mat-spinner>
+        </div>
 
-            <div class="row mb-4">
-              <div class="col-md-6 d-flex align-items-stretch mt-1 mb-4">
-                <app-graph [data]="receivedGraphData" [type]="'line'" [title]="'GATEWAY.STATS-RXPACKETSRECEIVED' | translate"
-                  [graphCardClass]="'shadow-none pl-0'" [graphHeaderClass]="'mat-card-header-text-ml-0'">
-                </app-graph>
-              </div>
-              <div class="col-md-6 d-flex align-items-stretch mt-1 mb-4">
-                <app-graph [data]="sentGraphData" [type]="'line'" [title]="'GATEWAY.STATS-TXPACKETSEMITTED' | translate"
-                  [graphCardClass]="'shadow-none pl-0'" [graphHeaderClass]="'mat-card-header-text-ml-0'">
-                </app-graph>
-              </div>
-            </div>
+        <div class="row mb-4">
+          <div class="col-md-6 d-flex align-items-stretch mt-1 mb-4">
+            <app-graph [data]="receivedGraphData" [type]="'line'"
+              [title]="'GATEWAY.STATS-RXPACKETSRECEIVED' | translate" [graphCardClass]="'shadow-none pl-0'"
+              [graphHeaderClass]="'mat-card-header-text-ml-0'">
+            </app-graph>
+          </div>
+          <div class="col-md-6 d-flex align-items-stretch mt-1 mb-4">
+            <app-graph [data]="sentGraphData" [type]="'line'" [title]="'GATEWAY.STATS-TXPACKETSEMITTED' | translate"
+              [graphCardClass]="'shadow-none pl-0'" [graphHeaderClass]="'mat-card-header-text-ml-0'">
+            </app-graph>
+          </div>
+        </div>
 
-            <table mat-table [dataSource]="dataSource">
-                <ng-container matColumnDef="rxPacketsReceived">
-                    <th mat-header-cell *matHeaderCellDef>
-                        {{ 'GATEWAY.STATS-RXPACKETSRECEIVED' | translate }}
-                    </th>
-                    <td mat-cell *matCellDef="let element">{{element.rxPacketsReceived}}</td>
-                </ng-container>
+        <table mat-table [dataSource]="dataSource">
+          <ng-container matColumnDef="rxPacketsReceived">
+            <th mat-header-cell *matHeaderCellDef>
+              {{ 'GATEWAY.STATS-RXPACKETSRECEIVED' | translate }}
+            </th>
+            <td mat-cell *matCellDef="let element">{{element.rxPacketsReceived}}</td>
+          </ng-container>
 
-                <ng-container matColumnDef="txPacketsEmitted">
-                    <th mat-header-cell *matHeaderCellDef>{{ 'GATEWAY.STATS-TXPACKETSEMITTED' | translate }}
-                    </th>
-                    <td mat-cell *matCellDef="let element">{{element.txPacketsEmitted}}</td>
-                </ng-container>
+          <ng-container matColumnDef="txPacketsEmitted">
+            <th mat-header-cell *matHeaderCellDef>{{ 'GATEWAY.STATS-TXPACKETSEMITTED' | translate }}
+            </th>
+            <td mat-cell *matCellDef="let element">{{element.txPacketsEmitted}}</td>
+          </ng-container>
 
-                <ng-container matColumnDef="txPacketsReceived">
-                    <th mat-header-cell *matHeaderCellDef>{{ 'GATEWAY.STATS-TIMESTAMP' | translate }}</th>
-                    <td mat-cell *matCellDef="let element">{{element.timestamp | date}}</td>
-                </ng-container>
+          <ng-container matColumnDef="txPacketsReceived">
+            <th mat-header-cell *matHeaderCellDef>{{ 'GATEWAY.STATS-TIMESTAMP' | translate }}</th>
+            <td mat-cell *matCellDef="let element">{{element.timestamp | date}}</td>
+          </ng-container>
 
-                <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-                <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-            </table>
-            <mat-paginator [length]="resultLength" [pageSizeOptions]="pageSizeOptions" [pageSize]="pageSize" showFirstLastButtons>
-            </mat-paginator>
-        </div>
+          <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+          <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+        </table>
+        <mat-paginator [length]="resultLength" [pageSizeOptions]="pageSizeOptions" [pageSize]="pageSize"
+          showFirstLastButtons>
+        </mat-paginator>
+      </div>
     </div>
+  </div>
 </div>
diff --git a/src/app/gateway/gateway-detail/gateway-detail.component.ts b/src/app/gateway/gateway-detail/gateway-detail.component.ts
@@ -120,7 +120,11 @@ export class GatewayDetailComponent implements OnInit, OnDestroy, AfterViewInit
     }
 
     private buildGraphs() {
-      const { receivedDatasets, sentDatasets, labels } = this.gatewayStats.reduce(
+      const {
+        receivedDatasets,
+        sentDatasets,
+        labels,
+      } = this.gatewayStats.slice().reverse().reduce(
         (
           res: {
             receivedDatasets: ChartConfiguration['data']['datasets'];
@@ -139,10 +143,18 @@ export class GatewayDetailComponent implements OnInit, OnDestroy, AfterViewInit
         },
         {
           receivedDatasets: [
-            { data: [], borderColor: ColorGraphBlue1,  backgroundColor: ColorGraphBlue1 },
+            {
+              data: [],
+              borderColor: ColorGraphBlue1,
+              backgroundColor: ColorGraphBlue1,
+            },
           ],
           sentDatasets: [
-            { data: [], borderColor: ColorGraphBlue1,  backgroundColor: ColorGraphBlue1 },
+            {
+              data: [],
+              borderColor: ColorGraphBlue1,
+              backgroundColor: ColorGraphBlue1,
+            },
           ],
           labels: [],
         }

diff --git a/src/app/navbar/navbar.component.ts b/src/app/navbar/navbar.component.ts
@@ -71,7 +71,7 @@ export class NavbarComponent implements OnInit {
 
   hasEmail(): string {
     this.userInfo = this.sharedVariableService.getUserInfo();
-    return this.userInfo.user.email;
+    return this.userInfo?.user?.email;
   }
 
   public goToHelp() {

diff --git a/src/app/shared/components/top-bar/top-bar.component.ts b/src/app/shared/components/top-bar/top-bar.component.ts
@@ -147,11 +147,11 @@ export class TopBarComponent implements OnInit {
       }
 
       hasEmail(): boolean {
-          if (this.sharedVariableService.getUserInfo().user.email)
-          {
-              return true
-          }
-          else return false;
+        if (this.sharedVariableService.getUserInfo()?.user?.email) {
+          return true;
+        } else {
+          return false;
+        }
       }
 
       hasAnyPermission(): boolean {