Skip to content

Commit

Permalink
circ-pol: implement detail view
Browse files Browse the repository at this point in the history
* Adds circulation policies detailed view.
* Adds collapse list component to display application informations sorted by patron type.
* Removes some useless imports.

Co-Authored-by: Alicia Zangger <alicia.zangger@rero.ch>
Co-Authored-by: Johnny Mariéthoz <Johnny.Mariethoz@rero.ch>
  • Loading branch information
Alicia Zangger and jma committed Dec 3, 2019
1 parent df4148f commit eb5b57b
Show file tree
Hide file tree
Showing 8 changed files with 335 additions and 8 deletions.
19 changes: 17 additions & 2 deletions projects/admin/src/app/app.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,8 @@ import { DocumentDetailViewComponent } from './record/detail-view/document-detai
import { HoldingComponent } from './record/detail-view/document-detail-view/holding/holding.component';
import { HoldingItemComponent } from './record/detail-view/document-detail-view/holding-item/holding-item.component';
import { HoldingsComponent } from './record/detail-view/document-detail-view/holdings/holdings.component';
import { CircPolicyDetailViewComponent } from './record/detail-view/circ-policy-detail-view/circ-policy-detail-view.component';
import { CollapseListComponent } from './record/detail-view/circ-policy-detail-view/collapse-list/collapse-list.component';

@NgModule({
declarations: [
Expand Down Expand Up @@ -90,7 +92,16 @@ import { HoldingsComponent } from './record/detail-view/document-detail-view/hol
DocumentDetailViewComponent,
HoldingComponent,
HoldingItemComponent,
HoldingsComponent
HoldingsComponent,
BioInformationsPipe,
BirthDatePipe,
MefTitlePipe,
LibraryComponent,
ExceptionDatesListComponent,
ExceptionDatesEditComponent,
CirculationPolicyComponent,
CircPolicyDetailViewComponent,
CollapseListComponent
],
imports: [
Bootstrap4FrameworkModule,
Expand Down Expand Up @@ -145,7 +156,11 @@ import { HoldingsComponent } from './record/detail-view/document-detail-view/hol
SelectItemTypeTypeComponent,
LibraryComponent,
PersonDetailViewComponent,
DocumentDetailViewComponent
DocumentDetailViewComponent,
ExceptionDatesEditComponent,
CircPolicyDetailViewComponent,
CirculationPolicyComponent,
CollapseListComponent
],
bootstrap: [AppComponent]
})
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -15,13 +15,14 @@
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/

import { Component, Input } from '@angular/core';
import { Component } from '@angular/core';
import { ResultItem } from '@rero/ng-core';

@Component({
selector: 'admin-circ-policies-brief-view',
template: `
<h5 class="mb-0 card-title">{{ record.metadata.name }}</h5>
<h5 class="mb-0 card-title"><a [routerLink]="[detailUrl.link]">{{ record.metadata.name }}</a></h5>
<div class="card-text">
<span *ngIf="record.metadata.description">
{{ record.metadata.description }}
Expand All @@ -32,12 +33,9 @@ import { ResultItem } from '@rero/ng-core';
})
export class CircPoliciesBriefViewComponent implements ResultItem {

@Input()
record: any;

@Input()
type: string;

@Input()
detailUrl: { link: string, external: boolean };
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,176 @@
<!--
RERO ILS UI
 Copyright (C) 2019 RERO

 This program is free software: you can redistribute it and/or modify
 it under the terms of the GNU Affero General Public License as published by
 the Free Software Foundation, version 3 of the License.

 This program is distributed in the hope that it will be useful,
 but WITHOUT ANY WARRANTY; without even the implied warranty of
 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
 GNU Affero General Public License for more details.

 You should have received a copy of the GNU Affero General Public License
 along with this program. If not, see <http://www.gnu.org/licenses/>.
-->

<ng-container *ngIf="record && record.metadata as data">
<h1 class="mb-3">{{ data.name | translate }}</h1>
<article>
<!-- DETAILS -->
<section class="m-2 p-2">
<!-- NAME -->
<dl class="row">
<dt class="col-sm-3 offset-sm-2 offset-md-0">
{{ 'Name' | translate }}:
</dt>
<dd class="col-sm-7 col-md-8 mb-0">
{{ data.name }}
</dd>
</dl>
<!-- DESCRIPTION -->
<dl class="row">
<dt class="col-sm-3 offset-sm-2 offset-md-0">
{{ 'Description' | translate }}:
</dt>
<dd class="col-sm-7 col-md-8 mb-0">
{{ data.description }}
</dd>
</dl>
<!-- LEVEL -->
<dl class="row">
<dt class="col-sm-3 offset-sm-2 offset-md-0">
{{ 'Level' | translate }}:
</dt>
<div *ngIf="data.policy_library_level; then thenBlock else elseBlock"></div>
<ng-template #thenBlock>
<dd class="col-sm-7 col-md-8 mb-0">
{{ 'Library' | translate }}
</dd>
</ng-template>
<ng-template #elseBlock>
<dd class="col-sm-7 col-md-8 mb-0">
{{ 'Organisation' | translate }}
</dd>
</ng-template>
</dl>
</section>
<!-- CIRCULATION SETTINGS -->
<section class="m-2 p-2">
<h3>{{ 'Circulation settings' | translate }}</h3>
<!-- ALLOW CHECKOUT -->
<dl class="row">
<dt class="col-sm-3 offset-sm-2 offset-md-0">
{{ 'Allow checkout' | translate }}:
</dt>
<dd class="col-sm-7 col-md-8 mb-0">
<div *ngIf="data.allow_checkout; then thenCheckoutBlock else elseCheckoutBlock">
</div>
<ng-template #thenCheckoutBlock>
<i class="fa fa-check" style="color:green;" aria-hidden="true"></i>
</ng-template>
<ng-template #elseCheckoutBlock>
<i class="fa fa-times" style="color:red;" aria-hidden="true"></i>
</ng-template>
</dd>
</dl>
<!-- ALLOW REQUESTS -->
<dl class="row">
<dt class="col-sm-3 offset-sm-2 offset-md-0">
{{ 'Allow requests' | translate }}:
</dt>
<dd class="col-sm-7 col-md-8 mb-0">
<div *ngIf="data.allow_requests; then thenRequestBlock else elseRequestBlock"></div>
<ng-template #thenRequestBlock>
<i class="fa fa-check" style="color:green;" aria-hidden="true"></i>
</ng-template>
<ng-template #elseRequestBlock>
<i class="fa fa-times" style="color:red;" aria-hidden="true"></i>
</ng-template>
</dd>
</dl>
<!-- IS DEFAULT -->
<dl class="row">
<dt class="col-sm-3 offset-sm-2 offset-md-0">
{{ 'Is default' | translate }}:
</dt>
<dd class="col-sm-7 col-md-8 mb-0">
<div *ngIf="data.is_default; then thenDefaultBlock else elseDefaultBlock"></div>
<ng-template #thenDefaultBlock>
<i class="fa fa-check" style="color:green;" aria-hidden="true"></i>
</ng-template>
<ng-template #elseDefaultBlock>
<i class="fa fa-times" style="color:red;" aria-hidden="true"></i>
</ng-template>
</dd>
</dl>
<!-- CHECKOUT DURATION -->
<dl class="row" *ngIf="data.renewal_duration!==undefined">
<dt class="col-sm-3 offset-sm-2 offset-md-0">
{{ 'Checkout duration' | translate }}:
</dt>
<dd class="col-sm-7 col-md-8 mb-0">
{{ data.checkout_duration }}
</dd>
</dl>
<!-- NUMBER OF RENEWALS -->
<dl class="row" *ngIf="data.number_renewals!==undefined">
<dt class="col-sm-3 offset-sm-2 offset-md-0">
{{ 'Number of renewals' | translate }}:
</dt>
<dd class="col-sm-7 col-md-8 mb-0">
{{ data.number_renewals }}
</dd>
</dl>
<!-- RENEWAL DURATION -->
<dl class="row" *ngIf="data.renewal_duration!==undefined">
<dt class="col-sm-3 offset-sm-2 offset-md-0">
{{ 'Renewal duration' | translate }}:
</dt>
<dd class="col-sm-7 col-md-8 mb-0">
{{ data.renewal_duration }}
</dd>
</dl>
</section>
<!-- NOTIFICATION AND FEES -->
<section class="m-2 p-2" *ngIf="data.number_of_days_after_due_date != undefined &&
data.number_of_days_before_due_date != undefined && data.reminder_fee_amount != undefined">
<h3>{{ 'Notifications and fees' | translate}}</h3>
<!-- DAYS AFTER DUE DATE -->
<dl class="row" *ngIf="data.number_of_days_after_due_date!==undefined">
<dt class="col-sm-3 offset-sm-2 offset-md-0">
{{ 'Number of days after due date' | translate }}:
</dt>
<dd class="col-sm-7 col-md-8 mb-0">
{{ data.number_of_days_after_due_date }}
</dd>
</dl>
<!-- DAYS BEFORE DUE DATE -->
<dl class="row" *ngIf="data.number_of_days_before_due_date!==undefined">
<dt class="col-sm-3 offset-sm-2 offset-md-0">
{{ 'Number of days before due date' | translate }}:
</dt>
<dd class="col-sm-7 col-md-8 mb-0">
{{ data.number_of_days_before_due_date }}
</dd>
</dl>
<!-- REMINDER FEE AMOUNT -->
<dl class="row" *ngIf="data.reminder_fee_amount!==undefined">
<dt class="col-sm-3 offset-sm-2 offset-md-0">
{{ 'Reminder fee amount' | translate }}:
</dt>
<dd class="col-sm-7 col-md-8 mb-0">
{{ data.reminder_fee_amount }}
</dd>
</dl>
</section>
<!-- APPLICATION -->
<section class="m-2 p-2" *ngIf="record.metadata.settings">
<h3>{{ 'Application' | translate }}</h3>
<div *ngFor="let setting of settings | keyvalue">
<admin-collapse-list patronType="{{ setting.key }}" [itemTypes]="setting.value"></admin-collapse-list>
</div>
</section>
</article>
</ng-container>
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
/*
* RERO ILS UI
* Copyright (C) 2019 RERO
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as published by
* the Free Software Foundation, version 3 of the License.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Observable } from 'rxjs';

@Component({
selector: 'admin-circ-policy-detail-view',
templateUrl: './circ-policy-detail-view.component.html'
})

export class CircPolicyDetailViewComponent implements OnInit, OnDestroy {

/** The observable resolving record data */
record$: Observable<any>;

/** The resource type */
type: string;

/** The record */
record: any;

/** The settings to display */
settings = new Map<string, string[]>();

/** The observer to the record observable */
private recordObs = null;

/** On init hook */
ngOnInit() {
this.recordObs = this.record$.subscribe(record => {
this.record = record;
if (record.metadata.settings) {
record.metadata.settings.forEach(setting => {
if (!this.settings.has(setting.patron_type.pid)) {
this.settings.set(setting.patron_type.pid, [setting.item_type.pid]);
} else {
this.settings.get(setting.patron_type.pid).push(setting.item_type.pid);
}
});
}
});
}


/** On destroy hook */
ngOnDestroy() { this.recordObs.unsubscribe(); }
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
<!--
RERO ILS UI
 Copyright (C) 2019 RERO

 This program is free software: you can redistribute it and/or modify
 it under the terms of the GNU Affero General Public License as published by
 the Free Software Foundation, version 3 of the License.

 This program is distributed in the hope that it will be useful,
 but WITHOUT ANY WARRANTY; without even the implied warranty of
 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
 GNU Affero General Public License for more details.

 You should have received a copy of the GNU Affero General Public License
 along with this program. If not, see <http://www.gnu.org/licenses/>.
-->

<div class="mb-2">
<button type="button"
class="btn" (click)="isCollapsed = !isCollapsed"
[attr.aria-expanded]="!isCollapsed" aria-controls="collapseBasic">
<i [ngClass]="{ 'fa-caret-down':!isCollapsed, 'fa-caret-right': isCollapsed }" class="fa" aria-hidden="true"></i>
{{ patronType | getRecord: 'patron_types' : 'field' : 'name' | async }}
</button>
<hr>
<div id="collapseBasic" [collapse]="isCollapsed" [isAnimated]="true">
<div class="well well-lg card card-block card-header">
<div *ngFor="let item_type_pid of itemTypes">
{{ item_type_pid | getRecord: 'item_types' : 'field' : 'name' | async }}
</div>
</div>
</div>
</div>
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
/*
* RERO ILS UI
* Copyright (C) 2019 RERO
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as published by
* the Free Software Foundation, version 3 of the License.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/

import { Component, OnInit, Input } from '@angular/core';

@Component({
selector: 'admin-collapse-list',
templateUrl: './collapse-list.component.html'
})
export class CollapseListComponent {

/** Patron type */
@Input() patronType: string;

/** Item types */
@Input() itemTypes: string[];

/** Is collapsed */
isCollapsed = true;

}
4 changes: 3 additions & 1 deletion projects/admin/src/app/service/record-routing.service.ts
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ import { DocumentEditorComponent } from '../document-editor/document-editor.comp
import { UserService } from './user.service';
import { LibraryDetailViewComponent } from '../record/detail-view/library-detail-view/library-detail-view.component';
import { RecordPermissionMessageService } from './record-permission-message.service';
import { CircPolicyDetailViewComponent } from '../record/detail-view/circ-policy-detail-view/circ-policy-detail-view.component';

@Injectable({
providedIn: 'root'
Expand Down Expand Up @@ -228,7 +229,8 @@ export class RecordRoutingService {
{
key: 'circ_policies',
label: 'Circulation Policies',
component: CircPoliciesBriefViewComponent
component: CircPoliciesBriefViewComponent,
detailComponent: CircPolicyDetailViewComponent
}
]
}
Expand Down
Loading

0 comments on commit eb5b57b

Please sign in to comment.