From 3c7137978133016d05b2f2963c5caa6509940f96 Mon Sep 17 00:00:00 2001
From: Renaud Michotte <renaud.michotte@gmail.com>
Date: Fri, 23 Oct 2020 16:30:06 +0200
Subject: [PATCH] patron_types: display restrictions on detailed view

Adapts the patron type detailed view to display the circulation
restrictions.

Authored-by: Renaud Michotte <renaud.michotte@gmail.com>
---
 .../patron-types-detail-view.component.html   | 65 +++++++++++++++++++
 projects/admin/src/app/scss/styles.scss       |  9 +++
 2 files changed, 74 insertions(+)

diff --git a/projects/admin/src/app/record/detail-view/patron-types-detail-view/patron-types-detail-view.component.html b/projects/admin/src/app/record/detail-view/patron-types-detail-view/patron-types-detail-view.component.html
index b62ea36cb..4b706b114 100644
--- a/projects/admin/src/app/record/detail-view/patron-types-detail-view/patron-types-detail-view.component.html
+++ b/projects/admin/src/app/record/detail-view/patron-types-detail-view/patron-types-detail-view.component.html
@@ -37,5 +37,70 @@ <h1 class="mb-3">{{ record.metadata.name }}</h1>
       <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>Subscription amount</dt>
       <dd class="col-sm-7 col-md-8 mb-0">{{ record.metadata.subscription_amount | currency: organisation.default_currency }}</dd>
     </ng-container>
+
+    <!-- Limits -->
+    <section *ngIf="record.metadata.limits" class="container">
+      <h2 class="mt-4" translate>Limits</h2>
+      <div class="card">
+        <!-- Checkout limits -->
+        <div class="card-header">
+          <i class="fa" [ngClass]="{
+            'fa-circle text-success': record.metadata.limits.checkout_limits,
+            'fa-circle-thin': !record.metadata.limits.checkout_limits
+          }"></i>
+          <span class="pl-3" translate>Limit by checkouts</span>
+        </div>
+        <div class="card-body" *ngIf="record.metadata.limits.checkout_limits">
+          <dl class="row m-0">
+            <dt class="offset-1 col-lg-2 col-sm-4 label-title" translate>General limit</dt>
+            <dd class="col">{{ record.metadata.limits.checkout_limits.general_limit }}</dd>
+            <dd class="w-100 m-0"></dd>
+            <ng-container *ngIf="record.metadata.limits.checkout_limits.library_limit">
+              <dt class="offset-1 col-lg-2 col-sm-4 label-title" translate>Library limit</dt>
+              <dd class="col">{{ record.metadata.limits.checkout_limits.library_limit }}</dd>
+              <dd class="w-100 m-0"></dd>
+            </ng-container>
+            <ng-container *ngIf="record.metadata.limits.checkout_limits.library_exceptions">
+              <dt class="offset-1 col-11 label-title" translate>Exceptions</dt>
+              <ng-container *ngFor="let exception of record.metadata.limits.checkout_limits.library_exceptions">
+                <dd class="offset-2 col-lg-6 col-sm-9">
+                  <i class="fa fa-university pr-2"></i>
+                  {{ exception.library.pid | getRecord: 'libraries' : 'field' : 'name' | async }}
+                </dd>
+                <dd class="col-lg-4 col-sm-1">{{ exception.value }}</dd>
+              </ng-container>
+            </ng-container>
+          </dl>
+        </div>
+        <!-- Fee amount limits -->
+        <div class="card-header">
+          <i class="fa" [ngClass]="{
+            'fa-circle text-success': record.metadata.limits.fee_amount_limits,
+            'fa-circle-thin': !record.metadata.limits.fee_amount_limits
+          }"></i>
+          <span class="pl-3" translate>Limit by fee amount</span>
+        </div>
+        <div class="card-body" *ngIf="record.metadata.limits.fee_amount_limits">
+          <dl class="row m-0">
+            <dt class="offset-1 col-lg-2 col-sm-4 label-title" translate>Limit</dt>
+            <dd class="col">{{ record.metadata.limits.fee_amount_limits.default_value | currency: organisation.default_currency }}</dd>
+          </dl>
+        </div>
+        <!-- overdue items restrictions -->
+        <div class="card-header">
+          <i class="fa" [ngClass]="{
+            'fa-circle text-success': record.metadata.limits.overdue_items_limits,
+            'fa-circle-thin': !record.metadata.limits.overdue_items_limits
+          }"></i>
+          <span class="pl-3" translate>Limit by overdue items</span>
+        </div>
+        <div class="card-body" *ngIf="record.metadata.limits.overdue_items_limits">
+          <dl class="row m-0">
+            <dt class="offset-1 col-lg-2 col-sm-4 label-title" translate>Limit</dt>
+            <dd class="col">{{ record.metadata.limits.overdue_items_limits.default_value }}</dd>
+          </dl>
+        </div>
+      </div>
+    </section>
   </dl>
 </ng-container>
diff --git a/projects/admin/src/app/scss/styles.scss b/projects/admin/src/app/scss/styles.scss
index 361161d08..2f48dfa8f 100644
--- a/projects/admin/src/app/scss/styles.scss
+++ b/projects/admin/src/app/scss/styles.scss
@@ -200,6 +200,15 @@ json-schema-form {
   }
 }
 
+.card {
+  .card-header:not(:first-child) {
+    border-top: $card-border-width solid $card-border-color;
+  }
+  .card-header + .card-header {
+    border-top: none;
+  }
+}
+
 // Adapt detailed views to not use screen width
 .main-content{
   @extend .container;