@dexteel/mesf-core 4.7.7 → 4.7.8

package/CHANGELOG.md

@@ -1,4 +1,6 @@
 # CHANGELOG
+## 4.7.8
+- Trendings: Remove the 'Save view' popup and improve the 'Save view as' modal. Now you can choose a view to save in save view as or create a new one
 ## 4.7.7
 - Trendings: Scales now admits negative numbers
 - Trendings: Fix saveTagDefaults bug. When you save the default to Tag, you also save the View Tag selected.

package/dist/index.esm.js

@@ -10372,18 +10372,17 @@ var SaveAsViewModal = function (_a) {
     var classes = useTrendingStyles();
     var _b = useState(false), isLoading = _b[0], setIsLoading = _b[1];
     var _c = useState(''), error = _c[0], setError = _c[1];
-    var viewTags = useTrendingContext().state.viewTags;
-    var _d = useState(true), isPublic = _d[0], setIsPublic = _d[1];
-    var _e = useState(''), viewName = _e[0], setViewName = _e[1];
+    var _d = useTrendingContext(), _e = _d.state, viewTags = _e.viewTags, views = _e.views, viewSelected = _e.viewSelected, _f = _d.actions, setViewSelected = _f.setViewSelected; _f.setViewTags;
+    var _g = useState(true), isPublic = _g[0], setIsPublic = _g[1];
+    var _h = useState(''), newView = _h[0], setNewView = _h[1];
     var handleCheck = function () { return setIsPublic(!isPublic); };
-    var handleInputChange = function (e) { return setViewName(e.target.value); };
     var handleSubmit = function () { return __awaiter(void 0, void 0, void 0, function () {
         var resp, ViewId_1, results;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
                     setIsLoading(true);
-                    return [4 /*yield*/, upsertView(null, viewName, isPublic)];
+                    return [4 /*yield*/, upsertView(null, newView, isPublic)];
                 case 1:
                     resp = _a.sent();
                     if (!resp.ok) return [3 /*break*/, 3];
@@ -10418,12 +10417,22 @@ var SaveAsViewModal = function (_a) {
         });
     }); };
     return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(MesfModal, { open: open, handleClose: function () { return handleClose(false); }, maxWidth: "xl", "aria-labelledby": "modal-modal-title", "aria-describedby": "modal-modal-description", title: 'Tags' },
+        React__default.createElement(MesfModal, { open: open, handleClose: function () { return handleClose(false); }, maxWidth: "xl", "aria-labelledby": "modal-modal-title", "aria-describedby": "modal-modal-description", title: 'Save View As' },
             React__default.createElement(Divider, null),
             React__default.createElement(MesfModal.Content, null,
                 React__default.createElement(Grid$1, { container: true, spacing: 5, style: { padding: "1rem" } },
-                    React__default.createElement(Grid$1, { item: true, md: 12, xs: 12, style: { padding: "10px", width: "100%" } },
-                        React__default.createElement(TextField, { size: 'small', id: "outlined-basic", label: "View Name", variant: "outlined", value: viewName, onChange: handleInputChange, style: { width: "100%" } }))),
+                    React__default.createElement(Grid$1, { item: true, md: 12, xs: 12, style: { padding: "10px", width: "100%" } }, views.length && viewSelected ? (React__default.createElement(Autocomplete, { size: 'small', id: "list-of-views", options: views, defaultValue: viewSelected, getOptionLabel: function (option) { return option.ViewName; }, freeSolo: true, onChange: function (ev, val) {
+                            setViewSelected(val);
+                            if (val) {
+                                setNewView("");
+                            }
+                        }, onInputChange: function (event, newInputValue) {
+                            var isValueInViews = views.some(function (view) { return view.ViewName === newInputValue; });
+                            if (!isValueInViews) {
+                                setNewView(newInputValue);
+                            }
+                        }, style: { width: "100%" }, renderInput: function (params) { return React__default.createElement(TextField, __assign({}, params, { label: "Views", variant: "outlined" })); } })) :
+                        (React__default.createElement("div", null, "No tag views detected, please add one")))),
                 React__default.createElement(Grid$1, { item: true, md: 12, xs: 12, style: { paddingTop: "2rem" }, className: classes.isPublicCheckbox },
                     React__default.createElement("label", null,
                         "Public",
@@ -10570,76 +10579,12 @@ var timeDifference = function (start, end) {
     return "".concat(hours, "h ").concat(remainingMinutes, "m ").concat(remainingSeconds, "s");
 };
 
-var SaveViewModal = function (_a) {
-    var open = _a.open, handleClose = _a.handleClose;
-    var _b = useState(false), isLoading = _b[0], setIsLoading = _b[1];
-    var _c = useState(''), error = _c[0], setError = _c[1];
-    var _d = useTrendingContext().state, viewTags = _d.viewTags, viewSelected = _d.viewSelected;
-    var handleSubmit = function () { return __awaiter(void 0, void 0, void 0, function () {
-        var resp, results;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    setIsLoading(true);
-                    if (!(viewSelected === null || viewSelected === void 0 ? void 0 : viewSelected.ViewId)) return [3 /*break*/, 4];
-                    return [4 /*yield*/, upsertView(viewSelected === null || viewSelected === void 0 ? void 0 : viewSelected.ViewId, viewSelected.ViewName, viewSelected.IsPublic)];
-                case 1:
-                    resp = _a.sent();
-                    if (!resp.ok) return [3 /*break*/, 3];
-                    return [4 /*yield*/, Promise.allSettled(viewTags.map(function (_a) {
-                            var TagId = _a.TagId, Color = _a.Color, MinScale = _a.MinScale, MaxScale = _a.MaxScale, IsAutoScale = _a.IsAutoScale, IsVisible = _a.IsVisible;
-                            upsertViewTag(viewSelected === null || viewSelected === void 0 ? void 0 : viewSelected.ViewId, TagId, Color, MinScale, MaxScale, IsVisible, IsAutoScale)
-                                .then(function (r) {
-                                if (!r.ok) {
-                                    setError(r.message);
-                                }
-                            });
-                        }))];
-                case 2:
-                    results = _a.sent();
-                    results.forEach(function (result, index) {
-                        if (result.status === "rejected") {
-                            setError("Tag ".concat(index, " failed with reason: ").concat(result.reason));
-                        }
-                        else {
-                            handleClose(true);
-                        }
-                    });
-                    return [3 /*break*/, 4];
-                case 3:
-                    setError(resp.message);
-                    _a.label = 4;
-                case 4:
-                    setIsLoading(false);
-                    return [2 /*return*/];
-            }
-        });
-    }); };
-    return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(MesfModal, { open: open, handleClose: function () { return handleClose(false); }, maxWidth: "xl", "aria-labelledby": "modal-modal-title", "aria-describedby": "modal-modal-description", title: 'Tags' },
-            React__default.createElement(Divider, null),
-            React__default.createElement(MesfModal.Content, null,
-                React__default.createElement(Grid$1, { container: true, spacing: 5, style: { padding: "1rem" } },
-                    React__default.createElement(Grid$1, { item: true, md: 12, xs: 12, style: { padding: "10px", width: "100%" } },
-                        React__default.createElement(Typography, null,
-                            "Do you want to save changes on ",
-                            React__default.createElement("strong", null, viewSelected === null || viewSelected === void 0 ? void 0 : viewSelected.ViewName),
-                            " ?")))),
-            React__default.createElement(Divider, null),
-            React__default.createElement(MesfModal.Actions, null,
-                React__default.createElement(Grid$1, { container: true, spacing: 1, style: { display: 'flex', alignItems: 'flex-end', justifyContent: 'flex-end' } },
-                    React__default.createElement(Grid$1, { item: true },
-                        React__default.createElement(Button$1, { variant: 'outlined', color: 'secondary', onClick: function () { return handleClose(false); } }, "Cancel")),
-                    React__default.createElement(Grid$1, { item: true },
-                        React__default.createElement(ButtonWithLoading, { variant: 'contained', color: 'primary', onClick: handleSubmit, isLoading: isLoading }, "Save"))))),
-        React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(''); } })));
-};
-
 var TableComponent = function (_a) {
     var chartData = _a.chartData, cursorData = _a.cursorData, getTagsFromAPI = _a.getTagsFromAPI;
     var classes = useTagsTableStyles();
-    var _b = useTrendingContext(), _c = _b.state, viewTags = _c.viewTags, viewSelected = _c.viewSelected, _d = _b.actions, setViewTags = _d.setViewTags, setGraphShouldUpdate = _d.setGraphShouldUpdate;
+    var _b = useTrendingContext(), _c = _b.state, viewTags = _c.viewTags, viewSelected = _c.viewSelected, _d = _b.actions, setViewTags = _d.setViewTags, setGraphShouldUpdate = _d.setGraphShouldUpdate; _d.setViewSelected;
     var _e = useState(''), error = _e[0], setError = _e[1];
+    var _f = useState(false); _f[0]; var setIsLoading = _f[1];
     var dataTable = useTagsDataTable({ viewTags: viewTags, chartData: chartData, cursorData: cursorData });
     var handleChange = function (tagId, value, property) {
         var newTags = viewTags.map(function (tag) {
@@ -10685,11 +10630,11 @@ var TableComponent = function (_a) {
             handleAutoScaleChange(tagId, checked);
         }
     };
-    var _f = useState(null), selectedRowIndex = _f[0], setSelectedRowIndex = _f[1];
-    var _g = useState(false), addTagModalOpen = _g[0], setAddTagModalOpen = _g[1];
-    var _h = useState(false), saveViewModalOpen = _h[0], setSaveViewModalOpen = _h[1];
+    var _g = useState(null), selectedRowIndex = _g[0], setSelectedRowIndex = _g[1];
+    var _h = useState(false), addTagModalOpen = _h[0], setAddTagModalOpen = _h[1];
     var _j = useState(false), saveAsViewModalOpen = _j[0], setSaveAsViewModalOpen = _j[1];
     var _k = useState(false), loadViewOpen = _k[0], setLoadViewOpen = _k[1];
+    var _l = useState(''), snackbarMessage = _l[0], setSnackbarMessage = _l[1];
     var handleClose = function () { return setAddTagModalOpen(false); };
     var ContextMenu = function (_a) {
         var x = _a.x, y = _a.y, options = _a.options;
@@ -10700,12 +10645,12 @@ var TableComponent = function (_a) {
             React__default.createElement("ul", null, options.map(function (option) { return (React__default.createElement("li", { key: option.id, onClick: option.onClick }, option.label)); }))));
     };
     // Position state for the context menu
-    var _l = useState({ x: 0, y: 0 }), contextMenuPosition = _l[0], setContextMenuPosition = _l[1];
+    var _m = useState({ x: 0, y: 0 }), contextMenuPosition = _m[0], setContextMenuPosition = _m[1];
     var contextMenuOptions = [
         { id: 'delete', label: 'Remove Tag', onClick: function () { return handleDelete(); } },
         { id: 'add', label: 'Add Tag', onClick: function () { return setAddTagModalOpen(true); } },
         { id: 'saveDefault', label: 'Save Default To Tag', onClick: function () { return handleSaveDefaultToTag(); } },
-        { id: 'saveView', label: 'Save View', onClick: function () { setSaveViewModalOpen(true); } },
+        { id: 'saveView', label: 'Save View', onClick: function () { return handleSaveView(); } },
         { id: 'saveViewAs', label: 'Save View as', onClick: function () { return setSaveAsViewModalOpen(true); } },
         { id: 'loadView', label: 'Load View', onClick: function () { return setLoadViewOpen(true); } },
     ];
@@ -10737,6 +10682,53 @@ var TableComponent = function (_a) {
             }
         });
     }); };
+    var handleSaveView = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var resp, results;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    setIsLoading(true);
+                    if (!(viewSelected === null || viewSelected === void 0 ? void 0 : viewSelected.ViewId)) return [3 /*break*/, 4];
+                    return [4 /*yield*/, upsertView(viewSelected === null || viewSelected === void 0 ? void 0 : viewSelected.ViewId, viewSelected.ViewName, viewSelected.IsPublic)];
+                case 1:
+                    resp = _a.sent();
+                    if (!resp.ok) return [3 /*break*/, 3];
+                    return [4 /*yield*/, Promise.allSettled(viewTags.map(function (_a) {
+                            var TagId = _a.TagId, Color = _a.Color, MinScale = _a.MinScale, MaxScale = _a.MaxScale, IsAutoScale = _a.IsAutoScale, IsVisible = _a.IsVisible;
+                            upsertViewTag(viewSelected === null || viewSelected === void 0 ? void 0 : viewSelected.ViewId, TagId, Color, MinScale, MaxScale, IsVisible, IsAutoScale)
+                                .then(function (r) {
+                                if (!r.ok) {
+                                    setError(r.message);
+                                }
+                            });
+                        }))];
+                case 2:
+                    results = _a.sent();
+                    results.forEach(function (result, index) {
+                        if (result.status === "rejected") {
+                            setError("Tag ".concat(index, " failed with reason: ").concat(result.reason));
+                        }
+                        else {
+                            setSelectedRowIndex(null);
+                            setSnackbarMessage('View saved successfully');
+                        }
+                    });
+                    return [3 /*break*/, 4];
+                case 3:
+                    setError(resp.message);
+                    _a.label = 4;
+                case 4:
+                    setIsLoading(false);
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    var handleCloseSnackbar = function (event, reason) {
+        if (reason === 'clickaway') {
+            return;
+        }
+        setSnackbarMessage('');
+    };
     useEffect(function () {
         var handleGlobalClick = function (e) {
             if (selectedRowIndex !== null) {
@@ -10933,20 +10925,17 @@ var TableComponent = function (_a) {
                                 React__default.createElement(Button$1, { onClick: function () { return setLoadViewOpen(true); }, variant: 'outlined', color: 'primary' }, " Load view"))))))),
             selectedRowIndex !== null && (React__default.createElement(ContextMenu, { x: contextMenuPosition.x, y: contextMenuPosition.y, options: contextMenuOptions })),
             React__default.createElement(AddTagModal, { open: addTagModalOpen, handleClose: handleClose, onTagSelect: handleTagSelect }),
-            React__default.createElement(SaveViewModal, { open: saveViewModalOpen, handleClose: function (shouldUpdate) {
-                    setSaveViewModalOpen(false);
-                    if (shouldUpdate)
-                        getTagsFromAPI().then(function () { });
-                } }),
             React__default.createElement(SaveAsViewModal, { open: saveAsViewModalOpen, handleClose: function (shouldUpdate) {
                     setSaveAsViewModalOpen(false);
                     if (shouldUpdate)
-                        getTagsFromAPI().then(function () { });
+                        getTagsFromAPI(true).then(function () { });
                 } }),
             React__default.createElement(LoadViewModal, { open: loadViewOpen, handleClose: function (shouldUpdate) {
                     setLoadViewOpen(false);
                 } })),
-        React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(''); } })));
+        React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(''); } }),
+        React__default.createElement(Snackbar$1, { open: !!snackbarMessage, autoHideDuration: 800, onClose: handleCloseSnackbar },
+            React__default.createElement(Alert$3, { onClose: handleCloseSnackbar, severity: "success" }, snackbarMessage))));
 };
 
 var formatDateTimeToString = function (date) {
@@ -11551,41 +11540,44 @@ var Trending = function (_a) {
 var TrendingsPage = function (props) {
     var _a = useState(''), error = _a[0], setError = _a[1];
     var _b = useTrendingContext(), viewSelected = _b.state.viewSelected, _c = _b.actions, setViews = _c.setViews, setViewTags = _c.setViewTags, setViewSelected = _c.setViewSelected;
-    var getTagsFromAPI = function () { return __awaiter(void 0, void 0, void 0, function () {
-        var viewsResp, lastCreated, viewTagsResp;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0: return [4 /*yield*/, getViews(null)];
-                case 1:
-                    viewsResp = _a.sent();
-                    if (!viewsResp.ok) return [3 /*break*/, 3];
-                    setViews(viewsResp.data.tables[0].rows);
-                    lastCreated = void 0;
-                    if (!viewSelected) {
-                        lastCreated = viewsResp.data.tables[0].rows.reduce(function (prev, current) { return (prev.ViewId > current.ViewId) ? prev : current; });
-                        //viewSelected
-                        setViewSelected(lastCreated);
-                    }
-                    else {
-                        lastCreated = viewSelected;
-                    }
-                    return [4 /*yield*/, getViewTags(lastCreated.ViewId)];
-                case 2:
-                    viewTagsResp = _a.sent();
-                    if (viewTagsResp.ok) {
-                        setViewTags(viewTagsResp.data.tables[0].rows);
-                    }
-                    else {
-                        setError(viewTagsResp.message);
-                    }
-                    return [3 /*break*/, 4];
-                case 3:
-                    setError(viewsResp.message);
-                    _a.label = 4;
-                case 4: return [2 /*return*/];
-            }
+    var getTagsFromAPI = function (forceReload) {
+        if (forceReload === void 0) { forceReload = false; }
+        return __awaiter(void 0, void 0, void 0, function () {
+            var viewsResp, lastCreated, viewTagsResp;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, getViews(null)];
+                    case 1:
+                        viewsResp = _a.sent();
+                        if (!viewsResp.ok) return [3 /*break*/, 3];
+                        setViews(viewsResp.data.tables[0].rows);
+                        lastCreated = void 0;
+                        if (!viewSelected || forceReload) {
+                            lastCreated = viewsResp.data.tables[0].rows.reduce(function (prev, current) { return (prev.ViewId > current.ViewId) ? prev : current; });
+                            //viewSelected
+                            setViewSelected(lastCreated);
+                        }
+                        else {
+                            lastCreated = viewSelected;
+                        }
+                        return [4 /*yield*/, getViewTags(lastCreated.ViewId)];
+                    case 2:
+                        viewTagsResp = _a.sent();
+                        if (viewTagsResp.ok) {
+                            setViewTags(viewTagsResp.data.tables[0].rows);
+                        }
+                        else {
+                            setError(viewTagsResp.message);
+                        }
+                        return [3 /*break*/, 4];
+                    case 3:
+                        setError(viewsResp.message);
+                        _a.label = 4;
+                    case 4: return [2 /*return*/];
+                }
+            });
         });
-    }); };
+    };
     useEffect(function () {
         getTagsFromAPI();
     }, []);