Add dashboard to build

2024-02-24 16:10:25 +00:00
parent 53e13844f9
commit a8ef3d03f9
127 changed files with 75846 additions and 2 deletions
--- a/reminder-dashboard/src/components/Reminder/LoadTemplate.tsx
+++ b/reminder-dashboard/src/components/Reminder/LoadTemplate.tsx
@ -0,0 +1,114 @@
+import { useState } from "preact/hooks";
+import { Modal } from "../Modal";
+import { useMutation, useQuery, useQueryClient } from "react-query";
+import { deleteGuildTemplate, fetchGuildTemplates } from "../../api";
+import { useParams } from "wouter";
+import { useReminder } from "./ReminderContext";
+import { useFlash } from "../App/FlashContext";
+import { ICON_FLASH_TIME } from "../../consts";
+
+export const LoadTemplate = () => {
+    const [modalOpen, setModalOpen] = useState(false);
+
+    return (
+        <div>
+            <button
+                class="button is-outlined show-modal is-pulled-right"
+                onClick={() => {
+                    setModalOpen(true);
+                }}
+            >
+                Load Template
+            </button>
+            {modalOpen && <LoadTemplateModal setModalOpen={setModalOpen}></LoadTemplateModal>}
+        </div>
+    );
+};
+
+const LoadTemplateModal = ({ setModalOpen }) => {
+    const { guild } = useParams();
+    const [reminder, setReminder] = useReminder();
+
+    const [selected, setSelected] = useState(null);
+    const flash = useFlash();
+
+    const queryClient = useQueryClient();
+    const { isSuccess, data: templates } = useQuery(fetchGuildTemplates(guild));
+    const mutation = useMutation({
+        ...deleteGuildTemplate(guild),
+        onSuccess: () => {
+            flash({ message: "Template deleted", type: "success" });
+            queryClient.invalidateQueries({
+                queryKey: ["GUILD_TEMPLATES", guild],
+            });
+        },
+    });
+
+    return (
+        <Modal setModalOpen={setModalOpen} title={"Load Template"}>
+            <div class="control has-icons-left">
+                <div class="select is-fullwidth">
+                    <select
+                        id="templateSelect"
+                        onChange={(ev) => {
+                            setSelected(ev.currentTarget.value);
+                        }}
+                        disabled={mutation.isLoading}
+                    >
+                        <option disabled={true} selected={true}>
+                            Choose template...
+                        </option>
+                        {isSuccess &&
+                            templates.map((template) => (
+                                <option value={template.id}>{template.name}</option>
+                            ))}
+                    </select>
+                </div>
+                <div class="icon is-small is-left">
+                    <i class="fas fa-file-spreadsheet"></i>
+                </div>
+            </div>
+            <br></br>
+            <div class="has-text-centered">
+                <button
+                    class="button is-success close-modal"
+                    id="load-template"
+                    style={{ margin: "2px" }}
+                    onClick={() => {
+                        const template = templates.find(
+                            (template) => template.id.toString() === selected,
+                        );
+
+                        setReminder((reminder) => ({
+                            ...reminder,
+                            ...template,
+                            // drop the template's ID
+                            id: undefined,
+                        }));
+
+                        flash({ message: "Template loaded", type: "success" });
+                        setModalOpen(false);
+                    }}
+                    disabled={mutation.isLoading}
+                >
+                    Load Template
+                </button>
+                <button
+                    class="button is-danger"
+                    id="delete-template"
+                    style={{ margin: "2px" }}
+                    onClick={() => {
+                        const template = templates.find(
+                            (template) => template.id.toString() === selected,
+                        );
+
+                        mutation.mutate(template);
+                    }}
+                    disabled={mutation.isLoading}
+                >
+                    Delete
+                </button>
+            </div>
+        </Modal>
+    );
+};