merge newui branch

ui/src/fields/date/init.js

@@ -0,0 +1,16 @@
+import { input } from "./input";
+import { settings } from "./settings";
+import { view } from "./view";
+
+window.app = window.app || {};
+window.app.fieldTypes = window.app.fieldTypes || {};
+window.app.fieldTypes.date = {
+    icon: "ri-calendar-line",
+    label: "Datetime",
+    settings,
+    input,
+    view,
+    dummyData: (f, forSubmit = false) => {
+        return new Date().toISOString().replaceAll("T", " ");
+    },
+};

ui/src/fields/date/input.js

@@ -0,0 +1,37 @@
+// {
+//     collection: undefined,
+//     originalRecord: undefined,
+//     record: undefined,
+//     field: undefined,
+// }
+export function input(props) {
+    const uniqueId = "date_" + app.utils.randomString();
+
+    return t.div(
+        { className: "record-field-input field-type-date" },
+        t.div(
+            { className: "field" },
+            t.label(
+                { htmlFor: uniqueId },
+                t.i({ className: app.fieldTypes.date.icon }),
+                t.span({ className: "txt" }, () => props.field.name),
+            ),
+            t.input({
+                id: uniqueId,
+                step: 1,
+                type: "datetime-local",
+                name: () => props.field.name,
+                required: () => props.field.required,
+                value: () => app.utils.toDatetimeLocalInputValue(props.record[props.field.name]),
+                onchange: (e) => {
+                    props.record[props.field.name] = app.utils.toRFC3339Datetime(e.target.value);
+                },
+            }),
+        ),
+        () => {
+            if (props.field.help) {
+                return t.div({ className: "field-help" }, props.field.help);
+            }
+        },
+    );
+}

ui/src/fields/date/settings.js

@@ -0,0 +1,87 @@
+// {
+//     originalCollection: undefined,
+//     collection: undefined,
+//     field
+//     get fieldIndex: int/-1,
+//     get originalField: undefined
+// }
+export function settings(data) {
+    const uniqueId = "f_" + app.utils.randomString();
+
+    return app.components.fieldSettings(data, {
+        content: () =>
+            t.div(
+                { className: "grid sm" },
+                t.div(
+                    { className: "col-sm-6" },
+                    t.div(
+                        { className: "field" },
+                        t.label({ htmlFor: uniqueId + ".min" }, t.span({ className: "txt" }, "Min date (Local)")),
+                        t.input({
+                            type: "datetime-local",
+                            id: uniqueId + ".min",
+                            step: 1,
+                            name: () => `fields.${data.fieldIndex}.min`,
+                            value: () => app.utils.toDatetimeLocalInputValue(data.field.min),
+                            onchange: (e) => {
+                                data.field.min = app.utils.toRFC3339Datetime(e.target.value);
+                            },
+                        }),
+                    ),
+                ),
+                t.div(
+                    { className: "col-sm-6" },
+                    t.div(
+                        { className: "field" },
+                        t.label({ htmlFor: uniqueId + ".max" }, t.span({ className: "txt" }, "Max date (Local)")),
+                        t.input({
+                            type: "datetime-local",
+                            id: uniqueId + ".max",
+                            step: 1,
+                            name: () => `fields.${data.fieldIndex}.max`,
+                            value: () => app.utils.toDatetimeLocalInputValue(data.field.max),
+                            onchange: (e) => {
+                                data.field.max = app.utils.toRFC3339Datetime(e.target.value);
+                            },
+                        }),
+                    ),
+                ),
+                t.div(
+                    { className: "col-sm-12" },
+                    t.div(
+                        { className: "field" },
+                        t.label({ htmlFor: uniqueId + ".help" }, "Help text"),
+                        t.input({
+                            type: "text",
+                            id: uniqueId + ".help",
+                            name: () => `fields.${data.fieldIndex}.help`,
+                            value: () => data.field.help || "",
+                            oninput: (e) => (data.field.help = e.target.value),
+                        }),
+                    ),
+                ),
+            ),
+        footer: () => [
+            t.div(
+                { className: "field" },
+                t.input({
+                    className: "sm",
+                    type: "checkbox",
+                    id: uniqueId + ".required",
+                    name: () => `fields.${data.fieldIndex}.required`,
+                    checked: () => !!data.field.required,
+                    onchange: (e) => (data.field.required = e.target.checked),
+                }),
+                t.label(
+                    { htmlFor: uniqueId + ".required" },
+                    t.span({ className: "txt" }, "Required"),
+                    t.small({ className: "txt-hint" }, "(!='')"),
+                    t.i({
+                        className: "ri-information-line link-hint",
+                        ariaDescription: app.attrs.tooltip("Requires the field value to be nonempty string"),
+                    }),
+                ),
+            ),
+        ],
+    });
+}

ui/src/fields/date/view.js

@@ -0,0 +1,14 @@
+// {
+//     record: undefined,
+//     field: undefined,
+//     short: false,
+// }
+export function view(props) {
+    return t.div(
+        { className: "record-field-view field-type-date" },
+        app.components.formattedDate({
+            value: () => props.record[props.field.name],
+            short: () => props.short,
+        }),
+    );
+}