Open-ILS/src/eg2/src/app/staff/share/patron/summary.component.html

   1
   2 <div class="patron-summary-container">
   3
   4   <div class="row d-flex patron-status-color rounded {{patronStatusColor()}}">
   5     <div class="flex-1 pt-1 {{patronStatusColor()}}">
   6       <h4 class="fw-bold" i18n>
   7         {{patronService.namePart(p(), 'family_name')}},
   8         {{patronService.namePart(p(), 'first_given_name')}}
   9         {{patronService.namePart(p(), 'second_given_name')}}
  10       </h4>
  11     </div>
  12   </div>
  13
  14   <div class="row mb-1 alert alert-danger p-0"
  15     *ngIf="summary.alerts.accountExpiresSoon">
  16     <div class="col-lg-12" i18n>
  17       Patron account will expire soon.  Please renew.
  18     </div>
  19   </div>
  20
  21   <div class="row mb-1 alert alert-warning p-0" *ngIf="p().juvenile() === 't'">
  22     <div class="col-lg-12" i18n>
  23       Juvenile Account
  24     </div>
  25   </div>
  26
  27   <div class="row mb-1 alert alert-anger p-0"
  28     *ngFor="let pen of summary.alerts.alertPenalties">
  29     <div class="col-lg-9"
  30       title="{{pen.standing_penalty().name()}}">
  31       {{penaltyLabel(pen)}}
  32     </div>
  33     <div class="col-lg-3">{{pen.set_date() | date:'shortDate'}}</div>
  34   </div>
  35
  36   <div class="row mb-1">
  37     <div class="col-lg-5" i18n>Profile</div>
  38     <div class="col-lg-7">{{p().profile().name()}}</div>
  39   </div>
  40   <div class="row mb-1">
  41     <div class="col-lg-5" i18n>Home Library</div>
  42     <div class="col-lg-7">{{orgSn(p().home_ou())}}</div>
  43   </div>
  44   <div class="row mb-1">
  45     <div class="col-lg-5" i18n>Net Access</div>
  46     <div class="col-lg-7">{{p().net_access_level().name()}}</div>
  47   </div>
  48   <div class="row mb-1">
  49     <div class="col-lg-5" i18n>
  50       <button type="button" class="btn btn-link" (click)="showDob = !showDob">Date of Birth</button>
  51     </div>
  52     <div class="col-lg-7">
  53       <ng-container *ngIf="showDob">{{p().dob() | date}}</ng-container>
  54       <ng-container *ngIf="!showDob" i18n>&lt;Hidden&gt;</ng-container>
  55     </div>
  56   </div>
  57   <div class="row mb-1">
  58     <div class="col-lg-5" i18n>Parent/Guardian</div>
  59     <div class="col-lg-7">{{p().guardian()}}</div>
  60   </div>
  61   <div class="row mb-1">
  62     <div class="col-lg-5" i18n>Last Activity</div>
  63     <div class="col-lg-7">
  64       <ng-container *ngIf="p().usr_activity()[0]">
  65         {{p().usr_activity()[0].event_time() | date:'shortDate'}}
  66       </ng-container>
  67     </div>
  68   </div>
  69   <div class="row mb-1">
  70     <div class="col-lg-5" i18n>Last Updated</div>
  71     <div class="col-lg-7">{{p().last_update_time() | date:'shortDate'}}</div>
  72   </div>
  73   <div class="row mb-1">
  74     <div class="col-lg-5" i18n>Create Date</div>
  75     <div class="col-lg-7">{{p().create_date() | date:'shortDate'}}</div>
  76   </div>
  77   <div class="row" [ngClass]="{'alert alert-danger p-0': summary.alerts.accountExpired}">
  78     <div class="col-lg-5" i18n>Expire Date</div>
  79     <div class="col-lg-7">{{p().expire_date() | date:'shortDate'}}</div>
  80   </div>
  81
  82   <hr class="m-1"/>
  83
  84   <ng-container *ngIf="summary">
  85
  86     <div class="row mb-1"
  87       [ngClass]="{'alert alert-danger p-0': summary.stats.fines.balance_owed > 0}">
  88       <div class="col-lg-5" i18n>Fines Owed</div>
  89       <div class="col-lg-7">{{summary.stats.fines.balance_owed | currency}}</div>
  90     </div>
  91
  92     <ng-container
  93       *ngIf="summary.stats.fines.group_balance_owed > summary.stats.fines.balance_owed">
  94       <div class="row mb-1 alert alert-danger p-0">
  95         <div class="col-lg-5" i18n>Group Fines</div>
  96         <div class="col-lg-7">{{summary.stats.fines.group_balance_owed | currency}}</div>
  97       </div>
  98     </ng-container>
  99
 100     <div class="row mb-1">
 101       <div class="col-lg-5" i18n>Items Out</div>
 102       <div class="col-lg-7">{{summary.stats.checkouts.total_out}}</div>
 103     </div>
 104     <div class="row mb-1"
 105       [ngClass]="{'alert alert-danger p-0': summary.stats.checkouts.overdue > 0}">
 106       <div class="col-lg-5" i18n>Overdue</div>
 107       <div class="col-lg-7">{{summary.stats.checkouts.overdue}}</div>
 108     </div>
 109     <div class="row mb-1"
 110       [ngClass]="{'alert alert-danger p-0': summary.stats.checkouts.long_overdue > 0}">
 111       <div class="col-lg-5" i18n>Long Overdue</div>
 112       <div class="col-lg-7">{{summary.stats.checkouts.long_overdue}}</div>
 113     </div>
 114     <div class="row mb-1"
 115       [ngClass]="{'alert alert-danger p-0': summary.stats.checkouts.claims_returned > 0}">
 116       <div class="col-lg-5" i18n>Claimed Returned</div>
 117       <div class="col-lg-7">{{summary.stats.checkouts.claims_returned}}</div>
 118     </div>
 119     <div class="row mb-1"
 120       [ngClass]="{'alert alert-danger p-0': summary.stats.checkouts.lost > 0}">
 121       <div class="col-lg-5" i18n>Lost</div>
 122       <div class="col-lg-7">{{summary.stats.checkouts.lost}}</div>
 123     </div>
 124     <div class="row mb-1">
 125       <div class="col-lg-5" i18n>Non-Cataloged</div>
 126       <div class="col-lg-7">{{summary.stats.checkouts.noncat}}</div>
 127     </div>
 128     <div class="row">
 129       <div class="col-lg-5" i18n>Holds</div>
 130       <div class="col-lg-7">
 131         {{summary.stats.holds.ready}} / {{summary.stats.holds.total}}
 132       </div>
 133     </div>
 134
 135     <hr class="m-1"/>
 136   </ng-container>
 137
 138   <div class="row mb-1">
 139     <div class="col-lg-5" i18n>Card</div>
 140     <div class="col-lg-7">
 141       {{p().card() ? p().card().barcode() : ''}}
 142     </div>
 143   </div>
 144   <div class="row mb-1">
 145     <div class="col-lg-5" i18n>Username</div>
 146     <div class="col-lg-7">{{p().usrname()}}</div>
 147   </div>
 148   <div class="row mb-1">
 149     <div class="col-lg-5" i18n>Day Phone</div>
 150     <div class="col-lg-7">{{p().day_phone()}}</div>
 151   </div>
 152   <div class="row mb-1">
 153     <div class="col-lg-5" i18n>Evening Phone</div>
 154     <div class="col-lg-7">{{p().evening_phone()}}</div>
 155   </div>
 156   <div class="row mb-1">
 157     <div class="col-lg-5" i18n>Other Phone</div>
 158     <div class="col-lg-7">{{p().other_phone()}}</div>
 159   </div>
 160   <div class="row mb-1">
 161     <div class="col-lg-5" i18n>ID1 </div>
 162     <div class="col-lg-7">{{p().ident_value()}}</div>
 163   </div>
 164   <div class="row mb-1">
 165     <div class="col-lg-5" i18n>ID2</div>
 166     <div class="col-lg-7">{{p().ident_value2()}}</div>
 167   </div>
 168   <div class="row mb-1">
 169     <div class="col-lg-5" i18n>Email</div>
 170     <div class="col-lg-7">
 171       <a *ngIf="p().email()" href="mailto:{{p().email()}}">{{p().email()}}</a>
 172     </div>
 173   </div>
 174   <div class="row mb-1" *ngIf="p().name_keywords()">
 175     <div class="col-lg-5" i18n>Name Keywords</div>
 176     <div class="col-lg-7">{{p().name_keywords()}}</div>
 177   </div>
 178
 179   <ng-container *ngIf="p().waiver_entries().length">
 180     <hr class="m-1"/>
 181     <div class="row mb-1 alert alert-info p-0">
 182       <div class="col-lg-12" i18n>Allow others to use my account</div>
 183     </div>
 184     <div class="row mb-1" *ngFor="let waiver of p().waiver_entries()">
 185       <div class="col-lg-5" i18n>{{waiver.name()}}</div>
 186       <div class="col-lg-7">
 187         <ul>
 188           <li *ngIf="waiver.place_holds() === 't'" i18n>Place holds</li>
 189           <li *ngIf="waiver.pickup_holds() === 't'" i18n>Pick up holds</li>
 190           <li *ngIf="waiver.view_history() === 't'" i18n>View borrowing history</li>
 191           <li *ngIf="waiver.checkout_items() === 't'" i18n>Check out items</li>
 192         </ul>
 193       </div>
 194     </div>
 195   </ng-container>
 196
 197   <hr class="m-1"/>
 198
 199   <div class="row mb-1" *ngFor="let addr of p().addresses()">
 200     <div class="col-lg-12">
 201       <fieldset>
 202         <legend class="d-flex" [ngClass]="{'alert alert-danger p-0': addr.valid() === 'f'}">
 203           <div class="flex-1">{{addr.address_type()}}</div>
 204           <div>
 205             <button type="button" class="btn btn-link me-2"
 206               (click)="copyAddress(addr)" i18n>copy</button>
 207             <button type="button" class="btn btn-link me-2"
 208               (click)="printAddress(addr)" i18n>print</button>
 209           </div>
 210         </legend>
 211         <div i18n>{{addr.street1()}} {{addr.street2()}}</div>
 212         <div i18n>{{addr.city()}}, {{addr.state()}} {{addr.post_code()}}</div>
 213       </fieldset>
 214
 215       <!-- hidden textare used only for copying the text -->
 216       <textarea id="patron-address-copy-{{addr.id()}}" rows="2"
 217         style="visibility:hidden">
 218 {{p().first_given_name()}} {{p().second_given_name()}} {{p().family_name()}}
 219 {{addr.street1()}} {{addr.street2()}}
 220 {{addr.city()}}, {{addr.state()}} {{addr.post_code()}}</textarea>
 221     </div>
 222   </div>
 223 </div>