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 index d0d0afc059..7992d1ec0a 100644 --- 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 @@ -
+
undo +
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 index 68baffae61..cb9caae7b0 100644 --- 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 index fe51ba3dd6..46c1b6e8fb 100644 --- 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 @@ - - - - Create New: {{rc?.label}} - - - {{res?.label}} - - +
+ + + + +
+ + + Create New: {{rc?.label}} + + + {{res?.label}} + + New value must be different than the current value. 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 index e69de29bb2..95f6954fe1 100644 --- 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 index 5a4652563b..026f5b7c2d 100644 --- 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 = [];