seed our BibStaffView with BibSummary

diff --git a/Open-ILS/src/eg2/src/app/staff/common.module.ts b/Open-ILS/src/eg2/src/app/staff/common.module.ts
index 1381be0..d463853 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/common.module.ts
+++ b/Open-ILS/src/eg2/src/app/staff/common.module.ts
@@ -12,6 +12,7 @@ import {OpChangeComponent} from '@eg/staff/share/op-change/op-change.component';
 import {TitleComponent} from '@eg/share/title/title.component';
 import {BucketDialogComponent} from '@eg/staff/share/buckets/bucket-dialog.component';
 import {BibSummaryComponent} from '@eg/staff/share/bib-summary/bib-summary.component';
+import {BibStaffViewComponent} from '@eg/staff/share/bib-staff-view/bib-staff-view.component';
 import {EgHelpPopoverComponent} from '@eg/share/eg-help-popover/eg-help-popover.component';
 import {DatetimeValidatorDirective} from '@eg/share/validators/datetime_validator.directive';
 import {MultiSelectComponent} from '@eg/share/multi-select/multi-select.component';
@@ -36,6 +37,7 @@ import {OfflineService} from '@eg/staff/share/offline.service';
     OpChangeComponent,
     BucketDialogComponent,
     BibSummaryComponent,
+    BibStaffViewComponent,
     EgHelpPopoverComponent,
     DatetimeValidatorDirective,
     MultiSelectComponent,
@@ -61,6 +63,7 @@ import {OfflineService} from '@eg/staff/share/offline.service';
     OpChangeComponent,
     BucketDialogComponent,
     BibSummaryComponent,
+    BibStaffViewComponent,
     EgHelpPopoverComponent,
     DatetimeValidatorDirective,
     MultiSelectComponent,

diff --git a/Open-ILS/src/eg2/src/app/staff/share/bib-staff-view/bib-staff-view.component.css b/Open-ILS/src/eg2/src/app/staff/share/bib-staff-view/bib-staff-view.component.css
new file mode 100644 (file)
index 0000000..11e8804
--- /dev/null
+++ b/Open-ILS/src/eg2/src/app/staff/share/bib-staff-view/bib-staff-view.component.css
@@ -0,0 +1,11 @@
+
+
+.eg-bib-summary .card-header {
+    padding: .25rem .5rem
+}
+
+.jacket {
+    padding: 3px;
+    width: 100%;
+}
+

diff --git a/Open-ILS/src/eg2/src/app/staff/share/bib-staff-view/bib-staff-view.component.html b/Open-ILS/src/eg2/src/app/staff/share/bib-staff-view/bib-staff-view.component.html
new file mode 100644 (file)
index 0000000..2e49b19
--- /dev/null
+++ b/Open-ILS/src/eg2/src/app/staff/share/bib-staff-view/bib-staff-view.component.html
@@ -0,0 +1,144 @@
+
+<div class='eg-bib-summary card tight-card w-100' *ngIf="summary">
+  <div class="card-header d-flex">
+    <div class="font-weight-bold">
+      Record Summary
+      <ng-container *ngIf="summary.record.deleted() === 't'">
+        <span class="text-danger" i18n>(Deleted)</span>
+      </ng-container>
+      <ng-container *ngIf="summary.attributes.icon_format && summary.attributes.icon_format[0]">
+        <ng-container *ngFor="let icon of summary.attributes.icon_format">
+          <span class="pr-1 pl-2">
+            <img class="pr-1"
+              src="/images/format_icons/icon_format/{{icon}}.png"/>
+            <span class="font-weight-normal">{{iconFormatLabel(icon)}}</span>
+          </span>
+        </ng-container>
+      </ng-container>
+    </div>
+    <div class="flex-1"></div>
+    <div>
+      <a class="with-material-icon no-href text-primary"
+        title="Show More" i18n-title
+        *ngIf="!expand" (click)="expand=true">
+        <span class="material-icons">expand_more</span>
+      </a>
+      <a class="with-material-icon no-href text-primary"
+        title="Show Less" i18n-title
+        *ngIf="expand" (click)="expand=false">
+        <span class="material-icons">expand_less</span>
+      </a>
+    </div>
+  </div>
+  <div class="row">
+
+    <!-- in expanded display, show the jacket image along the left -->
+    <ng-container *ngIf="expand">
+      <div class="col-lg-1 pr-0">
+        <a href="/opac/extras/ac/jacket/large/r/{{summary.id}}">
+          <img class="jacket jacket-medium"
+            alt="Jacket Image" i18n-alt
+            src="/opac/extras/ac/jacket/medium/r/{{summary.id}}"/>
+        </a>
+      </div>
+    </ng-container>
+
+    <!-- make room for the jacket image when expanded -->
+    <div [ngClass]="{'col-lg-11 pl-0': expand, 'col-lg-12': !expand}">
+      <div class="card-body">
+        <ul class="list-group list-group-flush">
+          <li class="list-group-item">
+            <div class="d-flex">
+              <div class="flex-1 font-weight-bold" i18n>Title:</div>
+              <div class="flex-3">
+                <eg-bib-display-field [summary]="summary" field="title"
+                  routerLink="/staff/catalog/record/{{summary.id}}">
+                </eg-bib-display-field>
+              </div>
+              <div class="flex-1 font-weight-bold pl-1" i18n>Edition:</div>
+              <div class="flex-1">{{summary.display.edition}}</div>
+              <div class="flex-1 font-weight-bold" i18n>TCN:</div>
+              <div class="flex-1">{{summary.record.tcn_value()}}</div>
+              <div class="flex-1 font-weight-bold pl-1" i18n>Created By:</div>
+              <div class="flex-1" *ngIf="summary.record.creator().usrname">
+                <a href="/eg/staff/circ/patron/{{summary.record.creator().id()}}/checkout">
+                  {{summary.record.creator().usrname()}}
+                </a>
+              </div>
+            </div>
+          </li>
+          <li class="list-group-item" *ngIf="expand">
+            <div class="d-flex">
+              <div class="flex-1 font-weight-bold" i18n>Author:</div>
+              <div class="flex-3">{{summary.display.author}}</div>
+              <div class="flex-1 font-weight-bold pl-1" i18n>Pubdate:</div>
+              <div class="flex-1">{{summary.display.pubdate}}</div>
+              <div class="flex-1 font-weight-bold" i18n>Database ID:</div>
+              <div class="flex-1">{{summary.id}}</div>
+              <div class="flex-1 font-weight-bold pl-1" i18n>Last Edited By:</div>
+              <div class="flex-1" *ngIf="summary.record.editor().usrname">
+                <a href="/eg/staff/circ/patron/{{summary.record.editor().id()}}/checkout">
+                  {{summary.record.editor().usrname()}}
+                </a>
+              </div>
+            </div>
+          </li>
+          <li class="list-group-item" *ngIf="expand">
+            <div class="d-flex">
+              <div class="flex-1 font-weight-bold" i18n>Bib Call #:</div>
+              <div class="flex-3">{{summary.bibCallNumber}}</div>
+              <div class="flex-1 font-weight-bold" i18n>Record Owner:</div>
+              <div class="flex-1">{{orgName(summary.record.owner())}}</div>
+              <div class="flex-1 font-weight-bold pl-1" i18n>Created On:</div>
+              <div class="flex-1">{{summary.record.create_date() | date:'short'}}</div>
+              <div class="flex-1 font-weight-bold pl-1" i18n>Last Edited On:</div>
+              <div class="flex-1">{{summary.record.edit_date() | date:'short'}}</div>
+            </div>
+          </li>
+          <ng-container *ngIf="expand && hasCourse">
+            <li class="list-group-item">
+              <div class="d-flex">
+                <div class="flex-1 font-weight-bold" i18n>Associated Courses</div>
+              </div>
+            </li>
+            <li class="list-group-item" *ngFor="let course of courses">
+              <div class="d-flex">
+                <div class="flex-1 font-weight-bold" i18n>Course Name:</div>
+                <div class="flex-3">
+                  <a routerLink="/staff/admin/local/asset/course_list/{{course.id()}}">
+                    {{course.name()}}
+                  </a>
+                </div>
+                <div class="flex-1 font-weight-bold" i18n>Course Number:</div>
+                <div class="flex-1">{{course.course_number()}}</div>
+                <div class="flex-1 font-weight-bold" i18n>Section Number:</div>
+                <div class="flex-1">{{course.section_number()}}</div>
+                <div class="flex-1 font-weight-bold" i18n>Owning Library:</div>
+                <div class="flex-1">{{this.org.get(course.owning_lib()).shortname()}}</div>
+              </div>
+            </li>
+          </ng-container>
+          <ng-container *ngIf="expand && summary.eResourceUrls.length">
+            <li class="list-group-item" *ngFor="let url of summary.eResourceUrls">
+              <div class="d-flex">
+                <div class="flex-1 font-weight-bold">
+                  <ng-container [ngSwitch]="url.ind2">
+                    <ng-container *ngSwitchCase="'0'" i18n>Resource:</ng-container>
+                    <ng-container *ngSwitchCase="'1'" i18n>Version of Resource:</ng-container>
+                    <ng-container *ngSwitchCase="'2'" i18n>Related Resource:</ng-container>
+                    <ng-container *ngSwitchDefault i18n></ng-container>
+                  </ng-container>
+                </div>
+                <div class="flex-5">
+                  <div><a href="{{url.href}}">{{url.label}}</a></div>
+                  <div class="pt-1">{{url.note}}</div>
+                </div>
+              </div>
+            </li>
+          </ng-container>
+        </ul>
+      </div>
+    </div><!-- col -->
+  </div><!-- row -->
+</div>
+

diff --git a/Open-ILS/src/eg2/src/app/staff/share/bib-staff-view/bib-staff-view.component.ts b/Open-ILS/src/eg2/src/app/staff/share/bib-staff-view/bib-staff-view.component.ts
new file mode 100644 (file)
index 0000000..c150b73
--- /dev/null
+++ b/Open-ILS/src/eg2/src/app/staff/share/bib-staff-view/bib-staff-view.component.ts
@@ -0,0 +1,108 @@
+import {Component, OnInit, Input} from '@angular/core';
+import {OrgService} from '@eg/core/org.service';
+import {CourseService} from '@eg/staff/share/course.service';
+import {BibRecordService, BibRecordSummary
+    } from '@eg/share/catalog/bib-record.service';
+import {ServerStoreService} from '@eg/core/server-store.service';
+import {CatalogService} from '@eg/share/catalog/catalog.service';
+
+@Component({
+  selector: 'eg-bib-summary',
+  templateUrl: 'bib-summary.component.html',
+  styleUrls: ['bib-summary.component.css']
+})
+export class BibSummaryComponent implements OnInit {
+
+    initDone = false;
+    hasCourse = false;
+    courses: any;
+
+    // True / false if the display is vertically expanded
+    private _exp: boolean;
+    set expand(e: boolean) {
+        this._exp = e;
+        if (this.initDone) {
+            this.saveExpandState();
+        }
+    }
+    get expand(): boolean { return this._exp; }
+
+    // If provided, the record will be fetched by the component.
+    @Input() recordId: number;
+
+    // Otherwise, we'll use the provided bib summary object.
+    summary: BibRecordSummary;
+    @Input() set bibSummary(s: any) {
+        this.summary = s;
+        if (this.initDone && this.summary) {
+            this.summary.getBibCallNumber();
+            this.loadCourseInformation(this.summary.record.id());
+        }
+    }
+
+    constructor(
+        private bib: BibRecordService,
+        private org: OrgService,
+        private store: ServerStoreService,
+        private cat: CatalogService,
+        private course: CourseService
+    ) {}
+
+    ngOnInit() {
+
+        this.store.getItem('eg.cat.record.summary.collapse')
+        .then(value => this.expand = !value)
+        .then(_ => this.cat.fetchCcvms())
+        .then(_ => {
+            if (this.summary) {
+                return this.loadCourseInformation(this.summary.record.id())
+                .then(__ => this.summary.getBibCallNumber());
+            } else {
+                if (this.recordId) {
+                    return this.loadSummary();
+                }
+            }
+        }).then(_ => this.initDone = true);
+    }
+
+    saveExpandState() {
+        this.store.setItem('eg.cat.record.summary.collapse', !this.expand);
+    }
+
+    loadSummary(): Promise<any> {
+        return this.loadCourseInformation(this.recordId)
+        .then(_ => {
+            return this.bib.getBibSummary(this.recordId).toPromise()
+            .then(summary => {
+                this.summary = summary;
+                return summary.getBibCallNumber();
+            });
+        });
+    }
+
+    loadCourseInformation(recordId): Promise<any> {
+        return this.org.settings('circ.course_materials_opt_in')
+        .then(setting => {
+            if (setting['circ.course_materials_opt_in']) {
+                this.course.fetchCoursesForRecord(recordId).then(courseList => {
+                    if (courseList) {
+                        this.courses = courseList;
+                        this.hasCourse = true;
+                    }
+                });
+            }
+        });
+    }
+
+    orgName(orgId: number): string {
+        if (orgId) {
+            return this.org.get(orgId).shortname();
+        }
+    }
+
+    iconFormatLabel(code: string): string {
+        return this.cat.iconFormatLabel(code);
+    }
+}
+
+