From 4f893d4fe8a6720e00984692eee31dda55559e71 Mon Sep 17 00:00:00 2001
From: Stephanie Leary <stephanie.leary@equinoxoli.org>
Date: Wed, 17 May 2023 18:46:31 +0000
Subject: [PATCH] LP1984007 WIP Acq warning/stop percentage styles

Combobox templates for funds dropdowns.

Signed-off-by: Stephanie Leary <stephanie.leary@equinoxoli.org>
---
 .../app/share/combobox/combobox-entry.component.ts |  3 +-
 .../src/app/share/combobox/combobox.component.html |  6 ++--
 .../src/app/share/combobox/combobox.component.ts   |  4 +--
 .../staff/acq/lineitem/copy-attrs.component.html   |  4 +--
 .../src/app/staff/acq/po/charges.component.html    |  9 +++---
 .../eg2/src/app/staff/acq/po/charges.component.ts  |  3 +-
 .../eg2/src/app/staff/acq/po/summary.component.css | 37 ++++++++++++++++++++++
 .../src/app/staff/acq/po/summary.component.html    |  4 +--
 8 files changed, 54 insertions(+), 16 deletions(-)

diff --git a/Open-ILS/src/eg2/src/app/share/combobox/combobox-entry.component.ts b/Open-ILS/src/eg2/src/app/share/combobox/combobox-entry.component.ts
index 26015b7b60..3c4499b29e 100644
--- a/Open-ILS/src/eg2/src/app/share/combobox/combobox-entry.component.ts
+++ b/Open-ILS/src/eg2/src/app/share/combobox/combobox-entry.component.ts
@@ -10,6 +10,7 @@ export class ComboboxEntryComponent implements OnInit {
     @Input() entryId: any;
     @Input() entryLabel: string;
     @Input() selected: boolean;
+    @Input() classNames?: string[];
 
     constructor(@Host() private combobox: ComboboxComponent) {}
 
@@ -18,7 +19,7 @@ export class ComboboxEntryComponent implements OnInit {
             this.combobox.startId = this.entryId;
         }
         this.combobox.addEntry(
-            {id: this.entryId, label: this.entryLabel});
+            {id: this.entryId, label: this.entryLabel, classNames: this.classNames});
     }
 }
 
diff --git a/Open-ILS/src/eg2/src/app/share/combobox/combobox.component.html b/Open-ILS/src/eg2/src/app/share/combobox/combobox.component.html
index f93c97777f..c15e26e893 100644
--- a/Open-ILS/src/eg2/src/app/share/combobox/combobox.component.html
+++ b/Open-ILS/src/eg2/src/app/share/combobox/combobox.component.html
@@ -1,13 +1,13 @@
 
 <ng-template #defaultDisplayTemplate let-r="result">
-  <span id="{{domId}}-{{r.id}}" [ngClass]="classNames.join(' ')">{{r.label}}</span>
+  <span id="{{domId}}-{{r.id}}" [ngClass]="classNames">{{r.label}}</span>
 </ng-template>
 
 <ng-template #acqfTemplate egIdlClass="acqf" let-r="result">
-  <span id="{{domId}}-{{r.id}}" [ngClass]="classNames.join(' ')">{{r.fm.code()}} ({{r.fm.year()}}) ({{getOrgShortname(r.fm.org())}})</span>
+  <span id="{{domId}}-{{r.id}}" [ngClass]="classNames">{{r.fm.code()}} ({{r.fm.year()}}) ({{getOrgShortname(r.fm.org())}})</span>
 </ng-template>
 <ng-template #acplTemplate egIdlClass="acpl" let-r="result">
-  <span id="{{domId}}-{{r.id}}" [ngClass]="classNames.join(' ')">
+  <span id="{{domId}}-{{r.id}}" [ngClass]="classNames">
     {{r.fm.name()}} ({{getOrgShortname(r.fm.owning_lib())}})
   </span>
 </ng-template>
diff --git a/Open-ILS/src/eg2/src/app/share/combobox/combobox.component.ts b/Open-ILS/src/eg2/src/app/share/combobox/combobox.component.ts
index e75f31db20..971fc725b0 100644
--- a/Open-ILS/src/eg2/src/app/share/combobox/combobox.component.ts
+++ b/Open-ILS/src/eg2/src/app/share/combobox/combobox.component.ts
@@ -24,6 +24,7 @@ export interface ComboboxEntry {
   userdata?: any; // opaque external value; ignored by this component.
   fm?: IdlObject;
   disabled?: boolean;
+  classNames?: string[]; // optional array of classes for CSS
 }
 
 @Directive({
@@ -69,9 +70,6 @@ export class ComboboxComponent
     // Placeholder text for selector input
     @Input() placeholder = '';
 
-    // Optional array of CSS class names
-    @Input() classNames?: string[];
-
     @Input() persistKey: string; // TODO
 
     @Input() allowFreeText = false;
diff --git a/Open-ILS/src/eg2/src/app/staff/acq/lineitem/copy-attrs.component.html b/Open-ILS/src/eg2/src/app/staff/acq/lineitem/copy-attrs.component.html
index f45c6f11ff..1f1601a7c1 100644
--- a/Open-ILS/src/eg2/src/app/staff/acq/lineitem/copy-attrs.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/acq/lineitem/copy-attrs.component.html
@@ -124,6 +124,6 @@
 </div>
 
 <ng-template #fundTmpl let-r="result" i18n>
-  <span [ngClass]="{'fund-balance-state-stop': checkFundBalance(r.fm.id()) === 'stop',
-                    'fund-balance-state-warning': checkFundBalance(r.fm.id()) === 'warning'}">{{r.label}}</span>
+  <span [ngClass]="{'text-bg-danger': checkFundBalance(r.fm.id()) === 'stop',
+    'text-bg-warning': checkFundBalance(r.fm.id()) === 'warning'}">{{r.label}}</span>
 </ng-template>
diff --git a/Open-ILS/src/eg2/src/app/staff/acq/po/charges.component.html b/Open-ILS/src/eg2/src/app/staff/acq/po/charges.component.html
index 298917bbb9..c8fbf51bb6 100644
--- a/Open-ILS/src/eg2/src/app/staff/acq/po/charges.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/acq/po/charges.component.html
@@ -30,8 +30,8 @@
       <eg-combobox idlClass="acqf" [selectedId]="charge.fund()"
         (onChange)="charge.fund($event ? $event.id : null)"
         i18n-placeholder placeholder="Fund..."
-        [asyncSupportsEmptyTermClick]="true"
         [displayTemplate]="fundTmpl"
+        [asyncSupportsEmptyTermClick]="true"
         [required]="true" [readOnly]="!charge.isnew() && !charge.ischanged()"
         [idlQuerySort]="{acqf: 'year DESC, code'}"
         [idlQueryAnd]="{org: owners, active: 't'}">
@@ -40,7 +40,7 @@
         <br>
         <i>Fund actually debited is 
         <eg-combobox idlClass="acqf" [selectedId]="charge.fund_debit().fund()"
-          [readOnly]="true"></eg-combobox></i>
+        [displayTemplate]="fundTmpl" [readOnly]="true"></eg-combobox></i>
       </span>
     </div>
     <div class="flex-2 p-2">
@@ -89,7 +89,8 @@
   </div>
 </ng-container>
 
+<!-- r.fm.id() makes sense in copy-attrs.component because there's a lot of setup there, but do we have the fund ID at all in this component?? -->
 <ng-template #fundTmpl let-r="result" i18n>
-  <span [ngClass]="{'fund-balance-state-stop': checkFundBalance(r.fm.id()) === 'stop',
-                    'fund-balance-state-warning': checkFundBalance(r.fm.id()) === 'warning'}">{{r.label}}</span>
+  <span id="eg-combobox-{{autoId}}-{{r.id}}" [ngClass]="{'text-bg-danger': checkFundBalance(r.fm.id()) === 'stop',
+    'text-bg-warning': checkFundBalance(r.fm.id()) === 'warning'}">{{r.label}}</span>
 </ng-template>
\ No newline at end of file
diff --git a/Open-ILS/src/eg2/src/app/staff/acq/po/charges.component.ts b/Open-ILS/src/eg2/src/app/staff/acq/po/charges.component.ts
index 5da7fc8770..7e14e0843e 100644
--- a/Open-ILS/src/eg2/src/app/staff/acq/po/charges.component.ts
+++ b/Open-ILS/src/eg2/src/app/staff/acq/po/charges.component.ts
@@ -13,7 +13,8 @@ import {DisencumberChargeDialogComponent} from './disencumber-charge-dialog.comp
 
 @Component({
   templateUrl: 'charges.component.html',
-  selector: 'eg-acq-po-charges'
+  selector: 'eg-acq-po-charges',
+  styleUrls: ['./summary.component.css']
 })
 export class PoChargesComponent implements OnInit, OnDestroy {
 
diff --git a/Open-ILS/src/eg2/src/app/staff/acq/po/summary.component.css b/Open-ILS/src/eg2/src/app/staff/acq/po/summary.component.css
index e8c1d9d72d..e7e8b76ebf 100644
--- a/Open-ILS/src/eg2/src/app/staff/acq/po/summary.component.css
+++ b/Open-ILS/src/eg2/src/app/staff/acq/po/summary.component.css
@@ -5,3 +5,40 @@
   margin-inline-start: .25ch;
   vertical-align: sub;
 }
+
+.dropdown-item .text-bg-danger {
+  background-color: #f8d7da;
+  color: #58151c !important;
+  font-weight: 600;
+  padding: 0 1rem 0 .25rem;
+}
+
+.dropdown-item .text-bg-danger::before {
+  content: "\e160";
+  font-family: "Material Icons";
+  font-weight: normal;
+  vertical-align: sub;
+}
+
+.dropdown-item.active .text-bg-danger {
+  background-color: #f1aeb5;
+}
+
+.dropdown-item .text-bg-warning {
+  background-color: #ffe69c !important;
+  color: #723809;
+  font-weight: 600;
+  padding: 0 1rem 0 .25rem;
+}
+
+.dropdown-item .text-bg-warning::before {
+  content: "\e002";
+  font-family: "Material Icons";
+  font-weight: normal;
+  vertical-align: sub;
+}
+
+.dropdown-item.active .text-bg-warning {
+  background-color: #ffda6a;
+}
+
diff --git a/Open-ILS/src/eg2/src/app/staff/acq/po/summary.component.html b/Open-ILS/src/eg2/src/app/staff/acq/po/summary.component.html
index e9e27a76ce..2324f8fb98 100644
--- a/Open-ILS/src/eg2/src/app/staff/acq/po/summary.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/acq/po/summary.component.html
@@ -46,7 +46,7 @@
             <!-- canceled -->
             <ng-container *ngIf="po().cancel_reason()">
               <span class="text-bg-danger">
-                <span class="material-icons" aria-label="danger" title="danger" i18n-aria-label i18n-title>report</span>
+                <span class="material-icons" aria-label="Stop" title="danger" i18n-aria-label i18n-title>report</span>
                 <span i18n>{{po().cancel_reason().label()}} =&gt; {{po().cancel_reason().description()}}</span>
               </span>
             </ng-container>
@@ -54,7 +54,7 @@
             <!-- activation warnings -->
             <ng-container *ngIf='activationWarnings.length'>
               <span class="text-bg-warning">
-              <span class="material-icons" aria-label="warning" title="warning" i18n-aria-label i18n-title>warning</span>
+              <span class="material-icons" aria-hidden="true" title="warning" i18n-aria-label i18n-title>warning</span>
                 <span i18n> (Warning: </span>
                 <ng-container *ngFor="let evt of activationWarnings">
                   <ng-container 
-- 
2.11.0