feat(frontend/durationpicker-day): auto format time

frontend/app/components/sy-durationpicker-day/component.js

@@ -1,5 +1,7 @@
+import { action } from "@ember/object";
 import moment from "moment";
 import SyDurationpickerComponent from "timed/components/sy-durationpicker/component";
+import parseDayTime from "timed/utils/parse-daytime";
 
 export default class SyDurationpickerDayComponent extends SyDurationpickerComponent {
   maxlength = 5;
@@ -11,4 +13,16 @@ export default class SyDurationpickerDayComponent extends SyDurationpickerCompon
   sanitize(value) {
     return value.replace(/[^\d:]/, "");
   }
+
+  get pattern() {
+    return "^(?:[01]?\\d|2[0-3]):?(?:00|15|30|45)?$";
+  }
+
+  @action
+  change({ target: { validity, value } }) {
+    if (validity.valid) {
+      const [h, m] = parseDayTime(value);
+      this._change(this._set(h, m));
+    }
+  }
 }

frontend/app/utils/parse-daytime.js

@@ -0,0 +1,27 @@
+/**
+ * @module timed
+ * @submodule timed-utils
+ * @public
+ */
+
+const DAY_TIME_REGEX = /^(?<hours>[01]?\d|2[0-3]):?(?<minutes>00|15|30|45)?$/;
+
+/**
+ * Converts a django duration string to a moment duration
+ *
+ * @function parseDayTime
+ * @param {string} str The duration string to parse
+ * @return {[number, number] | null} The parsed duration
+ * @public
+ */
+export default function parseDayTime(str) {
+  if (!str) {
+    return null;
+  }
+
+  const matches = DAY_TIME_REGEX.exec(str);
+  if (!matches) return null;
+  const { hours, minutes } = matches.groups;
+
+  return [parseInt(hours), parseInt(minutes ?? "0")];
+}

frontend/tests/unit/utils/parse-daytime-test.js

@@ -0,0 +1,41 @@
+import { module, test } from "qunit";
+import parseDayTime from "timed/utils/parse-daytime";
+
+module("Unit | Utility | parse day time", function () {
+  test("works with normal time", function (assert) {
+    const result = parseDayTime("02:00");
+
+    assert.deepEqual([2, 0], result);
+  });
+
+  test("works with just a number", function (assert) {
+    const result = parseDayTime("2");
+
+    assert.deepEqual([2, 0], result);
+  });
+
+  test("works without :", function (assert) {
+    const result = parseDayTime("230");
+
+    assert.deepEqual([2, 30], result);
+  });
+
+  test("doesn't work on minutes that aren't in steps of 15", function (assert) {
+    const result = parseDayTime("02:31");
+
+    assert.notDeepEqual([2, 31], result);
+    assert.strictEqual(result, null);
+  });
+
+  test("doesn't work on hours above 23", function (assert) {
+    const result = parseDayTime("24");
+
+    assert.notDeepEqual([24, 0], result);
+    assert.strictEqual(result, null);
+  });
+
+  test("doesn't work on invalid inputs", function (assert) {
+    assert.strictEqual(parseDayTime("abcdef"), null);
+    assert.strictEqual(parseDayTime(""), null);
+  });
+});

frontend/tests/unit/utils/parse-filename-test.js

@@ -1,7 +1,7 @@
 import { module, test } from "qunit";
 import parseFileName from "timed/utils/parse-filename";
 
-module("Unit | Helper | parse filename", function () {
+module("Unit | Utility | parse filename", function () {
   test("works with double quotes", function (assert) {
     const result = parseFileName(
       'attachment; filename="1805-20240710-Customer-Sample_Project.ods"'