Web: Files: added ChangeOwnerPanel
This commit is contained in:
parent
12881aa2c6
commit
ceaf1c230a
@ -0,0 +1,54 @@
|
||||
import React from "react";
|
||||
import { Backdrop, Aside, Heading } from "asc-web-components";
|
||||
import { PeopleSelector } from "asc-web-common";
|
||||
import {
|
||||
StyledAddUsersPanelPanel,
|
||||
StyledContent,
|
||||
StyledHeaderContent,
|
||||
StyledBody,
|
||||
} from "../StyledPanels";
|
||||
|
||||
const OwnerSelector = (props) => {
|
||||
const { ownerLabel, isOpen, groupsCaption, onOwnerSelect, onClose } = props;
|
||||
|
||||
const zIndex = 310;
|
||||
|
||||
return (
|
||||
<StyledAddUsersPanelPanel visible={isOpen}>
|
||||
<Backdrop
|
||||
onClick={onClose}
|
||||
visible={isOpen}
|
||||
zIndex={zIndex}
|
||||
isAside={true}
|
||||
/>
|
||||
<Aside className="header_aside-panel">
|
||||
<StyledContent>
|
||||
<StyledHeaderContent>
|
||||
<Heading
|
||||
className="header_aside-panel-header"
|
||||
size="medium"
|
||||
truncate
|
||||
>
|
||||
{ownerLabel}
|
||||
</Heading>
|
||||
</StyledHeaderContent>
|
||||
|
||||
<StyledBody /*ref={this.scrollRef}*/>
|
||||
<PeopleSelector
|
||||
role="user"
|
||||
employeeStatus={1}
|
||||
displayType="aside"
|
||||
withoutAside
|
||||
isOpen={isOpen}
|
||||
onSelect={onOwnerSelect}
|
||||
groupsCaption={groupsCaption}
|
||||
onCancel={onClose}
|
||||
/>
|
||||
</StyledBody>
|
||||
</StyledContent>
|
||||
</Aside>
|
||||
</StyledAddUsersPanelPanel>
|
||||
);
|
||||
};
|
||||
|
||||
export default OwnerSelector;
|
||||
@ -0,0 +1,219 @@
|
||||
import React from "react";
|
||||
import { withRouter } from "react-router";
|
||||
import { connect } from "react-redux";
|
||||
import {
|
||||
Button,
|
||||
Heading,
|
||||
Link,
|
||||
Text,
|
||||
Backdrop,
|
||||
Aside,
|
||||
} from "asc-web-components";
|
||||
import { withTranslation } from "react-i18next";
|
||||
import { utils, store, toastr } from "asc-web-common";
|
||||
import {
|
||||
setIsLoading,
|
||||
setFilesOwner,
|
||||
setFiles,
|
||||
setFolders,
|
||||
setChangeOwnerPanelVisible,
|
||||
} from "../../../store/files/actions";
|
||||
import {
|
||||
getSelection,
|
||||
getIsLoading,
|
||||
getFiles,
|
||||
getFolders,
|
||||
getShowOwnerChangePanel,
|
||||
} from "../../../store/files/selectors";
|
||||
import { createI18N } from "../../../helpers/i18n";
|
||||
|
||||
import OwnerSelector from "./OwnerSelector";
|
||||
|
||||
import {
|
||||
StyledAsidePanel,
|
||||
StyledContent,
|
||||
StyledFooter,
|
||||
StyledHeaderContent,
|
||||
StyledBody,
|
||||
} from "../StyledPanels";
|
||||
|
||||
const i18n = createI18N({
|
||||
page: "ChangeOwnerPanel",
|
||||
localesPath: "panels/ChangeOwnerPanel",
|
||||
});
|
||||
const { changeLanguage } = utils;
|
||||
const { getSettingsCustomNamesGroupsCaption } = store.auth.selectors;
|
||||
|
||||
class ChangeOwnerComponent extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
changeLanguage(i18n);
|
||||
|
||||
const owner = props.selection[0].createdBy;
|
||||
this.state = { showPeopleSelector: false, owner };
|
||||
}
|
||||
|
||||
updateRowData = (newRowData) => {
|
||||
const { files, folders, setFiles, setFolders } = this.props;
|
||||
|
||||
for (let item of newRowData) {
|
||||
if (!item.fileExst && item.foldersCount) {
|
||||
let folderIndex = folders.findIndex((x) => x.id === item.id);
|
||||
if (folderIndex !== -1) {
|
||||
folders[folderIndex] = item;
|
||||
}
|
||||
} else {
|
||||
let fileIndex = files.findIndex((x) => x.id === item.id);
|
||||
if (fileIndex !== -1) {
|
||||
files[fileIndex] = item;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
setFiles(files);
|
||||
setFolders(folders);
|
||||
};
|
||||
|
||||
onOwnerChange = () => {
|
||||
const { owner } = this.state;
|
||||
const {
|
||||
files,
|
||||
folders,
|
||||
selection,
|
||||
setFolders,
|
||||
setFiles,
|
||||
setIsLoading,
|
||||
} = this.props;
|
||||
const folderIds = [];
|
||||
const fileIds = [];
|
||||
const selectedItem = selection[0];
|
||||
const ownerId = owner.id ? owner.id : owner.key;
|
||||
const isFolder = selectedItem.isFolder;
|
||||
|
||||
isFolder ? folderIds.push(selectedItem.id) : fileIds.push(selectedItem.id);
|
||||
|
||||
setIsLoading(true);
|
||||
setFilesOwner(folderIds, fileIds, ownerId)
|
||||
.then((res) => {
|
||||
if (isFolder) {
|
||||
let folderIndex = folders.findIndex((x) => x.id === selectedItem.id);
|
||||
if (folderIndex !== -1) {
|
||||
folders[folderIndex] = res[0];
|
||||
}
|
||||
setFolders(folders);
|
||||
} else {
|
||||
let fileIndex = files.findIndex((x) => x.id === selectedItem.id);
|
||||
if (fileIndex !== -1) {
|
||||
files[fileIndex] = res[0];
|
||||
}
|
||||
setFiles(files);
|
||||
}
|
||||
})
|
||||
.catch((err) => toastr.error(err))
|
||||
.finally(() => {
|
||||
this.onClose();
|
||||
setIsLoading(false);
|
||||
});
|
||||
};
|
||||
|
||||
onOwnerSelect = (options) => {
|
||||
this.setState({ owner: options[0], showPeopleSelector: false });
|
||||
};
|
||||
|
||||
onShowPeopleSelector = () => {
|
||||
this.setState({ showPeopleSelector: !this.state.showPeopleSelector });
|
||||
};
|
||||
|
||||
onClose = () => {
|
||||
this.props.setChangeOwnerPanelVisible(false);
|
||||
};
|
||||
|
||||
render() {
|
||||
const { visible, t, selection, groupsCaption, isLoading } = this.props;
|
||||
const { showPeopleSelector, owner } = this.state;
|
||||
|
||||
const ownerName = owner.displayName ? owner.displayName : owner.label;
|
||||
const fileName = selection[0].title;
|
||||
const id = owner.id ? owner.id : owner.key;
|
||||
const disableSaveButton = owner && selection[0].createdBy.id === id;
|
||||
const zIndex = 310;
|
||||
|
||||
return (
|
||||
<StyledAsidePanel visible={visible}>
|
||||
<Backdrop
|
||||
onClick={this.onClose}
|
||||
visible={visible}
|
||||
zIndex={zIndex}
|
||||
isAside
|
||||
/>
|
||||
<Aside className="header_aside-panel">
|
||||
<StyledContent>
|
||||
<StyledHeaderContent>
|
||||
<Heading className="sharing_panel-header" size="medium" truncate>
|
||||
{t("ChangeOwner", { fileName })}
|
||||
</Heading>
|
||||
</StyledHeaderContent>
|
||||
<StyledBody>
|
||||
<div className="change-owner_body">
|
||||
<Link
|
||||
className="change-owner_owner-label"
|
||||
isHovered
|
||||
type="action"
|
||||
onClick={this.onShowPeopleSelector}
|
||||
>
|
||||
{ownerName}
|
||||
</Link>
|
||||
<Text>{t("ChangeOwnerDescription")}</Text>
|
||||
</div>
|
||||
</StyledBody>
|
||||
</StyledContent>
|
||||
<StyledFooter>
|
||||
<Button
|
||||
label={t("AddButton")}
|
||||
size="medium"
|
||||
scale
|
||||
primary
|
||||
onClick={this.onOwnerChange}
|
||||
isDisabled={disableSaveButton || isLoading}
|
||||
/>
|
||||
</StyledFooter>
|
||||
</Aside>
|
||||
{showPeopleSelector && (
|
||||
<OwnerSelector
|
||||
ownerLabel={ownerName}
|
||||
isOpen={showPeopleSelector}
|
||||
groupsCaption={groupsCaption}
|
||||
onOwnerSelect={this.onOwnerSelect}
|
||||
onClose={this.onClose}
|
||||
onClosePanels={this.onClosePanels}
|
||||
/>
|
||||
)}
|
||||
</StyledAsidePanel>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const ModalDialogContainerTranslated = withTranslation()(ChangeOwnerComponent);
|
||||
|
||||
const ChangeOwnerPanel = (props) => (
|
||||
<ModalDialogContainerTranslated i18n={i18n} {...props} />
|
||||
);
|
||||
|
||||
const mapStateToProps = (state) => {
|
||||
return {
|
||||
selection: getSelection(state),
|
||||
groupsCaption: getSettingsCustomNamesGroupsCaption(state),
|
||||
isLoading: getIsLoading(state),
|
||||
files: getFiles(state),
|
||||
folders: getFolders(state),
|
||||
visible: getShowOwnerChangePanel(state),
|
||||
};
|
||||
};
|
||||
|
||||
export default connect(mapStateToProps, {
|
||||
setIsLoading,
|
||||
setFiles,
|
||||
setFolders,
|
||||
setChangeOwnerPanelVisible,
|
||||
})(withRouter(ChangeOwnerPanel));
|
||||
@ -0,0 +1,6 @@
|
||||
{
|
||||
"ChangeOwner": "Change owner ({{fileName}})",
|
||||
"AddButton": "Save",
|
||||
"CancelButton": "Cancel",
|
||||
"ChangeOwnerDescription": "Once the changes are applied, the current folder owner gets access rights to the access settings of the group he/she belongs to or according to the default folder permissions."
|
||||
}
|
||||
@ -0,0 +1,6 @@
|
||||
{
|
||||
"ChangeOwner": "Сменить владельца ({{fileName}})",
|
||||
"AddButton": "Сохранить",
|
||||
"CancelButton": "Отмена",
|
||||
"ChangeOwnerDescription": "Как только изменения будут применены, текущий владелец файла/папки получит права доступа, соответствующие правам доступа той группы, к которой он принадлежит, или соответствующие правам доступа по умолчанию, заданным для этой папки."
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user