feat: table status friendly name

src/components/InfiniteLoad/ExerciseRow.tsx

@@ -9,6 +9,7 @@ import { CategoryDifficulties } from "../CategoryDifficulties";
 import { KaTeX } from "../Katex";
 import { StyledTableRow } from "@/components/StyledTableRow.tsx";
 import dayjs from "dayjs";
+import { exerciseStatusToHuman } from "@/util/const.ts";
 
 const ExerciseRow: FC<{ data: ExerciseListElemFragment }> = ({ data }) => {
   const navigate = useNavigate();
@@ -37,7 +38,13 @@ const ExerciseRow: FC<{ data: ExerciseListElemFragment }> = ({ data }) => {
       <TableCell sx={{ minWidth: 210 }}>
         <CategoryDifficulties value={difficulties} />
       </TableCell>
-      <TableCell sx={{ verticalAlign: "middle" }}>{data.status}</TableCell>
+      <TableCell sx={{ verticalAlign: "middle" }}>
+        <Chip
+          variant="outlined"
+          color={exerciseStatusToHuman[data.status].color}
+          label={exerciseStatusToHuman[data.status].text}
+        />
+      </TableCell>
       <TableCell>
         {data.tags.map((tag, index) => (
           <Chip key={index} label={tag.name} sx={{ margin: 0.5 }} />

src/util/const.ts

@@ -2,6 +2,7 @@ import {
   Exercise,
   ExerciseAgeGroup,
   ExerciseCheckType,
+  ExerciseStatus,
 } from "@/generated/graphql";
 import { ExerciseFieldsType, ExerciseQuery } from "./types";
 
@@ -114,3 +115,35 @@ export const createExerciseInitialValue: ExerciseFieldsType = {
   tags: [],
   sameLogicGroup: "",
 };
+
+export const exerciseStatusToHuman: Record<
+  ExerciseStatus,
+  {
+    color:
+      | "primary"
+      | "default"
+      | "secondary"
+      | "error"
+      | "info"
+      | "success"
+      | "warning";
+    text: string;
+  }
+> = {
+  APPROVED: {
+    color: "success",
+    text: "Kész",
+  },
+  CREATED: {
+    color: "default",
+    text: "Beküldve",
+  },
+  DELETED: {
+    color: "error",
+    text: "Törölve",
+  },
+  DRAFT: {
+    color: "warning",
+    text: "Vázlat",
+  },
+};