55946: Finished edit-item-page and start of collection mapper

resources/i18n/en.json

@@ -85,7 +85,7 @@
               "label": "Completely expunge item",
               "button": "Permanently delete"
             },
-            "mapped-collections": {
+            "mappedCollections": {
               "label": "Manage mapped collections",
               "button": "Mapped collections"
             }

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

@@ -6,23 +6,7 @@
         <ngb-tabset>
           <ngb-tab title="{{'item.edit.tabs.status.head' | translate}}">
             <ng-template ngbTabContent>
-              <p class="mt-2">{{'item.edit.tabs.status.description' | translate}}</p>
-              <div class="row">
-                <div *ngFor="let statusKey of objectKeys(statusData$ | async)" class="w-100">
-                  <div class="col-3 float-left">
-                    {{'item.edit.tabs.status.labels.' + statusKey | translate}}:
-                  </div>
-                  <div class="col-9 float-left">
-                    {{(statusData$ | async)[statusKey]}}
-                  </div>
-                </div>
-                <div class="col-3 float-left">
-                  {{'item.edit.tabs.status.labels.itemPage' | translate}}:
-                </div>
-                <div class="col-9 float-left">
-                  <a href="{{getItemPage()}}">{{getItemPage()}}</a>
-                </div>
-              </div>
+              <ds-item-status [item]="(itemRD$ | async)?.payload"></ds-item-status>
             </ng-template>
           </ngb-tab>
           <ngb-tab title="{{'item.edit.tabs.bitstreams.head' | translate}}">

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

@@ -1,12 +1,9 @@
 import { fadeIn, fadeInOut } from '../../shared/animations/fade';
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
-import { ItemDataService } from '../../core/data/item-data.service';
-import { ActivatedRoute, Router } from '@angular/router';
+import { ActivatedRoute } from '@angular/router';
 import { Observable } from 'rxjs/Observable';
 import { RemoteData } from '../../core/data/remote-data';
 import { Item } from '../../core/shared/item.model';
-import { getSucceededRemoteData } from '../../core/shared/operators';
-import { map } from 'rxjs/operators';
 
 @Component({
   selector: 'ds-edit-item-page',
@@ -23,33 +20,16 @@ import { map } from 'rxjs/operators';
  */
 export class EditItemPageComponent implements OnInit {
 
-  objectKeys = Object.keys;
-
   /**
    * The item to edit
    */
   itemRD$: Observable<RemoteData<Item>>;
-  statusData$: Observable<any>;
 
-  constructor(private route: ActivatedRoute,
-              private router: Router) {
+  constructor(private route: ActivatedRoute) {
   }
 
   ngOnInit(): void {
     this.itemRD$ = this.route.data.map((data) => data.item);
-    this.statusData$ = this.itemRD$.pipe(
-      getSucceededRemoteData(),
-      map((itemRD: RemoteData<Item>) => itemRD.payload),
-      map((item: Item) => Object.assign({
-        id: item.id,
-        handle: item.handle,
-        lastModified: item.lastModified
-      }))
-    )
-  }
-
-  getItemPage(): string {
-    return this.router.url.substr(0, this.router.url.lastIndexOf('/'));
   }
 
 }

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

@@ -0,0 +1,23 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SharedModule } from '../../shared/shared.module';
+import { EditItemPageRoutingModule } from './edit-item-page.routing.module';
+import { EditItemPageComponent } from './edit-item-page.component';
+import { ItemCollectionMapperComponent } from './item-collection-mapper/item-collection-mapper.component';
+import { ItemStatusComponent } from './item-status/item-status.component';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    SharedModule,
+    EditItemPageRoutingModule
+  ],
+  declarations: [
+    EditItemPageComponent,
+    ItemStatusComponent,
+    ItemCollectionMapperComponent
+  ]
+})
+export class EditItemPageModule {
+
+}

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

@@ -0,0 +1,32 @@
+import { ItemPageResolver } from '../item-page.resolver';
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { EditItemPageComponent } from './edit-item-page.component';
+import { ItemCollectionMapperComponent } from './item-collection-mapper/item-collection-mapper.component';
+
+@NgModule({
+  imports: [
+    RouterModule.forChild([
+      {
+        path: '',
+        component: EditItemPageComponent,
+        resolve: {
+          item: ItemPageResolver
+        }
+      },
+      {
+        path: 'map',
+        component: ItemCollectionMapperComponent,
+        resolve: {
+          item: ItemPageResolver
+        }
+      }
+    ])
+  ],
+  providers: [
+    ItemPageResolver,
+  ]
+})
+export class EditItemPageRoutingModule {
+
+}

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

@@ -0,0 +1,7 @@
+<div class="container">
+  <div class="row">
+    <div class="col-12">
+      <p>It works!</p>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,19 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { fadeIn, fadeInOut } from '../../../shared/animations/fade';
+
+@Component({
+  selector: 'ds-item-collection-mapper',
+  styleUrls: ['./item-collection-mapper.component.scss'],
+  templateUrl: './item-collection-mapper.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  animations: [
+    fadeIn,
+    fadeInOut
+  ]
+})
+/**
+ * Component for mapping collections to an item
+ */
+export class ItemCollectionMapperComponent {
+
+}

src/app/+item-page/edit-item-page/item-status/item-status.component.html

@@ -0,0 +1,30 @@
+<p class="mt-2">{{'item.edit.tabs.status.description' | translate}}</p>
+<div class="row">
+  <div *ngFor="let statusKey of statusDataKeys" class="w-100">
+    <div class="col-3 float-left">
+      {{'item.edit.tabs.status.labels.' + statusKey | translate}}:
+    </div>
+    <div class="col-9 float-left">
+      {{statusData[statusKey]}}
+    </div>
+  </div>
+  <div class="col-3 float-left">
+    {{'item.edit.tabs.status.labels.itemPage' | translate}}:
+  </div>
+  <div class="col-9 float-left">
+    <a href="{{getItemPage()}}">{{getItemPage()}}</a>
+  </div>
+
+  <div *ngFor="let actionKey of actionsKeys" class="w-100 pt-3">
+    <div class="col-3 float-left d-flex h-100">
+      <span class="justify-content-center align-self-center">
+        {{'item.edit.tabs.status.buttons.' + actionKey + '.label' | translate}}
+      </span>
+    </div>
+    <div class="col-9 float-left">
+      <a class="btn btn-outline-secondary" href="{{actions[actionKey]}}">
+        {{'item.edit.tabs.status.buttons.' + actionKey + '.button' | translate}}
+      </a>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,82 @@
+import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
+import { fadeIn, fadeInOut } from '../../../shared/animations/fade';
+import { Item } from '../../../core/shared/item.model';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'ds-item-status',
+  styleUrls: ['./item-status.component.scss'],
+  templateUrl: './item-status.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  animations: [
+    fadeIn,
+    fadeInOut
+  ]
+})
+/**
+ * Component for displaying an item's status
+ */
+export class ItemStatusComponent implements OnInit {
+
+  /**
+   * The item to display the status for
+   */
+  @Input() item: Item;
+
+  /**
+   * The data to show in the status
+   */
+  statusData: any;
+  /**
+   * The keys of the data (to loop over)
+   */
+  statusDataKeys;
+
+  /**
+   * The possible actions that can be performed on the item
+   *  key: id   value: url to action's component
+   */
+  actions: any;
+  /**
+   * The keys of the actions (to loop over)
+   */
+  actionsKeys;
+
+  constructor(private router: Router) {
+  }
+
+  ngOnInit(): void {
+    this.statusData = Object.assign({
+      id: this.item.id,
+      handle: this.item.handle,
+      lastModified: this.item.lastModified
+    });
+    this.statusDataKeys = Object.keys(this.statusData);
+
+    this.actions = Object.assign({
+      mappedCollections: this.getCurrentUrl() + '/map'
+    });
+    this.actionsKeys = Object.keys(this.actions);
+  }
+
+  /**
+   * Get the url to the simple item page
+   * @returns {string}  url
+   */
+  getItemPage(): string {
+    return this.router.url.substr(0, this.router.url.lastIndexOf('/'));
+  }
+
+  /**
+   * Get the current url without query params
+   * @returns {string}  url
+   */
+  getCurrentUrl(): string {
+    if (this.router.url.indexOf('?') > -1) {
+      return this.router.url.substr(0, this.router.url.indexOf('?'));
+    } else {
+      return this.router.url;
+    }
+  }
+
+}

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

@@ -5,7 +5,6 @@ import { ItemPageComponent } from './simple/item-page.component';
 import { FullItemPageComponent } from './full/full-item-page.component';
 import { ItemPageResolver } from './item-page.resolver';
 import { AuthenticatedGuard } from '../core/auth/authenticated.guard';
-import { EditItemPageComponent } from './edit-item-page/edit-item-page.component';
 
 @NgModule({
   imports: [
@@ -27,10 +26,7 @@ import { EditItemPageComponent } from './edit-item-page/edit-item-page.component
       },
       {
         path: ':id/edit',
-        component: EditItemPageComponent,
-        resolve: {
-          item: ItemPageResolver
-        },
+        loadChildren: './edit-item-page/edit-item-page.module#EditItemPageModule',
         canActivate: [AuthenticatedGuard]
       }
     ])

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

@@ -18,12 +18,13 @@ import { FileSectionComponent } from './simple/field-components/file-section/fil
 import { CollectionsComponent } from './field-components/collections/collections.component';
 import { FullItemPageComponent } from './full/full-item-page.component';
 import { FullFileSectionComponent } from './full/field-components/file-section/full-file-section.component';
-import { EditItemPageComponent } from './edit-item-page/edit-item-page.component';
+import { EditItemPageModule } from './edit-item-page/edit-item-page.module';
 
 @NgModule({
   imports: [
     CommonModule,
     SharedModule,
+    EditItemPageModule,
     ItemPageRoutingModule
   ],
   declarations: [
@@ -40,8 +41,7 @@ import { EditItemPageComponent } from './edit-item-page/edit-item-page.component
     ItemPageSpecificFieldComponent,
     FileSectionComponent,
     CollectionsComponent,
-    FullFileSectionComponent,
-    EditItemPageComponent
+    FullFileSectionComponent
   ]
 })
 export class ItemPageModule {