Merge branch 'feature/mobx' of github.com:ONLYOFFICE/AppServer into feature/mobx

web/ASC.Web.Client/src/helpers/utils.js

@@ -1,18 +1,17 @@
 import { store as commonStore } from "asc-web-common";
-import store from "../store/store";
+//import store from "../store/store";
 
-const { getCurrentProduct } = commonStore.auth.selectors;
+const { authStore } = commonStore;
+
+//const { getCurrentProduct } = commonStore.auth.selectors;
 
 export const setDocumentTitle = (subTitle = null) => {
-  const state = store.getState();
+  // const state = store.getState();
-  const { auth: commonState } = state;
+  // const { auth: commonState } = state;
-
+  const { isAuthenticated, settingsStore, product: currentModule } = authStore;
-  const { isAuthenticated, settings } = commonState;
+  const { organizationName } = settingsStore;
-  const { organizationName } = settings;
 
   let title;
-  const currentModule = getCurrentProduct(state);
-
   if (subTitle) {
     if (isAuthenticated && currentModule) {
       title = subTitle + " - " + currentModule.title;

web/ASC.Web.Common/src/components/NavMenu/sub-components/header-nav.js

@@ -7,14 +7,6 @@ import ProfileActions from "./profile-actions";
 import { useTranslation } from "react-i18next";
 import { utils } from "asc-web-components";
 const { tablet } = utils.device;
-//import { logout } from "../../../store/auth/actions";
-//import store from "../../../store/index";
-// import {
-//   //getCurrentUser,
-//   getLanguage,
-//   getIsolateModules,
-//   getIsLoaded,
-// } from "../../../store/auth/selectors";
 import { inject, observer } from "mobx-react";
 
 const StyledNav = styled.nav`
@@ -93,17 +85,22 @@ const HeaderNav = ({
   //console.log("HeaderNav render");
   return (
     <StyledNav>
-      {modules.map((module) => (
+      {modules
-        <NavItem
+        .filter((m) => m.isolateMode)
-          key={module.id}
+        .map((m) => (
-          iconName={module.iconName}
+          <NavItem
-          iconUrl={module.iconUrl}
+            key={m.id}
-          badgeNumber={module.notifications}
+            iconName={m.iconName}
-          onClick={module.onClick}
+            iconUrl={m.iconUrl}
-          onBadgeClick={module.onBadgeClick}
+            badgeNumber={m.notifications}
-          noHover={true}
+            onClick={(e) => {
-        />
+              window.open(m.link, "_self");
-      ))}
+              e.preventDefault();
+            }}
+            onBadgeClick={(e) => console.log(m.iconName + "Badge Clicked", e)}
+            noHover={true}
+          />
+        ))}
 
       {isAuthenticated && user ? (
         <ProfileActions userActions={getCurrentUserActions()} user={user} />
@@ -139,6 +136,7 @@ export default inject(({ store }) => {
   const { homepage, defaultPage } = settingsStore;
   const { user } = userStore;
   const { modules } = moduleStore;
+
   return {
     user,
     homepage,

web/ASC.Web.Common/src/components/NavMenu/sub-components/header.js

@@ -10,6 +10,7 @@ import Loaders from "../../Loaders/index";
 import { ReactSVG } from "react-svg";
 
 import { utils } from "asc-web-components";
+import { useTranslation } from "react-i18next";
 // import { connect } from "react-redux";
 // import {
 //   getCurrentProductId,
@@ -85,9 +86,11 @@ const HeaderComponent = ({
   isNavOpened,
   currentProductId,
   toggleAside,
+  isAdmin,
   ...props
 }) => {
   //console.log("Header render");
+  const { t } = useTranslation();
 
   const isNavAvailable = mainModules.length > 0;
   const onLogoClick = () => {
@@ -103,6 +106,42 @@ const HeaderComponent = ({
     if (item) item.onBadgeClick(e);
   };
 
+  const onItemClick = (e) => {
+    if (!e) return;
+    const link = e.currentTarget.dataset.link;
+    window.open(link, "_self");
+    e.preventDefault();
+  };
+
+  const getCustomModules = () => {
+    if (!isAdmin) {
+      return [];
+    } // Temporarily hiding the settings module
+
+    return (
+      <>
+        <NavItem
+          separator={true}
+          key={"nav-modules-separator"}
+          data-id={"nav-modules-separator"}
+        />
+        <NavItem
+          separator={false}
+          key={"settings"}
+          data-id={"settings"}
+          data-link="/settings"
+          opened={isNavOpened}
+          active={"settings" == currentProductId}
+          iconName={"SettingsIcon"}
+          onClick={onItemClick}
+          url="/settings"
+        >
+          {t("Settings")}
+        </NavItem>
+      </>
+    );
+  };
+
   return (
     <>
       <Header module={currentProductName}>
@@ -140,6 +179,11 @@ const HeaderComponent = ({
           onMouseLeave={onNavMouseLeave}
         >
           <NavLogoItem opened={isNavOpened} onClick={onLogoClick} />
+          <NavItem
+            separator={true}
+            key={"nav-products-separator"}
+            data-id={"nav-products-separator"}
+          />
           {mainModules.map(
             ({
               id,
@@ -147,27 +191,28 @@ const HeaderComponent = ({
               iconName,
               iconUrl,
               notifications,
-              onClick,
+              link,
-              url,
               title,
             }) => (
               <NavItem
                 separator={!!separator}
                 key={id}
                 data-id={id}
+                data-link={link}
                 opened={isNavOpened}
                 active={id == currentProductId}
                 iconName={iconName}
                 iconUrl={iconUrl}
                 badgeNumber={notifications}
-                onClick={onClick}
+                onClick={onItemClick}
                 onBadgeClick={onBadgeClick}
-                url={url}
+                url={link}
               >
                 {title}
               </NavItem>
             )
           )}
+          {getCustomModules()}
         </Nav>
       )}
     </>
@@ -190,6 +235,7 @@ HeaderComponent.propTypes = {
   logoUrl: PropTypes.string,
   isLoaded: PropTypes.bool,
   isAuthenticated: PropTypes.bool,
+  isAdmin: PropTypes.bool,
 };
 
 export default inject(({ store }) => {
@@ -198,11 +244,16 @@ export default inject(({ store }) => {
     moduleStore,
     isLoaded,
     isAuthenticated,
+    isAdmin,
     product,
   } = store;
   const { logoUrl, defaultPage, currentProductId } = settingsStore;
-  const { modules: mainModules, totalNotifications } = moduleStore;
+  const { modules, totalNotifications } = moduleStore;
+
+  const mainModules = modules.filter((m) => !m.isolateMode);
+
   return {
+    isAdmin,
     defaultPage,
     logoUrl,
     mainModules,

web/ASC.Web.Common/src/store/AuthStore.js

@@ -51,13 +51,6 @@ class AuthStore {
     }
 
     return Promise.all(requests);
-
-    // await this.settingsStore.init();
-
-    // if (!this.isAuthenticated) return;
-
-    // await this.userStore.init();
-    // await this.moduleStore.init();
   };
 
   get isLoaded() {
@@ -168,9 +161,11 @@ class AuthStore {
   setUserStore = (store) => {
     this.userStore = store;
   };
+
   setModuleStore = (store) => {
     this.moduleStore = store;
   };
+
   setSettingsStore = (store) => {
     this.settingsStore = store;
   };

web/ASC.Web.Common/src/store/ModuleStore.js

@@ -1,5 +1,5 @@
-import { action, computed, makeObservable, observable } from "mobx";
 import api from "../api";
+import { makeAutoObservable } from "mobx";
 
 class ModuleStore {
   isLoading = false;
@@ -7,42 +7,12 @@ class ModuleStore {
   modules = [];
 
   constructor() {
-    makeObservable(this, {
+    makeAutoObservable(this);
-      isLoading: observable,
-      isLoaded: observable,
-      modules: observable,
-      totalNotificationsCount: computed,
-      getModules: action,
-      init: action,
-      setIsLoading: action,
-      setIsLoaded: action,
-    });
   }
 
   getModules = async () => {
     const list = await api.modules.getModulesList();
-
+    this.setModules(list);
-    this.modules = list.map((item) => {
-      return {
-        id: item.id,
-        title: item.title,
-        iconName: item.iconName, // || iconName || "PeopleIcon", //TODO: Change to URL
-        iconUrl: item.iconUrl,
-        notifications: item.notifications,
-        url: item.link,
-        link: item.link,
-        isPrimary: item.isPrimary,
-        description: item.description,
-        imageUrl: item.imageUrl,
-        onClick: (e) => {
-          if (e) {
-            window.open(item.link, "_self");
-            e.preventDefault();
-          }
-        },
-        onBadgeClick: (e) => console.log("Badge Clicked", e),
-      };
-    });
   };
 
   get totalNotificationsCount() {
@@ -70,6 +40,10 @@ class ModuleStore {
   setIsLoaded = (isLoaded) => {
     this.isLoaded = isLoaded;
   };
+
+  setModules = (modules) => {
+    this.modules = modules;
+  };
 }
 
 export default ModuleStore;