[000] implementing saving bommels. fix tests

hopps-app · Dec 16, 2024 · 34e0516 · 34e0516
1 parent 3cab15a
commit 34e0516
Show file tree

Hide file tree

Showing 14 changed files with 264 additions and 54 deletions.
diff --git a/frontend/spa/src/components/ OrganizationRegistrationSuccess/CheckmarkIcon.tsx b/frontend/spa/src/components/ OrganizationRegistrationSuccess/CheckmarkIcon.tsx
@@ -0,0 +1,65 @@
+import React from 'react';
+
+const CheckmarkIcon: React.FC = ({ className }: { className?: string }) => (
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        xmlnsXlink="http://www.w3.org/1999/xlink"
+        version="1.1"
+        width="256"
+        height="256"
+        viewBox="0 0 256 256"
+        xmlSpace="preserve"
+        className={className}
+    >
+        <defs />
+        <g
+            style={{
+                stroke: 'none',
+                strokeWidth: 0,
+                strokeDasharray: 'none',
+                strokeLinecap: 'butt',
+                strokeLinejoin: 'miter',
+                strokeMiterlimit: 10,
+                fill: 'none',
+                fillRule: 'nonzero',
+                opacity: 1,
+            }}
+            transform="translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)"
+        >
+            <path
+                d="M 43.121 62.779 c -0.046 0 -0.093 -0.001 -0.14 -0.002 c -1.375 -0.039 -2.672 -0.642 -3.588 -1.666 L 26.376 46.546 c -1.84 -2.059 -1.663 -5.22 0.396 -7.06 c 2.059 -1.842 5.22 -1.663 7.06 0.396 l 9.492 10.621 l 31.347 -31.346 c 1.951 -1.952 5.119 -1.952 7.07 0 c 1.953 1.953 1.953 5.119 0 7.071 L 46.656 61.314 C 45.717 62.254 44.445 62.779 43.121 62.779 z"
+                style={{
+                    stroke: 'none',
+                    strokeWidth: 1,
+                    strokeDasharray: 'none',
+                    strokeLinecap: 'butt',
+                    strokeLinejoin: 'miter',
+                    strokeMiterlimit: 10,
+                    fillRule: 'nonzero',
+                    opacity: 1,
+                }}
+                transform="matrix(1 0 0 1 0 0)"
+                strokeLinecap="round"
+                className="fill-primary"
+            />
+            <path
+                d="M 45 90 C 20.187 90 0 69.813 0 45 C 0 20.187 20.187 0 45 0 c 8.231 0 16.286 2.244 23.292 6.491 c 2.362 1.431 3.116 4.505 1.686 6.867 c -1.432 2.362 -4.506 3.117 -6.868 1.685 C 57.666 11.744 51.403 10 45 10 c -19.299 0 -35 15.701 -35 35 s 15.701 35 35 35 s 35 -15.701 35 -35 c 0 -1.487 -0.095 -2.987 -0.28 -4.458 c -0.348 -2.74 1.592 -5.242 4.332 -5.589 c 2.74 -0.349 5.241 1.593 5.588 4.332 C 89.879 41.172 90 43.094 90 45 C 90 69.813 69.813 90 45 90 z"
+                style={{
+                    stroke: 'none',
+                    strokeWidth: 1,
+                    strokeDasharray: 'none',
+                    strokeLinecap: 'butt',
+                    strokeLinejoin: 'miter',
+                    strokeMiterlimit: 10,
+                    fillRule: 'nonzero',
+                    opacity: 1,
+                }}
+                transform="matrix(1 0 0 1 0 0)"
+                strokeLinecap="round"
+                className="fill-primary"
+            />
+        </g>
+    </svg>
+);
+
+export default CheckmarkIcon;
diff --git a/...d/spa/src/components/ OrganizationRegistrationSuccess/OrganizationRegistrationSuccess.tsx b/...d/spa/src/components/ OrganizationRegistrationSuccess/OrganizationRegistrationSuccess.tsx
@@ -0,0 +1,26 @@
+import { useTranslation } from 'react-i18next';
+
+import authService from '@/services/auth/AuthService.ts';
+import Button from '@/components/ui/Button.tsx';
+import CheckmarkIcon from '@/components/ OrganizationRegistrationSuccess/CheckmarkIcon.tsx';
+
+export function OrganizationRegistrationSuccess() {
+    const { t } = useTranslation();
+
+    const onClickLogin = () => {
+        authService.login();
+    };
+
+    return (
+        <div>
+            <div className="flex justify-center">
+                <CheckmarkIcon />
+            </div>
+
+            <h1 className="mt-4 mb-6 text-center">Your organization has been successfully registered.</h1>
+            <div className="text-center">
+                <Button onClick={onClickLogin}>{t('header.login')}</Button>
+            </div>
+        </div>
+    );
+}
diff --git a/...nd/spa/src/components/Forms/OrganizationRegistrationForm/OrganizationRegistrationForm.tsx b/...nd/spa/src/components/Forms/OrganizationRegistrationForm/OrganizationRegistrationForm.tsx
@@ -2,7 +2,6 @@ import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useTranslation } from 'react-i18next';
 import { z } from 'zod';
-import { useNavigate } from 'react-router-dom';
 
 import TextField from '@/components/ui/TextField.tsx';
 import Button from '@/components/ui/Button.tsx';
@@ -18,8 +17,11 @@ const schema = z.object({
 
 type FormFields = z.infer<typeof schema>;
 
-export function OrganizationRegistrationForm() {
-    const navigate = useNavigate();
+type Props = {
+    onSuccess: () => void;
+};
+
+export function OrganizationRegistrationForm(props: Props) {
     const { t } = useTranslation();
     const { showError, showSuccess } = useToast();
     const { register, handleSubmit, formState } = useForm<FormFields>({
@@ -44,7 +46,7 @@ export function OrganizationRegistrationForm() {
             });
 
             showSuccess({ description: 'Organisation successfully created' });
-            navigate('/login');
+            props.onSuccess();
         } catch (e) {
             console.error(e);
             showError({ title: 'Error', description: 'Failed to register organization' });

diff --git a/frontend/spa/src/components/OrganizationStructureTree/OrganizationTree.tsx b/frontend/spa/src/components/OrganizationStructureTree/OrganizationTree.tsx
@@ -1,6 +1,6 @@
 import { Tree, getBackendOptions, MultiBackend } from '@minoru/react-dnd-treeview';
 import { DndProvider } from 'react-dnd';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 
 import OrganizationTreeNode from '@/components/OrganizationStructureTree/OrganizationTreeNode.tsx';
 import OrganizationTreeDropPreview from '@/components/OrganizationStructureTree/OrganizationTreeDropPreview.tsx';
@@ -15,7 +15,7 @@ interface OrganizationStructureTreeProps {
 }
 
 function OrganizationTree({ tree, onTreeChanged }: OrganizationStructureTreeProps) {
-    const [treeData, setTreeData] = useState<OrganizationTreeNodeModel[]>(JSON.parse(JSON.stringify(tree)));
+    const [treeData, setTreeData] = useState<OrganizationTreeNodeModel[]>([]);
     const [isDragging, setIsDragging] = useState(false);
 
     const handleDrop = (newTree: OrganizationTreeNodeModel[]) => {
@@ -57,6 +57,12 @@ function OrganizationTree({ tree, onTreeChanged }: OrganizationStructureTreeProp
         setIsDragging(false);
     };
 
+    useEffect(() => {
+        console.log('TREE PROP CHNAGED', tree);
+
+        setTreeData(tree);
+    }, [tree]);
+
     return (
         <DndProvider backend={MultiBackend} options={getBackendOptions()}>
             <div>

diff --git a/frontend/spa/src/components/OrganizationStructureTree/OrganizationTreeNode.tsx b/frontend/spa/src/components/OrganizationStructureTree/OrganizationTreeNode.tsx
@@ -54,7 +54,7 @@ function OrganizationTreeNode(props: Props) {
     };
 
     const onClickAcceptEdit = () => {
-        props.onEdit({ ...props.node, text: editValue, data: { emoji } });
+        props.onEdit({ ...props.node, text: editValue, data: { ...props.node.data, emoji } });
         setIsEditing(false);
     };
 

diff --git a/frontend/spa/src/components/views/OrganizationSettingsView.tsx b/frontend/spa/src/components/views/OrganizationSettingsView.tsx
@@ -16,30 +16,39 @@ function OrganizationSettingsView() {
     const { t } = useTranslation();
     const store = useStore();
     const [isOrganizationError, setIsOrganizationError] = useState(false);
-    // const savedTree = localStorage.getItem('organizationTree');
-    // const saveTreeNodes = savedTree ? (JSON.parse(savedTree) as OrganizationTreeNodeModel[]) : [];
+    const [originalBommels, setOriginalBommels] = useState<Map<number, Bommel>>(new Map());
     const [rootBommel, setRootBommel] = useState<Bommel | null>(null);
     const [tree, setTree] = useState<OrganizationTreeNodeModel[]>([]);
 
+    const loadTree = async () => {
+        const bommels = await organizationTreeService.getOrganizationBommels(rootBommel!.id!);
+        const nodes = organizationTreeService.bommelsToTreeNodes(bommels, rootBommel!.id);
+
+        setOriginalBommels(new Map<number, Bommel>(bommels.map((bommel) => [bommel.id, bommel])));
+        setTree(nodes);
+    };
+
     const onTreeChanged = (newTree: OrganizationTreeNodeModel[]) => {
         setTree(newTree);
     };
 
     const onClickSave = async () => {
-        // localStorage.setItem('organizationTree', JSON.stringify(tree));
-        await organizationTreeService.saveOrganizationTree(tree, rootBommel!.id!);
+        // sort tree by depth
+
+        const sortedTree = organizationTreeService.sortTreeByDepth(tree);
+        console.log('Sorted tree', sortedTree);
 
+        await organizationTreeService.saveOrganizationTree(sortedTree, rootBommel!.id!, originalBommels);
         toast({ title: t('organizationSettings.saved'), variant: 'success' });
     };
 
     useEffect(() => {
-        console.log('rootBommel changed', rootBommel);
         if (!rootBommel) {
             setTree([]);
             return;
         }
 
-        //@todo load bommel tree
+        loadTree();
     }, [rootBommel]);
 
     useEffect(() => {

diff --git a/frontend/spa/src/components/views/RegisterOrganizationView.tsx b/frontend/spa/src/components/views/RegisterOrganizationView.tsx
@@ -1,10 +1,18 @@
+import { useState } from 'react';
+
 import { OrganizationRegistrationForm } from '@/components/Forms/OrganizationRegistrationForm/OrganizationRegistrationForm.tsx';
+import { OrganizationRegistrationSuccess } from '@/components/ OrganizationRegistrationSuccess/OrganizationRegistrationSuccess.tsx';
 
 export function RegisterOrganizationView() {
+    const [isShowSuccess, setIsShowSuccess] = useState(false);
+    const handleSuccess = () => {
+        setIsShowSuccess(true);
+    };
+
     return (
         <div className="flex justify-center pt-20">
             <div className="w-full sm:w-[600px] bg-white dark:bg-black/20 rounded shadow p-4">
-                <OrganizationRegistrationForm />
+                {isShowSuccess ? <OrganizationRegistrationSuccess /> : <OrganizationRegistrationForm onSuccess={handleSuccess} />}
             </div>
         </div>
     );

diff --git a/frontend/spa/src/layouts/default/__tests__/Header.test.tsx b/frontend/spa/src/layouts/default/__tests__/Header.test.tsx
@@ -1,5 +1,6 @@
 import { render, screen } from '@testing-library/react';
 import { BrowserRouter } from 'react-router-dom';
+import { describe, expect, test } from 'vitest';
 
 import Header from '../Header';
 
@@ -13,6 +14,7 @@ describe('Header', () => {
 
         expect(screen.getByText('Home')).toBeInTheDocument();
         expect(screen.getByText('Demo')).toBeInTheDocument();
-        expect(screen.getByText('Login')).toBeInTheDocument();
+        expect(screen.getByText('header.login')).toBeInTheDocument();
+        expect(screen.getByText('header.register')).toBeInTheDocument();
     });
 });