Ensure that Time Picker is using internationalized strings (CFM-107)

COmanage · Mar 31, 2022 · 815d0a3 · 815d0a3
1 parent 4ca63bd
commit 815d0a3
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 8 deletions.
diff --git a/app/resources/locales/en_US/field.po b/app/resources/locales/en_US/field.po
@@ -38,6 +38,9 @@ msgstr "API Key"
 msgid "affiliation"
 msgstr "Affiliation"
 
+msgid "am"
+msgstr "AM"
+
 msgid "area_code"
 msgstr "Area Code"
 
@@ -123,6 +126,9 @@ msgstr "Honorific"
 msgid "honorific.desc"
 msgstr "(Dr, Hon, etc)"
 
+msgid "hour"
+msgstr "Hour"
+
 msgid "identifier"
 msgstr "Identifier"
 
@@ -147,6 +153,9 @@ msgstr "Manager"
 msgid "middle"
 msgstr "Middle"
 
+msgid "minute"
+msgstr "Minute"
+
 msgid "name"
 msgstr "Name"
 
@@ -173,6 +182,9 @@ msgstr "Parent"
 msgid "postal_code"
 msgstr "Postal Code"
 
+msgid "pm"
+msgstr "PM"
+
 msgid "primary_name"
 msgstr "Primary Name"
 

diff --git a/app/src/View/Helper/FieldHelper.php b/app/src/View/Helper/FieldHelper.php
@@ -131,8 +131,12 @@ public function control(string $fieldName,
                 dateTime: "' . $pickerDateTime .'",
                 timed: true,
                 ampm: false,
-                core: {},
-                txt: {}
+                txt: {
+                  hour: "' . __d('field', 'hour') . '",
+                  minute: "' . __d('field', 'minute') . '",
+                  am: "' . __d('field', 'am') . '",
+                  pm: "' . __d('field', 'pm') . '"
+                }
               }
             },
             components: {
@@ -146,7 +150,8 @@ public function control(string $fieldName,
             :target="target"
             :date="date"
             :timed="timed" 
-            :ampm="ampm">
+            :ampm="ampm"
+            :txt="txt">
           </cm-date-time-picker>
         </div>';
 

diff --git a/app/webroot/css/co-base.css b/app/webroot/css/co-base.css
@@ -1134,6 +1134,7 @@ ul.fields li.fields-datepicker .field-info {
 .cm-time-picker-title {
   padding: 0.25em;
   border-bottom: 1px solid var(--cmg-color-lightgray-005);
+  font-size: 1.1em;
 }
 .cm-time-picker-vals ul {
   display: grid;

diff --git a/app/webroot/js/comanage/components/datepicker/cm-datetimepicker.js b/app/webroot/js/comanage/components/datepicker/cm-datetimepicker.js
@@ -31,7 +31,8 @@ export default {
     date: String,
     dateTime: String,
     timed: Boolean,
-    ampm: Boolean
+    ampm: Boolean,
+    txt: Object
   },
   components: {
     CmTimePicker
@@ -161,7 +162,8 @@ export default {
             @set-time="setFieldTime"
             :target="this.target"
             :datetime="this.dateTime"
-            :ampm="this.ampm">
+            :ampm="this.ampm"
+            :txt="this.txt">
           </cm-time-picker>
         </Transition>  
       </div>

diff --git a/app/webroot/js/comanage/components/datepicker/cm-timepicker.js b/app/webroot/js/comanage/components/datepicker/cm-timepicker.js
@@ -27,7 +27,8 @@ export default {
   props: {
     target: String,
     datetime: String, 
-    ampm: Boolean
+    ampm: Boolean,
+    txt: Object
   },
   data() {
     return {
@@ -42,7 +43,7 @@ export default {
   template: `
     <div class="cm-time-picker-panel">
       <div class="cm-time-picker-hours">
-        <div class="cm-time-picker-title">Hour</div>
+        <div class="cm-time-picker-title">{{ txt.hour }}</div>
         <div class="cm-time-picker-vals">
           <ul>
             <li v-for="n in 24">              
@@ -53,7 +54,7 @@ export default {
       </div>
       <div class="cm-time-picker-colon">:</div>
       <div class="cm-time-picker-minutes">
-        <div class="cm-time-picker-title">Minute</div>
+        <div class="cm-time-picker-title">{{ txt.minute }}</div>
         <div class="cm-time-picker-vals">
           <ul>
             <li v-for="val of minuteVals">