working RoomInfoStore

2022-02-09 21:08:22 +03:00 · 2022-02-09 21:08:22 +03:00 · 82c1c47be6
commit 82c1c47be6
parent ff3c55e892
13 changed files with 696 additions and 654 deletions
--- a/frontend.code-workspace
+++ b/frontend.code-workspace
@ -8,14 +8,14 @@
            "name": "📦 @appserver/common",
            "path": "packages\\asc-web-common"
        },
-    {
-      "name": "📦 @appserver/components",
-      "path": "packages\\asc-web-components"
-    },
        {
            "name": "🚀 @appserver/files",
            "path": "products\\ASC.Files\\Client"
        },
+        {
+            "name": "📦 @appserver/components",
+            "path": "packages\\asc-web-components"
+        },
        {
            "name": "🚀 @appserver/people",
            "path": "products\\ASC.People\\Client"
--- a/packages/asc-web-common/components/PageLayout/index.js
+++ b/packages/asc-web-common/components/PageLayout/index.js
@ -611,6 +611,8 @@ PageLayout.SectionHeader = SectionHeader;
 PageLayout.SectionFilter = SectionFilter;
 PageLayout.SectionBody = SectionBody;
 PageLayout.SectionPaging = SectionPaging;
+PageLayout.RoomInfoHeader = RoomInfoHeader;
+PageLayout.RoomInfoBody = RoomInfoBody;

 export default inject(({ auth }) => {
    const { isLoaded, settingsStore } = auth;
--- a/packages/asc-web-common/components/PageLayout/sub-components/room-info-body.js
+++ b/packages/asc-web-common/components/PageLayout/sub-components/room-info-body.js
@ -1,16 +1,22 @@
 import { inject, observer } from "mobx-react";
 import React from "react";

-const SubRoomInfoBody = ({ children }) => {
-    console.log("SRIB children - ", children);
+const SubRoomInfoBody = ({ children, isVisible }) => {
+    console.log("Body children - ", children);
+
    return (
        <div>
+            <p>Room Info Is {isVisible ? "Visible" : "Hidden"}</p>
            <div>ROOM INFO BODY</div>
            <div>Children - {children}</div>
        </div>
    );
 };

-export default inject(() => {
-    return {};
+export default inject(({ roomInfoStore }) => {
+    let isVisible = false;
+    if (roomInfoStore) isVisible = roomInfoStore.isVisible;
+    return {
+        isVisible,
+    };
 })(observer(SubRoomInfoBody));
--- a/packages/asc-web-common/components/PageLayout/sub-components/room-info-header.js
+++ b/packages/asc-web-common/components/PageLayout/sub-components/room-info-header.js
@ -2,7 +2,7 @@ import { inject, observer } from "mobx-react";
 import React from "react";

 const SubRoomInfoHeader = ({ children }) => {
-    console.log("SRIH children - ", { children });
+    console.log("Header children - ", { children });
    return (
        <div>
            <div>ROOM INFO HEADER</div>
--- a/packages/asc-web-common/components/PageLayout/sub-components/room-info.js
+++ b/packages/asc-web-common/components/PageLayout/sub-components/room-info.js
@ -1,8 +1,10 @@
-import { observer } from "mobx-react";
+import { inject, observer } from "mobx-react";
 import React from "react";
 import styled from "styled-components";

-const RoomInfo = ({ children }) => {
+const RoomInfo = ({ children, isVisible }) => {
+    if (!isVisible) return null;
+
    const StyledRoomInfo = styled.div`
        height: 100%;
        width: 400px;
@ -14,4 +16,10 @@ const RoomInfo = ({ children }) => {
    return <StyledRoomInfo>{children}</StyledRoomInfo>;
 };

-export default observer(RoomInfo);
+export default inject(({ roomInfoStore }) => {
+    let isVisible = false;
+    if (roomInfoStore) isVisible = roomInfoStore.isVisible;
+    return {
+        isVisible,
+    };
+})(RoomInfo);
--- a/packages/asc-web-common/store/SettingsStore.js
+++ b/packages/asc-web-common/store/SettingsStore.js
@ -192,7 +192,10 @@ class SettingsStore {
    init = async () => {
        this.setIsLoading(true);

-    await Promise.all([this.getPortalSettings(), this.getBuildVersionInfo()]);
+        await Promise.all([
+            this.getPortalSettings(),
+            this.getBuildVersionInfo(),
+        ]);

        this.setIsLoading(false);
        this.setIsLoaded(true);
@ -302,7 +305,9 @@ class SettingsStore {
    };

    getPortalPasswordSettings = async (confirmKey = null) => {
-    const settings = await api.settings.getPortalPasswordSettings(confirmKey);
+        const settings = await api.settings.getPortalPasswordSettings(
+            confirmKey
+        );
        this.setPasswordSettings(settings);
    };

--- a/products/ASC.Files/Client/src/pages/Home/RoomInfo/Body/index.js
+++ b/products/ASC.Files/Client/src/pages/Home/RoomInfo/Body/index.js
@ -1,12 +1,7 @@
-import { inject, observer } from "mobx-react";
 import React from "react";
-import { withTranslation } from "react-i18next";
-import { withRouter } from "react-router";

 const RoomInfoBodyContent = () => {
    return <div>NOTIFICATION BODY CONTENT</div>;
 };

-export default inject(({}) => {
-    return {};
-})(observer(RoomInfoBodyContent));
+export default RoomInfoBodyContent;
--- a/products/ASC.Files/Client/src/pages/Home/RoomInfo/Header/index.js
+++ b/products/ASC.Files/Client/src/pages/Home/RoomInfo/Header/index.js
@ -1,7 +1,5 @@
 import { inject, observer } from "mobx-react";
 import React from "react";
-import { withTranslation } from "react-i18next";
-import { withRouter } from "react-router";

 const RoomInfoHeaderContent = () => {
    return <div>NOTIFICATION HEADER CONTENT</div>;
--- a/products/ASC.Files/Client/src/pages/Home/Section/Header/index.js
+++ b/products/ASC.Files/Client/src/pages/Home/Section/Header/index.js
@ -119,6 +119,11 @@ const StyledContainer = styled.div`
                }
            }
        }
+
+        .room-info-button {
+            position: absolute;
+            right: 0;
+        }
    }

    .group-button-menu-container {
@ -553,7 +558,7 @@ class SectionHeaderContent extends React.Component {
                                                    />
                                                </span>
                                            )}
-                                        <span>
+                                        <>
                                            <IconButton
                                                iconName="/static/images/arrow.path.react.svg"
                                                size="15"
@ -561,9 +566,9 @@ class SectionHeaderContent extends React.Component {
                                                hoverColor="#657077"
                                                isFill={true}
                                                onClick={this.onToggleRoomInfo}
-                                                className="trash-button"
+                                                className="room-info-button"
                                            />
-                                        </span>
+                                        </>
                                    </>
                                )}
                            </div>
@ -584,6 +589,7 @@ export default inject(
        filesActionsStore,
        settingsStore,
        treeFoldersStore,
+        roomInfoStore,
    }) => {
        const {
            setSelected,
@ -621,6 +627,7 @@ export default inject(
            downloadAction,
            getHeaderMenu,
        } = filesActionsStore;
+        const toggleRoomInfo = roomInfoStore.toggleIsVisible;

        return {
            isDesktop: auth.settingsStore.isDesktopClient,
@ -630,6 +637,7 @@ export default inject(
            currentFolderId: selectedFolderStore.id,
            filter,
            canCreate,
+            toggleRoomInfo,
            isHeaderVisible,
            isHeaderIndeterminate,
            isHeaderChecked,
--- a/products/ASC.Files/Client/src/store/RoomInfoStore.js
+++ b/products/ASC.Files/Client/src/store/RoomInfoStore.js
@ -8,8 +8,12 @@ class RoomInfoStore {
    }

    toggleIsVisible = () => {
-        isVisible = !this.isVisible;
+        this.isVisible = !this.isVisible;
    };
+
+    get isVisible() {
+        return this.isVisible;
+    }
 }

 export default RoomInfoStore;
--- a/products/ASC.Files/Client/src/store/SettingsStore.js
+++ b/products/ASC.Files/Client/src/store/SettingsStore.js
@ -1,11 +1,11 @@
-import { makeAutoObservable } from "mobx";
 import api from "@appserver/common/api";
-import axios from "axios";
 import {
    setFavoritesSetting,
    setRecentSetting,
 } from "@appserver/common/api/files";
 import { FolderType } from "@appserver/common/constants";
+import axios from "axios";
+import { makeAutoObservable } from "mobx";

 class SettingsStore {
    thirdPartyStore;
@ -25,6 +25,8 @@ class SettingsStore {
    hideConfirmConvertSave = null;
    chunkUploadSize = 1024 * 1023; // 1024 * 1023; //~0.999mb

+    roomInfoIsVisible = false;
+
    settingsIsLoaded = false;

    constructor(thirdPartyStore, treeFoldersStore) {
@ -34,6 +36,10 @@ class SettingsStore {
        this.treeFoldersStore = treeFoldersStore;
    }

+    get roomInfoIsVisible() {
+        return this.roomInfoIsVisible;
+    }
+
    setIsLoaded = (isLoaded) => {
        this.settingsIsLoaded = isLoaded;
    };
@ -81,8 +87,12 @@ class SettingsStore {
                                for (let item of capabilities) {
                                    item.splice(1, 1);
                                }
-                this.thirdPartyStore.setThirdPartyCapabilities(capabilities); //TODO: Out of bounds read: 1
-                this.thirdPartyStore.setThirdPartyProviders(providers);
+                                this.thirdPartyStore.setThirdPartyCapabilities(
+                                    capabilities
+                                ); //TODO: Out of bounds read: 1
+                                this.thirdPartyStore.setThirdPartyProviders(
+                                    providers
+                                );
                            });
                    }
                    return this.setIsLoaded(true);
@ -131,7 +141,9 @@ class SettingsStore {
                    for (let item of capabilities) {
                        item.splice(1, 1);
                    }
-          this.thirdPartyStore.setThirdPartyCapabilities(capabilities); //TODO: Out of bounds read: 1
+                    this.thirdPartyStore.setThirdPartyCapabilities(
+                        capabilities
+                    ); //TODO: Out of bounds read: 1
                    this.thirdPartyStore.setThirdPartyProviders(providers);
                });
        } else {
@ -140,7 +152,9 @@ class SettingsStore {
    };

    setForceSave = (data, setting) =>
-    api.files.forceSave(data).then((res) => this.setFilesSetting(setting, res));
+        api.files
+            .forceSave(data)
+            .then((res) => this.setFilesSetting(setting, res));

    updateRootTreeFolders = (set, rootFolderIndex, folderType) => {
        const {
@ -151,7 +165,9 @@ class SettingsStore {

        getFoldersTree().then((root) => {
            if (set) {
-        const rootFolder = root.find((x) => x.rootFolderType === folderType);
+                const rootFolder = root.find(
+                    (x) => x.rootFolderType === folderType
+                );
                const newTreeFolders = treeFolders;
                newTreeFolders.splice(rootFolderIndex, 0, rootFolder);
                setTreeFolders(newTreeFolders);
--- a/products/ASC.Files/Client/src/store/index.js
+++ b/products/ASC.Files/Client/src/store/index.js
@ -1,4 +1,3 @@
-import RoomInfoStore from "./RoomInfoStore";
 import store from "studio/store";

 import DialogsStore from "./DialogsStore";
@ -11,6 +10,7 @@ import iconFormatsStore from "./IconFormatsStore";
 import MediaViewerDataStore from "./MediaViewerDataStore";
 import mediaViewersFormatsStore from "./MediaViewersFormatsStore";
 import PrimaryProgressDataStore from "./PrimaryProgressDataStore";
+import RoomInfoStore from "./RoomInfoStore";
 import SecondaryProgressDataStore from "./SecondaryProgressDataStore";
 import selectedFilesStore from "./SelectedFilesStore";
 import selectedFolderStore from "./SelectedFolderStore";