Fix - refactor idle to native js

frontend/zac-ui/apps/zac-ui/src/app/app.component.ts

@@ -5,8 +5,6 @@ import {SnackbarService} from '@gu/components';
 import { HealthService, UserService, ZaakService } from '@gu/services';
 import {menuItems, MenuItem} from './constants/menu';
 import { User } from '@gu/models';
-import { DEFAULT_INTERRUPTSOURCES, Idle } from '@ng-idle/core';
-
 
 /**
  * <gu-zac-ui-root></gu-zac-ui-root>
@@ -42,10 +40,13 @@ export class AppComponent implements OnInit {
   idleState = "NOT_STARTED";
 
   userIsActive = true;
+  timeoutId: number;
+
+  maxUserInactivityTime = 60 * 1000; // 60 seconds
+  isUserInactive = false;
 
   /**
    * Constructor method.
-   * @param {Idle} idle
    * @param {Router} router
    * @param {SnackbarService} snackbarService
    * @param {UserService} userService
@@ -54,33 +55,13 @@ export class AppComponent implements OnInit {
    * @param {ChangeDetectorRef} cd
    */
   constructor (
-    private idle: Idle,
     private router: Router,
     private snackbarService: SnackbarService,
     private userService: UserService,
     private zaakService: ZaakService,
     private healthService: HealthService,
     cd: ChangeDetectorRef
   ) {
-    idle.setIdle(60); // how long can they be inactive before considered idle, in seconds (60 sec)
-    idle.setInterrupts(DEFAULT_INTERRUPTSOURCES); // provide sources that will "interrupt" aka provide events indicating the user is active
-
-    // When the user becomes idle
-    idle.onIdleStart.subscribe(() => {
-      this.idleState = "IDLE";
-      console.log('inactive');
-      this.userIsActive = false;
-    });
-
-    // When the user is no longer idle
-    idle.onIdleEnd.subscribe(() => {
-      this.idleState = "NOT_IDLE";
-      cd.detectChanges();
-      console.log('active');
-      this.userIsActive = true;
-      this.getHealth();
-    });
-
   }
 
   //
@@ -93,7 +74,6 @@ export class AppComponent implements OnInit {
    */
   ngOnInit(): void {
     this.getHealth();
-    this.reset();
     this.router.events
       .pipe(filter((event) => event instanceof NavigationEnd))
       .subscribe((event: NavigationEnd) => {
@@ -124,14 +104,6 @@ export class AppComponent implements OnInit {
     }, 1000 * 60) // 60 seconds
   }
 
-  /**
-   * Call this method to start/reset the idle process
-   */
-  reset() {
-    this.idle.watch();
-    this.idleState = "NOT_IDLE";
-  }
-
   /**
    * Retrieves the current user.
    */
@@ -156,6 +128,34 @@ export class AppComponent implements OnInit {
   // Events
   //
 
+  /**
+   * Clear time out if user shows activity.
+   */
+  @HostListener('document:mousemove')
+  @HostListener('document:keypress')
+  @HostListener('document:keydown')
+  @HostListener('document:click')
+  @HostListener('document:wheel')
+  resetTimeout() {
+    console.log('activity');
+    clearTimeout(this.timeoutId);
+    if (!this.userIsActive) {
+      this.userIsActive = true;
+      this.getHealth();
+    }
+    this.checkTimeOut();
+  }
+
+  /**
+   * Set user as inactive when time has passed
+   */
+  checkTimeOut() {
+    this.timeoutId = setTimeout(() => {
+      this.userIsActive = false;
+      console.log('inactive');
+    }, this.maxUserInactivityTime);
+  }
+
   /**
    * Call API to log out user.
    */

frontend/zac-ui/libs/features/zaak-detail/src/lib/actions/status/status.component.html

@@ -1,6 +1,6 @@
 <div class="status card">
   <h3>Status</h3>
-  <div class="row mb-4" *ngIf="dashboardColumns && currentDashboardItem && currentDashboard">
+  <div class="row" *ngIf="dashboardColumns && currentDashboardItem && currentDashboard">
     <div class="col-md-6">
       <h4>Dashboard status:</h4>
     </div>

frontend/zac-ui/libs/features/zaak-detail/src/lib/overview/gerelateerde-zaken/gerelateerde-zaken.component.html

@@ -26,7 +26,7 @@ <h3 class="d-inline-block mr-1">Gerelateerde zaken
               (buttonOutput)="onTableButton($event)"
               class="mb-4">
     </gu-table>
-    <p *ngIf="(data.length === 0)">Er zijn geen gerelateerde zaken.</p>
+    <p class="p p--muted" *ngIf="(data.length === 0)">Er zijn geen gerelateerde zaken.</p>
   </ng-container>
 </div>
 <gu-modal id="gerelateerde-zaken-modal"

frontend/zac-ui/libs/features/zaak-detail/src/lib/overview/informatie/informatie.component.html

@@ -9,7 +9,7 @@
   </button>
 
   <!-- Disable edit possibility if case is closed and the user is not allowed to force edit -->
-  <div class='mb-4' *ngIf="zaak && properties && !isLoading && zaaktypeEigenschappen">
+  <div *ngIf="zaak && properties && !isLoading && zaaktypeEigenschappen">
     <gu-form [title]="'Zaak informatie'"
              [form]="form"
              [editable]="canForceEdit ? 'toggle' : false"

frontend/zac-ui/libs/features/zaak-detail/src/lib/overview/user-permissions/user-permissions.component.html

@@ -19,6 +19,7 @@ <h3>Rechten</h3>
 
   <ng-container *ngIf="!isLoading">
     <p *ngIf="errorDetailMessage">{{errorDetailMessage}}</p>
+    <p class="p p--muted" *ngIf="userPermissions?.length == 0">Er zijn geen extra rechten toegevoegd.</p>
   </ng-container>
 
   <mat-accordion *ngIf="!isLoading && userPermissions">
@@ -36,8 +37,8 @@ <h3>Rechten</h3>
       </ng-container>
   </mat-accordion>
 
-  <div class="d-flex justify-content-end mt-4" *ngIf="userPermissions">
-    <button gu-button *ngIf="userPermissions.length > 3"
+  <div class="d-flex justify-content-end mt-4" *ngIf="userPermissions?.length > 3">
+    <button gu-button
             buttonStyle="tertiary"
             size="extrasmall"
             [icon]="isExpanded ? 'unfold_less' : 'unfold_more'"