[Promises, Part 1] TGUI Admin tickets

code/modules/admin/verbs/adminhelp.dm

@@ -442,8 +442,12 @@ var/global/datum/admin_help_tickets/ahelp_tickets
 	)
 	AddInteraction("[key_name_admin(usr)] рассматривает данный тикет.")
 
-//Show the ticket panel
+
 /datum/admin_help/proc/TicketPanel()
+	tgui_interact(usr.client.mob)
+
+//Show the ticket panel
+/datum/admin_help/proc/TicketPanelLegacy()
 	var/list/dat = list("<title>Ticket #[id]</title>")
 	var/ref_src = "\ref[src]"
 	dat += "<h4>Admin Help Ticket #[id]: [LinkedReplyName(ref_src)]</h4>"
@@ -501,6 +505,64 @@ var/global/datum/admin_help_tickets/ahelp_tickets
 		log_admin_private(msg)
 	TicketPanel()	//we have to be here to do this
 
+//tgui
+/datum/admin_help/tgui_assets(payload)
+	if(..())
+		return
+
+	TicketPanelLegacy()
+
+/datum/admin_help/tgui_interact(mob/user, datum/tgui/ui)
+	ui = SStgui.try_update_ui(user, src, ui)
+	if(!ui)
+		ui = new(user, src, "AdminTicketPanel", "Ticket #[id] - [LinkedReplyName("\ref[src]")]")
+		ui.open()
+
+/datum/admin_help/tgui_state(mob/user)
+	return global.admin_state
+
+/datum/admin_help/tgui_data(mob/user)
+	var/list/data = list()
+
+	data["id"] = id
+
+	var/ref_src = "\ref[src]"
+	data["title"] = name
+	data["name"] = LinkedReplyName(ref_src)
+
+	switch(state)
+		if(AHELP_ACTIVE)
+			data["state"] = "open"
+		if(AHELP_RESOLVED)
+			data["state"] = "resolved"
+		if(AHELP_CLOSED)
+			data["state"] = "closed"
+		else
+			data["state"] = "unknown"
+
+	data["opened_at"] = (world.time - opened_at)
+	data["closed_at"] = (world.time - closed_at)
+	data["opened_at_date"] = time_stamp(wtime = opened_at)
+	data["closed_at_date"] = time_stamp(wtime = closed_at)
+
+	data["actions"] = FullMonty(ref_src)
+
+	data["log"] = _interactions
+
+	return data
+
+/datum/admin_help/tgui_act(action, params)
+	if(..())
+		return
+	. = TRUE
+	switch(action)
+		if("retitle")
+			Retitle()
+		if("reopen")
+			Reopen()
+		if("legacy")
+			TicketPanelLegacy()
+
 //Forwarded action from admin/Topic
 /datum/admin_help/proc/Action(action)
 	switch(action)

tgui/packages/tgui/interfaces/AdminTicketPanel.tsx

@@ -0,0 +1,84 @@
+/* eslint react/no-danger: "off" */
+import { useBackend } from '../backend';
+import { Box, Button, LabeledList, Section } from '../components';
+import { Window } from '../layouts';
+
+const State = {
+  open: 'Open',
+  resolved: 'Resolved',
+  closed: 'Closed',
+  unknown: 'Unknown',
+};
+
+type Data = {
+  id: number;
+  title: string;
+  name: string;
+  state: string;
+  opened_at: number;
+  closed_at: number;
+  opened_at_date: string;
+  closed_at_date: string;
+  actions: string;
+  log: string[];
+};
+
+export const AdminTicketPanel = (props, context) => {
+  const { act, data } = useBackend<Data>(context);
+  const {
+    id,
+    title,
+    name,
+    state,
+    opened_at,
+    closed_at,
+    opened_at_date,
+    closed_at_date,
+    actions,
+    log,
+  } = data;
+  return (
+    <Window width={900} height={600}>
+      <Window.Content scrollable>
+        <Section
+          title={'Ticket #' + id}
+          buttons={
+            <Box nowrap>
+              <Button icon="pen" onClick={() => act('retitle')}>
+                Rename Ticket
+              </Button>
+              <Button onClick={() => act('legacy')}>Legacy UI</Button>
+            </Box>
+          }
+        >
+          <LabeledList>
+            <LabeledList.Item label="Admin Help Ticket">
+              #{id}: <div dangerouslySetInnerHTML={{ __html: name }} />
+            </LabeledList.Item>
+            <LabeledList.Item label="State">{State[state]}</LabeledList.Item>
+            {State[state] === State.open ? (
+              <LabeledList.Item label="Opened At">
+                {opened_at_date} ({Math.round((opened_at / 600) * 10) / 10}{' '}
+                minutes ago.)
+              </LabeledList.Item>
+            ) : (
+              <LabeledList.Item label="Closed At">
+                {closed_at_date} ({Math.round((closed_at / 600) * 10) / 10}{' '}
+                minutes ago.){' '}
+                <Button onClick={() => act('reopen')}>Reopen</Button>
+              </LabeledList.Item>
+            )}
+            <LabeledList.Item label="Actions">
+              <div dangerouslySetInnerHTML={{ __html: actions }} />
+            </LabeledList.Item>
+            <LabeledList.Item label="Log">
+              {Object.keys(log).map((L, i) => (
+                <div key={i} dangerouslySetInnerHTML={{ __html: log[L] }} />
+              ))}
+            </LabeledList.Item>
+          </LabeledList>
+        </Section>
+      </Window.Content>
+    </Window>
+  );
+};