better templating system (closes #66)

Author: larskotthoff

Diff for: README.md

@@ -128,6 +128,20 @@ in the array is what to replace it with (leave empty to remove matches).
                 "shortcut": "1", # key to press in write view
                 "description": "foo", # description shown in write view
                 "template": "Thank you for your message." # body of email
+            },
+
+            {
+                "shortcut": "2", # key to press in write view
+                "description": "bar", # description shown in write view
+                "template": { # alternative form where more can be specified -- all fields optional
+                    "from": "foo", # ID of account as defined above
+                    "to": ["Foo Bar <[email protected]>"],
+                    "cc": ["Foo Bar <[email protected]>"],
+                    "bcc": ["Foo Bar <[email protected]>"],
+                    "subject": "This is a test.",
+                    "tags": ["fooTag", "barTag"],
+                    "body": "Thank you for your message."
+                }
             }
         ]
     }

Diff for: client/src/Write.jsx

@@ -171,7 +171,6 @@ export function Write(props) {
   } else if(!from) {
     from = defAcct?.id;
   }
-  setMessage("from", from);
   if(localStorage.getItem(`draft-${draftKey}-subject`)) {
     subject = localStorage.getItem(`draft-${draftKey}-subject`);
     document.title = `Compose: ${subject}`;
@@ -194,8 +193,20 @@ export function Write(props) {
 
   createEffect(on(useTemplate, () => {
     if(useTemplate() && bodyRef().disabled === false) {
-      bodyRef().value = useTemplate() + message.bodyDefaultValue;
-      setMessage("body", bodyRef().value);
+      if(typeof useTemplate() === 'object') {
+        const tmpl = useTemplate();
+        for(const k in tmpl) {
+          if(k === "body") {
+            bodyRef().value = tmpl.body + message.bodyDefaultValue;
+            setMessage("body", bodyRef().value);
+          } else {
+            setMessage(k, tmpl[k]);
+          }
+        }
+      } else { // assume it's a string
+        bodyRef().value = useTemplate() + message.bodyDefaultValue;
+        setMessage("body", bodyRef().value);
+      }
     }
   }));
 

Diff for: client/src/Write.test.jsx

@@ -335,6 +335,76 @@ test("template set with base message", async () => {
   expect(getByTestId("body").value).toBe(`blurg\n\n\nOn ${msg.date}, ${msg.from} wrote:\n> Test mail`);
 });
 
+test("complex template set by click", async () => {
+  const tmpl = {"from": "foo", "to": ["[email protected]"], "cc": ["[email protected]"], "bcc": ["[email protected]"],
+                "subject": "fooSubject", "tags": ["tag1", "tag2"], "body": "barBody"},
+        cmp = {"templates": [{"shortcut": "1", "description": "foo", "template": tmpl}]};
+  vi.stubGlobal("data", {"accounts": accts, "allTags": tags, "compose": cmp});
+  const { getByTestId } = render(() => <Write/>);
+
+  await vi.waitFor(() => {
+    expect(screen.getByText("Send")).toBeInTheDocument();
+  });
+
+  expect(screen.getByText("foo (1)")).toBeInTheDocument();
+  expect(getByTestId("from").value).toBe("bar");
+  expect(getByTestId("to").querySelectorAll(".chip").length).toBe(0);
+  expect(getByTestId("cc").querySelectorAll(".chip").length).toBe(0);
+  expect(getByTestId("bcc").querySelectorAll(".chip").length).toBe(0);
+  expect(getByTestId("subject").value).toBe("");
+  expect(getByTestId("tagedit").querySelectorAll(".chip").length).toBe(0);
+  expect(getByTestId("body").value).toBe("");
+
+  await userEvent.click(screen.getByText("foo (1)"));
+  expect(getByTestId("from").value).toBe("foo");
+  expect(getByTestId("to").querySelectorAll(".chip").length).toBe(1);
+  expect(getByTestId("to").querySelectorAll(".chip")[0].textContent).toBe("[email protected]");
+  expect(getByTestId("cc").querySelectorAll(".chip").length).toBe(1);
+  expect(getByTestId("cc").querySelectorAll(".chip")[0].textContent).toBe("[email protected]");
+  expect(getByTestId("bcc").querySelectorAll(".chip").length).toBe(1);
+  expect(getByTestId("bcc").querySelectorAll(".chip")[0].textContent).toBe("[email protected]");
+  expect(getByTestId("subject").value).toBe("fooSubject");
+  expect(getByTestId("tagedit").querySelectorAll(".chip").length).toBe(2);
+  expect(getByTestId("tagedit").querySelectorAll(".chip")[0].textContent).toBe("tag1");
+  expect(getByTestId("tagedit").querySelectorAll(".chip")[1].textContent).toBe("tag2");
+  expect(getByTestId("body").value).toBe("barBody");
+});
+
+test("complex template set by shortcut", async () => {
+  const tmpl = {"from": "foo", "to": ["[email protected]"], "cc": ["[email protected]"], "bcc": ["[email protected]"],
+                "subject": "fooSubject", "tags": ["tag1", "tag2"], "body": "barBody"},
+        cmp = {"templates": [{"shortcut": "1", "description": "foo", "template": tmpl}]};
+  vi.stubGlobal("data", {"accounts": accts, "allTags": tags, "compose": cmp});
+  const { getByTestId } = render(() => <Write/>);
+
+  await vi.waitFor(() => {
+    expect(screen.getByText("Send")).toBeInTheDocument();
+  });
+
+  expect(screen.getByText("foo (1)")).toBeInTheDocument();
+  expect(getByTestId("from").value).toBe("bar");
+  expect(getByTestId("to").querySelectorAll(".chip").length).toBe(0);
+  expect(getByTestId("cc").querySelectorAll(".chip").length).toBe(0);
+  expect(getByTestId("bcc").querySelectorAll(".chip").length).toBe(0);
+  expect(getByTestId("subject").value).toBe("");
+  expect(getByTestId("tagedit").querySelectorAll(".chip").length).toBe(0);
+  expect(getByTestId("body").value).toBe("");
+
+  await userEvent.type(document.body, "1");
+  expect(getByTestId("from").value).toBe("foo");
+  expect(getByTestId("to").querySelectorAll(".chip").length).toBe(1);
+  expect(getByTestId("to").querySelectorAll(".chip")[0].textContent).toBe("[email protected]");
+  expect(getByTestId("cc").querySelectorAll(".chip").length).toBe(1);
+  expect(getByTestId("cc").querySelectorAll(".chip")[0].textContent).toBe("[email protected]");
+  expect(getByTestId("bcc").querySelectorAll(".chip").length).toBe(1);
+  expect(getByTestId("bcc").querySelectorAll(".chip")[0].textContent).toBe("[email protected]");
+  expect(getByTestId("subject").value).toBe("fooSubject");
+  expect(getByTestId("tagedit").querySelectorAll(".chip").length).toBe(2);
+  expect(getByTestId("tagedit").querySelectorAll(".chip")[0].textContent).toBe("tag1");
+  expect(getByTestId("tagedit").querySelectorAll(".chip")[1].textContent).toBe("tag2");
+  expect(getByTestId("body").value).toBe("barBody");
+});
+
 test("addresses editable and complete", async () => {
   const { getByTestId } = render(() => <Write/>);