Fix subscriber export button
This commit is contained in:
Kailash Nadh
parent
427dd93d3b
commit
0d8abf9435
|
|
@ -1,4 +1,4 @@
|
|||
import React from "react";
|
||||
import React from "react"
|
||||
import {
|
||||
Row,
|
||||
Col,
|
||||
|
|
@ -12,72 +12,72 @@ import {
|
|||
Spin,
|
||||
Popconfirm,
|
||||
notification
|
||||
} from "antd";
|
||||
} from "antd"
|
||||
|
||||
import * as cs from "./constants";
|
||||
import * as cs from "./constants"
|
||||
|
||||
const tagColors = {
|
||||
enabled: "green",
|
||||
blacklisted: "red"
|
||||
};
|
||||
}
|
||||
const formItemLayoutModal = {
|
||||
labelCol: { xs: { span: 24 }, sm: { span: 4 } },
|
||||
wrapperCol: { xs: { span: 24 }, sm: { span: 18 } }
|
||||
};
|
||||
}
|
||||
const formItemLayout = {
|
||||
labelCol: { xs: { span: 16 }, sm: { span: 4 } },
|
||||
wrapperCol: { xs: { span: 16 }, sm: { span: 10 } }
|
||||
};
|
||||
}
|
||||
const formItemTailLayout = {
|
||||
wrapperCol: { xs: { span: 24, offset: 0 }, sm: { span: 10, offset: 4 } }
|
||||
};
|
||||
}
|
||||
|
||||
class CreateFormDef extends React.PureComponent {
|
||||
state = {
|
||||
confirmDirty: false,
|
||||
loading: false
|
||||
};
|
||||
}
|
||||
|
||||
// Handle create / edit form submission.
|
||||
handleSubmit = (e, cb) => {
|
||||
e.preventDefault();
|
||||
e.preventDefault()
|
||||
if (!cb) {
|
||||
// Set a fake callback.
|
||||
cb = () => {};
|
||||
cb = () => {}
|
||||
}
|
||||
|
||||
var err = null,
|
||||
values = {};
|
||||
values = {}
|
||||
this.props.form.validateFields((e, v) => {
|
||||
err = e;
|
||||
values = v;
|
||||
});
|
||||
err = e
|
||||
values = v
|
||||
})
|
||||
if (err) {
|
||||
return;
|
||||
return
|
||||
}
|
||||
|
||||
let a = values["attribs"];
|
||||
values["attribs"] = {};
|
||||
let a = values["attribs"]
|
||||
values["attribs"] = {}
|
||||
if (a && a.length > 0) {
|
||||
try {
|
||||
values["attribs"] = JSON.parse(a);
|
||||
values["attribs"] = JSON.parse(a)
|
||||
if (values["attribs"] instanceof Array) {
|
||||
notification["error"]({
|
||||
message: "Invalid JSON type",
|
||||
description: "Attributes should be a map {} and not an array []"
|
||||
});
|
||||
return;
|
||||
})
|
||||
return
|
||||
}
|
||||
} catch (e) {
|
||||
notification["error"]({
|
||||
message: "Invalid JSON in attributes",
|
||||
description: e.toString()
|
||||
});
|
||||
return;
|
||||
})
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
this.setState({ loading: true });
|
||||
this.setState({ loading: true })
|
||||
if (this.props.formType === cs.FormCreate) {
|
||||
// Add a subscriber.
|
||||
this.props
|
||||
|
|
@ -91,22 +91,22 @@ class CreateFormDef extends React.PureComponent {
|
|||
notification["success"]({
|
||||
message: "Subscriber added",
|
||||
description: `${values["email"]} added`
|
||||
});
|
||||
})
|
||||
if (!this.props.isModal) {
|
||||
this.props.fetchRecord(this.props.record.id);
|
||||
this.props.fetchRecord(this.props.record.id)
|
||||
}
|
||||
cb(true);
|
||||
this.setState({ loading: false });
|
||||
cb(true)
|
||||
this.setState({ loading: false })
|
||||
})
|
||||
.catch(e => {
|
||||
notification["error"]({ message: "Error", description: e.message });
|
||||
cb(false);
|
||||
this.setState({ loading: false });
|
||||
});
|
||||
notification["error"]({ message: "Error", description: e.message })
|
||||
cb(false)
|
||||
this.setState({ loading: false })
|
||||
})
|
||||
} else {
|
||||
// Edit a subscriber.
|
||||
delete values["keys"];
|
||||
delete values["vals"];
|
||||
delete values["keys"]
|
||||
delete values["vals"]
|
||||
this.props
|
||||
.modelRequest(
|
||||
cs.ModelSubscribers,
|
||||
|
|
@ -118,20 +118,20 @@ class CreateFormDef extends React.PureComponent {
|
|||
notification["success"]({
|
||||
message: "Subscriber modified",
|
||||
description: `${values["email"]} modified`
|
||||
});
|
||||
})
|
||||
if (!this.props.isModal) {
|
||||
this.props.fetchRecord(this.props.record.id);
|
||||
this.props.fetchRecord(this.props.record.id)
|
||||
}
|
||||
cb(true);
|
||||
this.setState({ loading: false });
|
||||
cb(true)
|
||||
this.setState({ loading: false })
|
||||
})
|
||||
.catch(e => {
|
||||
notification["error"]({ message: "Error", description: e.message });
|
||||
cb(false);
|
||||
this.setState({ loading: false });
|
||||
});
|
||||
notification["error"]({ message: "Error", description: e.message })
|
||||
cb(false)
|
||||
this.setState({ loading: false })
|
||||
})
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
handleDeleteRecord = record => {
|
||||
this.props
|
||||
|
|
@ -145,40 +145,40 @@ class CreateFormDef extends React.PureComponent {
|
|||
notification["success"]({
|
||||
message: "Subscriber deleted",
|
||||
description: `${record.email} deleted`
|
||||
});
|
||||
})
|
||||
|
||||
this.props.route.history.push({
|
||||
pathname: cs.Routes.ViewSubscribers
|
||||
});
|
||||
})
|
||||
})
|
||||
.catch(e => {
|
||||
notification["error"]({ message: "Error", description: e.message });
|
||||
});
|
||||
};
|
||||
notification["error"]({ message: "Error", description: e.message })
|
||||
})
|
||||
}
|
||||
|
||||
render() {
|
||||
const { formType, record } = this.props;
|
||||
const { getFieldDecorator } = this.props.form;
|
||||
const { formType, record } = this.props
|
||||
const { getFieldDecorator } = this.props.form
|
||||
|
||||
if (formType === null) {
|
||||
return null;
|
||||
return null
|
||||
}
|
||||
|
||||
let subListIDs = [];
|
||||
let subStatuses = {};
|
||||
let subListIDs = []
|
||||
let subStatuses = {}
|
||||
if (this.props.record && this.props.record.lists) {
|
||||
subListIDs = this.props.record.lists.map(v => {
|
||||
return v["id"];
|
||||
});
|
||||
return v["id"]
|
||||
})
|
||||
subStatuses = this.props.record.lists.reduce(
|
||||
(o, item) => ({ ...o, [item.id]: item.subscription_status }),
|
||||
{}
|
||||
);
|
||||
)
|
||||
} else if (this.props.list) {
|
||||
subListIDs = [this.props.list.id];
|
||||
subListIDs = [this.props.list.id]
|
||||
}
|
||||
|
||||
const layout = this.props.isModal ? formItemLayoutModal : formItemLayout;
|
||||
const layout = this.props.isModal ? formItemLayoutModal : formItemLayout
|
||||
return (
|
||||
<Spin spinning={this.state.loading}>
|
||||
<Form onSubmit={this.handleSubmit}>
|
||||
|
|
@ -282,7 +282,7 @@ class CreateFormDef extends React.PureComponent {
|
|||
<Popconfirm
|
||||
title="Are you sure?"
|
||||
onConfirm={() => {
|
||||
this.handleDeleteRecord(record);
|
||||
this.handleDeleteRecord(record)
|
||||
}}
|
||||
>
|
||||
<Button icon="delete">Delete</Button>
|
||||
|
|
@ -292,11 +292,11 @@ class CreateFormDef extends React.PureComponent {
|
|||
)}
|
||||
</Form>
|
||||
</Spin>
|
||||
);
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
const CreateForm = Form.create()(CreateFormDef);
|
||||
const CreateForm = Form.create()(CreateFormDef)
|
||||
|
||||
class Subscriber extends React.PureComponent {
|
||||
state = {
|
||||
|
|
@ -306,19 +306,19 @@ class Subscriber extends React.PureComponent {
|
|||
subID: this.props.route.match.params
|
||||
? parseInt(this.props.route.match.params.subID, 10)
|
||||
: 0
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
// When this component is invoked within a modal from the subscribers list page,
|
||||
// the necessary context is supplied and there's no need to fetch anything.
|
||||
if (!this.props.isModal) {
|
||||
// Fetch lists.
|
||||
this.props.modelRequest(cs.ModelLists, cs.Routes.GetLists, cs.MethodGet);
|
||||
this.props.modelRequest(cs.ModelLists, cs.Routes.GetLists, cs.MethodGet)
|
||||
|
||||
// Fetch subscriber.
|
||||
this.fetchRecord(this.state.subID);
|
||||
this.fetchRecord(this.state.subID)
|
||||
} else {
|
||||
this.setState({ record: this.props.record, loading: false });
|
||||
this.setState({ record: this.props.record, loading: false })
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -326,38 +326,39 @@ class Subscriber extends React.PureComponent {
|
|||
this.props
|
||||
.request(cs.Routes.GetSubscriber, cs.MethodGet, { id: id })
|
||||
.then(r => {
|
||||
this.setState({ record: r.data.data, loading: false });
|
||||
this.setState({ record: r.data.data, loading: false })
|
||||
})
|
||||
.catch(e => {
|
||||
notification["error"]({
|
||||
placement: cs.MsgPosition,
|
||||
message: "Error",
|
||||
description: e.message
|
||||
});
|
||||
});
|
||||
};
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
setFormRef = r => {
|
||||
this.setState({ formRef: r });
|
||||
};
|
||||
this.setState({ formRef: r })
|
||||
}
|
||||
|
||||
submitForm = (e, cb) => {
|
||||
if (this.state.formRef) {
|
||||
this.state.formRef.handleSubmit(e, cb);
|
||||
this.state.formRef.handleSubmit(e, cb)
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<section className="content">
|
||||
<header className="header">
|
||||
<Row>
|
||||
<Col span={22}>
|
||||
<Col span={20}>
|
||||
{!this.state.record.id && <h1>Add subscriber</h1>}
|
||||
{this.state.record.id && (
|
||||
<div>
|
||||
<h1>
|
||||
<Tag className="subscriber-status"
|
||||
<Tag
|
||||
className="subscriber-status"
|
||||
color={
|
||||
tagColors.hasOwnProperty(this.state.record.status)
|
||||
? tagColors[this.state.record.status]
|
||||
|
|
@ -367,8 +368,8 @@ class Subscriber extends React.PureComponent {
|
|||
{this.state.record.status}
|
||||
</Tag>{" "}
|
||||
<span className="subscriber-name">
|
||||
{this.state.record.name} ({this.state.record.email})
|
||||
</span>
|
||||
{this.state.record.name} ({this.state.record.email})
|
||||
</span>
|
||||
</h1>
|
||||
<span className="text-small text-grey">
|
||||
ID {this.state.record.id} / UUID {this.state.record.uuid}
|
||||
|
|
@ -376,13 +377,13 @@ class Subscriber extends React.PureComponent {
|
|||
</div>
|
||||
)}
|
||||
</Col>
|
||||
<Col span={2} className="right subscriber-export">
|
||||
<Tooltip title="Export data" placement="top">
|
||||
<Col span={4} className="right subscriber-export">
|
||||
<Tooltip title="Export subscriber data" placement="top">
|
||||
<a
|
||||
role="button"
|
||||
href={"/api/subscribers/" + this.state.record.id + "/export"}
|
||||
>
|
||||
<Icon type="export" style={{ fontSize: "20px" }}/>
|
||||
Export <Icon type="export" />
|
||||
</a>
|
||||
</Tooltip>
|
||||
</Col>
|
||||
|
|
@ -398,20 +399,20 @@ class Subscriber extends React.PureComponent {
|
|||
lists={this.props.data[cs.ModelLists].results}
|
||||
wrappedComponentRef={r => {
|
||||
if (!r) {
|
||||
return;
|
||||
return
|
||||
}
|
||||
|
||||
// Save the form's reference so that when this component
|
||||
// is used as a modal, the invoker of the model can submit
|
||||
// it via submitForm()
|
||||
this.setState({ formRef: r });
|
||||
this.setState({ formRef: r })
|
||||
}}
|
||||
/>
|
||||
</Spin>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default Subscriber;
|
||||
export default Subscriber
|
||||
|
|
|
|||
Loading…
Reference in New Issue