Web: Files: added VersionHistoryPanel

products/ASC.Files/Client/src/components/pages/Home/Section/Body/index.js

@@ -191,9 +191,11 @@ class SectionBodyContent extends React.Component {
       showSharingPanel: false,
       showMoveToPanel: false,
       showCopyPanel: false,
-      showVersionHistoryPanel: false,
       isDrag: false,
       canDrag: true,
+      versionHistory: {
+        showVersionHistoryPanel: false,
+      },
     };
 
     this.tooltipRef = React.createRef();
@@ -242,8 +244,11 @@ class SectionBodyContent extends React.Component {
       showMoveToPanel,
       showCopyPanel,
       isDrag,
-      showVersionHistoryPanel,
+      versionHistory,
     } = this.state;
+
+    const { showVersionHistoryPanel } = versionHistory;
+
     if (this.state.showSharingPanel !== nextState.showSharingPanel) {
       return true;
     }
@@ -512,15 +517,22 @@ class SectionBodyContent extends React.Component {
     const { settings, history, isMobile } = this.props;
     const fileId = e.currentTarget.dataset.id;
     if (!isMobile) {
-      this.setState({ showVersionHistoryPanel: true });
+      this.setState({
+        versionHistory: {
+          showVersionHistoryPanel: true,
+          fileId: fileId,
+        },
+      });
     } else {
       history.push(`${settings.homepage}/${fileId}/history`);
     }
   };
 
   onHistoryAction = () => {
-    const { showVersionHistoryPanel } = this.state;
-    this.setState({ showVersionHistoryPanel: !showVersionHistoryPanel });
+    const { showVersionHistoryPanel } = this.state.versionHistory;
+    this.setState({
+      versionHistory: { showVersionHistoryPanel: !showVersionHistoryPanel },
+    });
   };
 
   lockFile = () => {
@@ -1551,9 +1563,11 @@ class SectionBodyContent extends React.Component {
       showSharingPanel,
       showMoveToPanel,
       showCopyPanel,
-      showVersionHistoryPanel,
+      versionHistory,
     } = this.state;
 
+    const { showVersionHistoryPanel, fileId } = versionHistory;
+
     const operationsPanelProps = {
       setIsLoading,
       isLoading,
@@ -1627,8 +1641,8 @@ class SectionBodyContent extends React.Component {
         )}
         {showVersionHistoryPanel && (
           <VersionHistoryPanel
+            fileId={fileId}
             visible={showVersionHistoryPanel}
-            history={{}}
             onClose={this.onHistoryAction}
           />
         )}

products/ASC.Files/Client/src/components/panels/VersionHistoryPanel/index.js

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
 import { connect } from "react-redux";
 
 import { Backdrop, Heading, Aside } from "asc-web-components";
-import { utils } from "asc-web-common";
+import { api, utils, store } from "asc-web-common";
 
 import { withTranslation, I18nextProvider } from "react-i18next";
 import { createI18N } from "../../../helpers/i18n";
@@ -15,6 +15,8 @@ import {
   StyledBody,
 } from "../StyledPanels";
 
+import { SectionBodyContent } from "../../pages/VersionHistory/Section/";
+
 const i18n = createI18N({
   page: "VersionHistory",
   localesPath: "pages/VersionHistory",
@@ -22,40 +24,69 @@ const i18n = createI18N({
 
 const { changeLanguage } = utils;
 
+const { getSettings } = store.auth.selectors;
+
 class PureVersionHistoryPanel extends React.Component {
   constructor(props) {
     super(props);
+    this.state = { isLoading: true };
   }
 
-  onClosePanel = () => {
+  componentDidMount() {
+    const { fileId } = this.props;
+    if (fileId) {
+      this.getFileVersions(fileId);
+    }
+  }
+
+  getFileVersions = (fileId) => {
+    api.files.getFileVersionInfo(fileId).then((versions) => {
+      console.log(versions);
+      this.setState({ versions: versions, isLoading: false });
+    });
+  };
+
+  onClosePanelHandler = () => {
     this.props.onClose();
   };
 
   render() {
-    const { visible } = this.props;
+    const { isLoading, versions } = this.state;
+    const { visible, settings } = this.props;
     const zIndex = 310;
     return (
-      <StyledVersionHistoryPanel visible={visible}>
+      <StyledVersionHistoryPanel
+        className="modal-dialog-aside"
+        visible={visible}
+      >
         <Backdrop
-          onClick={this.onClosePanel}
+          onClick={this.onClosePanelHandler}
           visible={visible}
           zIndex={zIndex}
-        />
-        <Aside className="header_aside-panel version-history-panel">
-          <StyledContent>
-            <StyledHeaderContent>
-              <Heading
-                className="header_aside-panel-header"
-                size="medium"
-                truncate
-              >
-                Header
-              </Heading>
-            </StyledHeaderContent>
+        />{" "}
+        {!isLoading ? (
+          <Aside className="header_aside-panel">
+            <StyledContent>
+              <StyledHeaderContent>
+                <Heading
+                  className="header_aside-panel-header"
+                  size="medium"
+                  truncate
+                >
+                  {this.state.versions && this.state.versions[0].title}
+                </Heading>
+              </StyledHeaderContent>
 
-            <StyledBody>Body</StyledBody>
-          </StyledContent>
-        </Aside>
+              <StyledBody>
+                <SectionBodyContent
+                  getFileVersions={this.getFileVersions}
+                  versions={versions}
+                  culture={settings.culture}
+                />
+              </StyledBody>
+            </StyledContent>
+          </Aside>
+        ) : null}
       </StyledVersionHistoryPanel>
     );
   }
@@ -75,12 +106,13 @@ const VersionHistoryPanel = (props) => {
 };
 
 VersionHistoryPanelContainer.propTypes = {
-  history: PropTypes.object.isRequired,
   isLoaded: PropTypes.bool,
 };
 
 function mapStateToProps(state) {
-  return {};
+  return {
+    settings: getSettings(state),
+  };
 }
 
 export default connect(mapStateToProps)(VersionHistoryPanel);