Initial implementation of controlled vocabularies value selectors dur…

…ing item editing
DSpace · Dec 12, 2023 · 7fbdfee · 7fbdfee
1 parent 04d0850
commit 7fbdfee
Show file tree

Hide file tree

Showing 6 changed files with 341 additions and 10 deletions.
diff --git a/...dit-metadata/dso-edit-metadata-field-values/dso-edit-metadata-field-values.component.html b/...dit-metadata/dso-edit-metadata-field-values/dso-edit-metadata-field-values.component.html
@@ -3,6 +3,7 @@
   <ds-dso-edit-metadata-value *ngFor="let mdValue of form.fields[mdField]; let idx = index" role="presentation"
                               [dso]="dso"
                               [mdValue]="mdValue"
+                              [mdField]="mdField"
                               [dsoType]="dsoType"
                               [saving$]="saving$"
                               [isOnlyValue]="form.fields[mdField].length === 1"

diff --git a/...o-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.html b/...o-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.html
@@ -1,11 +1,52 @@
 <div class="d-flex flex-row ds-value-row" *ngVar="mdValue.newValue.isVirtual as isVirtual" role="row"
      cdkDrag (cdkDragStarted)="dragging.emit(true)" (cdkDragEnded)="dragging.emit(false)"
      [ngClass]="{ 'ds-warning': mdValue.reordered || mdValue.change === DsoEditMetadataChangeTypeEnum.UPDATE, 'ds-danger': mdValue.change === DsoEditMetadataChangeTypeEnum.REMOVE, 'ds-success': mdValue.change === DsoEditMetadataChangeTypeEnum.ADD, 'h-100': isOnlyValue }">
-  <div class="flex-grow-1 ds-flex-cell ds-value-cell d-flex align-items-center" *ngVar="(mdRepresentation$ | async) as mdRepresentation" role="cell">
+  <div class="flex-grow-1 ds-flex-cell ds-value-cell d-flex flex-column" *ngVar="(mdRepresentation$ | async) as mdRepresentation" role="cell">
     <div class="dont-break-out preserve-line-breaks" *ngIf="!mdValue.editing && !mdRepresentation">{{ mdValue.newValue.value }}</div>
-    <textarea class="form-control" rows="5" *ngIf="mdValue.editing && !mdRepresentation" [(ngModel)]="mdValue.newValue.value"
+    <textarea class="form-control" rows="5" *ngIf="mdValue.editing && !mdRepresentation && !(isAuthorityControlled() | async)" [(ngModel)]="mdValue.newValue.value"
               [attr.aria-label]="(dsoType + '.edit.metadata.edit.value') | translate"
               [dsDebounce]="300" (onDebounce)="confirm.emit(false)"></textarea>
+
+    <ds-dynamic-scrollable-dropdown *ngIf="mdValue.editing && (isScrollableVocabulary() | async)"
+                                    [bindId]="mdField"
+                                    [group]="group"
+                                    [model]="getModel() | async"
+                                    (change)="onChangeAuthorityField($event)">
+    </ds-dynamic-scrollable-dropdown>
+
+    <ds-dynamic-onebox *ngIf="mdValue.editing && ((isHierarchicalVocabulary() | async) || (isSuggesterVocabulary() | async))"
+                      [group]="group"
+                      [model]="getModel() | async"
+                      (change)="onChangeAuthorityField($event)">
+    </ds-dynamic-onebox>
+
+  <div *ngIf="!isVirtual && !mdValue.editing && mdValue.newValue.authority && mdValue.newValue.confidence !== ConfidenceTypeEnum.CF_NOVALUE && mdValue.newValue.confidence !== ConfidenceTypeEnum.CF_UNSET">
+    <span class="badge badge-secondary">
+      {{ dsoType + '.edit.metadata.authority.label' | translate }} {{ mdValue.newValue.authority }}
+    </span>
+    <ds-confidence-icon class="confidence-icon" [mdValue]="mdValue.newValue" ></ds-confidence-icon>
+  </div>
+
+    <div class="mt-2" *ngIf=" mdValue.editing && (isAuthorityControlled() | async) && (isSuggesterVocabulary() | async)">
+      <div class="btn-group w-75">
+        <input class="form-control form-outline" [(ngModel)]="mdValue.newValue.authority" [disabled]="!editingAuthority"
+              (change)="onChangeAuthorityKey()" />
+        <button class="btn btn-outline-secondary btn-sm ng-star-inserted" id="metadata-confirm-btn" *ngIf="!editingAuthority"
+                [title]="dsoType + '.edit.metadata.edit.buttons.open-authority-edition' | translate"
+                ngbTooltip="{{ dsoType + '.edit.metadata.edit.buttons.open-authority-edition' | translate }}"
+                (click)="onChangeEditingAuthorityStatus(true)">
+          <i class="fas fa-lock fa-fw"></i>
+        </button>
+        <button class="btn btn-outline-success btn-sm ng-star-inserted" id="metadata-confirm-btn" *ngIf="editingAuthority"
+                [title]="dsoType + '.edit.metadata.edit.buttons.close-authority-edition' | translate"
+                ngbTooltip="{{ dsoType + '.edit.metadata.edit.buttons.close-authority-edition' | translate }}"
+                (click)="onChangeEditingAuthorityStatus(false)">
+          <i class="fas fa-lock-open fa-fw"></i>
+        </button>
+      </div>
+      <ds-confidence-icon [mdValue]="mdValue.newValue" ></ds-confidence-icon>
+    </div>
+
     <div class="d-flex" *ngIf="mdRepresentation">
       <a class="mr-2" target="_blank" [routerLink]="mdRepresentationItemRoute$ | async">{{ mdRepresentationName$ | async }}</a>
       <ds-themed-type-badge [object]="mdRepresentation"></ds-themed-type-badge>
@@ -45,14 +86,14 @@
                   [disabled]="isVirtual || (!mdValue.change && mdValue.reordered) || (!mdValue.change && !mdValue.editing) || (saving$ | async)" (click)="undo.emit()">
             <i class="fas fa-undo-alt fa-fw"></i>
           </button>
+          <button class="btn btn-outline-secondary ds-drag-handle btn-sm" id="metadata-drag-btn" *ngVar="(isOnlyValue || (saving$ | async)) as disabled"
+                  cdkDragHandle [cdkDragHandleDisabled]="disabled" [ngClass]="{'disabled': disabled}" [disabled]="disabled"
+                  [title]="dsoType + '.edit.metadata.edit.buttons.drag' | translate"
+                  ngbTooltip="{{ dsoType + '.edit.metadata.edit.buttons.drag' | translate }}">
+            <i class="fas fa-grip-vertical fa-fw"></i>
+          </button>
         </div>
       </div>
-      <button class="btn btn-outline-secondary ds-drag-handle btn-sm" id="metadata-drag-btn" *ngVar="(isOnlyValue || (saving$ | async)) as disabled"
-              cdkDragHandle [cdkDragHandleDisabled]="disabled" [ngClass]="{'disabled': disabled}" [disabled]="disabled"
-              [title]="dsoType + '.edit.metadata.edit.buttons.drag' | translate"
-              ngbTooltip="{{ dsoType + '.edit.metadata.edit.buttons.drag' | translate }}">
-        <i class="fas fa-grip-vertical fa-fw"></i>
-      </button>
     </div>
   </div>
 </div>
diff --git a/...hared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.spec.ts b/...hared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.spec.ts
@@ -11,6 +11,12 @@ import { ItemMetadataRepresentation } from '../../../core/shared/metadata-repres
 import { MetadataValue, VIRTUAL_METADATA_PREFIX } from '../../../core/shared/metadata.models';
 import { DsoEditMetadataChangeType, DsoEditMetadataValue } from '../dso-edit-metadata-form';
 import { By } from '@angular/platform-browser';
+import { VocabularyDataService } from '../../../core/submission/vocabularies/vocabulary.data.service';
+import { ItemDataService } from '../../../core/data/item-data.service';
+import { Item } from '../../../core/shared/item.model';
+import { createSuccessfulRemoteDataObject$ } from '../../../shared/remote-data.utils';
+import { Collection } from '../../../core/shared/collection.model';
+import { DSpaceObject } from '../../../core/shared/dspace-object.model';
 
 const EDIT_BTN = 'edit';
 const CONFIRM_BTN = 'confirm';
@@ -24,9 +30,25 @@ describe('DsoEditMetadataValueComponent', () => {
 
   let relationshipService: RelationshipDataService;
   let dsoNameService: DSONameService;
+  let vocabularyDataService: VocabularyDataService;
+  let itemService: ItemDataService;
 
   let editMetadataValue: DsoEditMetadataValue;
   let metadataValue: MetadataValue;
+  let dso: DSpaceObject;
+
+  const collection =  Object.assign(new Collection(), {
+    uuid: 'fake-uuid'
+  });
+
+  const item = Object.assign(new Item(), {
+    _links: {
+      self: { href: 'fake-item-url/item' }
+    },
+    id: 'item',
+    uuid: 'item',
+    owningcollection: createSuccessfulRemoteDataObject$(collection)
+  });
 
   function initServices(): void {
     relationshipService = jasmine.createSpyObj('relationshipService', {
@@ -35,6 +57,13 @@ describe('DsoEditMetadataValueComponent', () => {
     dsoNameService = jasmine.createSpyObj('dsoNameService', {
       getName: 'Related Name',
     });
+    vocabularyDataService = jasmine.createSpyObj('vocabularyDataService', {
+      getVocabularyByMetadataAndCollection: of(undefined),
+    });
+    itemService = jasmine.createSpyObj('itemService', {
+      // should be: createSuccessfulRemoteDataObject$(item)
+      findByHref: of(item)
+    });
   }
 
   beforeEach(waitForAsync(() => {
@@ -45,6 +74,11 @@ describe('DsoEditMetadataValueComponent', () => {
       authority: undefined,
     });
     editMetadataValue = new DsoEditMetadataValue(metadataValue);
+    dso = Object.assign(new DSpaceObject(), {
+      _links: {
+        self: { href: 'fake-dso-url/dso' }
+      },
+    });
 
     initServices();
 
@@ -54,6 +88,8 @@ describe('DsoEditMetadataValueComponent', () => {
       providers: [
         { provide: RelationshipDataService, useValue: relationshipService },
         { provide: DSONameService, useValue: dsoNameService },
+        { provide: VocabularyDataService, useValue: vocabularyDataService },
+        { provide: ItemDataService, useValue: itemService }
       ],
       schemas: [NO_ERRORS_SCHEMA]
     }).compileComponents();
@@ -63,6 +99,7 @@ describe('DsoEditMetadataValueComponent', () => {
     fixture = TestBed.createComponent(DsoEditMetadataValueComponent);
     component = fixture.componentInstance;
     component.mdValue = editMetadataValue;
+    component.dso = dso;
     component.saving$ = of(false);
     fixture.detectChanges();
   });