Skip to content
Permalink
Browse files
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>
  • Loading branch information
mdelez and kilchenmann committed Apr 7, 2022
1 parent d97113f commit 5efd9816c7623014ef5460b16e6016ef4c806208
Show file tree
Hide file tree
Showing 5 changed files with 57 additions and 10 deletions.
@@ -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>
@@ -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;
}
}

@@ -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>
@@ -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;
}

}

}
@@ -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 = [];

0 comments on commit 5efd981

Please sign in to comment.