Add nonconformity registries
Signed-off-by: Sacha Al Himdani <sacha@getprobo.com>
This commit is contained in:
Sacha Al Himdani
107
apps/console/src/components/form/AuditSelectField.tsx
Normal file
107
apps/console/src/components/form/AuditSelectField.tsx
Normal file
@@ -0,0 +1,107 @@
|
||||
import { Field, Option, Select, Badge } from "@probo/ui";
|
||||
import { Suspense, type ComponentProps } from "react";
|
||||
import { useTranslate } from "@probo/i18n";
|
||||
import { type Control, Controller, type FieldValues, type Path } from "react-hook-form";
|
||||
import { useLazyLoadQuery, graphql } from "react-relay";
|
||||
import { getAuditStateVariant, getAuditStateLabel } from "@probo/helpers";
|
||||
import type { AuditSelectFieldQuery } from "./__generated__/AuditSelectFieldQuery.graphql";
|
||||
|
||||
const auditsQuery = graphql`
|
||||
query AuditSelectFieldQuery($organizationId: ID!) {
|
||||
organization: node(id: $organizationId) {
|
||||
... on Organization {
|
||||
audits(first: 100) {
|
||||
edges {
|
||||
node {
|
||||
id
|
||||
name
|
||||
framework {
|
||||
id
|
||||
name
|
||||
}
|
||||
state
|
||||
validFrom
|
||||
validUntil
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
type Props<T extends FieldValues = FieldValues> = {
|
||||
organizationId: string;
|
||||
control: Control<T>;
|
||||
name: Path<T>;
|
||||
label?: string;
|
||||
error?: string;
|
||||
} & ComponentProps<typeof Field>;
|
||||
|
||||
export function AuditSelectField<T extends FieldValues = FieldValues>({
|
||||
organizationId,
|
||||
control,
|
||||
...props
|
||||
}: Props<T>) {
|
||||
return (
|
||||
<Field {...props}>
|
||||
<Suspense
|
||||
fallback={<Select variant="editor" loading placeholder="Loading..." />}
|
||||
>
|
||||
<AuditSelectWithQuery
|
||||
organizationId={organizationId}
|
||||
control={control}
|
||||
name={props.name}
|
||||
disabled={props.disabled}
|
||||
/>
|
||||
</Suspense>
|
||||
</Field>
|
||||
);
|
||||
}
|
||||
|
||||
function AuditSelectWithQuery<T extends FieldValues = FieldValues>(
|
||||
props: Pick<Props<T>, "organizationId" | "control" | "name" | "disabled">
|
||||
) {
|
||||
const { __ } = useTranslate();
|
||||
const { name, organizationId, control } = props;
|
||||
const data = useLazyLoadQuery<AuditSelectFieldQuery>(auditsQuery, { organizationId });
|
||||
const audits = data?.organization?.audits?.edges?.map((edge) => edge.node).filter((node) => node !== null) ?? [];
|
||||
|
||||
return (
|
||||
<Controller
|
||||
control={control}
|
||||
name={name}
|
||||
render={({ field }) => (
|
||||
<Select
|
||||
disabled={props.disabled}
|
||||
id={name}
|
||||
variant="editor"
|
||||
placeholder={__("Select an audit")}
|
||||
onValueChange={field.onChange}
|
||||
key={audits?.length.toString() ?? "0"}
|
||||
{...field}
|
||||
className="w-full"
|
||||
value={field.value ?? ""}
|
||||
>
|
||||
{audits?.map((audit) => (
|
||||
<Option key={audit.id} value={audit.id}>
|
||||
<div className="flex items-center justify-between w-full">
|
||||
<span>
|
||||
{audit.name
|
||||
? `${audit.framework.name} - ${audit.name}`
|
||||
: audit.framework.name
|
||||
}
|
||||
</span>
|
||||
<div className="ml-3">
|
||||
<Badge variant={getAuditStateVariant(audit.state)}>
|
||||
{getAuditStateLabel(__, audit.state)}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
215
apps/console/src/components/form/__generated__/AuditSelectFieldQuery.graphql.ts
generated
Normal file
215
apps/console/src/components/form/__generated__/AuditSelectFieldQuery.graphql.ts
generated
Normal file
@@ -0,0 +1,215 @@
|
||||
/**
|
||||
* @generated SignedSource<<21026731cd2ebaf80c8c2e251b9a57f8>>
|
||||
* @lightSyntaxTransform
|
||||
* @nogrep
|
||||
*/
|
||||
|
||||
/* tslint:disable */
|
||||
/* eslint-disable */
|
||||
// @ts-nocheck
|
||||
|
||||
import { ConcreteRequest } from 'relay-runtime';
|
||||
export type AuditState = "COMPLETED" | "IN_PROGRESS" | "NOT_STARTED" | "OUTDATED" | "REJECTED";
|
||||
export type AuditSelectFieldQuery$variables = {
|
||||
organizationId: string;
|
||||
};
|
||||
export type AuditSelectFieldQuery$data = {
|
||||
readonly organization: {
|
||||
readonly audits?: {
|
||||
readonly edges: ReadonlyArray<{
|
||||
readonly node: {
|
||||
readonly framework: {
|
||||
readonly id: string;
|
||||
readonly name: string;
|
||||
};
|
||||
readonly id: string;
|
||||
readonly name: string | null | undefined;
|
||||
readonly state: AuditState;
|
||||
readonly validFrom: any | null | undefined;
|
||||
readonly validUntil: any | null | undefined;
|
||||
};
|
||||
}>;
|
||||
};
|
||||
};
|
||||
};
|
||||
export type AuditSelectFieldQuery = {
|
||||
response: AuditSelectFieldQuery$data;
|
||||
variables: AuditSelectFieldQuery$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 = {
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "name",
|
||||
"storageKey": null
|
||||
},
|
||||
v4 = {
|
||||
"kind": "InlineFragment",
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": [
|
||||
{
|
||||
"kind": "Literal",
|
||||
"name": "first",
|
||||
"value": 100
|
||||
}
|
||||
],
|
||||
"concreteType": "AuditConnection",
|
||||
"kind": "LinkedField",
|
||||
"name": "audits",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"concreteType": "AuditEdge",
|
||||
"kind": "LinkedField",
|
||||
"name": "edges",
|
||||
"plural": true,
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"concreteType": "Audit",
|
||||
"kind": "LinkedField",
|
||||
"name": "node",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
(v2/*: any*/),
|
||||
(v3/*: any*/),
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"concreteType": "Framework",
|
||||
"kind": "LinkedField",
|
||||
"name": "framework",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
(v2/*: any*/),
|
||||
(v3/*: any*/)
|
||||
],
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "state",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "validFrom",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "validUntil",
|
||||
"storageKey": null
|
||||
}
|
||||
],
|
||||
"storageKey": null
|
||||
}
|
||||
],
|
||||
"storageKey": null
|
||||
}
|
||||
],
|
||||
"storageKey": "audits(first:100)"
|
||||
}
|
||||
],
|
||||
"type": "Organization",
|
||||
"abstractKey": null
|
||||
};
|
||||
return {
|
||||
"fragment": {
|
||||
"argumentDefinitions": (v0/*: any*/),
|
||||
"kind": "Fragment",
|
||||
"metadata": null,
|
||||
"name": "AuditSelectFieldQuery",
|
||||
"selections": [
|
||||
{
|
||||
"alias": "organization",
|
||||
"args": (v1/*: any*/),
|
||||
"concreteType": null,
|
||||
"kind": "LinkedField",
|
||||
"name": "node",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
(v4/*: any*/)
|
||||
],
|
||||
"storageKey": null
|
||||
}
|
||||
],
|
||||
"type": "Query",
|
||||
"abstractKey": null
|
||||
},
|
||||
"kind": "Request",
|
||||
"operation": {
|
||||
"argumentDefinitions": (v0/*: any*/),
|
||||
"kind": "Operation",
|
||||
"name": "AuditSelectFieldQuery",
|
||||
"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
|
||||
},
|
||||
(v4/*: any*/),
|
||||
(v2/*: any*/)
|
||||
],
|
||||
"storageKey": null
|
||||
}
|
||||
]
|
||||
},
|
||||
"params": {
|
||||
"cacheID": "339c5438bb684c44887cc9cb53fb2c6a",
|
||||
"id": null,
|
||||
"metadata": {},
|
||||
"name": "AuditSelectFieldQuery",
|
||||
"operationKind": "query",
|
||||
"text": "query AuditSelectFieldQuery(\n $organizationId: ID!\n) {\n organization: node(id: $organizationId) {\n __typename\n ... on Organization {\n audits(first: 100) {\n edges {\n node {\n id\n name\n framework {\n id\n name\n }\n state\n validFrom\n validUntil\n }\n }\n }\n }\n id\n }\n}\n"
|
||||
}
|
||||
};
|
||||
})();
|
||||
|
||||
(node as any).hash = "2bde1a04326144fe1b133672870807eb";
|
||||
|
||||
export default node;
|
||||
Reference in New Issue
Block a user