Merge pull request #80 from OpenLMIS/OLMIS-8179-compact-inputs

OLMIS-8179: Compact dose and pack inputs

Author: lwojewnik

CHANGELOG.md

@@ -1,5 +1,6 @@
 7.2.17-SNAPSHOT (WIP)
 ==================
+* [OLMIS-8179](https://openlmis.atlassian.net/browse/OLMIS-8179): Compact packs/doses quantity inputs.
 * [OLMIS-8191](https://openlmis.atlassian.net/browse/OLMIS-8191) / [OLMIS-8192](https://openlmis.atlassian.net/browse/OLMIS-8192): Add openlmis-long-text class and directive so long free-text in table cells grows with content then wraps — for both the editable textarea and its read-only display.
 
 7.2.16 / 2026-06-09

src/openlmis-quantity-unit-input/messages_en.json

@@ -1,5 +1,5 @@
 {
     "openlmisInputDosesPacks.Doses": "Doses",
     "openlmisInputDosesPacks.Packs": "Packs",
-    "openlmisInputDosesPacks.DosesBracket":" doses )"
+    "openlmisInputDosesPacks.DosesHint": "doses"
 }

src/openlmis-quantity-unit-input/openlmis-quantity-unit-input.html

@@ -1,14 +1,15 @@
 <div ng-if="vm.showInDoses" >
-    <input id="quantity"                                       
+    <input id="quantity"
         class="form-control"
         ng-class="vm.inputClass"
         ng-model="vm.item.quantity"
         ng-change="vm.changeValue(vm.item)"
         ng-disabled="vm.disabled"
+        placeholder="{{'openlmisInputDosesPacks.DosesHint' | message }}"
         positive-integer />
 </div>
 <div class="openlmis-input" ng-if="!vm.showInDoses">
-    <input id="quantityInPacks"                                 
+    <input id="quantityInPacks"
         class="form-control"
         ng-class="vm.inputClass"
         ng-model="vm.item.quantityInPacks"
@@ -17,13 +18,13 @@
         placeholder="{{'openlmisInputDosesPacks.Packs' | message }}"
         positive-integer />
     <p> ( + </p>
-    <input id="quantityRemainderInDoses"  
+    <input id="quantityRemainderInDoses"
         class="form-control"
         ng-class="vm.inputClass"
         ng-model="vm.item.quantityRemainderInDoses"
         ng-change="vm.changeValue(vm.item)"
         ng-disabled="vm.disabled || vm.isQuantityRemainderInDosesDisabled()"
         placeholder="{{'openlmisInputDosesPacks.Doses' | message }}"
         positive-integer />
-    <p>{{'openlmisInputDosesPacks.DosesBracket' | message }}</p>
+    <p>)</p>
 </div>

src/openlmis-quantity-unit-input/openlmis-quantity-unit-input.jsx

@@ -112,6 +112,7 @@ export default function QuantityUnitInput({
           value={localValues.orderedQuantity}
           onChange={(value) => handleLocalChange('orderedQuantity', value)}
           onBlur={handleBlur}
+          placeholder={formatMessage('openlmisInputDosesPacks.DosesHint')}
           key={`orderedQuantity-${item?.orderable?.id}`}
         />
       </div>
@@ -140,11 +141,10 @@ export default function QuantityUnitInput({
         disabled={
           inputCellProps.disabled || isQuantityRemainderInDosesDisabled()
         }
-        placeholder={formatMessage('openlmisInputDosesPacks.Doses')}
         id='quantityRemainderInDoses'
         key={`quantityRemainderInDoses-${item?.orderable?.id}`}
       />
-      <p>{formatMessage('openlmisInputDosesPacks.DosesBracket')}</p>
+      <p>)</p>
     </div>
   );
 }