Web: Files: added VersionHistoryPanel
This commit is contained in:
parent
3908768165
commit
53f18ae0a8
@ -191,9 +191,11 @@ class SectionBodyContent extends React.Component {
|
|||||||
showSharingPanel: false,
|
showSharingPanel: false,
|
||||||
showMoveToPanel: false,
|
showMoveToPanel: false,
|
||||||
showCopyPanel: false,
|
showCopyPanel: false,
|
||||||
showVersionHistoryPanel: false,
|
|
||||||
isDrag: false,
|
isDrag: false,
|
||||||
canDrag: true,
|
canDrag: true,
|
||||||
|
versionHistory: {
|
||||||
|
showVersionHistoryPanel: false,
|
||||||
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
this.tooltipRef = React.createRef();
|
this.tooltipRef = React.createRef();
|
||||||
@ -242,8 +244,11 @@ class SectionBodyContent extends React.Component {
|
|||||||
showMoveToPanel,
|
showMoveToPanel,
|
||||||
showCopyPanel,
|
showCopyPanel,
|
||||||
isDrag,
|
isDrag,
|
||||||
showVersionHistoryPanel,
|
versionHistory,
|
||||||
} = this.state;
|
} = this.state;
|
||||||
|
|
||||||
|
const { showVersionHistoryPanel } = versionHistory;
|
||||||
|
|
||||||
if (this.state.showSharingPanel !== nextState.showSharingPanel) {
|
if (this.state.showSharingPanel !== nextState.showSharingPanel) {
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
@ -512,15 +517,22 @@ class SectionBodyContent extends React.Component {
|
|||||||
const { settings, history, isMobile } = this.props;
|
const { settings, history, isMobile } = this.props;
|
||||||
const fileId = e.currentTarget.dataset.id;
|
const fileId = e.currentTarget.dataset.id;
|
||||||
if (!isMobile) {
|
if (!isMobile) {
|
||||||
this.setState({ showVersionHistoryPanel: true });
|
this.setState({
|
||||||
|
versionHistory: {
|
||||||
|
showVersionHistoryPanel: true,
|
||||||
|
fileId: fileId,
|
||||||
|
},
|
||||||
|
});
|
||||||
} else {
|
} else {
|
||||||
history.push(`${settings.homepage}/${fileId}/history`);
|
history.push(`${settings.homepage}/${fileId}/history`);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
onHistoryAction = () => {
|
onHistoryAction = () => {
|
||||||
const { showVersionHistoryPanel } = this.state;
|
const { showVersionHistoryPanel } = this.state.versionHistory;
|
||||||
this.setState({ showVersionHistoryPanel: !showVersionHistoryPanel });
|
this.setState({
|
||||||
|
versionHistory: { showVersionHistoryPanel: !showVersionHistoryPanel },
|
||||||
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
lockFile = () => {
|
lockFile = () => {
|
||||||
@ -1551,9 +1563,11 @@ class SectionBodyContent extends React.Component {
|
|||||||
showSharingPanel,
|
showSharingPanel,
|
||||||
showMoveToPanel,
|
showMoveToPanel,
|
||||||
showCopyPanel,
|
showCopyPanel,
|
||||||
showVersionHistoryPanel,
|
versionHistory,
|
||||||
} = this.state;
|
} = this.state;
|
||||||
|
|
||||||
|
const { showVersionHistoryPanel, fileId } = versionHistory;
|
||||||
|
|
||||||
const operationsPanelProps = {
|
const operationsPanelProps = {
|
||||||
setIsLoading,
|
setIsLoading,
|
||||||
isLoading,
|
isLoading,
|
||||||
@ -1627,8 +1641,8 @@ class SectionBodyContent extends React.Component {
|
|||||||
)}
|
)}
|
||||||
{showVersionHistoryPanel && (
|
{showVersionHistoryPanel && (
|
||||||
<VersionHistoryPanel
|
<VersionHistoryPanel
|
||||||
|
fileId={fileId}
|
||||||
visible={showVersionHistoryPanel}
|
visible={showVersionHistoryPanel}
|
||||||
history={{}}
|
|
||||||
onClose={this.onHistoryAction}
|
onClose={this.onHistoryAction}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
@ -3,7 +3,7 @@ import PropTypes from "prop-types";
|
|||||||
import { connect } from "react-redux";
|
import { connect } from "react-redux";
|
||||||
|
|
||||||
import { Backdrop, Heading, Aside } from "asc-web-components";
|
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 { withTranslation, I18nextProvider } from "react-i18next";
|
||||||
import { createI18N } from "../../../helpers/i18n";
|
import { createI18N } from "../../../helpers/i18n";
|
||||||
@ -15,6 +15,8 @@ import {
|
|||||||
StyledBody,
|
StyledBody,
|
||||||
} from "../StyledPanels";
|
} from "../StyledPanels";
|
||||||
|
|
||||||
|
import { SectionBodyContent } from "../../pages/VersionHistory/Section/";
|
||||||
|
|
||||||
const i18n = createI18N({
|
const i18n = createI18N({
|
||||||
page: "VersionHistory",
|
page: "VersionHistory",
|
||||||
localesPath: "pages/VersionHistory",
|
localesPath: "pages/VersionHistory",
|
||||||
@ -22,26 +24,48 @@ const i18n = createI18N({
|
|||||||
|
|
||||||
const { changeLanguage } = utils;
|
const { changeLanguage } = utils;
|
||||||
|
|
||||||
|
const { getSettings } = store.auth.selectors;
|
||||||
|
|
||||||
class PureVersionHistoryPanel extends React.Component {
|
class PureVersionHistoryPanel extends React.Component {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(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();
|
this.props.onClose();
|
||||||
};
|
};
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { visible } = this.props;
|
const { isLoading, versions } = this.state;
|
||||||
|
const { visible, settings } = this.props;
|
||||||
const zIndex = 310;
|
const zIndex = 310;
|
||||||
return (
|
return (
|
||||||
<StyledVersionHistoryPanel visible={visible}>
|
<StyledVersionHistoryPanel
|
||||||
|
className="modal-dialog-aside"
|
||||||
|
visible={visible}
|
||||||
|
>
|
||||||
<Backdrop
|
<Backdrop
|
||||||
onClick={this.onClosePanel}
|
onClick={this.onClosePanelHandler}
|
||||||
visible={visible}
|
visible={visible}
|
||||||
zIndex={zIndex}
|
zIndex={zIndex}
|
||||||
/>
|
/>{" "}
|
||||||
<Aside className="header_aside-panel version-history-panel">
|
{!isLoading ? (
|
||||||
|
<Aside className="header_aside-panel">
|
||||||
<StyledContent>
|
<StyledContent>
|
||||||
<StyledHeaderContent>
|
<StyledHeaderContent>
|
||||||
<Heading
|
<Heading
|
||||||
@ -49,13 +73,20 @@ class PureVersionHistoryPanel extends React.Component {
|
|||||||
size="medium"
|
size="medium"
|
||||||
truncate
|
truncate
|
||||||
>
|
>
|
||||||
Header
|
{this.state.versions && this.state.versions[0].title}
|
||||||
</Heading>
|
</Heading>
|
||||||
</StyledHeaderContent>
|
</StyledHeaderContent>
|
||||||
|
|
||||||
<StyledBody>Body</StyledBody>
|
<StyledBody>
|
||||||
|
<SectionBodyContent
|
||||||
|
getFileVersions={this.getFileVersions}
|
||||||
|
versions={versions}
|
||||||
|
culture={settings.culture}
|
||||||
|
/>
|
||||||
|
</StyledBody>
|
||||||
</StyledContent>
|
</StyledContent>
|
||||||
</Aside>
|
</Aside>
|
||||||
|
) : null}
|
||||||
</StyledVersionHistoryPanel>
|
</StyledVersionHistoryPanel>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@ -75,12 +106,13 @@ const VersionHistoryPanel = (props) => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
VersionHistoryPanelContainer.propTypes = {
|
VersionHistoryPanelContainer.propTypes = {
|
||||||
history: PropTypes.object.isRequired,
|
|
||||||
isLoaded: PropTypes.bool,
|
isLoaded: PropTypes.bool,
|
||||||
};
|
};
|
||||||
|
|
||||||
function mapStateToProps(state) {
|
function mapStateToProps(state) {
|
||||||
return {};
|
return {
|
||||||
|
settings: getSettings(state),
|
||||||
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
export default connect(mapStateToProps)(VersionHistoryPanel);
|
export default connect(mapStateToProps)(VersionHistoryPanel);
|
||||||
|
Loading…
Reference in New Issue
Block a user