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

Web: People: Fixed avatar editor page (the path to the avatar was put into storage)

Browse Source
This commit is contained in:
Alexey Kostenko 2020-10-12 10:04:40 +03:00
parent 99262bdae6
commit fd2c71dce2
4 changed files with 153 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

148
products/ASC.People/Client/src/components/pages/ProfileAction/Section/Body/avatarEditorPage.js
View File

@ -9,7 +9,11 @@ import {
fetchProfile,
updateProfile,
getUserPhoto,
setAvatarMax,
} from "../../../../../store/profile/actions";
import {
toEmployeeWrapper,
} from "../../../../../store/people/selectors";
import { toggleAvatarEditor } from "../../../../../store/people/actions";
import { setDocumentTitle } from "../../../../../helpers/utils";
import { isMobile } from "react-device-detect";
@ -17,6 +21,12 @@ import { isMobile } from "react-device-detect";
const { createThumbnailsAvatar, loadAvatar, deleteAvatar } = api.people;
const { isTablet } = utils.device;
const dialogsDataset = {
changeEmail: "changeEmail",
changePassword: "changePassword",
changePhone: "changePhone",
};
const AvatarEditorBody = styled.div`
margin-bottom: 24px;
`;
@ -24,18 +34,7 @@ const AvatarEditorBody = styled.div`
class AvatarEditorPage extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
avatar: {
tmpFile: "",
image: undefined,
defaultWidth: 0,
defaultHeight: 0,
},
isMobile: isMobile || isTablet,
isLoading: false,
pageIsLoaded: false,
};
this.state = this.mapPropsToState(props);
}
componentDidMount() {
@ -69,17 +68,93 @@ class AvatarEditorPage extends React.PureComponent {
}
onCancel = () => {
this.returnToEditor();
};
returnToEditor = () => {
const { toggleAvatarEditor } = this.props;
toggleAvatarEditor(false);
};
updateUserPhotoInState = () => {
var profile = toEmployeeWrapper(this.props.profile);
getUserPhoto(profile.id).then((userPhotoData) => {
if (userPhotoData.original) {
let avatarDefaultSizes = /_(\d*)-(\d*)./g.exec(userPhotoData.original);
if (avatarDefaultSizes !== null && avatarDefaultSizes.length > 2) {
this.setState({
avatar: {
tmpFile: this.state.avatar.tmpFile,
defaultWidth: avatarDefaultSizes[1],
defaultHeight: avatarDefaultSizes[2],
image: userPhotoData.original
? userPhotoData.original.indexOf("default_user_photo") !== -1
? null
: userPhotoData.original
: null,
},
});
}
}
});
}
mapPropsToState = (props) => {
var profile = toEmployeeWrapper(props.profile);
getUserPhoto(profile.id).then((userPhotoData) => {
if (userPhotoData.original) {
let avatarDefaultSizes = /_(\d*)-(\d*)./g.exec(userPhotoData.original);
if (avatarDefaultSizes !== null && avatarDefaultSizes.length > 2) {
this.setState({
avatar: {
tmpFile: this.state.avatar.tmpFile,
defaultWidth: avatarDefaultSizes[1],
defaultHeight: avatarDefaultSizes[2],
image: userPhotoData.original
? userPhotoData.original.indexOf("default_user_photo") !== -1
? undefined
: userPhotoData.original
: undefined,
},
});
}
}
});
const newState = {
isLoading: false,
pageIsLoaded: true,
errors: {
firstName: false,
lastName: false,
},
profile: profile,
visibleAvatarEditor: false,
avatar: {
tmpFile: "",
image: null,
defaultWidth: 0,
defaultHeight: 0,
},
dialogsVisible: {
[dialogsDataset.changePassword]: false,
[dialogsDataset.changePhone]: false,
[dialogsDataset.changeEmail]: false,
currentDialog: "",
},
isMobile: isMobile || isTablet,
};
//Set unique contacts id
const now = new Date().getTime();
newState.profile.contacts.forEach((contact, index) => {
contact.id = (now + index).toString();
});
return newState;
};
onSaveAvatar = (isUpdate, result, avatar) => {
this.setState({ isLoading: true });
const { profile } = this.props;
const { profile, toggleAvatarEditor, setAvatarMax } = this.props;
if (isUpdate) {
createThumbnailsAvatar(profile.id, {
x: Math.round(
@ -92,9 +167,16 @@ class AvatarEditorPage extends React.PureComponent {
height: result.height,
tmpFile: avatar.tmpFile,
})
.then(() => {
.then((response) => {
const avatarMax = response.max +
"?_=" +
Math.floor(Math.random() * Math.floor(10000));
let stateCopy = Object.assign({}, this.state);
setAvatarMax(avatarMax);
toastr.success(this.props.t("ChangesSavedSuccessfully"));
this.setState({ isLoading: false });
this.setState(stateCopy);
})
.catch((error) => {
toastr.error(error);
@ -104,22 +186,30 @@ class AvatarEditorPage extends React.PureComponent {
this.props.updateProfile(this.props.profile);
})
.then(() => {
this.props.fetchProfile(profile.id);
this.returnToEditor(false);
});
} else {
deleteAvatar(profile.id)
this.setState(this.mapPropsToState(this.props));
})
.then(() => {
this.props.fetchProfile(profile.id);
})
.then(() => {
toggleAvatarEditor(false)
});
} else {
deleteAvatar(profile.id)
.then((response) => {
let stateCopy = Object.assign({}, this.state);
setAvatarMax(response.big);
toastr.success(this.props.t("ChangesSavedSuccessfully"));
this.setState({ isLoading: false });
this.setState(stateCopy);
})
.catch((error) => toastr.error(error))
.then(() => this.props.updateProfile(this.props.profile))
.then(() => {
this.props.fetchProfile(profile.id);
this.returnToEditor(false);
this.setState(this.mapPropsToState(this.props));
})
}
.then(() => this.props.fetchProfile(profile.id))
.then(() => toggleAvatarEditor(false));
}
};
onLoadFileAvatar = (file, fileData) => {
@ -231,6 +321,7 @@ class AvatarEditorPage extends React.PureComponent {
function mapStateToProps(state) {
return {
profile: state.profile.targetUser,
avatarMax: state.profile.avatarMax,
settings: state.auth.settings,
};
}
@ -239,4 +330,5 @@ export default connect(mapStateToProps, {
fetchProfile,
updateProfile,
toggleAvatarEditor,
setAvatarMax,
})(withTranslation()(withRouter(AvatarEditorPage)));

30
products/ASC.People/Client/src/components/pages/ProfileAction/Section/Body/updateUserForm.js
View File

@ -23,6 +23,7 @@ import {
updateProfile,
getUserPhoto,
fetchProfile,
setAvatarMax,
} from "../../../../../store/profile/actions";
import {
setFilter,
@ -428,7 +429,7 @@ class UpdateUserForm extends React.Component {
onSaveAvatar = (isUpdate, result, avatar) => {
this.setState({ isLoading: true });
const { profile } = this.props;
const { profile, setAvatarMax } = this.props;
if (isUpdate) {
createThumbnailsAvatar(profile.id, {
x: Math.round(
@ -443,15 +444,16 @@ class UpdateUserForm extends React.Component {
})
.then((response) => {
let stateCopy = Object.assign({}, this.state);
stateCopy.visibleAvatarEditor = false;
stateCopy.isLoading = false;
stateCopy.avatar.tmpFile = "";
stateCopy.profile.avatarMax =
response.max +
const avatarMax = response.max +
"?_=" +
Math.floor(Math.random() * Math.floor(10000));
stateCopy.visibleAvatarEditor = false;
stateCopy.isLoading = false;
stateCopy.avatar.tmpFile = "";
this.setState(stateCopy);
setAvatarMax(avatarMax);
this.setIsEdit();
toastr.success(this.props.t("ChangesSavedSuccessfully"));
})
@ -471,9 +473,10 @@ class UpdateUserForm extends React.Component {
.then((response) => {
let stateCopy = Object.assign({}, this.state);
stateCopy.visibleAvatarEditor = false;
stateCopy.profile.avatarMax = response.big;
toastr.success(this.props.t("ChangesSavedSuccessfully"));
this.setState(stateCopy);
setAvatarMax(response.big);
this.setIsEdit();
})
.catch((error) => toastr.error(error))
@ -542,7 +545,7 @@ class UpdateUserForm extends React.Component {
dialogsVisible,
isMobile,
} = this.state;
const { t, i18n, settings } = this.props;
const { t, i18n, settings, avatarMax } = this.props;
const {
guestCaption,
userCaption,
@ -637,7 +640,7 @@ class UpdateUserForm extends React.Component {
<Avatar
size="max"
role={getUserRole(profile)}
source={this.state.profile.avatarMax}
source={this.props.avatarMax || profile.avatarMax}
userName={profile.displayName}
editing={true}
editLabel={t("editAvatar")}
@ -900,10 +903,12 @@ class UpdateUserForm extends React.Component {
const mapStateToProps = (state) => {
return {
profile: state.profile.targetUser,
avatarMax: state.profile.avatarMax,
settings: state.auth.settings,
groups: state.people.groups,
editingForm: state.people.editingForm,
filter: state.people.filter, };
filter: state.people.filter,
};
};
export default connect(mapStateToProps, {
@ -913,5 +918,6 @@ export default connect(mapStateToProps, {
setIsVisibleDataLossDialog,
setIsEditingForm,
setFilter,
toggleAvatarEditor
toggleAvatarEditor,
setAvatarMax,
})(withRouter(withTranslation()(UpdateUserForm)));

8
products/ASC.People/Client/src/store/profile/actions.js
View File

@ -5,6 +5,7 @@ const { isMe } = store.auth.selectors;
export const SET_PROFILE = "SET_PROFILE";
export const CLEAN_PROFILE = "CLEAN_PROFILE";
export const SET_AVATAR_MAX = "SET_AVATAR_MAX";
export function setProfile(targetUser) {
return {
@ -107,3 +108,10 @@ export function updateCreatedAvatar(avatar) {
return dispatch(setProfile(newProfile));
};
}
export function setAvatarMax(avatarMax) {
return {
type: SET_AVATAR_MAX,
avatarMax,
};
}

9
products/ASC.People/Client/src/store/profile/reducers.js
View File

@ -1,7 +1,8 @@
import { SET_PROFILE, CLEAN_PROFILE } from "./actions";
import { SET_PROFILE, CLEAN_PROFILE, SET_AVATAR_MAX } from "./actions";
const initialState = {
targetUser: null
targetUser: null,
avatarMax: null,
};
const profileReducer = (state = initialState, action) => {
@ -12,6 +13,10 @@ const profileReducer = (state = initialState, action) => {
});
case CLEAN_PROFILE:
return initialState;
case SET_AVATAR_MAX:
return Object.assign({}, state, {
avatarMax: action.avatarMax,
});
default:
return state;
}