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

Add doc links to UI

This commit is contained in:
Kailash Nadh 2019-07-04 18:41:30 +05:30
parent bcf35bf670
commit be20014524
3 changed files with 113 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
frontend/src/Layout.js
View File

@ -1,35 +1,35 @@
import React from "react" import React from "react";
import { Switch, Route } from "react-router-dom" import { Switch, Route } from "react-router-dom";
import { Link } from "react-router-dom" import { Link } from "react-router-dom";
import { Layout, Menu, Icon } from "antd" import { Layout, Menu, Icon } from "antd";
import logo from "./static/listmonk.svg" import logo from "./static/listmonk.svg";
// Views. // Views.
import Dashboard from "./Dashboard" import Dashboard from "./Dashboard";
import Lists from "./Lists" import Lists from "./Lists";
import Subscribers from "./Subscribers" import Subscribers from "./Subscribers";
import Subscriber from "./Subscriber" import Subscriber from "./Subscriber";
import Templates from "./Templates" import Templates from "./Templates";
import Import from "./Import" import Import from "./Import";
import Campaigns from "./Campaigns" import Campaigns from "./Campaigns";
import Campaign from "./Campaign" import Campaign from "./Campaign";
import Media from "./Media" import Media from "./Media";
const { Content, Footer, Sider } = Layout const { Content, Footer, Sider } = Layout;
const SubMenu = Menu.SubMenu const SubMenu = Menu.SubMenu;
const year = new Date().getUTCFullYear() const year = new Date().getUTCFullYear();
class Base extends React.Component { class Base extends React.Component {
state = { state = {
basePath: "/" + window.location.pathname.split("/")[1], basePath: "/" + window.location.pathname.split("/")[1],
error: null, error: null,
collapsed: false collapsed: false
} };
onCollapse = collapsed => { onCollapse = collapsed => {
this.setState({ collapsed }) this.setState({ collapsed });
} };
render() { render() {
return ( return (
@ -245,13 +245,20 @@ class Base extends React.Component {
> >
listmonk listmonk
</a>{" "} </a>{" "}
&copy; 2019 {year !== 2019 ? " - " + year : ""} &copy; 2019 {year !== 2019 ? " - " + year : ""} &mdash;{" "}
<a
href="https://listmonk.app/docs"
target="_blank"
rel="noopener noreferrer"
>
Docs
</a>
</span> </span>
</Footer> </Footer>
</Layout> </Layout>
</Layout> </Layout>
) );
} }
} }
export default Base export default Base;

11
frontend/src/Subscribers.js
View File

@ -650,9 +650,14 @@ class Subscribers extends React.PureComponent {
autosize={{ minRows: 2, maxRows: 10 }} autosize={{ minRows: 2, maxRows: 10 }}
/> />
<span className="text-tiny text-small"> <span className="text-tiny text-small">
Write a partial SQL expression to query the subscribers Partial SQL expression to query subscriber attributes.{" "}
based on their primary information or attributes. Learn <a
more. href="https://listmonk.app/docs/querying-and-segmentation"
target="_blank"
rel="noopener noreferrer"
>
Learn more <Icon type="link" />.
</a>
</span> </span>
</p> </p>
<p> <p>

146
frontend/src/Templates.js
View File

@ -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 ModalPreview from "./ModalPreview";
import Utils from "./utils" import Utils from "./utils";
import * as cs from "./constants" 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.fetchRecords();
this.props.onClose() this.props.onClose();
this.setState({ modalWaiting: false }) 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.fetchRecords();
this.props.onClose() this.props.onClose();
this.setState({ modalWaiting: false }) 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 const value = e.target.value;
this.setState({ confirmDirty: this.state.confirmDirty || !!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 { formType, record, onClose } = this.props;
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 } }
} };
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"> <a
Read more on templating 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.props.pageTitle("Templates");
this.fetchRecords() 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;