Initial approach to configure affinities between groups

app/lib/affinities.tsx

@@ -0,0 +1,3 @@
+export class Affinities {
+  [key:string]: number;
+}

app/ui/components/form/affinitySlider.tsx

@@ -0,0 +1,34 @@
+import { Slider } from 'primereact/slider';
+import React, { useEffect, useState } from 'react';
+
+export default function AffinitySlider({ initialValue, onChange }: { initialValue: number, onChange?: (value: number) => void }) {
+  const [value, setValue] = useState(initialValue);
+  useEffect(() => {setValue(initialValue)}, [initialValue]);
+
+  const label = (value: number) => {
+    if (value < 0.2) {
+      return 'Nemesis';
+    } else if (value < 0.5) {
+      return 'Enemies';
+    } else if (value < 0.9) {
+      return 'Bad vibes';
+    } else if (value < 1.1) {
+      return 'Neutral';
+    } else if (value < 1.5) {
+      return 'Good vibes';
+    } else if (value < 1.8) {
+      return 'Good friends';
+    } else {
+      return 'Besties';
+    }
+  }
+
+  return (
+    <>
+      <Slider value={value} min={0} max={2} step={.1} onChange={(e) =>setValue(e.value)} className='w-80 bg-gray-400' />
+      <span className="px-4 w-1/5">
+        { label(value) }
+      </span>
+    </>
+  )
+}

app/ui/components/group-form-dialog.tsx

@@ -2,18 +2,20 @@
 
 'use client';
 
+import { AbstractApi } from '@/app/api/abstract-api';
+import { Group, GroupSerializer } from '@/app/lib/group';
 import { classNames } from '@/app/ui/components/button';
-import { Dialog } from 'primereact/dialog';
 import { ColorPicker } from 'primereact/colorpicker';
+import { Dialog } from 'primereact/dialog';
 import { Dropdown } from 'primereact/dropdown';
 import { FloatLabel } from 'primereact/floatlabel';
 import { InputText } from 'primereact/inputtext';
-import { useState } from 'react';
-import { Group, GroupSerializer } from '@/app/lib/group';
-import { ApiError } from 'next/dist/server/api-utils';
-import { AbstractApi } from '@/app/api/abstract-api';
+import { useEffect, useState } from 'react';
+import AffinitySlider from './form/affinitySlider';
+import { Affinities } from '@/app/lib/affinities';
+import { getSlug } from '@/app/lib/utils';
 
-export default function GroupFormDialog({groups, onCreate, onHide, group, visible }: {
+export default function GroupFormDialog({ groups, onCreate, onHide, group, visible }: {
   groups: Group[],
   onCreate?: () => void,
   onHide: () => void,
@@ -25,6 +27,19 @@ export default function GroupFormDialog({groups, onCreate, onHide, group, visibl
   const [icon, setIcon] = useState(group?.icon || '');
   const [color, setColor] = useState<string>(group?.color || '');
   const [parentId, setParentId] = useState(group?.parentId || '');
+  const [affinities, setAffinities] = useState<Affinities>({});
+
+  useEffect(() => {
+    if (group?.id === undefined) {
+      setAffinities({});
+    } else {
+      fetch(`/api/${getSlug()}/groups/${group?.id}/affinities`)
+        .then((response) => response.json())
+        .then((data) => {
+          setAffinities(data);
+        });
+    }
+  }, []);
 
   const api = new AbstractApi<Group>();
   const serializer = new GroupSerializer();
@@ -90,6 +105,18 @@ export default function GroupFormDialog({groups, onCreate, onHide, group, visibl
             {group?.id !== undefined ? 'Update' : 'Create'}
           </button>
         </div>
+
+        <div className="card justify-evenly py-5 bg-gray-200 flex flex-col">
+          <span className="text-center p-4">Describe the affinity with the rest of the groups</span>
+
+          {
+            groups.map((group) =>
+              <div key={group.id} className="flex flex-row hover:bg-gray-300 px-3 py-2 items-center">
+                <span className="w-1/3 text-right px-4">{group.name}</span>
+                <AffinitySlider initialValue={group.id && affinities[group.id] || 2} />
+              </div>)
+          }
+        </div>
       </Dialog>
     </>
   );

app/ui/groups/table.tsx

@@ -2,13 +2,12 @@
 
 'use client';
 
-import { Group, GroupSerializer } from '@/app/lib/group';
-import TableOfContents from '../components/table-of-contents';
-import { MapPinIcon, PencilIcon, TrashIcon } from '@heroicons/react/24/outline';
 import { AbstractApi } from '@/app/api/abstract-api';
-import { TreeTable } from 'primereact/treetable';
+import { Group, GroupSerializer } from '@/app/lib/group';
+import { PencilIcon, TrashIcon } from '@heroicons/react/24/outline';
 import { Column } from 'primereact/column';
 import { TreeNode } from 'primereact/treenode';
+import { TreeTable } from 'primereact/treetable';
 
 export default function GroupsTable({ groups, onUpdate, onEdit }: {
   groups: Group[],