hangar-tech
/
listmonk
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fix lists not showing on the subscriber form

This commit is contained in:
Kailash Nadh 2019-07-04 13:39:05 +05:30
parent 64043f0d62
commit 348e65f1ec
2 changed files with 222 additions and 222 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

154
frontend/src/Subscriber.js
View File

@ -1,4 +1,4 @@
import React from "react" import React from "react";
import { import {
Row, Row,
Col, Col,
@ -10,72 +10,72 @@ import {
Spin, Spin,
Popconfirm, Popconfirm,
notification notification
} from "antd" } from "antd";
import * as cs from "./constants" import * as cs from "./constants";
const tagColors = { const tagColors = {
enabled: "green", enabled: "green",
blacklisted: "red" blacklisted: "red"
} };
const formItemLayoutModal = { const formItemLayoutModal = {
labelCol: { xs: { span: 24 }, sm: { span: 4 } }, labelCol: { xs: { span: 24 }, sm: { span: 4 } },
wrapperCol: { xs: { span: 24 }, sm: { span: 18 } } wrapperCol: { xs: { span: 24 }, sm: { span: 18 } }
} };
const formItemLayout = { const formItemLayout = {
labelCol: { xs: { span: 16 }, sm: { span: 4 } }, labelCol: { xs: { span: 16 }, sm: { span: 4 } },
wrapperCol: { xs: { span: 16 }, sm: { span: 10 } } wrapperCol: { xs: { span: 16 }, sm: { span: 10 } }
} };
const formItemTailLayout = { const formItemTailLayout = {
wrapperCol: { xs: { span: 24, offset: 0 }, sm: { span: 10, offset: 4 } } wrapperCol: { xs: { span: 24, offset: 0 }, sm: { span: 10, offset: 4 } }
} };
class CreateFormDef extends React.PureComponent { class CreateFormDef extends React.PureComponent {
state = { state = {
confirmDirty: false, confirmDirty: false,
loading: false loading: false
} };
// Handle create / edit form submission. // Handle create / edit form submission.
handleSubmit = (e, cb) => { handleSubmit = (e, cb) => {
e.preventDefault() e.preventDefault();
if (!cb) { if (!cb) {
// Set a fake callback. // Set a fake callback.
cb = () => {} cb = () => {};
} }
var err = null, var err = null,
values = {} values = {};
this.props.form.validateFields((e, v) => { this.props.form.validateFields((e, v) => {
err = e err = e;
values = v values = v;
}) });
if (err) { if (err) {
return return;
} }
let a = values["attribs"] let a = values["attribs"];
values["attribs"] = {} values["attribs"] = {};
if (a && a.length > 0) { if (a && a.length > 0) {
try { try {
values["attribs"] = JSON.parse(a) values["attribs"] = JSON.parse(a);
if (values["attribs"] instanceof Array) { if (values["attribs"] instanceof Array) {
notification["error"]({ notification["error"]({
message: "Invalid JSON type", message: "Invalid JSON type",
description: "Attributes should be a map {} and not an array []" description: "Attributes should be a map {} and not an array []"
}) });
return return;
} }
} catch (e) { } catch (e) {
notification["error"]({ notification["error"]({
message: "Invalid JSON in attributes", message: "Invalid JSON in attributes",
description: e.toString() description: e.toString()
}) });
return return;
} }
} }
this.setState({ loading: true }) this.setState({ loading: true });
if (this.props.formType === cs.FormCreate) { if (this.props.formType === cs.FormCreate) {
// Add a subscriber. // Add a subscriber.
this.props this.props
@ -89,22 +89,22 @@ class CreateFormDef extends React.PureComponent {
notification["success"]({ notification["success"]({
message: "Subscriber added", message: "Subscriber added",
description: `${values["email"]} added` description: `${values["email"]} added`
}) });
if (!this.props.isModal) { if (!this.props.isModal) {
this.props.fetchRecord(this.props.record.id) this.props.fetchRecord(this.props.record.id);
} }
cb(true) cb(true);
this.setState({ loading: false }) this.setState({ loading: false });
}) })
.catch(e => { .catch(e => {
notification["error"]({ message: "Error", description: e.message }) notification["error"]({ message: "Error", description: e.message });
cb(false) cb(false);
this.setState({ loading: false }) this.setState({ loading: false });
}) });
} else { } else {
// Edit a subscriber. // Edit a subscriber.
delete values["keys"] delete values["keys"];
delete values["vals"] delete values["vals"];
this.props this.props
.modelRequest( .modelRequest(
cs.ModelSubscribers, cs.ModelSubscribers,
@ -116,20 +116,20 @@ class CreateFormDef extends React.PureComponent {
notification["success"]({ notification["success"]({
message: "Subscriber modified", message: "Subscriber modified",
description: `${values["email"]} modified` description: `${values["email"]} modified`
}) });
if (!this.props.isModal) { if (!this.props.isModal) {
this.props.fetchRecord(this.props.record.id) this.props.fetchRecord(this.props.record.id);
} }
cb(true) cb(true);
this.setState({ loading: false }) this.setState({ loading: false });
}) })
.catch(e => { .catch(e => {
notification["error"]({ message: "Error", description: e.message }) notification["error"]({ message: "Error", description: e.message });
cb(false) cb(false);
this.setState({ loading: false }) this.setState({ loading: false });
}) });
}
} }
};
handleDeleteRecord = record => { handleDeleteRecord = record => {
this.props this.props
@ -143,40 +143,40 @@ class CreateFormDef extends React.PureComponent {
notification["success"]({ notification["success"]({
message: "Subscriber deleted", message: "Subscriber deleted",
description: `${record.email} deleted` description: `${record.email} deleted`
}) });
this.props.route.history.push({ this.props.route.history.push({
pathname: cs.Routes.ViewSubscribers pathname: cs.Routes.ViewSubscribers
}) });
}) })
.catch(e => { .catch(e => {
notification["error"]({ message: "Error", description: e.message }) notification["error"]({ message: "Error", description: e.message });
}) });
} };
render() { render() {
const { formType, record } = this.props const { formType, record } = this.props;
const { getFieldDecorator } = this.props.form const { getFieldDecorator } = this.props.form;
if (formType === null) { if (formType === null) {
return null return null;
} }
let subListIDs = [] let subListIDs = [];
let subStatuses = {} let subStatuses = {};
if (this.props.record && this.props.record.lists) { if (this.props.record && this.props.record.lists) {
subListIDs = this.props.record.lists.map(v => { subListIDs = this.props.record.lists.map(v => {
return v["id"] return v["id"];
}) });
subStatuses = this.props.record.lists.reduce( subStatuses = this.props.record.lists.reduce(
(o, item) => ({ ...o, [item.id]: item.subscription_status }), (o, item) => ({ ...o, [item.id]: item.subscription_status }),
{} {}
) );
} else if (this.props.list) { } 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 ( return (
<Spin spinning={this.state.loading}> <Spin spinning={this.state.loading}>
<Form onSubmit={this.handleSubmit}> <Form onSubmit={this.handleSubmit}>
@ -273,7 +273,7 @@ class CreateFormDef extends React.PureComponent {
<Popconfirm <Popconfirm
title="Are you sure?" title="Are you sure?"
onConfirm={() => { onConfirm={() => {
this.handleDeleteRecord(record) this.handleDeleteRecord(record);
}} }}
> >
<Button icon="delete">Delete</Button> <Button icon="delete">Delete</Button>
@ -283,11 +283,11 @@ class CreateFormDef extends React.PureComponent {
)} )}
</Form> </Form>
</Spin> </Spin>
) );
} }
} }
const CreateForm = Form.create()(CreateFormDef) const CreateForm = Form.create()(CreateFormDef);
class Subscriber extends React.PureComponent { class Subscriber extends React.PureComponent {
state = { state = {
@ -297,19 +297,19 @@ class Subscriber extends React.PureComponent {
subID: this.props.route.match.params subID: this.props.route.match.params
? parseInt(this.props.route.match.params.subID, 10) ? parseInt(this.props.route.match.params.subID, 10)
: 0 : 0
} };
componentDidMount() { componentDidMount() {
// When this component is invoked within a modal from the subscribers list page, // 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. // the necessary context is supplied and there's no need to fetch anything.
if (!this.props.isModal) { if (!this.props.isModal) {
// Fetch lists. // Fetch lists.
this.props.modelRequest(cs.ModelLists, cs.Routes.GetLists, cs.MethodGet) this.props.modelRequest(cs.ModelLists, cs.Routes.GetLists, cs.MethodGet);
// Fetch subscriber. // Fetch subscriber.
this.fetchRecord(this.state.subID) this.fetchRecord(this.state.subID);
} else { } else {
this.setState({ record: this.props.record, loading: false }) this.setState({ record: this.props.record, loading: false });
} }
} }
@ -317,26 +317,26 @@ class Subscriber extends React.PureComponent {
this.props this.props
.request(cs.Routes.GetSubscriber, cs.MethodGet, { id: id }) .request(cs.Routes.GetSubscriber, cs.MethodGet, { id: id })
.then(r => { .then(r => {
this.setState({ record: r.data.data, loading: false }) this.setState({ record: r.data.data, loading: false });
}) })
.catch(e => { .catch(e => {
notification["error"]({ notification["error"]({
placement: cs.MsgPosition, placement: cs.MsgPosition,
message: "Error", message: "Error",
description: e.message description: e.message
}) });
}) });
} };
setFormRef = r => { setFormRef = r => {
this.setState({ formRef: r }) this.setState({ formRef: r });
} };
submitForm = (e, cb) => { submitForm = (e, cb) => {
if (this.state.formRef) { if (this.state.formRef) {
this.state.formRef.handleSubmit(e, cb) this.state.formRef.handleSubmit(e, cb);
}
} }
};
render() { render() {
return ( return (
@ -375,23 +375,23 @@ class Subscriber extends React.PureComponent {
formType={this.props.formType ? this.props.formType : cs.FormEdit} formType={this.props.formType ? this.props.formType : cs.FormEdit}
record={this.state.record} record={this.state.record}
fetchRecord={this.fetchRecord} fetchRecord={this.fetchRecord}
lists={this.props.data[cs.ModelLists]} lists={this.props.data[cs.ModelLists].results}
wrappedComponentRef={r => { wrappedComponentRef={r => {
if (!r) { if (!r) {
return return;
} }
// Save the form's reference so that when this component // Save the form's reference so that when this component
// is used as a modal, the invoker of the model can submit // is used as a modal, the invoker of the model can submit
// it via submitForm() // it via submitForm()
this.setState({ formRef: r }) this.setState({ formRef: r });
}} }}
/> />
</Spin> </Spin>
</div> </div>
</section> </section>
) );
} }
} }
export default Subscriber export default Subscriber;

290
frontend/src/Subscribers.js
View File

@ -1,5 +1,5 @@
import React from "react" import React from "react";
import { Link } from "react-router-dom" import { Link } from "react-router-dom";
import { import {
Row, Row,
Col, Col,
@ -15,44 +15,44 @@ import {
Popconfirm, Popconfirm,
notification, notification,
Radio Radio
} from "antd" } from "antd";
import Utils from "./utils" import Utils from "./utils";
import Subscriber from "./Subscriber" import Subscriber from "./Subscriber";
import * as cs from "./constants" import * as cs from "./constants";
const tagColors = { const tagColors = {
enabled: "green", enabled: "green",
blacklisted: "red" blacklisted: "red"
} };
class ListsFormDef extends React.PureComponent { class ListsFormDef extends React.PureComponent {
state = { state = {
modalWaiting: false modalWaiting: false
} };
// Handle create / edit form submission. // Handle create / edit form submission.
handleSubmit = e => { handleSubmit = e => {
e.preventDefault() e.preventDefault();
var err = null, var err = null,
values = {} values = {};
this.props.form.validateFields((e, v) => { this.props.form.validateFields((e, v) => {
err = e err = e;
values = v values = v;
}) });
if (err) { if (err) {
return return;
} }
if (this.props.allRowsSelected) { if (this.props.allRowsSelected) {
values["list_ids"] = this.props.listIDs values["list_ids"] = this.props.listIDs;
values["query"] = this.props.query values["query"] = this.props.query;
} else { } else {
values["ids"] = this.props.selectedRows.map(r => r.id) values["ids"] = this.props.selectedRows.map(r => r.id);
} }
this.setState({ modalWaiting: true }) this.setState({ modalWaiting: true });
this.props this.props
.request( .request(
!this.props.allRowsSelected !this.props.allRowsSelected
@ -65,24 +65,24 @@ class ListsFormDef extends React.PureComponent {
notification["success"]({ notification["success"]({
message: "Lists changed", message: "Lists changed",
description: `Lists changed for selected subscribers` description: `Lists changed for selected subscribers`
}) });
this.props.clearSelectedRows() this.props.clearSelectedRows();
this.props.fetchRecords() this.props.fetchRecords();
this.setState({ modalWaiting: false }) this.setState({ modalWaiting: false });
this.props.onClose() this.props.onClose();
}) })
.catch(e => { .catch(e => {
notification["error"]({ message: "Error", description: e.message }) notification["error"]({ message: "Error", description: e.message });
this.setState({ modalWaiting: false }) this.setState({ modalWaiting: false });
}) });
} };
render() { render() {
const { getFieldDecorator } = this.props.form const { getFieldDecorator } = this.props.form;
const formItemLayout = { const formItemLayout = {
labelCol: { xs: { span: 16 }, sm: { span: 4 } }, labelCol: { xs: { span: 16 }, sm: { span: 4 } },
wrapperCol: { xs: { span: 16 }, sm: { span: 18 } } wrapperCol: { xs: { span: 16 }, sm: { span: 18 } }
} };
return ( return (
<Modal <Modal
@ -123,14 +123,14 @@ class ListsFormDef extends React.PureComponent {
</Form.Item> </Form.Item>
</Form> </Form>
</Modal> </Modal>
) );
} }
} }
const ListsForm = Form.create()(ListsFormDef) const ListsForm = Form.create()(ListsFormDef);
class Subscribers extends React.PureComponent { class Subscribers extends React.PureComponent {
defaultPerPage = 20 defaultPerPage = 20;
state = { state = {
formType: null, formType: null,
@ -151,7 +151,7 @@ class Subscribers extends React.PureComponent {
listModalVisible: false, listModalVisible: false,
allRowsSelected: false, allRowsSelected: false,
selectedRows: [] selectedRows: []
} };
// Pagination config. // Pagination config.
paginationOptions = { paginationOptions = {
@ -163,15 +163,15 @@ class Subscribers extends React.PureComponent {
position: "both", position: "both",
showTotal: (total, range) => `${range[0]} to ${range[1]} of ${total}`, showTotal: (total, range) => `${range[0]} to ${range[1]} of ${total}`,
onChange: (page, perPage) => { onChange: (page, perPage) => {
this.fetchRecords({ page: page, per_page: perPage }) this.fetchRecords({ page: page, per_page: perPage });
}, },
onShowSizeChange: (page, perPage) => { onShowSizeChange: (page, perPage) => {
this.fetchRecords({ page: page, per_page: perPage }) this.fetchRecords({ page: page, per_page: perPage });
}
} }
};
constructor(props) { constructor(props) {
super(props) super(props);
// Table layout. // Table layout.
this.columns = [ this.columns = [
@ -181,7 +181,7 @@ class Subscribers extends React.PureComponent {
sorter: true, sorter: true,
width: "25%", width: "25%",
render: (text, record) => { render: (text, record) => {
const out = [] const out = [];
out.push( out.push(
<div key={`sub-email-${record.id}`} className="sub-name"> <div key={`sub-email-${record.id}`} className="sub-name">
<Link <Link
@ -190,15 +190,15 @@ class Subscribers extends React.PureComponent {
// Open the individual subscriber page on ctrl+click // Open the individual subscriber page on ctrl+click
// and the modal otherwise. // and the modal otherwise.
if (!e.ctrlKey) { if (!e.ctrlKey) {
this.handleShowEditForm(record) this.handleShowEditForm(record);
e.preventDefault() e.preventDefault();
} }
}} }}
> >
{text} {text}
</Link> </Link>
</div> </div>
) );
if (record.lists.length > 0) { if (record.lists.length > 0) {
for (let i = 0; i < record.lists.length; i++) { for (let i = 0; i < record.lists.length; i++) {
@ -220,11 +220,11 @@ class Subscribers extends React.PureComponent {
{record.lists[i].subscription_status} {record.lists[i].subscription_status}
</sup> </sup>
</Tag> </Tag>
) );
} }
} }
return out return out;
} }
}, },
{ {
@ -240,14 +240,14 @@ class Subscribers extends React.PureComponent {
// Open the individual subscriber page on ctrl+click // Open the individual subscriber page on ctrl+click
// and the modal otherwise. // and the modal otherwise.
if (!e.ctrlKey) { if (!e.ctrlKey) {
this.handleShowEditForm(record) this.handleShowEditForm(record);
e.preventDefault() e.preventDefault();
} }
}} }}
> >
{text} {text}
</Link> </Link>
) );
} }
}, },
{ {
@ -261,7 +261,7 @@ class Subscribers extends React.PureComponent {
> >
{status} {status}
</Tag> </Tag>
) );
} }
}, },
{ {
@ -282,7 +282,7 @@ class Subscribers extends React.PureComponent {
0 0
)} )}
</span> </span>
) );
} }
}, },
{ {
@ -290,7 +290,7 @@ class Subscribers extends React.PureComponent {
width: "10%", width: "10%",
dataIndex: "created_at", dataIndex: "created_at",
render: (date, _) => { render: (date, _) => {
return Utils.DateString(date) return Utils.DateString(date);
} }
}, },
{ {
@ -298,7 +298,7 @@ class Subscribers extends React.PureComponent {
width: "10%", width: "10%",
dataIndex: "updated_at", dataIndex: "updated_at",
render: (date, _) => { render: (date, _) => {
return Utils.DateString(date) return Utils.DateString(date);
} }
}, },
{ {
@ -328,10 +328,10 @@ class Subscribers extends React.PureComponent {
</Tooltip> </Tooltip>
</Popconfirm> </Popconfirm>
</div> </div>
) );
} }
} }
] ];
} }
componentDidMount() { componentDidMount() {
@ -341,18 +341,18 @@ class Subscribers extends React.PureComponent {
.then(() => { .then(() => {
// If this is an individual list's view, pick up that list. // If this is an individual list's view, pick up that list.
if (this.state.queryParams.listID) { if (this.state.queryParams.listID) {
this.props.data[cs.ModelLists].forEach(l => { this.props.data[cs.ModelLists].results.forEach(l => {
if (l.id === this.state.queryParams.listID) { if (l.id === this.state.queryParams.listID) {
this.setState({ this.setState({
queryParams: { ...this.state.queryParams, list: l } queryParams: { ...this.state.queryParams, list: l }
}) });
return false return false;
} }
}) });
} }
}) });
this.fetchRecords() this.fetchRecords();
} }
fetchRecords = params => { fetchRecords = params => {
@ -361,15 +361,15 @@ class Subscribers extends React.PureComponent {
per_page: this.state.queryParams.per_page, per_page: this.state.queryParams.per_page,
list_id: this.state.queryParams.listID, list_id: this.state.queryParams.listID,
query: this.state.queryParams.query query: this.state.queryParams.query
} };
// The records are for a specific list. // The records are for a specific list.
if (this.state.queryParams.listID) { if (this.state.queryParams.listID) {
qParams.list_id = this.state.queryParams.listID qParams.list_id = this.state.queryParams.listID;
} }
if (params) { if (params) {
qParams = { ...qParams, ...params } qParams = { ...qParams, ...params };
} }
this.props this.props
@ -388,9 +388,9 @@ class Subscribers extends React.PureComponent {
page: this.props.data[cs.ModelSubscribers].page, page: this.props.data[cs.ModelSubscribers].page,
query: this.props.data[cs.ModelSubscribers].query query: this.props.data[cs.ModelSubscribers].query
} }
}) });
}) });
} };
handleDeleteRecord = record => { handleDeleteRecord = record => {
this.props this.props
@ -404,15 +404,15 @@ class Subscribers extends React.PureComponent {
notification["success"]({ notification["success"]({
message: "Subscriber deleted", message: "Subscriber deleted",
description: `${record.email} deleted` description: `${record.email} deleted`
}) });
// Reload the table. // Reload the table.
this.fetchRecords() this.fetchRecords();
}) })
.catch(e => { .catch(e => {
notification["error"]({ message: "Error", description: e.message }) notification["error"]({ message: "Error", description: e.message });
}) });
} };
handleDeleteRecords = records => { handleDeleteRecords = records => {
this.props this.props
@ -426,15 +426,15 @@ class Subscribers extends React.PureComponent {
notification["success"]({ notification["success"]({
message: "Subscriber(s) deleted", message: "Subscriber(s) deleted",
description: "Selected subscribers deleted" description: "Selected subscribers deleted"
}) });
// Reload the table. // Reload the table.
this.fetchRecords() this.fetchRecords();
}) })
.catch(e => { .catch(e => {
notification["error"]({ message: "Error", description: e.message }) notification["error"]({ message: "Error", description: e.message });
}) });
} };
handleBlacklistSubscribers = records => { handleBlacklistSubscribers = records => {
this.props this.props
@ -445,15 +445,15 @@ class Subscribers extends React.PureComponent {
notification["success"]({ notification["success"]({
message: "Subscriber(s) blacklisted", message: "Subscriber(s) blacklisted",
description: "Selected subscribers blacklisted" description: "Selected subscribers blacklisted"
}) });
// Reload the table. // Reload the table.
this.fetchRecords() this.fetchRecords();
}) })
.catch(e => { .catch(e => {
notification["error"]({ message: "Error", description: e.message }) notification["error"]({ message: "Error", description: e.message });
}) });
} };
// Arbitrary query based calls. // Arbitrary query based calls.
handleDeleteRecordsByQuery = (listIDs, query) => { handleDeleteRecordsByQuery = (listIDs, query) => {
@ -468,15 +468,15 @@ class Subscribers extends React.PureComponent {
notification["success"]({ notification["success"]({
message: "Subscriber(s) deleted", message: "Subscriber(s) deleted",
description: "Selected subscribers have been deleted" description: "Selected subscribers have been deleted"
}) });
// Reload the table. // Reload the table.
this.fetchRecords() this.fetchRecords();
}) })
.catch(e => { .catch(e => {
notification["error"]({ message: "Error", description: e.message }) notification["error"]({ message: "Error", description: e.message });
}) });
} };
handleBlacklistSubscribersByQuery = (listIDs, query) => { handleBlacklistSubscribersByQuery = (listIDs, query) => {
this.props this.props
@ -488,22 +488,22 @@ class Subscribers extends React.PureComponent {
notification["success"]({ notification["success"]({
message: "Subscriber(s) blacklisted", message: "Subscriber(s) blacklisted",
description: "Selected subscribers have been blacklisted" description: "Selected subscribers have been blacklisted"
}) });
// Reload the table. // Reload the table.
this.fetchRecords() this.fetchRecords();
}) })
.catch(e => { .catch(e => {
notification["error"]({ message: "Error", description: e.message }) notification["error"]({ message: "Error", description: e.message });
}) });
} };
handleQuerySubscribersIntoLists = (query, sourceList, targetLists) => { handleQuerySubscribersIntoLists = (query, sourceList, targetLists) => {
let params = { let params = {
query: query, query: query,
source_list: sourceList, source_list: sourceList,
target_lists: targetLists target_lists: targetLists
} };
this.props this.props
.request(cs.Routes.QuerySubscribersIntoLists, cs.MethodPost, params) .request(cs.Routes.QuerySubscribersIntoLists, cs.MethodPost, params)
@ -511,75 +511,75 @@ class Subscribers extends React.PureComponent {
notification["success"]({ notification["success"]({
message: "Subscriber(s) added", message: "Subscriber(s) added",
description: `${res.data.data.count} added` description: `${res.data.data.count} added`
}) });
this.handleToggleListModal() this.handleToggleListModal();
}) })
.catch(e => { .catch(e => {
notification["error"]({ message: "Error", description: e.message }) notification["error"]({ message: "Error", description: e.message });
}) });
} };
handleHideForm = () => { handleHideForm = () => {
this.setState({ formType: null }) this.setState({ formType: null });
} };
handleShowCreateForm = () => { handleShowCreateForm = () => {
this.setState({ formType: cs.FormCreate, attribs: [], record: {} }) this.setState({ formType: cs.FormCreate, attribs: [], record: {} });
} };
handleShowEditForm = record => { handleShowEditForm = record => {
this.setState({ formType: cs.FormEdit, record: record }) this.setState({ formType: cs.FormEdit, record: record });
} };
handleToggleListsForm = () => { handleToggleListsForm = () => {
this.setState({ listsFormVisible: !this.state.listsFormVisible }) this.setState({ listsFormVisible: !this.state.listsFormVisible });
} };
handleSearch = q => { handleSearch = q => {
q = q.trim().toLowerCase() q = q.trim().toLowerCase();
if (q === "") { if (q === "") {
this.fetchRecords({ query: null }) this.fetchRecords({ query: null });
return return;
} }
q = q.replace(/'/g, "''") q = q.replace(/'/g, "''");
const query = `(name ~* '${q}' OR email ~* '${q}')` const query = `(name ~* '${q}' OR email ~* '${q}')`;
this.fetchRecords({ query: query }) this.fetchRecords({ query: query });
} };
handleSelectRow = (_, records) => { handleSelectRow = (_, records) => {
this.setState({ allRowsSelected: false, selectedRows: records }) this.setState({ allRowsSelected: false, selectedRows: records });
} };
handleSelectAllRows = () => { handleSelectAllRows = () => {
this.setState({ this.setState({
allRowsSelected: true, allRowsSelected: true,
selectedRows: this.props.data[cs.ModelSubscribers].results selectedRows: this.props.data[cs.ModelSubscribers].results
}) });
} };
clearSelectedRows = (_, records) => { clearSelectedRows = (_, records) => {
this.setState({ allRowsSelected: false, selectedRows: [] }) this.setState({ allRowsSelected: false, selectedRows: [] });
} };
handleToggleQueryForm = () => { handleToggleQueryForm = () => {
this.setState({ queryFormVisible: !this.state.queryFormVisible }) this.setState({ queryFormVisible: !this.state.queryFormVisible });
} };
handleToggleListModal = () => { handleToggleListModal = () => {
this.setState({ listModalVisible: !this.state.listModalVisible }) this.setState({ listModalVisible: !this.state.listModalVisible });
} };
render() { render() {
const pagination = { const pagination = {
...this.paginationOptions, ...this.paginationOptions,
...this.state.queryParams ...this.state.queryParams
} };
if (this.state.queryParams.list) { if (this.state.queryParams.list) {
this.props.pageTitle(this.state.queryParams.list.name + " / Subscribers") this.props.pageTitle(this.state.queryParams.list.name + " / Subscribers");
} else { } else {
this.props.pageTitle("Subscribers") this.props.pageTitle("Subscribers");
} }
return ( return (
@ -644,7 +644,7 @@ class Subscribers extends React.PureComponent {
...this.state.queryParams, ...this.state.queryParams,
query: e.target.value query: e.target.value
} }
}) });
}} }}
value={this.state.queryParams.query} value={this.state.queryParams.query}
autosize={{ minRows: 2, maxRows: 10 }} autosize={{ minRows: 2, maxRows: 10 }}
@ -661,7 +661,7 @@ class Subscribers extends React.PureComponent {
type="primary" type="primary"
icon="search" icon="search"
onClick={() => { onClick={() => {
this.fetchRecords() this.fetchRecords();
}} }}
> >
Query Query
@ -670,7 +670,7 @@ class Subscribers extends React.PureComponent {
disabled={this.state.queryParams.query === ""} disabled={this.state.queryParams.query === ""}
icon="refresh" icon="refresh"
onClick={() => { onClick={() => {
this.fetchRecords({ query: null }) this.fetchRecords({ query: null });
}} }}
> >
Reset Reset
@ -717,11 +717,11 @@ class Subscribers extends React.PureComponent {
? [this.state.queryParams.listID] ? [this.state.queryParams.listID]
: [], : [],
this.state.queryParams.query this.state.queryParams.query
) );
this.clearSelectedRows() this.clearSelectedRows();
} else { } else {
this.handleDeleteRecords(this.state.selectedRows) this.handleDeleteRecords(this.state.selectedRows);
this.clearSelectedRows() this.clearSelectedRows();
} }
}} }}
> >
@ -738,13 +738,13 @@ class Subscribers extends React.PureComponent {
? [this.state.queryParams.listID] ? [this.state.queryParams.listID]
: [], : [],
this.state.queryParams.query this.state.queryParams.query
) );
this.clearSelectedRows() this.clearSelectedRows();
} else { } else {
this.handleBlacklistSubscribers( this.handleBlacklistSubscribers(
this.state.selectedRows this.state.selectedRows
) );
this.clearSelectedRows() this.clearSelectedRows();
} }
}} }}
> >
@ -767,9 +767,9 @@ class Subscribers extends React.PureComponent {
!this.props.data[cs.ModelSubscribers] || !this.props.data[cs.ModelSubscribers] ||
!this.props.data[cs.ModelSubscribers].hasOwnProperty("results") !this.props.data[cs.ModelSubscribers].hasOwnProperty("results")
) { ) {
return [] return [];
} }
return this.props.data[cs.ModelSubscribers].results return this.props.data[cs.ModelSubscribers].results;
})()} })()}
loading={this.props.reqStates[cs.ModelSubscribers] !== cs.StateDone} loading={this.props.reqStates[cs.ModelSubscribers] !== cs.StateDone}
pagination={pagination} pagination={pagination}
@ -789,16 +789,16 @@ class Subscribers extends React.PureComponent {
confirmLoading={this.state.modalWaiting} confirmLoading={this.state.modalWaiting}
onOk={e => { onOk={e => {
if (!this.state.modalForm) { if (!this.state.modalForm) {
return return;
} }
// This submits the form embedded in the Subscriber component. // This submits the form embedded in the Subscriber component.
this.state.modalForm.submitForm(e, ok => { this.state.modalForm.submitForm(e, ok => {
if (ok) { if (ok) {
this.handleHideForm() this.handleHideForm();
this.fetchRecords() this.fetchRecords();
} }
}) });
}} }}
onCancel={this.handleHideForm} onCancel={this.handleHideForm}
okButtonProps={{ okButtonProps={{
@ -813,10 +813,10 @@ class Subscribers extends React.PureComponent {
record={this.state.record} record={this.state.record}
ref={r => { ref={r => {
if (!r) { if (!r) {
return return;
} }
this.setState({ modalForm: r }) this.setState({ modalForm: r });
}} }}
/> />
</Modal> </Modal>
@ -825,7 +825,7 @@ class Subscribers extends React.PureComponent {
{this.state.listsFormVisible && ( {this.state.listsFormVisible && (
<ListsForm <ListsForm
{...this.props} {...this.props}
lists={this.props.data[cs.ModelLists]} lists={this.props.data[cs.ModelLists].results}
allRowsSelected={this.state.allRowsSelected} allRowsSelected={this.state.allRowsSelected}
selectedRows={this.state.selectedRows} selectedRows={this.state.selectedRows}
selectedLists={ selectedLists={
@ -840,8 +840,8 @@ class Subscribers extends React.PureComponent {
/> />
)} )}
</section> </section>
) );
} }
} }
export default Subscribers export default Subscribers;