65272: Functional EditItemTemplatePageComponent

resources/i18n/en.json5

@@ -140,11 +140,13 @@
   "collection.edit.tabs.source.head": "Content Source",
   "collection.edit.tabs.source.title": "Collection Edit - Content Source",
   "collection.edit.template.add-button": "Add",
+  "collection.edit.template.cancel": "Cancel",
   "collection.edit.template.delete-button": "Delete",
   "collection.edit.template.edit-button": "Edit",
   "collection.edit.template.label": "Item template",
-  "collections.edit.template.notifications.delete.error": "Failed to delete the item template",
-  "collections.edit.template.notifications.delete.success": "Successfully deleted the item template",
+  "collection.edit.template.notifications.delete.error": "Failed to delete the item template",
+  "collection.edit.template.notifications.delete.success": "Successfully deleted the item template",
+  "collection.edit.template.title": "Edit Template Item for Collection \"{{ collection }}\"",
   "collection.form.abstract": "Short Description",
   "collection.form.description": "Introductory text (HTML)",
   "collection.form.errors.title.required": "Please enter a collection name",

src/app/+collection-page/collection-page.module.ts

@@ -10,11 +10,13 @@ import { CollectionFormComponent } from './collection-form/collection-form.compo
 import { DeleteCollectionPageComponent } from './delete-collection-page/delete-collection-page.component';
 import { SearchService } from '../+search-page/search-service/search.service';
 import { EditItemTemplatePageComponent } from './edit-item-template-page/edit-item-template-page.component';
+import { EditItemPageModule } from '../+item-page/edit-item-page/edit-item-page.module';
 
 @NgModule({
   imports: [
     CommonModule,
     SharedModule,
+    EditItemPageModule,
     CollectionPageRoutingModule
   ],
   declarations: [

src/app/+collection-page/edit-collection-page/collection-metadata/collection-metadata.component.ts

@@ -11,6 +11,7 @@ import { getRemoteDataPayload, getSucceededRemoteData } from '../../../core/shar
 import { switchMap, take } from 'rxjs/operators';
 import { combineLatest as combineLatestObservable } from 'rxjs';
 import { NotificationsService } from '../../../shared/notifications/notifications.service';
+import { TranslateService } from '@ngx-translate/core';
 
 /**
  * Component for editing a collection's metadata
@@ -32,7 +33,8 @@ export class CollectionMetadataComponent extends ComcolMetadataComponent<Collect
     protected itemTemplateService: ItemTemplateDataService,
     protected router: Router,
     protected route: ActivatedRoute,
-    protected notificationsService: NotificationsService
+    protected notificationsService: NotificationsService,
+    protected translate: TranslateService
   ) {
     super(collectionDataService, router, route);
   }
@@ -85,10 +87,9 @@ export class CollectionMetadataComponent extends ComcolMetadataComponent<Collect
       switchMap(([collection, template]) => this.itemTemplateService.deleteByCollectionID(template, collection.uuid))
     ).subscribe((success: boolean) => {
       if (success) {
-        this.notificationsService.success(null, 'collections.edit.template.notifications.delete.success');
-        this.initTemplateItem();
+        this.notificationsService.success(null, this.translate.get('collection.edit.template.notifications.delete.success'));
       } else {
-        this.notificationsService.error(null, 'collections.edit.template.notifications.delete.error');
+        this.notificationsService.error(null, this.translate.get('collection.edit.template.notifications.delete.error'));
       }
     });
   }

src/app/+collection-page/edit-item-template-page/edit-item-template-page.component.html

@@ -1,2 +1,9 @@
-
-<!--<ds-item-metadata></ds-item-metadata>-->
+<div class="container" *ngVar="(collectionRD$ | async)?.payload as collection">
+  <div class="row">
+    <div class="col-12">
+      <h2 class="border-bottom">{{ 'collection.edit.template.title' | translate:{ collection: collection?.name } }}</h2>
+      <ds-item-metadata [updateService]="itemTemplateService"></ds-item-metadata>
+      <button [routerLink]="getCollectionEditUrl(collection)" class="btn btn-outline-secondary">{{ 'collection.edit.template.cancel' | translate }}</button>
+    </div>
+  </div>
+</div>

src/app/+collection-page/edit-item-template-page/edit-item-template-page.component.ts

@@ -2,9 +2,10 @@ import { Component, OnInit } from '@angular/core';
 import { Observable } from 'rxjs/internal/Observable';
 import { RemoteData } from '../../core/data/remote-data';
 import { Collection } from '../../core/shared/collection.model';
-import { Item } from '../../core/shared/item.model';
 import { ActivatedRoute } from '@angular/router';
 import { first, map } from 'rxjs/operators';
+import { ItemTemplateDataService } from '../../core/data/item-template-data.service';
+import { getCollectionEditPath } from '../collection-page-routing.module';
 
 @Component({
   selector: 'ds-edit-item-template-page',
@@ -12,14 +13,17 @@ import { first, map } from 'rxjs/operators';
 })
 export class EditItemTemplatePageComponent implements OnInit {
   collectionRD$: Observable<RemoteData<Collection>>;
-  itemRD$: Observable<RemoteData<Item>>;
 
-  constructor(protected route: ActivatedRoute) {
+  constructor(protected route: ActivatedRoute,
+              protected itemTemplateService: ItemTemplateDataService) {
   }
 
   ngOnInit(): void {
-    this.collectionRD$ = this.route.parent.data.pipe(first(), map((data) => data.collection));
-    this.itemRD$ = this.route.parent.data.pipe(first(), map((data) => data.item));
+    this.collectionRD$ = this.route.data.pipe(first(), map((data) => data.collection));
+  }
+
+  getCollectionEditUrl(collection: Collection): string {
+    return getCollectionEditPath(collection.uuid);
   }
 
 }

src/app/+item-page/edit-item-page/abstract-item-update/abstract-item-update.component.ts

@@ -10,6 +10,7 @@ import { TranslateService } from '@ngx-translate/core';
 import { GLOBAL_CONFIG, GlobalConfig } from '../../../../config';
 import { first, map } from 'rxjs/operators';
 import { RemoteData } from '../../../core/data/remote-data';
+import { combineLatest as observableCombineLatest } from 'rxjs';
 
 @Injectable()
 /**
@@ -55,11 +56,12 @@ export abstract class AbstractItemUpdateComponent implements OnInit {
    * Initialize common properties between item-update components
    */
   ngOnInit(): void {
-    this.route.parent.data.pipe(map((data) => data.item))
-      .pipe(
-        first(),
-        map((data: RemoteData<Item>) => data.payload)
-      ).subscribe((item: Item) => {
+    observableCombineLatest(this.route.data, this.route.parent.data).pipe(
+      map(([data, parentData]) => Object.assign(data, parentData)),
+      map((data) => data.item),
+      first(),
+      map((data: RemoteData<Item>) => data.payload)
+    ).subscribe((item: Item) => {
       this.item = item;
     });
 

src/app/+item-page/edit-item-page/edit-item-page.module.ts

@@ -47,6 +47,9 @@ import { ItemMoveComponent } from './item-move/item-move.component';
     EditRelationshipComponent,
     EditRelationshipListComponent,
     ItemMoveComponent,
+  ],
+  exports: [
+    ItemMetadataComponent
   ]
 })
 export class EditItemPageModule {

src/app/+item-page/edit-item-page/item-metadata/item-metadata.component.ts

@@ -1,4 +1,4 @@
-import { Component, Inject } from '@angular/core';
+import { Component, Inject, Input } from '@angular/core';
 import { Item } from '../../../core/shared/item.model';
 import { ItemDataService } from '../../../core/data/item-data.service';
 import { ObjectUpdatesService } from '../../../core/data/object-updates/object-updates.service';
@@ -19,6 +19,8 @@ import { MetadatumViewModel } from '../../../core/shared/metadata.models';
 import { Metadata } from '../../../core/shared/metadata.utils';
 import { AbstractItemUpdateComponent } from '../abstract-item-update/abstract-item-update.component';
 import { MetadataField } from '../../../core/metadata/metadata-field.model';
+import { UpdateDataService } from '../../../core/data/update-data.service';
+import { hasNoValue } from '../../../shared/empty.util';
 
 @Component({
   selector: 'ds-item-metadata',
@@ -30,6 +32,12 @@ import { MetadataField } from '../../../core/metadata/metadata-field.model';
  */
 export class ItemMetadataComponent extends AbstractItemUpdateComponent {
 
+  /**
+   * A custom update service to use for adding and committing patches
+   * This will default to the ItemDataService
+   */
+  @Input() updateService: UpdateDataService<Item>;
+
   /**
    * Observable with a list of strings with all existing metadata field keys
    */
@@ -54,6 +62,9 @@ export class ItemMetadataComponent extends AbstractItemUpdateComponent {
   ngOnInit(): void {
     super.ngOnInit();
     this.metadataFields$ = this.findMetadataFields();
+    if (hasNoValue(this.updateService)) {
+      this.updateService = this.itemService;
+    }
   }
 
   /**
@@ -97,9 +108,9 @@ export class ItemMetadataComponent extends AbstractItemUpdateComponent {
           first(),
           switchMap((metadata: MetadatumViewModel[]) => {
             const updatedItem: Item = Object.assign(cloneDeep(this.item), { metadata: Metadata.toMetadataMap(metadata) });
-            return this.itemService.update(updatedItem);
+            return this.updateService.update(updatedItem);
           }),
-          tap(() => this.itemService.commitUpdates()),
+          tap(() => this.updateService.commitUpdates()),
           getSucceededRemoteData()
         ).subscribe(
           (rd: RemoteData<Item>) => {

src/app/core/data/item-template-data.service.ts

@@ -21,7 +21,6 @@ import { switchMap } from 'rxjs/operators';
 
 /* tslint:disable:max-classes-per-file */
 class DataServiceImpl extends ItemDataService {
-  protected linkPath = 'itemtemplate';
 
   private collectionID: string;
 
@@ -40,19 +39,9 @@ class DataServiceImpl extends ItemDataService {
     super(requestService, rdbService, dataBuildService, store, bs, objectCache, halService, notificationsService, http, comparator);
   }
 
-  protected getEndpoint(): Observable<string> {
-    return this.collectionService.getIDHrefObs(this.collectionID).pipe(
-      switchMap((href: string) => this.halService.getEndpoint(this.linkPath, href))
-    );
-  }
-
-  getIDHrefObs(resourceID: string): Observable<string> {
-    return this.getEndpoint();
-  }
-
   findByCollectionID(collectionID: string): Observable<RemoteData<Item>> {
     this.collectionID = collectionID;
-    return super.findById(collectionID);
+    return super.findById('961e137c-d815-4ade-aff1-0bb12f1fe965');
   }
 
   create(item: Item, collectionID: string): Observable<RemoteData<Item>> {