blixify-ui-web 0.2.46 → 0.2.48

package/lib/components/data/dataTemplate/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/data/dataTemplate/index.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAQN,MAAM,OAAO,CAAC;AAsDf,OAAO,EACL,iBAAiB,EAKlB,MAAM,kBAAkB,CAAC;AAO1B,eAAO,MAAM,YAAY,mFA+jJvB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/data/dataTemplate/index.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAQN,MAAM,OAAO,CAAC;AAsDf,OAAO,EACL,iBAAiB,EAKlB,MAAM,kBAAkB,CAAC;AAQ1B,eAAO,MAAM,YAAY,mFAq3JvB,CAAC"}

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

@@ -110,6 +110,7 @@ var modal_1 = require("../../display/modal");
 var notification_1 = require("../../display/notification");
 var stepper_1 = require("../../display/stepper");
 var table_1 = require("../../display/table");
+var address_1 = require("../../input/address");
 var form_1 = require("../../input/form");
 var select_1 = require("../../input/select");
 var textInput_1 = require("../../input/textInput");
@@ -130,10 +131,13 @@ var dataStateModel_1 = require("./dataStateModel");
 var indexedDb_1 = require("./indexedDb");
 var pagination_1 = require("./pagination");
 var settingsModal_1 = require("./settingsModal");
+var mapView_1 = require("../../display/mapView");
 exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
     var formRef = (0, react_1.createRef)();
     var objectFormRef = (0, react_1.createRef)();
+    var listAddressFromRef = (0, react_1.createRef)();
+    var listAddressInputRef = (0, react_1.createRef)();
     var modalFormInputRefs = props.model.map(function () { return (0, react_1.createRef)(); });
     var batchUpdateFormRef = (0, react_1.createRef)();
     var batchUpdateColumnIdRef = (0, react_1.createRef)();
@@ -201,15 +205,21 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
     var _38 = (0, react_1.useState)({}), selectedData = _38[0], setSelectedData = _38[1];
     var _39 = (0, react_1.useState)(""), selectedObjectStructureId = _39[0], setSelectedObjectStructureId = _39[1];
     var _40 = (0, react_1.useState)(""), selectedObjectId = _40[0], setSelectedObjectId = _40[1];
-    var _41 = (0, react_1.useState)({}), selectedObjectData = _41[0], setSelectedObjectData = _41[1];
-    var _42 = (0, react_1.useState)(false), referenceLoading = _42[0], setReferenceLoading = _42[1];
-    var _43 = (0, react_1.useState)({}), referencesOptions = _43[0], setReferencesOptions = _43[1];
-    var _44 = (0, react_1.useState)({}), referenceDeleteTableData = _44[0], setReferenceDeleteTableData = _44[1];
-    var _45 = (0, react_1.useState)(0), referenceDeleteIndex = _45[0], setReferenceDeleteIndex = _45[1];
-    var _46 = (0, react_1.useState)({}), referenceModelSchema = _46[0], setReferenceSchema = _46[1];
+    var _41 = (0, react_1.useState)(""), selectedListAddressId = _41[0], setSelectedListAddressId = _41[1];
+    var _42 = (0, react_1.useState)({
+        lat: 0,
+        lng: 0,
+        name: "",
+    }), selectedListAddress = _42[0], setSelectedListAddress = _42[1];
+    var _43 = (0, react_1.useState)({}), selectedObjectData = _43[0], setSelectedObjectData = _43[1];
+    var _44 = (0, react_1.useState)(false), referenceLoading = _44[0], setReferenceLoading = _44[1];
+    var _45 = (0, react_1.useState)({}), referencesOptions = _45[0], setReferencesOptions = _45[1];
+    var _46 = (0, react_1.useState)({}), referenceDeleteTableData = _46[0], setReferenceDeleteTableData = _46[1];
+    var _47 = (0, react_1.useState)(0), referenceDeleteIndex = _47[0], setReferenceDeleteIndex = _47[1];
+    var _48 = (0, react_1.useState)({}), referenceModelSchema = _48[0], setReferenceSchema = _48[1];
     //INFO : Offline
-    var _47 = (0, react_1.useState)(0), offlineDataLength = _47[0], setOfflineDataLength = _47[1];
-    var _48 = (0, react_1.useState)(false), offlineModal = _48[0], setOfflineModal = _48[1];
+    var _49 = (0, react_1.useState)(0), offlineDataLength = _49[0], setOfflineDataLength = _49[1];
+    var _50 = (0, react_1.useState)(false), offlineModal = _50[0], setOfflineModal = _50[1];
     var devSettings = props.devSettings;
     var serverId = (0, utils_1.parseServerId)(devSettings.server);
     var isFirebaseClient = devSettings.server === "firebase";
@@ -302,7 +312,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         }
     }, [props.type, props.id]);
     (0, react_1.useEffect)(function () {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e;
         if (!selectedTab) {
             var currentTab = (_b = (_a = props.organise) === null || _a === void 0 ? void 0 : _a.extendedTabs) === null || _b === void 0 ? void 0 : _b.find(function (eachTab) { var _a; return (0, utils_1.lowercaseTextToId)(eachTab.name) === ((_a = props.organise) === null || _a === void 0 ? void 0 : _a.viewId); });
             if (currentTab) {
@@ -321,6 +331,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                         viewImage: currentTab.viewImage,
                         calendarSettings: (_c = currentTab.calendarSettings) !== null && _c !== void 0 ? _c : undefined,
                         feedsSettings: (_d = currentTab.feedsSettings) !== null && _d !== void 0 ? _d : undefined,
+                        mapSettings: (_e = currentTab.mapSettings) !== null && _e !== void 0 ? _e : undefined,
                     });
                     if (listRQueryHocRef.current)
                         listRQueryHocRef.current.handleRefresh();
@@ -475,7 +486,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             sort: handleReadQueryHocSort(query),
             limit: limit,
         };
-        if (calendarSettings) {
+        if (calendarSettings || (selectedTab && selectedTab.viewType === "map")) {
             cond.limit = undefined;
             cond.stopLimit = true;
         }
@@ -2613,6 +2624,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             if (eachAttribute.id === "baseUpdatedAt" ||
                 eachAttribute.id === "baseDraft" ||
                 eachAttribute.type === "listObject" ||
+                eachAttribute.type === "listAddress" ||
                 eachAttribute.type === "file" ||
                 eachAttribute.type === "multipleFile" ||
                 eachAttribute.type === "markdown" ||
@@ -2683,6 +2695,76 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         });
         return detailList;
     };
+    var renderListAddressTable = function (data, fieldsId) {
+        var listAddressTable = [];
+        data.map(function (eachDataTable, index) {
+            listAddressTable.push(__assign(__assign({}, eachDataTable), { del: (react_1.default.createElement(outline_1.TrashIcon, { className: "w-5 text-red-600 cursor-pointer", onClick: function (event) {
+                        var _a;
+                        event.preventDefault();
+                        event.stopPropagation();
+                        var clonedSelectedData = (0, updateModule_1.handleClonedDataAttribute)(selectedData, props.model, props.devSettings.server);
+                        (_a = clonedSelectedData[fieldsId]) === null || _a === void 0 ? void 0 : _a.splice(index, 1);
+                        setSelectedData(clonedSelectedData);
+                    } })) }));
+            return null;
+        });
+        return listAddressTable;
+    };
+    var renderListAddress = function (type) {
+        var listElement = [];
+        var isListAddress = props.model.filter(function (eachAttribute) { return eachAttribute.type === "listAddress"; });
+        var clonedSelectedData = (0, updateModule_1.handleClonedDataAttribute)(selectedData, props.model, props.devSettings.server, false, showId ? true : false);
+        isListAddress.map(function (eachListAdressFields) {
+            var _a;
+            var header = [
+                {
+                    key: "name",
+                    title: "Name",
+                },
+                {
+                    key: "lat",
+                    title: "Latitude",
+                },
+                {
+                    key: "lng",
+                    title: "Longitude",
+                },
+            ];
+            if (type === "update") {
+                header.push({
+                    key: "del",
+                    title: "Delete",
+                });
+            }
+            if (props.onComplete &&
+                eachListAdressFields.hideForm &&
+                eachListAdressFields.optional) {
+                return null;
+            }
+            else if ((clonedSelectedData === null || clonedSelectedData === void 0 ? void 0 : clonedSelectedData[eachListAdressFields.id]) &&
+                Array.isArray(clonedSelectedData === null || clonedSelectedData === void 0 ? void 0 : clonedSelectedData[eachListAdressFields.id])) {
+                listElement.push(react_1.default.createElement(react_1.default.Fragment, null, !(clonedSelectedData === null || clonedSelectedData === void 0 ? void 0 : clonedSelectedData[eachListAdressFields.id]) &&
+                    type === "update" ? (react_1.default.createElement("button", { type: "button", className: "relative block w-full p-12 mt-5 text-center border-2 border-gray-300 border-dashed rounded-lg", onClick: function () {
+                        setSelectedListAddressId(eachListAdressFields.id);
+                        setModalVisible(true);
+                    } },
+                    react_1.default.createElement("svg", { className: "w-12 h-12 mx-auto text-gray-400", stroke: "currentColor", fill: "none", viewBox: "0 0 48 48", "aria-hidden": "true" },
+                        react_1.default.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 14v20c0 4.418 7.163 8 16 8 1.381 0 2.721-.087 4-.252M8 14c0 4.418 7.163 8 16 8s16-3.582 16-8M8 14c0-4.418 7.163-8 16-8s16 3.582 16 8m0 0v14m0-4c0 4.418-7.163 8-16 8S8 28.418 8 24m32 10v6m0 0v6m0-6h6m-6 0h-6" })),
+                    react_1.default.createElement("span", { className: "block mt-2 text-sm font-medium text-gray-900" },
+                        "Create a new",
+                        " ", "".concat(eachListAdressFields.name.toLocaleLowerCase())))) : (react_1.default.createElement(react_1.default.Fragment, null, (clonedSelectedData === null || clonedSelectedData === void 0 ? void 0 : clonedSelectedData[eachListAdressFields.id]) && (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement("div", { className: "flex justify-between mt-5" },
+                        react_1.default.createElement("h3", { className: "font-medium leading-6 text-gray-900 text-md sm:text-lg" }, eachListAdressFields.name),
+                        type === "update" && (react_1.default.createElement(iconButton_1.IconButton, { className: "sm", icon: react_1.default.createElement(outline_1.PlusCircleIcon, { className: "w-6 h-6 text-white" }), background: "bg-primary-500 hover:bg-primary-600", onClick: function () {
+                                setSelectedListAddressId(eachListAdressFields.id);
+                                setModalVisible(true);
+                            } }))),
+                    react_1.default.createElement(table_1.Table, { data: renderListAddressTable((_a = clonedSelectedData === null || clonedSelectedData === void 0 ? void 0 : clonedSelectedData[eachListAdressFields.id]) !== null && _a !== void 0 ? _a : [], eachListAdressFields.id), header: header, loading: false })))))));
+            }
+            return null;
+        });
+        return listElement;
+    };
     var renderListObject = function (type) {
         var listElement = [];
         var isListObject = props.model.filter(function (eachAttribute) { return eachAttribute.type === "listObject"; });
@@ -2870,7 +2952,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         if (((_d = props.organise) === null || _d === void 0 ? void 0 : _d.extendedTabs) &&
             ((_e = props.organise.extendedTabs) === null || _e === void 0 ? void 0 : _e.length) > 0) {
             (_f = props.organise) === null || _f === void 0 ? void 0 : _f.extendedTabs.map(function (eachTab) {
-                var _a, _b;
+                var _a, _b, _c;
                 var hrefPoint = "".concat(props.localURLEndpoint, "?type=").concat(props.type, "&collection=").concat(props.collectionId);
                 if (props.id)
                     hrefPoint += "&data=".concat(props.id);
@@ -2884,6 +2966,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                     viewImage: eachTab.viewImage,
                     calendarSettings: (_a = eachTab.calendarSettings) !== null && _a !== void 0 ? _a : undefined,
                     feedsSettings: (_b = eachTab.feedsSettings) !== null && _b !== void 0 ? _b : undefined,
+                    mapSettings: (_c = eachTab.mapSettings) !== null && _c !== void 0 ? _c : undefined,
                 };
                 if (eachTab.viewType === "iframe")
                     tabData["iframeSrc"] = eachTab.src;
@@ -3002,6 +3085,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                         renderDataTemplateFormContent(selectedData, filterModel_1, modalFormInputRefs, false, false),
                         ((_t = props.bareSettings) === null || _t === void 0 ? void 0 : _t.bareUpdateComponent) &&
                             ((_u = props.bareSettings) === null || _u === void 0 ? void 0 : _u.bareUpdateComponent(selectedData))),
+                    react_1.default.createElement("div", { className: "mt-8" }, renderListAddress(props.type)),
                     react_1.default.createElement("div", { className: "mt-8" }, renderListObject(props.type)),
                     isBottom && renderActionButtons(props.type)));
             case "list":
@@ -3300,6 +3384,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                     react_1.default.createElement(detailList_1.DetailList, { model: props.model, referenceModel: referenceModelSchema, className: "mt-5 bg-white rounded-md", title: "General Details", list: renderDetailListData(props.model), handleReferenceLink: !schemaPresent && ((_h = props.bareSettings) === null || _h === void 0 ? void 0 : _h.bareReadReferenceView)
                             ? props.bareSettings.bareReadReferenceView
                             : undefined }),
+                    react_1.default.createElement("div", { className: "mt-8" }, renderListAddress(dataType)),
                     react_1.default.createElement("div", { className: "mt-8" }, renderListObject(dataType))));
             }
         }
@@ -3478,6 +3563,74 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                     react_1.default.createElement("div", { className: "my-10" }),
                     contentList_1.length > 0 && !((_u = props.organise) === null || _u === void 0 ? void 0 : _u.hidePagination) && (react_1.default.createElement(pagination_1.Pagination, { data: tableData, size: size, limit: limit, cursor: cursor, pageIndex: pageIndex, paginationType: isFirebase ? "cursor" : "page", handleUpdatePageIndex: handlePagination, darkMode: (_v = props.organise) === null || _v === void 0 ? void 0 : _v.darkMode }))))));
             }
+            else if (selectedTabData.viewType === "map") {
+                var mapSettings_1 = selectedTabData.mapSettings;
+                if (mapSettings_1) {
+                    var mapMarkerList_1 = [];
+                    var uniqueGroupList_1 = [];
+                    var markerColorMap_1 = {};
+                    var markerColorList_1 = [
+                        "red",
+                        "blue",
+                        "green",
+                        "yellow",
+                        "orange",
+                        "purple",
+                    ];
+                    if (mapSettings_1.group) {
+                        spaceTableData.map(function (eachData) {
+                            if (eachData[mapSettings_1.group] &&
+                                !uniqueGroupList_1.includes(eachData[mapSettings_1.group])) {
+                                uniqueGroupList_1.push(eachData[mapSettings_1.group]);
+                            }
+                            return null;
+                        });
+                        uniqueGroupList_1.forEach(function (group, index) {
+                            var colorIndex = index % markerColorList_1.length;
+                            markerColorMap_1[group] = markerColorList_1[colorIndex];
+                        });
+                    }
+                    var InfoWindowContent = function (id, data) {
+                        return (react_1.default.createElement("div", { key: id, className: "w-72 break-words font-normal" },
+                            react_1.default.createElement("p", { className: "text-primary-500 font-semibold text-base" }, data.title),
+                            react_1.default.createElement("p", { className: "text-primary-500 font-semibold text-sm" }, data.group),
+                            react_1.default.createElement("p", { className: "text-sm" }, data.address)));
+                    };
+                    spaceTableData.map(function (eachData) {
+                        var _a, _b, _c, _d, _e, _f, _g, _h;
+                        var eachMarkerColor = mapSettings_1.group
+                            ? markerColorMap_1[eachData[mapSettings_1.group]] || "red"
+                            : "red";
+                        if (eachData[mapSettings_1.address]) {
+                            mapMarkerList_1.push({
+                                id: eachData.id,
+                                coord: {
+                                    lat: (_b = (_a = eachData[mapSettings_1.address]) === null || _a === void 0 ? void 0 : _a.lat) !== null && _b !== void 0 ? _b : 0,
+                                    lng: (_d = (_c = eachData[mapSettings_1.address]) === null || _c === void 0 ? void 0 : _c.lng) !== null && _d !== void 0 ? _d : 0,
+                                },
+                                color: eachMarkerColor,
+                                data: {
+                                    title: mapSettings_1.title
+                                        ? (_e = eachData[mapSettings_1.title]) !== null && _e !== void 0 ? _e : ""
+                                        : "",
+                                    address: (_g = (_f = eachData[mapSettings_1.address]) === null || _f === void 0 ? void 0 : _f.name) !== null && _g !== void 0 ? _g : "",
+                                    group: mapSettings_1.group
+                                        ? (_h = eachData[mapSettings_1.group]) !== null && _h !== void 0 ? _h : ""
+                                        : "",
+                                },
+                            });
+                        }
+                        return null;
+                    });
+                    return (react_1.default.createElement("div", { className: "w-full h-[700px]" },
+                        react_1.default.createElement(mapView_1.MapView, { markerList: mapMarkerList_1, enableMapControl: true, enablePolygonSelect: true, infoWindowComponent: InfoWindowContent, handleSelectPolygon: function (ids) { return setSelectedIds(ids); }, handleUpdateOnClick: function () { return setBatchUpdateModal(true); }, handleDeleteOnClick: function () {
+                                handleGenerateDeletePasscode();
+                                setDeleteModal(true);
+                            } })));
+                }
+                else
+                    return react_1.default.createElement(react_1.default.Fragment, null);
+            }
             else if (selectedTabData.renderComp) {
                 return react_1.default.createElement(react_1.default.Fragment, null, selectedTabData.renderComp());
             }
@@ -3601,6 +3754,41 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                         } }),
                     react_1.default.createElement(button_1.Button, { className: "ml-2", text: "Upload", type: "normal", onClick: handleUploadOfflineData }))));
         }
+        else if (selectedListAddressId) {
+            return (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(form_1.Form, { className: "grid grid-cols-1 gap-6 pb-20 mt-6", ref: listAddressFromRef, refList: [listAddressInputRef], handleComplete: function () {
+                        var clonedSelectedData = (0, updateModule_1.handleClonedDataAttribute)(selectedData, props.model, props.devSettings.server);
+                        clonedSelectedData[selectedListAddressId] = __spreadArray(__spreadArray([], clonedSelectedData[selectedListAddressId], true), [
+                            selectedListAddress,
+                        ], false);
+                        setSelectedData(clonedSelectedData);
+                        setSelectedListAddress({ lat: 0, lng: 0, name: "" });
+                        setSelectedListAddressId("");
+                        setModalVisible(false);
+                    }, disabledOnEnter: true },
+                    react_1.default.createElement(address_1.Address, { id: "", label: "Sub-Address", latLngEditModal: true, ref: listAddressInputRef, value: selectedListAddress, onChange: function (value) {
+                            setSelectedListAddress(value);
+                        } })),
+                react_1.default.createElement("div", { className: "flex justify-end pt-8" },
+                    selectedObjectId && props.type !== "read" && (react_1.default.createElement(button_1.Button, { className: "mr-5", text: "Delete", type: "danger", onClick: function () { } })),
+                    react_1.default.createElement(button_1.Button, { text: "".concat(props.type === "read" ? "Close" : "Submit"), type: "normal", onClick: function () { return __awaiter(void 0, void 0, void 0, function () {
+                            var _a;
+                            return __generator(this, function (_b) {
+                                switch (_b.label) {
+                                    case 0:
+                                        if (!(props.type === "update")) return [3 /*break*/, 2];
+                                        return [4 /*yield*/, ((_a = listAddressFromRef.current) === null || _a === void 0 ? void 0 : _a.handleSubmit())];
+                                    case 1:
+                                        _b.sent();
+                                        return [3 /*break*/, 3];
+                                    case 2:
+                                        handlePopUpModal(false);
+                                        _b.label = 3;
+                                    case 3: return [2 /*return*/];
+                                }
+                            });
+                        }); } }))));
+        }
         else {
             var filterObjectModel = props.model.find(function (eachModel) {
                 return eachModel.id === selectedObjectStructureId;