Files.Client: Home: Fixed creating and editing actions with redux
This commit is contained in:
Ilya Oleshko
parent
46879995e2
commit
3a3dc04f53
@ -8,6 +8,7 @@ import {
|
||||
toastr
|
||||
} from "asc-web-components";
|
||||
import { withTranslation, I18nextProvider } from 'react-i18next';
|
||||
import { setAction } from '../../../store/files/actions';
|
||||
import i18n from '../i18n';
|
||||
import { store, utils } from 'asc-web-common';
|
||||
const { changeLanguage } = utils;
|
||||
@ -16,7 +17,12 @@ const { isAdmin } = store.auth.selectors;
|
||||
class PureArticleMainButtonContent extends React.Component {
|
||||
|
||||
onCreate = (format) => {
|
||||
this.props.onCreate(format);
|
||||
this.props.setAction(
|
||||
{
|
||||
type: 'create',
|
||||
exst: format,
|
||||
tempId: -1
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
@ -49,7 +55,7 @@ class PureArticleMainButtonContent extends React.Component {
|
||||
<DropDownItem
|
||||
icon="CatalogFolderIcon"
|
||||
label={t('NewFolder')}
|
||||
onClick={this.onCreate.bind(this, 'folder')}
|
||||
onClick={this.onCreate}
|
||||
/>
|
||||
<DropDownItem isSeparator />
|
||||
<DropDownItem
|
||||
@ -85,4 +91,4 @@ const mapStateToProps = (state) => {
|
||||
}
|
||||
}
|
||||
|
||||
export default connect(mapStateToProps)(withRouter(ArticleMainButtonContent));
|
||||
export default connect(mapStateToProps, { setAction })(withRouter(ArticleMainButtonContent));
|
||||
@ -4,9 +4,9 @@ import { connect } from "react-redux";
|
||||
import { withRouter } from "react-router";
|
||||
import { withTranslation } from "react-i18next";
|
||||
import styled from "styled-components";
|
||||
import { RowContent, Link, Text, Icons, Badge, TextInput, Button, toastr } from "asc-web-components";
|
||||
import { RowContent, Link, Text, Icons, Badge, TextInput, Button } from "asc-web-components";
|
||||
import { createFile, createFolder, renameFolder, updateFile, setFilter } from '../../../../../store/files/actions';
|
||||
import { canWebEdit, canConvert } from '../../../../../store/files/selectors';
|
||||
import { canWebEdit, canConvert, getTitleWithoutExst } from '../../../../../store/files/selectors';
|
||||
import { history } from "asc-web-common";
|
||||
import { fetchFiles } from "../../../../../store/files/actions";
|
||||
import store from "../../../../../store/store";
|
||||
@ -15,58 +15,58 @@ class FilesRowContent extends React.PureComponent {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
const titleWithoutExt = props.item.fileExst
|
||||
? props.item.title.split('.').slice(0, -1).join('.')
|
||||
: props.item.title;
|
||||
const titleWithoutExt = getTitleWithoutExst(props.item);
|
||||
|
||||
this.state = {
|
||||
itemTitle: titleWithoutExt,
|
||||
editingId: props.editingId
|
||||
editingId: props.action.tempId,
|
||||
loading: false
|
||||
};
|
||||
}
|
||||
|
||||
completeAction = () => {
|
||||
this.setState({ loading: false }, () =>
|
||||
this.props.onEditComplete());
|
||||
}
|
||||
|
||||
updateItem = () => {
|
||||
const { editingId, updateFile, renameFolder, item, onEditComplete } = this.props;
|
||||
const { action, updateFile, renameFolder, item } = this.props;
|
||||
const { itemTitle } = this.state;
|
||||
const originalTitle = getTitleWithoutExst(item);
|
||||
|
||||
const originalTitle = item.fileExst
|
||||
? item.title.split('.').slice(0, -1).join('.')
|
||||
: item.title;
|
||||
this.setState({ loading: true });
|
||||
|
||||
this.setState({ editingId: -1 }, () => {
|
||||
if (originalTitle === itemTitle)
|
||||
return onEditComplete();
|
||||
if (originalTitle === itemTitle)
|
||||
return this.completeAction();
|
||||
|
||||
item.fileExst
|
||||
? updateFile(editingId, itemTitle)
|
||||
.then(() => onEditComplete())
|
||||
: renameFolder(editingId, itemTitle)
|
||||
.then(() => onEditComplete());
|
||||
});
|
||||
item.fileExst
|
||||
? updateFile(action.tempId, itemTitle)
|
||||
.then(() => this.completeAction())
|
||||
: renameFolder(action.tempId, itemTitle)
|
||||
.then(() => this.completeAction());
|
||||
};
|
||||
|
||||
createItem = () => {
|
||||
const { createFile, createFolder, item, onEditComplete } = this.props;
|
||||
const { createFile, createFolder, item } = this.props;
|
||||
const { itemTitle } = this.state;
|
||||
|
||||
this.setState({ editingId: -1 }, () => {
|
||||
if (itemTitle.trim() === '')
|
||||
return onEditComplete();
|
||||
this.setState({ loading: true });
|
||||
|
||||
item.fileExst === 'folder'
|
||||
? createFolder(item.parentId, itemTitle)
|
||||
.then(() => onEditComplete())
|
||||
: createFile(item.parentId, `${itemTitle}.${item.fileExst}`)
|
||||
.then(() => onEditComplete())
|
||||
});
|
||||
if (itemTitle.trim() === '')
|
||||
return this.completeAction();
|
||||
|
||||
!item.fileExst
|
||||
? createFolder(item.parentId, itemTitle)
|
||||
.then(() => this.completeAction())
|
||||
: createFile(item.parentId, `${itemTitle}.${item.fileExst}`)
|
||||
.then(() => this.completeAction())
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
const { editingId } = this.props;
|
||||
const { action } = this.props;
|
||||
|
||||
if (editingId !== prevProps.editingId) {
|
||||
this.setState({ editingId })
|
||||
if (action.tempId !== prevProps.action.tempId) {
|
||||
this.setState({ editingId: action.tempId })
|
||||
}
|
||||
}
|
||||
|
||||
@ -75,19 +75,19 @@ class FilesRowContent extends React.PureComponent {
|
||||
}
|
||||
|
||||
cancelUpdateItem = () => {
|
||||
this.setState({ editingId: -1 }, () =>
|
||||
this.props.onEditComplete());
|
||||
this.setState({ loading: false });
|
||||
this.completeAction();
|
||||
}
|
||||
|
||||
onClickUpdateItem = () => {
|
||||
(this.state.editingId === -2)
|
||||
(this.props.action.type === 'create')
|
||||
? this.createItem()
|
||||
: this.updateItem();
|
||||
}
|
||||
|
||||
onKeyUpUpdateItem = e => {
|
||||
if (e.keyCode === 13) {
|
||||
(this.state.editingId === -2)
|
||||
(this.props.action.type === 'create')
|
||||
? this.createItem()
|
||||
: this.updateItem();
|
||||
}
|
||||
@ -117,19 +117,23 @@ class FilesRowContent extends React.PureComponent {
|
||||
const { culture, t, item } = this.props;
|
||||
const { created, updated, version, fileExst } = item;
|
||||
|
||||
const title = version > 1 ? t("TitleModified") : fileExst ? t("TitleUploaded") : t("TitleCreated");
|
||||
const date = fileExst ? updated : created;
|
||||
const title = version > 1
|
||||
? t("TitleModified")
|
||||
: fileExst
|
||||
? t("TitleUploaded")
|
||||
: t("TitleCreated");
|
||||
|
||||
return `${title}: ${new Date(date).toLocaleString(culture)}`;
|
||||
const date = fileExst ? updated : created;
|
||||
const dateLabel = new Date(date).toLocaleString(culture);
|
||||
|
||||
return `${title}: ${dateLabel}`;
|
||||
};
|
||||
|
||||
render() {
|
||||
const { culture, t, item } = this.props;
|
||||
const { itemTitle, editingId } = this.state;
|
||||
const { t, item } = this.props;
|
||||
const { itemTitle, editingId, loading } = this.state;
|
||||
const {
|
||||
contentLength,
|
||||
comment,
|
||||
created,
|
||||
updated,
|
||||
createdBy,
|
||||
fileExst,
|
||||
@ -137,7 +141,6 @@ class FilesRowContent extends React.PureComponent {
|
||||
fileStatus,
|
||||
foldersCount,
|
||||
id,
|
||||
title,
|
||||
versionGroup
|
||||
} = item;
|
||||
|
||||
@ -191,10 +194,7 @@ class FilesRowContent extends React.PureComponent {
|
||||
}
|
||||
`;
|
||||
|
||||
const titleWithoutExt = fileExst
|
||||
? title.split('.').slice(0, -1).join('.')
|
||||
: title;
|
||||
|
||||
const titleWithoutExt = getTitleWithoutExst(item);
|
||||
const fileOwner = createdBy && ((this.props.viewer.id === createdBy.id && t("AuthorMe")) || createdBy.displayName);
|
||||
const updatedDate = updated && this.getStatusByDate();
|
||||
const canEditFile = fileExst && canWebEdit(fileExst);
|
||||
@ -227,18 +227,19 @@ class FilesRowContent extends React.PureComponent {
|
||||
isAutoFocussed={true}
|
||||
onChange={this.renameTitle}
|
||||
onKeyUp={this.onKeyUpUpdateItem}
|
||||
isDisabled={loading}
|
||||
/>
|
||||
<Button
|
||||
className='edit-button'
|
||||
size='medium'
|
||||
isDisabled={false}
|
||||
isDisabled={loading}
|
||||
onClick={this.onClickUpdateItem}
|
||||
icon={okIcon}
|
||||
/>
|
||||
<Button
|
||||
className='edit-button'
|
||||
size='medium'
|
||||
isDisabled={false}
|
||||
isDisabled={loading}
|
||||
onClick={this.cancelUpdateItem}
|
||||
icon={cancelIcon}
|
||||
/>
|
||||
@ -383,7 +384,8 @@ class FilesRowContent extends React.PureComponent {
|
||||
|
||||
function mapStateToProps(state) {
|
||||
return {
|
||||
filter: state.files.filter
|
||||
filter: state.files.filter,
|
||||
action: state.files.action
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -7,13 +7,12 @@ import {
|
||||
Row,
|
||||
toastr,
|
||||
Icons,
|
||||
RowContainer,
|
||||
Loader
|
||||
RowContainer
|
||||
} from "asc-web-components";
|
||||
import EmptyFolderContainer from "./EmptyFolderContainer";
|
||||
import FilesRowContent from "./FilesRowContent";
|
||||
import { api } from 'asc-web-common';
|
||||
import { fetchFiles, deleteFile, deleteFolder, fetchFolder } from '../../../../../store/files/actions';
|
||||
import { fetchFiles, deleteFile, deleteFolder, fetchFolder, setAction } from '../../../../../store/files/actions';
|
||||
import store from "../../../../../store/store";
|
||||
import { getFilterByLocation } from "../../../../../helpers/converters";
|
||||
import config from "../../../../../../package.json";
|
||||
@ -21,14 +20,11 @@ import config from "../../../../../../package.json";
|
||||
const { FilesFilter } = api;
|
||||
|
||||
class SectionBodyContent extends React.PureComponent {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
editingId: -1,
|
||||
isEdit: false,
|
||||
isCreating: ''
|
||||
editingId: null
|
||||
};
|
||||
}
|
||||
|
||||
@ -54,42 +50,26 @@ class SectionBodyContent extends React.PureComponent {
|
||||
// }
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
if (this.props.isCreating !== prevProps.isCreating) {
|
||||
let tempId = this.state.editingId;
|
||||
|
||||
if (this.props.isCreating !== '') {
|
||||
tempId = -2;
|
||||
}
|
||||
|
||||
this.setState({
|
||||
editingId: tempId,
|
||||
isCreating: this.props.isCreating
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
onClickRename = (itemId) => {
|
||||
this.setState({
|
||||
editingId: itemId,
|
||||
isEdit: true
|
||||
});
|
||||
this.setState({ editingId: itemId }, () => {
|
||||
this.props.setAction({ type: 'rename', tempId: itemId });
|
||||
})
|
||||
};
|
||||
|
||||
onEditComplete = () => {
|
||||
const { folderId, onCreate } = this.props;
|
||||
const { folderId, action } = this.props;
|
||||
|
||||
onCreate(false);
|
||||
|
||||
if (this.state.isCreating !== '') {
|
||||
if (action.type === 'create') {
|
||||
fetchFolder(folderId, store.dispatch)
|
||||
}
|
||||
|
||||
this.setState({
|
||||
editingId: -1,
|
||||
isEdit: false,
|
||||
isCreating: ''
|
||||
});
|
||||
this.setState({ editingId: null }, () => {
|
||||
this.props.setAction({
|
||||
type: null,
|
||||
exst: null,
|
||||
tempId: null
|
||||
});
|
||||
})
|
||||
}
|
||||
|
||||
onClickDelete = (item) => {
|
||||
@ -173,17 +153,17 @@ class SectionBodyContent extends React.PureComponent {
|
||||
};
|
||||
|
||||
render() {
|
||||
const { files, folders, viewer, parentId, folderId, settings } = this.props;
|
||||
const { editingId, isEdit, isCreating } = this.state;
|
||||
const { files, folders, viewer, parentId, folderId, settings, action } = this.props;
|
||||
const { editingId } = this.state;
|
||||
|
||||
let items = [...folders, ...files];
|
||||
|
||||
if (isCreating !== '') {
|
||||
if (action && action.type === 'create') {
|
||||
items.unshift({
|
||||
id: -2,
|
||||
id: -1,
|
||||
title: '',
|
||||
parentId: folderId,
|
||||
fileExst: isCreating
|
||||
fileExst: action.exst
|
||||
})
|
||||
}
|
||||
|
||||
@ -191,16 +171,14 @@ class SectionBodyContent extends React.PureComponent {
|
||||
<RowContainer useReactWindow={false}>
|
||||
{items.map(item => {
|
||||
const contextOptions = this.getFilesContextOptions(item, viewer).filter(o => o);
|
||||
const contextOptionsProps = !contextOptions.length || item.id === -2
|
||||
const contextOptionsProps = !contextOptions.length || action.type
|
||||
? {}
|
||||
: { contextOptions };
|
||||
const checked = false; //isUserSelected(selection, user.id);
|
||||
const checkedProps = /* isAdmin(viewer) */ item.id !== -2 && true ? { checked } : {};
|
||||
const element = (isEdit || isCreating) && (item.id === editingId || item.id === -2)
|
||||
? <Loader type='oval' color="black" size='24px' label="Editing..." />
|
||||
: item.fileExst
|
||||
? <Icons.ActionsDocumentsIcon size='big' isfill={true} color="#A3A9AE" />
|
||||
: <Icons.CatalogFolderIcon size='big' isfill={true} color="#A3A9AE" />;
|
||||
const checkedProps = /* isAdmin(viewer) */ action.type && (editingId === item.id || item.id === -1) ? {} : { checked };
|
||||
const element = item.fileExst
|
||||
? <Icons.ActionsDocumentsIcon size='big' isfill={true} color="#A3A9AE" />
|
||||
: <Icons.CatalogFolderIcon size='big' isfill={true} color="#A3A9AE" />;
|
||||
|
||||
return (
|
||||
<Row
|
||||
@ -213,7 +191,7 @@ class SectionBodyContent extends React.PureComponent {
|
||||
{...contextOptionsProps}
|
||||
needForUpdate={this.needForUpdate}
|
||||
>
|
||||
<FilesRowContent item={item} viewer={viewer} editingId={editingId} culture={settings.culture} onEditComplete={this.onEditComplete} />
|
||||
<FilesRowContent item={item} viewer={viewer} culture={settings.culture} onEditComplete={this.onEditComplete} />
|
||||
</Row>
|
||||
);
|
||||
})}
|
||||
@ -230,19 +208,20 @@ SectionBodyContent.defaultProps = {
|
||||
|
||||
const mapStateToProps = state => {
|
||||
return {
|
||||
selection: state.files.selection,
|
||||
selected: state.files.selected,
|
||||
action: state.files.action,
|
||||
files: state.files.files,
|
||||
folders: state.files.folders,
|
||||
viewer: state.auth.user,
|
||||
settings: state.auth.settings,
|
||||
filter: state.files.filter,
|
||||
folderId: state.files.selectedFolder.id,
|
||||
folders: state.files.folders,
|
||||
parentId: state.files.selectedFolder.parentId,
|
||||
folderId: state.files.selectedFolder.id
|
||||
selected: state.files.selected,
|
||||
selection: state.files.selection,
|
||||
settings: state.auth.settings,
|
||||
viewer: state.auth.user
|
||||
};
|
||||
};
|
||||
|
||||
export default connect(
|
||||
mapStateToProps,
|
||||
{ fetchFiles, deleteFile, deleteFolder }
|
||||
{ fetchFiles, deleteFile, deleteFolder, setAction }
|
||||
)(withRouter(withTranslation()(SectionBodyContent)));
|
||||
|
||||
@ -29,8 +29,7 @@ class PureHome extends React.Component {
|
||||
isHeaderVisible: false,
|
||||
isHeaderIndeterminate: false,
|
||||
isHeaderChecked: false,
|
||||
isLoading: false,
|
||||
isCreating: ''
|
||||
isLoading: false
|
||||
};
|
||||
}
|
||||
|
||||
@ -94,13 +93,8 @@ class PureHome extends React.Component {
|
||||
this.setState({ isLoading: status });
|
||||
};
|
||||
|
||||
onCreate = status => {
|
||||
this.setState({ isCreating: status });
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
isCreating,
|
||||
isHeaderVisible,
|
||||
isHeaderIndeterminate,
|
||||
isHeaderChecked,
|
||||
@ -130,9 +124,7 @@ class PureHome extends React.Component {
|
||||
|
||||
articleHeaderContent={<ArticleHeaderContent />}
|
||||
articleMainButtonContent={
|
||||
<ArticleMainButtonContent
|
||||
onCreate={this.onCreate}
|
||||
/>
|
||||
<ArticleMainButtonContent/>
|
||||
}
|
||||
articleBodyContent={<ArticleBodyContent />}
|
||||
sectionHeaderContent={
|
||||
@ -144,14 +136,11 @@ class PureHome extends React.Component {
|
||||
onSelect={this.onSectionHeaderContentSelect}
|
||||
onClose={this.onClose}
|
||||
onLoading={this.onLoading}
|
||||
onCreate={this.onCreate}
|
||||
/>
|
||||
}
|
||||
sectionFilterContent={<SectionFilterContent onLoading={this.onLoading} />}
|
||||
sectionBodyContent={
|
||||
<SectionBodyContent
|
||||
onCreate={this.onCreate}
|
||||
isCreating={isCreating}
|
||||
selected={selected}
|
||||
onLoading={this.onLoading}
|
||||
onChange={this.onRowChange}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user