Update ticket status

src/chat-api/services/ModerationService.ts

@@ -34,6 +34,18 @@ export const getModerationTicket = async (id: string) => {
   return data;
 };
 
+
+export const updateModerationTicket = async (id: string, status: TicketStatus) => {
+  const data = await request<RawTicket>({
+    method: 'POST',
+    url: env.SERVER_URL + `/api/moderation/tickets/${id}`,
+    body: {status},
+    useToken: true,
+  });
+  return data;
+}
+
+
 export const getServers = async (limit: number, afterId?: string) => {
   const data = await request<any[]>({
     method: 'GET',

src/chat-api/services/TicketService.ts.ts

@@ -1,6 +1,6 @@
 import { request } from "./Request";
 import ServiceEndpoints from "./ServiceEndpoints";
-import { RawChannel, RawChannelNotice, RawTicket, TicketCategory } from "../RawData";
+import { RawChannel, RawChannelNotice, RawTicket, TicketCategory, TicketStatus } from "../RawData";
 import env from "@/common/env";
 
 export const getTickets = async () => {
@@ -35,4 +35,14 @@ export const createTicket = async (opts: CreateTicketOpts) => {
     useToken: true,
   });
   return data;
+}
+
+export const updateTicket = async (ticketId: string, status: TicketStatus) => {
+  const data = await request<RawTicket>({
+    method: 'POST',
+    url: env.SERVER_URL + "/api" + ServiceEndpoints.tickets(ticketId),
+    body: {status},
+    useToken: true,
+  });
+  return data;
 }

src/components/moderation-pane/TicketsPage.tsx

@@ -0,0 +1,71 @@
+import { USER_BADGES, addBit, hasBit, removeBit } from "@/chat-api/Bitwise";
+import {
+  ModerationUser,
+  getTickets,
+  getUser,
+  getUsersWithSameIPAddress,
+  updateUser,
+} from "@/chat-api/services/ModerationService";
+import { createUpdatedSignal } from "@/common/createUpdatedSignal";
+import { useWindowProperties } from "@/common/useWindowProperties";
+import { A, useParams } from "@solidjs/router";
+import { For, Show, createEffect, createSignal, on, onMount } from "solid-js";
+import { css, styled } from "solid-styled-components";
+import { FlexColumn, FlexRow } from "../ui/Flexbox";
+import { Banner } from "../ui/Banner";
+import Avatar from "../ui/Avatar";
+import RouterEndpoints from "@/common/RouterEndpoints";
+import { bannerUrl } from "@/chat-api/store/useUsers";
+import Breadcrumb, { BreadcrumbItem } from "../ui/Breadcrumb";
+import SettingsBlock from "../ui/settings-block/SettingsBlock";
+import Input from "../ui/input/Input";
+import Checkbox from "../ui/Checkbox";
+import { formatTimestamp } from "@/common/date";
+import UnsuspendUsersModal from "./UnsuspendUsersModal";
+import SuspendUsersModal from "./SuspendUsersModal";
+import { useCustomPortal } from "../ui/custom-portal/CustomPortal";
+import Button from "../ui/Button";
+import env from "@/common/env";
+import Text from "../ui/Text";
+import { RawServer, RawTicket, RawUser } from "@/chat-api/RawData";
+import { Server, User } from "./ModerationPane";
+import { t } from "i18next";
+import { TicketItem } from "../tickets/TicketsPage";
+
+const PageContainer = styled(FlexColumn)`
+  height: 100%;
+  width: 100%;
+  max-width: 900px;
+  align-self: center;
+  margin-top: 80px;
+`;
+
+const TicketListContainer = styled(FlexColumn)`
+  padding: 10px;
+  gap: 8px;
+`;
+
+export default function TicketsPage() {
+  const [tickets, setTickets] = createSignal<RawTicket[]>([]);
+
+  onMount(async () => {
+    const tickets = await getTickets({ limit: 30 });
+    setTickets(tickets);
+  });
+
+  return (
+    <PageContainer>
+      <div class={css`margin-left: 10px; margin-right: 10px;`}>
+        <Breadcrumb>
+          <BreadcrumbItem href={"../"} icon='home' title="Moderation" />
+          <BreadcrumbItem title={t("settings.drawer.tickets")!} />
+        </Breadcrumb>
+      </div>
+      <TicketListContainer>
+        <For each={tickets()}>
+          {(ticket) => <TicketItem as="mod" ticket={ticket} />}
+        </For>
+      </TicketListContainer>
+    </PageContainer>
+  );
+}

src/components/settings/TicketSettings.tsx

@@ -34,7 +34,7 @@ import {
   TicketCategory,
   TicketStatus,
 } from "@/chat-api/RawData";
-import { getTicket, getTickets } from "@/chat-api/services/TicketService.ts";
+import { getTicket, getTickets, updateTicket } from "@/chat-api/services/TicketService.ts";
 import { formatTimestamp } from "@/common/date";
 import { useWindowProperties } from "@/common/useWindowProperties";
 import { A, Route, Router, Routes, useMatch, useParams } from "@solidjs/router";
@@ -45,7 +45,7 @@ import { Markup } from "../Markup";
 import RouterEndpoints from "@/common/RouterEndpoints";
 import Input from "../ui/input/Input";
 import Button from "../ui/Button";
-import { getModerationTicket } from "@/chat-api/services/ModerationService";
+import { getModerationTicket, updateModerationTicket } from "@/chat-api/services/ModerationService";
 import TicketsPage, {
   TicketItem,
   TicketStatusToName,
@@ -127,6 +127,7 @@ export const TicketPage = () => {
         />
         <MessageLogs messages={messages()} />
         <MessageInputArea
+          updateTicket={setTicket}
           channelId={ticket()!.channelId}
           setMessages={setMessages}
           messages={messages()}
@@ -168,13 +169,25 @@ const MessageInputArea = (props: {
   channelId: string;
   messages: RawMessage[];
   setMessages: Setter<RawMessage[]>;
+  updateTicket(ticket: RawTicket): void;
 }) => {
+  const params = useParams<{id: string}>();
   const [selectedStatus, setSelectedStatus] = createSignal<TicketStatus | undefined>(undefined);
 
   const [value, setValue] = createSignal("");
 
+
+
+  const isModeration = useMatch(() => "/app/moderation/*");
+
   const sendClick = async () => {
-    console.log(selectedStatus())
+
+    const status = selectedStatus();
+    if (status === undefined && isModeration()) {
+      alert("You must select a status.");
+      return;
+    }
+
     const formattedValue = value().trim();
     setValue("");
     if (!formattedValue) return;
@@ -187,10 +200,19 @@ const MessageInputArea = (props: {
     });
     if (!message) return;
 
+    const ticket = await (isModeration() ? updateModerationTicket : updateTicket)(params.id, status || TicketStatus.WAITING_FOR_MODERATOR_RESPONSE).catch((err) => {
+      alert(err.message);
+    });
+
+    if (ticket) {
+      props.updateTicket(ticket);
+    }
+
+    setSelectedStatus(undefined);
+
     props.setMessages([...props.messages, message]);
   };
 
-  const isModeration = useMatch(() => "/app/moderation/*");
 
   return (
     <FlexColumn gap={4}>