Refactor forms UI

frontend/src/Forms.js

@@ -10,11 +10,14 @@ import * as cs from "./constants"
 class Forms extends React.PureComponent {
   state = {
     lists: [],
-    selected: []
+    selected: [],
+    selectedUUIDs: [],
+    indeterminate: false,
+    checkAll: false
   }
 
   componentDidMount() {
-    this.props.pageTitle("Forms")
+    this.props.pageTitle("Subscription forms")
     this.props
       .modelRequest(cs.ModelLists, cs.Routes.GetLists, cs.MethodGet, {
         per_page: "all"
@@ -24,6 +27,16 @@ class Forms extends React.PureComponent {
       })
   }
 
+  handleSelectAll = e => {
+    const uuids = this.state.lists.map(l => l.uuid)
+    this.setState({
+      selectedUUIDs: e.target.checked ? uuids : [],
+      indeterminate: false,
+      checkAll: e.target.checked
+    })
+    this.handleSelection(e.target.checked ? uuids : [])
+  }
+
   handleSelection(sel) {
     let out = []
     sel.forEach(s => {
@@ -35,56 +48,86 @@ class Forms extends React.PureComponent {
       }
     })
 
-    console.log(out)
-    this.setState({ selected: out })
+    this.setState({
+      selected: out,
+      selectedUUIDs: sel,
+      indeterminate: sel.length > 0 && sel.length < this.state.lists.length,
+      checkAll: sel.length === this.state.lists.length
+    })
   }
 
   render() {
     return (
       <section className="content list-form">
-        <h1>Forms</h1>
-        <Row>
-          <Col span={8}>
+        <h1>Subscription forms</h1>
+        <hr />
+        <Row gutter={[16, 40]}>
+          <Col span={24} md={8}>
+            <h2>Lists</h2>
+            <Checkbox
+              indeterminate={this.state.indeterminate}
+              onChange={this.handleSelectAll}
+              checked={this.state.checkAll}
+            >
+              Select all
+            </Checkbox>
+            <hr />
             <Checkbox.Group
               className="lists"
               options={this.state.lists.map(l => {
                 return { label: l.name, value: l.uuid }
               })}
-              defaultValue={[]}
-              onChange={(sel) => this.handleSelection(sel)}
+              onChange={sel => this.handleSelection(sel)}
+              value={this.state.selectedUUIDs}
             />
           </Col>
-          <Col span={16}>
-              <h1>Form HTML</h1>
-              <p>Use the following HTML to show a subscription form on an external webpage.</p>
+          <Col span={24} md={16}>
+            <h2>Form HTML</h2>
             <p>
-                The form should have the <code><strong>email</strong></code> field and one or more{" "}
-                <code><strong>l</strong></code> (list UUID) fields. The <code><strong>name</strong></code> field is optional.
+              Use the following HTML to show a subscription form on an external
+              webpage.
+            </p>
+            <p>
+              The form should have the{" "}
+              <code>
+                <strong>email</strong>
+              </code>{" "}
+              field and one or more{" "}
+              <code>
+                <strong>l</strong>
+              </code>{" "}
+              (list UUID) fields. The{" "}
+              <code>
+                <strong>name</strong>
+              </code>{" "}
+              field is optional.
             </p>
             <pre className="html">
-
-{`<form method="post" action="${window.CONFIG.rootURL}/subscription/form" class="listmonk-subscription">
+              {`<form method="post" action="${
+                window.CONFIG.rootURL
+              }/subscription/form" class="listmonk-form">
     <div>
         <h3>Subscribe</h3>
-        <p><input type="text" name="email" value="" placeholder="E-mail" /></p>
-        <p><input type="text" name="name" value="" placeholder="Name (optional)" /></p>`}
-{(() => {
-    let out = [];
+        <p><input type="text" name="email" placeholder="E-mail" /></p>
+        <p><input type="text" name="name" placeholder="Name (optional)" /></p>`}
+              {(() => {
+                let out = []
                 this.state.selected.forEach(l => {
                   out.push(`
         <p>
-            <input type="checkbox" name="l" value="${l.uuid}" id="${l.uuid.substr(0,5)}" />
-            <label for="${l.uuid.substr(0,5)}">${l.name}</label>
-        </p>`);
-    });
-    return out;
-})()}
-{`
+            <input type="checkbox" name="l" value="${
+              l.uuid
+            }" id="${l.uuid.substr(0, 5)}" />
+            <label for="${l.uuid.substr(0, 5)}">${l.name}</label>
+        </p>`)
+                })
+                return out
+              })()}
+              {`
         <p><input type="submit" value="Subscribe" /></p>
     </div>
 </form>
 `}
-
             </pre>
           </Col>
         </Row>