69 lines
2.5 KiB
TypeScript
69 lines
2.5 KiB
TypeScript
|
/* Copyright (C) 2024 Manuel Bustillo*/
|
||
|
|
|
||
|
|
'use client';
|
||
|
|
|
||
|
|
import { Affinities } from '@/app/lib/affinities';
|
||
|
|
import { Group } from '@/app/lib/group';
|
||
|
|
import { getCsrfToken, getSlug } from '@/app/lib/utils';
|
||
|
|
import { classNames } from '@/app/ui/components/button';
|
||
|
|
import { Dialog } from 'primereact/dialog';
|
||
|
|
import { useEffect, useState } from 'react';
|
||
|
|
import AffinitySlider from './form/affinitySlider';
|
||
|
|
|
||
|
|
export default function AffinitiesFormDialog({ groups, group, visible, onHide }: {
|
||
|
|
groups: Group[],
|
||
|
|
group?: Group,
|
||
|
|
visible: boolean,
|
||
|
|
onHide: () => void,
|
||
|
|
}) {
|
||
|
|
const [affinities, setAffinities] = useState<Affinities>({});
|
||
|
|
const [isLoadingAffinities, setIsLoadingAffinities] = useState(true);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
setIsLoadingAffinities(true);
|
||
|
|
if (group?.id === undefined) {
|
||
|
|
setAffinities({});
|
||
|
|
setIsLoadingAffinities(false)
|
||
|
|
} else {
|
||
|
|
fetch(`/api/${getSlug()}/groups/${group?.id}/affinities`)
|
||
|
|
.then((response) => response.json())
|
||
|
|
.then((data) => {
|
||
|
|
setAffinities(data);
|
||
|
|
setIsLoadingAffinities(false)
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}, [group]);
|
||
|
|
|
||
|
|
function submitAffinities() {
|
||
|
|
const formattedAffinities = Object.entries(affinities).map(([groupId, affinity]) => ({ group_id: groupId, affinity: affinity }));
|
||
|
|
fetch(`/api/${getSlug()}/groups/${group?.id}/affinities/bulk_update`, {
|
||
|
|
method: 'PUT',
|
||
|
|
headers: {
|
||
|
|
'Content-Type': 'application/json',
|
||
|
|
'X-CSRF-TOKEN': getCsrfToken(),
|
||
|
|
},
|
||
|
|
body: JSON.stringify({ affinities: formattedAffinities })
|
||
|
|
}).then(() => {
|
||
|
|
onHide();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Dialog header="Update affinities" visible={visible} style={{ width: '60vw' }} onHide={onHide}>
|
||
|
|
{!isLoadingAffinities && <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.filter((currentGroup) => currentGroup.id !== group?.id).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 value={group.id && affinities[group.id] || 1} onChange={(value) => setAffinities({ ...affinities, [group.id || "default"]: value })} />
|
||
|
|
</div>)
|
||
|
|
}
|
||
|
|
|
||
|
|
<button className={classNames('primary')} onClick={submitAffinities} >Update</button>
|
||
|
|
</div>
|
||
|
|
}
|
||
|
|
</Dialog>
|
||
|
|
);
|
||
|
|
}
|