add: chats list page

app/templates_src/chats.lisp

@@ -0,0 +1,217 @@
+(text "{% extends \"root.lisp\" %} {% block head %}")
+(title
+    (text "My chats - {{ name }}"))
+(text "{% endblock %} {% block body %}")
+(div
+    ("class" "flex w_full gap_2 justify_between items_center")
+    (div
+        ("class" "tabs short bar")
+        (a
+            ("class" "button tab")
+            ("href" "/chats")
+            (text "chats")))
+    (button
+        ("class" "button")
+        ("title" "Create chat")
+        ("onclick" "document.getElementById('create_dialog').showModal()")
+        (text "{{ icon \"plus\" }}")))
+(div
+    ("class" "card flex flex_col gap_2")
+    (text "{% for chat in chats -%}")
+    (div
+        ("class" "card surface w_full flex justify_between items_center gap_2")
+        (a
+            ("class" "flex gap_ch items_center")
+            ("href" "/chats/{{ chat[0].id }}")
+            (text "{{ components::chat_name(chat=chat[0], members=chat[1], advanced=true) }}"))
+        (div
+            ("class" "dropdown")
+            (button
+                ("onclick" "open_dropdown(event)")
+                ("exclude" "dropdown")
+                ("class" "button")
+                (text "{{ icon \"ellipsis\" }}"))
+            (div
+                ("class" "inner")
+                (a
+                    ("class" "button")
+                    ("href" "/chats/{{ chat[0].id }}")
+                    ("target" "_blank")
+                    (text "pop open"))
+
+                (text "{% if chat[0].style != \"Direct\" -%}")
+                ; group chat only
+                (button
+                    ("class" "button")
+                    ("onclick" "rename_gc('{{ chat[0].id }}')")
+                    (text "rename"))
+                (text "{%- endif %}")
+
+                (button
+                    ("class" "button red")
+                    ("onclick" "leave_chat('{{ chat[0].id }}')")
+                    (text "leave")))))
+    (text "{%- endfor %}")
+
+    (text "{% if chats|length == 0 -%}")
+    (i ("class" "flex gap_ch items_center fade") (text "{{ icon \"smile\" }} No results, yet!"))
+    (text "{%- endif %}")
+
+    ; pagination
+    (div
+        ("class" "flex w_full items_center gap_2 justify_between")
+        (text "{% if page > 0 -%}")
+        (a
+            ("href" "?page={{ page - 1 }}")
+            ("class" "button surface")
+            (text "{{ icon \"arrow-left\" }} Back"))
+        (text "{%- else -%}")
+        (div null?)
+        (text "{%- endif %}")
+
+        (text "{% if chats|length > 0 -%}")
+        (a
+            ("href" "?page={{ page + 1 }}")
+            ("class" "button surface")
+            (text "Next {{ icon \"arrow-right\" }}"))
+        (text "{%- endif %}")))
+
+(dialog
+    ("id" "create_dialog")
+    (div
+        ("class" "inner")
+        (h2
+            ("class" "text_center w_full")
+            (text "Create chat"))
+
+        (ul ("id" "members_list"))
+        (form
+            ("class" "flex flex_row gap_2 w_full")
+            ("onsubmit" "add_member(event)")
+            (input
+                ("type" "text")
+                ("list" "users_search")
+                ("name" "username")
+                ("id" "username")
+                ("placeholder" "username")
+                ("oninput" "search_users(event)"))
+            (button
+                ("class" "button")
+                (text "Add")))
+
+        (hr ("class" "margin"))
+
+        (div
+            ("class" "flex gap_2 justify_between")
+            (button
+                ("onclick" "document.getElementById('create_dialog').close()")
+                ("class" "button red")
+                (text "Cancel"))
+
+            (button
+                ("class" "button green")
+                ("onclick" "create_chat_from_form()")
+                (text "Create")))))
+
+(datalist ("id" "users_search"))
+
+(script
+    (text "globalThis.CHAT_MEMBERS = [];
+
+    function render_members() {
+        document.getElementById('members_list').innerHTML = \"\";
+        for (const member of CHAT_MEMBERS) {
+            document.getElementById('members_list').innerHTML += `<li>${member} (<a href=\"javascript:remove_member('${member}')\" class=\"red\">remove</a>)</li>`;
+        }
+    }
+
+    function add_member(e) {
+        e.preventDefault();
+        const member = e.target.username.value;
+
+        if (CHAT_MEMBERS.includes(member)) {
+            return;
+        }
+
+        CHAT_MEMBERS.push(member);
+        render_members();
+        e.target.reset();
+    }
+
+    function remove_member(member) {
+        CHAT_MEMBERS.splice(CHAT_MEMBERS.indexOf(member), 1);
+        render_members();
+    }
+
+    function create_chat_from_form(e) {
+        document.getElementById('create_dialog').close();
+
+        fetch(\"/api/v1/chats\", {
+            method: \"POST\",
+            headers: {
+                \"Content-Type\": \"application/json\",
+            },
+            body: JSON.stringify({
+                style: CHAT_MEMBERS.length > 1 ? { Group: { name: \"Untitled\" } } : \"Direct\",
+                members: CHAT_MEMBERS,
+            }),
+        })
+            .then((res) => res.json())
+            .then((res) => {
+                show_message(res.message, res.ok);
+
+                if (res.ok) {
+                    window.location.href = `/chats/${res.payload}`;
+                    e.target.reset();
+                }
+            });
+    }
+
+    let search_users_timeout;
+    function search_users(e) {
+        if (search_users_timeout) {
+            clearTimeout(search_users_timeout);
+        }
+
+        if (e.target.value.trim().length === 0) {
+            return;
+        }
+
+        search_users_timeout = setTimeout(() => {
+            fetch(\"/api/v1/auth/users/search\", {
+                method: \"POST\",
+                headers: {
+                    \"Content-Type\": \"application/json\",
+                },
+                body: JSON.stringify({
+                    prefix: e.target.value.trim(),
+                }),
+            })
+                .then((res) => res.json())
+                .then((res) => {
+                    if (res.ok) {
+                        document.getElementById(\"users_search\").innerHTML = \"\";
+                        for (const username of res.payload) {
+                            document.getElementById(\"users_search\").innerHTML += `<option value=\"${username}\">${username}</option>`;
+                        }
+                    } else {
+                        show_message(res.message, res.ok);
+                    }
+                });
+        }, 1000);
+    }
+
+    function leave_chat(id) {
+        if (!confirm(\"Are you sure you would like to do this?\")) {
+            return;
+        }
+
+        fetch(`/api/v1/chats/${id}/leave`, {
+            method: \"POST\",
+        })
+            .then((res) => res.json())
+            .then((res) => {
+                show_message(res.message, res.ok);
+            });
+    }"))
+(text "{% endblock %}")