acquisition: displaying more document information

* Adds document brief view component. * Adds new formly field type to display document informations. Co-Authored-by: Lauren-D <[email protected]>
Garfield-fr · Feb 15, 2024 · 9c442e2 · 9c442e2
1 parent b87bc04
commit 9c442e2
Show file tree

Hide file tree

Showing 16 changed files with 422 additions and 177 deletions.
diff --git a/projects/admin/src/app/acquisition/acquisition.module.ts b/projects/admin/src/app/acquisition/acquisition.module.ts
@@ -1,7 +1,7 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2021 RERO
- * Copyright (C) 2021 UCLouvain
+ * Copyright (C) 2021-2023 RERO
+ * Copyright (C) 2021-2023 UCLouvain
  *
  * 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
@@ -45,6 +45,7 @@ import { OrderReceiptViewComponent } from './components/receipt/receipt-form/ord
 import { OrderSummaryComponent } from './components/order/order-summary/order-summary.component';
 import { ReceiptListComponent } from './components/receipt/receipt-list/receipt-list.component';
 import { registerFormlyExtension } from './formly/extension';
+import { FieldDocumentBriefViewTypeComponent } from './formly/type/field-document-brief-view.type';
 import { FieldRefTypeComponent } from './formly/type/field-ref.type';
 import { RepeatTypeComponent } from './formly/type/repeat-section.type';
 import { SelectAccountComponent } from './formly/type/select-account/select-account.component';
@@ -70,6 +71,7 @@ import { FormlyPrimeNGModule } from '@ngx-formly/primeng';
     AccountDetailViewComponent,
     BudgetsBriefViewComponent,
     BudgetDetailViewComponent,
+    FieldDocumentBriefViewTypeComponent,
     FieldRefTypeComponent,
     InputNoLabelWrapperComponent,
     NegativeAmountPipe,
@@ -103,6 +105,7 @@ import { FormlyPrimeNGModule } from '@ngx-formly/primeng';
     FormlyModule.forChild({
       types: [
         { name: 'repeat', component: RepeatTypeComponent },
+        { name: 'field-document-brief-view', component: FieldDocumentBriefViewTypeComponent },
         { name: 'field-ref', component: FieldRefTypeComponent },
         { name: 'select-account', component: SelectAccountComponent }
       ],

diff --git a/projects/admin/src/app/acquisition/acquisition.scss b/projects/admin/src/app/acquisition/acquisition.scss
@@ -1,7 +1,7 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2021 RERO
- * Copyright (C) 2021 UCLouvain
+ * Copyright (C) 2021-2023 RERO
+ * Copyright (C) 2021-2023 UCLouvain
  *
  * 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
@@ -48,6 +48,23 @@
   }
 }
 
+// receipt ===================================================================
+//    Use these classes to manage receipt resources
+// ===========================================================================
+.receipt {
+  .account-number {
+    font-size: $small-font-size;
+    color: $secondary;
+    font-weight: bold;
+    &:before {
+      content: '[';
+    }
+    &:after {
+      content: ']';
+    }
+  }
+}
+
 // REMOVE GUTTER ==============================================================
 //   Some DOM element has gutter to to bootstrap grid system. Using the
 //   following classes we can remove this gutters.

diff --git a/...c/app/acquisition/components/order/order-detail-view/order-line/order-line.component.html b/...c/app/acquisition/components/order/order-detail-view/order-line/order-line.component.html
@@ -1,7 +1,7 @@
 <!--
   RERO ILS UI
   Copyright (C) 2021-2024 RERO
-  Copyright (C) 2021 UCLouvain
+  Copyright (C) 2021-2023 UCLouvain
 
   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
@@ -16,33 +16,31 @@
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 <div class="row order-line">
-  @defer (when orderLine && account) {
+  @if (orderLine && account) {
     <div class="col-9 d-flex" [ngClass]="{'order-cancelled': orderLine.status === orderLineStatus.CANCELLED}">
       <button type="button" class="btn-show-more"
               [ngClass]="{'btn-expanded': !isCollapsed, 'btn-collapsed': isCollapsed}"
               (click)="isCollapsed = !isCollapsed"
               [attr.aria-expanded]="!isCollapsed" aria-controls="collapse">
       </button>
-      <div class="d-flex align-items-start flex-column">
-        <div class="d-flex">
+      <div class="d-flex align-items-start flex-column w-100">
+        <div class="d-flex w-100">
           <i class="fa status"
               title="{{ orderLine.status | translate }}"
               [ngClass]="{
-                'fa-envelope-open-o': orderLine.status === orderLineStatus.APPROVED,
-                'fa-envelope-o': orderLine.status === orderLineStatus.ORDERED,
-                'text-muted': orderLine.status === orderLineStatus.APPROVED || orderLine.status === orderLineStatus.ORDERED,
-                'fa-sign-in': orderLine.status === orderLineStatus.RECEIVED || orderLine.status === orderLineStatus.PARTIALLY_RECEIVED,
-                'text-success': orderLine.status === orderLineStatus.RECEIVED,
-                'text-warning': orderLine.status === orderLineStatus.PARTIALLY_RECEIVED,
-                'fa-window-close-o text-danger': orderLine.status === orderLineStatus.CANCELLED
-              }"></i>
-          @if (orderLine.document.pid | getRecord: 'documents' | async; as document) {
-            @if ($any(document).metadata.title | mainTitle; as title) {
-              <a [routerLink]="['/records', 'documents', 'detail', $any(document).metadata.pid]">
-                {{ title | truncateText }}
-              </a>
+            'fa-envelope-open-o': orderLine.status === orderLineStatus.APPROVED,
+            'fa-envelope-o': orderLine.status === orderLineStatus.ORDERED,
+            'text-muted': orderLine.status === orderLineStatus.APPROVED || orderLine.status === orderLineStatus.ORDERED,
+            'fa-sign-in': orderLine.status === orderLineStatus.RECEIVED || orderLine.status === orderLineStatus.PARTIALLY_RECEIVED,
+            'text-success': orderLine.status === orderLineStatus.RECEIVED,
+            'text-warning': orderLine.status === orderLineStatus.PARTIALLY_RECEIVED,
+            'fa-window-close-o text-danger': orderLine.status === orderLineStatus.CANCELLED
+          }"></i>
+          <div class="d-flex flex-grow-1 mb-1">
+            @if (orderLine.document.pid | getRecord: 'documents' | async; as document) {
+              <shared-document-brief-view [record]="$any(document).metadata"></shared-document-brief-view>
             }
-          }
+          </div>
           @if (orderLine.notes.length > 0 && isCollapsed) {
             <span class="bullet-notes">
               @for (note of orderLine.notes; track note) {
@@ -51,9 +49,7 @@
             </span>
           }
         </div>
-        <div class="account-number order-line-content" [hidden]="!isCollapsed">
-          {{ account.metadata.number }}
-        </div>
+        <div class="account-number order-line-content" [hidden]="!isCollapsed">{{ account.metadata.number }}</div>
         <div class="order-line-content mt-2" [hidden]="isCollapsed">
           <dl class="row ml-0">
             <dt class="col-3 label-title" translate>Account</dt>
@@ -124,7 +120,7 @@
         &nbsp;
       }
     </div>
-  } @placeholder {
+  } @else {
     <i class="fa fa-spin fa-spinner py-2"></i>
   }
 </div>
diff --git a/...app/acquisition/components/receipt/receipt-detail-view/receipt-detail-view.component.html b/...app/acquisition/components/receipt/receipt-detail-view/receipt-detail-view.component.html
@@ -1,7 +1,7 @@
 <!--
   RERO ILS UI
   Copyright (C) 2021-2024 RERO
-  Copyright (C) 2021 UCLouvain
+  Copyright (C) 2021-2023 UCLouvain
 
   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
@@ -15,7 +15,7 @@
   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/>.
 -->
-@if (receipt && receipt.pid && permissions) {
+@if (receipt?.pid && permissions) {
   <div class="container">
     <h1 class="mb-3">{{ receipt.reference }}</h1>
     @for (note of receipt.notes; track note) {
@@ -33,19 +33,21 @@ <h1 class="mb-3">{{ receipt.reference }}</h1>
         @for (line of receiptLines; track line) {
           <div class="container row line no-gutters">
             @if (line && permissions) {
-              <div class="col-9">
-                <div class="d-flex">
-                  <span class="quantity fixed-width">{{ line.quantity }}</span>
-                  <a [routerLink]="['/records', 'documents', 'detail', line.document.pid]" target="acq-detail">
-                    {{ line.document.title_text }}
-                  </a>
-                  <span class="ml-auto mr-2 reception_date">{{ line.receipt_date | dateTranslate: 'shortDate' }}</span>
-                </div>
-                @if (line.document.identifiers) {
-                  <div class="metadata left-offset">
-                    ISBN: {{ line.document.identifiers.join(', ') }}
+              <div class="col-9 d-flex">
+                <span class="quantity fixed-width">{{ line.quantity }}</span>
+                <div class="d-flex align-items-start flex-column w-100">
+                  <div class="d-flex w-100">
+                    <div class="d-flex flex-grow-1 mb-1 mr-1">
+                      @if (line.document.pid | getRecord: 'documents' | async; as document) {
+                        <shared-document-brief-view [record]="$any(document).metadata"></shared-document-brief-view>
+                      }
+                    </div>
+                    <span class="ml-auto mr-2 reception_date">{{ line.receipt_date | dateTranslate: 'shortDate' }}</span>
                   </div>
-                }
+                  @if ($any(line).acq_account.pid | getRecord: 'acq_accounts' | async; as account) {
+                    <span class="account-number">{{ $any(account).metadata.number }}</span>
+                  }
+                </div>
                 @for (note of line.notes; track note) {
                   <div class="left-offset row">
                     <span class="col-3 p-0"><span class="badge badge-{{ note | noteBadgeColor }}">{{ note.type | translate }}</span></span>
@@ -98,7 +100,7 @@ <h1 class="mb-3">{{ receipt.reference }}</h1>
               <div class="col-9 d-flex">
                 <i class="fa fa-long-arrow-right fixed-width"></i>
                 <label>{{ adjustment.label }}</label>
-                <span class="ml-auto metadata pr-2">
+                <span class="ml-auto account-number pr-2">
                   {{ adjustment.acq_account.pid | getRecord: 'acq_accounts': 'field': 'number' | async }}
                 </span>
               </div>
@@ -109,7 +111,6 @@ <h1 class="mb-3">{{ receipt.reference }}</h1>
           }
         </div>
       }
-
       <!-- TOTAL -->
       <div class="card-header total-amount row">
         <div class="container row line no-gutters">

diff --git a/...app/acquisition/components/receipt/receipt-detail-view/receipt-detail-view.component.scss b/...app/acquisition/components/receipt/receipt-detail-view/receipt-detail-view.component.scss
@@ -1,7 +1,7 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2021 RERO
- * Copyright (C) 2021 UCLouvain
+ * Copyright (C) 2021-2023 RERO
+ * Copyright (C) 2021-2023 UCLouvain
  *
  * 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
@@ -73,17 +73,6 @@ $line-shift: map-get($spacers, 5);
     .left-offset {
       margin-left: $line-shift;
     }
-    .metadata {
-      font-weight: bold;
-      color: $secondary;
-      font-size: $small-font-size;
-      &::before {
-        content:'[';
-      }
-      &::after {
-        content: ']';
-      }
-    }
     .note-content {
       border-left: 2px solid $border-color;
       margin-top: map-get($spacers, 1);;

diff --git a/...c/app/acquisition/components/receipt/receipt-detail-view/receipt-detail-view.component.ts b/...c/app/acquisition/components/receipt/receipt-detail-view/receipt-detail-view.component.ts
@@ -27,7 +27,7 @@ import { IAcqReceipt, IAcqReceiptLine } from '../../../classes/receipt';
 @Component({
   selector: 'admin-receipt-detail-view',
   templateUrl: './receipt-detail-view.component.html',
-  styleUrls: ['./receipt-detail-view.component.scss']
+  styleUrls: ['../../../acquisition.scss', './receipt-detail-view.component.scss']
 })
 export class ReceiptDetailViewComponent implements OnInit, OnDestroy, DetailRecord {
 

diff --git a/projects/admin/src/app/acquisition/components/receipt/receipt-form/order-receipt-form.ts b/projects/admin/src/app/acquisition/components/receipt/receipt-form/order-receipt-form.ts
@@ -233,19 +233,12 @@ export class OrderReceiptForm {
             },
             {
               key: 'document',
-              type: 'field-ref',
+              type: 'field-document-brief-view',
               className: 'col-5',
               wrappers: ['input-no-label'],
               props: {
                 headerClassName: 'col-5 font-weight-bold mb-2',
                 label: _('Document'),
-                resource: 'documents',
-                resourceKey: 'document',
-                resourceField: 'title.0._text',
-                resourceSelect: {
-                  field: 'type',
-                  value: 'bf:Title'
-                }
               }
             },
             {

diff --git a/...min/src/app/acquisition/components/receipt/receipt-form/order-receipt-view.component.html b/...min/src/app/acquisition/components/receipt/receipt-form/order-receipt-view.component.html
@@ -16,7 +16,6 @@
 -->
 @if (loaded) {
   <form [formGroup]="form" (ngSubmit)="onSubmit(model)" class="container">
-
       <!-- FORM HEADER :: title and action buttons -->
       <section class="d-flex mb-3" >
         <h1 translate>Receipt of an order</h1>