feat: implement role creation functionality in RoleCreatePage

Author: nicosammito

src/packages/ce/src/role/pages/RoleCreatePage.tsx

@@ -1,13 +1,60 @@
 "use client"
 
 import React from "react";
-import {Button, Col, Flex, Spacing, Text, TextInput} from "@code0-tech/pictor";
+import {Button, Col, Flex, Spacing, Text, TextInput, toast, useForm, useService} from "@code0-tech/pictor";
 import Link from "next/link";
+import {useParams, useRouter} from "next/navigation";
+import {Namespace} from "@code0-tech/sagittarius-graphql-types";
+import {RoleService} from "@edition/role/services/Role.service";
 
 export const RoleCreatePage: React.FC = () => {
 
     //TODO: user abilities for add role within namespace
 
+    const params = useParams()
+    const roleService = useService(RoleService)
+    const [, startTransition] = React.useTransition()
+    const router = useRouter()
+
+    const namespaceIndex = params?.namespaceId as string
+    const namespaceId: Namespace['id'] = `gid://sagittarius/Namespace/${namespaceIndex as unknown as number}`
+
+    //TODO: user abilities for project creation within namespace
+
+    const [inputs, validate] = useForm({
+        initialValues: {
+            name: ""
+        },
+        validate: {
+            name: (value) => {
+                if (!value) return "Name is required"
+                if (value.length < 3) return "Name needs to be at least 3 characters"
+                if (value.length > 50) return "Name needs to be less than 50 characters"
+                return null
+            },
+        },
+        onSubmit: (values) => {
+            startTransition(() => {
+                if (!namespaceId) {
+                    toast({
+                        title: "The current user does not have a personal namespace.",
+                        color: "error",
+                        dismissible: true,
+                    })
+                    return
+                }
+                roleService.roleCreate({
+                    name: values.name as unknown as string,
+                    namespaceId: namespaceId
+                }).then(payload => {
+                    if ((payload?.errors?.length ?? 0) <= 0) {
+                        router.push(`/namespace/${namespaceIndex}/roles`)
+                    }
+                })
+            })
+        }
+    })
+
     return <div style={{
         background: "#070514",
         height: "100%",
@@ -28,6 +75,7 @@ export const RoleCreatePage: React.FC = () => {
                 <TextInput required
                            title={"Name"}
                            description={"Provide a simple role name"}
+                           {...inputs.getInputProps("name")}
                 />
                 <Spacing spacing={"xl"}/>
                 <Flex style={{gap: "0.35rem"}} justify={"space-between"}>
@@ -36,7 +84,7 @@ export const RoleCreatePage: React.FC = () => {
                             Go back to roles
                         </Button>
                     </Link>
-                    <Button color={"success"}>
+                    <Button color={"success"} onClick={validate}>
                         Create role
                     </Button>
                 </Flex>

src/packages/ce/src/role/services/Role.service.ts

@@ -18,6 +18,7 @@ import {GraphqlClient} from "@core/util/graphql-client";
 import rolesQuery from "@edition/role/services/queries/Roles.query.graphql";
 import roleUpdateMutation from "@edition/role/services/mutations/Role.update.mutation.graphql";
 import roleDeleteMutation from "@edition/role/services/mutations/Role.delete.mutation.graphql";
+import roleCreateMutation from "@edition/role/services/mutations/Role.create.mutation.graphql";
 import roleAssignAbilitiesMutation from "@edition/role/services/mutations/Role.assignAbilities.mutation.graphql";
 import roleAssignProjectsMutation from "@edition/role/services/mutations/Role.assignProjects.mutation.graphql";
 import {View} from "@code0-tech/pictor/dist/utils/view";
@@ -157,8 +158,22 @@ export class RoleService extends ReactiveArrayService<RoleView, RoleDependencies
         return result.data?.namespacesRolesUpdate ?? undefined
     }
 
-    roleCreate(payload: NamespacesRolesCreateInput): Promise<NamespacesRolesCreatePayload | undefined> {
-        throw new Error("Method not implemented.")
+    async roleCreate(payload: NamespacesRolesCreateInput): Promise<NamespacesRolesCreatePayload | undefined> {
+        const result = await this.client.mutate<Mutation, NamespacesRolesCreateInput>({
+            mutation: roleCreateMutation,
+            variables: {
+                ...payload
+            }
+        })
+
+        if (result.data && result.data.namespacesRolesCreate && result.data.namespacesRolesCreate.namespaceRole) {
+            const role = result.data.namespacesRolesCreate.namespaceRole
+            if (!this.hasById(role.id)) {
+                this.add(new View(new RoleView(role)))
+            }
+        }
+
+        return result.data?.namespacesRolesCreate ?? undefined
     }
 
     async roleDelete(payload: NamespacesRolesDeleteInput): Promise<NamespacesRolesDeletePayload | undefined> {

src/packages/ce/src/role/services/mutations/Role.create.mutation.graphql

@@ -1,3 +1,5 @@
+#import "../fragments/Role.basic.fragment.graphql"
+
 mutation createRole($namespaceId: NamespaceID!, $name: String!) {
     namespacesRolesCreate(input: {
         namespaceId: $namespaceId,