@rnga/orders
Version:
## Get schema from @prisma-cms 1. yarn get-api-schema -e http://localhost:4000 2. yarn build-api-fragments
747 lines (517 loc) • 11.5 kB
JavaScript
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import Grid from 'material-ui/Grid';
import EditableView from 'apollo-cms/src/DataView/Object/Editable';
import UserAvatar from './Avatar';
import UsersGroupsBlock from "./Groups";
import { withStyles, IconButton, Button } from 'material-ui';
import ExportIcon from "material-ui-icons/ImportExport"
import DoneIcon from "material-ui-icons/Done"
import moment from "moment";
import {
exportUserProcessor,
updateUserProcessor,
} from "query";
import { graphql } from 'react-apollo';
export const styles = {
invisible: {
height: 1,
opacity: 0,
border: "none",
},
}
export class UserPageView extends EditableView {
static propTypes = {
...EditableView.propTypes,
classes: PropTypes.object.isRequired,
};
static contextTypes = {
...EditableView.contextTypes,
loadApiData: PropTypes.func.isRequired,
setPageMeta: PropTypes.func,
};
setPageMeta() {
const {
setPageMeta,
} = this.context;
setPageMeta && setPageMeta({
title: this.getTitle(),
});
}
componentWillMount() {
this.setPageMeta();
super.componentWillMount && super.componentWillMount();
}
componentDidUpdate() {
this.setPageMeta();
super.componentDidUpdate && super.componentDidUpdate();
}
getTitle() {
const draftObject = this.getObjectWithMutations();
const {
username,
fullname,
} = draftObject || {};
return fullname || username;
}
async AcceptRequestJoin(userId) {
const {
client,
} = this.context;
await client.mutate({
mutation: updateUserProcessor,
variables: {
data: {
active: true,
requestJoin: false,
},
where: {
id: userId,
},
},
});
}
renderAvatar() {
const draftObject = this.getObjectWithMutations();
return <UserAvatar
user={draftObject}
updateUser={this.onUpdateAvatar}
editable={this.canEdit()}
id="profile-photo"
/>
}
canEdit() {
const {
user: currentUser,
} = this.context;
const {
data,
mutate,
} = this.props;
const {
object: user,
} = data || {};
return mutate && currentUser && user && (currentUser.id === user.id || currentUser.sudo === true) ? true : false;
}
getButtons() {
let buttons = super.getButtons() || [];
const {
user: currentUser,
} = this.context;
const {
mutate,
} = this.props;
const {
sudo,
} = currentUser || {};
const {
id: userId,
exported,
requestJoin,
} = this.getObjectWithMutations();
const {
exportProcessing,
} = this.state;
if (mutate && sudo && userId) {
if (!exported) {
buttons.push(<IconButton
key="export"
title="Экспортировать"
onClick={event => this.exportUser(userId)}
disabled={exportProcessing ? true : false}
>
<ExportIcon
/>
</IconButton>);
}
else {
buttons.push(<IconButton
key="exported"
title="Экспортирован"
onClick={event => this.exportUser(userId)}
disabled={exportProcessing ? true : false}
>
<ExportIcon
style={{
color: "green",
}}
/>
</IconButton>);
}
if (requestJoin) {
buttons.push(<Button
key="acceptRequest"
onClick={event => this.AcceptRequestJoin(userId)}
disabled={exportProcessing ? true : false}
>
<DoneIcon
/> Принять запрос
</Button>);
}
}
return buttons;
}
async exportUser(userId) {
this.setState({
exportProcessing: true,
});
const {
client,
} = this.context;
await client.mutate({
mutation: exportUserProcessor,
variables: {
id: userId,
},
})
.then(r => {
})
.catch(error => {
console.error(error);
this.addError(error);
});
this.setState({
exportProcessing: false,
});
}
async save() {
const result = await super.save()
.then(r => {
const {
loadApiData,
} = this.context;
loadApiData();
return r;
})
.catch(e => {
console.error(e);
});
return result;
}
onUpdateAvatar = (file) => {
if (file) {
const {
id,
path,
mimetype,
} = file;
if (!path) {
this.addError("File URL is empty");
return;
}
if (!mimetype) {
this.addError("Wrong file type");
}
else if (!mimetype.match(/image/)) {
this.addError("Only images allow");
}
else {
let image = path;
this.updateObject({
image,
});
}
}
else {
this.addError("File did not received");
}
}
getTextField(props = {}) {
props = {
disabled: !this.isInEditMode(),
inputProps: {
style: {
color: "#333",
},
},
...props,
}
return super.getTextField(props);
}
renderAdminBlock() {
let {
birthday,
} = this.getObjectWithMutations();
birthday = birthday && moment(birthday).isValid() ? moment(birthday).format("YYYY-MM-DD") : birthday;
// birthday = birthday && moment(birthday).isValid() ? moment(birthday).toLocaleString() : birthday;
return <div
style={{
marginTop: 30,
}}
>
<Grid
container
spacing={8}
>
<Grid
item
xs={12}
sm={6}
md={4}
lg={3}
>
{this.getTextField({
label: "Дата рождения",
name: "birthday",
type: "date",
value: birthday || "дд.мм.гггг",
})}
</Grid>
<Grid
item
xs={12}
sm={6}
md={4}
lg={3}
>
{this.getTextField({
label: "Паспорт",
name: "passport",
})}
</Grid>
<Grid
item
xs={12}
sm={6}
md={4}
lg={3}
>
{this.getTextField({
label: "E-mail",
name: "email",
})}
</Grid>
<Grid
item
xs={12}
sm={6}
md={4}
lg={3}
>
{this.getTextField({
label: "Телефон",
name: "phone",
})}
</Grid>
{/* <Grid
item
xs={12}
sm={6}
md={4}
lg={3}
>
{this.getTextField({
label: "Участие в аукционах НФРН",
name: "auctions",
})}
</Grid> */}
{/* <Grid
item
xs={12}
sm={6}
md={4}
lg={3}
>
{this.getTextField({
label: "№ лотов",
name: "lots",
})}
</Grid> */}
{/* <Grid
item
xs={12}
sm={6}
md={4}
lg={3}
>
{this.getTextField({
label: "Ценовой диапазон",
name: "prices",
})}
</Grid> */}
{/* <Grid
item
xs={12}
sm={6}
md={4}
lg={3}
>
{this.getTextField({
label: "Подсмотрено",
name: "looked",
})}
</Grid> */}
<Grid
item
xs={12}
sm={6}
>
{this.getTextField({
label: "Адрес",
name: "address",
})}
</Grid>
<Grid
item
xs={12}
>
</Grid>
<Grid
item
xs={12}
md={6}
>
{this.getTextField({
label: "Предпочтения",
name: "preferences",
multiline: true
})}
</Grid>
<Grid
item
xs={12}
md={6}
>
{this.getTextField({
label: "Прочая полезная информация",
name: "info",
multiline: true,
})}
</Grid>
</Grid>
</div>;
}
renderDefaultView() {
const object = this.getObjectWithMutations();
const inEditMode = this.isInEditMode();
const {
id,
username,
fullname,
} = object;
const {
user: currentUser,
} = this.context;
const {
} = currentUser || {}
return <Grid
container
>
<Grid
item
xs={12}
sm={4}
md={3}
lg={2}
>
{this.renderAvatar()}
</Grid>
<Grid
item
xs={12}
sm={6}
md={4}
>
<UsersGroupsBlock
user={object}
inEditMode={inEditMode}
/>
</Grid>
<Grid
item
xs={12}
>
{this.renderAdminBlock()}
</Grid>
</Grid>;
}
renderEditableView() {
const object = this.getObjectWithMutations();
const inEditMode = this.isInEditMode();
const {
classes,
} = this.props;
const {
user: currentUser,
} = this.context;
return <Grid
container
>
<Grid
item
xs={12}
md={4}
>
{this.renderAvatar()}
<input
className={classes.invisible}
/>
<input
type="password"
className={classes.invisible}
/>
</Grid>
<Grid
item
xs={12}
sm={6}
md={4}
>
<Grid
container
spacing={8}
>
<Grid
item
xs={12}
>
{this.getTextField({
name: "fullname",
label: "ФИО",
helperText: "Укажите полное имя",
})}
</Grid>
<Grid
item
xs={12}
>
{this.getTextField({
name: "username",
label: "Логин",
helperText: "",
})}
</Grid>
<Grid
item
xs={12}
>
{this.getTextField({
name: "password",
label: "Пароль",
type: "password",
helperText: "Укажите, если надо сменить",
})}
</Grid>
</Grid>
</Grid>
{/* <Grid
item
xs={12}
sm={6}
md={4}
>
<UsersGroupsBlock
user={object}
inEditMode={inEditMode && currentUser && currentUser.sudo ? true : false}
/>
</Grid> */}
<Grid
item
xs={12}
>
{this.renderAdminBlock()}
</Grid>
</Grid>;
}
}
export default withStyles(styles)(graphql(updateUserProcessor)(UserPageView));