Refactor documents page

Signed-off-by: Émile Ré <emile@getprobo.com>
This commit is contained in:
Émile Ré
2026-01-26 15:31:08 +04:00
parent a05ba46f82
commit 3f96869b6b
21 changed files with 1441 additions and 636 deletions

View File

@@ -1,5 +1,5 @@
/**
* @generated SignedSource<<8a75dcc06cfe213df84407b8855d73c9>>
* @generated SignedSource<<766e48d090179d20cc6a7b1d6bc6591f>>
* @lightSyntaxTransform
* @nogrep
*/
@@ -31,7 +31,7 @@ export type CreateDocumentDialogMutation$data = {
readonly documentEdge: {
readonly node: {
readonly id: string;
readonly " $fragmentSpreads": FragmentRefs<"DocumentsPageRowFragment">;
readonly " $fragmentSpreads": FragmentRefs<"DocumentListItemFragment">;
};
};
};
@@ -104,7 +104,7 @@ return {
{
"args": null,
"kind": "FragmentSpread",
"name": "DocumentsPageRowFragment"
"name": "DocumentListItemFragment"
}
],
"storageKey": null
@@ -160,13 +160,6 @@ return {
"name": "title",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "description",
"storageKey": null
},
{
"alias": null,
"args": null,
@@ -349,16 +342,16 @@ return {
]
},
"params": {
"cacheID": "8f0e8730a2b85c51592d45cbf4ad8b1e",
"cacheID": "20ca0b6c942e66b92ced0b4869262530",
"id": null,
"metadata": {},
"name": "CreateDocumentDialogMutation",
"operationKind": "mutation",
"text": "mutation CreateDocumentDialogMutation(\n $input: CreateDocumentInput!\n) {\n createDocument(input: $input) {\n documentEdge {\n node {\n id\n ...DocumentsPageRowFragment\n }\n }\n }\n}\n\nfragment DocumentsPageRowFragment on Document {\n id\n title\n description\n documentType\n classification\n updatedAt\n canDelete: permission(action: \"core:document:delete\")\n owner {\n id\n fullName\n }\n versions(first: 1) {\n edges {\n node {\n id\n status\n version\n signatures(first: 1000) {\n edges {\n node {\n id\n state\n }\n }\n }\n }\n }\n }\n}\n"
"text": "mutation CreateDocumentDialogMutation(\n $input: CreateDocumentInput!\n) {\n createDocument(input: $input) {\n documentEdge {\n node {\n id\n ...DocumentListItemFragment\n }\n }\n }\n}\n\nfragment DocumentListItemFragment on Document {\n id\n title\n documentType\n classification\n updatedAt\n canDelete: permission(action: \"core:document:delete\")\n owner {\n id\n fullName\n }\n versions(first: 1) {\n edges {\n node {\n id\n status\n version\n signatures(first: 1000) {\n edges {\n node {\n id\n state\n }\n }\n }\n }\n }\n }\n}\n"
}
};
})();
(node as any).hash = "19d6bd18594154b918c529d15f7ee8d7";
(node as any).hash = "30ea1213f809faa45e873b069e27df26";
export default node;

View File

@@ -1,5 +1,5 @@
/**
* @generated SignedSource<<4531c90194c8da0c1cbd00e5e169ff00>>
* @generated SignedSource<<05daa30144e3f6586a379aaffc86a05e>>
* @lightSyntaxTransform
* @nogrep
*/
@@ -10,26 +10,25 @@
import { ReaderFragment } from 'relay-runtime';
import { FragmentRefs } from "relay-runtime";
export type DocumentsPageListFragment$data = {
export type DocumentListFragment$data = {
readonly documents: {
readonly __id: string;
readonly edges: ReadonlyArray<{
readonly node: {
readonly canDelete: boolean;
readonly canRequestSignatures: boolean;
readonly canSendSigningNotifications: boolean;
readonly canUpdate: boolean;
readonly id: string;
readonly " $fragmentSpreads": FragmentRefs<"DocumentsPageRowFragment">;
readonly " $fragmentSpreads": FragmentRefs<"DocumentListItemFragment">;
};
}>;
};
readonly id: string;
readonly " $fragmentType": "DocumentsPageListFragment";
readonly " $fragmentType": "DocumentListFragment";
};
export type DocumentsPageListFragment$key = {
readonly " $data"?: DocumentsPageListFragment$data;
readonly " $fragmentSpreads": FragmentRefs<"DocumentsPageListFragment">;
export type DocumentListFragment$key = {
readonly " $data"?: DocumentListFragment$data;
readonly " $fragmentSpreads": FragmentRefs<"DocumentListFragment">;
};
import DocumentsListQuery_graphql from './DocumentsListQuery.graphql';
@@ -108,7 +107,7 @@ return {
}
}
},
"name": "DocumentsPageListFragment",
"name": "DocumentListFragment",
"selections": [
{
"alias": "documents",
@@ -167,19 +166,6 @@ return {
"name": "permission",
"storageKey": "permission(action:\"core:document:delete\")"
},
{
"alias": "canSendSigningNotifications",
"args": [
{
"kind": "Literal",
"name": "action",
"value": "core:document:send-signing-notifications"
}
],
"kind": "ScalarField",
"name": "permission",
"storageKey": "permission(action:\"core:document:send-signing-notifications\")"
},
{
"alias": "canRequestSignatures",
"args": [
@@ -196,7 +182,7 @@ return {
{
"args": null,
"kind": "FragmentSpread",
"name": "DocumentsPageRowFragment"
"name": "DocumentListItemFragment"
},
{
"alias": null,
@@ -279,6 +265,6 @@ return {
};
})();
(node as any).hash = "0f00d125fc711db9e65d54dcc884a72e";
(node as any).hash = "496614376a52d4557bcb06057863554e";
export default node;

View File

@@ -1,5 +1,5 @@
/**
* @generated SignedSource<<9d93eb8b8aedef57b8a20e267b61bc08>>
* @generated SignedSource<<664a9b09aac444c69891219cca1c6b8d>>
* @lightSyntaxTransform
* @nogrep
*/
@@ -14,10 +14,9 @@ export type DocumentStatus = "DRAFT" | "PUBLISHED";
export type DocumentType = "ISMS" | "OTHER" | "POLICY" | "PROCEDURE";
export type DocumentVersionSignatureState = "REQUESTED" | "SIGNED";
import { FragmentRefs } from "relay-runtime";
export type DocumentsPageRowFragment$data = {
export type DocumentListItemFragment$data = {
readonly canDelete: boolean;
readonly classification: DocumentClassification;
readonly description: string | null | undefined;
readonly documentType: DocumentType;
readonly id: string;
readonly owner: {
@@ -43,11 +42,11 @@ export type DocumentsPageRowFragment$data = {
};
}>;
};
readonly " $fragmentType": "DocumentsPageRowFragment";
readonly " $fragmentType": "DocumentListItemFragment";
};
export type DocumentsPageRowFragment$key = {
readonly " $data"?: DocumentsPageRowFragment$data;
readonly " $fragmentSpreads": FragmentRefs<"DocumentsPageRowFragment">;
export type DocumentListItemFragment$key = {
readonly " $data"?: DocumentListItemFragment$data;
readonly " $fragmentSpreads": FragmentRefs<"DocumentListItemFragment">;
};
const node: ReaderFragment = (function(){
@@ -62,7 +61,7 @@ return {
"argumentDefinitions": [],
"kind": "Fragment",
"metadata": null,
"name": "DocumentsPageRowFragment",
"name": "DocumentListItemFragment",
"selections": [
(v0/*: any*/),
{
@@ -72,13 +71,6 @@ return {
"name": "title",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "description",
"storageKey": null
},
{
"alias": null,
"args": null,
@@ -239,6 +231,6 @@ return {
};
})();
(node as any).hash = "4164f76edc42d40eef1efc54194116ec";
(node as any).hash = "6c4db808e4ec47dbca635feb3ea13e56";
export default node;

View File

@@ -0,0 +1,132 @@
/**
* @generated SignedSource<<588b3953b36814ede0cd490eeaa6f99d>>
* @lightSyntaxTransform
* @nogrep
*/
/* tslint:disable */
/* eslint-disable */
// @ts-nocheck
import { ConcreteRequest } from 'relay-runtime';
export type DeleteDocumentInput = {
documentId: string;
};
export type DocumentListItem_deleteMutation$variables = {
connections: ReadonlyArray<string>;
input: DeleteDocumentInput;
};
export type DocumentListItem_deleteMutation$data = {
readonly deleteDocument: {
readonly deletedDocumentId: string;
};
};
export type DocumentListItem_deleteMutation = {
response: DocumentListItem_deleteMutation$data;
variables: DocumentListItem_deleteMutation$variables;
};
const node: ConcreteRequest = (function(){
var v0 = {
"defaultValue": null,
"kind": "LocalArgument",
"name": "connections"
},
v1 = {
"defaultValue": null,
"kind": "LocalArgument",
"name": "input"
},
v2 = [
{
"kind": "Variable",
"name": "input",
"variableName": "input"
}
],
v3 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "deletedDocumentId",
"storageKey": null
};
return {
"fragment": {
"argumentDefinitions": [
(v0/*: any*/),
(v1/*: any*/)
],
"kind": "Fragment",
"metadata": null,
"name": "DocumentListItem_deleteMutation",
"selections": [
{
"alias": null,
"args": (v2/*: any*/),
"concreteType": "DeleteDocumentPayload",
"kind": "LinkedField",
"name": "deleteDocument",
"plural": false,
"selections": [
(v3/*: any*/)
],
"storageKey": null
}
],
"type": "Mutation",
"abstractKey": null
},
"kind": "Request",
"operation": {
"argumentDefinitions": [
(v1/*: any*/),
(v0/*: any*/)
],
"kind": "Operation",
"name": "DocumentListItem_deleteMutation",
"selections": [
{
"alias": null,
"args": (v2/*: any*/),
"concreteType": "DeleteDocumentPayload",
"kind": "LinkedField",
"name": "deleteDocument",
"plural": false,
"selections": [
(v3/*: any*/),
{
"alias": null,
"args": null,
"filters": null,
"handle": "deleteEdge",
"key": "",
"kind": "ScalarHandle",
"name": "deletedDocumentId",
"handleArgs": [
{
"kind": "Variable",
"name": "connections",
"variableName": "connections"
}
]
}
],
"storageKey": null
}
]
},
"params": {
"cacheID": "de0d3cda546f944c8ae3a0ae98aa8bcb",
"id": null,
"metadata": {},
"name": "DocumentListItem_deleteMutation",
"operationKind": "mutation",
"text": "mutation DocumentListItem_deleteMutation(\n $input: DeleteDocumentInput!\n) {\n deleteDocument(input: $input) {\n deletedDocumentId\n }\n}\n"
}
};
})();
(node as any).hash = "91fbf2fc8563f4ffe8732193a815de77";
export default node;

View File

@@ -1,5 +1,5 @@
/**
* @generated SignedSource<<ba35b8d51574d7e6b61987743636f5bb>>
* @generated SignedSource<<f3ca69e3f5731e73dc9f4268b0507adc>>
* @lightSyntaxTransform
* @nogrep
*/
@@ -26,7 +26,7 @@ export type DocumentsListQuery$variables = {
};
export type DocumentsListQuery$data = {
readonly node: {
readonly " $fragmentSpreads": FragmentRefs<"DocumentsPageListFragment">;
readonly " $fragmentSpreads": FragmentRefs<"DocumentListFragment">;
};
};
export type DocumentsListQuery = {
@@ -155,7 +155,7 @@ return {
}
],
"kind": "FragmentSpread",
"name": "DocumentsPageListFragment"
"name": "DocumentListFragment"
}
],
"storageKey": null
@@ -241,19 +241,6 @@ return {
"name": "permission",
"storageKey": "permission(action:\"core:document:delete\")"
},
{
"alias": "canSendSigningNotifications",
"args": [
{
"kind": "Literal",
"name": "action",
"value": "core:document:send-signing-notifications"
}
],
"kind": "ScalarField",
"name": "permission",
"storageKey": "permission(action:\"core:document:send-signing-notifications\")"
},
{
"alias": "canRequestSignatures",
"args": [
@@ -274,13 +261,6 @@ return {
"name": "title",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "description",
"storageKey": null
},
{
"alias": null,
"args": null,
@@ -511,16 +491,16 @@ return {
]
},
"params": {
"cacheID": "c7b8d86af8a704ba0a6451bd3877746f",
"cacheID": "c404cb30a5176c7d01cace940923f480",
"id": null,
"metadata": {},
"name": "DocumentsListQuery",
"operationKind": "query",
"text": "query DocumentsListQuery(\n $after: CursorKey = null\n $before: CursorKey = null\n $first: Int = 50\n $last: Int = null\n $order: DocumentOrder = {field: TITLE, direction: ASC}\n $id: ID!\n) {\n node(id: $id) {\n __typename\n ...DocumentsPageListFragment_16fISc\n id\n }\n}\n\nfragment DocumentsPageListFragment_16fISc on Organization {\n documents(first: $first, after: $after, last: $last, before: $before, orderBy: $order) {\n edges {\n node {\n id\n canUpdate: permission(action: \"core:document:update\")\n canDelete: permission(action: \"core:document:delete\")\n canSendSigningNotifications: permission(action: \"core:document:send-signing-notifications\")\n canRequestSignatures: permission(action: \"core:document-version:request-signature\")\n ...DocumentsPageRowFragment\n __typename\n }\n cursor\n }\n pageInfo {\n endCursor\n hasNextPage\n hasPreviousPage\n startCursor\n }\n }\n id\n}\n\nfragment DocumentsPageRowFragment on Document {\n id\n title\n description\n documentType\n classification\n updatedAt\n canDelete: permission(action: \"core:document:delete\")\n owner {\n id\n fullName\n }\n versions(first: 1) {\n edges {\n node {\n id\n status\n version\n signatures(first: 1000) {\n edges {\n node {\n id\n state\n }\n }\n }\n }\n }\n }\n}\n"
"text": "query DocumentsListQuery(\n $after: CursorKey = null\n $before: CursorKey = null\n $first: Int = 50\n $last: Int = null\n $order: DocumentOrder = {field: TITLE, direction: ASC}\n $id: ID!\n) {\n node(id: $id) {\n __typename\n ...DocumentListFragment_16fISc\n id\n }\n}\n\nfragment DocumentListFragment_16fISc on Organization {\n documents(first: $first, after: $after, last: $last, before: $before, orderBy: $order) {\n edges {\n node {\n id\n canUpdate: permission(action: \"core:document:update\")\n canDelete: permission(action: \"core:document:delete\")\n canRequestSignatures: permission(action: \"core:document-version:request-signature\")\n ...DocumentListItemFragment\n __typename\n }\n cursor\n }\n pageInfo {\n endCursor\n hasNextPage\n hasPreviousPage\n startCursor\n }\n }\n id\n}\n\nfragment DocumentListItemFragment on Document {\n id\n title\n documentType\n classification\n updatedAt\n canDelete: permission(action: \"core:document:delete\")\n owner {\n id\n fullName\n }\n versions(first: 1) {\n edges {\n node {\n id\n status\n version\n signatures(first: 1000) {\n edges {\n node {\n id\n state\n }\n }\n }\n }\n }\n }\n}\n"
}
};
})();
(node as any).hash = "0f00d125fc711db9e65d54dcc884a72e";
(node as any).hash = "496614376a52d4557bcb06057863554e";
export default node;

View File

@@ -1,5 +1,5 @@
/**
* @generated SignedSource<<8982230c048c28cb211d5368b1ab43a0>>
* @generated SignedSource<<fc98d690c8825d5c202355ffd63a4244>>
* @lightSyntaxTransform
* @nogrep
*/
@@ -10,19 +10,30 @@
import { ConcreteRequest } from 'relay-runtime';
import { FragmentRefs } from "relay-runtime";
export type DocumentGraphListQuery$variables = {
export type DocumentsPageQuery$variables = {
organizationId: string;
};
export type DocumentGraphListQuery$data = {
export type DocumentsPageQuery$data = {
readonly organization: {
readonly canCreateDocument?: boolean;
readonly id: string;
readonly " $fragmentSpreads": FragmentRefs<"DocumentsPageListFragment">;
readonly __typename: "Organization";
readonly canCreateDocument: boolean;
readonly documents: {
readonly edges: ReadonlyArray<{
readonly node: {
readonly canSendSigningNotifications: boolean;
};
}>;
};
readonly " $fragmentSpreads": FragmentRefs<"DocumentListFragment">;
} | {
// This will never be '%other', but we need some
// value in case none of the concrete values match.
readonly __typename: "%other";
};
};
export type DocumentGraphListQuery = {
response: DocumentGraphListQuery$data;
variables: DocumentGraphListQuery$variables;
export type DocumentsPageQuery = {
response: DocumentsPageQuery$data;
variables: DocumentsPageQuery$variables;
};
const node: ConcreteRequest = (function(){
@@ -44,7 +55,7 @@ v2 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "id",
"name": "__typename",
"storageKey": null
},
v3 = {
@@ -61,33 +72,48 @@ v3 = {
"storageKey": "permission(action:\"core:document:create\")"
},
v4 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "__typename",
"storageKey": null
"kind": "Literal",
"name": "first",
"value": 50
},
v5 = [
{
"kind": "Literal",
"name": "first",
"value": 50
},
v5 = {
"direction": "ASC",
"field": "TITLE"
},
v6 = [
(v4/*: any*/),
{
"kind": "Literal",
"name": "orderBy",
"value": {
"direction": "ASC",
"field": "TITLE"
}
"value": (v5/*: any*/)
}
];
],
v7 = {
"alias": "canSendSigningNotifications",
"args": [
{
"kind": "Literal",
"name": "action",
"value": "core:document:send-signing-notifications"
}
],
"kind": "ScalarField",
"name": "permission",
"storageKey": "permission(action:\"core:document:send-signing-notifications\")"
},
v8 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "id",
"storageKey": null
};
return {
"fragment": {
"argumentDefinitions": (v0/*: any*/),
"kind": "Fragment",
"metadata": null,
"name": "DocumentGraphListQuery",
"name": "DocumentsPageQuery",
"selections": [
{
"alias": "organization",
@@ -103,44 +129,20 @@ return {
"selections": [
(v3/*: any*/),
{
"args": null,
"args": [
(v4/*: any*/),
{
"kind": "Literal",
"name": "order",
"value": (v5/*: any*/)
}
],
"kind": "FragmentSpread",
"name": "DocumentsPageListFragment"
}
],
"type": "Organization",
"abstractKey": null
}
],
"storageKey": null
}
],
"type": "Query",
"abstractKey": null
},
"kind": "Request",
"operation": {
"argumentDefinitions": (v0/*: any*/),
"kind": "Operation",
"name": "DocumentGraphListQuery",
"selections": [
{
"alias": "organization",
"args": (v1/*: any*/),
"concreteType": null,
"kind": "LinkedField",
"name": "node",
"plural": false,
"selections": [
(v4/*: any*/),
(v2/*: any*/),
{
"kind": "InlineFragment",
"selections": [
(v3/*: any*/),
"name": "DocumentListFragment"
},
{
"alias": null,
"args": (v5/*: any*/),
"args": (v6/*: any*/),
"concreteType": "DocumentConnection",
"kind": "LinkedField",
"name": "documents",
@@ -162,7 +164,72 @@ return {
"name": "node",
"plural": false,
"selections": [
(v2/*: any*/),
(v7/*: any*/)
],
"storageKey": null
}
],
"storageKey": null
}
],
"storageKey": "documents(first:50,orderBy:{\"direction\":\"ASC\",\"field\":\"TITLE\"})"
}
],
"type": "Organization",
"abstractKey": null
}
],
"storageKey": null
}
],
"type": "Query",
"abstractKey": null
},
"kind": "Request",
"operation": {
"argumentDefinitions": (v0/*: any*/),
"kind": "Operation",
"name": "DocumentsPageQuery",
"selections": [
{
"alias": "organization",
"args": (v1/*: any*/),
"concreteType": null,
"kind": "LinkedField",
"name": "node",
"plural": false,
"selections": [
(v2/*: any*/),
(v8/*: any*/),
{
"kind": "InlineFragment",
"selections": [
(v3/*: any*/),
{
"alias": null,
"args": (v6/*: any*/),
"concreteType": "DocumentConnection",
"kind": "LinkedField",
"name": "documents",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"concreteType": "DocumentEdge",
"kind": "LinkedField",
"name": "edges",
"plural": true,
"selections": [
{
"alias": null,
"args": null,
"concreteType": "Document",
"kind": "LinkedField",
"name": "node",
"plural": false,
"selections": [
(v8/*: any*/),
{
"alias": "canUpdate",
"args": [
@@ -189,19 +256,6 @@ return {
"name": "permission",
"storageKey": "permission(action:\"core:document:delete\")"
},
{
"alias": "canSendSigningNotifications",
"args": [
{
"kind": "Literal",
"name": "action",
"value": "core:document:send-signing-notifications"
}
],
"kind": "ScalarField",
"name": "permission",
"storageKey": "permission(action:\"core:document:send-signing-notifications\")"
},
{
"alias": "canRequestSignatures",
"args": [
@@ -222,13 +276,6 @@ return {
"name": "title",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "description",
"storageKey": null
},
{
"alias": null,
"args": null,
@@ -258,7 +305,7 @@ return {
"name": "owner",
"plural": false,
"selections": [
(v2/*: any*/),
(v8/*: any*/),
{
"alias": null,
"args": null,
@@ -299,7 +346,7 @@ return {
"name": "node",
"plural": false,
"selections": [
(v2/*: any*/),
(v8/*: any*/),
{
"alias": null,
"args": null,
@@ -344,7 +391,7 @@ return {
"name": "node",
"plural": false,
"selections": [
(v2/*: any*/),
(v8/*: any*/),
{
"alias": null,
"args": null,
@@ -370,7 +417,8 @@ return {
],
"storageKey": "versions(first:1)"
},
(v4/*: any*/)
(v2/*: any*/),
(v7/*: any*/)
],
"storageKey": null
},
@@ -440,7 +488,7 @@ return {
},
{
"alias": null,
"args": (v5/*: any*/),
"args": (v6/*: any*/),
"filters": [
"orderBy"
],
@@ -459,16 +507,16 @@ return {
]
},
"params": {
"cacheID": "7c027bc02697b43718813a5bd024985a",
"cacheID": "2ff9e1818d86d64d512a54ec9acebb16",
"id": null,
"metadata": {},
"name": "DocumentGraphListQuery",
"name": "DocumentsPageQuery",
"operationKind": "query",
"text": "query DocumentGraphListQuery(\n $organizationId: ID!\n) {\n organization: node(id: $organizationId) {\n __typename\n id\n ... on Organization {\n canCreateDocument: permission(action: \"core:document:create\")\n ...DocumentsPageListFragment\n }\n }\n}\n\nfragment DocumentsPageListFragment on Organization {\n documents(first: 50, orderBy: {field: TITLE, direction: ASC}) {\n edges {\n node {\n id\n canUpdate: permission(action: \"core:document:update\")\n canDelete: permission(action: \"core:document:delete\")\n canSendSigningNotifications: permission(action: \"core:document:send-signing-notifications\")\n canRequestSignatures: permission(action: \"core:document-version:request-signature\")\n ...DocumentsPageRowFragment\n __typename\n }\n cursor\n }\n pageInfo {\n endCursor\n hasNextPage\n hasPreviousPage\n startCursor\n }\n }\n id\n}\n\nfragment DocumentsPageRowFragment on Document {\n id\n title\n description\n documentType\n classification\n updatedAt\n canDelete: permission(action: \"core:document:delete\")\n owner {\n id\n fullName\n }\n versions(first: 1) {\n edges {\n node {\n id\n status\n version\n signatures(first: 1000) {\n edges {\n node {\n id\n state\n }\n }\n }\n }\n }\n }\n}\n"
"text": "query DocumentsPageQuery(\n $organizationId: ID!\n) {\n organization: node(id: $organizationId) {\n __typename\n ... on Organization {\n canCreateDocument: permission(action: \"core:document:create\")\n ...DocumentListFragment_1WMmEg\n documents(first: 50, orderBy: {field: TITLE, direction: ASC}) {\n edges {\n node {\n canSendSigningNotifications: permission(action: \"core:document:send-signing-notifications\")\n id\n }\n }\n }\n }\n id\n }\n}\n\nfragment DocumentListFragment_1WMmEg on Organization {\n documents(first: 50, orderBy: {field: TITLE, direction: ASC}) {\n edges {\n node {\n id\n canUpdate: permission(action: \"core:document:update\")\n canDelete: permission(action: \"core:document:delete\")\n canRequestSignatures: permission(action: \"core:document-version:request-signature\")\n ...DocumentListItemFragment\n __typename\n }\n cursor\n }\n pageInfo {\n endCursor\n hasNextPage\n hasPreviousPage\n startCursor\n }\n }\n id\n}\n\nfragment DocumentListItemFragment on Document {\n id\n title\n documentType\n classification\n updatedAt\n canDelete: permission(action: \"core:document:delete\")\n owner {\n id\n fullName\n }\n versions(first: 1) {\n edges {\n node {\n id\n status\n version\n signatures(first: 1000) {\n edges {\n node {\n id\n state\n }\n }\n }\n }\n }\n }\n}\n"
}
};
})();
(node as any).hash = "26c7d375cb354649741ce4794612b3e1";
(node as any).hash = "03658a05617ef4f971ed6b0c2758fa87";
export default node;

View File

@@ -0,0 +1,153 @@
/**
* @generated SignedSource<<594acd2efe2323614220c1898b2e2cc9>>
* @lightSyntaxTransform
* @nogrep
*/
/* tslint:disable */
/* eslint-disable */
// @ts-nocheck
import { ConcreteRequest } from 'relay-runtime';
export type CreateApplicabilityStatementInput = {
applicability: boolean;
controlId: string;
justification?: string | null | undefined;
stateOfApplicabilityId: string;
};
export type LinkControlDialogLinkMutation$variables = {
input: CreateApplicabilityStatementInput;
};
export type LinkControlDialogLinkMutation$data = {
readonly createApplicabilityStatement: {
readonly applicabilityStatementEdge: {
readonly node: {
readonly applicability: boolean;
readonly control: {
readonly id: string;
};
readonly id: string;
readonly justification: string;
};
};
};
};
export type LinkControlDialogLinkMutation = {
response: LinkControlDialogLinkMutation$data;
variables: LinkControlDialogLinkMutation$variables;
};
const node: ConcreteRequest = (function(){
var v0 = [
{
"defaultValue": null,
"kind": "LocalArgument",
"name": "input"
}
],
v1 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "id",
"storageKey": null
},
v2 = [
{
"alias": null,
"args": [
{
"kind": "Variable",
"name": "input",
"variableName": "input"
}
],
"concreteType": "CreateApplicabilityStatementPayload",
"kind": "LinkedField",
"name": "createApplicabilityStatement",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"concreteType": "ApplicabilityStatementEdge",
"kind": "LinkedField",
"name": "applicabilityStatementEdge",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"concreteType": "ApplicabilityStatement",
"kind": "LinkedField",
"name": "node",
"plural": false,
"selections": [
(v1/*: any*/),
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "applicability",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "justification",
"storageKey": null
},
{
"alias": null,
"args": null,
"concreteType": "Control",
"kind": "LinkedField",
"name": "control",
"plural": false,
"selections": [
(v1/*: any*/)
],
"storageKey": null
}
],
"storageKey": null
}
],
"storageKey": null
}
],
"storageKey": null
}
];
return {
"fragment": {
"argumentDefinitions": (v0/*: any*/),
"kind": "Fragment",
"metadata": null,
"name": "LinkControlDialogLinkMutation",
"selections": (v2/*: any*/),
"type": "Mutation",
"abstractKey": null
},
"kind": "Request",
"operation": {
"argumentDefinitions": (v0/*: any*/),
"kind": "Operation",
"name": "LinkControlDialogLinkMutation",
"selections": (v2/*: any*/)
},
"params": {
"cacheID": "bc215d6cb4d4aa2b0396f06797f6fbfe",
"id": null,
"metadata": {},
"name": "LinkControlDialogLinkMutation",
"operationKind": "mutation",
"text": "mutation LinkControlDialogLinkMutation(\n $input: CreateApplicabilityStatementInput!\n) {\n createApplicabilityStatement(input: $input) {\n applicabilityStatementEdge {\n node {\n id\n applicability\n justification\n control {\n id\n }\n }\n }\n }\n}\n"
}
};
})();
(node as any).hash = "0d4c01841f5e34d1c0d5517770486985";
export default node;

View File

@@ -0,0 +1,352 @@
/**
* @generated SignedSource<<f51d061c1d9a85eaa1258b4b4bd269a6>>
* @lightSyntaxTransform
* @nogrep
*/
/* tslint:disable */
/* eslint-disable */
// @ts-nocheck
import { ConcreteRequest } from 'relay-runtime';
export type LinkControlDialogQuery$variables = {
organizationId: string;
stateOfApplicabilityId: string;
};
export type LinkControlDialogQuery$data = {
readonly organization: {
readonly controls?: {
readonly edges: ReadonlyArray<{
readonly node: {
readonly framework: {
readonly id: string;
readonly name: string;
};
readonly id: string;
readonly name: string;
readonly sectionTitle: string;
};
}>;
};
readonly id?: string;
};
readonly stateOfApplicability: {
readonly applicabilityStatements?: {
readonly edges: ReadonlyArray<{
readonly node: {
readonly applicability: boolean;
readonly control: {
readonly id: string;
};
readonly id: string;
readonly justification: string;
};
}>;
};
readonly id?: string;
};
};
export type LinkControlDialogQuery = {
response: LinkControlDialogQuery$data;
variables: LinkControlDialogQuery$variables;
};
const node: ConcreteRequest = (function(){
var v0 = {
"defaultValue": null,
"kind": "LocalArgument",
"name": "organizationId"
},
v1 = {
"defaultValue": null,
"kind": "LocalArgument",
"name": "stateOfApplicabilityId"
},
v2 = [
{
"kind": "Variable",
"name": "id",
"variableName": "stateOfApplicabilityId"
}
],
v3 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "id",
"storageKey": null
},
v4 = {
"kind": "Literal",
"name": "first",
"value": 10000
},
v5 = {
"alias": null,
"args": [
(v4/*: any*/)
],
"concreteType": "ApplicabilityStatementConnection",
"kind": "LinkedField",
"name": "applicabilityStatements",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"concreteType": "ApplicabilityStatementEdge",
"kind": "LinkedField",
"name": "edges",
"plural": true,
"selections": [
{
"alias": null,
"args": null,
"concreteType": "ApplicabilityStatement",
"kind": "LinkedField",
"name": "node",
"plural": false,
"selections": [
(v3/*: any*/),
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "applicability",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "justification",
"storageKey": null
},
{
"alias": null,
"args": null,
"concreteType": "Control",
"kind": "LinkedField",
"name": "control",
"plural": false,
"selections": [
(v3/*: any*/)
],
"storageKey": null
}
],
"storageKey": null
}
],
"storageKey": null
}
],
"storageKey": "applicabilityStatements(first:10000)"
},
v6 = [
{
"kind": "Variable",
"name": "id",
"variableName": "organizationId"
}
],
v7 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "name",
"storageKey": null
},
v8 = {
"alias": null,
"args": [
(v4/*: any*/),
{
"kind": "Literal",
"name": "orderBy",
"value": {
"direction": "ASC",
"field": "CREATED_AT"
}
}
],
"concreteType": "ControlConnection",
"kind": "LinkedField",
"name": "controls",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"concreteType": "ControlEdge",
"kind": "LinkedField",
"name": "edges",
"plural": true,
"selections": [
{
"alias": null,
"args": null,
"concreteType": "Control",
"kind": "LinkedField",
"name": "node",
"plural": false,
"selections": [
(v3/*: any*/),
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "sectionTitle",
"storageKey": null
},
(v7/*: any*/),
{
"alias": null,
"args": null,
"concreteType": "Framework",
"kind": "LinkedField",
"name": "framework",
"plural": false,
"selections": [
(v3/*: any*/),
(v7/*: any*/)
],
"storageKey": null
}
],
"storageKey": null
}
],
"storageKey": null
}
],
"storageKey": "controls(first:10000,orderBy:{\"direction\":\"ASC\",\"field\":\"CREATED_AT\"})"
},
v9 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "__typename",
"storageKey": null
};
return {
"fragment": {
"argumentDefinitions": [
(v0/*: any*/),
(v1/*: any*/)
],
"kind": "Fragment",
"metadata": null,
"name": "LinkControlDialogQuery",
"selections": [
{
"alias": "stateOfApplicability",
"args": (v2/*: any*/),
"concreteType": null,
"kind": "LinkedField",
"name": "node",
"plural": false,
"selections": [
{
"kind": "InlineFragment",
"selections": [
(v3/*: any*/),
(v5/*: any*/)
],
"type": "StateOfApplicability",
"abstractKey": null
}
],
"storageKey": null
},
{
"alias": "organization",
"args": (v6/*: any*/),
"concreteType": null,
"kind": "LinkedField",
"name": "node",
"plural": false,
"selections": [
{
"kind": "InlineFragment",
"selections": [
(v3/*: any*/),
(v8/*: any*/)
],
"type": "Organization",
"abstractKey": null
}
],
"storageKey": null
}
],
"type": "Query",
"abstractKey": null
},
"kind": "Request",
"operation": {
"argumentDefinitions": [
(v1/*: any*/),
(v0/*: any*/)
],
"kind": "Operation",
"name": "LinkControlDialogQuery",
"selections": [
{
"alias": "stateOfApplicability",
"args": (v2/*: any*/),
"concreteType": null,
"kind": "LinkedField",
"name": "node",
"plural": false,
"selections": [
(v9/*: any*/),
(v3/*: any*/),
{
"kind": "InlineFragment",
"selections": [
(v5/*: any*/)
],
"type": "StateOfApplicability",
"abstractKey": null
}
],
"storageKey": null
},
{
"alias": "organization",
"args": (v6/*: any*/),
"concreteType": null,
"kind": "LinkedField",
"name": "node",
"plural": false,
"selections": [
(v9/*: any*/),
(v3/*: any*/),
{
"kind": "InlineFragment",
"selections": [
(v8/*: any*/)
],
"type": "Organization",
"abstractKey": null
}
],
"storageKey": null
}
]
},
"params": {
"cacheID": "c8285ce8c2d39a2ac658d411b2fdc0db",
"id": null,
"metadata": {},
"name": "LinkControlDialogQuery",
"operationKind": "query",
"text": "query LinkControlDialogQuery(\n $stateOfApplicabilityId: ID!\n $organizationId: ID!\n) {\n stateOfApplicability: node(id: $stateOfApplicabilityId) {\n __typename\n ... on StateOfApplicability {\n id\n applicabilityStatements(first: 10000) {\n edges {\n node {\n id\n applicability\n justification\n control {\n id\n }\n }\n }\n }\n }\n id\n }\n organization: node(id: $organizationId) {\n __typename\n ... on Organization {\n id\n controls(first: 10000, orderBy: {direction: ASC, field: CREATED_AT}) {\n edges {\n node {\n id\n sectionTitle\n name\n framework {\n id\n name\n }\n }\n }\n }\n }\n id\n }\n}\n"
}
};
})();
(node as any).hash = "768c1d7c983124ca25e74d7378f83097";
export default node;

View File

@@ -0,0 +1,92 @@
/**
* @generated SignedSource<<c129078380fd3f65393dc60cb30e12f5>>
* @lightSyntaxTransform
* @nogrep
*/
/* tslint:disable */
/* eslint-disable */
// @ts-nocheck
import { ConcreteRequest } from 'relay-runtime';
export type DeleteApplicabilityStatementInput = {
applicabilityStatementId: string;
};
export type LinkControlDialogUnlinkMutation$variables = {
input: DeleteApplicabilityStatementInput;
};
export type LinkControlDialogUnlinkMutation$data = {
readonly deleteApplicabilityStatement: {
readonly deletedApplicabilityStatementId: string;
};
};
export type LinkControlDialogUnlinkMutation = {
response: LinkControlDialogUnlinkMutation$data;
variables: LinkControlDialogUnlinkMutation$variables;
};
const node: ConcreteRequest = (function(){
var v0 = [
{
"defaultValue": null,
"kind": "LocalArgument",
"name": "input"
}
],
v1 = [
{
"alias": null,
"args": [
{
"kind": "Variable",
"name": "input",
"variableName": "input"
}
],
"concreteType": "DeleteApplicabilityStatementPayload",
"kind": "LinkedField",
"name": "deleteApplicabilityStatement",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "deletedApplicabilityStatementId",
"storageKey": null
}
],
"storageKey": null
}
];
return {
"fragment": {
"argumentDefinitions": (v0/*: any*/),
"kind": "Fragment",
"metadata": null,
"name": "LinkControlDialogUnlinkMutation",
"selections": (v1/*: any*/),
"type": "Mutation",
"abstractKey": null
},
"kind": "Request",
"operation": {
"argumentDefinitions": (v0/*: any*/),
"kind": "Operation",
"name": "LinkControlDialogUnlinkMutation",
"selections": (v1/*: any*/)
},
"params": {
"cacheID": "560cb4342a2a277881705e91b5b6a17c",
"id": null,
"metadata": {},
"name": "LinkControlDialogUnlinkMutation",
"operationKind": "mutation",
"text": "mutation LinkControlDialogUnlinkMutation(\n $input: DeleteApplicabilityStatementInput!\n) {\n deleteApplicabilityStatement(input: $input) {\n deletedApplicabilityStatementId\n }\n}\n"
}
};
})();
(node as any).hash = "80dd4efb13f7b677ad62792150ca70d9";
export default node;

View File

@@ -1,5 +1,5 @@
/**
* @generated SignedSource<<032b44ec9c5c4d5fc0281269dad54098>>
* @generated SignedSource<<3fb1661c5bda6573c377f516b970643a>>
* @lightSyntaxTransform
* @nogrep
*/
@@ -22,7 +22,7 @@ export type PublishDocumentsDialogMutation$data = {
readonly documentEdges: ReadonlyArray<{
readonly node: {
readonly id: string;
readonly " $fragmentSpreads": FragmentRefs<"DocumentsPageRowFragment">;
readonly " $fragmentSpreads": FragmentRefs<"DocumentListItemFragment">;
};
}>;
};
@@ -89,7 +89,7 @@ return {
{
"args": null,
"kind": "FragmentSpread",
"name": "DocumentsPageRowFragment"
"name": "DocumentListItemFragment"
}
],
"storageKey": null
@@ -142,13 +142,6 @@ return {
"name": "title",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "description",
"storageKey": null
},
{
"alias": null,
"args": null,
@@ -315,16 +308,16 @@ return {
]
},
"params": {
"cacheID": "56634e96a607e273bf269d4720cd75d9",
"cacheID": "9e790eaab9b8c776beb9d021942bdf22",
"id": null,
"metadata": {},
"name": "PublishDocumentsDialogMutation",
"operationKind": "mutation",
"text": "mutation PublishDocumentsDialogMutation(\n $input: BulkPublishDocumentVersionsInput!\n) {\n bulkPublishDocumentVersions(input: $input) {\n documentEdges {\n node {\n id\n ...DocumentsPageRowFragment\n }\n }\n }\n}\n\nfragment DocumentsPageRowFragment on Document {\n id\n title\n description\n documentType\n classification\n updatedAt\n canDelete: permission(action: \"core:document:delete\")\n owner {\n id\n fullName\n }\n versions(first: 1) {\n edges {\n node {\n id\n status\n version\n signatures(first: 1000) {\n edges {\n node {\n id\n state\n }\n }\n }\n }\n }\n }\n}\n"
"text": "mutation PublishDocumentsDialogMutation(\n $input: BulkPublishDocumentVersionsInput!\n) {\n bulkPublishDocumentVersions(input: $input) {\n documentEdges {\n node {\n id\n ...DocumentListItemFragment\n }\n }\n }\n}\n\nfragment DocumentListItemFragment on Document {\n id\n title\n documentType\n classification\n updatedAt\n canDelete: permission(action: \"core:document:delete\")\n owner {\n id\n fullName\n }\n versions(first: 1) {\n edges {\n node {\n id\n status\n version\n signatures(first: 1000) {\n edges {\n node {\n id\n state\n }\n }\n }\n }\n }\n }\n}\n"
}
};
})();
(node as any).hash = "c9d699258bb8638d5474ab5e6b5e4585";
(node as any).hash = "c28e9ea550947901058300bc4ba8f7f1";
export default node;

View File

@@ -8,18 +8,6 @@ import type { DocumentGraphSendSigningNotificationsMutation } from "#/__generate
import { useMutationWithToasts } from "../useMutationWithToasts";
export const documentsQuery = graphql`
query DocumentGraphListQuery($organizationId: ID!) {
organization: node(id: $organizationId) {
id
... on Organization {
canCreateDocument: permission(action: "core:document:create")
...DocumentsPageListFragment
}
}
}
`;
export const DocumentsConnectionKey = "DocumentsListQuery_documents";
const deleteDocumentMutation = graphql`

View File

@@ -76,7 +76,7 @@ import { useOrganizationId } from "#/hooks/useOrganizationId";
import { CurrentUser } from "#/providers/CurrentUser";
import type { NodeOf } from "#/types";
import UpdateVersionDialog from "./dialogs/UpdateVersionDialog";
import UpdateVersionDialog from "./_components/UpdateVersionDialog";
type Props = {
queryRef: PreloadedQuery<DocumentGraphNodeQuery>;

View File

@@ -1,195 +1,88 @@
import {
formatDate,
getDocumentClassificationLabel,
getDocumentTypeLabel,
sprintf,
} from "@probo/helpers";
import { useList, usePageTitle } from "@probo/hooks";
import { usePageTitle } from "@probo/hooks";
import { useTranslate } from "@probo/i18n";
import {
ActionDropdown,
Avatar,
Badge,
Button,
Card,
Checkbox,
DropdownItem,
IconArrowDown,
IconBell2,
IconCheckmark1,
IconCrossLargeX,
IconPlusLarge,
IconSignature,
IconTrashCan,
PageHeader,
Tbody,
Td,
Th,
Thead,
Tr,
useConfirm,
} from "@probo/ui";
import { use, useRef } from "react";
import { useState } from "react";
import {
type PreloadedQuery,
useFragment,
usePaginationFragment,
usePreloadedQuery,
} from "react-relay";
import { graphql } from "relay-runtime";
import { ConnectionHandler, graphql } from "relay-runtime";
import type { DocumentGraphListQuery } from "#/__generated__/core/DocumentGraphListQuery.graphql";
import type { DocumentsPageListFragment$key } from "#/__generated__/core/DocumentsPageListFragment.graphql";
import type { DocumentsPageRowFragment$key } from "#/__generated__/core/DocumentsPageRowFragment.graphql";
import type { DocumentsPageQuery } from "#/__generated__/core/DocumentsPageQuery.graphql";
import {
BulkExportDialog,
type BulkExportDialogRef,
} from "#/components/documents/BulkExportDialog";
import { SortableTable, SortableTh } from "#/components/SortableTable";
import {
documentsQuery,
useBulkDeleteDocumentsMutation,
useBulkExportDocumentsMutation,
useDeleteDocumentMutation,
useSendSigningNotificationsMutation,
} from "#/hooks/graph/DocumentGraph";
import { CurrentUser } from "#/providers/CurrentUser";
import { useOrganizationId } from "#/hooks/useOrganizationId";
import { CreateDocumentDialog } from "./dialogs/CreateDocumentDialog";
import { PublishDocumentsDialog } from "./dialogs/PublishDocumentsDialog";
import { SignatureDocumentsDialog } from "./dialogs/SignatureDocumentsDialog";
import { CreateDocumentDialog } from "./_components/CreateDocumentDialog";
import { DocumentList } from "./_components/DocumentList";
const documentsFragment = graphql`
fragment DocumentsPageListFragment on Organization
@refetchable(queryName: "DocumentsListQuery")
@argumentDefinitions(
first: { type: "Int", defaultValue: 50 }
order: {
type: "DocumentOrder"
defaultValue: { field: TITLE, direction: ASC }
}
after: { type: "CursorKey", defaultValue: null }
before: { type: "CursorKey", defaultValue: null }
last: { type: "Int", defaultValue: null }
) {
documents(
first: $first
after: $after
last: $last
before: $before
orderBy: $order
) @connection(key: "DocumentsListQuery_documents") {
__id
edges {
node {
id
canUpdate: permission(action: "core:document:update")
canDelete: permission(action: "core:document:delete")
canSendSigningNotifications: permission(
action: "core:document:send-signing-notifications"
)
canRequestSignatures: permission(
action: "core:document-version:request-signature"
)
...DocumentsPageRowFragment
export const documentsPageQuery = graphql`
query DocumentsPageQuery($organizationId: ID!) {
organization: node(id: $organizationId) {
__typename
... on Organization {
canCreateDocument: permission(action: "core:document:create")
...DocumentListFragment @arguments(first: 50, order: { field: TITLE, direction: ASC })
documents(first: 50, orderBy: { field: TITLE, direction: ASC }) {
edges {
node {
canSendSigningNotifications: permission(
action: "core:document:send-signing-notifications"
)
}
}
}
}
}
}
`;
type Props = {
queryRef: PreloadedQuery<DocumentGraphListQuery>;
};
export default function DocumentsPage(props: {
queryRef: PreloadedQuery<DocumentsPageQuery>;
}) {
const { queryRef } = props;
export default function DocumentsPage(props: Props) {
const organizationId = useOrganizationId();
const { __ } = useTranslate();
const organization = usePreloadedQuery(
documentsQuery,
props.queryRef,
).organization;
const { email: defaultEmail } = use(CurrentUser);
const pagination = usePaginationFragment(
documentsFragment,
organization as DocumentsPageListFragment$key,
const { organization } = usePreloadedQuery<DocumentsPageQuery>(
documentsPageQuery,
queryRef,
);
if (organization.__typename !== "Organization") {
throw new Error("invalid type for node");
}
const documents = pagination.data.documents.edges
.map(edge => edge.node)
.filter(Boolean);
const connectionId = pagination.data.documents.__id;
const [sendSigningNotifications] = useSendSigningNotificationsMutation();
const [bulkDeleteDocuments] = useBulkDeleteDocumentsMutation();
const [bulkExportDocuments, isBulkExporting]
= useBulkExportDocumentsMutation();
const { list: selection, toggle, clear, reset } = useList<string>([]);
const confirm = useConfirm();
const bulkExportDialogRef = useRef<BulkExportDialogRef>(null);
usePageTitle(__("Documents"));
const canDeleteAny = documents.some(({ canDelete }) => canDelete);
const canUpdateAny = documents.some(({ canUpdate }) => canUpdate);
const canSendAnySignatureNotifications = documents.some(
({ canSendSigningNotifications }) => canSendSigningNotifications,
const canSendAnySignatureNotifications = organization.documents.edges.some(
({ node: { canSendSigningNotifications } }) => canSendSigningNotifications,
);
const canRequestAnySignatures = documents.some(
({ canRequestSignatures }) => canRequestSignatures,
const [documentListConnectionId, setDocumentListConnectionId] = useState(
ConnectionHandler.getConnectionID(
organizationId,
"DocumentsListQuery_documents",
{ orderBy: { direction: "ASC", field: "TITLE" } },
),
);
const hasAnyAction = canDeleteAny || canUpdateAny;
const handleSendSigningNotifications = async () => {
await sendSigningNotifications({
variables: {
input: { organizationId: organization.id },
input: { organizationId },
},
});
};
const handleBulkDelete = () => {
const documentCount = selection.length;
confirm(
() =>
bulkDeleteDocuments({
variables: {
input: { documentIds: selection },
},
}).then(() => {
clear();
}),
{
message: sprintf(
__(
"This will permanently delete %s document%s. This action cannot be undone.",
),
documentCount,
documentCount > 1 ? "s" : "",
),
},
);
};
const handleBulkExport = async (options: {
withWatermark: boolean;
withSignatures: boolean;
watermarkEmail?: string;
}) => {
const input = {
documentIds: selection,
withWatermark: options.withWatermark,
withSignatures: options.withSignatures,
...(options.withWatermark
&& options.watermarkEmail && { watermarkEmail: options.watermarkEmail }),
};
await bulkExportDocuments({
variables: { input },
});
clear();
};
return (
<div className="space-y-6">
<PageHeader
@@ -208,7 +101,7 @@ export default function DocumentsPage(props: Props) {
)}
{organization.canCreateDocument && (
<CreateDocumentDialog
connection={connectionId}
connection={documentListConnectionId}
trigger={
<Button icon={IconPlusLarge}>{__("New document")}</Button>
}
@@ -216,282 +109,10 @@ export default function DocumentsPage(props: Props) {
)}
</div>
</PageHeader>
{documents.length > 0
? (
<SortableTable {...pagination}>
<Thead>
{selection.length === 0
? (
<Tr>
<Th className="w-18">
<Checkbox
checked={
selection.length === documents.length
&& documents.length > 0
}
onChange={() => reset(documents.map(d => d.id))}
/>
</Th>
<SortableTh field="TITLE" className="min-w-0">
{__("Name")}
</SortableTh>
<Th className="w-24">{__("Status")}</Th>
<Th className="w-20">{__("Version")}</Th>
<SortableTh field="DOCUMENT_TYPE" className="w-28">
{__("Type")}
</SortableTh>
<Th className="w-32">{__("Classification")}</Th>
<Th className="w-60">{__("Owner")}</Th>
<Th className="w-60">{__("Last update")}</Th>
<Th className="w-20">{__("Signatures")}</Th>
{hasAnyAction && <Th className="w-18"></Th>}
</Tr>
)
: (
<Tr>
<Th colspan={10} compact>
<div className="flex justify-between items-center h-8">
<div className="flex gap-2 items-center">
{sprintf(__("%s documents selected"), selection.length)}
{" "}
-
<button
onClick={clear}
className="flex gap-1 items-center hover:text-txt-primary"
>
<IconCrossLargeX size={12} />
{__("Clear selection")}
</button>
</div>
<div className="flex gap-2 items-center">
{canUpdateAny && (
<PublishDocumentsDialog
documentIds={selection}
onSave={clear}
>
<Button
icon={IconCheckmark1}
className="py-0.5 px-2 text-xs h-6 min-h-6"
>
{__("Publish")}
</Button>
</PublishDocumentsDialog>
)}
{canRequestAnySignatures && (
<SignatureDocumentsDialog
documentIds={selection}
onSave={clear}
>
<Button
variant="secondary"
icon={IconSignature}
className="py-0.5 px-2 text-xs h-6 min-h-6"
>
{__("Request signature")}
</Button>
</SignatureDocumentsDialog>
)}
<BulkExportDialog
ref={bulkExportDialogRef}
onExport={handleBulkExport}
isLoading={isBulkExporting}
defaultEmail={defaultEmail}
selectedCount={selection.length}
>
<Button
variant="secondary"
icon={IconArrowDown}
className="py-0.5 px-2 text-xs h-6 min-h-6"
>
{__("Export")}
</Button>
</BulkExportDialog>
{canDeleteAny && (
<Button
variant="danger"
icon={IconTrashCan}
onClick={handleBulkDelete}
className="py-0.5 px-2 text-xs h-6 min-h-6"
>
{__("Delete")}
</Button>
)}
</div>
</div>
</Th>
</Tr>
)}
</Thead>
<Tbody>
{documents.map(document => (
<DocumentRow
checked={selection.includes(document.id)}
onCheck={() => toggle(document.id)}
key={document.id}
document={document}
organizationId={organization.id}
connectionId={connectionId}
hasAnyAction={hasAnyAction}
/>
))}
</Tbody>
</SortableTable>
)
: (
<Card padded>
<div className="text-center py-12">
<h3 className="text-lg font-semibold mb-2">
{__("No documents yet")}
</h3>
<p className="text-txt-tertiary mb-4">
{__("Create your first document to get started.")}
</p>
</div>
</Card>
)}
<DocumentList
fKey={organization}
onConnectionIdChange={setDocumentListConnectionId}
/>
</div>
);
}
const rowFragment = graphql`
fragment DocumentsPageRowFragment on Document {
id
title
description
documentType
classification
updatedAt
canDelete: permission(action: "core:document:delete")
owner {
id
fullName
}
versions(first: 1) {
edges {
node {
id
status
version
signatures(first: 1000) {
edges {
node {
id
state
}
}
}
}
}
}
}
`;
function DocumentRow({
document: documentKey,
organizationId,
checked,
onCheck,
hasAnyAction,
}: {
document: DocumentsPageRowFragment$key;
organizationId: string;
connectionId: string;
checked: boolean;
onCheck: () => void;
hasAnyAction: boolean;
}) {
const document = useFragment<DocumentsPageRowFragment$key>(
rowFragment,
documentKey,
);
const lastVersion = document.versions.edges?.[0]?.node;
const isDraft = lastVersion?.status === "DRAFT";
const { __ } = useTranslate();
const [deleteDocument] = useDeleteDocumentMutation();
const confirm = useConfirm();
if (!lastVersion) {
return null;
}
const signatures
= lastVersion.signatures?.edges?.map(edge => edge?.node)?.filter(Boolean)
?? [];
const signedCount = signatures.filter(
signature => signature.state === "SIGNED",
).length;
const handleDelete = () => {
confirm(
() =>
deleteDocument({
variables: {
input: { documentId: document.id },
},
}),
{
message: sprintf(
__(
"This will permanently delete the document \"%s\". This action cannot be undone.",
),
document.title,
),
},
);
};
return (
<Tr to={`/organizations/${organizationId}/documents/${document.id}`}>
<Td noLink className="w-18">
<Checkbox checked={checked} onChange={onCheck} />
</Td>
<Td className="min-w-0">
<div className="flex gap-4 items-center">{document.title}</div>
</Td>
<Td className="w-24">
<Badge variant={isDraft ? "neutral" : "success"}>
{isDraft ? __("Draft") : __("Published")}
</Badge>
</Td>
<Td className="w-20">
v
{lastVersion.version}
</Td>
<Td className="w-28">
{getDocumentTypeLabel(__, document.documentType)}
</Td>
<Td className="w-32">
{getDocumentClassificationLabel(__, document.classification)}
</Td>
<Td className="w-60">
<div className="flex gap-2 items-center">
<Avatar name={document.owner?.fullName ?? ""} />
{document.owner?.fullName}
</div>
</Td>
<Td className="w-60">{formatDate(document.updatedAt)}</Td>
<Td className="w-20">
{signedCount}
/
{signatures.length}
</Td>
{hasAnyAction && (
<Td noLink width={50} className="text-end w-18">
<ActionDropdown>
{document.canDelete && (
<DropdownItem
variant="danger"
icon={IconTrashCan}
onClick={handleDelete}
>
{__("Delete")}
</DropdownItem>
)}
</ActionDropdown>
</Td>
)}
</Tr>
);
}

View File

@@ -0,0 +1,34 @@
import { Suspense, useEffect } from "react";
import { useQueryLoader } from "react-relay";
import type { DocumentsPageQuery } from "#/__generated__/core/DocumentsPageQuery.graphql";
import { PageSkeleton } from "#/components/skeletons/PageSkeleton";
import { useOrganizationId } from "#/hooks/useOrganizationId";
import { CoreRelayProvider } from "#/providers/CoreRelayProvider";
import DocumentsPage, { documentsPageQuery } from "./DocumentsPage";
function DocumentsPageQueryLoader() {
const organizationId = useOrganizationId();
const [queryRef, loadQuery] = useQueryLoader<DocumentsPageQuery>(documentsPageQuery);
useEffect(() => {
if (!queryRef) {
loadQuery({ organizationId });
}
});
if (!queryRef) return <PageSkeleton />;
return <DocumentsPage queryRef={queryRef} />;
}
export default function DocumentsPageLoader() {
return (
<CoreRelayProvider>
<Suspense fallback={<PageSkeleton />}>
<DocumentsPageQueryLoader />
</Suspense>
</CoreRelayProvider>
);
}

View File

@@ -39,7 +39,7 @@ const createDocumentMutation = graphql`
documentEdge @prependEdge(connections: $connections) {
node {
id
...DocumentsPageRowFragment
...DocumentListItemFragment
}
}
}

View File

@@ -0,0 +1,277 @@
import { sprintf } from "@probo/helpers";
import { useList } from "@probo/hooks";
import { useTranslate } from "@probo/i18n";
import { Button, Card, Checkbox, IconArrowDown, IconCheckmark1, IconCrossLargeX, IconSignature, IconTrashCan, Tbody, Th, Thead, Tr, useConfirm } from "@probo/ui";
import { type ComponentProps, use, useRef } from "react";
import { usePaginationFragment } from "react-relay";
import { ConnectionHandler, graphql } from "relay-runtime";
import type { DocumentListFragment$key } from "#/__generated__/core/DocumentListFragment.graphql";
import type { DocumentsListQuery } from "#/__generated__/core/DocumentsListQuery.graphql";
import { BulkExportDialog, type BulkExportDialogRef } from "#/components/documents/BulkExportDialog";
import { type Order, SortableTable, SortableTh } from "#/components/SortableTable";
import { useBulkDeleteDocumentsMutation, useBulkExportDocumentsMutation } from "#/hooks/graph/DocumentGraph";
import { useOrganizationId } from "#/hooks/useOrganizationId";
import { CurrentUser } from "#/providers/CurrentUser";
import { DocumentListItem } from "./DocumentListItem";
import { PublishDocumentsDialog } from "./PublishDocumentsDialog";
import { SignatureDocumentsDialog } from "./SignatureDocumentsDialog";
const fragment = graphql`
fragment DocumentListFragment on Organization
@refetchable(queryName: "DocumentsListQuery")
@argumentDefinitions(
first: { type: "Int", defaultValue: 50 }
order: {
type: "DocumentOrder"
defaultValue: { field: TITLE, direction: ASC }
}
after: { type: "CursorKey", defaultValue: null }
before: { type: "CursorKey", defaultValue: null }
last: { type: "Int", defaultValue: null }
) {
documents(
first: $first
after: $after
last: $last
before: $before
orderBy: $order
) @connection(key: "DocumentsListQuery_documents" filters: ["orderBy"]) {
__id
edges {
node {
id
canUpdate: permission(action: "core:document:update")
canDelete: permission(action: "core:document:delete")
canRequestSignatures: permission(
action: "core:document-version:request-signature"
)
...DocumentListItemFragment
}
}
}
}
`;
export function DocumentList(props: {
fKey: DocumentListFragment$key;
onConnectionIdChange: (connectionId: string) => void;
}) {
const { fKey, onConnectionIdChange } = props;
const organizationId = useOrganizationId();
const { email: defaultEmail } = use(CurrentUser);
const bulkExportDialogRef = useRef<BulkExportDialogRef>(null);
const { __ } = useTranslate();
const pagination = usePaginationFragment<DocumentsListQuery, DocumentListFragment$key>(
fragment,
fKey,
);
const documents = pagination.data.documents.edges
.map(({ node }) => node);
const connectionId = pagination.data.documents.__id;
const [bulkDeleteDocuments] = useBulkDeleteDocumentsMutation();
const [bulkExportDocuments, isBulkExporting]
= useBulkExportDocumentsMutation();
const { list: selection, toggle, clear, reset } = useList<string>([]);
const confirm = useConfirm();
const canDeleteAny = documents.some(({ canDelete }) => canDelete);
const canUpdateAny = documents.some(({ canUpdate }) => canUpdate);
const canRequestAnySignatures = documents.some(
({ canRequestSignatures }) => canRequestSignatures,
);
const hasAnyAction = canDeleteAny || canUpdateAny;
const handleBulkDelete = () => {
const documentCount = selection.length;
confirm(
() =>
bulkDeleteDocuments({
variables: {
input: { documentIds: selection },
},
}).then(() => {
clear();
}),
{
message: sprintf(
__(
"This will permanently delete %s document%s. This action cannot be undone.",
),
documentCount,
documentCount > 1 ? "s" : "",
),
},
);
};
const handleBulkExport = async (options: {
withWatermark: boolean;
withSignatures: boolean;
watermarkEmail?: string;
}) => {
const input = {
documentIds: selection,
withWatermark: options.withWatermark,
withSignatures: options.withSignatures,
...(options.withWatermark
&& options.watermarkEmail && { watermarkEmail: options.watermarkEmail }),
};
await bulkExportDocuments({
variables: { input },
});
clear();
};
const handleOrderChange = (order: Order) => {
onConnectionIdChange(
ConnectionHandler.getConnectionID(
organizationId,
"DocumentsListQuery_documents",
{ orderBy: order },
),
);
};
return documents.length > 0
? (
<SortableTable
{...pagination}
refetch={pagination.refetch as ComponentProps<typeof SortableTable>["refetch"]}
>
<Thead>
{selection.length === 0
? (
<Tr>
<Th className="w-18">
<Checkbox
checked={
selection.length === documents.length
&& documents.length > 0
}
onChange={() => reset(documents.map(d => d.id))}
/>
</Th>
<SortableTh field="TITLE" className="min-w-0" onOrderChange={handleOrderChange}>
{__("Name")}
</SortableTh>
<Th className="w-24">{__("Status")}</Th>
<Th className="w-20">{__("Version")}</Th>
<SortableTh field="DOCUMENT_TYPE" className="w-28" onOrderChange={handleOrderChange}>
{__("Type")}
</SortableTh>
<Th className="w-32">{__("Classification")}</Th>
<Th className="w-60">{__("Owner")}</Th>
<Th className="w-60">{__("Last update")}</Th>
<Th className="w-20">{__("Signatures")}</Th>
{hasAnyAction && <Th className="w-18"></Th>}
</Tr>
)
: (
<Tr>
<Th colspan={10} compact>
<div className="flex justify-between items-center h-8">
<div className="flex gap-2 items-center">
{sprintf(__("%s documents selected"), selection.length)}
{" "}
-
<button
onClick={clear}
className="flex gap-1 items-center hover:text-txt-primary"
>
<IconCrossLargeX size={12} />
{__("Clear selection")}
</button>
</div>
<div className="flex gap-2 items-center">
{canUpdateAny && (
<PublishDocumentsDialog
documentIds={selection}
onSave={clear}
>
<Button
icon={IconCheckmark1}
className="py-0.5 px-2 text-xs h-6 min-h-6"
>
{__("Publish")}
</Button>
</PublishDocumentsDialog>
)}
{canRequestAnySignatures && (
<SignatureDocumentsDialog
documentIds={selection}
onSave={clear}
>
<Button
variant="secondary"
icon={IconSignature}
className="py-0.5 px-2 text-xs h-6 min-h-6"
>
{__("Request signature")}
</Button>
</SignatureDocumentsDialog>
)}
<BulkExportDialog
ref={bulkExportDialogRef}
onExport={handleBulkExport}
isLoading={isBulkExporting}
defaultEmail={defaultEmail}
selectedCount={selection.length}
>
<Button
variant="secondary"
icon={IconArrowDown}
className="py-0.5 px-2 text-xs h-6 min-h-6"
>
{__("Export")}
</Button>
</BulkExportDialog>
{canDeleteAny && (
<Button
variant="danger"
icon={IconTrashCan}
onClick={handleBulkDelete}
className="py-0.5 px-2 text-xs h-6 min-h-6"
>
{__("Delete")}
</Button>
)}
</div>
</div>
</Th>
</Tr>
)}
</Thead>
<Tbody>
{documents.map(document => (
<DocumentListItem
checked={selection.includes(document.id)}
onCheck={() => toggle(document.id)}
key={document.id}
fKey={document}
connectionId={connectionId}
hasAnyAction={hasAnyAction}
/>
))}
</Tbody>
</SortableTable>
)
: (
<Card padded>
<div className="text-center py-12">
<h3 className="text-lg font-semibold mb-2">
{__("No documents yet")}
</h3>
<p className="text-txt-tertiary mb-4">
{__("Create your first document to get started.")}
</p>
</div>
</Card>
);
}

View File

@@ -0,0 +1,172 @@
import { formatDate, getDocumentClassificationLabel, getDocumentTypeLabel, sprintf } from "@probo/helpers";
import { useTranslate } from "@probo/i18n";
import { ActionDropdown, Avatar, Badge, Checkbox, DropdownItem, IconTrashCan, Td, Tr, useConfirm } from "@probo/ui";
import { useFragment } from "react-relay";
import { graphql } from "relay-runtime";
import type { DocumentListItem_deleteMutation } from "#/__generated__/core/DocumentListItem_deleteMutation.graphql";
import type { DocumentListItemFragment$key } from "#/__generated__/core/DocumentListItemFragment.graphql";
import { useMutationWithToasts } from "#/hooks/useMutationWithToasts";
import { useOrganizationId } from "#/hooks/useOrganizationId";
const fragment = graphql`
fragment DocumentListItemFragment on Document {
id
title
documentType
classification
updatedAt
canDelete: permission(action: "core:document:delete")
owner {
id
fullName
}
versions(first: 1) {
edges {
node {
id
status
version
signatures(first: 1000) {
edges {
node {
id
state
}
}
}
}
}
}
}
`;
const deleteDocumentMutation = graphql`
mutation DocumentListItem_deleteMutation(
$input: DeleteDocumentInput!
$connections: [ID!]!
) {
deleteDocument(input: $input) {
deletedDocumentId @deleteEdge(connections: $connections)
}
}
`;
export function DocumentListItem(props: {
fKey: DocumentListItemFragment$key;
connectionId: string;
checked: boolean;
onCheck: () => void;
hasAnyAction: boolean;
}) {
const {
connectionId,
fKey,
checked,
onCheck,
hasAnyAction,
} = props;
const organizationId = useOrganizationId();
const document = useFragment<DocumentListItemFragment$key>(
fragment,
fKey,
);
const lastVersion = document.versions.edges?.[0]?.node;
const isDraft = lastVersion?.status === "DRAFT";
const { __ } = useTranslate();
const [deleteDocument] = useMutationWithToasts<DocumentListItem_deleteMutation>(
deleteDocumentMutation,
{
successMessage: __("Document deleted successfully."),
errorMessage: __("Failed to delete document"),
},
);
const confirm = useConfirm();
if (!lastVersion) {
return null;
}
const signatures
= lastVersion.signatures?.edges?.map(edge => edge?.node)?.filter(Boolean)
?? [];
const signedCount = signatures.filter(
signature => signature.state === "SIGNED",
).length;
const handleDelete = () => {
confirm(
() =>
deleteDocument({
variables: {
connections: [connectionId],
input: { documentId: document.id },
},
}),
{
message: sprintf(
__(
"This will permanently delete the document \"%s\". This action cannot be undone.",
),
document.title,
),
},
);
};
return (
<Tr to={`/organizations/${organizationId}/documents/${document.id}`}>
<Td noLink className="w-18">
<Checkbox checked={checked} onChange={onCheck} />
</Td>
<Td className="min-w-0">
<div className="flex gap-4 items-center">{document.title}</div>
</Td>
<Td className="w-24">
<Badge variant={isDraft ? "neutral" : "success"}>
{isDraft ? __("Draft") : __("Published")}
</Badge>
</Td>
<Td className="w-20">
v
{lastVersion.version}
</Td>
<Td className="w-28">
{getDocumentTypeLabel(__, document.documentType)}
</Td>
<Td className="w-32">
{getDocumentClassificationLabel(__, document.classification)}
</Td>
<Td className="w-60">
<div className="flex gap-2 items-center">
<Avatar name={document.owner?.fullName ?? ""} />
{document.owner?.fullName}
</div>
</Td>
<Td className="w-60">{formatDate(document.updatedAt)}</Td>
<Td className="w-20">
{signedCount}
/
{signatures.length}
</Td>
{hasAnyAction && (
<Td noLink width={50} className="text-end w-18">
<ActionDropdown>
{document.canDelete && (
<DropdownItem
variant="danger"
icon={IconTrashCan}
onClick={handleDelete}
>
{__("Delete")}
</DropdownItem>
)}
</ActionDropdown>
</Td>
)}
</Tr>
);
}

View File

@@ -31,7 +31,7 @@ const documentsPublishMutation = graphql`
documentEdges {
node {
id
...DocumentsPageRowFragment
...DocumentListItemFragment
}
}
}

View File

@@ -8,12 +8,11 @@ import { Fragment } from "react";
import { loadQuery } from "react-relay";
import { type LoaderFunctionArgs, redirect } from "react-router";
import type { DocumentGraphListQuery } from "#/__generated__/core/DocumentGraphListQuery.graphql";
import type { DocumentGraphNodeQuery } from "#/__generated__/core/DocumentGraphNodeQuery.graphql";
import { LinkCardSkeleton } from "#/components/skeletons/LinkCardSkeleton";
import { PageSkeleton } from "#/components/skeletons/PageSkeleton";
import { coreEnvironment } from "#/environments";
import { documentNodeQuery, documentsQuery } from "#/hooks/graph/DocumentGraph";
import { documentNodeQuery } from "#/hooks/graph/DocumentGraph";
const documentTabs = (prefix: string) => {
return [
@@ -62,14 +61,7 @@ export const documentsRoutes = [
{
path: "documents",
Fallback: PageSkeleton,
loader: loaderFromQueryLoader(({ organizationId }) =>
loadQuery<DocumentGraphListQuery>(coreEnvironment, documentsQuery, {
organizationId: organizationId,
}),
),
Component: withQueryRef(
lazy(() => import("#/pages/organizations/documents/DocumentsPage")),
),
Component: lazy(() => import("#/pages/organizations/documents/DocumentsPageLoader")),
},
{
path: "documents/:documentId",