blixify-ui-web 1.2.181 → 1.2.182

package/lib/components/display/newTable/index.js

@@ -94,6 +94,8 @@ var iconButton_1 = require("../../action/iconButton");
 var textButton_1 = require("../../action/textButton");
 var collapse_1 = require("../../advanced/collapse");
 var popUp_1 = require("../../advanced/popUp");
+var formula_1 = require("../../data/formula");
+var builder_1 = require("../../data/formula/builder");
 var readModule_1 = require("../../data/readModule");
 var updateModule_1 = require("../../data/updateModule");
 var utils_1 = require("../../data/utils");
@@ -177,6 +179,8 @@ var ADD_COLUMN_TYPES = [
     { key: "textArea", label: "Long text" },
     { key: "markdown", label: "Markdown" },
     { key: "number", label: "Number" },
+    // INFO: a monday-style formula, built in the formula builder
+    { key: "formula", label: "Formula" },
     { key: "boolean", label: "Yes / No" },
     { key: "date", label: "Date" },
     { key: "list", label: "Single select" },
@@ -365,19 +369,22 @@ var NewTable = function (props) {
     var _10 = (0, react_2.useState)(""), newColumnOptions = _10[0], setNewColumnOptions = _10[1];
     var _11 = (0, react_2.useState)(false), newColumnRequired = _11[0], setNewColumnRequired = _11[1];
     var _12 = (0, react_2.useState)(false), addingColumn = _12[0], setAddingColumn = _12[1];
+    // INFO: the formula as shown in the builder — column names, not ids
+    var _13 = (0, react_2.useState)(""), newColumnFormula = _13[0], setNewColumnFormula = _13[1];
+    var addColumnPopUpRef = (0, react_2.useRef)(null);
     // INFO: the column being changed — empty while the panel adds a new one
-    var _13 = (0, react_2.useState)(null), editingColumn = _13[0], setEditingColumn = _13[1];
+    var _14 = (0, react_2.useState)(null), editingColumn = _14[0], setEditingColumn = _14[1];
     //=====================================================================================
     // SECTION: Editable & Addable cells
     //=====================================================================================
-    var _14 = (0, react_2.useState)(""), editDataRowId = _14[0], setEditDataRowId = _14[1];
-    var _15 = (0, react_2.useState)(""), editDataHeaderKey = _15[0], setEditDataHeaderKey = _15[1];
+    var _15 = (0, react_2.useState)(""), editDataRowId = _15[0], setEditDataRowId = _15[1];
+    var _16 = (0, react_2.useState)(""), editDataHeaderKey = _16[0], setEditDataHeaderKey = _16[1];
     // INFO: an editable table used to mount an input in every cell — it read as a
     // form, and a row click always landed on a child input. Only the hovered cell
     // becomes its input now.
-    var _16 = (0, react_2.useState)(null), hoveredCell = _16[0], setHoveredCell = _16[1];
-    var _17 = (0, react_2.useState)(false), modalEditVisible = _17[0], setModalEditVisible = _17[1];
-    var _18 = (0, react_2.useState)([]), collapsedGroupIds = _18[0], setCollapsedGroupIds = _18[1];
+    var _17 = (0, react_2.useState)(null), hoveredCell = _17[0], setHoveredCell = _17[1];
+    var _18 = (0, react_2.useState)(false), modalEditVisible = _18[0], setModalEditVisible = _18[1];
+    var _19 = (0, react_2.useState)([]), collapsedGroupIds = _19[0], setCollapsedGroupIds = _19[1];
     // INFO: per-group scroll pagination. One sentinel element per band, observed
     // by a single IntersectionObserver that fires props.onGroupLoadMore when a
     // band's sentinel scrolls into view. The debounce guard stops repeat fires
@@ -393,25 +400,25 @@ var NewTable = function (props) {
     var lastSelectedRowRef = (0, react_2.useRef)(null);
     var dragSelectRef = (0, react_2.useRef)(null);
     var suppressNextClickRef = (0, react_2.useRef)(false);
-    var _19 = (0, react_2.useState)(false), isDragSelecting = _19[0], setIsDragSelecting = _19[1];
-    var _20 = (0, react_2.useState)(0), copiedCount = _20[0], setCopiedCount = _20[1];
-    var _21 = (0, react_2.useState)({}), editDataValue = _21[0], setEditDataValue = _21[1];
-    var _22 = (0, react_2.useState)(false), editDataIsLoading = _22[0], setEditDataIsLoading = _22[1];
+    var _20 = (0, react_2.useState)(false), isDragSelecting = _20[0], setIsDragSelecting = _20[1];
+    var _21 = (0, react_2.useState)(0), copiedCount = _21[0], setCopiedCount = _21[1];
+    var _22 = (0, react_2.useState)({}), editDataValue = _22[0], setEditDataValue = _22[1];
+    var _23 = (0, react_2.useState)(false), editDataIsLoading = _23[0], setEditDataIsLoading = _23[1];
     // INFO: true while the empty bottom row is being filled in; the row itself is
     // always there in an addable table
-    var _23 = (0, react_2.useState)(false), addData = _23[0], setAddData = _23[1];
-    var _24 = (0, react_2.useState)({}), addDataValue = _24[0], setAddDataValue = _24[1];
+    var _24 = (0, react_2.useState)(false), addData = _24[0], setAddData = _24[1];
+    var _25 = (0, react_2.useState)({}), addDataValue = _25[0], setAddDataValue = _25[1];
     // INFO: bumped after each saved row, so the next one starts with fresh
     // inputs and its first cell takes the focus
-    var _25 = (0, react_2.useState)(0), addRowKey = _25[0], setAddRowKey = _25[1];
-    var _26 = (0, react_2.useState)({}), referencesOptions = _26[0], setReferencesOptions = _26[1];
+    var _26 = (0, react_2.useState)(0), addRowKey = _26[0], setAddRowKey = _26[1];
+    var _27 = (0, react_2.useState)({}), referencesOptions = _27[0], setReferencesOptions = _27[1];
     // INFO: seeded options sit under the local map so a cell's own search
     // results still win per key
     var mergedReferencesOptions = __assign(__assign({}, ((_l = props.referencesOptions) !== null && _l !== void 0 ? _l : {})), referencesOptions);
-    var _27 = (0, react_2.useState)({}), referencesDetails = _27[0], setReferencesDetails = _27[1];
-    var _28 = (0, react_2.useState)(false), referenceLoading = _28[0], setReferenceLoading = _28[1];
+    var _28 = (0, react_2.useState)({}), referencesDetails = _28[0], setReferencesDetails = _28[1];
+    var _29 = (0, react_2.useState)(false), referenceLoading = _29[0], setReferenceLoading = _29[1];
     // INFO: measured pixel widths for pinned columns without an explicit width.
-    var _29 = (0, react_2.useState)({}), measuredPinWidths = _29[0], setMeasuredPinWidths = _29[1];
+    var _30 = (0, react_2.useState)({}), measuredPinWidths = _30[0], setMeasuredPinWidths = _30[1];
     var editDataValueRef = (0, react_2.useRef)({});
     var editDataRowIdRef = (0, react_2.useRef)("");
     var editDataHeaderKeyRef = (0, react_2.useRef)("");
@@ -1036,7 +1043,7 @@ var NewTable = function (props) {
     // resize is a per-viewer preference and there is no storage for it yet.
     // Tailwind cannot emit a runtime w-[Npx], so this drives an inline style and
     // wins over the col.width class.
-    var _30 = (0, react_2.useState)({}), columnWidths = _30[0], setColumnWidths = _30[1];
+    var _31 = (0, react_2.useState)({}), columnWidths = _31[0], setColumnWidths = _31[1];
     var resizeRef = (0, react_2.useRef)(null);
     // INFO: a consumer may deliberately set a column narrower than the default
     // floor (a 40px icon column, say) — never force it wider than it was asked to
@@ -1102,7 +1109,7 @@ var NewTable = function (props) {
         });
     };
     var renderAddColumnPanel = function () {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
         // INFO: a caller that renders its own form keeps full control; the
         // built-in one only appears when it hands over onAddColumn instead
         if ((_a = props.advSettings) === null || _a === void 0 ? void 0 : _a.renderAddColumnElements)
@@ -1117,8 +1124,9 @@ var NewTable = function (props) {
             react_2.default.createElement(textInput_1.TextInput, { id: "newColumnName", type: "text", label: "Column name", placeholder: "Order Date", value: newColumnName, darkMode: props.darkMode, onChange: function (event) { var _a, _b; return setNewColumnName((_b = (_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : ""); } }),
             !editingColumn && (react_2.default.createElement("div", { className: "-mt-2" },
                 react_2.default.createElement("p", { className: "text-xs text-gray-500" }, derivedId ? (react_2.default.createElement(react_2.default.Fragment, null,
-                    "Saved on each record as",
-                    " ",
+                    newColumnType === "formula"
+                        ? "Column id "
+                        : "Saved on each record as ",
                     react_2.default.createElement("span", { className: "font-mono font-medium" }, derivedId),
                     taken ? " — already used by another column" : "")) : ("The field id is generated from the name")))),
             react_2.default.createElement(select_1.Select, { id: "newColumnType", label: "Type", value: newColumnType, darkMode: props.darkMode, options: editingColumn
@@ -1126,7 +1134,16 @@ var NewTable = function (props) {
                         return (0, exports.handleGetEditableColumnTypes)(editingColumn.type).includes(eachType.key);
                     })
                     : ADD_COLUMN_TYPES, disabled: !!editingColumn &&
-                    (0, exports.handleGetEditableColumnTypes)(editingColumn.type).length < 2, portalDropdown: true, onChange: function (value) { return setNewColumnType(value); } }),
+                    (0, exports.handleGetEditableColumnTypes)(editingColumn.type).length < 2, portalDropdown: true, onChange: function (value) {
+                    var _a;
+                    setNewColumnType(value);
+                    // INFO: the formula builder needs a modal's room, as monday opens
+                    // its builder — the popup hands over what was typed and closes
+                    if (value === "formula" && !addColumnModal) {
+                        (_a = addColumnPopUpRef.current) === null || _a === void 0 ? void 0 : _a.handleOnClose();
+                        setAddColumnModal("new");
+                    }
+                } }),
             REFERENCE_TYPES.includes(newColumnType) &&
                 ((_c = props.advSettings) === null || _c === void 0 ? void 0 : _c.renderReferenceSpaceOptions) && (react_2.default.createElement(react_2.default.Fragment, null,
                 react_2.default.createElement(select_1.Select, { id: "newColumnRefSpace", label: "Reference endpoint", value: newColumnRefSpace, darkMode: props.darkMode, portalDropdown: true, options: (_d = props.advSettings.renderReferenceSpaceOptions()) !== null && _d !== void 0 ? _d : [], onChange: function (value) {
@@ -1144,13 +1161,14 @@ var NewTable = function (props) {
                         return eachOption.includes(",");
                     }), onChange: function (event) { var _a, _b; return setNewColumnOptions((_b = (_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : ""); } })),
             ASSET_TYPES.includes(newColumnType) && (react_2.default.createElement("p", { className: "-mt-2 text-xs text-gray-500" }, "Uploads are stored against this space automatically.")),
-            react_2.default.createElement(checkbox_1.Checkbox, { id: "newColumnRequired", 
+            newColumnType === "formula" && (react_2.default.createElement(builder_1.FormulaBuilder, { value: newColumnFormula, schema: handleGetFormulaSchema(), columnId: editingColumn === null || editingColumn === void 0 ? void 0 : editingColumn.id, previewRow: (_j = props.data) === null || _j === void 0 ? void 0 : _j[0], previewDisplayRow: (_k = props.spaceData) === null || _k === void 0 ? void 0 : _k[0], darkMode: props.darkMode, onChange: setNewColumnFormula })),
+            newColumnType !== "formula" && (react_2.default.createElement(checkbox_1.Checkbox, { id: "newColumnRequired", 
                 // INFO: the checkbox itself is not a required field — without this it
                 // renders "Required *", which reads as a validation error on a toggle
                 optional: true, darkMode: props.darkMode, itemList: [{ key: "required", label: "Required" }], selectItemList: newColumnRequired ? ["required"] : [], onChange: function (items) {
                     return setNewColumnRequired(items.includes("required"));
-                } }),
-            newColumnRequired && !editingColumn && (react_2.default.createElement("p", { className: "-mt-3 text-xs text-gray-500" }, "Rows already in this table have no value for it yet.")),
+                } })),
+            newColumnType !== "formula" && newColumnRequired && !editingColumn && (react_2.default.createElement("p", { className: "-mt-3 text-xs text-gray-500" }, "Rows already in this table have no value for it yet.")),
             react_2.default.createElement("div", { className: "flex flex-row justify-end gap-x-2" },
                 react_2.default.createElement(button_1.Button, { type: "light", text: "Cancel", onClick: function () { return handleAddColumnModal(""); } }),
                 react_2.default.createElement(button_1.Button, { type: "normal", text: editingColumn
@@ -1177,6 +1195,9 @@ var NewTable = function (props) {
         setNewColumnRefLabel((_f = schema.referenceLabel) !== null && _f !== void 0 ? _f : "");
         setNewColumnOptions(handleJoinOptions((_g = schema.listSelection) !== null && _g !== void 0 ? _g : []));
         setNewColumnRequired(!schema.optional);
+        setNewColumnFormula(schema.type === "formula"
+            ? (0, formula_1.handleGetFormulaDisplay)(schema, handleGetFormulaSchema())
+            : "");
         setAddColumnModal(columnId);
     };
     var handleAddColumnModal = function (id) {
@@ -1189,6 +1210,7 @@ var NewTable = function (props) {
             setNewColumnRefLabel("");
             setNewColumnOptions("");
             setNewColumnRequired(false);
+            setNewColumnFormula("");
         }
     };
     // INFO: the stored field id is derived from what the user types rather than
@@ -1208,11 +1230,36 @@ var NewTable = function (props) {
     var handleColumnIdTaken = function (id) {
         return flatColumns.some(function (eachColumn) { return eachColumn.key === id; });
     };
+    // INFO: every column a formula may read. The full model when the caller
+    // gives it — hidden columns are still on the row — else the shown columns.
+    var handleGetFormulaSchema = function () {
+        var _a, _b;
+        var schema = (_b = (_a = props.advSettings) === null || _a === void 0 ? void 0 : _a.getSchema) === null || _b === void 0 ? void 0 : _b.call(_a);
+        if (schema)
+            return schema;
+        return flatColumns
+            .filter(function (eachColumn) { return eachColumn.key !== "update"; })
+            .map(function (eachColumn) {
+            var _a, _b, _c, _d;
+            return (_c = (_b = (_a = props.advSettings) === null || _a === void 0 ? void 0 : _a.getColumnSchema) === null || _b === void 0 ? void 0 : _b.call(_a, eachColumn.key)) !== null && _c !== void 0 ? _c : {
+                id: eachColumn.key,
+                name: eachColumn.title,
+                type: (_d = eachColumn.type) !== null && _d !== void 0 ? _d : "string",
+            };
+        });
+    };
     // INFO: a reference with no target resolves nothing, so it cannot be saved
     // half-built. Everything else is complete with a name and a type.
     var handleIsNewColumnReady = function () {
         if (REFERENCE_TYPES.includes(newColumnType))
             return !!newColumnRefSpace && !!newColumnRefLabel;
+        // INFO: an illegal formula would show "Error" in every row
+        if (newColumnType === "formula") {
+            if (!newColumnFormula.trim())
+                return false;
+            var schema = handleGetFormulaSchema();
+            return !(0, formula_1.handleValidateFormula)((0, formula_1.handleFormulaToStorage)(newColumnFormula, schema), schema);
+        }
         return true;
     };
     var handleSubmitNewColumn = function () { return __awaiter(void 0, void 0, void 0, function () {
@@ -1252,6 +1299,10 @@ var NewTable = function (props) {
                             .split(",")
                             .map(function (eachOption) { return eachOption.trim(); })
                             .filter(Boolean);
+                    if (newColumnType === "formula") {
+                        column.formulaExpression = (0, formula_1.handleFormulaToStorage)(newColumnFormula.trim(), handleGetFormulaSchema());
+                        column.optional = true;
+                    }
                     return [4 /*yield*/, ((_b = (_a = props.advSettings) === null || _a === void 0 ? void 0 : _a.onAddColumn) === null || _b === void 0 ? void 0 : _b.call(_a, column))];
                 case 4:
                     _c.sent();
@@ -1319,6 +1370,10 @@ var NewTable = function (props) {
                         delete column_1.listSelectionColour;
                         delete column_1.listSelectionLabel;
                     }
+                    if (newColumnType === "formula") {
+                        column_1.formulaExpression = (0, formula_1.handleFormulaToStorage)(newColumnFormula.trim(), handleGetFormulaSchema());
+                        column_1.optional = true;
+                    }
                     return [4 /*yield*/, ((_d = (_c = props.advSettings) === null || _c === void 0 ? void 0 : _c.onEditColumn) === null || _d === void 0 ? void 0 : _d.call(_c, column_1))];
                 case 2:
                     _e.sent();
@@ -2257,14 +2312,14 @@ var NewTable = function (props) {
             var filterColumnEnabled = utils_1.supportedAQList.includes((_b = col.type) !== null && _b !== void 0 ? _b : "");
             if (sortColumnEnabled && (advSettings === null || advSettings === void 0 ? void 0 : advSettings.sortEnabled)) {
                 if (col.key !== ((_c = advSettings.sortId) === null || _c === void 0 ? void 0 : _c.sortId)) {
-                    sortIcon = (react_2.default.createElement(solid_2.ArrowsUpDownIcon, { className: sortClassname, onClick: function () { return handleSort(col.key, "new"); } }));
+                    sortIcon = (react_2.default.createElement(solid_2.ArrowsUpDownIcon, { "data-testid": "table-column-sort-".concat(col.key), className: sortClassname, onClick: function () { return handleSort(col.key, "new"); } }));
                 }
                 else if (col.key === advSettings.sortId.sortId) {
                     if (advSettings.sortId.type === "desc") {
-                        sortIcon = (react_2.default.createElement(solid_2.BarsArrowDownIcon, { className: sortClassname, onClick: function () { return handleSort(col.key, "asc"); } }));
+                        sortIcon = (react_2.default.createElement(solid_2.BarsArrowDownIcon, { "data-testid": "table-column-sort-".concat(col.key), className: sortClassname, onClick: function () { return handleSort(col.key, "asc"); } }));
                     }
                     else if (advSettings.sortId.type === "asc") {
-                        sortIcon = (react_2.default.createElement(solid_2.BarsArrowUpIcon, { className: sortClassname, onClick: function () { return handleSort(col.key, "desc"); } }));
+                        sortIcon = (react_2.default.createElement(solid_2.BarsArrowUpIcon, { "data-testid": "table-column-sort-".concat(col.key), className: sortClassname, onClick: function () { return handleSort(col.key, "desc"); } }));
                     }
                 }
             }
@@ -2291,7 +2346,7 @@ var NewTable = function (props) {
                 // this reason.
                 className: "".concat(cellPadding, " w-px whitespace-nowrap text-left text-xs font-semibold uppercase tracking-wide ").concat(cursorClassname) },
                 react_2.default.createElement("div", { className: "hidden flex-row items-center md:flex" },
-                    react_2.default.createElement(popUp_1.PopUp, { darkMode: props.darkMode, darkModeBg: props.darkModeBg, anchor: "right", portal: true, lib: { Transition: react_1.Transition }, excludePortalIds: ["select-portal"], ctaComp: react_2.default.createElement(iconButton_1.IconButton, { testId: "table-add-column-btn", icon: react_2.default.createElement(solid_1.PlusIcon, { className: "h-5 w-5 text-gray" }) }), renderComp: react_2.default.createElement("div", { className: "w-80 p-4 normal-case tracking-normal" }, renderAddColumnPanel()) })),
+                    react_2.default.createElement(popUp_1.PopUp, { ref: addColumnPopUpRef, darkMode: props.darkMode, darkModeBg: props.darkModeBg, anchor: "right", portal: true, lib: { Transition: react_1.Transition }, excludePortalIds: ["select-portal"], ctaComp: react_2.default.createElement(iconButton_1.IconButton, { testId: "table-add-column-btn", icon: react_2.default.createElement(solid_1.PlusIcon, { className: "h-5 w-5 text-gray" }) }), renderComp: react_2.default.createElement("div", { className: "w-80 p-4 normal-case tracking-normal" }, renderAddColumnPanel()) })),
                 react_2.default.createElement("div", { className: "flex flex-row items-center md:hidden" },
                     react_2.default.createElement(iconButton_1.IconButton, { testId: "table-add-column-btn-mobile", icon: react_2.default.createElement(solid_1.PlusIcon, { className: "h-5 w-5 text-gray" }), onClick: function () { return handleAddColumnModal("new"); } }))));
         };
@@ -2577,7 +2632,7 @@ var NewTable = function (props) {
                         react_2.default.createElement(button_1.Button, { text: "Cancel", type: "light", onClick: handleModalEditClose }),
                         react_2.default.createElement(button_1.Button, { text: editDataIsLoading ? "Saving" : "Save", type: "normal", disable: editDataIsLoading, onClick: handleModalEditSave }))));
             } }),
-        react_2.default.createElement(modal_1.Modal, { open: addColumnModal ? true : false, title: editingColumn ? "Edit Column" : "Add Column", renderContent: renderAddColumnPanel, onClose: function () { return handleAddColumnModal(""); } }),
+        react_2.default.createElement(modal_1.Modal, { open: addColumnModal ? true : false, maxWidth: newColumnType === "formula" ? "2xl" : undefined, title: editingColumn ? "Edit Column" : "Add Column", renderContent: renderAddColumnPanel, onClose: function () { return handleAddColumnModal(""); } }),
         react_2.default.createElement(scrollShadow_1.ScrollShadow, { className: "w-full overflow-x-auto ".concat(isFlat
                 ? ""
                 : "".concat(borderRadius, " border ").concat(borderColor, " ").concat(bgColor, " shadow-sm")), darkMode: props.darkMode },