Add people signature filtering

Signed-off-by: Bryan Frimin <bryan@getprobo.com>
This commit is contained in:
Bryan Frimin
2025-10-21 11:49:03 +02:00
parent 821ca13152
commit 06c05db3a4
14 changed files with 943 additions and 30 deletions

View File

@@ -1,5 +1,5 @@
/**
* @generated SignedSource<<4d39076389b55a86a116d8115ac22fca>>
* @generated SignedSource<<3b517368f8d0fc79e1c5c60e56c00b4d>>
* @lightSyntaxTransform
* @nogrep
*/
@@ -469,7 +469,18 @@ return {
{
"alias": null,
"args": (v11/*: any*/),
"filters": null,
"filters": [
"filter"
],
"handle": "connection",
"key": "DocumentSignaturesTab_signatures",
"kind": "LinkedHandle",
"name": "signatures"
},
{
"alias": null,
"args": (v11/*: any*/),
"filters": [],
"handle": "connection",
"key": "DocumentDetailPage_signatures",
"kind": "LinkedHandle",
@@ -507,12 +518,12 @@ return {
]
},
"params": {
"cacheID": "6d2e59057d037990aeb917bb36d8234f",
"cacheID": "d77cc1c3f05f4be15b7c50b90b8a4704",
"id": null,
"metadata": {},
"name": "DocumentGraphNodeQuery",
"operationKind": "query",
"text": "query DocumentGraphNodeQuery(\n $documentId: ID!\n) {\n node(id: $documentId) {\n __typename\n ... on Document {\n ...DocumentDetailPageDocumentFragment\n }\n id\n }\n}\n\nfragment DocumentControlsTabFragment on Document {\n id\n controls(first: 20) {\n edges {\n node {\n id\n ...LinkedControlsCardFragment\n __typename\n }\n cursor\n }\n pageInfo {\n endCursor\n hasNextPage\n hasPreviousPage\n startCursor\n }\n }\n}\n\nfragment DocumentDetailPageDocumentFragment on Document {\n id\n title\n documentType\n owner {\n id\n fullName\n }\n ...DocumentControlsTabFragment\n controlsInfo: controls(first: 0) {\n totalCount\n }\n versions(first: 20) {\n edges {\n node {\n id\n content\n status\n publishedAt\n version\n updatedAt\n signatures(first: 500) {\n edges {\n node {\n id\n state\n signedBy {\n id\n }\n ...DocumentSignaturesTab_signature\n __typename\n }\n cursor\n }\n pageInfo {\n endCursor\n hasNextPage\n }\n }\n __typename\n }\n cursor\n }\n pageInfo {\n endCursor\n hasNextPage\n }\n }\n}\n\nfragment DocumentSignaturesTab_signature on DocumentVersionSignature {\n id\n state\n signedAt\n requestedAt\n signedBy {\n fullName\n primaryEmailAddress\n id\n }\n}\n\nfragment LinkedControlsCardFragment on Control {\n id\n name\n sectionTitle\n framework {\n id\n name\n }\n}\n"
"text": "query DocumentGraphNodeQuery(\n $documentId: ID!\n) {\n node(id: $documentId) {\n __typename\n ... on Document {\n ...DocumentDetailPageDocumentFragment\n }\n id\n }\n}\n\nfragment DocumentControlsTabFragment on Document {\n id\n controls(first: 20) {\n edges {\n node {\n id\n ...LinkedControlsCardFragment\n __typename\n }\n cursor\n }\n pageInfo {\n endCursor\n hasNextPage\n hasPreviousPage\n startCursor\n }\n }\n}\n\nfragment DocumentDetailPageDocumentFragment on Document {\n id\n title\n documentType\n owner {\n id\n fullName\n }\n ...DocumentControlsTabFragment\n controlsInfo: controls(first: 0) {\n totalCount\n }\n versions(first: 20) {\n edges {\n node {\n id\n content\n status\n publishedAt\n version\n updatedAt\n ...DocumentSignaturesTab_version\n signatures(first: 500) {\n edges {\n node {\n id\n state\n signedBy {\n id\n }\n ...DocumentSignaturesTab_signature\n __typename\n }\n cursor\n }\n pageInfo {\n endCursor\n hasNextPage\n }\n }\n __typename\n }\n cursor\n }\n pageInfo {\n endCursor\n hasNextPage\n }\n }\n}\n\nfragment DocumentSignaturesTab_signature on DocumentVersionSignature {\n id\n state\n signedAt\n requestedAt\n signedBy {\n fullName\n primaryEmailAddress\n id\n }\n}\n\nfragment DocumentSignaturesTab_version on DocumentVersion {\n id\n status\n signatures(first: 500) {\n edges {\n node {\n id\n state\n signedBy {\n id\n fullName\n primaryEmailAddress\n }\n ...DocumentSignaturesTab_signature\n __typename\n }\n cursor\n }\n pageInfo {\n endCursor\n hasNextPage\n }\n }\n}\n\nfragment LinkedControlsCardFragment on Control {\n id\n name\n sectionTitle\n framework {\n id\n name\n }\n}\n"
}
};
})();

View File

@@ -101,8 +101,9 @@ const documentFragment = graphql`
publishedAt
version
updatedAt
...DocumentSignaturesTab_version
signatures(first: 500)
@connection(key: "DocumentDetailPage_signatures") {
@connection(key: "DocumentDetailPage_signatures", filters: []) {
__id
edges {
node {

View File

@@ -1,5 +1,5 @@
/**
* @generated SignedSource<<1b07d7b3b18267f31c2b7ec7950edcb6>>
* @generated SignedSource<<79bf0f8ac3d41ba5c456ddae462e2c6d>>
* @lightSyntaxTransform
* @nogrep
*/
@@ -47,6 +47,7 @@ export type DocumentDetailPageDocumentFragment$data = {
readonly status: DocumentStatus;
readonly updatedAt: any;
readonly version: number;
readonly " $fragmentSpreads": FragmentRefs<"DocumentSignaturesTab_version">;
};
}>;
};
@@ -263,6 +264,11 @@ return {
"name": "updatedAt",
"storageKey": null
},
{
"args": null,
"kind": "FragmentSpread",
"name": "DocumentSignaturesTab_version"
},
{
"alias": "signatures",
"args": null,
@@ -344,6 +350,6 @@ return {
};
})();
(node as any).hash = "ffd5764324ccdcfe201e937980e75253";
(node as any).hash = "ce3a8422f4391952a8ad839ff874c5cf";
export default node;

View File

@@ -2,14 +2,15 @@ import {
Avatar,
Badge,
Button,
Checkbox,
IconCircleCheck,
IconClock,
Spinner,
} from "@probo/ui";
import { useTranslate } from "@probo/i18n";
import { Suspense } from "react";
import { Suspense, useState, useEffect } from "react";
import type { ItemOf, NodeOf } from "/types";
import { graphql, useFragment } from "react-relay";
import { graphql, useFragment, useRefetchableFragment } from "react-relay";
import { usePeople } from "/hooks/graph/PeopleGraph.ts";
import { useOrganizationId } from "/hooks/useOrganizationId.ts";
import { useMutationWithToasts } from "/hooks/useMutationWithToasts.ts";
@@ -17,31 +18,118 @@ import { sprintf } from "@probo/helpers";
import type { DocumentDetailPageDocumentFragment$data } from "../__generated__/DocumentDetailPageDocumentFragment.graphql";
import { useOutletContext } from "react-router";
import type { DocumentSignaturesTab_signature$key } from "/pages/organizations/documents/tabs/__generated__/DocumentSignaturesTab_signature.graphql.ts";
import type { DocumentSignaturesTab_version$key } from "/pages/organizations/documents/tabs/__generated__/DocumentSignaturesTab_version.graphql.ts";
type Version = NodeOf<DocumentDetailPageDocumentFragment$data["versions"]>;
const versionFragment = graphql`
fragment DocumentSignaturesTab_version on DocumentVersion
@refetchable(queryName: "DocumentSignaturesTabRefetchQuery")
@argumentDefinitions(
count: { type: "Int", defaultValue: 500 }
cursor: { type: "CursorKey" }
signatureFilter: { type: "DocumentVersionSignatureFilter" }
) {
id
status
signatures(first: $count, after: $cursor, filter: $signatureFilter)
@connection(key: "DocumentSignaturesTab_signatures", filters: ["filter"]) {
__id
edges {
node {
id
state
signedBy {
id
fullName
primaryEmailAddress
}
...DocumentSignaturesTab_signature
}
}
}
}
`;
type SignatureState = "REQUESTED" | "SIGNED";
export default function DocumentSignaturesTab() {
const { version } = useOutletContext<{ version: Version }>();
if (!version) {
const { version: versionFromContext } = useOutletContext<{ version: Version }>();
const [selectedStates, setSelectedStates] = useState<SignatureState[]>([]);
const { __ } = useTranslate();
if (!versionFromContext) {
return null;
}
const toggleState = (state: SignatureState) => {
setSelectedStates((prev) =>
prev.includes(state)
? prev.filter((s) => s !== state)
: [...prev, state]
);
};
return (
<Suspense fallback={<Spinner centered />}>
<SignatureList version={version} />
</Suspense>
<div className="space-y-4">
<div className="flex items-center gap-4 pb-2 border-b border-border-solid">
<span className="text-sm text-txt-secondary">
{__("Filter by state:")}
</span>
<div className="flex items-center gap-2">
<Checkbox
checked={selectedStates.includes("REQUESTED")}
onChange={() => toggleState("REQUESTED")}
/>
<span
className="text-sm text-txt-secondary cursor-pointer select-none"
onClick={() => toggleState("REQUESTED")}
>
{__("Requested")}
</span>
</div>
<div className="flex items-center gap-2">
<Checkbox
checked={selectedStates.includes("SIGNED")}
onChange={() => toggleState("SIGNED")}
/>
<span
className="text-sm text-txt-secondary cursor-pointer select-none"
onClick={() => toggleState("SIGNED")}
>
{__("Signed")}
</span>
</div>
</div>
<Suspense fallback={<Spinner centered />}>
<SignatureList version={versionFromContext} selectedStates={selectedStates} />
</Suspense>
</div>
);
}
function SignatureList(props: { version: Version }) {
const signatures = props.version.signatures?.edges?.map((edge) => edge.node) ?? [];
function SignatureList(props: { version: Version; selectedStates: SignatureState[] }) {
const [version, refetch] = useRefetchableFragment<any, DocumentSignaturesTab_version$key>(
versionFragment,
props.version
);
const signatures = version.signatures?.edges?.map((edge) => edge.node) ?? [];
const { __ } = useTranslate();
const signatureMap = new Map(signatures.map((s) => [s.signedBy.id, s]));
const organizationId = useOrganizationId();
const people = usePeople(organizationId, { excludeContractEnded: true });
const signable = props.version.status === "PUBLISHED";
const signable = version.status === "PUBLISHED";
if (!props.version.signatures) {
// Refetch when filter changes
useEffect(() => {
const filter = props.selectedStates.length > 0
? { states: props.selectedStates }
: null;
refetch({ signatureFilter: filter });
}, [JSON.stringify(props.selectedStates), refetch]);
if (!version.signatures) {
return (
<div className="text-center text-sm text-txt-tertiary py-3">
{__("Loading signatures...")}
@@ -57,15 +145,28 @@ function SignatureList(props: { version: Version }) {
);
}
// When a filter is active, only show people who have signatures in the filtered results
const filteredPeople = props.selectedStates.length > 0
? people.filter((p) => signatureMap.has(p.id))
: people;
if (filteredPeople.length === 0 && props.selectedStates.length > 0) {
return (
<div className="text-center text-sm text-txt-tertiary py-3">
{__("No signatures match the selected filters")}
</div>
);
}
return (
<div className="space-y-2 divide-y divide-border-solid">
{people.map((p) => (
{filteredPeople.map((p) => (
<SignatureItem
key={p.id}
versionId={props.version.id}
versionId={version.id}
signature={signatureMap.get(p.id)}
people={p}
connectionId={props.version.signatures.__id}
connectionId={version.signatures.__id}
signable={signable}
/>
))}

View File

@@ -0,0 +1,330 @@
/**
* @generated SignedSource<<6e738ec6de4916bb47e6698ef348a702>>
* @lightSyntaxTransform
* @nogrep
*/
/* tslint:disable */
/* eslint-disable */
// @ts-nocheck
import { ConcreteRequest } from 'relay-runtime';
import { FragmentRefs } from "relay-runtime";
export type DocumentVersionSignatureState = "REQUESTED" | "SIGNED";
export type DocumentVersionSignatureFilter = {
states?: ReadonlyArray<DocumentVersionSignatureState> | null | undefined;
};
export type DocumentSignaturesTabRefetchQuery$variables = {
count?: number | null | undefined;
cursor?: any | null | undefined;
id: string;
signatureFilter?: DocumentVersionSignatureFilter | null | undefined;
};
export type DocumentSignaturesTabRefetchQuery$data = {
readonly node: {
readonly " $fragmentSpreads": FragmentRefs<"DocumentSignaturesTab_version">;
};
};
export type DocumentSignaturesTabRefetchQuery = {
response: DocumentSignaturesTabRefetchQuery$data;
variables: DocumentSignaturesTabRefetchQuery$variables;
};
const node: ConcreteRequest = (function(){
var v0 = {
"defaultValue": 500,
"kind": "LocalArgument",
"name": "count"
},
v1 = {
"defaultValue": null,
"kind": "LocalArgument",
"name": "cursor"
},
v2 = {
"defaultValue": null,
"kind": "LocalArgument",
"name": "id"
},
v3 = {
"defaultValue": null,
"kind": "LocalArgument",
"name": "signatureFilter"
},
v4 = [
{
"kind": "Variable",
"name": "id",
"variableName": "id"
}
],
v5 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "__typename",
"storageKey": null
},
v6 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "id",
"storageKey": null
},
v7 = [
{
"kind": "Variable",
"name": "after",
"variableName": "cursor"
},
{
"kind": "Variable",
"name": "filter",
"variableName": "signatureFilter"
},
{
"kind": "Variable",
"name": "first",
"variableName": "count"
}
];
return {
"fragment": {
"argumentDefinitions": [
(v0/*: any*/),
(v1/*: any*/),
(v2/*: any*/),
(v3/*: any*/)
],
"kind": "Fragment",
"metadata": null,
"name": "DocumentSignaturesTabRefetchQuery",
"selections": [
{
"alias": null,
"args": (v4/*: any*/),
"concreteType": null,
"kind": "LinkedField",
"name": "node",
"plural": false,
"selections": [
{
"args": [
{
"kind": "Variable",
"name": "count",
"variableName": "count"
},
{
"kind": "Variable",
"name": "cursor",
"variableName": "cursor"
},
{
"kind": "Variable",
"name": "signatureFilter",
"variableName": "signatureFilter"
}
],
"kind": "FragmentSpread",
"name": "DocumentSignaturesTab_version"
}
],
"storageKey": null
}
],
"type": "Query",
"abstractKey": null
},
"kind": "Request",
"operation": {
"argumentDefinitions": [
(v0/*: any*/),
(v1/*: any*/),
(v3/*: any*/),
(v2/*: any*/)
],
"kind": "Operation",
"name": "DocumentSignaturesTabRefetchQuery",
"selections": [
{
"alias": null,
"args": (v4/*: any*/),
"concreteType": null,
"kind": "LinkedField",
"name": "node",
"plural": false,
"selections": [
(v5/*: any*/),
(v6/*: any*/),
{
"kind": "InlineFragment",
"selections": [
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "status",
"storageKey": null
},
{
"alias": null,
"args": (v7/*: any*/),
"concreteType": "DocumentVersionSignatureConnection",
"kind": "LinkedField",
"name": "signatures",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"concreteType": "DocumentVersionSignatureEdge",
"kind": "LinkedField",
"name": "edges",
"plural": true,
"selections": [
{
"alias": null,
"args": null,
"concreteType": "DocumentVersionSignature",
"kind": "LinkedField",
"name": "node",
"plural": false,
"selections": [
(v6/*: any*/),
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "state",
"storageKey": null
},
{
"alias": null,
"args": null,
"concreteType": "People",
"kind": "LinkedField",
"name": "signedBy",
"plural": false,
"selections": [
(v6/*: any*/),
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "fullName",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "primaryEmailAddress",
"storageKey": null
}
],
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "signedAt",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "requestedAt",
"storageKey": null
},
(v5/*: any*/)
],
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "cursor",
"storageKey": null
}
],
"storageKey": null
},
{
"alias": null,
"args": null,
"concreteType": "PageInfo",
"kind": "LinkedField",
"name": "pageInfo",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "endCursor",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "hasNextPage",
"storageKey": null
}
],
"storageKey": null
},
{
"kind": "ClientExtension",
"selections": [
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "__id",
"storageKey": null
}
]
}
],
"storageKey": null
},
{
"alias": null,
"args": (v7/*: any*/),
"filters": [
"filter"
],
"handle": "connection",
"key": "DocumentSignaturesTab_signatures",
"kind": "LinkedHandle",
"name": "signatures"
}
],
"type": "DocumentVersion",
"abstractKey": null
}
],
"storageKey": null
}
]
},
"params": {
"cacheID": "3f2497c26794429a940d920be7459a16",
"id": null,
"metadata": {},
"name": "DocumentSignaturesTabRefetchQuery",
"operationKind": "query",
"text": "query DocumentSignaturesTabRefetchQuery(\n $count: Int = 500\n $cursor: CursorKey\n $signatureFilter: DocumentVersionSignatureFilter\n $id: ID!\n) {\n node(id: $id) {\n __typename\n ...DocumentSignaturesTab_version_1vp7QE\n id\n }\n}\n\nfragment DocumentSignaturesTab_signature on DocumentVersionSignature {\n id\n state\n signedAt\n requestedAt\n signedBy {\n fullName\n primaryEmailAddress\n id\n }\n}\n\nfragment DocumentSignaturesTab_version_1vp7QE on DocumentVersion {\n id\n status\n signatures(first: $count, after: $cursor, filter: $signatureFilter) {\n edges {\n node {\n id\n state\n signedBy {\n id\n fullName\n primaryEmailAddress\n }\n ...DocumentSignaturesTab_signature\n __typename\n }\n cursor\n }\n pageInfo {\n endCursor\n hasNextPage\n }\n }\n}\n"
}
};
})();
(node as any).hash = "8692b71c860fba2b26a641a637920930";
export default node;

View File

@@ -0,0 +1,247 @@
/**
* @generated SignedSource<<c96d08087a8501e73c3600304efc444a>>
* @lightSyntaxTransform
* @nogrep
*/
/* tslint:disable */
/* eslint-disable */
// @ts-nocheck
import { ReaderFragment } from 'relay-runtime';
export type DocumentStatus = "DRAFT" | "PUBLISHED";
export type DocumentVersionSignatureState = "REQUESTED" | "SIGNED";
import { FragmentRefs } from "relay-runtime";
export type DocumentSignaturesTab_version$data = {
readonly id: string;
readonly signatures: {
readonly __id: string;
readonly edges: ReadonlyArray<{
readonly node: {
readonly id: string;
readonly signedBy: {
readonly fullName: string;
readonly id: string;
readonly primaryEmailAddress: string;
};
readonly state: DocumentVersionSignatureState;
readonly " $fragmentSpreads": FragmentRefs<"DocumentSignaturesTab_signature">;
};
}>;
};
readonly status: DocumentStatus;
readonly " $fragmentType": "DocumentSignaturesTab_version";
};
export type DocumentSignaturesTab_version$key = {
readonly " $data"?: DocumentSignaturesTab_version$data;
readonly " $fragmentSpreads": FragmentRefs<"DocumentSignaturesTab_version">;
};
import DocumentSignaturesTabRefetchQuery_graphql from './DocumentSignaturesTabRefetchQuery.graphql';
const node: ReaderFragment = (function(){
var v0 = [
"signatures"
],
v1 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "id",
"storageKey": null
};
return {
"argumentDefinitions": [
{
"defaultValue": 500,
"kind": "LocalArgument",
"name": "count"
},
{
"defaultValue": null,
"kind": "LocalArgument",
"name": "cursor"
},
{
"defaultValue": null,
"kind": "LocalArgument",
"name": "signatureFilter"
}
],
"kind": "Fragment",
"metadata": {
"connection": [
{
"count": "count",
"cursor": "cursor",
"direction": "forward",
"path": (v0/*: any*/)
}
],
"refetch": {
"connection": {
"forward": {
"count": "count",
"cursor": "cursor"
},
"backward": null,
"path": (v0/*: any*/)
},
"fragmentPathInResult": [
"node"
],
"operation": DocumentSignaturesTabRefetchQuery_graphql,
"identifierInfo": {
"identifierField": "id",
"identifierQueryVariableName": "id"
}
}
},
"name": "DocumentSignaturesTab_version",
"selections": [
(v1/*: any*/),
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "status",
"storageKey": null
},
{
"alias": "signatures",
"args": [
{
"kind": "Variable",
"name": "filter",
"variableName": "signatureFilter"
}
],
"concreteType": "DocumentVersionSignatureConnection",
"kind": "LinkedField",
"name": "__DocumentSignaturesTab_signatures_connection",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"concreteType": "DocumentVersionSignatureEdge",
"kind": "LinkedField",
"name": "edges",
"plural": true,
"selections": [
{
"alias": null,
"args": null,
"concreteType": "DocumentVersionSignature",
"kind": "LinkedField",
"name": "node",
"plural": false,
"selections": [
(v1/*: any*/),
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "state",
"storageKey": null
},
{
"alias": null,
"args": null,
"concreteType": "People",
"kind": "LinkedField",
"name": "signedBy",
"plural": false,
"selections": [
(v1/*: any*/),
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "fullName",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "primaryEmailAddress",
"storageKey": null
}
],
"storageKey": null
},
{
"args": null,
"kind": "FragmentSpread",
"name": "DocumentSignaturesTab_signature"
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "__typename",
"storageKey": null
}
],
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "cursor",
"storageKey": null
}
],
"storageKey": null
},
{
"alias": null,
"args": null,
"concreteType": "PageInfo",
"kind": "LinkedField",
"name": "pageInfo",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "endCursor",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "hasNextPage",
"storageKey": null
}
],
"storageKey": null
},
{
"kind": "ClientExtension",
"selections": [
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "__id",
"storageKey": null
}
]
}
],
"storageKey": null
}
],
"type": "DocumentVersion",
"abstractKey": null
};
})();
(node as any).hash = "8692b71c860fba2b26a641a637920930";
export default node;