Config UI: better duration fields (#17222)

assets/js/components/Config/PropertyField.vue

@@ -93,10 +93,14 @@
 import "@h2d2/shopicons/es/regular/minus";
 import VehicleIcon from "../VehicleIcon";
 import SelectGroup from "../SelectGroup.vue";
+import formatter from "../../mixins/formatter";
+
+const NS_PER_SECOND = 1000000000;
 
 export default {
 	name: "PropertyField",
 	components: { VehicleIcon, SelectGroup },
+	mixins: [formatter],
 	props: {
 		id: String,
 		property: String,
@@ -149,6 +153,9 @@ export default {
 			if (this.property === "capacity") {
 				return "kWh";
 			}
+			if (this.type === "Duration") {
+				return this.fmtSecondUnit(this.value);
+			}
 			return null;
 		},
 		icons() {
@@ -203,6 +210,10 @@ export default {
 					return Array.isArray(this.modelValue) ? this.modelValue.join("\n") : "";
 				}
 
+				if (this.type === "Duration" && typeof this.modelValue === "number") {
+					return this.modelValue / NS_PER_SECOND;
+				}
+
 				return this.modelValue;
 			},
 			set(value) {
@@ -216,6 +227,10 @@ export default {
 					newValue = value ? value.split("\n") : [];
 				}
 
+				if (this.type === "Duration" && typeof newValue === "number") {
+					newValue = newValue * NS_PER_SECOND;
+				}
+
 				this.$emit("update:modelValue", newValue);
 			},
 		},

assets/js/mixins/formatter.js

@@ -246,6 +246,15 @@ export default {
         day: "numeric",
       }).format(date);
     },
+    fmtSecondUnit: function (seconds) {
+      return new Intl.NumberFormat(this.$i18n?.locale, {
+        style: "unit",
+        unit: "second",
+        unitDisplay: "long",
+      })
+        .formatToParts(seconds)
+        .find((part) => part.type === "unit").value;
+    },
     fmtMoney: function (amout = 0, currency = "EUR", decimals = true, withSymbol = false) {
       const currencyDisplay = withSymbol ? "narrowSymbol" : "code";
       const result = new Intl.NumberFormat(this.$i18n?.locale, {