feat: export dialog on resource table

packages/webapp/src/containers/Dialogs/ExportDialog/ExportDialogContent.tsx

@@ -0,0 +1,17 @@
+// @ts-nocheck
+
+import { ExportDialogForm } from './ExportDialogForm';
+import { ExportFormInitialValues } from './type';
+
+interface ExportDialogContentProps {
+  initialValues?: ExportFormInitialValues;
+}
+
+/**
+ * Account dialog content.
+ */
+export default function ExportDialogContent({
+  initialValues,
+}: ExportDialogContentProps) {
+  return <ExportDialogForm initialValues={initialValues} />;
+}

packages/webapp/src/containers/Dialogs/ExportDialog/ExportDialogForm.schema.ts

@@ -0,0 +1,9 @@
+// @ts-nocheck
+import * as Yup from 'yup';
+
+const Schema = Yup.object().shape({
+  resource: Yup.string().required().label('Resource'),
+  format: Yup.string().required().label('Format'),
+});
+
+export const ExportDialogFormSchema = Schema;

packages/webapp/src/containers/Dialogs/ExportDialog/ExportDialogForm.tsx

@@ -0,0 +1,70 @@
+// @ts-nocheck
+import { Formik } from 'formik';
+
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import { compose, transformToForm } from '@/utils';
+
+import { ExportDialogFormSchema } from './ExportDialogForm.schema';
+import { ExportDialogFormContent } from './ExportDialogFormContent';
+import { useResourceExport } from '@/hooks/query/FinancialReports/use-export';
+import { ExportFormInitialValues } from './type';
+
+// Default initial form values.
+const defaultInitialValues = {
+  resource: '',
+  format: 'csv',
+};
+
+interface ExportDialogFormProps {
+  initialValues?: ExportFormInitialValues;
+}
+
+/**
+ * Account form dialog content.
+ */
+function ExportDialogFormRoot({
+  // #ownProps
+  initialValues,
+
+  // #withDialogActions
+  closeDialog,
+}: ExportDialogFormProps) {
+  const { mutateAsync: mutateExport } = useResourceExport();
+
+  // Callbacks handles form submit.
+  const handleFormSubmit = (values, { setSubmitting, setErrors }) => {
+    setSubmitting(true);
+    const { resource, format } = values;
+
+    mutateExport({ resource, format })
+      .then(() => {
+        setSubmitting(false);
+      })
+      .catch(() => {
+        setSubmitting(false);
+      });
+  };
+
+  // Form initial values in create and edit mode.
+  const initialFormValues = {
+    ...defaultInitialValues,
+    /**
+     * We only care about the fields in the form. Previously unfilled optional
+     * values such as `notes` come back from the API as null, so remove those
+     * as well.
+     */
+    ...transformToForm(initialValues, defaultInitialValues),
+  };
+  return (
+    <Formik
+      validationSchema={ExportDialogFormSchema}
+      initialValues={initialFormValues}
+      onSubmit={handleFormSubmit}
+    >
+      <ExportDialogFormContent />
+    </Formik>
+  );
+}
+
+export const ExportDialogForm =
+  compose(withDialogActions)(ExportDialogFormRoot);

packages/webapp/src/containers/Dialogs/ExportDialog/ExportDialogFormContent.tsx

@@ -0,0 +1,29 @@
+import { FFormGroup, FRadioGroup, FSelect } from '@/components';
+import { Button, Callout, Intent, Radio } from '@blueprintjs/core';
+import { Form } from 'formik';
+import { ExportResources } from './constants';
+
+export function ExportDialogFormContent() {
+  return (
+    <Form>
+      <Callout>
+        You can export data from Bigcapital in CSV or XLSX format
+      </Callout>
+
+      <FFormGroup name={'resource'} label={'Select Resource'}>
+        <FSelect name={'resource'} items={ExportResources} />
+      </FFormGroup>
+
+      <FRadioGroup label={'Export As'} name={'format'}>
+        <Radio value={'xlsx'}>XLSX (Microsoft Excel)</Radio>
+        <Radio value={'csv'}>CSV (Comma Seperated Value)</Radio>
+      </FRadioGroup>
+
+      <div>
+        <Button type={'submit'} intent={Intent.PRIMARY}>
+          Export
+        </Button>
+      </div>
+    </Form>
+  );
+}

packages/webapp/src/containers/Dialogs/ExportDialog/constants.ts

@@ -0,0 +1,17 @@
+export const ExportResources = [
+  { value: 'account', text: 'Accounts' },
+  { value: 'item', text: 'Items' },
+  { value: 'item_category', text: 'Item Categories' },
+  { value: 'customer', text: 'Customers' },
+  { value: 'vendor', text: 'Vendors' },
+  { value: 'manual_journal', text: 'Manual Journal' },
+  { value: 'expense', text: 'Expenses' },
+  { value: 'sale_invoice', text: 'Invoices' },
+  { value: 'sale_estimate', text: ' Estimates' },
+  { value: 'sale_receipt', text: 'Receipts' },
+  { value: 'payment_receive', text: 'Payments Received' },
+  { value: 'credit_note', text: 'Credit Notes' },
+  { value: 'bill', text: 'Bills' },
+  { value: 'bill_payment', text: 'Bill Payments' },
+  { value: 'vendor_credit', text: 'Vendor Credits' },
+];

packages/webapp/src/containers/Dialogs/ExportDialog/index.tsx

@@ -0,0 +1,31 @@
+// @ts-nocheck
+import React, { lazy } from 'react';
+import { Dialog, DialogSuspense, FormattedMessage as T } from '@/components';
+import withDialogRedux from '@/components/DialogReduxConnect';
+import { compose } from '@/utils';
+
+const ExportDialogContent = lazy(() => import('./ExportDialogContent'));
+
+// User form dialog.
+function ExportDialogRoot({ dialogName, payload, isOpen }) {
+  const { resource = null, format = null } = payload;
+
+  return (
+    <Dialog
+      name={dialogName}
+      title={'Export Data'}
+      autoFocus={true}
+      canEscapeKeyClose={true}
+      isOpen={isOpen}
+    >
+      <DialogSuspense>
+        <ExportDialogContent
+          dialogName={dialogName}
+          initialValues={{ resource, format }}
+        />
+      </DialogSuspense>
+    </Dialog>
+  );
+}
+
+export const ExportDialog = compose(withDialogRedux())(ExportDialogRoot);

packages/webapp/src/containers/Dialogs/ExportDialog/type.ts

@@ -0,0 +1,6 @@
+
+
+export interface ExportFormInitialValues {
+  resource?: string;
+  format?: string;
+}