Improvements to settings pages (#141)

Co-authored-by: Oscar Eriksson <[email protected]>
cthit · Nov 4, 2024 · 2144b51 · 2144b51
1 parent 8d245dd
commit 2144b51
Show file tree

Hide file tree

Showing 29 changed files with 878 additions and 388 deletions.
diff --git a/src/app/[locale]/settings/group-types/AddTypeForm.tsx b/src/app/[locale]/settings/group-types/AddTypeForm.tsx
@@ -2,17 +2,20 @@
 
 import { createType } from '@/actions/groupTypes';
 import ActionButton from '@/components/ActionButton/ActionButton';
+import TextArea from '@/components/TextArea/TextArea';
+import i18nService from '@/services/i18nService';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { toast } from 'react-toastify';
 
-const AddTypeForm = () => {
+const AddTypeForm = ({ locale }: { locale: string }) => {
   const router = useRouter();
   const [priority, setPriority] = useState('0');
   const [nameSv, setNameSv] = useState('');
   const [nameEn, setNameEn] = useState('');
+  const l = i18nService.getLocale(locale);
 
-  const handleSubmit = async (e: any) => {
+  const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
 
     await toast
@@ -25,25 +28,37 @@ const AddTypeForm = () => {
   };
 
   return (
-    <>
-      <h3>Lägg till typ</h3>
-      <form onSubmit={handleSubmit}>
-        <label>Namn (en)</label>
-        <input value={nameEn} onChange={(e) => setNameEn(e.target.value)} />
-        <br />
-        <label>Namn (sv)</label>
-        <input value={nameSv} onChange={(e) => setNameSv(e.target.value)} />
-        <br />
-        <label>Prioritet</label>
-        <input
-          type="number"
-          value={priority}
-          onChange={(e) => setPriority(e.target.value)}
-        />
-        <br />
-        <ActionButton type="submit">Skapa</ActionButton>
-      </form>
-    </>
+    <tr>
+      <td />
+      <td>
+        <form onSubmit={handleSubmit}>
+          <TextArea
+            value={nameEn}
+            onChange={(e) => setNameEn(e.target.value)}
+          />
+        </form>
+      </td>
+      <td>
+        <form onSubmit={handleSubmit}>
+          <TextArea
+            value={nameSv}
+            onChange={(e) => setNameSv(e.target.value)}
+          />
+        </form>
+      </td>
+      <td>
+        <form onSubmit={handleSubmit}>
+          <TextArea
+            type="number"
+            value={priority}
+            onChange={(e) => setPriority(e.target.value)}
+          />
+        </form>
+      </td>
+      <td>
+        <ActionButton onClick={handleSubmit}>{l.general.add}</ActionButton>
+      </td>
+    </tr>
   );
 };
 

diff --git a/src/app/[locale]/settings/group-types/EditTypeForm.tsx b/src/app/[locale]/settings/group-types/EditTypeForm.tsx
@@ -2,7 +2,9 @@
 
 import { editType } from '@/actions/groupTypes';
 import ActionButton from '@/components/ActionButton/ActionButton';
+import TextArea from '@/components/TextArea/TextArea';
 import DivisionGroupService from '@/services/divisionGroupService';
+import i18nService from '@/services/i18nService';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { toast } from 'react-toastify';
@@ -11,18 +13,21 @@ type ArrayElement<ArrayType extends readonly unknown[]> =
   ArrayType extends readonly (infer ElementType)[] ? ElementType : never;
 
 const EditTypeForm = ({
-  type
+  type,
+  locale
 }: {
   type: ArrayElement<
     Awaited<ReturnType<typeof DivisionGroupService.getGroupTypes>>
   >;
+  locale: string;
 }) => {
   const router = useRouter();
   const [priority, setPriority] = useState(type.priority.toString());
   const [nameSv, setNameSv] = useState(type.nameSv);
   const [nameEn, setNameEn] = useState(type.nameEn);
+  const l = i18nService.getLocale(locale);
 
-  const handleSubmit = async (e: any) => {
+  const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
 
     await toast
@@ -35,22 +40,37 @@ const EditTypeForm = ({
   };
 
   return (
-    <form onSubmit={handleSubmit}>
-      <label>Namn (en)</label>
-      <input value={nameEn} onChange={(e) => setNameEn(e.target.value)} />
-      <br />
-      <label>Namn (sv)</label>
-      <input value={nameSv} onChange={(e) => setNameSv(e.target.value)} />
-      <br />
-      <label>Prioritet</label>
-      <input
-        type="number"
-        value={priority}
-        onChange={(e) => setPriority(e.target.value)}
-      />
-      <br />
-      <ActionButton type="submit">Spara</ActionButton>
-    </form>
+    <tr>
+      <td>{type.id}</td>
+      <td>
+        <form onSubmit={handleSubmit}>
+          <TextArea
+            value={nameEn}
+            onChange={(e) => setNameEn(e.target.value)}
+          />
+        </form>
+      </td>
+      <td>
+        <form onSubmit={handleSubmit}>
+          <TextArea
+            value={nameSv}
+            onChange={(e) => setNameSv(e.target.value)}
+          />
+        </form>
+      </td>
+      <td>
+        <form onSubmit={handleSubmit}>
+          <TextArea
+            type="number"
+            value={priority}
+            onChange={(e) => setPriority(e.target.value)}
+          />
+        </form>
+      </td>
+      <td>
+        <ActionButton onClick={handleSubmit}>{l.general.save}</ActionButton>
+      </td>
+    </tr>
   );
 };
 

diff --git a/src/app/[locale]/settings/group-types/page.tsx b/src/app/[locale]/settings/group-types/page.tsx
@@ -1,29 +1,41 @@
 import DivisionGroupService from '@/services/divisionGroupService';
 import AddTypeForm from './AddTypeForm';
-import Divider from '@/components/Divider/Divider';
 import EditTypeForm from './EditTypeForm';
+import i18nService from '@/services/i18nService';
+import Table from '@/components/Table/Table';
 
-export default async function Page() {
+export default async function Page({
+  params: { locale }
+}: {
+  params: { locale: string };
+}) {
   const types = await DivisionGroupService.getGroupTypes();
   types.pop();
+  const l = i18nService.getLocale(locale);
 
   return (
     <main>
-      <title>Kontrollpanel - Grupptyper</title>
-      <h1>Grupptyper</h1>
-      <ul>
-        {types.map((type) => (
-          <li key={type.id}>
-            ID {type.id}
-            <EditTypeForm type={type} />
-          </li>
-        ))}
-      </ul>
-
-      <Divider />
-
-      <h1>Lägg till grupptyp</h1>
-      <AddTypeForm />
+      <title>
+        {l.settings.common.controlPanel + ' - ' + l.settings.groupTypes.name}
+      </title>
+      <h1>{l.settings.groupTypes.name}</h1>
+      <Table>
+        <thead>
+          <tr>
+            <th>ID</th>
+            <th>{l.settings.common.nameEn}</th>
+            <th>{l.settings.common.nameSv}</th>
+            <th>{l.settings.common.priority}</th>
+            <th>{l.settings.common.actions}</th>
+          </tr>
+        </thead>
+        <tbody>
+          {types.map((type) => (
+            <EditTypeForm key={type.id} type={type} locale={locale} />
+          ))}
+          <AddTypeForm locale={locale} />
+        </tbody>
+      </Table>
     </main>
   );
 }
diff --git a/src/app/[locale]/settings/groups/AddGroupForm.tsx b/src/app/[locale]/settings/groups/AddGroupForm.tsx
@@ -7,9 +7,17 @@ import ActionButton from '@/components/ActionButton/ActionButton';
 import { useRouter } from 'next/navigation';
 import DropdownList from '@/components/DropdownList/DropdownList';
 import { toast } from 'react-toastify';
+import i18nService from '@/services/i18nService';
 
-const AddGroupForm = ({ gammaGroups }: { gammaGroups: GammaSuperGroup[] }) => {
+const AddGroupForm = ({
+  gammaGroups,
+  locale
+}: {
+  gammaGroups: GammaSuperGroup[];
+  locale: string;
+}) => {
   const router = useRouter();
+  const l = i18nService.getLocale(locale);
   const [newGroup, setNewGroup] = useState('');
 
   async function importGroup() {
@@ -27,21 +35,30 @@ const AddGroupForm = ({ gammaGroups }: { gammaGroups: GammaSuperGroup[] }) => {
   }
 
   return (
-    <>
-      <DropdownList onChange={(e) => setNewGroup(e.target.value)}>
-        <option value={undefined} hidden>
-          Select a group
-        </option>
-        {gammaGroups
-          .filter((g) => g.type !== 'ALUMNI')
-          .map((group) => (
-            <option key={group.id} value={group.id}>
-              {group.prettyName}
-            </option>
-          ))}
-      </DropdownList>
-      <ActionButton onClick={importGroup}>Lägg till</ActionButton>
-    </>
+    <tr>
+      <td />
+      <td>
+        <DropdownList onChange={(e) => setNewGroup(e.target.value)}>
+          <option value={undefined} hidden>
+            {l.settings.groups.select}
+          </option>
+          {gammaGroups
+            .filter((g) => g.type !== 'ALUMNI')
+            .map((group) => (
+              <option key={group.id} value={group.id}>
+                {group.prettyName}
+              </option>
+            ))}
+        </DropdownList>
+      </td>
+      <td />
+      <td />
+      <td>
+        <ActionButton onClick={importGroup}>
+          {l.settings.groups.import}
+        </ActionButton>
+      </td>
+    </tr>
   );
 };