Improve searching by member number in new message form.

Author: HalfVoxel

admin/src/Components/MessageForm.jsx admin/src/Components/MessageForm.tsxadmin/src/Components/MessageForm.jsx renamed to admin/src/Components/MessageForm.tsx

@@ -1,3 +1,4 @@
+import Message from "Models/Message";
 import React, { useEffect, useState } from "react";
 import Async from "react-select/async";
 import { get } from "../gateway";
@@ -7,19 +8,40 @@ import Icon from "./icons";
 import Textarea from "./Textarea";
 import TextInput from "./TextInput";
 
-const groupOption = (d) => {
-    const id = d[Group.model.id];
+type GroupOption = {
+    id: number;
+    type: "group";
+    label: string;
+    value: string;
+}
+
+const groupOption = (d: Group): GroupOption => {
+    const id = d.id;
     const type = "group";
     return {
-        id,
+        id: id!,
         type,
         label: `Grupp: ${d.title}`,
         value: type + id,
     };
 };
 
-const memberOption = (d) => {
-    const id = d[Member.model.id];
+type MemberOption = {
+    id: number;
+    type: "member";
+    label: string;
+    value: string;
+}
+
+type CombinedOption = {
+    type: "combined",
+    label: string,
+    value: string,
+    inner: (MemberOption | GroupOption)[],
+}
+
+const memberOption = (d: Member): MemberOption => {
+    const id = d.member_id;
     const type = "member";
     const lastname = d.lastname || "";
     return {
@@ -30,15 +52,25 @@ const memberOption = (d) => {
     };
 };
 
-const MessageForm = ({ message, onSave, recipientSelect }) => {
+const MessageForm = ({ message, onSave, recipientSelect }: { message: Message, onSave: ()=>void, recipientSelect: boolean }) => {
     const [sendDisabled, setSendDisabled] = useState(true);
-    const [recipients, setRecipients] = useState([]);
+    const [recipients, setRecipients] = useState<(MemberOption | GroupOption)[]>([]);
     const [bodyLength, setBodyLength] = useState(message.body.length);
+    const memberCache = React.useRef(new Map<number, Member>()).current;
+
+    const getMember = async (id: number): Promise<Member> => {
+        if (memberCache.has(id)) {
+            return memberCache.get(id)!;
+        }
+        const { data } = await get({ url: `/membership/member/${id}` });
+        memberCache.set(id, data);
+        return data;
+    };
 
     useEffect(() => {
         const unsubscribe = message.subscribe(() => {
             setSendDisabled(!message.canSave());
-            setRecipients(message.recipients);
+            setRecipients(message.recipients as any as (MemberOption | GroupOption)[]);
             setBodyLength(message.body.length);
         });
 
@@ -47,7 +79,29 @@ const MessageForm = ({ message, onSave, recipientSelect }) => {
         };
     }, [message]);
 
-    const loadOptions = (inputValue, callback) => {
+    const loadOptions = (inputValue: string, callback: (options: (MemberOption | GroupOption | CombinedOption)[]) => void) => {
+        const intListMatch = inputValue.match(/^(\d+[\s,]*)+$/);
+        if (intListMatch) {
+            const ids = inputValue
+                .split(/[\s,]+/)
+                .map((v) => parseInt(v, 10))
+                .filter((v) => !isNaN(v));
+            if (ids.length > 0) {
+                Promise.all(ids.map(getMember)).then(members => {
+                    const options = members.map(memberOption);
+                    callback([
+                        {
+                            type: "combined",
+                            label: `${options.map(o => o.label).join(", ")}`,
+                            value: "combined-" + ids.join("-"),
+                            inner: options,
+                        },
+                    ]);
+                });
+                return;
+            }
+        }
+
         Promise.all([
             get({
                 url: "/membership/group",
@@ -65,16 +119,16 @@ const MessageForm = ({ message, onSave, recipientSelect }) => {
                     sort_order: "asc",
                 },
             }),
-        ]).then(([{ data: groups }, { data: members }]) =>
+        ]).then(([{ data: groups }, { data: members }]: [{ data: Group[] }, { data: Member[] }]) =>
             callback(
                 groups
-                    .map((d) => groupOption(d))
+                    .map((d) => groupOption(d) as GroupOption | MemberOption)
                     .concat(members.map((d) => memberOption(d))),
             ),
         );
     };
 
-    const handleSubmit = (e) => {
+    const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
         e.preventDefault();
         onSave();
     };
@@ -87,18 +141,20 @@ const MessageForm = ({ message, onSave, recipientSelect }) => {
                         Mottagare
                     </label>
                     <div className="uk-form-controls">
-                        <Async
+                        <Async<(MemberOption | GroupOption | CombinedOption), true>
                             name="recipients"
                             isMulti
-                            cache={false}
                             placeholder="Type to search for member or group"
                             getOptionValue={(e) => e.value}
                             getOptionLabel={(e) => e.label}
                             loadOptions={loadOptions}
                             value={recipients}
                             onChange={(values) => {
-                                message.recipients = values;
-                                setRecipients(values);
+                                const flattened = values.flatMap((v) =>
+                                    v.type === "combined" ? v.inner : v
+                                );
+                                message.recipients = flattened;
+                                setRecipients(flattened);
                             }}
                         />
                     </div>

admin/src/Models/Group.js

@@ -0,0 +1,34 @@
+import Base from "./Base";
+
+export default class Group extends Base<Group> {
+    created_at!: string | null
+    updated_at!: string | null
+    deleted_at!: string | null
+    name!: string
+    title!: string
+    description!: string
+    num_members!: number
+
+    static model = {
+        id: "group_id",
+        root: "/membership/group",
+        attributes: {
+            created_at: null,
+            updated_at: null,
+            deleted_at: null,
+            name: "",
+            title: "",
+            description: "",
+            num_members: 0,
+        },
+    };
+
+
+    override deleteConfirmMessage() {
+        return `Are you sure you want to delete group ${this.title}?`;
+    }
+
+    override canSave() {
+        return this.isDirty() && !!this.title && !!this.name;
+    }
+}

admin/src/Models/Group.ts

@@ -0,0 +1,62 @@
+import Base from "./Base";
+
+export type MessageRecipient = {
+    id: number,
+    type: "member" | "group"
+}
+
+export default class Message extends Base<Message> {
+    subject!: string
+    body!: string
+    status!: string
+    template!: string
+    recipient!: string
+    recipients!: MessageRecipient[]
+    created_at!: string | null
+    updated_at!: string | null
+    sent_at!: string | null
+    member_id!: number
+
+    static model = {
+        id: "id",
+        root: "/messages/message",
+        attributes: {
+            subject: "",
+            body: "",
+            status: "",
+            template: "",
+            recipient: "",
+            recipients: [],
+            created_at: null,
+            updated_at: null,
+            sent_at: null,
+            member_id: 0,
+        },
+    };
+
+    override del(): Promise<void> {
+        throw new Error("Message delete not supported.");
+    }
+
+    override canSave(): boolean {
+        return (
+            !!this.body &&
+            !!this.recipients &&
+            this.recipients.length > 0 &&
+            !!this.subject
+        );
+    }
+
+    statusText(message: Message): string {
+        switch (message.status) {
+            case "queued":
+                return "Queued";
+            case "failed":
+                return "Failed";
+            case "sent":
+                return "Sent";
+            default:
+                return "Unknown";
+        }
+    }
+}