ui-soxo-bootstrap-core 2.6.1-dev.10 → 2.6.1-dev.12

package/core/components/landing-api/landing-api.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useContext } from 'react';
+import React, { useState, useEffect, useContext, useRef } from 'react';
 
 import { Route, Switch } from 'react-router-dom';
 
@@ -18,13 +18,33 @@ import PropTypes from 'prop-types';
 
 import { MenusAPI, CoreScripts } from '../../models';
 
+const motivatingMessages = [
+  'Setting things up for a great start...',
+  'Good things are loading. Stay with us.',
+  'Almost there. Preparing your workspace.',
+  'You are one moment away from your dashboard.',
+  'Getting everything ready for you.',
+  'Great care takes a second. Loading now.',
+];
+
+function getRandomMessage(previousMessage = '') {
+  const options = motivatingMessages.filter((message) => message !== previousMessage);
+
+  if (!options.length) {
+    return motivatingMessages[0];
+  }
+
+  const randomIndex = Math.floor(Math.random() * options.length);
+  return options[randomIndex];
+}
+
 /**
  * Landing API
  *
  * @param {*} param0
  * @returns
  */
-export default function LandingApi({ history, CustomComponents, CustomModels, appSettings, ...props }) {
+export default function LandingApi({ history, CustomComponents, CustomModels, appSettings, transitionPending = false, onHomeReady, ...props }) {
   const [loader, setLoader] = useState(false);
 
   // const [modules, setModules] = useState([]);
@@ -34,8 +54,11 @@ export default function LandingApi({ history, CustomComponents, CustomModels, ap
   const { dispatch, user = {} } = useContext(GlobalContext);
 
   const [allModules, setAllModules] = useState();
+  const homeReadyNotifiedRef = useRef(false);
+  const messageIntervalRef = useRef(null);
 
   const [meta, setMeta] = useState({});
+  const [loadingMessage, setLoadingMessage] = useState('');
 
   // const [reports, setReports] = useState([]);
 
@@ -70,6 +93,46 @@ export default function LandingApi({ history, CustomComponents, CustomModels, ap
     initializeUserMenus();
   }, []);
 
+  useEffect(() => {
+    if (!transitionPending) {
+      homeReadyNotifiedRef.current = false;
+      return;
+    }
+
+    if (!loader && allModules && !homeReadyNotifiedRef.current) {
+      homeReadyNotifiedRef.current = true;
+      if (typeof onHomeReady === 'function') {
+        onHomeReady();
+      }
+    }
+  }, [transitionPending, loader, allModules, onHomeReady]);
+
+  useEffect(() => {
+    if (!loader) {
+      setLoadingMessage('');
+
+      if (messageIntervalRef.current) {
+        clearInterval(messageIntervalRef.current);
+        messageIntervalRef.current = null;
+      }
+
+      return;
+    }
+
+    setLoadingMessage((previousMessage) => getRandomMessage(previousMessage));
+
+    messageIntervalRef.current = setInterval(() => {
+      setLoadingMessage((previousMessage) => getRandomMessage(previousMessage));
+    }, 2200);
+
+    return () => {
+      if (messageIntervalRef.current) {
+        clearInterval(messageIntervalRef.current);
+        messageIntervalRef.current = null;
+      }
+    };
+  }, [loader]);
+
   /**
    * Initialize the user menus
    */
@@ -245,6 +308,7 @@ export default function LandingApi({ history, CustomComponents, CustomModels, ap
           <Card className="skeleton-card">
             <div className="skeleton-wrapper">
               <Skeleton paragraph={{ rows: 4 }} />
+              <p className="motivating-text">{loadingMessage}</p>
             </div>
           </Card>
         ) : (

package/core/components/landing-api/landing-api.scss

@@ -11,9 +11,31 @@
     }
 
     .skeleton-wrapper {
+        .motivating-text {
+            margin-top: 14px;
+            margin-bottom: 4px;
+            font-size: 14px;
+            line-height: 20px;
+            text-align: center;
+            color: #5e6d86;
+            font-weight: 500;
+            animation: skeletonTextFade 0.4s ease-in-out;
+        }
     }
 
     .wrapper-loader {
         margin: 20px;
     }
 }
+
+@keyframes skeletonTextFade {
+    from {
+        opacity: 0;
+        transform: translateY(2px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}

package/core/lib/models/forms/components/form-creator/form-creator.scss

@@ -11,7 +11,7 @@
         position: relative;
         padding: 8px;
         border-radius: 4px;
-        // border: 1px solid #e3e3e3;
+        border: 1px solid #e3e3e3;
         margin-bottom: 3px;
 
         .field-customizer {

package/core/models/core-scripts/core-scripts.js

@@ -9,151 +9,150 @@ import React from 'react';
 
 import Base from '../base/base';
 
-import { ApiUtils } from './../../lib/'
-
+import { ApiUtils } from './../../lib/';
 
 class CoreScript extends Base {
+  constructor() {
+    super();
 
-    constructor() {
-        super();
-
-        this.fields = [
-            {
-                field: 'name',
-                caption: 'Name'
-            },
-            {
-                field: 'amount',
-                caption: 'Amount'
-            }
-        ];
-
-        // this.columns = ;
-    }
-
-    get id() {
-        return 'id';
-    }
-
-    get getEndpoint() {
-        return 'core-scripts';
-    }
-
-
-    get modelName() {
-        return `core-scripts`;
-    }
-
-    get columns() {
-        return [
-            {
-                caption: 'Staff',
-                field: 'staff.name',
-                key: 'staff'
-            },
-            {
-                caption: 'Weight',
-                field: 'weight',
-                key: 'weight'
-            },
-            {
-                caption: 'Date',
-                field: 'created_at',
-                key: 'created_at'
-            }
-        ];
-    }
-
-
-    /**
-     *Getting core_script data
-     * @returns
-     */
-    getReportingLisitng = (id, formBody, dbPtr = null) => {
-        
-        // Settings db pointer
-        if (!dbPtr) dbPtr = localStorage.db_ptr;
-        return ApiUtils.post({
-            url: `core-scripts/dashboardquery/${id}`,
-            formBody,
-            headers: {
-        'Content-Type': 'application/json',
-        Authorization: 'Bearer ' + localStorage.access_token,
-        db_ptr: dbPtr
+    this.fields = [
+      {
+        field: 'name',
+        caption: 'Name',
       },
-        });
-    };
-
-
-    /**
-     *Updating user details
-     * @returns
-     */
-    getUserDetailsLisitng = (id, formBody) => {
-
-        return ApiUtils.post({
-            url: `core-scripts/update-user-deatils/${id}`,
-            formBody,
-        });
-    };
-
-     getQuery = (formBody) => {
-
-        return ApiUtils.post({
-            url: `core-scripts/execute-script-api`,
-            formBody,
-        });
-    };
-
-
-
-    /**
-     * 
-     */
-    getReportMenu = async ({ id }) => {
-
-        const result = await this.getRecord({ id });
+      {
+        field: 'amount',
+        caption: 'Amount',
+      },
+    ];
 
-        const report = result.result
+    // this.columns = ;
+  }
 
-        return {
-            ...report,
-            caption: report.caption,
-            path: '/reports/' + report.id,
-            is_visible: true
-        }
-    }
+  get id() {
+    return 'id';
+  }
 
-    /**
-      * To get extra script data corresponding to mode
-      *
-      * @param {*} mode
-      * @returns
-      */
-    getExtraInfo = (mode) => {
-        return ApiUtils.get({
-            url: `core-scripts/get-script-data?mode=${mode}`,
-        });
-    };
+  get getEndpoint() {
+    return 'core-scripts';
+  }
 
+  get modelName() {
+    return `core-scripts`;
+  }
 
-    /**
-      * To get executed data
-      *
-      * @param {*} mode
-      * @returns
-      */
-
-    getSelectedExtraInfo = (formBody) => {
-        return ApiUtils.post({
-            url: `core-scripts/get-selected-script-data`,
-            formBody,
-            headers: {
-                'Content-Type': 'application/json',
-                Authorization: 'Bearer ' + localStorage.access_token,
-            },
-        });
+  get columns() {
+    return [
+      {
+        caption: 'Staff',
+        field: 'staff.name',
+        key: 'staff',
+      },
+      {
+        caption: 'Weight',
+        field: 'weight',
+        key: 'weight',
+      },
+      {
+        caption: 'Date',
+        field: 'created_at',
+        key: 'created_at',
+      },
+    ];
+  }
+
+  /**
+   *Getting core_script data
+   * @returns
+   */
+  getReportingLisitng = (id, formBody, dbPtr = null) => {
+    // Settings db pointer
+    if (!dbPtr) dbPtr = localStorage.db_ptr;
+    return ApiUtils.post({
+        // baseUrl: 'http://localhost:8002/dev/',  
+      url: `core-scripts/dashboardquery/${id}`,
+      formBody,
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: 'Bearer ' + localStorage.access_token,
+        db_ptr: dbPtr,
+      },
+    });
+  };
+
+  /**
+   *Updating user details
+   * @returns
+   */
+  getUserDetailsLisitng = (id, formBody) => {
+    return ApiUtils.post({
+      url: `core-scripts/update-user-deatils/${id}`,
+      formBody,
+    });
+  };
+
+  getQuery = (formBody) => {
+    return ApiUtils.post({
+      url: `core-scripts/execute-script-api`,
+      formBody,
+    });
+  };
+/**
+ * 
+ */
+  getQuerySeacch = (formBody) => {
+    return ApiUtils.post({
+    //   baseUrl: 'http://localhost:8002/dev/',
+      url: `core-scripts/execute-script-by-search`,
+      formBody,
+    });
+  };
+
+  /**
+   *
+   */
+  getReportMenu = async ({ id }) => {
+    const result = await this.getRecord({ id });
+
+    const report = result.result;
+
+    return {
+      ...report,
+      caption: report.caption,
+      path: '/reports/' + report.id,
+      is_visible: true,
     };
+  };
+
+  /**
+   * To get extra script data corresponding to mode
+   *
+   * @param {*} mode
+   * @returns
+   */
+  getExtraInfo = (mode) => {
+    return ApiUtils.get({
+      url: `core-scripts/get-script-data?mode=${mode}`,
+    });
+  };
+
+  /**
+   * To get executed data
+   *
+   * @param {*} mode
+   * @returns
+   */
+
+  getSelectedExtraInfo = (formBody) => {
+    return ApiUtils.post({
+      url: `core-scripts/get-selected-script-data`,
+      formBody,
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: 'Bearer ' + localStorage.access_token,
+      },
+    });
+  };
 }
 
 export default CoreScript;

package/core/models/menus/components/menu-lists/menu-lists.js

@@ -1,5 +1,5 @@
 import React, { useState, useCallback, useEffect } from 'react';
-import { Space, Popconfirm, Input, Drawer, Skeleton, Collapse, message, Tag } from 'antd';
+import { Space, Popconfirm, Input, Drawer, Skeleton, Collapse, message, Tag, Empty } from 'antd';
 import { ReloadOutlined, DeleteOutlined, EditOutlined, PlusCircleFilled, CopyOutlined } from '@ant-design/icons';
 import { Button, Card, Switch, DraggableWrapper } from '../../../../lib';
 //  for draggable menu list import { DndProvider } from "react-dnd";
@@ -203,7 +203,7 @@ const MenuLists = ({ model, match, relativeAdd = false, additional_queries = [],
     model.delete(rec).then(loadMenus);
   };
 
-  const filtered = records.filter((r) => r.name?.toUpperCase().includes(query.toUpperCase()));
+  const filtered = records.filter((r) => r.caption?.toUpperCase().includes(query.toUpperCase()));
 
   const visibleItems = filtered;
 
@@ -362,50 +362,53 @@ const MenuLists = ({ model, match, relativeAdd = false, additional_queries = [],
             <Card>
               <DndProvider backend={HTML5Backend}>
                 <Collapse accordion>
-                  {visibleItems.map((item, index) => (
-                    <Panel
-                      key={item.id}
-                      header={
-                        <DraggableWrapper
-                          id={item.id}
-                          index={index}
-                          movePanel={movePanel}
-                          item={item}
-                          dragEnabled={dragMode}
-                          level={1}
-                          parentId={null}
-                          onCrossLevelMove={handleCrossLevelMove}
-                          canAcceptChildren={true}
-                        />
-                      }
-                      //  only show arrow if sub_menus exist
-                      showArrow={item.sub_menus && item.sub_menus.length > 0}
-                      //  disable panel
-                      // collapsible={item.sub_menus && item.sub_menus.length > 0 ? 'header' : 'disabled'}
-                      extra={panelActions(item, model, setSelectedRecord, setDrawerTitle, setDrawerVisible, deleteRecord)}
-                    >
-                      {item.sub_menus && item.sub_menus.length > 0 && (
-                        <NestedMenu
-                          parentId={item.id}
-                          step={item.step + 1}
-                          items={item.sub_menus || []}
-                          model={model}
-                          dragMode={dragMode}
-                          setSelectedRecord={setSelectedRecord}
-                          setDrawerTitle={setDrawerTitle}
-                          setDrawerVisible={setDrawerVisible}
-                          deleteRecord={deleteRecord}
-                          level={2}
-                          onCrossLevelMove={handleCrossLevelMove}
-                          onChange={(subMenus) => {
-                            const updated = records.map((r) => (r.id === item.id ? { ...r, sub_menus: subMenus } : r));
-                            setRecords(updated);
-                            setOrderChanged(true);
-                          }}
-                        />
-                      )}
-                    </Panel>
-                  ))}
+                  {visibleItems && visibleItems.length > 0 ? (
+                    visibleItems.map((item, index) => (
+                      <Panel
+                        key={item.id}
+                        header={
+                          <DraggableWrapper
+                            id={item.id}
+                            index={index}
+                            movePanel={movePanel}
+                            item={item}
+                            dragEnabled={dragMode}
+                            level={1}
+                            parentId={null}
+                            onCrossLevelMove={handleCrossLevelMove}
+                            canAcceptChildren={true}
+                          />
+                        }
+                        showArrow={item.sub_menus && item.sub_menus.length > 0}
+                        extra={panelActions(item, model, setSelectedRecord, setDrawerTitle, setDrawerVisible, deleteRecord)}
+                      >
+                        {item.sub_menus && item.sub_menus.length > 0 && (
+                          <NestedMenu
+                            parentId={item.id}
+                            step={item.step + 1}
+                            items={item.sub_menus || []}
+                            model={model}
+                            dragMode={dragMode}
+                            setSelectedRecord={setSelectedRecord}
+                            setDrawerTitle={setDrawerTitle}
+                            setDrawerVisible={setDrawerVisible}
+                            deleteRecord={deleteRecord}
+                            level={2}
+                            onCrossLevelMove={handleCrossLevelMove}
+                            onChange={(subMenus) => {
+                              const updated = records.map((r) => (r.id === item.id ? { ...r, sub_menus: subMenus } : r));
+                              setRecords(updated);
+                              setOrderChanged(true);
+                            }}
+                          />
+                        )}
+                      </Panel>
+                    ))
+                  ) : (
+                    <div style={{ textAlign: 'center', padding: '40px 0' }}>
+                      <Empty description="No Menu Items" />
+                    </div>
+                  )}
                 </Collapse>
               </DndProvider>
             </Card>