diff --git a/apps/console/src/hooks/graph/PeopleGraph.ts b/apps/console/src/hooks/graph/PeopleGraph.ts index aa18016b8..531e2e6fb 100644 --- a/apps/console/src/hooks/graph/PeopleGraph.ts +++ b/apps/console/src/hooks/graph/PeopleGraph.ts @@ -56,7 +56,7 @@ export const paginatedPeopleQuery = graphql` } `; -const paginatedPeopleFragment = graphql` +export const paginatedPeopleFragment = graphql` fragment PeopleGraphPaginatedFragment on Organization @refetchable(queryName: "PeopleListQuery") @argumentDefinitions( diff --git a/apps/console/src/pages/organizations/documents/DocumentsPage.tsx b/apps/console/src/pages/organizations/documents/DocumentsPage.tsx index 1f64b1eef..8b535e6b8 100644 --- a/apps/console/src/pages/organizations/documents/DocumentsPage.tsx +++ b/apps/console/src/pages/organizations/documents/DocumentsPage.tsx @@ -39,9 +39,9 @@ import { sprintf, getDocumentTypeLabel } from "@probo/helpers"; import { CreateDocumentDialog } from "./dialogs/CreateDocumentDialog"; import type { DocumentsPageRowFragment$key } from "./__generated__/DocumentsPageRowFragment.graphql"; import { SortableTable, SortableTh } from "/components/SortableTable"; -import { useMutationWithToasts } from "/hooks/useMutationWithToasts.ts"; import { usePeople } from "/hooks/graph/PeopleGraph.ts"; import { PublishDocumentsDialog } from "./dialogs/PublishDocumentsDialog.tsx"; +import { SignatureDocumentsDialog } from "./dialogs/SignatureDocumentsDialog.tsx"; const documentsFragment = graphql` fragment DocumentsPageListFragment on Organization @@ -74,19 +74,6 @@ const documentsFragment = graphql` } `; -const documentsSignatureMutation = graphql` - mutation DocumentsPageSignatureMutation($input: BulkRequestSignaturesInput!) { - bulkRequestSignatures(input: $input) { - documentVersionSignatureEdges { - node { - id - state - } - } - } - } -`; - type Props = { queryRef: PreloadedQuery; }; @@ -108,13 +95,6 @@ export default function DocumentsPage(props: Props) { const [sendSigningNotifications] = useSendSigningNotificationsMutation(); const { list: selection, toggle, clear, reset } = useList([]); - const [signatureMutation, isSigning] = useMutationWithToasts( - documentsSignatureMutation, - { - successMessage: __("Signature request send successfully"), - errorMessage: __("Failed to send signature requests"), - } - ); const people = usePeople(organization.id); usePageTitle(__("Documents")); @@ -126,18 +106,6 @@ export default function DocumentsPage(props: Props) { }); }; - const requestSignatures = async () => { - await signatureMutation({ - variables: { - input: { - documentIds: selection, - signatoryIds: people.map((p) => p.id), - }, - }, - }); - clear(); - }; - return (
- + +
diff --git a/apps/console/src/pages/organizations/documents/dialogs/SignatureDocumentsDialog.tsx b/apps/console/src/pages/organizations/documents/dialogs/SignatureDocumentsDialog.tsx new file mode 100644 index 000000000..9d4a71f9d --- /dev/null +++ b/apps/console/src/pages/organizations/documents/dialogs/SignatureDocumentsDialog.tsx @@ -0,0 +1,172 @@ +import { + Button, + Dialog, + DialogContent, + DialogFooter, + useDialogRef, + Breadcrumb, + Tr, + Tbody, + Td, + Avatar, + Spinner, + Checkbox, + Table, + IconChevronDown, +} from "@probo/ui"; +import { Suspense, type FormEventHandler, type ReactNode } from "react"; +import { useTranslate } from "@probo/i18n"; +import { graphql } from "relay-runtime"; +import { sprintf } from "@probo/helpers"; +import { useMutationWithToasts } from "/hooks/useMutationWithToasts.ts"; +import { useOrganizationId } from "/hooks/useOrganizationId.ts"; +import { + paginatedPeopleFragment, + paginatedPeopleQuery, +} from "/hooks/graph/PeopleGraph.ts"; +import { useList } from "@probo/hooks"; +import { useLazyLoadQuery, usePaginationFragment } from "react-relay"; +import type { PeopleGraphPaginatedFragment$key } from "/hooks/graph/__generated__/PeopleGraphPaginatedFragment.graphql.ts"; +import type { PeopleGraphPaginatedQuery } from "/hooks/graph/__generated__/PeopleGraphPaginatedQuery.graphql.ts"; + +type Props = { + documentIds: string[]; + children: ReactNode; + onSave: () => void; +}; + +const documentsSignatureMutation = graphql` + mutation SignatureDocumentsDialogMutation( + $input: BulkRequestSignaturesInput! + ) { + bulkRequestSignatures(input: $input) { + documentVersionSignatureEdges { + node { + id + state + } + } + } + } +`; + +export function SignatureDocumentsDialog({ + documentIds, + children, + onSave, +}: Props) { + const { __ } = useTranslate(); + const dialogRef = useDialogRef(); + const { list: selectedPeople, toggle } = useList([]); + const [publishMutation] = useMutationWithToasts(documentsSignatureMutation, { + successMessage: sprintf( + __("%s signature requests sent"), + documentIds.length + ), + errorMessage: __("Failed to send signature requests"), + }); + + const onSubmit: FormEventHandler = async (e) => { + e.preventDefault(); + await publishMutation({ + variables: { + input: { + documentIds, + signatoryIds: selectedPeople, + }, + }, + }); + dialogRef.current?.close(); + onSave(); + }; + + return ( + } + > +
+ + }> + + + + + + +
+ + ); +} + +function PeopleList({ + onChange, + selectedPeople, +}: { + onChange: (id: string) => void; + selectedPeople: string[]; +}) { + const { __ } = useTranslate(); + const organizationId = useOrganizationId(); + const data = useLazyLoadQuery( + paginatedPeopleQuery, + { + organizationId, + } + ); + const { + data: page, + hasNext, + loadNext, + isLoadingNext, + } = usePaginationFragment( + paginatedPeopleFragment, + data.organization as PeopleGraphPaginatedFragment$key + ); + const people = page.peoples.edges.map((edge) => edge.node); + return ( + <> + + + {people.map((person) => ( + + + + + ))} + +
+ onChange(person.id)} + /> + +
+ +
+
{person.fullName}
+
+ {person.primaryEmailAddress} +
+
+
+
+ {isLoadingNext && } + {hasNext && ( + + )} + + ); +} diff --git a/apps/console/src/pages/organizations/documents/__generated__/DocumentsPageSignatureMutation.graphql.ts b/apps/console/src/pages/organizations/documents/dialogs/__generated__/SignatureDocumentsDialogMutation.graphql.ts similarity index 75% rename from apps/console/src/pages/organizations/documents/__generated__/DocumentsPageSignatureMutation.graphql.ts rename to apps/console/src/pages/organizations/documents/dialogs/__generated__/SignatureDocumentsDialogMutation.graphql.ts index f741a8b7b..651fca514 100644 --- a/apps/console/src/pages/organizations/documents/__generated__/DocumentsPageSignatureMutation.graphql.ts +++ b/apps/console/src/pages/organizations/documents/dialogs/__generated__/SignatureDocumentsDialogMutation.graphql.ts @@ -1,5 +1,5 @@ /** - * @generated SignedSource<<4c3514470041046f80f410ea5a3275d6>> + * @generated SignedSource<<14890a4f10a8862a8aaf30ee1dc6f065>> * @lightSyntaxTransform * @nogrep */ @@ -14,10 +14,10 @@ export type BulkRequestSignaturesInput = { documentIds: ReadonlyArray; signatoryIds: ReadonlyArray; }; -export type DocumentsPageSignatureMutation$variables = { +export type SignatureDocumentsDialogMutation$variables = { input: BulkRequestSignaturesInput; }; -export type DocumentsPageSignatureMutation$data = { +export type SignatureDocumentsDialogMutation$data = { readonly bulkRequestSignatures: { readonly documentVersionSignatureEdges: ReadonlyArray<{ readonly node: { @@ -27,9 +27,9 @@ export type DocumentsPageSignatureMutation$data = { }>; }; }; -export type DocumentsPageSignatureMutation = { - response: DocumentsPageSignatureMutation$data; - variables: DocumentsPageSignatureMutation$variables; +export type SignatureDocumentsDialogMutation = { + response: SignatureDocumentsDialogMutation$data; + variables: SignatureDocumentsDialogMutation$variables; }; const node: ConcreteRequest = (function(){ @@ -100,7 +100,7 @@ return { "argumentDefinitions": (v0/*: any*/), "kind": "Fragment", "metadata": null, - "name": "DocumentsPageSignatureMutation", + "name": "SignatureDocumentsDialogMutation", "selections": (v1/*: any*/), "type": "Mutation", "abstractKey": null @@ -109,20 +109,20 @@ return { "operation": { "argumentDefinitions": (v0/*: any*/), "kind": "Operation", - "name": "DocumentsPageSignatureMutation", + "name": "SignatureDocumentsDialogMutation", "selections": (v1/*: any*/) }, "params": { - "cacheID": "a61a828bc67d8b569c38f4826b42d00f", + "cacheID": "4426d76c855d441caab5c932c2ceb2ba", "id": null, "metadata": {}, - "name": "DocumentsPageSignatureMutation", + "name": "SignatureDocumentsDialogMutation", "operationKind": "mutation", - "text": "mutation DocumentsPageSignatureMutation(\n $input: BulkRequestSignaturesInput!\n) {\n bulkRequestSignatures(input: $input) {\n documentVersionSignatureEdges {\n node {\n id\n state\n }\n }\n }\n}\n" + "text": "mutation SignatureDocumentsDialogMutation(\n $input: BulkRequestSignaturesInput!\n) {\n bulkRequestSignatures(input: $input) {\n documentVersionSignatureEdges {\n node {\n id\n state\n }\n }\n }\n}\n" } }; })(); -(node as any).hash = "1cb2b7dfa938b35cf75b09b51cdd2dca"; +(node as any).hash = "1dbd9a7870416bf75d0a6fe44ebde408"; export default node;