Add risk creation form
Signed-off-by: Bryan Frimin <bryan@getprobo.com> Signed-off-by: Sacha Al Himdani <sacha@getprobo.com>
This commit is contained in:
Jonathan
committed by
Sacha Al Himdani
Sacha Al Himdani
parent
15cf471454
commit
3d4ecf5f8f
47
apps/console2/src/components/form/ControlledField.tsx
Normal file
47
apps/console2/src/components/form/ControlledField.tsx
Normal file
@@ -0,0 +1,47 @@
|
||||
import type { ComponentProps, JSXElementConstructor } from "react";
|
||||
import { Field } from "@probo/ui";
|
||||
import { Controller, type Control } from "react-hook-form";
|
||||
import { Select } from "@probo/ui";
|
||||
|
||||
type Props<T extends keyof JSX.IntrinsicElements | JSXElementConstructor<any>> =
|
||||
ComponentProps<T> & {
|
||||
control: Control<any>;
|
||||
name: string;
|
||||
};
|
||||
|
||||
export function ControlledField({
|
||||
control,
|
||||
name,
|
||||
...props
|
||||
}: Props<typeof Field>) {
|
||||
return (
|
||||
<Controller
|
||||
control={control}
|
||||
name={name}
|
||||
render={({ field }) => (
|
||||
<Field {...props} {...field} onValueChange={field.onChange} />
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export function ControlledSelect({
|
||||
control,
|
||||
name,
|
||||
...props
|
||||
}: Props<typeof Select>) {
|
||||
return (
|
||||
<Controller
|
||||
control={control}
|
||||
name={name}
|
||||
render={({ field }) => (
|
||||
<Select
|
||||
id={name}
|
||||
{...props}
|
||||
{...field}
|
||||
onValueChange={field.onChange}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
85
apps/console2/src/components/form/UserSelect.tsx
Normal file
85
apps/console2/src/components/form/UserSelect.tsx
Normal file
@@ -0,0 +1,85 @@
|
||||
import { Avatar, Option, Select } from "@probo/ui";
|
||||
import { Suspense } from "react";
|
||||
import { useLazyLoadQuery } from "react-relay";
|
||||
import { graphql } from "relay-runtime";
|
||||
import type { UserSelectQuery as UserSelectQueryType } from "./__generated__/UserSelectQuery.graphql";
|
||||
import { useTranslate } from "@probo/i18n";
|
||||
import { Controller, type Control } from "react-hook-form";
|
||||
|
||||
const usersQuery = graphql`
|
||||
query UserSelectQuery($organizationId: ID!) {
|
||||
organization: node(id: $organizationId) {
|
||||
... on Organization {
|
||||
users(first: 100, orderBy: { direction: ASC, field: CREATED_AT }) {
|
||||
edges {
|
||||
node {
|
||||
id
|
||||
fullName
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export function UserSelect({
|
||||
organization,
|
||||
name,
|
||||
control,
|
||||
}: {
|
||||
organization: string;
|
||||
name: string;
|
||||
control: Control<any>;
|
||||
}) {
|
||||
return (
|
||||
<Suspense
|
||||
fallback={<Select variant="editor" disabled placeholder="Loading..." />}
|
||||
>
|
||||
<UserSelectWithQuery
|
||||
organization={organization}
|
||||
name={name}
|
||||
control={control}
|
||||
/>
|
||||
</Suspense>
|
||||
);
|
||||
}
|
||||
|
||||
function UserSelectWithQuery({
|
||||
organization,
|
||||
name,
|
||||
control,
|
||||
}: {
|
||||
organization: string;
|
||||
name: string;
|
||||
control: Control;
|
||||
}) {
|
||||
const { __ } = useTranslate();
|
||||
const data = useLazyLoadQuery<UserSelectQueryType>(usersQuery, {
|
||||
organizationId: organization,
|
||||
});
|
||||
|
||||
const users = data.organization?.users?.edges.map((edge) => edge.node);
|
||||
|
||||
return (
|
||||
<Controller
|
||||
control={control}
|
||||
name={name}
|
||||
render={({ field }) => (
|
||||
<Select
|
||||
id={name}
|
||||
variant="editor"
|
||||
placeholder={__("Select an user")}
|
||||
{...field}
|
||||
>
|
||||
{users?.map((user) => (
|
||||
<Option key={user.id} value={user.id}>
|
||||
<Avatar name={user.fullName} />
|
||||
{user.fullName}
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
180
apps/console2/src/components/form/__generated__/UserSelectQuery.graphql.ts
generated
Normal file
180
apps/console2/src/components/form/__generated__/UserSelectQuery.graphql.ts
generated
Normal file
@@ -0,0 +1,180 @@
|
||||
/**
|
||||
* @generated SignedSource<<45329c77cfacf0f653adac2e9172b371>>
|
||||
* @lightSyntaxTransform
|
||||
* @nogrep
|
||||
*/
|
||||
|
||||
/* tslint:disable */
|
||||
/* eslint-disable */
|
||||
// @ts-nocheck
|
||||
|
||||
import { ConcreteRequest } from 'relay-runtime';
|
||||
export type UserSelectQuery$variables = {
|
||||
organizationId: string;
|
||||
};
|
||||
export type UserSelectQuery$data = {
|
||||
readonly organization: {
|
||||
readonly users?: {
|
||||
readonly edges: ReadonlyArray<{
|
||||
readonly node: {
|
||||
readonly fullName: string;
|
||||
readonly id: string;
|
||||
};
|
||||
}>;
|
||||
};
|
||||
};
|
||||
};
|
||||
export type UserSelectQuery = {
|
||||
response: UserSelectQuery$data;
|
||||
variables: UserSelectQuery$variables;
|
||||
};
|
||||
|
||||
const node: ConcreteRequest = (function(){
|
||||
var v0 = [
|
||||
{
|
||||
"defaultValue": null,
|
||||
"kind": "LocalArgument",
|
||||
"name": "organizationId"
|
||||
}
|
||||
],
|
||||
v1 = [
|
||||
{
|
||||
"kind": "Variable",
|
||||
"name": "id",
|
||||
"variableName": "organizationId"
|
||||
}
|
||||
],
|
||||
v2 = {
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "id",
|
||||
"storageKey": null
|
||||
},
|
||||
v3 = {
|
||||
"kind": "InlineFragment",
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": [
|
||||
{
|
||||
"kind": "Literal",
|
||||
"name": "first",
|
||||
"value": 100
|
||||
},
|
||||
{
|
||||
"kind": "Literal",
|
||||
"name": "orderBy",
|
||||
"value": {
|
||||
"direction": "ASC",
|
||||
"field": "CREATED_AT"
|
||||
}
|
||||
}
|
||||
],
|
||||
"concreteType": "UserConnection",
|
||||
"kind": "LinkedField",
|
||||
"name": "users",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"concreteType": "UserEdge",
|
||||
"kind": "LinkedField",
|
||||
"name": "edges",
|
||||
"plural": true,
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"concreteType": "User",
|
||||
"kind": "LinkedField",
|
||||
"name": "node",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
(v2/*: any*/),
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "fullName",
|
||||
"storageKey": null
|
||||
}
|
||||
],
|
||||
"storageKey": null
|
||||
}
|
||||
],
|
||||
"storageKey": null
|
||||
}
|
||||
],
|
||||
"storageKey": "users(first:100,orderBy:{\"direction\":\"ASC\",\"field\":\"CREATED_AT\"})"
|
||||
}
|
||||
],
|
||||
"type": "Organization",
|
||||
"abstractKey": null
|
||||
};
|
||||
return {
|
||||
"fragment": {
|
||||
"argumentDefinitions": (v0/*: any*/),
|
||||
"kind": "Fragment",
|
||||
"metadata": null,
|
||||
"name": "UserSelectQuery",
|
||||
"selections": [
|
||||
{
|
||||
"alias": "organization",
|
||||
"args": (v1/*: any*/),
|
||||
"concreteType": null,
|
||||
"kind": "LinkedField",
|
||||
"name": "node",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
(v3/*: any*/)
|
||||
],
|
||||
"storageKey": null
|
||||
}
|
||||
],
|
||||
"type": "Query",
|
||||
"abstractKey": null
|
||||
},
|
||||
"kind": "Request",
|
||||
"operation": {
|
||||
"argumentDefinitions": (v0/*: any*/),
|
||||
"kind": "Operation",
|
||||
"name": "UserSelectQuery",
|
||||
"selections": [
|
||||
{
|
||||
"alias": "organization",
|
||||
"args": (v1/*: any*/),
|
||||
"concreteType": null,
|
||||
"kind": "LinkedField",
|
||||
"name": "node",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "__typename",
|
||||
"storageKey": null
|
||||
},
|
||||
(v3/*: any*/),
|
||||
(v2/*: any*/)
|
||||
],
|
||||
"storageKey": null
|
||||
}
|
||||
]
|
||||
},
|
||||
"params": {
|
||||
"cacheID": "795bb4c1131f2cacedb1ab8faf9f10ed",
|
||||
"id": null,
|
||||
"metadata": {},
|
||||
"name": "UserSelectQuery",
|
||||
"operationKind": "query",
|
||||
"text": "query UserSelectQuery(\n $organizationId: ID!\n) {\n organization: node(id: $organizationId) {\n __typename\n ... on Organization {\n users(first: 100, orderBy: {direction: ASC, field: CREATED_AT}) {\n edges {\n node {\n id\n fullName\n }\n }\n }\n }\n id\n }\n}\n"
|
||||
}
|
||||
};
|
||||
})();
|
||||
|
||||
(node as any).hash = "f2a6754264e15c49c53a9ac9fa60264e";
|
||||
|
||||
export default node;
|
||||
Reference in New Issue
Block a user