feat: enhance MemberAddPage with user filtering and improved form handling

Author: nicosammito

src/packages/ce/src/dashboard/member/MemberAddPage.tsx

@@ -11,27 +11,40 @@ import {
     Spacing,
     Text,
     useForm,
-    useService
+    useService, useStore
 } from "@code0-tech/pictor";
 import {MemberService} from "@edition/member/Member.service";
 import {useParams, useRouter} from "next/navigation";
 import {Namespace} from "@code0-tech/sagittarius-graphql-types";
 import Link from "next/link";
+import {UserService} from "@edition/user/User.service";
 
 export const MemberAddPage: React.FC = () => {
 
     const params = useParams()
     const memberService = useService(MemberService)
+    const memberStore = useStore(MemberService)
+    const userService = useService(UserService)
+    const userStore = useStore(UserService)
     const router = useRouter()
     const [, startTransition] = React.useTransition()
 
     const namespaceIndex = params?.namespaceId as string
     const namespaceId: Namespace['id'] = `gid://sagittarius/Namespace/${namespaceIndex as unknown as number}`
 
+    const members = React.useMemo(() => memberService.values({namespaceId: namespaceId}), [memberStore, userStore])
+    const formInitialValues = React.useMemo(
+        () => ({ users: null as null | InputSuggestion[] }),
+        []
+    )
+    const filteredUsers = React.useMemo(() => {
+        return (user: DUserView) => {
+            return !members.find(m => m.user?.id === user.id)
+        }
+    }, [members])
+
     const [inputs, validate] = useForm<{ users: null | InputSuggestion[] }>({
-        initialValues: {
-            users: null
-        },
+        initialValues: formInitialValues,
         validate: {
             users: (value) => {
                 if (!value) return "Please select at least one user"
@@ -65,6 +78,7 @@ export const MemberAddPage: React.FC = () => {
             {/*@ts-ignore*/}
             <DUserInput title={"Description"}
                         description={"Provide a simple project description"}
+                        filter={filteredUsers}
                         validationUsesSuggestions
                         {...inputs.getInputProps("users")}/>
             <Spacing spacing={"xl"}/>