Web: People: Fix opening

products/ASC.People/Client/src/App.js

@@ -1,7 +1,5 @@
 import Shell from "studio/shell";
 
-import "./custom.scss";
-
 const App = () => (
     <Shell />
 );

products/ASC.People/Client/src/People.jsx

@@ -1,31 +1,93 @@
-import React, { useEffect, useState } from "react";
-//import Routes from "./Routes";
-//import { Box, Text } from "@appserver/components";
-import Box from "@appserver/components/box";
-import Text from "@appserver/components/text";
+import React, { Suspense, useEffect } from "react";
+import { Provider as PeopleProvider, inject, observer } from "mobx-react";
+import { Switch } from "react-router";
+import PeopleStore from "./store/PeopleStore";
+import Home from "./components/pages/Home";
+import Loader from "@appserver/components/loader";
+import toastr from "@appserver/common/components/Toast";
+import PrivateRoute from "@appserver/common/components/PrivateRoute";
+import { updateTempContent } from "@appserver/common/utils";
+const Profile = React.lazy(() => import("./components/pages/Profile"));
+const ProfileAction = React.lazy(() =>
+  import("./components/pages/ProfileAction")
+);
+const GroupAction = React.lazy(() => import("./components/pages/GroupAction"));
+const Reassign = React.lazy(() => import("./components/pages/Reassign"));
+import config from "../package.json";
+import "./custom.scss";
+import "./i18n";
+
+const Error404 = React.lazy(() => import("@appserver/common/pages/errors/404"));
 
 const PeopleContent = (props) => {
-  const [isLoading, setIsLoading] = useState(true);
-  console.log("People props", props);
+  const { homepage, isLoaded, loadBaseInfo } = props;
 
   useEffect(() => {
-    setIsLoading(false);
-  }, []);
+    loadBaseInfo()
+      .catch((err) => toastr.error(err))
+      .finally(() => {
+        //this.props.setIsLoaded(true);
+        updateTempContent();
+      });
+  }, [loadBaseInfo]);
+
+  useEffect(() => {
+    if (isLoaded) updateTempContent();
+  }, [isLoaded]);
 
   return (
-    <Box
-      displayProp="flex"
-      flexDirection="column"
-      alignItems="center"
-      widthProp="100%"
+    <Suspense
+      fallback={<Loader className="pageLoader" type="rombs" size="40px" />}
     >
-      <Box displayProp="flex" alignItems="center" heightProp="100%">
-        <Text fontSize="24px" color="green">
-          PEOPLE PAGE
-        </Text>
-      </Box>
-    </Box>
-  ); //isLoading ? <div>LOADING STORE</div> : <Routes />;
+      <Switch>
+        <PrivateRoute
+          exact
+          path={`${homepage}/view/:userId`}
+          component={Profile}
+        />
+        <PrivateRoute
+          path={`${homepage}/edit/:userId`}
+          restricted
+          allowForMe
+          component={ProfileAction}
+        />
+        <PrivateRoute
+          path={`${homepage}/create/:type`}
+          restricted
+          component={ProfileAction}
+        />
+        <PrivateRoute
+          path={[`${homepage}/group/edit/:groupId`, `${homepage}/group/create`]}
+          restricted
+          component={GroupAction}
+        />
+        <PrivateRoute
+          path={`${homepage}/reassign/:userId`}
+          restricted
+          component={Reassign}
+        />
+        <PrivateRoute exact path={homepage} component={Home} />
+        <PrivateRoute path={`${homepage}/filter`} component={Home} />
+        <PrivateRoute component={Error404} />
+      </Switch>
+    </Suspense>
+  );
 };
 
-export default PeopleContent;
+const People = inject(({ auth, peopleStore }) => ({
+  homepage: auth.settingsStore.homepage || config.homepage,
+  loadBaseInfo: async () => {
+    //auth.init();
+    await peopleStore.init();
+    auth.setProductVersion(config.version);
+  },
+  isLoaded: auth.isLoaded && peopleStore.isLoaded,
+}))(observer(PeopleContent));
+
+const peopleStore = new PeopleStore();
+
+export default () => (
+  <PeopleProvider peopleStore={peopleStore}>
+    <People />
+  </PeopleProvider>
+);

products/ASC.People/Client/src/components/Article/Header/index.js

@@ -3,14 +3,17 @@ import Headline from "@appserver/common/components/Headline";
 import Loaders from "@appserver/common/components/Loaders";
 import { inject, observer } from "mobx-react";
 
-const ArticleHeaderContent = ({ currentModuleName }) => {
-  return currentModuleName ? (
+const ArticleHeaderContent = ({ isLoaded, currentModuleName }) => {
+  return isLoaded ? (
     <Headline type="menu">{currentModuleName}</Headline>
   ) : (
     <Loaders.ArticleHeader />
   );
 };
 
-export default inject(({ auth }) => ({
-  currentModuleName: auth.product.title,
-}))(observer(ArticleHeaderContent));
+export default inject(({ auth }) => {
+  return {
+    isLoaded: auth.isLoaded,
+    currentModuleName: "", //TODO: FIX (auth.isLoaded && auth.product.title) || null,
+  };
+})(observer(ArticleHeaderContent));

products/ASC.People/Client/src/components/dialogs/DeleteUsersDialog/index.js

@@ -12,7 +12,7 @@ import CustomScrollbarsVirtualList from "@appserver/components/scrollbar/custom-
 import { FixedSizeList as List, areEqual } from "react-window";
 import AutoSizer from "react-virtualized-auto-sizer";
 import { withTranslation } from "react-i18next";
-import { Filter } from "@appserver/common/api";
+import Filter from "@appserver/common/api/people/filter";
 import toastr from "@appserver/common/components/Toast";
 import ModalDialogContainer from "../ModalDialogContainer";
 import { inject, observer } from "mobx-react";

products/ASC.People/Client/src/components/pages/Home/Section/Header/index.js

@@ -9,7 +9,7 @@ import { tablet, desktop } from "@appserver/components/utils/device";
 import { Consumer } from "@appserver/components/utils/context";
 
 import Headline from "@appserver/common/components/Headline";
-import toastr from "@appserver/common/toastr";
+import toastr from "@appserver/common/components/Toast/toastr";
 import Loaders from "@appserver/common/components/Loaders";
 import { EmployeeType, EmployeeStatus } from "@appserver/common/constants";
 import { withTranslation } from "react-i18next";

products/ASC.People/Client/src/helpers/converters.js

@@ -9,7 +9,7 @@ import {
   PAGE,
   PAGE_COUNT,
 } from "./constants";
-import { Filter } from "@appserver/common/api";
+import Filter from "@appserver/common/api/people/filter";
 import { getObjectByLocation } from "@appserver/common/utils";
 export function getFilterByLocation(location) {
   const urlFilter = getObjectByLocation(location);

products/ASC.People/Client/src/helpers/people-helpers.js

@@ -4,7 +4,7 @@ import {
   EmployeeStatus,
 } from "@appserver/common/constants";
 import { isAdmin } from "@appserver/common/utils";
-const { isAdmin } = utils;
+//const { isAdmin } = utils;
 
 export const getUserStatus = (user) => {
   if (

products/ASC.People/Client/src/store/FilterStore.js

@@ -1,6 +1,6 @@
 import { action, makeObservable, observable } from "mobx";
 //import { getFilterByLocation } from "../helpers/converters";
-import { Filter } from "@appserver/common/api";
+import Filter from "@appserver/common/api/people/filter";
 import history from "@appserver/common/history";
 import config from "../../package.json";
 import {

products/ASC.People/Client/src/store/InviteLinksStore.js

@@ -1,9 +1,7 @@
 import { action, makeObservable, observable } from "mobx";
 import { getInvitationLinks } from "@appserver/common/api/portal";
-import store from "@appserver/common/store";
-
-const { authStore } = store;
-
+import store from "studio/store";
+const { auth: authStore } = store;
 class InviteLinksStore {
   inviteLinks = {};
 

products/ASC.People/Client/src/store/PeopleStore.js

@@ -1,6 +1,4 @@
 import { action, computed, makeObservable, observable } from "mobx";
-import store from "@appserver/common/store";
-
 import GroupsStore from "./GroupsStore";
 import UsersStore from "./UsersStore";
 import { getFilterByLocation } from "../helpers/converters";
@@ -13,8 +11,8 @@ import SelectionStore from "./SelectionStore";
 import HeaderMenuStore from "./HeaderMenuStore";
 import AvatarEditorStore from "./AvatarEditorStore";
 import InviteLinksStore from "./InviteLinksStore";
-
-const { authStore } = store;
+import store from "studio/store";
+const { auth: authStore } = store;
 
 class PeopleStore {
   groupsStore = null;
@@ -29,6 +27,7 @@ class PeopleStore {
   inviteLinksStore = null;
 
   isLoading = false;
+  isLoaded = false;
 
   constructor() {
     this.groupsStore = new GroupsStore(this);
@@ -44,7 +43,9 @@ class PeopleStore {
 
     makeObservable(this, {
       isLoading: observable,
+      isLoaded: observable,
       setIsLoading: action,
+      setIsLoaded: action,
       init: action,
       isPeoplesAdmin: computed,
       resetFilter: action,
@@ -74,12 +75,18 @@ class PeopleStore {
 
     await this.groupsStore.getGroupList();
     await authStore.settingsStore.getPortalPasswordSettings();
+
+    this.setIsLoaded(true);
   };
 
   setIsLoading = (loading) => {
     this.isLoading = loading;
   };
 
+  setIsLoaded = (isLoaded) => {
+    this.isLoaded = isLoaded;
+  };
+
   resetFilter = (withoutGroup = false) => {
     const { filter } = this.filterStore;
     const { getUsersList } = this.usersStore;

products/ASC.People/Client/src/store/SelectionStore.js

@@ -1,10 +1,11 @@
 import { action, computed, makeObservable, observable } from "mobx";
-import constants from "@appserver/common/constants";
-import store from "@appserver/common/store";
+import {
+  EmployeeStatus,
+  EmployeeActivationStatus,
+} from "@appserver/common/constants";
 import { getUserStatus } from "../helpers/people-helpers";
-
-const { EmployeeStatus, EmployeeActivationStatus } = constants;
-const { authStore } = store;
+import store from "studio/store";
+const { auth: authStore } = store;
 
 class SelectionStore {
   selection = [];

products/ASC.People/Client/src/store/TargetUserStore.js

@@ -1,8 +1,7 @@
 import api from "@appserver/common/api";
-import store from "@appserver/common/store";
 import { action, computed, makeObservable, observable } from "mobx";
-
-const { authStore } = store;
+import store from "studio/store";
+const { auth: authStore } = store;
 
 class TargetUserStore {
   targetUser = null;

products/ASC.People/Client/src/store/UsersStore.js

@@ -1,12 +1,13 @@
 import { action, computed, makeObservable, observable } from "mobx";
 import api from "@appserver/common/api";
-import constants from "@appserver/common/constants";
-import store from "@appserver/common/store";
+import {
+  EmployeeStatus,
+  EmployeeActivationStatus,
+} from "@appserver/common/constants";
 import { isMobileOnly } from "react-device-detect";
-
 const { Filter } = api;
-const { EmployeeStatus, EmployeeActivationStatus } = constants;
-const { authStore } = store;
+import store from "studio/store";
+const { auth: authStore } = store;
 class UsersStore {
   users = [];