55946: Start of Edit Item Page

resources/i18n/en.json

@@ -72,6 +72,59 @@
         "title": "Title"
       },
       "confirm": "Confirm selected"
+    },
+    "edit": {
+      "head": "Edit Item",
+      "tabs": {
+        "status": {
+          "head": "Item Status",
+          "description": "Welcome to the item management page. From here you can withdraw, reinstate, move or delete the item. You may also update or add new metadata / bitstreams on the other tabs.",
+          "labels": {
+            "id": "Item Internal ID",
+            "handle": "Handle",
+            "lastModified": "Last Modified",
+            "itemPage": "Item Page"
+          },
+          "buttons": {
+            "authorizations": {
+              "label": "Edit item's authorization policies",
+              "button": "Authorizations..."
+            },
+            "withdraw": {
+              "label": "Withdraw item from the repository",
+              "button": "Withdraw..."
+            },
+            "move": {
+              "label": "Move item to another collection",
+              "button": "Move..."
+            },
+            "private": {
+              "label": "Make item private",
+              "button": "Make it private..."
+            },
+            "delete": {
+              "label": "Completely expunge item",
+              "button": "Permanently delete"
+            },
+            "mapped-collections": {
+              "label": "Manage mapped collections",
+              "button": "Mapped collections"
+            }
+          }
+        },
+        "bitstreams": {
+          "head": "Item Bitstreams"
+        },
+        "metadata": {
+          "head": "Item Metadata"
+        },
+        "view": {
+          "head": "View Item"
+        },
+        "curate": {
+          "head": "Curate"
+        }
+      }
     }
   },
   "nav": {

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

+<div class="container">
+  <div class="row">
+    <div class="col-12">
+      <h2 class="border-bottom">{{'item.edit.head' | translate}}</h2>
+      <div class="pt-2">
+        <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>
+            </ng-template>
+          </ngb-tab>
+          <ngb-tab title="{{'item.edit.tabs.bitstreams.head' | translate}}">
+            <ng-template ngbTabContent>
+
+            </ng-template>
+          </ngb-tab>
+          <ngb-tab title="{{'item.edit.tabs.metadata.head' | translate}}">
+            <ng-template ngbTabContent>
+
+            </ng-template>
+          </ngb-tab>
+          <ngb-tab title="{{'item.edit.tabs.view.head' | translate}}">
+            <ng-template ngbTabContent>
+
+            </ng-template>
+          </ngb-tab>
+          <ngb-tab title="{{'item.edit.tabs.curate.head' | translate}}">
+            <ng-template ngbTabContent>
+
+            </ng-template>
+          </ngb-tab>
+        </ngb-tabset>
+      </div>
+    </div>
+  </div>
+</div>

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

+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 { 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',
+  styleUrls: ['./edit-item-page.component.scss'],
+  templateUrl: './edit-item-page.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  animations: [
+    fadeIn,
+    fadeInOut
+  ]
+})
+/**
+ * Page component for editing an item
+ */
+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) {
+  }
+
+  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/item-page-routing.module.ts

@@ -4,6 +4,8 @@ import { RouterModule } from '@angular/router';
 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: [
@@ -22,6 +24,14 @@ import { ItemPageResolver } from './item-page.resolver';
         resolve: {
           item: ItemPageResolver
         }
+      },
+      {
+        path: ':id/edit',
+        component: EditItemPageComponent,
+        resolve: {
+          item: ItemPageResolver
+        },
+        canActivate: [AuthenticatedGuard]
       }
     ])
   ],

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

@@ -18,6 +18,7 @@ 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';
 
 @NgModule({
   imports: [
@@ -39,7 +40,8 @@ import { FullFileSectionComponent } from './full/field-components/file-section/f
     ItemPageSpecificFieldComponent,
     FileSectionComponent,
     CollectionsComponent,
-    FullFileSectionComponent
+    FullFileSectionComponent,
+    EditItemPageComponent
   ]
 })
 export class ItemPageModule {