ui-soxo-bootstrap-core 2.4.25-dev.34 → 2.4.25-dev.35

package/core/lib/components/sidemenu/sidemenu.js

@@ -39,40 +39,54 @@ function CollapsedIconMenu({ menu, collapsed, icon, caption }) {
   // Import t and i18n from useTranslation
   const { t, i18n } = useTranslation();
   const { state } = useContext(GlobalContext);
+    const [isMobile, setIsMobile] = useState(false);
+
+    useEffect(() => {
+      const handleResize = () => {
+        setIsMobile(window.innerWidth < 768); // Common breakpoint for mobile
+      };
+
+      handleResize(); // Set initial value
+      window.addEventListener('resize', handleResize);
+
+      return () => window.removeEventListener('resize', handleResize);
+    }, []);
+
   const menuText = t(caption);
-  return (
+  const menuContent = (
     <>
-      <Popover content={menuText} placement="right">
-        {/* If value of collapsed is false show caption & icon else hiding caption and showing only icon*/}
-        {!collapsed ? (
-          <div className="menu-collapsed">
-            <div>
-              {menu && menu.image_path ? <img style={{ width: '25px' }} src={menu.image_path}></img> : <i className={`fa-solid fas ${icon}`} />}
-            </div>
-
-            <div style={{ color: state.theme.colors.leftSectionColor }}>
-              <span className="caption">
-                {/* {caption} */}
-                {/* <Trans i18nKey="Appointments"></Trans> */}
-                {t(`${caption}`)}
-              </span>
-            </div>
+      {/* If value of collapsed is false show caption & icon else hiding caption and showing only icon*/}
+      {!collapsed ? (
+        <div className="menu-collapsed">
+          <div>
+            {menu && menu.image_path ? <img style={{ width: '25px' }} src={menu.image_path}></img> : <i className={`fa-solid fas ${icon}`} />}
           </div>
-        ) : (
-          <div className="menu-collapsed">
-            <span className="anticon">
-              {menu && menu.image_path ? <img style={{ width: '25px' }} src={menu.image_path}></img> : <i className={`fa-solid fas ${icon}`} />}
-            </span>
 
-            <span style={{ color: state.theme.colors.colorPrimaryText, paddingLeft: '6px' }}>
-              {/* <>{caption}</> */}
+          <div style={{ color: state.theme.colors.leftSectionColor }}>
+            <span className="caption">
+              {/* {caption} */}
+              {/* <Trans i18nKey="Appointments"></Trans> */}
               {t(`${caption}`)}
             </span>
           </div>
-        )}
-      </Popover>
+        </div>
+      ) : (
+        <div className="menu-collapsed">
+          <span className="anticon">
+            {menu && menu.image_path ? <img style={{ width: '25px' }} src={menu.image_path}></img> : <i className={`fa-solid fas ${icon}`} />}
+          </span>
+
+          <span style={{ color: state.theme.colors.colorPrimaryText, paddingLeft: '6px' }}>
+            {/* <>{caption}</> */}
+            {t(`${caption}`)}
+          </span>
+        </div>
+      )}
     </>
   );
+
+    // On mobile, or when the menu is collapsed (based on original logic), don't show the popover tooltip.
+    return isMobile || collapsed ? menuContent : <Popover content={menuText} placement="right">{menuContent}</Popover>;
 }
 
 export default function SideMenu({ loading, modules = [], callback, appSettings, collapsed }) {

package/core/models/users/components/assign-role/assign-role.js

@@ -45,6 +45,8 @@ export default function AssignRole() {
   const [loadingUser, setLoadingUser] = useState(false);
   const [loadingRoles, setLoadingRoles] = useState(false);
   const [loadingMenus, setLoadingMenus] = useState(false);
+  // for save
+  const [saving, setSaving] = useState(false);
 
   const [selectedMenus, setSelectedMenus] = useState([]);
   const [search, setSearch] = useState('');
@@ -133,13 +135,9 @@ export default function AssignRole() {
    * @returns {Array<Object>}
    */
 
-  const filterAndSortMenus = (menus, allowedIds) => {
-    return menus
-      .filter((m) => allowedIds.includes(m.id))
-      .map((m) => ({
-        ...m,
-        sub_menus: filterAndSortMenus(m.sub_menus || [], allowedIds),
-      }));
+  const filterAndSortMenus = (menus, allowedIds = []) => {
+    if (!Array.isArray(menus) || !Array.isArray(allowedIds)) return [];
+    return menus.filter((m) => allowedIds.includes(m.id)).map((m) => ({ ...m, sub_menus: filterAndSortMenus(m.sub_menus || [], allowedIds) }));
   };
 
   /**
@@ -180,7 +178,7 @@ export default function AssignRole() {
   /** Filtered roles */
   const filteredRoles = useMemo(() => {
     if (!search) return roles;
-    return roles.filter((r) => r.name.toLowerCase().includes(search.toLowerCase()));
+    return roles.filter((r) => r?.name?.toLowerCase().includes(search.toLowerCase()));
   }, [roles, search]);
 
   /**
@@ -203,28 +201,30 @@ export default function AssignRole() {
    */
   const handleSaveUserRole = async () => {
     if (!id || !selectedRoles.length) {
-      message.warning('User or roles missing');
+      message.warning('No roles selected to save');
       return;
     }
+    // start button spinner
+    setSaving(true);
 
     try {
-      message.loading({ key: 'save', content: 'Saving user roles...' });
-
+      // Save all roles in parallel
       await Promise.all(
         selectedRoles.map((roleId) =>
           UserRolesAPI.addUserRole({
-            values: {
-              user_id: id,
-              role_id: roleId,
-            },
+            values: { user_id: id, role_id: roleId },
           })
         )
       );
 
-      message.success({ key: 'save', content: 'User roles saved successfully' });
+      // Only show success AFTER all saves
+      message.success('User roles saved successfully');
     } catch (err) {
       console.error(err);
-      message.error({ key: 'save', content: 'Failed to save user roles' });
+      message.error('Failed to save user roles');
+    } finally {
+      // stop button spinner
+      setSaving(false);
     }
   };
 
@@ -233,7 +233,7 @@ export default function AssignRole() {
       {/* LEFT PANEL */}
       <Card className="left-panel" bodyStyle={{ padding: 12 }}>
         <div size="small" className="user-card">
-          <Avatar size={40}>{user?.name?.[0] ||''}</Avatar>
+          <Avatar size={40}>{user?.name?.[0] || ''}</Avatar>
 
           <div className="user-info">
             <div>{user?.name || '--'}</div>
@@ -288,7 +288,7 @@ export default function AssignRole() {
         </div>
 
         <div className="footer-actions">
-          <Button type="primary" onClick={handleSaveUserRole}>
+          <Button type="primary" onClick={handleSaveUserRole} loading={saving}>
             Save
           </Button>
         </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ui-soxo-bootstrap-core",
-  "version": "2.4.25-dev.34",
+  "version": "2.4.25-dev.35",
   "description": "All the Core Components for you to start",
   "keywords": [
     "all in one"