merge newui branch

ui/src/fields/url/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.url = {
+    icon: "ri-link",
+    label: "URL",
+    settings,
+    input,
+    view,
+    dummyData: (f, forSubmit = false) => {
+        return "https://example.com";
+    },
+};

ui/src/fields/url/input.js

@@ -0,0 +1,35 @@
+// {
+//     collection: undefined,
+//     originalRecord: undefined,
+//     record: undefined,
+//     field: undefined,
+// }
+export function input(props) {
+    const uniqueId = "url_" + app.utils.randomString();
+
+    return t.div(
+        { className: "record-field-input field-type-url" },
+        t.div(
+            { className: "field" },
+            t.label(
+                { htmlFor: uniqueId },
+                t.i({ className: app.fieldTypes.url.icon }),
+                t.span({ className: "txt" }, () => props.field.name),
+            ),
+            t.input({
+                type: "url",
+                id: uniqueId,
+                spellcheck: false,
+                name: () => props.field.name,
+                required: () => props.field.required,
+                value: () => props.record[props.field.name] || "",
+                oninput: (e) => (props.record[props.field.name] = e.target.value),
+            }),
+        ),
+        () => {
+            if (props.field.help) {
+                return t.div({ className: "field-help" }, props.field.help);
+            }
+        },
+    );
+}

ui/src/fields/url/settings.js

@@ -0,0 +1,105 @@
+// {
+//     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 + ".exceptDomains" },
+                            t.span({ className: "txt" }, "Except domains"),
+                            t.i({
+                                className: "ri-information-line link-hint",
+                                ariaDescription: app.attrs.tooltip(
+                                    `List of domains that are NOT allowed.\nThis field is disabled if "Only domains" is set.`,
+                                ),
+                            }),
+                        ),
+                        t.input({
+                            type: "text",
+                            id: uniqueId + ".exceptDomains",
+                            disabled: () => !app.utils.isEmpty(data.field.onlyDomains),
+                            name: () => `fields.${data.fieldIndex}.exceptDomains`,
+                            value: () => app.utils.joinNonEmpty(data.field.exceptDomains),
+                            onchange: (
+                                e,
+                            ) => (data.field.exceptDomains = app.utils.splitNonEmpty(e.target.value, ",")),
+                        }),
+                    ),
+                    t.div({ className: "field-help" }, "Use comma as separator."),
+                ),
+                t.div(
+                    { className: "col-sm-6" },
+                    t.div(
+                        { className: "field" },
+                        t.label(
+                            { htmlFor: uniqueId + ".onlyDomains" },
+                            t.span({ className: "txt" }, "Only domains"),
+                            t.i({
+                                className: "ri-information-line link-hint",
+                                ariaDescription: app.attrs.tooltip(
+                                    `List of domains that are ONLY allowed.\nThis field is disabled if "Except domains" is set.`,
+                                ),
+                            }),
+                        ),
+                        t.input({
+                            type: "text",
+                            id: uniqueId + ".onlyDomains",
+                            disabled: () => !app.utils.isEmpty(data.field.exceptDomains),
+                            name: () => `fields.${data.fieldIndex}.onlyDomains`,
+                            value: () => app.utils.joinNonEmpty(data.field.onlyDomains),
+                            onchange: (e) => (data.field.onlyDomains = app.utils.splitNonEmpty(e.target.value, ",")),
+                        }),
+                    ),
+                    t.div({ className: "field-help" }, "Use comma as separator."),
+                ),
+                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/url/view.js

@@ -0,0 +1,29 @@
+// {
+//     record: undefined,
+//     field: undefined,
+//     short: false,
+// }
+export function view(props) {
+    return t.div(
+        { className: "record-field-view field-type-url" },
+        () => {
+            const value = props.record[props.field.name] || "";
+
+            if (!value) {
+                return t.span({ className: "missing-value" });
+            }
+
+            return t.a({
+                href: () => value,
+                className: "txt txt-ellipsis",
+                rel: "noopener noreferrer",
+                target: "_blank",
+                textContent: app.utils.truncate(value),
+                ariaDescription: app.attrs.tooltip("Open in new tab"),
+                onclick: (e) => {
+                    e.stopPropagation();
+                },
+            });
+        },
+    );
+}