blixify-ui-web 1.2.138 → 1.2.139

package/lib/components/data/dataTemplate/activityModal.js

@@ -1,19 +1,15 @@
 "use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
     };
-})();
+    return __assign.apply(this, arguments);
+};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -89,404 +85,508 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ActivityModal = void 0;
 var solid_1 = require("@heroicons/react/24/solid");
 var axios_1 = __importDefault(require("axios"));
-var dayjs_1 = __importDefault(require("../../dayjs"));
 var react_1 = __importStar(require("react"));
-var list_1 = require("../../display/list");
-var tabs_1 = require("../../navigation/tabs");
+var uuid_1 = require("uuid");
+var dayjs_1 = __importDefault(require("../../dayjs"));
+var buttonGroup_1 = require("../../action/buttonGroup");
+var chatBase_1 = require("../../chat/chatBase");
 var dataWrapper_1 = require("../dataWrapper");
-var ActivityModal = /** @class */ (function (_super) {
-    __extends(ActivityModal, _super);
-    function ActivityModal() {
-        var _a, _b, _c;
-        var _this = _super.apply(this, arguments) || this;
-        _this.dataTemplateRef = (0, react_1.createRef)();
-        _this.state = {
-            type: ((_a = _this.props.activityLog) === null || _a === void 0 ? void 0 : _a.enableComments) &&
-                _this.props.activityLog.commentCollectionId
-                ? "comments"
-                : "logs",
-            commentViewType: "list",
-            commentDataId: "",
-            logsViewType: "list",
-            logsDataId: "",
-            userData: [],
-            userLoading: false,
+var writeQuery_1 = require("../writeQuery");
+var utils_1 = require("../utils");
+var activityComposer_1 = require("./activityComposer");
+var activityMentions_1 = require("./activityMentions");
+var activityChanges_1 = require("./activityChanges");
+var select_1 = require("../../input/select");
+var activityRecords_1 = require("./activityRecords");
+var commentModel = [
+    { id: "comment", name: "Comment", type: "textArea" },
+    { id: "userId", name: "Author", type: "string" },
+    { id: "createdAt", name: "Created", type: "date" },
+];
+var logsModel = [
+    { id: "type", name: "Type", type: "string" },
+    { id: "userId", name: "Author", type: "string" },
+    { id: "createdAt", name: "Created", type: "date" },
+    { id: "values", name: "Changes", type: "object" },
+];
+// Drafts, author caches and paging belong to one record and authenticated endpoint.
+var ActivityModal = function (props) {
+    var _a, _b, _c;
+    return (react_1.default.createElement(ActivityPanel, __assign({ key: JSON.stringify([
+            props.collectionId,
+            props.dataId,
+            props.initialTab,
+            props.devSettings.dbEndpoint,
+            props.devSettings.dbUserToken,
+            props.devSettings.dbAPIToken,
+            props.devSettings.server,
+            props.recordQuery,
+            props.recordTitleColumn,
+            (_a = props.activityLog) === null || _a === void 0 ? void 0 : _a.commentCollectionId,
+            (_b = props.activityLog) === null || _b === void 0 ? void 0 : _b.logsCollectionId,
+            (_c = props.activityLog) === null || _c === void 0 ? void 0 : _c.currentUserId,
+        ]) }, props)));
+};
+exports.ActivityModal = ActivityModal;
+var ActivityPanel = function (props) {
+    var _a, _b, _c, _d, _e, _f, _g;
+    var config = props.activityLog;
+    var commentsEnabled = !!((config === null || config === void 0 ? void 0 : config.enableComments) && config.commentCollectionId);
+    var logsEnabled = !!((config === null || config === void 0 ? void 0 : config.enableLogs) && config.logsCollectionId);
+    var _h = (0, react_1.useState)((_a = props.initialTab) !== null && _a !== void 0 ? _a : (commentsEnabled ? "comments" : "logs")), tab = _h[0], setTab = _h[1];
+    var _j = (0, react_1.useState)("all"), logType = _j[0], setLogType = _j[1];
+    var activeTab = tab === "comments" && commentsEnabled
+        ? "comments"
+        : logsEnabled
+            ? "logs"
+            : "comments";
+    var _k = (0, react_1.useState)(""), draft = _k[0], setDraft = _k[1];
+    var _l = (0, react_1.useState)([]), mentions = _l[0], setMentions = _l[1];
+    var _m = (0, react_1.useState)(null), editing = _m[0], setEditing = _m[1];
+    var _o = (0, react_1.useState)(""), deleteId = _o[0], setDeleteId = _o[1];
+    var _p = (0, react_1.useState)(false), busy = _p[0], setBusy = _p[1];
+    var _q = (0, react_1.useState)(""), error = _q[0], setError = _q[1];
+    var _r = (0, react_1.useState)(""), notice = _r[0], setNotice = _r[1];
+    var _s = (0, react_1.useState)(null), pendingPing = _s[0], setPendingPing = _s[1];
+    var _t = (0, react_1.useState)({}), authors = _t[0], setAuthors = _t[1];
+    var _u = (0, react_1.useState)([]), authorIds = _u[0], setAuthorIds = _u[1];
+    var _v = (0, react_1.useState)(null), rowCount = _v[0], setRowCount = _v[1];
+    var _w = (0, react_1.useState)([]), recordIds = _w[0], setRecordIds = _w[1];
+    var _x = (0, react_1.useState)(""), recordFilter = _x[0], setRecordFilter = _x[1];
+    var activeRecordId = props.dataId || recordFilter;
+    var titleColumn = (_c = (_b = config === null || config === void 0 ? void 0 : config.recordTitleColumn) !== null && _b !== void 0 ? _b : props.recordTitleColumn) !== null && _c !== void 0 ? _c : "title";
+    var recordScope = (_d = props.recordQuery) !== null && _d !== void 0 ? _d : [];
+    var recordLookup = (0, activityRecords_1.useActivityRecords)(props.devSettings, props.collectionId, titleColumn, recordScope, Array.from(new Set(__spreadArray(__spreadArray([], recordIds, true), (activeRecordId ? [activeRecordId] : []), true))), false);
+    var recordSearch = (0, activityRecords_1.useActivityRecords)(props.devSettings, props.collectionId, titleColumn, recordScope, [], !props.dataId);
+    var recordTitles = __assign(__assign({}, recordLookup.titles), recordSearch.titles);
+    var listRef = (0, react_1.useRef)(null);
+    var saving = (0, react_1.useRef)(false);
+    var mounted = (0, react_1.useRef)(true);
+    var members = props.devSettings.organisationMembers;
+    var isComments = activeTab === "comments";
+    var collectionId = isComments
+        ? config === null || config === void 0 ? void 0 : config.commentCollectionId
+        : config === null || config === void 0 ? void 0 : config.logsCollectionId;
+    (0, react_1.useEffect)(function () {
+        mounted.current = true;
+        return function () {
+            mounted.current = false;
         };
-        _this.commentModel = [
-            { id: "comment", name: "Comment", type: "textArea" },
-            {
-                id: "userId",
-                name: "User ID",
-                type: "string",
-                defaultValue: (_c = (_b = _this.props.activityLog) === null || _b === void 0 ? void 0 : _b.currentUserId) !== null && _c !== void 0 ? _c : "",
-                hideForm: true,
-                disabled: true,
-            },
-            {
-                id: "itemId",
-                name: "Item ID",
-                type: "string",
-                defaultValue: _this.props.dataId,
-                hideForm: true,
-                optional: true,
-                disabled: true,
-            },
-            {
-                id: "collectionId",
-                name: "Collection ID",
-                type: "string",
-                defaultValue: _this.props.collectionId,
-                hideForm: true,
-                optional: true,
-                disabled: true,
-            },
-            {
-                id: "createdAt",
-                name: "Created At",
-                type: "date",
-                defaultValue: (0, dayjs_1.default)().toDate(),
-                hideForm: true,
-                optional: true,
-                disabled: true,
-            },
-        ];
-        _this.logsModel = [
-            {
-                id: "type",
-                type: "list",
-                name: "Type",
-                listSelection: ["create", "update", "delete"],
-            },
-            {
-                id: "collectionId",
-                name: "Collection ID",
-                type: "string",
-                defaultValue: _this.props.collectionId,
-                hide: true,
-                hideForm: true,
-                disabled: true,
-            },
-            {
-                id: "itemId",
-                type: "string",
-                name: "Item ID",
-                defaultValue: _this.props.dataId,
-            },
-            { id: "values", type: "object", name: "Values" },
-            { id: "userId", type: "string", name: "User ID" },
-            { id: "userRole", type: "string", name: "User Role" },
-            { id: "organisationId", type: "string", name: "Organisation ID" },
-            {
-                id: "createdAt",
-                name: "Created At",
-                type: "date",
-                defaultValue: (0, dayjs_1.default)().toDate(),
-                hide: true,
-                hideForm: true,
-                disabled: true,
-            },
-        ];
-        //INFO : rows repeat the same authors — dedupe ids and cache per session so
-        // each user is fetched once instead of once per row
-        _this.userCache = {};
-        _this.handleRetrieveUser = function (userIds) { return __awaiter(_this, void 0, void 0, function () {
-            var uniqueIds, missingIds, err_1, userList;
-            var _this = this;
-            var _a;
-            return __generator(this, function (_b) {
-                switch (_b.label) {
+    }, []);
+    (0, react_1.useEffect)(function () {
+        var cancelled = false;
+        var handleLoadAuthors = function () { return __awaiter(void 0, void 0, void 0, function () {
+            var missing, names;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
                     case 0:
-                        this.setState({ userLoading: true });
-                        uniqueIds = Array.from(new Set(userIds)).filter(function (eachId) { return eachId; });
-                        if (!(uniqueIds.length > 0 && ((_a = this.props.activityLog) === null || _a === void 0 ? void 0 : _a.userAPIEndpoint))) return [3 /*break*/, 4];
-                        _b.label = 1;
-                    case 1:
-                        _b.trys.push([1, 3, , 4]);
-                        missingIds = uniqueIds.filter(function (eachId) { return !(eachId in _this.userCache); });
-                        return [4 /*yield*/, Promise.all(missingIds.map(function (eachId) { return __awaiter(_this, void 0, void 0, function () {
-                                var userRes;
-                                var _a, _b, _c;
+                        if (!(config === null || config === void 0 ? void 0 : config.userAPIEndpoint))
+                            return [2 /*return*/];
+                        missing = authorIds.filter(function (id) { return !authors[id] && !(members === null || members === void 0 ? void 0 : members.some(function (member) { return member.key === id; })); });
+                        return [4 /*yield*/, Promise.all(missing.map(function (id) { return __awaiter(void 0, void 0, void 0, function () {
+                                var response, data, _a;
+                                var _b, _c;
                                 return __generator(this, function (_d) {
                                     switch (_d.label) {
-                                        case 0: return [4 /*yield*/, axios_1.default.post((_b = (_a = this.props.activityLog) === null || _a === void 0 ? void 0 : _a.userAPIEndpoint) !== null && _b !== void 0 ? _b : "", { selectedUserId: eachId })];
+                                        case 0:
+                                            _d.trys.push([0, 2, , 3]);
+                                            return [4 /*yield*/, axios_1.default.post(config.userAPIEndpoint, {
+                                                    selectedUserId: id,
+                                                })];
                                         case 1:
-                                            userRes = _d.sent();
-                                            if (userRes && ((_c = userRes === null || userRes === void 0 ? void 0 : userRes.data) === null || _c === void 0 ? void 0 : _c.data)) {
-                                                this.userCache[eachId] = Array.isArray(userRes.data.data)
-                                                    ? userRes.data.data[0]
-                                                    : userRes.data.data;
-                                            }
-                                            return [2 /*return*/];
+                                            response = _d.sent();
+                                            data = Array.isArray((_b = response.data) === null || _b === void 0 ? void 0 : _b.data)
+                                                ? response.data.data[0]
+                                                : (_c = response.data) === null || _c === void 0 ? void 0 : _c.data;
+                                            return [2 /*return*/, [id, (data === null || data === void 0 ? void 0 : data.name) || id]];
+                                        case 2:
+                                            _a = _d.sent();
+                                            return [2 /*return*/, [id, id]];
+                                        case 3: return [2 /*return*/];
                                     }
                                 });
                             }); }))];
-                    case 2:
-                        _b.sent();
-                        return [3 /*break*/, 4];
-                    case 3:
-                        err_1 = _b.sent();
-                        return [3 /*break*/, 4];
-                    case 4:
-                        userList = uniqueIds
-                            .map(function (eachId) { return _this.userCache[eachId]; })
-                            .filter(function (eachUser) { return eachUser; });
-                        this.setState({ userData: userList, userLoading: false });
+                    case 1:
+                        names = _a.sent();
+                        if (!cancelled && names.length)
+                            setAuthors(function (previous) { return (__assign(__assign({}, previous), Object.fromEntries(names))); });
                         return [2 /*return*/];
                 }
             });
         }); };
-        _this.renderLogList = function (_, prettierData, loading) {
-            var dataList = [];
-            prettierData.map(function (eachData) {
-                var _a, _b, _c, _d;
-                var hasDifference = false;
-                var tagBgColor = "bg-green-50";
-                var tagTextColor = "text-green-500";
-                if (eachData.type === "update") {
-                    tagBgColor = "bg-blue-50";
-                    tagTextColor = "text-blue-500";
-                }
-                else if (eachData.type === "delete") {
-                    tagBgColor = "bg-red-50";
-                    tagTextColor = "text-red-500";
-                }
-                var userFound = (_a = _this.state.userData) === null || _a === void 0 ? void 0 : _a.find(function (eachUser) { return eachUser._id === eachData.userId; });
-                var userName = (_b = eachData.userId) !== null && _b !== void 0 ? _b : "User not found";
-                if (userFound && (userFound === null || userFound === void 0 ? void 0 : userFound.name)) {
-                    userName = userFound.name;
-                    if (eachData.userRole) {
-                        userName += " (".concat(eachData.userRole, ")");
-                    }
-                }
-                var eachDataElement = {
-                    id: eachData._id,
-                    title: userName,
-                    date: "Date: " + eachData.createdAt,
-                    dataId: "Data ID: " + ((_c = eachData.itemId) !== null && _c !== void 0 ? _c : ""),
-                };
-                if (eachData.values) {
-                    eachDataElement["changes"] = (react_1.default.createElement("p", { className: "mt-6 font-semibold text-primary-500" }, "Changes:"));
-                    Object.keys(eachData.values).forEach(function (eachKey) {
-                        var _a;
-                        var selectedValue = (_a = eachData.values) === null || _a === void 0 ? void 0 : _a[eachKey];
-                        if (selectedValue) {
-                            var columnId = selectedValue.columnId === "title"
-                                ? "Data Title"
-                                : selectedValue.columnId;
-                            if (eachData.type === "create" || eachData.type === "delete") {
-                                eachDataElement[columnId] = (react_1.default.createElement("p", null,
-                                    selectedValue.columnId,
-                                    " :",
-                                    " ",
-                                    react_1.default.createElement("span", null, JSON.stringify(selectedValue.newValue))));
-                            }
-                            else if (eachData.type === "update") {
-                                if (JSON.stringify(selectedValue.newValue) !==
-                                    JSON.stringify(selectedValue.oldValue)) {
-                                    hasDifference = true;
-                                    eachDataElement[columnId] = (react_1.default.createElement("div", { className: "flex flex-col space-y-2 bg-white border rounded-md p-4" },
-                                        react_1.default.createElement("p", { className: "font-bold text-primary-500" },
-                                            "Column ID: ",
-                                            selectedValue.columnId),
-                                        react_1.default.createElement("div", { className: "break-all space-y-2" },
-                                            react_1.default.createElement("p", null,
-                                                "New Value :",
-                                                " ",
-                                                react_1.default.createElement("span", null, JSON.stringify(selectedValue.newValue))),
-                                            react_1.default.createElement("p", null,
-                                                "Old Value :",
-                                                " ",
-                                                react_1.default.createElement("span", null, JSON.stringify(selectedValue.oldValue))))));
-                                }
-                            }
-                        }
-                    });
-                }
-                eachDataElement["action"] = (react_1.default.createElement("div", null,
-                    react_1.default.createElement("p", { className: "rounded-full ".concat(tagBgColor, " px-2 text-xs font-semibold leading-5 ").concat(tagTextColor) }, (_d = eachData.type) === null || _d === void 0 ? void 0 : _d.toUpperCase())));
-                if (eachData.type === "update" && hasDifference)
-                    dataList.push(eachDataElement);
-                else if (eachData.type === "create" || eachData.type === "delete")
-                    dataList.push(eachDataElement);
-                return null;
-            });
-            return (react_1.default.createElement(list_1.List, { className: "mb-4", list: dataList, loading: loading, hidePagination: true }));
+        handleLoadAuthors();
+        return function () {
+            cancelled = true;
         };
-        _this.renderTabContent = function (type) {
-            var _a, _b, _c, _d, _e, _f;
-            var dtViewType = "list";
-            var dtDataId = "";
-            var schema = [];
-            var allEditable = false;
-            var collectionId = "";
-            var viewSettings = undefined;
-            var bareListComponent = undefined;
-            var additionalQuery = [];
-            var bareListFilterQuery = [
-                {
-                    type: "=",
-                    queryId: "collectionId",
-                    value: _this.props.collectionId,
-                },
-            ];
-            if (_this.props.dataId) {
-                bareListFilterQuery.push({
-                    type: "=",
-                    queryId: "itemId",
-                    value: _this.props.dataId,
-                });
+    }, [authorIds, authors, members, config === null || config === void 0 ? void 0 : config.userAPIEndpoint]);
+    var handleAuthorName = function (id) {
+        var _a;
+        return ((_a = members === null || members === void 0 ? void 0 : members.find(function (member) { return member.key === id; })) === null || _a === void 0 ? void 0 : _a.label) ||
+            authors[id !== null && id !== void 0 ? id : ""] ||
+            id ||
+            "Unknown author";
+    };
+    var handleResetDraft = function () {
+        setDraft("");
+        setMentions([]);
+        setEditing(null);
+    };
+    var handleWrite = function (type, data) { return __awaiter(void 0, void 0, void 0, function () {
+        var query, result;
+        var _a;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    query = new writeQuery_1.WriteQuery({
+                        dbModule: axios_1.default,
+                        dbType: props.devSettings.server,
+                        dbCollection: (_a = config === null || config === void 0 ? void 0 : config.commentCollectionId) !== null && _a !== void 0 ? _a : "",
+                        dbEndpoint: props.devSettings.dbEndpoint,
+                        dbAPIToken: props.devSettings.dbAPIToken,
+                        dbUserToken: props.devSettings.dbUserToken,
+                    });
+                    return [4 /*yield*/, query.call(type, data)];
+                case 1:
+                    result = _b.sent();
+                    if (result === false)
+                        throw new Error("Comment was not saved");
+                    return [2 /*return*/, result];
             }
-            var bareUpdateColumnType = undefined;
-            var bareUpdatePrefill = [];
-            var hideSearch = false;
-            switch (type) {
-                case "comments":
-                    if (_this.state.commentViewType === "update" &&
-                        _this.state.commentDataId === "new") {
-                        schema = [{ id: "comment", name: "Comment", type: "textArea" }];
+        });
+    }); };
+    var handleNotify = function (event) { return __awaiter(void 0, void 0, void 0, function () {
+        var _a;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    if (!(config === null || config === void 0 ? void 0 : config.onMention) || !event.mentionedUserIds.length)
+                        return [2 /*return*/];
+                    _b.label = 1;
+                case 1:
+                    _b.trys.push([1, 3, , 4]);
+                    return [4 /*yield*/, config.onMention(event)];
+                case 2:
+                    _b.sent();
+                    if (mounted.current) {
+                        setPendingPing(null);
+                        setNotice("Comment saved and mention notifications sent.");
                     }
-                    else
-                        schema = _this.commentModel;
-                    dtViewType = _this.state.commentViewType;
-                    dtDataId = _this.state.commentDataId;
-                    allEditable = true;
-                    collectionId = (_b = (_a = _this.props.activityLog) === null || _a === void 0 ? void 0 : _a.commentCollectionId) !== null && _b !== void 0 ? _b : "";
-                    viewSettings = {
-                        feedsSettings: {
-                            customFeedsData: function (_, prettierData) {
-                                var dataList = [];
-                                prettierData.map(function (eachData) {
-                                    var _a, _b;
-                                    var userFound = (_a = _this.state.userData) === null || _a === void 0 ? void 0 : _a.find(function (eachUser) { return eachUser._id === eachData.userId; });
-                                    dataList.push({
-                                        id: eachData._id,
-                                        title: react_1.default.createElement("h1", null, (_b = userFound === null || userFound === void 0 ? void 0 : userFound.name) !== null && _b !== void 0 ? _b : eachData.userId),
-                                        content: react_1.default.createElement("p", null, eachData.comment),
-                                        desc: react_1.default.createElement("p", null, eachData.createdAt),
-                                        icon: react_1.default.createElement(solid_1.ChatBubbleLeftIcon, { className: "h-5 w-5 text-white" }),
-                                        iconClass: "bg-primary-500",
-                                    });
-                                    return null;
-                                });
-                                return dataList;
-                            },
-                        },
-                    };
-                    bareUpdateColumnType = "one";
-                    bareUpdatePrefill = function (data) {
-                        var _a, _b, _c, _d, _e, _f, _g;
-                        return [
-                            {
-                                key: "userId",
-                                value: (_c = (_a = data === null || data === void 0 ? void 0 : data.userId) !== null && _a !== void 0 ? _a : (_b = _this.props.activityLog) === null || _b === void 0 ? void 0 : _b.currentUserId) !== null && _c !== void 0 ? _c : null,
-                            },
-                            {
-                                key: "itemId",
-                                value: (_e = (_d = data === null || data === void 0 ? void 0 : data.itemId) !== null && _d !== void 0 ? _d : _this.props.dataId) !== null && _e !== void 0 ? _e : null,
-                            },
-                            {
-                                key: "collectionId",
-                                value: (_f = data === null || data === void 0 ? void 0 : data.collectionId) !== null && _f !== void 0 ? _f : _this.props.collectionId,
-                            },
-                            {
-                                key: "createdAt",
-                                value: (_g = data === null || data === void 0 ? void 0 : data.createdAt) !== null && _g !== void 0 ? _g : (0, dayjs_1.default)().toDate(),
-                            },
-                        ];
-                    };
-                    if ((_c = _this.props.activityLog) === null || _c === void 0 ? void 0 : _c.commentQuery) {
-                        bareListFilterQuery = __spreadArray(__spreadArray([], bareListFilterQuery, true), _this.props.activityLog.commentQuery, true);
+                    return [3 /*break*/, 4];
+                case 3:
+                    _a = _b.sent();
+                    if (mounted.current) {
+                        setPendingPing(event);
+                        setNotice("Comment saved, but mention notifications could not be sent. Retry notifications without posting again.");
                     }
-                    break;
-                case "logs":
-                    schema = _this.logsModel;
-                    dtViewType = _this.state.logsViewType;
-                    dtDataId = _this.state.logsDataId;
-                    collectionId = (_e = (_d = _this.props.activityLog) === null || _d === void 0 ? void 0 : _d.logsCollectionId) !== null && _e !== void 0 ? _e : "";
-                    hideSearch = true;
-                    viewSettings = { listImage: "image" };
-                    bareListComponent = function (data, prettierData, loading) {
-                        return _this.renderLogList(data, prettierData, loading);
-                    };
-                    if ((_f = _this.props.activityLog) === null || _f === void 0 ? void 0 : _f.logQuery) {
-                        bareListFilterQuery = __spreadArray(__spreadArray([], bareListFilterQuery, true), _this.props.activityLog.logQuery, true);
+                    return [3 /*break*/, 4];
+                case 4: return [2 /*return*/];
+            }
+        });
+    }); };
+    var handleSubmit = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var commentId, savedMentions, mentionedUserIds, userId, comment, result, savedId, recipients, _a;
+        var _b;
+        var _c, _d, _e, _f, _g, _h, _j, _k, _l;
+        return __generator(this, function (_m) {
+            switch (_m.label) {
+                case 0:
+                    if (saving.current || !draft.trim() || !commentsEnabled || pendingPing)
+                        return [2 /*return*/];
+                    saving.current = true;
+                    setBusy(true);
+                    setError("");
+                    setNotice("");
+                    commentId = (_d = (_c = editing === null || editing === void 0 ? void 0 : editing._id) !== null && _c !== void 0 ? _c : editing === null || editing === void 0 ? void 0 : editing.id) !== null && _d !== void 0 ? _d : (0, uuid_1.v4)();
+                    savedMentions = (0, activityMentions_1.handleValidMentions)(draft, mentions);
+                    mentionedUserIds = Array.from(new Set(savedMentions.map(function (mention) { return mention.userId; })));
+                    userId = (_f = (_e = editing === null || editing === void 0 ? void 0 : editing.userId) !== null && _e !== void 0 ? _e : config === null || config === void 0 ? void 0 : config.currentUserId) !== null && _f !== void 0 ? _f : null;
+                    comment = __assign({ comment: draft, mentions: savedMentions, mentionedUserIds: mentionedUserIds, userId: userId, collectionId: props.collectionId, itemId: editing ? ((_g = editing.itemId) !== null && _g !== void 0 ? _g : null) : activeRecordId || null }, (editing
+                        ? { updatedAt: new Date() }
+                        : (_b = {},
+                            _b[(0, utils_1.parseServerId)(props.devSettings.server)] = commentId,
+                            _b.createdAt = new Date(),
+                            _b)));
+                    _m.label = 1;
+                case 1:
+                    _m.trys.push([1, 4, 5, 6]);
+                    return [4 /*yield*/, handleWrite(editing ? "update" : "create", {
+                            id: commentId,
+                            data: comment,
+                        })];
+                case 2:
+                    result = _m.sent();
+                    savedId = !editing && typeof result === "string"
+                        ? result
+                        : !editing && Array.isArray(result)
+                            ? ((_h = result[0]) !== null && _h !== void 0 ? _h : commentId)
+                            : commentId;
+                    // Notification delivery still runs if the panel was closed during the save.
+                    if (mounted.current) {
+                        handleResetDraft();
+                        // New comments sort onto page one; edits retain the reader's page.
+                        if (editing)
+                            (_j = listRef.current) === null || _j === void 0 ? void 0 : _j.handleRefreshCurrentPage();
+                        else
+                            (_k = listRef.current) === null || _k === void 0 ? void 0 : _k.handleRefresh();
+                        setNotice("Comment saved.");
                     }
-                    additionalQuery = [
-                        {
-                            type: "list",
-                            value: "type",
-                            options: ["create", "update", "delete"],
-                        },
-                    ];
-                    break;
+                    recipients = mentionedUserIds.filter(function (id) {
+                        var _a;
+                        return id !== (config === null || config === void 0 ? void 0 : config.currentUserId) &&
+                            !((_a = editing === null || editing === void 0 ? void 0 : editing.mentionedUserIds) !== null && _a !== void 0 ? _a : []).includes(id);
+                    });
+                    if (mounted.current && recipients.length && !(config === null || config === void 0 ? void 0 : config.onMention))
+                        setNotice("Comment saved. Mentions recorded; notifications are not connected.");
+                    return [4 /*yield*/, handleNotify({
+                            commentId: savedId,
+                            commentCollectionId: (_l = config === null || config === void 0 ? void 0 : config.commentCollectionId) !== null && _l !== void 0 ? _l : "",
+                            collectionId: props.collectionId,
+                            itemId: comment.itemId,
+                            comment: comment.comment,
+                            userId: userId,
+                            mentionedUserIds: recipients,
+                        })];
+                case 3:
+                    _m.sent();
+                    return [3 /*break*/, 6];
+                case 4:
+                    _a = _m.sent();
+                    if (mounted.current)
+                        setError("Could not save your comment. Your draft is still here; please try again.");
+                    return [3 /*break*/, 6];
+                case 5:
+                    saving.current = false;
+                    if (mounted.current)
+                        setBusy(false);
+                    return [7 /*endfinally*/];
+                case 6: return [2 /*return*/];
             }
-            return (react_1.default.createElement("div", { className: "w-full" },
-                react_1.default.createElement(dataWrapper_1.DataTemplateWrapper, { ref: _this.dataTemplateRef, title: "", type: dtViewType, id: dtDataId, collectionId: collectionId, schema: schema, workspace: {
-                        apiEndpoint: _this.props.devSettings.dbEndpoint,
-                        apiEndpointToken: _this.props.devSettings.dbAPIToken,
-                        apiEndpointType: _this.props.devSettings.server,
-                        apiUserToken: _this.props.devSettings.dbUserToken,
-                        assetEndpoint: _this.props.devSettings.imageEndpoint,
-                        assetUploadEndpoint: _this.props.devSettings.uploadEndpoint,
-                    }, additionalQuery: additionalQuery, edit: {
-                        allEditable: allEditable,
-                        deleteBtn: _this.state.type === "comments",
-                    }, sort: { sortId: "createdAt", type: "desc" }, organise: { hideSearch: hideSearch, breadcrumbType: "button" }, bareSettings: {
-                        bareListFilterQuery: bareListFilterQuery,
-                        bareListHandleData: function (data) {
-                            var userIds = data.map(function (eachData) { return eachData.userId; });
-                            _this.handleRetrieveUser(userIds);
-                        },
-                        bareListComponent: bareListComponent,
-                        bareUpdateColumnType: bareUpdateColumnType,
-                        bareUpdatePrefill: bareUpdatePrefill,
-                    }, handleNavigate: function (type, selectedId) {
-                        if (_this.state.type === "comments") {
-                            _this.setState({
-                                commentDataId: selectedId,
-                                commentViewType: type,
-                            });
-                        }
-                    }, viewSettings: viewSettings })));
-        };
-        return _this;
-    }
-    ActivityModal.prototype.render = function () {
-        var _this = this;
-        var _a, _b, _c, _d;
-        var tabList = [];
-        if (((_a = this.props.activityLog) === null || _a === void 0 ? void 0 : _a.enableComments) &&
-            ((_b = this.props.activityLog) === null || _b === void 0 ? void 0 : _b.commentCollectionId))
-            tabList.push({ id: "comments", name: "Comments", href: "#" });
-        if (((_c = this.props.activityLog) === null || _c === void 0 ? void 0 : _c.enableLogs) &&
-            ((_d = this.props.activityLog) === null || _d === void 0 ? void 0 : _d.logsCollectionId))
-            tabList.push({ id: "logs", name: "Logs", href: "#" });
-        return (react_1.default.createElement("div", { className: "flex flex-col p-4 space-y-3 w-full" },
-            react_1.default.createElement("p", { className: "text-base" },
-                "You're viewing ",
-                this.state.type,
-                " from",
-                " ",
-                this.props.dataId
-                    ? " Data Id : ".concat(this.props.dataId)
-                    : "all data of ".concat(this.props.title)),
-            react_1.default.createElement(tabs_1.Tabs, { tabs: tabList, selectedId: this.state.type, onClick: function (id) {
-                    if (id === "comments" || id === "logs") {
-                        _this.setState({
-                            type: id,
-                            commentViewType: "list",
-                            commentDataId: "",
-                            logsViewType: "list",
-                            logsDataId: "",
-                        }, function () {
+        });
+    }); };
+    var handleDelete = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var _a;
+        var _b, _c;
+        return __generator(this, function (_d) {
+            switch (_d.label) {
+                case 0:
+                    if (saving.current || !deleteId)
+                        return [2 /*return*/];
+                    saving.current = true;
+                    setBusy(true);
+                    setError("");
+                    _d.label = 1;
+                case 1:
+                    _d.trys.push([1, 3, 4, 5]);
+                    return [4 /*yield*/, handleWrite("delete", { id: deleteId })];
+                case 2:
+                    _d.sent();
+                    if (!mounted.current)
+                        return [2 /*return*/];
+                    if (((_b = editing === null || editing === void 0 ? void 0 : editing._id) !== null && _b !== void 0 ? _b : editing === null || editing === void 0 ? void 0 : editing.id) === deleteId)
+                        handleResetDraft();
+                    setDeleteId("");
+                    setNotice("Comment deleted.");
+                    // Deleting the last row on a later page would hide the feed's paginator.
+                    (_c = listRef.current) === null || _c === void 0 ? void 0 : _c.handleRefresh();
+                    return [3 /*break*/, 5];
+                case 3:
+                    _a = _d.sent();
+                    if (mounted.current)
+                        setError("Could not delete the comment. Please try again.");
+                    return [3 /*break*/, 5];
+                case 4:
+                    saving.current = false;
+                    if (mounted.current)
+                        setBusy(false);
+                    return [7 /*endfinally*/];
+                case 5: return [2 /*return*/];
+            }
+        });
+    }); };
+    var renderComment = function (record) {
+        var _a, _b;
+        var text = String((_a = record.comment) !== null && _a !== void 0 ? _a : "");
+        var savedMentions = (0, activityMentions_1.handleValidMentions)(text, Array.isArray(record.mentions) ? record.mentions : []);
+        var parts = [];
+        var cursor = 0;
+        savedMentions.forEach(function (mention) {
+            parts.push(text.slice(cursor, mention.start));
+            parts.push(react_1.default.createElement("span", { key: mention.start, className: "rounded bg-primary-50 px-0.5 font-medium text-primary-700" }, text.slice(mention.start, mention.end)));
+            cursor = mention.end;
+        });
+        parts.push(text.slice(cursor));
+        var id = (_b = record._id) !== null && _b !== void 0 ? _b : record.id;
+        return (react_1.default.createElement("div", { className: "space-y-2" },
+            react_1.default.createElement("p", { className: "whitespace-pre-wrap break-words" }, parts),
+            react_1.default.createElement("div", { className: "flex gap-3 text-xs text-gray-500" },
+                record.updatedAt && react_1.default.createElement("span", null, "Edited"),
+                react_1.default.createElement("button", { type: "button", disabled: busy || !!pendingPing, onClick: function (event) {
+                        event.stopPropagation();
+                        setEditing(record);
+                        setDraft(text);
+                        setMentions(savedMentions);
+                        setError("");
+                    } }, "Edit"),
+                react_1.default.createElement("button", { type: "button", disabled: busy || !!pendingPing, onClick: function (event) {
+                        event.stopPropagation();
+                        setDeleteId(id);
+                    } }, "Delete"))));
+    };
+    var renderFeedData = function (records) {
+        return records.map(function (record) {
+            var _a, _b, _c, _d;
+            var name = handleAuthorName(record.userId);
+            var date = record.createdAt ? (0, dayjs_1.default)(record.createdAt) : null;
+            var count = (0, activityChanges_1.handleActivityChanges)(record).length;
+            var action = record.type === "update"
+                ? "updated ".concat(count, " field").concat(count === 1 ? "" : "s")
+                : record.type === "create"
+                    ? "created this record"
+                    : record.type === "delete"
+                        ? "deleted this record"
+                        : ((_a = record.type) !== null && _a !== void 0 ? _a : "Activity");
+            return {
+                id: (_b = record._id) !== null && _b !== void 0 ? _b : record.id,
+                desc: null,
+                title: (react_1.default.createElement("span", { className: "flex flex-wrap items-baseline gap-x-3 gap-y-1" },
+                    react_1.default.createElement("span", null, isComments
+                        ? name
+                        : "".concat(name).concat(record.userRole ? " (".concat(record.userRole, ")") : "", " ").concat(action)),
+                    (date === null || date === void 0 ? void 0 : date.isValid()) && (react_1.default.createElement("time", { className: "text-xs font-normal ".concat(props.darkMode ? "text-gray-400" : "text-gray-500"), dateTime: date.toISOString(), title: date.format("YYYY-MM-DD HH:mm:ss") }, date.format("MMM D, HH:mm"))))),
+                icon: isComments ? ((0, chatBase_1.renderChatAvatar)({ id: record.userId, name: name }, "h-7 w-7 sm:h-9 sm:w-9", props.darkMode)) : (react_1.default.createElement(solid_1.ClockIcon, { className: "h-4 w-4 text-primary-500" })),
+                iconClass: isComments
+                    ? ""
+                    : props.darkMode
+                        ? "bg-gray-800"
+                        : "bg-primary-50",
+                content: (react_1.default.createElement("div", { className: "space-y-2" },
+                    record.itemId ? (props.onOpenRecord && recordTitles[record.itemId] ? (react_1.default.createElement("button", { type: "button", className: "text-left text-xs font-medium text-primary-500 break-words", onClick: function (event) {
                             var _a;
-                            (_a = _this.dataTemplateRef.current) === null || _a === void 0 ? void 0 : _a.handleRefresh();
-                        });
-                    }
-                } }),
-            this.renderTabContent(this.state.type)));
+                            event.stopPropagation();
+                            (_a = props.onOpenRecord) === null || _a === void 0 ? void 0 : _a.call(props, record.itemId);
+                        } }, recordTitles[record.itemId])) : (react_1.default.createElement("p", { className: "break-words text-xs text-gray-500" }, (_c = recordTitles[record.itemId]) !== null && _c !== void 0 ? _c : "Data ".concat(record.itemId, " (unavailable)")))) : (react_1.default.createElement("p", { className: "text-xs text-gray-500" }, "Collection discussion")),
+                    isComments ? (renderComment(record)) : (react_1.default.createElement(activityChanges_1.ActivityChanges, { key: (_d = record._id) !== null && _d !== void 0 ? _d : record.id, record: record, darkMode: props.darkMode, showRecord: false })))),
+            };
+        });
     };
-    return ActivityModal;
-}(react_1.Component));
-exports.ActivityModal = ActivityModal;
+    if (!commentsEnabled && !logsEnabled)
+        return null;
+    var filters = __spreadArray(__spreadArray(__spreadArray([
+        { type: "=", queryId: "collectionId", value: props.collectionId }
+    ], (activeRecordId
+        ? [{ type: "=", queryId: "itemId", value: activeRecordId }]
+        : []), true), ((_e = (isComments ? config === null || config === void 0 ? void 0 : config.commentQuery : config === null || config === void 0 ? void 0 : config.logQuery)) !== null && _e !== void 0 ? _e : []), true), (!isComments && logType !== "all"
+        ? [{ type: "=", queryId: "type", value: logType }]
+        : []), true);
+    return (react_1.default.createElement("div", { className: "min-w-0 space-y-4 p-1 sm:p-3 ".concat(props.darkMode ? "text-gray-100" : "text-gray-800") },
+        react_1.default.createElement("div", { className: "flex flex-wrap items-center justify-between gap-3" },
+            react_1.default.createElement(buttonGroup_1.ButtonGroup, { darkMode: props.darkMode, size: "small", selectedId: activeTab, selection: __spreadArray(__spreadArray([], (commentsEnabled ? [{ id: "comments", name: "Comments" }] : []), true), (logsEnabled ? [{ id: "logs", name: "Logs" }] : []), true), onClick: function (nextTab) {
+                    if (nextTab === activeTab)
+                        return;
+                    setRowCount(null);
+                    setTab(nextTab);
+                } }),
+            react_1.default.createElement("span", { className: "text-xs text-gray-500" }, activeRecordId
+                ? "Activity for ".concat((_f = recordTitles[activeRecordId]) !== null && _f !== void 0 ? _f : activeRecordId)
+                : "All activity in ".concat(props.title))),
+        !props.dataId && (react_1.default.createElement("div", null,
+            react_1.default.createElement(select_1.Select, { id: "activity-record-filter", label: "Filter by data", value: recordFilter, darkMode: props.darkMode, disabled: busy || !!pendingPing, options: __spreadArray(__spreadArray([
+                    { key: "", label: "All data" }
+                ], recordSearch.options, true), (recordFilter &&
+                    !recordSearch.options.some(function (option) { return option.key === recordFilter; })
+                    ? [
+                        {
+                            key: recordFilter,
+                            label: (_g = recordTitles[recordFilter]) !== null && _g !== void 0 ? _g : recordFilter,
+                        },
+                    ]
+                    : []), true), onSearch: recordSearch.setSearch, onChange: function (id) {
+                    if (id === recordFilter)
+                        return;
+                    if (draft.trim() &&
+                        !window.confirm("Discard this comment draft and change the data filter?"))
+                        return;
+                    handleResetDraft();
+                    setDeleteId("");
+                    setNotice("");
+                    setError("");
+                    setRowCount(null);
+                    setRecordFilter(id);
+                } }),
+            recordSearch.searchError && (react_1.default.createElement("p", { role: "status", className: "text-xs text-gray-500" }, "Data search is unavailable. Activity is still shown below.")))),
+        !isComments && (react_1.default.createElement(buttonGroup_1.ButtonGroup, { darkMode: props.darkMode, size: "small", selectedId: logType, selection: [
+                { id: "all", name: "All" },
+                { id: "create", name: "Created" },
+                { id: "update", name: "Updated" },
+                { id: "delete", name: "Deleted" },
+            ], onClick: function (nextType) {
+                if (nextType === logType)
+                    return;
+                setRowCount(null);
+                setLogType(nextType);
+            } })),
+        error && (react_1.default.createElement("p", { role: "alert", className: "text-sm text-red-500" }, error)),
+        notice && (react_1.default.createElement("div", { role: "status", className: "space-y-2 text-sm" },
+            react_1.default.createElement("p", null, notice),
+            pendingPing && (react_1.default.createElement("div", { className: "flex gap-3" },
+                react_1.default.createElement("button", { type: "button", disabled: busy, className: "font-medium text-primary-500", onClick: function () { return __awaiter(void 0, void 0, void 0, function () {
+                        return __generator(this, function (_a) {
+                            switch (_a.label) {
+                                case 0:
+                                    if (saving.current)
+                                        return [2 /*return*/];
+                                    saving.current = true;
+                                    setBusy(true);
+                                    return [4 /*yield*/, handleNotify(pendingPing)];
+                                case 1:
+                                    _a.sent();
+                                    saving.current = false;
+                                    if (mounted.current)
+                                        setBusy(false);
+                                    return [2 /*return*/];
+                            }
+                        });
+                    }); } }, "Retry notifications"),
+                react_1.default.createElement("button", { type: "button", disabled: busy, onClick: function () {
+                        setPendingPing(null);
+                        setNotice("Comment saved. Notification retry dismissed.");
+                    } }, "Dismiss"))))),
+        isComments && (react_1.default.createElement(activityComposer_1.ActivityComposer, { value: draft, mentions: mentions, members: members !== null && members !== void 0 ? members : [], darkMode: props.darkMode, busy: busy || !!pendingPing, editing: !!editing, onChange: function (value, selectedMentions) {
+                setDraft(value);
+                setMentions(selectedMentions);
+            }, onSubmit: handleSubmit, onCancel: handleResetDraft })),
+        deleteId && (react_1.default.createElement("div", { role: "alert", className: "flex flex-wrap items-center gap-3 rounded-lg border border-red-200 p-3 text-sm" },
+            react_1.default.createElement("span", null, "Delete this comment?"),
+            react_1.default.createElement("button", { type: "button", disabled: busy, className: "font-medium text-red-500", onClick: handleDelete }, "Confirm delete"),
+            react_1.default.createElement("button", { type: "button", disabled: busy, onClick: function () { return setDeleteId(""); } }, "Cancel"))),
+        react_1.default.createElement(dataWrapper_1.DataTemplateWrapper, { key: JSON.stringify([activeTab, filters]), ref: listRef, title: "", type: "list", collectionId: collectionId !== null && collectionId !== void 0 ? collectionId : "", schema: isComments ? commentModel : logsModel, workspace: {
+                apiEndpoint: props.devSettings.dbEndpoint,
+                apiEndpointType: props.devSettings.server,
+                apiEndpointToken: props.devSettings.dbAPIToken,
+                apiUserToken: props.devSettings.dbUserToken,
+                assetEndpoint: props.devSettings.imageEndpoint,
+            }, devSettings: props.devSettings, edit: { allEditable: false, createBtn: false, deleteBtn: false }, sort: { sortId: "createdAt", type: "desc" }, organise: { hideSearch: true, darkMode: props.darkMode }, bareSettings: {
+                bareNewDTW: true,
+                bareListFilterQuery: filters,
+                bareListHandleData: function (records) {
+                    setRowCount(records.length);
+                    var itemIds = Array.from(new Set(records.map(function (record) { return record.itemId; }).filter(Boolean)));
+                    setRecordIds(function (previous) {
+                        return JSON.stringify(previous) === JSON.stringify(itemIds)
+                            ? previous
+                            : itemIds;
+                    });
+                    var ids = Array.from(new Set(records.map(function (record) { return record.userId; }).filter(Boolean)));
+                    setAuthorIds(function (previous) {
+                        return JSON.stringify(previous) === JSON.stringify(ids) ? previous : ids;
+                    });
+                },
+            }, viewSettings: { feedsSettings: { customFeedsData: renderFeedData } }, renderSettings: {
+                renderListUI: function (_actions, _filters, data) { return (react_1.default.createElement(react_1.default.Fragment, null,
+                    data,
+                    rowCount === 0 && (react_1.default.createElement("p", { className: "py-8 text-center text-sm text-gray-500" }, isComments
+                        ? "No comments yet. Start the conversation above."
+                        : "No logs match this view.")))); },
+            } })));
+};
 //# sourceMappingURL=activityModal.js.map