Small Optimization

.gitignore

@@ -16,6 +16,7 @@
 .env.development.local
 .env.test.local
 .env.production.local
+a.json
 
 *.log*
 npm-debug.log*

CHANGELOG.md

@@ -12,6 +12,10 @@
 
 ## Neste versjon
 
+## Versjon 2024.22.10
+
+- ✨ **Gruppe**. HS kan nå opprette grupper.
+
 ## Versjon 2024.15.10
 
 - ✨ **Betalinger**. Man kan nå se hvem på deltagerlisten som har betalt for arrangementet.

src/AppRoutes.tsx

@@ -38,6 +38,7 @@ const BadgesCategoryLeaderboard = lazy(() => import('pages/Badges/category/Badge
 const Cheatsheet = lazy(() => import('pages/Cheatsheet'));
 const EventAdministration = lazy(() => import('pages/EventAdministration'));
 const EventRegistration = lazy(() => import('pages/EventRegistration'));
+const NewGroupAdministration = lazy(() => import('pages/NewGroupAdministration'));
 const ForgotPassword = lazy(() => import('pages/ForgotPassword'));
 const Form = lazy(() => import('pages/Form'));
 const FormAdmin = lazy(() => import('pages/Form/FormAdmin'));
@@ -154,10 +155,11 @@ const AppRoutes = () => {
         <Route element={<AuthRoute element={<ShortLinks />} />} path={URLS.shortLinks} />
         <Route element={<AuthRoute element={<QRCodes />} />} path={URLS.qrCodes} />
         <Route element={<AuthRoute element={<Admissions />} />} path={URLS.admissions} />
-
         <Route element={<AuthRoute apps={[PermissionApp.BANNERS]} element={<InfoBannerAdmin />} />} path={URLS.bannerAdmin}>
           <Route element={<InfoBannerAdmin />} />
         </Route>
+        <Route element={<AuthRoute apps={[PermissionApp.GROUP]} element={<NewGroupAdministration />} />} path={URLS.newGroupAdmin} />
+
         <Route element={<AuthRoute apps={[PermissionApp.JOBPOST]} element={<JobPostAdministration />} />} path={URLS.jobpostsAdmin}>
           <Route element={<JobPostAdministration />} path=':jobPostId/' />
         </Route>

src/URLS.tsx

@@ -57,6 +57,7 @@ const URLS = {
   qrCodes: '/qr-koder/',
   gallery: '/galleri/',
   userAdmin: '/admin/brukere/',
+  newGroupAdmin: '/admin/ny-gruppe/',
   strikeAdmin: '/admin/prikker/',
   eventAdmin: '/admin/arrangementer/',
   jobpostsAdmin: '/admin/karriere/',

src/api/api.tsx

@@ -340,6 +340,7 @@ export default {
   getGroup: (slug: Group['slug']) => IFetch<Group>({ method: 'GET', url: `${GROUPS_ENDPOINT}/${slug}/` }),
   getGroupStatistics: (slug: Group['slug']) => IFetch<GroupMemberStatistics>({ method: 'GET', url: `${GROUPS_ENDPOINT}/${slug}/statistics/` }),
   updateGroup: (slug: Group['slug'], data: GroupMutate) => IFetch<Group>({ method: 'PUT', url: `${GROUPS_ENDPOINT}/${slug}/`, data }),
+  createGroup: (data: GroupMutate) => IFetch<Group>({ method: 'POST', url: `${GROUPS_ENDPOINT}/`, data }),
 
   // Group laws
   getGroupLaws: (groupSlug: Group['slug']) => IFetch<Array<GroupLaw>>({ method: 'GET', url: `${GROUPS_ENDPOINT}/${groupSlug}/${GROUP_LAWS_ENDPOINT}/` }),

src/hooks/Group.tsx

@@ -4,6 +4,7 @@ import { QueryKey, useInfiniteQuery, UseInfiniteQueryOptions, useMutation, UseMu
 
 import {
   Group,
+  GroupCreate,
   GroupFine,
   GroupFineBatchMutate,
   GroupFineCreate,
@@ -224,3 +225,14 @@ export const useGroupForms = (groupSlug: string, enabled?: boolean) =>
 
 export const useGroupStatistics = (groupSlug: string) =>
   useQuery<GroupMemberStatistics, RequestResponse>(GROUPS_QUERY_KEYS.statistics(groupSlug), () => API.getGroupStatistics(groupSlug));
+
+export const useCreateGroup = (): UseMutationResult<Group, RequestResponse, GroupCreate, unknown> => {
+  const queryClient = useQueryClient();
+
+  return useMutation((group) => API.createGroup(group), {
+    onSuccess: (data) => {
+      queryClient.invalidateQueries(GROUPS_QUERY_KEYS.all);
+      queryClient.setQueryData(GROUPS_QUERY_KEYS.detail(data.slug), data);
+    },
+  });
+};

src/pages/NewGroupAdministration/index.tsx

@@ -0,0 +1,95 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import { z } from 'zod';
+
+import { GroupCreate } from 'types';
+import { GroupType } from 'types/Enums';
+
+import { useCreateGroup } from 'hooks/Group';
+
+import FormInput from 'components/inputs/Input';
+import { FormSelect } from 'components/inputs/Select';
+import { Button } from 'components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from 'components/ui/card';
+import { Form } from 'components/ui/form';
+
+const schema = z.object({
+  name: z.string({ message: 'Gruppenavn er påkrevd' }),
+  slug: z.string({ message: 'Gruppeslug er påkrevd' }),
+  type: z.nativeEnum(GroupType, { message: 'Gruppetype er påkrevd' }),
+});
+
+export default function NewGroupAdministration() {
+  const createGroup = useCreateGroup();
+
+  const form = useForm<z.infer<typeof schema>>({
+    resolver: zodResolver(schema),
+    defaultValues: { name: '', slug: '', type: GroupType.BOARD },
+  });
+
+  const onSubmit = (values: z.infer<typeof schema>) => {
+    const data: GroupCreate = {
+      name: values.name,
+      slug: values.slug.toLowerCase(),
+      type: values.type,
+    };
+
+    createGroup.mutate(data, {
+      onSuccess: () => {
+        toast.success('Gruppen ble opprettet');
+        form.reset();
+      },
+      onError: (e) => {
+        Object.keys(e.detail).forEach((key: string) => {
+          if (key in data) {
+            const errorKey = key as keyof GroupCreate;
+            const errorMessage = (e.detail as unknown as Record<string, any>)[key];
+            form.setError(errorKey, { message: errorMessage });
+          }
+        });
+        toast.error('Det er en eller flere feil i skjemaet');
+      },
+    });
+  };
+
+  return (
+    <div className='max-w-5xl mx-auto pt-24 px-2'>
+      <Card>
+        <CardHeader>
+          <CardTitle>Opprett ny gruppe</CardTitle>
+          <CardDescription>Velg gruppetype og opprett en ny gruppe.</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Form {...form}>
+            <form className='space-y-4' onSubmit={form.handleSubmit(onSubmit)}>
+              <FormInput form={form} label='Gruppenavn' name='name' required />
+              <FormInput
+                description='En slug er en kort tekststreng som brukes i URL-adresser for å identifisere en spesifikk ressurs på en webside'
+                form={form}
+                label='Slug'
+                name='slug'
+                required
+              />
+              <FormSelect
+                form={form}
+                label='Gruppetype'
+                name='type'
+                options={[
+                  { value: GroupType.BOARD, label: 'Styre' },
+                  { value: GroupType.SUBGROUP, label: 'Undergruppe' },
+                  { value: GroupType.COMMITTEE, label: 'Komité' },
+                  { value: GroupType.INTERESTGROUP, label: 'Interessegruppe' },
+                ]}
+                required
+              />
+              <Button type='submit' variant='default'>
+                Opprett Gruppe
+              </Button>
+            </form>
+          </Form>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

src/pages/Profile/components/ProfileAdmin.tsx

@@ -1,4 +1,4 @@
-import { Boxes, BriefcaseBusiness, Calendar, ChevronRightIcon, Grip, Info, LucideIcon, Newspaper, Users } from 'lucide-react';
+import { Boxes, BriefcaseBusiness, Calendar, ChevronRightIcon, Grip, Info, LucideIcon, Newspaper, Plus, Users } from 'lucide-react';
 import { Link } from 'react-router-dom';
 import URLS from 'URLS';
 
@@ -86,6 +86,13 @@ const Admin = () => {
       primary: 'Bannere',
       secondary: 'Opprett, endre og slett bannere',
     },
+    {
+      apps: [PermissionApp.GROUP],
+      icon: Plus,
+      to: URLS.newGroupAdmin,
+      primary: 'Ny gruppe',
+      secondary: 'Legg til en ny gruppe',
+    },
   ];
 
   return (

src/types/Group.tsx

@@ -49,6 +49,12 @@ export type GroupMutate = Partial<Omit<Group, 'fines_admin' | 'permissions' | 't
     fines_admin?: string | null;
   };
 
+export type GroupCreate = {
+  name: string;
+  slug: string;
+  type: GroupType;
+};
+
 export type Membership = {
   user: UserBase | UserList;
   membership_type: MembershipType;