@bigbinary/neeto-folders-frontend 2.0.8 → 2.0.10

package/dist/cjs/components.js

@@ -9,7 +9,7 @@ var utils$1 = require('@bigbinary/neeto-commons-frontend/utils');
 var Alert = require('@bigbinary/neetoui/Alert');
 var reactI18next = require('react-i18next');
 var reactRouterDom = require('react-router-dom');
-var useFolderActions = require('../useFolderActions-ibifd0ZD.js');
+var useFolderActions = require('../useFolderActions-Ok2WR6Ht.js');
 var constants = require('./constants.js');
 var utils = require('../index-hg5oms4a.js');
 var internal = require('../internal-CXN78HoA.js');
@@ -19,6 +19,7 @@ var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
 var _regeneratorRuntime = require('@babel/runtime/regenerator');
 var React = require('react');
 var Typography = require('@bigbinary/neetoui/Typography');
+var Spinner = require('@bigbinary/neetoui/Spinner');
 var Input = require('@bigbinary/neetoui/formik/Input');
 var ActionBlock = require('@bigbinary/neetoui/formik/ActionBlock');
 var Form = require('@bigbinary/neetoui/formik/Form');
@@ -349,7 +350,8 @@ var AddEditPane = function AddEditPane(_ref) {
     type = _useFolderStore.type,
     item = _useFolderStore.item;
   var _useFetchFolders = useFolderActions.useFetchFolders(config),
-    folders = _useFetchFolders.data;
+    folders = _useFetchFolders.data,
+    isFetching = _useFetchFolders.isFetching;
   var _useCreateFolder = useFolderActions.useCreateFolder(config),
     createFolder = _useCreateFolder.mutate;
   var _useUpdateFolder = useFolderActions.useUpdateFolder(config),
@@ -363,38 +365,59 @@ var AddEditPane = function AddEditPane(_ref) {
   var isValidParent = (activeFolder === null || activeFolder === void 0 ? void 0 : activeFolder.meta.depth) < config.maxDepth;
   var parentId = isValidParent ? activeFolder.id : null;
   var extraAttributes = config.extraAttributes;
+  var handleError = function handleError(setStatus, error) {
+    var response = error.response;
+    if (response && response.data && response.data.errors) {
+      setStatus(response.data.errors);
+    }
+  };
   var onSubmitForm = /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(values) {
-      var payload;
+    var _ref3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(values, _ref2) {
+      var setStatus, payload, reactQueryOptions, config;
       return _regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
+            setStatus = _ref2.setStatus;
             payload = createPayload(values, extraAttributes);
+            reactQueryOptions = {
+              onSuccess: function onSuccess() {
+                utils$1.showThumbsUpToastr();
+                onClose();
+              },
+              onError: function onError(error) {
+                return handleError(setStatus, error);
+              }
+            };
+            config = {
+              showToastr: false
+            };
             if (!isEditing) {
-              _context.next = 6;
+              _context.next = 9;
               break;
             }
-            _context.next = 4;
+            _context.next = 7;
             return updateFolder({
               id: item.id,
-              payload: payload
-            });
-          case 4:
-            _context.next = 8;
+              payload: payload,
+              config: config
+            }, reactQueryOptions);
+          case 7:
+            _context.next = 11;
             break;
-          case 6:
-            _context.next = 8;
-            return createFolder(payload);
-          case 8:
-            onClose();
           case 9:
+            _context.next = 11;
+            return createFolder({
+              payload: payload,
+              config: config
+            }, reactQueryOptions);
+          case 11:
           case "end":
             return _context.stop();
         }
       }, _callee);
     }));
-    return function onSubmitForm(_x) {
-      return _ref2.apply(this, arguments);
+    return function onSubmitForm(_x, _x2) {
+      return _ref3.apply(this, arguments);
     };
   }();
   var folderOptions = React.useMemo(function () {
@@ -405,6 +428,12 @@ var AddEditPane = function AddEditPane(_ref) {
       parentId: parentId
     }, extraAttributes);
   }, [isEditing, item, parentId, extraAttributes]);
+  if (isFetching) {
+    return /*#__PURE__*/jsxRuntime.jsx(Pane.Body, {
+      className: "flex items-center justify-center",
+      children: /*#__PURE__*/jsxRuntime.jsx(Spinner, {})
+    });
+  }
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [/*#__PURE__*/jsxRuntime.jsx(Pane.Header, {
       children: /*#__PURE__*/jsxRuntime.jsx(Typography, {
@@ -419,8 +448,8 @@ var AddEditPane = function AddEditPane(_ref) {
         validationSchema: FORM_VALIDATION_SCHEMA,
         onSubmit: onSubmitForm
       },
-      children: function children(_ref3) {
-        var dirty = _ref3.dirty;
+      children: function children(_ref4) {
+        var dirty = _ref4.dirty;
         return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
           children: [/*#__PURE__*/jsxRuntime.jsx(Pane.Body, {
             className: "pb-6",
@@ -603,7 +632,8 @@ var PaneBody = function PaneBody(_ref) {
     setFolderState = _useFolderStore.setFolderState;
   var _useFetchFolders = useFolderActions.useFetchFolders(config),
     _useFetchFolders$data = _useFetchFolders.data,
-    folders = _useFetchFolders$data === void 0 ? [] : _useFetchFolders$data;
+    folders = _useFetchFolders$data === void 0 ? [] : _useFetchFolders$data,
+    isFetching = _useFetchFolders.isFetching;
   var _useTranslation = useTranslation(config),
     t = _useTranslation.t;
   var _useFolderStore2 = useFolderActions.useFolderStore(function (store) {
@@ -642,6 +672,12 @@ var PaneBody = function PaneBody(_ref) {
     mode: "global",
     enabled: !!type
   });
+  if (isFetching) {
+    return /*#__PURE__*/jsxRuntime.jsx(Pane.Body, {
+      className: "flex items-center justify-center",
+      children: /*#__PURE__*/jsxRuntime.jsx(Spinner, {})
+    });
+  }
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [/*#__PURE__*/jsxRuntime.jsxs(Pane.Header, {
       className: "flex items-center justify-between",
@@ -813,7 +849,8 @@ var RearrangeFoldersPane = function RearrangeFoldersPane(_ref) {
   var _useTranslation = useTranslation(config),
     t = _useTranslation.t;
   var _useFetchFolders = useFolderActions.useFetchFolders(config),
-    folders = _useFetchFolders.data;
+    folders = _useFetchFolders.data,
+    isFetching = _useFetchFolders.isFetching;
   var _useReorderFolders = useFolderActions.useReorderFolders(config),
     reorderFolders = _useReorderFolders.mutate;
   var _useFolderStore = useFolderActions.useFolderStore(function (store) {
@@ -882,6 +919,12 @@ var RearrangeFoldersPane = function RearrangeFoldersPane(_ref) {
       className: "neeto-ui-text-gray-500 relative -left-[0.3125rem] flex-shrink-0"
     })
   };
+  if (isFetching) {
+    return /*#__PURE__*/jsxRuntime.jsx(Pane.Body, {
+      className: "flex items-center justify-center",
+      children: /*#__PURE__*/jsxRuntime.jsx(Spinner, {})
+    });
+  }
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [/*#__PURE__*/jsxRuntime.jsx(Pane.Header, {
       children: /*#__PURE__*/jsxRuntime.jsx(Typography, {
@@ -1128,7 +1171,8 @@ var ReorderFoldersPane = function ReorderFoldersPane(_ref) {
   var _useTranslation = useTranslation(config),
     t = _useTranslation.t;
   var _useFetchFolders = useFolderActions.useFetchFolders(config),
-    folders = _useFetchFolders.data;
+    folders = _useFetchFolders.data,
+    isFetching = _useFetchFolders.isFetching;
   var _useReorderFolders = useFolderActions.useReorderFolders(config),
     reorderFolders = _useReorderFolders.mutate;
   var sensors = core.useSensors(core.useSensor(core.PointerSensor, sensorConfig));
@@ -1210,6 +1254,12 @@ var ReorderFoldersPane = function ReorderFoldersPane(_ref) {
       className: "neeto-ui-text-gray-500 relative -left-[0.3125rem] flex-shrink-0"
     })
   };
+  if (isFetching) {
+    return /*#__PURE__*/jsxRuntime.jsx(Pane.Body, {
+      className: "flex items-center justify-center",
+      children: /*#__PURE__*/jsxRuntime.jsx(Spinner, {})
+    });
+  }
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [/*#__PURE__*/jsxRuntime.jsx(Pane.Header, {
       children: /*#__PURE__*/jsxRuntime.jsx(Typography, {
@@ -1510,12 +1560,32 @@ var FoldersTree = function FoldersTree(_ref) {
     var _activeFolder$meta;
     if (!folders) return;
     // When active folder changes from external sources, update expanded keys to auto expand tree.
-    var expandedKeys = [];
+    var updatedExpandedKeys = _toConsumableArray(expandedKeys);
     var map = utils.treeToMap(folders, "sid");
     var activeFolder = map[activeFolderSid];
     var parentSid = activeFolder === null || activeFolder === void 0 || (_activeFolder$meta = activeFolder.meta) === null || _activeFolder$meta === void 0 || (_activeFolder$meta = _activeFolder$meta.parent) === null || _activeFolder$meta === void 0 ? void 0 : _activeFolder$meta.sid;
-    if (parentSid) expandedKeys.push(parentSid);
-    setExpandedKeys(expandedKeys);
+    if (parentSid && !updatedExpandedKeys.includes(parentSid)) {
+      updatedExpandedKeys.push(parentSid);
+    }
+    setExpandedKeys(updatedExpandedKeys);
+  };
+  var handleExpand = function handleExpand(keys, _ref2) {
+    var expanded = _ref2.expanded,
+      node = _ref2.node;
+    if (expanded) {
+      setExpandedKeys(keys);
+      return;
+    }
+    var keysSet = new Set(keys);
+    var _removeChildKeys = function removeChildKeys() {
+      var children = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+      children.forEach(function (child) {
+        keysSet["delete"](child.sid);
+        _removeChildKeys(child.children);
+      });
+    };
+    _removeChildKeys(node.children);
+    setExpandedKeys(_toConsumableArray(keysSet));
   };
   React.useEffect(function () {
     // Non urgent update.
@@ -1553,7 +1623,7 @@ var FoldersTree = function FoldersTree(_ref) {
         }))
       });
     },
-    onExpand: setExpandedKeys
+    onExpand: handleExpand
   });
 };