UX: Rewrite date/time param-input using FormKit

assets/javascripts/discourse/components/param-input-form.gjs

@@ -20,9 +20,9 @@ const layoutMap = {
   bigint: "string",
   boolean: "boolean",
   string: "string",
-  time: "generic",
-  date: "generic",
-  datetime: "generic",
+  time: "time",
+  date: "date",
+  datetime: "datetime",
   double: "string",
   user_id: "user_id",
   post_id: "string",
@@ -45,6 +45,8 @@ export const ERRORS = {
   INVALID: I18n.t("explorer.form.errors.invalid"),
   NO_SUCH_CATEGORY: I18n.t("explorer.form.errors.no_such_category"),
   NO_SUCH_GROUP: I18n.t("explorer.form.errors.no_such_group"),
+  INVALID_DATE: (date) => I18n.t("explorer.form.errors.invalid_date", { date }),
+  INVALID_TIME: (time) => I18n.t("explorer.form.errors.invalid_time", { time }),
 };
 
 function digitalizeCategoryId(value) {
@@ -78,6 +80,8 @@ function serializeValue(type, value) {
       return value?.join(",");
     case "group_id":
       return value[0];
+    case "datetime":
+      return value?.replaceAll("T", " ");
     default:
       return value?.toString();
   }
@@ -119,6 +123,18 @@ function componentOf(info) {
       return UserListInput;
     case "group_list":
       return GroupInput;
+    case "date":
+      return <template>
+        <@field.Input @type="date" name={{@info.identifier}} />
+      </template>;
+    case "time":
+      return <template>
+        <@field.Input @type="time" name={{@info.identifier}} />
+      </template>;
+    case "datetime":
+      return <template>
+        <@field.Input @type="datetime-local" name={{@info.identifier}} />
+      </template>;
     case "bigint":
     case "string":
     default:
@@ -213,6 +229,40 @@ export default class ParamInputForm extends Component {
           return value[0];
         }
         return value;
+      case "date":
+        try {
+          if (!value) {
+            return null;
+          }
+          return moment(new Date(value).toISOString()).format("YYYY-MM-DD");
+        } catch (err) {
+          this.addError(info.identifier, ERRORS.INVALID_DATE(String(value)));
+          return null;
+        }
+      case "time":
+        try {
+          if (!value) {
+            return null;
+          }
+          return moment(new Date(`1970/01/01 ${value}`).toISOString()).format(
+            "HH:mm"
+          );
+        } catch (err) {
+          this.addError(info.identifier, ERRORS.INVALID_TIME(String(value)));
+          return null;
+        }
+      case "datetime":
+        try {
+          if (!value) {
+            return null;
+          }
+          return moment(new Date(value).toISOString()).format(
+            "YYYY-MM-DD HH:mm"
+          );
+        } catch (err) {
+          this.addError(info.identifier, ERRORS.INVALID_TIME(String(value)));
+          return null;
+        }
       default:
         return value;
     }

config/locales/client.en.yml

@@ -94,6 +94,8 @@ en:
           invalid: "Invalid"
           no_such_category: "No such category"
           no_such_group: "No such group"
+          invalid_date: "%{date} is a invalid date"
+          invalid_time: "%{time} is a invalid time"
     group:
       reports: "Reports"
     admin:

test/javascripts/components/param-input-test.js

@@ -97,6 +97,54 @@ const InputTestCases = [
       },
     ],
   },
+  {
+    type: "date",
+    default: "2024-07-13",
+    initial: "1970-01-01",
+    tests: [
+      {
+        input: null,
+        data_null: undefined,
+        error: ERRORS.REQUIRED,
+      },
+      {
+        input: "2038-01-20",
+        data: "2038-01-20",
+      },
+    ],
+  },
+  {
+    type: "time",
+    default: "12:34",
+    initial: "11:45",
+    tests: [
+      {
+        input: null,
+        data_null: undefined,
+        error: ERRORS.REQUIRED,
+      },
+      {
+        input: "03:14",
+        data: "03:14",
+      },
+    ],
+  },
+  {
+    type: "datetime",
+    default: "2024-07-13 12:00",
+    initial: "1970-01-01 00:00",
+    tests: [
+      {
+        input: null,
+        data_null: undefined,
+        error: ERRORS.REQUIRED,
+      },
+      {
+        input: "2038-01-19 03:15",
+        data: "2038-01-19 03:15",
+      },
+    ],
+  },
 ];
 
 module("Data Explorer Plugin | Component | param-input", function (hooks) {
@@ -284,4 +332,52 @@ module("Data Explorer Plugin | Component | param-input", function (hooks) {
       .field("group_id")
       .hasError(`${ERRORS.NO_SUCH_GROUP}: invalid_group_name`);
   });
+
+  test("date, time, datetime with initial value in other formats", async function (assert) {
+    this.setProperties({
+      param_info: [
+        {
+          identifier: "date",
+          type: "date",
+          default: null,
+          nullable: false,
+        },
+        {
+          identifier: "time",
+          type: "time",
+          default: null,
+          nullable: false,
+        },
+        {
+          identifier: "datetime",
+          type: "datetime",
+          default: null,
+          nullable: false,
+        },
+      ],
+      initialValues: {
+        date: "19 January 2038",
+        time: "3:15 am",
+        datetime: "19 January 2038 3:15 am",
+      },
+      onRegisterApi: ({ submit }) => {
+        this.submit = submit;
+      },
+    });
+
+    await render(hbs`
+    <ParamInputForm
+      @initialValues={{this.initialValues}}
+      @paramInfo={{this.param_info}}
+      @onRegisterApi={{this.onRegisterApi}}
+    />`);
+
+    this.submit().then((res) => {
+      assert.deepEqual(res, {
+        date: "2038-01-19",
+        time: "03:15",
+        datetime: "2038-01-19 03:15",
+      });
+    });
+  });
 });