feat(link-value): add progress indicator (DEV-605) (#708)

* feat(link-value): add progress indicator * feat(display-edit): add progress indicator when submitting an edited value * style(value): autocomplete loader css Co-authored-by: André Kilchenmann <github@milchkannen.ch>
dasch-swiss · Apr 7, 2022 · 5efd981 · 5efd981
1 parent d97113f
commit 5efd981
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 10 deletions.
diff --git a/src/app/workspace/resource/operations/display-edit/display-edit.component.html b/src/app/workspace/resource/operations/display-edit/display-edit.component.html
@@ -1,4 +1,4 @@
-<div [class.grid-container]="editModeActive">
+<div [class.grid-container]="editModeActive || submittingValue">
     <div class="value-component"
         (mouseenter)="mouseEnter()"
         (mouseleave)="mouseLeave()"
@@ -76,5 +76,6 @@
             (click)="cancelEditValue()">
             <mat-icon>undo</mat-icon>
         </button>
+        <app-progress-indicator *ngIf="submittingValue" [status]="0"></app-progress-indicator>
     </div>
 </div>
diff --git a/src/app/workspace/resource/operations/display-edit/display-edit.component.ts b/src/app/workspace/resource/operations/display-edit/display-edit.component.ts
@@ -93,6 +93,8 @@ export class DisplayEditComponent implements OnInit {
 
     editModeActive = false;
 
+    submittingValue = false;
+
     shouldShowCommentToggle: boolean;
 
     // type of given displayValue
@@ -236,8 +238,13 @@ export class DisplayEditComponent implements OnInit {
      * save a new version of an existing property value.
      */
     saveEditValue() {
+        // hide the CRUD buttons
         this.editModeActive = false;
         this.showActionBubble = false;
+
+        // show the progress indicator
+        this.submittingValue = true;
+
         const updatedVal = this.displayValueComponent.getUpdatedValue();
 
         if (updatedVal instanceof UpdateValue) {
@@ -263,10 +270,17 @@ export class DisplayEditComponent implements OnInit {
 
                     // check if comment toggle button should be shown
                     this.checkCommentToggleVisibility();
+
+                    // hide the progress indicator
+                    this.submittingValue = false;
                 },
                 (error: ApiResponseError) => {
                     // error handling
                     this.editModeActive = true;
+
+                    // hide the progress indicator
+                    this.submittingValue = false;
+
                     switch (error.status) {
                         case 400:
                             this.displayValueComponent.valueFormControl.setErrors({ duplicateValue: true });
@@ -281,6 +295,9 @@ export class DisplayEditComponent implements OnInit {
 
         } else {
             console.error('invalid value');
+
+            // hide the progress indicator
+            this.submittingValue = false;
         }
     }
 

diff --git a/src/app/workspace/resource/values/link-value/link-value.component.html b/src/app/workspace/resource/values/link-value/link-value.component.html
@@ -7,15 +7,20 @@
 <ng-template #showForm>
   <span [formGroup]="form">
     <mat-form-field class="child-value-component" floatLabel="never">
-          <input matInput [formControlName]="'value'" class="value" type="text" placeholder="{{resourceClassLabel}}" aria-label="resource" [matAutocomplete]="auto">
-          <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayResource">
-            <mat-option *ngFor="let rc of resourceClasses" (click)="openDialog('createLinkResource', $event, propIri, rc)">
-                Create New: {{rc?.label}}
-            </mat-option>
-            <mat-option *ngFor="let res of resources" [value]="res">
-                {{res?.label}}
-            </mat-option>
-          </mat-autocomplete>
+        <div class="search-input">
+            <input matInput [formControlName]="'value'" class="value" type="text" placeholder="{{resourceClassLabel}}" aria-label="resource" [matAutocomplete]="auto">
+            <span matSuffix class="progress-indicator">
+                <app-progress-indicator *ngIf="loadingResults" [status]="0" ></app-progress-indicator>
+            </span>
+        </div>
+        <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayResource">
+        <mat-option *ngFor="let rc of resourceClasses" (click)="openDialog('createLinkResource', $event, propIri, rc)">
+            Create New: {{rc?.label}}
+        </mat-option>
+        <mat-option *ngFor="let res of resources" [value]="res">
+            {{res?.label}}
+        </mat-option>
+        </mat-autocomplete>
         <mat-error *ngIf="valueFormControl.hasError('valueNotChanged')">
                  <span class="custom-error-message">New value must be different than the current value.</span>
             </mat-error>

diff --git a/src/app/workspace/resource/values/link-value/link-value.component.scss b/src/app/workspace/resource/values/link-value/link-value.component.scss
@@ -0,0 +1,20 @@
+.search-input {
+
+  .value {
+    width: calc(100% - 32px);
+  }
+
+  .progress-indicator {
+    display: block;
+    position: absolute;
+    right: 0;
+    bottom: 0;
+
+    app-progress-indicator {
+      transform: scale(0.75);
+      display: block;
+    }
+
+  }
+
+}
diff --git a/src/app/workspace/resource/values/link-value/link-value.component.ts b/src/app/workspace/resource/values/link-value/link-value.component.ts
@@ -67,6 +67,8 @@ export class LinkValueComponent extends BaseValueDirective implements OnInit, On
     resourceClasses: ResourceClassDefinition[];
     properties: ResourcePropertyDefinition[];
 
+    loadingResults = false;
+
     constructor(
         private _dialog: MatDialog,
         @Inject(FormBuilder) private _fb: FormBuilder,
@@ -95,10 +97,12 @@ export class LinkValueComponent extends BaseValueDirective implements OnInit, On
     searchByLabel(searchTerm: string) {
         // at least 3 characters are required
         if (typeof searchTerm === 'string' && searchTerm.length >= 3) {
+            this.loadingResults = true;
             this._dspApiConnection.v2.search.doSearchByLabel(
                 searchTerm, 0, { limitToResourceClass: this.restrictToResourceClass }).subscribe(
                 (response: ReadResourceSequence) => {
                     this.resources = response.resources;
+                    this.loadingResults = false;
                 });
         } else {
             this.resources = [];