mark-damaged-dialog.component.html

<eg-string #successMsg text="Successfully Marked Item Damaged" i18n-text></eg-string>
<eg-string #errorMsg text="Failed To Mark Item Damaged" i18n-text></eg-string>

<ng-template #dialogContent>
  <div class="modal-header">
    <h4 class="modal-title">
      <span i18n>Mark Item Damaged</span>
    </h4>
    <button type="button" class="btn-close btn-close-white" 
      i18n-aria-label aria-label="Close" (click)="close(false)"> </button>
  </div>
  <div class="modal-body">
    <div class="row">
        <div class="col-lg-1" i18n>Barcode:</div>
        <div class="col-lg-11 fw-bold">{{copy.barcode()}}</div>
    </div>
    <div class="row">
      <div class="col-lg-1" i18n>Title:</div>
      <div class="col-lg-11">{{bibSummary.display.title}}</div>
    </div>
    <div class="row">
        <div class="col-lg-1" i18n>Author:</div>
        <div class="col-lg-11">{{bibSummary.display.author}}</div>
    </div>
    <div class="card mt-3" *ngIf="chargeResponse">
      <div class="card-header" i18n>
        Item was previously checked out
      </div>
      <div class="card-body">
        <ul class="list-group list-group-flush">
          <li class="list-group-item" i18n>
            Item was last checked out by patron
            <a href="/eg/staff/circ/patron/{{chargeResponse.circ.usr().id()}}/checkout">
              {{chargeResponse.circ.usr().family_name()}},
              {{chargeResponse.circ.usr().first_given_name()}} 
              ({{chargeResponse.circ.usr().usrname()}})
            </a>.
          </li>
          <li class="list-group-item" i18n>
            Item was due
            {{chargeResponse.circ.due_date() | formatValue:'timestamp'}} 
            and returned 
            {{chargeResponse.circ.checkin_time() | date:'MM/dd/yy H:mm a'}}.
          </li>
          <li class="list-group-item">
            <span i18n>
              Calucated fine amount is 
              <span class="fw-bold text-danger">
                {{chargeResponse.charge | currency}}
              </span>
            </span>
          </li>
          <ng-container *ngIf="amountChangeRequested">
            <li class="list-group-item">
              <div class="row">
                <div class="col-lg-3" i18n>Billing Type</div>
                <div class="col-lg-6">
                  <eg-combobox 
                    placeholder="Billing Type..." i18n-placeholder
                    (onChange)="newBtype = $event.id"
                    [entries]="billingTypes"></eg-combobox>
                </div>
              </div>  
            </li>
            <li class="list-group-item">
              <div class="row">
                <div class="col-lg-3" i18n>Charge Amount</div>
                <div class="col-lg-6">
                  <input class="form-control" type="number" step="0.01" min="0"
                  [(ngModel)]="newCharge"/>
                </div>
              </div>  
            </li>
            <li class="list-group-item">
              <div class="row">
                <div class="col-lg-3" i18n>Note</div>
                <div class="col-lg-6">
                  <textarea class="form-control" rows="3"
                    [(ngModel)]="newNote"></textarea>
                </div>
              </div>  
            </li>
          </ng-container><!-- amount change requested -->
        </ul>
      </div>
    </div>
  </div>
  <div class="modal-footer">
    <ng-container *ngIf="!chargeResponse">
      <button type="button" class="btn btn-normal" 
        (click)="close(false)" i18n>Cancel</button>
      <button type="button" class="btn btn-success" 
        (click)="markDamaged({})" i18n>Mark Damaged</button>
    </ng-container>
    <ng-container *ngIf="chargeResponse">
      <button type="button" class="btn btn-normal" 
        (click)="close(false)" i18n>Cancel</button>
      <button type="button" class="btn btn-info me-2" 
        (click)="amountChangeRequested = true" i18n>Change Amount</button>
      <button type="button" class="btn btn-secondary me-2" 
        (click)="markDamaged({apply_fines:'noapply'})" i18n>No Charge</button>
      <button type="button" class="btn btn-success me-2" 
        (click)="markDamaged({apply_fines:'apply'})" i18n>OK</button>
    </ng-container>
  </div>
</ng-template>