circulation: past participle used when action done

Actions realised on item into checkin/checkout component are now display in the past participle. This commit also updates button according UX chart and the border around an operated item if special actions should be done (fees|transit) * Closes rero/rero-ils#890 Co-authored-by: Renaud Michotte <[email protected]>
zannkukai · Apr 30, 2020 · 100dbb3 · 100dbb3
1 parent 3c58607
commit 100dbb3
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 26 deletions.
diff --git a/projects/admin/src/app/circulation/item/item.component.html b/projects/admin/src/app/circulation/item/item.component.html
@@ -15,7 +15,7 @@
    along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
-<div [ngClass]="{"border-danger": item.actionDone === "checkin" && (item.status === "in_transit" || item.pending_loans || totalAmountOfFee > 0),
+<div [ngClass]="{"callout callout-warning": item.actionDone === itemAction.checkin && (item.status === "in_transit" || item.pending_loans || totalAmountOfFee > 0),
   'text-secondary': item.status !== 'on_loan'}"
   class="row p-2 mb-1 border rounded align-middle"
   *ngIf="item">
@@ -69,17 +69,17 @@
   <!-- ACTION DONE -->
   <div class="col-lg-2">
     <ng-container *ngIf="item.actionDone" [ngSwitch]="item.actionDone">
-      <ng-container *ngSwitchCase="checkin">
+      <ng-container *ngSwitchCase="itemAction.checkin">
         <i class="fa fa-arrow-circle-o-down text-success align-baseline" aria-hidden="true"></i>
-        <span class="align-baseline ml-1">{{ item.actionDone | translate }}</span>
+        <span class="align-baseline ml-1" translate>checked in</span>
       </ng-container>
-      <ng-container *ngSwitchCase="checkout">
+      <ng-container *ngSwitchCase="itemAction.checkout">
         <i class="fa fa-arrow-circle-o-right text-success align-baseline" aria-hidden="true"></i>
-        <span class="align-baseline ml-1">{{ item.actionDone | translate }}</span>
+        <span class="align-baseline ml-1" translate>checked out</span>
       </ng-container>
-      <ng-container *ngSwitchCase="extendLoan">
+      <ng-container *ngSwitchCase="itemAction.extend_loan">
         <i class="fa fa-refresh text-success align-baseline" aria-hidden="true"></i>
-        <span class="align-baseline ml-1" translate>renew</span>
+        <span class="align-baseline ml-1" translate>renewed</span>
       </ng-container>
       <ng-container *ngSwitchDefault>
         <span class="align-baseline">{{ item.actionDone | translate }}</span>

diff --git a/projects/admin/src/app/circulation/item/item.component.ts b/projects/admin/src/app/circulation/item/item.component.ts
@@ -48,14 +48,8 @@ export class ItemComponent implements OnInit {
   /** Notifications related to the current loan */
   notifications$: Observable<any>;
 
-  /** Extend loan item action */
-  extendLoan = ItemAction.extend_loan;
-
-  /** Checkin item action */
-  checkin = ItemAction.checkin;
-
-  /** Checkout item action */
-  checkout = ItemAction.checkout;
+  /** ItemAction reference */
+  itemAction = ItemAction;
 
   /**
    * Constructor

diff --git a/projects/admin/src/app/circulation/items-list/items-list.component.html b/projects/admin/src/app/circulation/items-list/items-list.component.html
@@ -39,27 +39,32 @@
       </div>
     </div>
   </div>
-  <!-- CHECKED OUT ITEMS -->
+  <!-- CHECKED OUT ITEMS ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  -->
   <div class="row align-items-start" *ngFor="let item of checkedOutItems">
     <!-- CONTENT -->
     <div class="col mr-1">
       <admin-item [patron]="patron" [item]="item">
       </admin-item>
     </div>
+    <!-- ACTIONS -->
     <div *ngIf="patron" class="col-md-2 text-left pl-0 mb-2">
-      <!-- EXTEND LOAN -->
-      <button id="button-basic" class="btn btn-secondary mr-1 d-md-block" type="button"
-      [disabled]="!item.actions.includes(extendLoan)" (click)="extendLoanClick($event, item)" translate>
-      Renew
+      <!-- extend loan action -->
+      <button id="button-basic" type="button"
+              class="btn btn-outline-secondary mr-1 d-md-block"
+              [disabled]="!item.actions.includes(extendLoan)"
+              (click)="extendLoanClick($event, item)" translate>
+        Renew
       </button>
     </div>
   </div>
-  <!-- CHECKED IN ITEMS  : RED BORDER FOR TRANSIT, REQUEST OR FEE | GREYED BY DEFAULT-->
+  <!-- CHECKED IN ITEMS ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
+  <!--   Callout border for [TRANSIT|REQUEST|FEE] -->
   <div class="row align-items-start" *ngFor="let item of checkedInItems">
     <div class="col mr-1">
-      <admin-item [patron]="patron" [item]="item" (hasFeesEmitter)="hasFees($event)">
-      </admin-item>
+      <admin-item [patron]="patron" [item]="item" (hasFeesEmitter)="hasFees($event)"></admin-item>
+    </div>
+    <div *ngIf="patron" class="col-md-2 pl-0 mb-2">
+      <!-- No actions -->
     </div>
-    <div *ngIf="patron" class="col-md-2 pl-0 mb-2">&nbsp;</div>
   </div>
 </div>
diff --git a/projects/admin/src/app/scss/styles.scss b/projects/admin/src/app/scss/styles.scss
@@ -98,7 +98,7 @@ json-schema-form {
 // source: https://codepen.io/superjaberwocky/pen/AXdEWj
 .callout {
   border: 1px solid #eee;
-  border-left-width: 5px;
+  border-left-width: 5px !important;
   border-radius: 3px;
   h4 {
     margin-top: 0;
@@ -116,7 +116,7 @@ json-schema-form {
 }
 @each $name,$color in (default,#777),(primary,$primary),(success,$success),(danger,$danger),(warning,$warning),(info,$info), (dark,$dark) {
   .callout-#{$name} {
-    border-left-color: $color;
+    border-color: $color !important;
     h4 {
       color: $color;
     }