Delete document button (#161)

* backend support

* create react hook

* Add delete button

client/src/components/all-charges/documents/delete-document-button.tsx

@@ -0,0 +1,35 @@
+import { ActionIcon } from '@mantine/core';
+import { useState } from 'react';
+import { Trash } from 'tabler-icons-react';
+
+import { useDeleteDocument } from '../../../hooks/use-delete-document';
+import { ConfirmationModal } from '../../common';
+
+interface Props {
+  documentId: string;
+}
+
+export function DeleteDocumentButton({ documentId }: Props) {
+  const [opened, setOpened] = useState(false);
+  const { mutate } = useDeleteDocument();
+
+  function onDelete() {
+    mutate({
+      documentId,
+    });
+  }
+
+  return (
+    <>
+      <ConfirmationModal
+        opened={opened}
+        onClose={() => setOpened(false)}
+        onConfirm={onDelete}
+        title="Are you sure you want to delete this document?"
+      />
+      <ActionIcon color="red" variant="hover" onClick={() => setOpened(true)}>
+        <Trash size={20} />
+      </ActionIcon>
+    </>
+  );
+}

client/src/components/all-charges/documents/documents-gallery.tsx

@@ -4,6 +4,7 @@ import { useState } from 'react';
 
 import { DocumentsGalleryFieldsFragment } from '../../../__generated__/types';
 import { PopUpDrawer } from '../../common/drawer';
+import { DeleteDocumentButton } from './delete-document-button';
 import { EditDocument } from './edit-document';
 import { UnlinkDocumentButton } from './unlink-document-button';
 
@@ -62,12 +63,13 @@ export const DocumentsGallery = ({ additionalDocumentsData }: Props) => {
                       opened={openModal === doc.id}
                       onClose={() => setOpenModal(null)}
                       title={
-                        <div className="flex flex-row mx-3 pt-3 sm:text-1xl gap-10">
+                        <div className="flex flex-row mx-3 pt-3 sm:text-1xl gap-5">
                           <h1 className="sm:text-2xl font-small text-gray-900">Edit Documents</h1>
                           <a href="/#" className="pt-1">
                             ID: {doc.id}
                           </a>
                           <UnlinkDocumentButton documentId={doc.id} />
+                          <DeleteDocumentButton documentId={doc.id} />
                         </div>
                       }
                     >

client/src/hooks/use-delete-document.tsx

@@ -0,0 +1,33 @@
+import { gql } from 'graphql-tag';
+
+import {
+  DeleteDocumentMutation,
+  DeleteDocumentMutationVariables,
+  useDeleteDocumentMutation,
+} from '../__generated__/types';
+
+gql`
+  mutation DeleteDocument($documentId: ID!) {
+    deleteDocument(documentId: $documentId)
+  }
+`;
+
+export const useDeleteDocument = () => {
+  // TODO: add authentication
+  // TODO: add local data delete method after change
+
+  const onError = async (e: unknown, { documentId }: DeleteDocumentMutationVariables) => {
+    console.error(e);
+    return new Error(`Error deleting document ID [${documentId}]: ${(e as Error)?.message}`);
+  };
+  const onSuccess = async (data: DeleteDocumentMutation, { documentId }: DeleteDocumentMutationVariables) => {
+    if (!data.deleteDocument) {
+      throw new Error(`Error deleting document ID [${documentId}]`);
+    }
+    return data.deleteDocument;
+  };
+  return useDeleteDocumentMutation({
+    onError,
+    onSuccess,
+  });
+};

schema.graphql

@@ -92,12 +92,13 @@ type Query {
 " mutation root "
 type Mutation {
   updateCharge(chargeId: ID!, fields: UpdateChargeInput!): UpdateChargeResult!
+  updateTransaction(transactionId: ID!, fields: UpdateTransactionInput!): UpdateTransactionResult!
   updateLedgerRecord(ledgerRecordId: ID!, fields: UpdateLedgerRecordInput!): UpdateLedgerRecordResult!
   insertLedgerRecord(chargeId: ID!, record: InsertLedgerRecordInput!): InsertLedgerRecordResult!
-  insertDocument(record: InsertDocumentInput!): InsertDocumentResult!
-  updateTransaction(transactionId: ID!, fields: UpdateTransactionInput!): UpdateTransactionResult!
   generateLedgerRecords(chargeId: ID!): GenerateLedgerRecordsResult!
+  insertDocument(record: InsertDocumentInput!): InsertDocumentResult!
   updateDocument(documentId: ID!, fields: UpdateDocumentFieldsInput!): UpdateDocumentResult!
+  deleteDocument(documentId: ID!): Boolean!
 }
 
 " input variables for updateDocument "

server/src/providers/documents.mts

@@ -2,6 +2,7 @@ import pgQuery from '@pgtyped/query';
 import DataLoader from 'dataloader';
 
 import {
+  IDeleteDocumentQuery,
   IGetAllDocumentsQuery,
   IGetDocumentsByChargeIdQuery,
   IGetDocumentsByFinancialEntityIdsQuery,
@@ -111,6 +112,12 @@ export const updateDocument = sql<IUpdateDocumentQuery>`
   RETURNING *;
 `;
 
+export const deleteDocument = sql<IDeleteDocumentQuery>`
+  DELETE FROM accounter_schema.documents
+  WHERE id = $documentId
+  RETURNING id;
+`;
+
 export const insertDocuments = sql<IInsertDocumentsQuery>`
     INSERT INTO accounter_schema.documents (
       image_url,

server/src/resolvers.mts

@@ -1,3 +1,5 @@
+import { GraphQLError } from 'graphql';
+
 import { IUpdateChargeParams } from './__generated__/charges.types.mjs';
 import {
   IGetAllDocumentsResult,
@@ -51,6 +53,7 @@ import {
 } from './providers/charges.mjs';
 import { pool } from './providers/db.mjs';
 import {
+  deleteDocument,
   getAllDocuments,
   getDocumentsByChargeIdLoader,
   getDocumentsByFinancialEntityIds,
@@ -241,6 +244,15 @@ export const resolvers: Resolvers = {
         };
       }
     },
+    deleteDocument: async (_, { documentId }) => {
+      const res = await deleteDocument.run({ documentId }, pool);
+      if (res.length === 1) {
+        return true;
+      }
+      throw new GraphQLError(
+        res.length === 0 ? 'Document not found' : `More than one document found and deleted: ${res}`
+      );
+    },
     updateCharge: async (_, { chargeId, fields }) => {
       const financialAccountsToBalance = fields.beneficiaries
         ? JSON.stringify(fields.beneficiaries.map(b => ({ name: b.counterparty.name, percentage: b.percentage })))