|
@@ -1,4 +1,4 @@
|
|
-import React from "react"
|
|
|
|
|
|
+import React from "react";
|
|
import {
|
|
import {
|
|
Row,
|
|
Row,
|
|
Col,
|
|
Col,
|
|
@@ -13,11 +13,11 @@ import {
|
|
Popconfirm,
|
|
Popconfirm,
|
|
Spin,
|
|
Spin,
|
|
notification
|
|
notification
|
|
-} from "antd"
|
|
|
|
|
|
+} from "antd";
|
|
|
|
|
|
-import ModalPreview from "./ModalPreview"
|
|
|
|
-import Utils from "./utils"
|
|
|
|
-import * as cs from "./constants"
|
|
|
|
|
|
+import ModalPreview from "./ModalPreview";
|
|
|
|
+import Utils from "./utils";
|
|
|
|
+import * as cs from "./constants";
|
|
|
|
|
|
class CreateFormDef extends React.PureComponent {
|
|
class CreateFormDef extends React.PureComponent {
|
|
state = {
|
|
state = {
|
|
@@ -25,17 +25,17 @@ class CreateFormDef extends React.PureComponent {
|
|
modalWaiting: false,
|
|
modalWaiting: false,
|
|
previewName: "",
|
|
previewName: "",
|
|
previewBody: ""
|
|
previewBody: ""
|
|
- }
|
|
|
|
|
|
+ };
|
|
|
|
|
|
// Handle create / edit form submission.
|
|
// Handle create / edit form submission.
|
|
handleSubmit = e => {
|
|
handleSubmit = e => {
|
|
- e.preventDefault()
|
|
|
|
|
|
+ e.preventDefault();
|
|
this.props.form.validateFields((err, values) => {
|
|
this.props.form.validateFields((err, values) => {
|
|
if (err) {
|
|
if (err) {
|
|
- return
|
|
|
|
|
|
+ return;
|
|
}
|
|
}
|
|
|
|
|
|
- this.setState({ modalWaiting: true })
|
|
|
|
|
|
+ this.setState({ modalWaiting: true });
|
|
if (this.props.formType === cs.FormCreate) {
|
|
if (this.props.formType === cs.FormCreate) {
|
|
// Create a new list.
|
|
// Create a new list.
|
|
this.props
|
|
this.props
|
|
@@ -50,19 +50,19 @@ class CreateFormDef extends React.PureComponent {
|
|
placement: cs.MsgPosition,
|
|
placement: cs.MsgPosition,
|
|
message: "Template added",
|
|
message: "Template added",
|
|
description: `"${values["name"]}" added`
|
|
description: `"${values["name"]}" added`
|
|
- })
|
|
|
|
- this.props.fetchRecords()
|
|
|
|
- this.props.onClose()
|
|
|
|
- this.setState({ modalWaiting: false })
|
|
|
|
|
|
+ });
|
|
|
|
+ this.props.fetchRecords();
|
|
|
|
+ this.props.onClose();
|
|
|
|
+ this.setState({ modalWaiting: 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
|
|
- })
|
|
|
|
- this.setState({ modalWaiting: false })
|
|
|
|
- })
|
|
|
|
|
|
+ });
|
|
|
|
+ this.setState({ modalWaiting: false });
|
|
|
|
+ });
|
|
} else {
|
|
} else {
|
|
// Edit a list.
|
|
// Edit a list.
|
|
this.props
|
|
this.props
|
|
@@ -77,43 +77,43 @@ class CreateFormDef extends React.PureComponent {
|
|
placement: cs.MsgPosition,
|
|
placement: cs.MsgPosition,
|
|
message: "Template updated",
|
|
message: "Template updated",
|
|
description: `"${values["name"]}" modified`
|
|
description: `"${values["name"]}" modified`
|
|
- })
|
|
|
|
- this.props.fetchRecords()
|
|
|
|
- this.props.onClose()
|
|
|
|
- this.setState({ modalWaiting: false })
|
|
|
|
|
|
+ });
|
|
|
|
+ this.props.fetchRecords();
|
|
|
|
+ this.props.onClose();
|
|
|
|
+ this.setState({ modalWaiting: 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
|
|
- })
|
|
|
|
- this.setState({ modalWaiting: false })
|
|
|
|
- })
|
|
|
|
|
|
+ });
|
|
|
|
+ this.setState({ modalWaiting: false });
|
|
|
|
+ });
|
|
}
|
|
}
|
|
- })
|
|
|
|
- }
|
|
|
|
|
|
+ });
|
|
|
|
+ };
|
|
|
|
|
|
handleConfirmBlur = e => {
|
|
handleConfirmBlur = e => {
|
|
- const value = e.target.value
|
|
|
|
- this.setState({ confirmDirty: this.state.confirmDirty || !!value })
|
|
|
|
- }
|
|
|
|
|
|
+ const value = e.target.value;
|
|
|
|
+ this.setState({ confirmDirty: this.state.confirmDirty || !!value });
|
|
|
|
+ };
|
|
|
|
|
|
handlePreview = (name, body) => {
|
|
handlePreview = (name, body) => {
|
|
- this.setState({ previewName: name, previewBody: body })
|
|
|
|
- }
|
|
|
|
|
|
+ this.setState({ previewName: name, previewBody: body });
|
|
|
|
+ };
|
|
|
|
|
|
render() {
|
|
render() {
|
|
- const { formType, record, onClose } = this.props
|
|
|
|
- const { getFieldDecorator } = this.props.form
|
|
|
|
|
|
+ const { formType, record, onClose } = this.props;
|
|
|
|
+ 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 } }
|
|
- }
|
|
|
|
|
|
+ };
|
|
|
|
|
|
if (formType === null) {
|
|
if (formType === null) {
|
|
- return null
|
|
|
|
|
|
+ return null;
|
|
}
|
|
}
|
|
|
|
|
|
return (
|
|
return (
|
|
@@ -173,8 +173,12 @@ class CreateFormDef extends React.PureComponent {
|
|
{"}"}
|
|
{"}"}
|
|
</code>{" "}
|
|
</code>{" "}
|
|
should appear in the template.{" "}
|
|
should appear in the template.{" "}
|
|
- <a href="" target="_blank">
|
|
|
|
- Read more on templating
|
|
|
|
|
|
+ <a
|
|
|
|
+ href="https://listmonk.app/docs/templating"
|
|
|
|
+ target="_blank"
|
|
|
|
+ rel="noopener noreferrer"
|
|
|
|
+ >
|
|
|
|
+ Learn more <Icon type="link" />.
|
|
</a>
|
|
</a>
|
|
.
|
|
.
|
|
</Col>
|
|
</Col>
|
|
@@ -191,26 +195,26 @@ class CreateFormDef extends React.PureComponent {
|
|
previewURL={cs.Routes.PreviewNewTemplate}
|
|
previewURL={cs.Routes.PreviewNewTemplate}
|
|
body={this.state.previewBody}
|
|
body={this.state.previewBody}
|
|
onCancel={() => {
|
|
onCancel={() => {
|
|
- this.setState({ previewBody: null, previewName: null })
|
|
|
|
|
|
+ this.setState({ previewBody: null, previewName: null });
|
|
}}
|
|
}}
|
|
/>
|
|
/>
|
|
)}
|
|
)}
|
|
</div>
|
|
</div>
|
|
- )
|
|
|
|
|
|
+ );
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
-const CreateForm = Form.create()(CreateFormDef)
|
|
|
|
|
|
+const CreateForm = Form.create()(CreateFormDef);
|
|
|
|
|
|
class Templates extends React.PureComponent {
|
|
class Templates extends React.PureComponent {
|
|
state = {
|
|
state = {
|
|
formType: null,
|
|
formType: null,
|
|
record: {},
|
|
record: {},
|
|
previewRecord: null
|
|
previewRecord: null
|
|
- }
|
|
|
|
|
|
+ };
|
|
|
|
|
|
constructor(props) {
|
|
constructor(props) {
|
|
- super(props)
|
|
|
|
|
|
+ super(props);
|
|
|
|
|
|
this.columns = [
|
|
this.columns = [
|
|
{
|
|
{
|
|
@@ -230,21 +234,21 @@ class Templates extends React.PureComponent {
|
|
</div>
|
|
</div>
|
|
)}
|
|
)}
|
|
</div>
|
|
</div>
|
|
- )
|
|
|
|
|
|
+ );
|
|
}
|
|
}
|
|
},
|
|
},
|
|
{
|
|
{
|
|
title: "Created",
|
|
title: "Created",
|
|
dataIndex: "created_at",
|
|
dataIndex: "created_at",
|
|
render: (date, _) => {
|
|
render: (date, _) => {
|
|
- return Utils.DateString(date)
|
|
|
|
|
|
+ return Utils.DateString(date);
|
|
}
|
|
}
|
|
},
|
|
},
|
|
{
|
|
{
|
|
title: "Updated",
|
|
title: "Updated",
|
|
dataIndex: "updated_at",
|
|
dataIndex: "updated_at",
|
|
render: (date, _) => {
|
|
render: (date, _) => {
|
|
- return Utils.DateString(date)
|
|
|
|
|
|
+ return Utils.DateString(date);
|
|
}
|
|
}
|
|
},
|
|
},
|
|
{
|
|
{
|
|
@@ -299,15 +303,15 @@ class Templates extends React.PureComponent {
|
|
</Popconfirm>
|
|
</Popconfirm>
|
|
)}
|
|
)}
|
|
</div>
|
|
</div>
|
|
- )
|
|
|
|
|
|
+ );
|
|
}
|
|
}
|
|
}
|
|
}
|
|
- ]
|
|
|
|
|
|
+ ];
|
|
}
|
|
}
|
|
|
|
|
|
componentDidMount() {
|
|
componentDidMount() {
|
|
- this.props.pageTitle("Templates")
|
|
|
|
- this.fetchRecords()
|
|
|
|
|
|
+ this.props.pageTitle("Templates");
|
|
|
|
+ this.fetchRecords();
|
|
}
|
|
}
|
|
|
|
|
|
fetchRecords = () => {
|
|
fetchRecords = () => {
|
|
@@ -315,8 +319,8 @@ class Templates extends React.PureComponent {
|
|
cs.ModelTemplates,
|
|
cs.ModelTemplates,
|
|
cs.Routes.GetTemplates,
|
|
cs.Routes.GetTemplates,
|
|
cs.MethodGet
|
|
cs.MethodGet
|
|
- )
|
|
|
|
- }
|
|
|
|
|
|
+ );
|
|
|
|
+ };
|
|
|
|
|
|
handleDeleteRecord = record => {
|
|
handleDeleteRecord = record => {
|
|
this.props
|
|
this.props
|
|
@@ -331,15 +335,15 @@ class Templates extends React.PureComponent {
|
|
placement: cs.MsgPosition,
|
|
placement: cs.MsgPosition,
|
|
message: "Template deleted",
|
|
message: "Template deleted",
|
|
description: `"${record.name}" deleted`
|
|
description: `"${record.name}" 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 });
|
|
|
|
+ });
|
|
|
|
+ };
|
|
|
|
|
|
handleSetDefault = record => {
|
|
handleSetDefault = record => {
|
|
this.props
|
|
this.props
|
|
@@ -354,35 +358,35 @@ class Templates extends React.PureComponent {
|
|
placement: cs.MsgPosition,
|
|
placement: cs.MsgPosition,
|
|
message: "Template updated",
|
|
message: "Template updated",
|
|
description: `"${record.name}" set as default`
|
|
description: `"${record.name}" set as default`
|
|
- })
|
|
|
|
|
|
+ });
|
|
|
|
|
|
// Reload the table.
|
|
// Reload the table.
|
|
- this.fetchRecords()
|
|
|
|
|
|
+ this.fetchRecords();
|
|
})
|
|
})
|
|
.catch(e => {
|
|
.catch(e => {
|
|
notification["error"]({
|
|
notification["error"]({
|
|
placement: cs.MsgPosition,
|
|
placement: cs.MsgPosition,
|
|
message: "Error",
|
|
message: "Error",
|
|
description: e.message
|
|
description: e.message
|
|
- })
|
|
|
|
- })
|
|
|
|
- }
|
|
|
|
|
|
+ });
|
|
|
|
+ });
|
|
|
|
+ };
|
|
|
|
|
|
handlePreview = record => {
|
|
handlePreview = record => {
|
|
- this.setState({ previewRecord: record })
|
|
|
|
- }
|
|
|
|
|
|
+ this.setState({ previewRecord: record });
|
|
|
|
+ };
|
|
|
|
|
|
hideForm = () => {
|
|
hideForm = () => {
|
|
- this.setState({ formType: null })
|
|
|
|
- }
|
|
|
|
|
|
+ this.setState({ formType: null });
|
|
|
|
+ };
|
|
|
|
|
|
handleShowCreateForm = () => {
|
|
handleShowCreateForm = () => {
|
|
- this.setState({ formType: cs.FormCreate, record: {} })
|
|
|
|
- }
|
|
|
|
|
|
+ this.setState({ formType: cs.FormCreate, record: {} });
|
|
|
|
+ };
|
|
|
|
|
|
handleShowEditForm = record => {
|
|
handleShowEditForm = record => {
|
|
- this.setState({ formType: cs.FormEdit, record: record })
|
|
|
|
- }
|
|
|
|
|
|
+ this.setState({ formType: cs.FormEdit, record: record });
|
|
|
|
+ };
|
|
|
|
|
|
render() {
|
|
render() {
|
|
return (
|
|
return (
|
|
@@ -427,13 +431,13 @@ class Templates extends React.PureComponent {
|
|
this.state.previewRecord.id
|
|
this.state.previewRecord.id
|
|
)}
|
|
)}
|
|
onCancel={() => {
|
|
onCancel={() => {
|
|
- this.setState({ previewRecord: null })
|
|
|
|
|
|
+ this.setState({ previewRecord: null });
|
|
}}
|
|
}}
|
|
/>
|
|
/>
|
|
)}
|
|
)}
|
|
</section>
|
|
</section>
|
|
- )
|
|
|
|
|
|
+ );
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
-export default Templates
|
|
|
|
|
|
+export default Templates;
|