IlyaSobolev/DocSpace-buildtools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'feature/files' of github.com:ONLYOFFICE/AppServer into feature/files

Browse Source
This commit is contained in:
Ilya Oleshko 2020-03-30 15:59:07 +03:00
commit 53d2a53c47
15 changed files with 635 additions and 538 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
products/ASC.Files/Client/src/components/pages/Home/Section/Header/index.js
View File

@ -13,16 +13,17 @@ import {
DropDownItem,
GroupButtonsMenu,
IconButton,
toastr
toastr,
ComboBox,
Icons
} from "asc-web-components";
import { fetchFiles, setAction } from "../../../../../store/files/actions";
import { default as filesStore } from "../../../../../store/store";
import { EmptyTrashDialog, DeleteDialog } from '../../../../dialogs';
import { SharingPanel, AddGroupsPanel, AddUsersPanel} from "../../../../panels";
import { isCanBeDeleted } from "../../../../../store/files/selectors";
import SharingPanel from "./panels/SharingPanel";
import AddUsersPanel from "./panels/AddUsersPanel";
import AddGroupPanel from "./panels/AddGroupPanel";
const { isAdmin } = store.auth.selectors;
const { FilterType, FileAction } = constants;
@ -116,8 +117,7 @@ const SectionHeaderContent = props => {
isRecycleBinFolder,
filter,
deleteDialogVisible,
user,
groupsCaption
currentUser
} = props;
const onCreate = (format) => {
@ -367,31 +367,44 @@ const SectionHeaderContent = props => {
onClick: onEmptyTrashAction
});
const [selectedUsers, setSelectedUsers] = useState([currentUser]);
const onSetSelectedUsers = users => setSelectedUsers([...selectedUsers, ...users]);
const [accessRight, setAccessRight] = useState({
icon: "EyeIcon",
rights: "ReadOnly"
});
const onFullAccessClick = () => {
console.log("onFullAccessClick");
//this.setState({ currentIconName: "AccessEditIcon" });
setAccessRight({ icon: "AccessEditIcon", rights: "FullAccess" });
};
const onReadOnlyClick = () => {
console.log("onReadOnlyClick");
//this.setState({ currentIconName: "EyeIcon" });
setAccessRight({ icon: "EyeIcon", rights: "ReadOnly" });
};
const onReviewClick = () => {
console.log("onReviewClick");
//this.setState({ currentIconName: "AccessReviewIcon" });
setAccessRight({ icon: "AccessReviewIcon", rights: "Review" });
};
const onCommentClick = () => {
console.log("onCommentClick");
//this.setState({ currentIconName: "AccessCommentIcon" });
setAccessRight({ icon: "AccessCommentIcon", rights: "Comment" });
};
const onFormFillingClick = () => {
console.log("onFormFillingClick");
//this.setState({ currentIconName: "AccessFormIcon" });
setAccessRight({ icon: "AccessFormIcon", rights: "FormFilling" });
};
const onDenyAccessClick = () => {
console.log("onDenyAccessClick");
//this.setState({ currentIconName: "AccessNoneIcon" });
setAccessRight({ icon: "AccessNoneIcon", rights: "DenyAccess" });
};
const onRemoveUserClick = item => {
console.log("onRemoveUserClick", item);
}
const advancedOptions = (
<>
<DropDownItem
@ -427,6 +440,25 @@ const SectionHeaderContent = props => {
</>
);
const accessOptionsComboBox = (
<ComboBox
advancedOptions={advancedOptions}
options={[]}
selectedOption={{ key: 0 }}
size="content"
className="ad-selector_combo-box"
scaled={false}
directionX="right"
//isDisabled={isDisabled}
>
{React.createElement(Icons[accessRight.icon], {
size: "medium"
//color: this.state.currentIconColor,
//isfill: isFill
})}
</ComboBox>
);
return (
<StyledContainer isHeaderVisible={isHeaderVisible}>
{isHeaderVisible ? (
@ -512,28 +544,31 @@ const SectionHeaderContent = props => {
<SharingPanel
onClose={openSharingPanel}
selection={selection}
visible={showSharingPanel}
onShowUsersPanel={onShowUsersPanel}
onShowGroupsPanel={onShowGroupsPanel}
advancedOptions={advancedOptions}
accessRight={accessRight}
users={selectedUsers}
onRemoveUserClick={onRemoveUserClick}
/>
<AddUsersPanel
onSharingPanelClose={openSharingPanel}
onClose={onShowUsersPanel}
visible={showAddUsersPanel}
me={user}
groupsCaption={groupsCaption}
advancedOptions={advancedOptions}
embeddedComponent={accessOptionsComboBox}
onSetSelectedUsers={onSetSelectedUsers}
accessRight={accessRight}
/>
<AddGroupPanel
<AddGroupsPanel
onSharingPanelClose={openSharingPanel}
onClose={onShowGroupsPanel}
visible={showAddGroupsPanel}
advancedOptions={advancedOptions}
//me={user}
//groupsCaption={groupsCaption}
embeddedComponent={accessOptionsComboBox}
onSetSelectedUsers={onSetSelectedUsers}
accessRight={accessRight}
/>
</StyledContainer>
);
@ -555,7 +590,8 @@ const mapStateToProps = state => {
title,
filter,
deleteDialogVisible: isCanBeDeleted(selectedFolder, user),
groupsCaption: settings.customNames.groupsCaption
//groupsCaption: settings.customNames.groupsCaption,
currentUser: user
};
};

173
products/ASC.Files/Client/src/components/pages/Home/Section/Header/panels/AddGroupPanel.js
View File

@ -1,173 +0,0 @@
import React from "react";
import {
Backdrop,
Heading,
Aside,
IconButton,
toastr
} from "asc-web-components";
import { GroupSelector } from "asc-web-common";
import styled from "styled-components";
const StyledAddUserPanel = styled.div`
.add_users_panel-aside {
transform: translateX(${props => (props.visible ? "0" : "500px")});
width: 500px;
@media (max-width: 550px) {
width: 320px;
transform: translateX(${props => (props.visible ? "0" : "320px")});
}
}
`;
const Content = styled.div`
box-sizing: border-box;
position: relative;
width: 100%;
background-color: #fff;
padding: 0 16px 16px;
.add_users_panel-header {
max-width: 500px;
margin: 0 0 0 16px;
line-height: 56px;
font-weight: 700;
}
.add_users_panel-plus-icon {
margin-left: auto;
}
`;
const HeaderContent = styled.div`
display: flex;
align-items: center;
`;
const Body = styled.div`
.selector-wrapper {
position: fixed;
height: 94%;
.column-options {
padding: 0 0 16px 0;
width: 470px;
@media (max-width: 550px) {
width: 320px;
padding: 0 28px 16px 0;
}
.body-options {
padding-top: 16px;
}
}
.footer {
@media (max-width: 550px) {
padding: 16px 28px 16px 0;
}
}
}
`;
class AddGroupPanel extends React.Component {
constructor(props) {
super(props);
this.state = {
showActionPanel: false,
isNotifyUsers: false,
currentIconName: "EyeIcon"
};
this.ref = React.createRef();
}
onPlusClick = () =>
this.setState({ showActionPanel: !this.state.showActionPanel });
onCloseActionPanel = e => {
if (this.ref.current.contains(e.target)) return;
this.setState({ showActionPanel: !this.state.showActionPanel });
};
onKeyClick = () => console.log("onKeyClick");
onAddUsers = () => {
console.log("onAddUsers");
this.props.onClose();
};
onNotifyUsersChange = () =>
this.setState({ isNotifyUsers: !this.state.isNotifyUsers });
onArrowClick = () => this.props.onClose();
onClosePanels = () => {
this.props.onClose();
this.props.onSharingPanelClose();
};
onSelectGroups = items => {
this.props.onClose();
toastr.success("onSelectGroups", "Task in progress");
console.log("onSelect", items);
};
render() {
const { selection, visible, me, advancedOptions } = this.props;
const { currentIconName } = this.state;
const headerText = "Add group";
const zIndex = 310;
return (
<StyledAddUserPanel visible={visible}>
<Backdrop
onClick={this.onClosePanels}
visible={visible}
zIndex={zIndex}
/>
<Aside className="add_users_panel-aside">
<Content>
<HeaderContent>
<IconButton
size="16"
iconName="ArrowPathIcon"
onClick={this.onArrowClick}
/>
<Heading
className="add_users_panel-header"
size="medium"
truncate
>
{headerText}
</Heading>
<IconButton
size="16"
iconName="PlusIcon"
className="add_users_panel-plus-icon"
onClick={() => console.log("onPlusClick")}
/>
</HeaderContent>
<Body>
<GroupSelector
isOpen={visible}
isMultiSelect
displayType="aside"
withoutAside
comboBoxOptions={advancedOptions}
onSelect={this.onSelectGroups}
//onCancel={onCloseGroupSelector}
/>
</Body>
</Content>
</Aside>
</StyledAddUserPanel>
);
}
}
export default AddGroupPanel;

177
products/ASC.Files/Client/src/components/pages/Home/Section/Header/panels/AddUsersPanel.js
View File

@ -1,177 +0,0 @@
import React from "react";
import {
Backdrop,
Heading,
Aside,
IconButton,
toastr
} from "asc-web-components";
import { PeopleSelector } from "asc-web-common";
import styled from "styled-components";
const StyledAddUserPanel = styled.div`
.add_users_panel-aside {
transform: translateX(${props => (props.visible ? "0" : "500px")});
width: 500px;
@media (max-width: 550px) {
width: 320px;
transform: translateX(${props => (props.visible ? "0" : "320px")});
}
}
`;
const Content = styled.div`
box-sizing: border-box;
position: relative;
width: 100%;
background-color: #fff;
padding: 0 16px 16px;
.add_users_panel-header {
max-width: 500px;
margin: 0 0 0 16px;
line-height: 56px;
font-weight: 700;
}
.add_users_panel-plus-icon {
margin-left: auto;
}
`;
const HeaderContent = styled.div`
display: flex;
align-items: center;
`;
const Body = styled.div`
.selector-wrapper {
position: fixed;
height: 94%;
.column-options {
padding: 0 0 16px 0;
width: 470px;
@media (max-width: 550px) {
width: 320px;
padding: 0 28px 16px 0;
}
.body-options {
padding-top: 16px;
}
}
.footer {
@media (max-width: 550px) {
padding: 16px 28px 16px 0;
}
}
}
`;
class AddUsersPanel extends React.Component {
constructor(props) {
super(props);
this.state = {
showActionPanel: false,
isNotifyUsers: false,
currentIconName: "EyeIcon"
};
this.ref = React.createRef();
}
onPlusClick = () =>
this.setState({ showActionPanel: !this.state.showActionPanel });
onCloseActionPanel = e => {
if (this.ref.current.contains(e.target)) return;
this.setState({ showActionPanel: !this.state.showActionPanel });
};
onKeyClick = () => console.log("onKeyClick");
onAddUsers = () => {
console.log("onAddUsers");
this.props.onClose();
};
onNotifyUsersChange = () =>
this.setState({ isNotifyUsers: !this.state.isNotifyUsers });
onArrowClick = () => this.props.onClose();
onClosePanels = () => {
this.props.onClose();
this.props.onSharingPanelClose();
};
onPeopleSelect = items => {
this.props.onClose();
toastr.success("onPeopleSelect", "Task in progress")
console.log("onPeopleSelect", items);
};
render() {
const { selection, visible, me, advancedOptions } = this.props;
const { currentIconName } = this.state;
const headerText = "Add users";
const zIndex = 310;
return (
<StyledAddUserPanel visible={visible}>
<Backdrop
onClick={this.onClosePanels}
visible={visible}
zIndex={zIndex}
/>
<Aside className="add_users_panel-aside">
<Content>
<HeaderContent>
<IconButton
size="16"
iconName="ArrowPathIcon"
onClick={this.onArrowClick}
/>
<Heading
className="add_users_panel-header"
size="medium"
truncate
>
{headerText}
</Heading>
<IconButton
size="16"
iconName="PlusIcon"
className="add_users_panel-plus-icon"
onClick={() => console.log("onPlusClick")}
/>
</HeaderContent>
<Body>
<PeopleSelector
displayType="aside"
withoutAside
isOpen={visible}
isMultiSelect
comboBoxOptions={advancedOptions}
onSelect={this.onPeopleSelect}
defaultOption={me}
//onCancel={this.onCancelSelector}
//groupsCaption={groupsCaption}
//defaultOptionLabel={t("MeLabel")}
/>
</Body>
</Content>
</Aside>
</StyledAddUserPanel>
);
}
}
export default AddUsersPanel;

133
products/ASC.Files/Client/src/components/panels/AddGroupPanel.js Normal file
View File

@ -0,0 +1,133 @@
import React from "react";
import PropTypes from "prop-types";
import {
Backdrop,
Heading,
Aside,
IconButton,
toastr
} from "asc-web-components";
import { GroupSelector } from "asc-web-common";
import { getUsersOfGroups } from "../../store/files/actions";
import {
StyledPanel,
StyledContent,
StyledHeaderContent,
StyledBody
} from "./StyledPanels";
class AddGroupPanel extends React.Component {
constructor(props) {
super(props);
this.state = { showActionPanel: false };
}
onPlusClick = () =>
this.setState({ showActionPanel: !this.state.showActionPanel });
onKeyClick = () => console.log("onKeyClick");
onArrowClick = () => this.props.onClose();
onClosePanels = () => {
this.props.onClose();
this.props.onSharingPanelClose();
};
onSelectGroups = groups => {
const groupIds = [];
for (let item of groups) {
groupIds.push(item.key);
}
getUsersOfGroups(groupIds)
.then(res => {
this.props.onSetSelectedUsers(res);
this.props.onClose();
})
.catch(err => toastr.error(err));
};
shouldComponentUpdate(nextProps, nextState) {
const { showActionPanel } = this.state;
const { visible, accessRight } = this.props;
if (accessRight && accessRight.rights !== nextProps.accessRight.rights) {
return true;
}
if (showActionPanel !== nextState.showActionPanel) {
return true;
}
if (visible !== nextProps.visible) {
return true;
}
return false;
}
render() {
const { visible, embeddedComponent } = this.props;
const headerText = "Add group";
const zIndex = 310;
//console.log("AddGroupPanel render");
return (
<StyledPanel visible={visible}>
<Backdrop
onClick={this.onClosePanels}
visible={visible}
zIndex={zIndex}
/>
<Aside className="header_aside-panel">
<StyledContent>
<StyledHeaderContent>
<IconButton
size="16"
iconName="ArrowPathIcon"
onClick={this.onArrowClick}
/>
<Heading
className="header_aside-panel-header"
size="medium"
truncate
>
{headerText}
</Heading>
<IconButton
size="16"
iconName="PlusIcon"
className="header_aside-panel-plus-icon"
onClick={() => console.log("onPlusClick")}
/>
</StyledHeaderContent>
<StyledBody>
<GroupSelector
isOpen={visible}
isMultiSelect
displayType="aside"
withoutAside
onSelect={this.onSelectGroups}
embeddedComponent={embeddedComponent}
//onCancel={onCloseGroupSelector}
/>
</StyledBody>
</StyledContent>
</Aside>
</StyledPanel>
);
}
}
AddGroupPanel.propTypes = {
visible: PropTypes.bool,
onSharingPanelClose: PropTypes.func,
onClose: PropTypes.func,
onSetSelectedUsers: PropTypes.func
};
export default AddGroupPanel;

127
products/ASC.Files/Client/src/components/panels/AddUsersPanel.js Normal file
View File

@ -0,0 +1,127 @@
import React from "react";
import PropTypes from "prop-types";
import {
Backdrop,
Heading,
Aside,
IconButton
} from "asc-web-components";
import { PeopleSelector } from "asc-web-common";
import {
StyledPanel,
StyledContent,
StyledHeaderContent,
StyledBody
} from "./StyledPanels";
class AddUsersPanel extends React.Component {
constructor(props) {
super(props);
this.state = {
showActionPanel: false
};
}
onPlusClick = () =>
this.setState({ showActionPanel: !this.state.showActionPanel });
onKeyClick = () => console.log("onKeyClick");
onArrowClick = () => this.props.onClose();
onClosePanels = () => {
this.props.onClose();
this.props.onSharingPanelClose();
};
onPeopleSelect = users => {
this.props.onClose();
this.props.onSetSelectedUsers(users);
};
shouldComponentUpdate(nextProps, nextState) {
const { showActionPanel } = this.state;
const { visible, accessRight } = this.props;
if (accessRight && accessRight.rights !== nextProps.accessRight.rights) {
return true;
}
if (showActionPanel !== nextState.showActionPanel) {
return true;
}
if (visible !== nextProps.visible) {
return true;
}
return false;
}
render() {
const { visible, embeddedComponent } = this.props;
const headerText = "Add users";
const zIndex = 310;
//console.log("AddUsersPanel render");
return (
<StyledPanel visible={visible}>
<Backdrop
onClick={this.onClosePanels}
visible={visible}
zIndex={zIndex}
/>
<Aside className="header_aside-panel">
<StyledContent>
<StyledHeaderContent>
<IconButton
size="16"
iconName="ArrowPathIcon"
onClick={this.onArrowClick}
/>
<Heading
className="header_aside-panel-header"
size="medium"
truncate
>
{headerText}
</Heading>
<IconButton
size="16"
iconName="PlusIcon"
className="header_aside-panel-plus-icon"
onClick={() => console.log("onPlusClick")}
/>
</StyledHeaderContent>
<StyledBody>
<PeopleSelector
displayType="aside"
withoutAside
isOpen={visible}
isMultiSelect
onSelect={this.onPeopleSelect}
embeddedComponent={embeddedComponent}
//onCancel={this.onCancelSelector}
//groupsCaption={groupsCaption}
//defaultOptionLabel={t("MeLabel")}
/>
</StyledBody>
</StyledContent>
</Aside>
</StyledPanel>
);
}
}
AddUsersPanel.propTypes = {
visible: PropTypes.bool,
onSharingPanelClose: PropTypes.func,
onClose: PropTypes.func,
onSetSelectedUsers: PropTypes.func
};
export default AddUsersPanel;

186
products/ASC.Files/Client/src/components/pages/Home/Section/Header/panels/SharingPanel.js → products/ASC.Files/Client/src/components/panels/SharingPanel.js
View File

@ -1,4 +1,5 @@
import React from "react";
import PropTypes from "prop-types";
import {
Backdrop,
Heading,
@ -7,78 +8,21 @@ import {
Checkbox,
Button,
DropDown,
DropDownItem
DropDownItem,
ComboBox,
Row,
Text,
Icons,
utils
} from "asc-web-components";
import styled from "styled-components";
const StyledSharingPanel = styled.div`
.sharing_panel-aside {
transform: translateX(${props => (props.visible ? "0" : "500px")});
width: 500px;
@media (max-width: 550px) {
width: ${props => (props.scale ? "100%" : "320px")};
transform: translateX(${props => (props.visible ? "0" : "320px")});
}
}
`;
const Content = styled.div`
box-sizing: border-box;
position: relative;
width: 100%;
background-color: #fff;
padding: 0 16px 16px;
.sharing_panel-header {
max-width: 500px;
margin: 0;
line-height: 56px;
font-weight: 700;
}
`;
const HeaderContent = styled.div`
display: flex;
align-items: center;
border-bottom: 1px solid #dee2e6;
.sharing_panel-icons-container {
display: flex;
margin-left: auto;
.sharing_panel-drop-down-wrapper {
position: relative;
.sharing_panel-drop-down {
padding: 8px 16px;
}
.sharing_panel-plus-icon {
margin-right: 12px;
}
}
}
`;
const Body = styled.div`
position: relative;
padding: 16px 0;
`;
const Footer = styled.div`
display: flex;
position: fixed;
bottom: 16px;
width: 94%;
.sharing_panel-button {
margin-left: auto;
}
@media (max-width: 550px) {
width: 90%;
}
`;
import {
StyledPanel,
StyledContent,
StyledFooter,
StyledSharingHeaderContent,
StyledSharingBody
} from "./StyledPanels";
class SharingPanel extends React.Component {
constructor(props) {
@ -117,22 +61,77 @@ class SharingPanel extends React.Component {
this.props.onShowGroupsPanel();
};
shouldComponentUpdate(nextProps, nextState) {
const { showActionPanel, isNotifyUsers } = this.state;
const { visible, users, accessRight } = this.props;
if (accessRight && accessRight.rights !== nextProps.accessRight.rights) {
return true;
}
if (!utils.array.isArrayEqual(nextProps.users, users)) {
return true;
}
if (showActionPanel !== nextState.showActionPanel) {
return true;
}
if (isNotifyUsers !== nextState.isNotifyUsers) {
return true;
}
if (visible !== nextProps.visible) {
return true;
}
return false;
}
render() {
const checkboxNotifyUsersLabel = "Notify users";
const addUserTranslationLabel = "Add user";
const addGroupTranslationLabel = "Add group";
const sharingHeaderText = "Sharing settings";
const { onClose, selection, visible } = this.props;
const {
onClose,
visible,
users,
advancedOptions,
accessRight,
onRemoveUserClick
} = this.props;
const { showActionPanel, isNotifyUsers } = this.state;
//const element = select('element', ['', 'Avatar', 'Icon', 'ComboBox'], '');
const zIndex = 310;
const embeddedComponent = (
<ComboBox
advancedOptions={advancedOptions}
options={[]}
selectedOption={{ key: 0 }}
size="content"
className="ad-selector_combo-box"
scaled={false}
directionX="left"
//isDisabled={isDisabled}
>
{React.createElement(Icons[accessRight.icon], {
size: "medium"
//color: this.state.currentIconColor,
//isfill: isFill
})}
</ComboBox>
);
//console.log("SharingPanel render");
return (
<StyledSharingPanel visible={visible}>
<StyledPanel visible={visible}>
<Backdrop onClick={onClose} visible={visible} zIndex={zIndex} />
<Aside className="sharing_panel-aside" visible={visible}>
<Content>
<HeaderContent>
<Aside className="header_aside-panel" visible={visible}>
<StyledContent>
<StyledSharingHeaderContent>
<Heading className="sharing_panel-header" size="medium" truncate>
{sharingHeaderText}
</Heading>
@ -169,9 +168,25 @@ class SharingPanel extends React.Component {
onClick={this.onKeyClick}
/>
</div>
</HeaderContent>
<Body>Sharing content</Body>
<Footer>
</StyledSharingHeaderContent>
<StyledSharingBody>
{users.map((item, index) => (
<Row
key={index}
element={embeddedComponent}
contextButtonSpacerWidth="0px"
>
<Text truncate>
{item.label ? item.label : item.displayName}
</Text>
<Icons.RemoveIcon
onClick={onRemoveUserClick.bind(this, item)}
className="sharing_panel-remove-icon"
/>
</Row>
))}
</StyledSharingBody>
<StyledFooter>
<Checkbox
isChecked={isNotifyUsers}
label={checkboxNotifyUsersLabel}
@ -184,12 +199,21 @@ class SharingPanel extends React.Component {
primary
onClick={this.onSaveClick}
/>
</Footer>
</Content>
</StyledFooter>
</StyledContent>
</Aside>
</StyledSharingPanel>
</StyledPanel>
);
}
}
SharingPanel.propTypes = {
onClose: PropTypes.func,
visible: PropTypes.bool,
onShowUsersPanel: PropTypes.func,
onShowGroupsPanel: PropTypes.func,
onRemoveUserClick: PropTypes.func,
users: PropTypes.array
};
export default SharingPanel;

123
products/ASC.Files/Client/src/components/panels/StyledPanels.js Normal file
View File

@ -0,0 +1,123 @@
import styled from "styled-components";
const StyledPanel = styled.div`
.header_aside-panel {
transform: translateX(${props => (props.visible ? "0" : "500px")});
width: 500px;
@media (max-width: 550px) {
width: 320px;
transform: translateX(${props => (props.visible ? "0" : "320px")});
}
}
`;
const StyledContent = styled.div`
box-sizing: border-box;
position: relative;
width: 100%;
background-color: #fff;
padding: 0 16px 16px;
.header_aside-panel-header {
max-width: 500px;
margin: 0 0 0 16px;
line-height: 56px;
font-weight: 700;
}
.header_aside-panel-plus-icon {
margin-left: auto;
}
`;
const StyledHeaderContent = styled.div`
display: flex;
align-items: center;
`;
const StyledBody = styled.div`
.selector-wrapper {
position: fixed;
height: 94%;
.column-options {
padding: 0 0 16px 0;
width: 470px;
@media (max-width: 550px) {
width: 320px;
padding: 0 28px 16px 0;
}
.body-options {
padding-top: 16px;
}
}
.footer {
@media (max-width: 550px) {
padding: 16px 28px 16px 0;
}
}
}
`;
const StyledSharingHeaderContent = styled.div`
display: flex;
align-items: center;
border-bottom: 1px solid #dee2e6;
.sharing_panel-icons-container {
display: flex;
margin-left: auto;
.sharing_panel-drop-down-wrapper {
position: relative;
.sharing_panel-drop-down {
padding: 8px 16px;
}
.sharing_panel-plus-icon {
margin-right: 12px;
}
}
}
`;
const StyledSharingBody = styled.div`
position: relative;
padding: 16px 0;
.sharing_panel-remove-icon {
margin-left: auto;
width: 18px;
height: 18px;
}
`;
const StyledFooter = styled.div`
display: flex;
position: fixed;
bottom: 0;
padding: 16px 0;
width: 94%;
background-color: #fff;
.sharing_panel-button {
margin-left: auto;
}
@media (max-width: 550px) {
width: 90%;
}
`;
export {
StyledPanel,
StyledContent,
StyledHeaderContent,
StyledBody,
StyledSharingHeaderContent,
StyledSharingBody,
StyledFooter
};

5
products/ASC.Files/Client/src/components/panels/index.js Normal file
View File

@ -0,0 +1,5 @@
import SharingPanel from "./SharingPanel";
import AddUsersPanel from "./AddUsersPanel";
import AddGroupsPanel from "./AddGroupPanel";
export { SharingPanel, AddUsersPanel, AddGroupsPanel }

16
products/ASC.Files/Client/src/store/files/actions.js
View File

@ -14,7 +14,7 @@ import {
import config from "../../../package.json";
import { getTreeFolders } from "./selectors";
const { files, FilesFilter } = api;
const { files, groups, FilesFilter } = api;
export const SET_FOLDER = "SET_FOLDER";
export const SET_FOLDERS = "SET_FOLDERS";
@ -306,6 +306,20 @@ export function deleteFolder(folderId, deleteAfter, immediately) {
}
}
export function getUsersOfGroups(groupsIds) {
const requests = groupsIds.map(key => groups.getGroup(key));
return axios.all(requests).then(
axios.spread((...responses) => {
let users = [];
for(let item of responses) {
users = [...users, ...item.members];
}
return users;
})
);
}
/*export function deleteGroup(id) {
return (dispatch, getState) => {
const { people } = getState();

2
web/ASC.Web.Common/package.json
View File

@ -1,6 +1,6 @@
{
"name": "asc-web-common",
"version": "1.0.129",
"version": "1.0.130",
"description": "Ascensio System SIA common components and solutions library",
"license": "AGPL-3.0",
"files": [

29
web/ASC.Web.Common/src/components/AdvancedSelector/sub-components/Footer.js
View File

@ -1,6 +1,6 @@
import React from "react";
import PropTypes from "prop-types";
import { Button, ComboBox, Icons } from "asc-web-components";
import { Button } from "asc-web-components";
import StyledFooter from "./StyledFooter";
const Footer = props => {
@ -10,11 +10,12 @@ const Footer = props => {
onClick,
isVisible,
className,
comboBoxOptions
embeddedComponent
} = props;
return (
<StyledFooter withComboBox={comboBoxOptions} isVisible={isVisible} className={className}>
<StyledFooter withEmbeddedComponent={embeddedComponent} isVisible={isVisible} className={className}>
<Button
className="add_members_btn"
primary={true}
@ -24,24 +25,7 @@ const Footer = props => {
isDisabled={isDisabled}
onClick={onClick}
/>
{comboBoxOptions && (
<ComboBox
advancedOptions={comboBoxOptions}
options={[]}
selectedOption={{ key: 0 }}
size="content"
className="ad-selector_combo-box"
scaled={false}
directionX="right"
//isDisabled={isDisabled}
>
{React.createElement(Icons["EyeIcon"], {
size: "medium"
//color: this.state.currentIconColor,
//isfill: isFill
})}
</ComboBox>
)}
{embeddedComponent && embeddedComponent}
</StyledFooter>
);
};
@ -52,7 +36,8 @@ Footer.propTypes = {
isDisabled: PropTypes.bool,
isVisible: PropTypes.bool,
onClick: PropTypes.func,
comboBoxOptions: PropTypes.any
comboBoxOptions: PropTypes.any,
embeddedComponent: PropTypes.any
};
export default Footer;

6
web/ASC.Web.Common/src/components/AdvancedSelector/sub-components/Selector.js
View File

@ -68,7 +68,7 @@ const Selector = props => {
onGroupChanged,
size,
allowGroupSelection,
comboBoxOptions
embeddedComponent
} = props;
//console.log("options", options);
@ -699,7 +699,7 @@ const Selector = props => {
isDisabled={isDisabled}
isVisible={isMultiSelect && hasSelected()}
onClick={onAddClick}
comboBoxOptions={comboBoxOptions}
embeddedComponent={embeddedComponent}
/>
</StyledSelector>
);
@ -736,7 +736,7 @@ Selector.propTypes = {
onGroupChanged: PropTypes.func,
getOptionTooltipContent: PropTypes.func,
comboBoxOptions: PropTypes.any
embeddedComponent: PropTypes.any
};
Selector.defaultProps = {

2
web/ASC.Web.Common/src/components/AdvancedSelector/sub-components/StyledFooter.js
View File

@ -7,7 +7,7 @@ const StyledFooter = styled.div`
height: 69px;
${props =>
props.withComboBox &&
props.withEmbeddedComponent &&
css`
display: flex;
padding: 16px 0;

6
web/ASC.Web.Common/src/components/GroupSelector/GroupSelector.js
View File

@ -95,7 +95,7 @@ class GroupSelector extends React.Component {
searchPlaceHolderLabel,
displayType,
withoutAside,
comboBoxOptions
embeddedComponent
} = this.props;
return (
@ -123,7 +123,7 @@ class GroupSelector extends React.Component {
onSearchChanged={this.onSearchChanged}
onCancel={onCancel}
withoutAside={withoutAside}
comboBoxOptions={comboBoxOptions}
embeddedComponent={embeddedComponent}
/>
);
}
@ -144,7 +144,7 @@ GroupSelector.propTypes = {
useFake: PropTypes.bool,
displayType: PropTypes.oneOf(["auto", "aside", "dropdown"]),
withoutAside: PropTypes.bool,
comboBoxOptions: PropTypes.any
embeddedComponent: PropTypes.any
};
GroupSelector.defaultProps = {

6
web/ASC.Web.Common/src/components/PeopleSelector/PeopleSelector.js
View File

@ -205,7 +205,7 @@ class PeopleSelector extends React.Component {
groupsCaption,
displayType,
withoutAside,
comboBoxOptions
embeddedComponent
} = this.props;
return (
@ -238,7 +238,7 @@ class PeopleSelector extends React.Component {
getOptionTooltipContent={this.getOptionTooltipContent}
onCancel={onCancel}
withoutAside={withoutAside}
comboBoxOptions={comboBoxOptions}
embeddedComponent={embeddedComponent}
/>
);
}
@ -264,7 +264,7 @@ PeopleSelector.propTypes = {
role: PropTypes.oneOf(["admin", "user", "guest"]),
displayType: PropTypes.oneOf(["auto", "aside", "dropdown"]),
withoutAside: PropTypes.bool,
comboBoxOptions: PropTypes.any
embeddedComponent: PropTypes.any
};
PeopleSelector.defaultProps = {