feat: style read-only drawers.

fix: empty state in resources tables.
2026-02-18 13:50:31 +00:00 · 2021-08-24 14:57:19 +02:00
parent f5fd2aa324
commit af34986aac
143 changed files with 1530 additions and 915 deletions
--- a/client/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerActionBar.js
+++ b/client/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerActionBar.js
@@ -1,23 +1,26 @@
 import React from 'react';
 import { useHistory } from 'react-router-dom';
 import Icon from 'components/Icon';
-import { Button, Classes, NavbarGroup, Intent } from '@blueprintjs/core';
+import {
+  Button,
+  Classes,
+  NavbarGroup,
+  Intent,
+  NavbarDivider,
+} from '@blueprintjs/core';
 import { FormattedMessage as T } from 'components';
-import { safeCallback } from 'utils';

 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';

 import { compose } from 'utils';
+import { useManualJournalDrawerContext } from './ManualJournalDrawerProvider';

 /**
 * Manual journal action bar.
 */
 function ManualJournalDrawerActionBar({
-  // #ownProps
-  manualJournal,
-
  // #withAlertsDialog
  openAlert,

@@ -25,21 +28,17 @@ function ManualJournalDrawerActionBar({
  closeDrawer,
 }) {
  const history = useHistory();
+  const { manualJournalId } = useManualJournalDrawerContext();

  // Handle edit manual journal action.
-  const onEditManualJournal = () => {
-    if (manualJournal) {
-      history.push(`/manual-journals/${manualJournal.id}/edit`);
-      closeDrawer('journal-drawer');
-    }
+  const handleEditManualJournal = () => {
+    history.push(`/manual-journals/${manualJournalId}/edit`);
+    closeDrawer('journal-drawer');
  };

  // Handle manual journal delete action.
-  const onDeleteManualJournal = () => {
-    if (manualJournal) {
-      openAlert('journal-delete', { manualJournalId: manualJournal.id });
-      closeDrawer('journal-drawer');
-    }
+  const handleDeleteManualJournal = () => {
+    openAlert('journal-delete', { manualJournalId });
  };

  return (
@@ -49,14 +48,15 @@ function ManualJournalDrawerActionBar({
          className={Classes.MINIMAL}
          icon={<Icon icon="pen-18" />}
          text={<T id={'edit_journal'} />}
-          onClick={safeCallback(onEditManualJournal)}
+          onClick={handleEditManualJournal}
        />
-
+        <NavbarDivider />
        <Button
          className={Classes.MINIMAL}
-          icon={<Icon style={{ color: 'red' }} icon="trash-18" iconSize={18} />}
+          icon={<Icon icon="trash-16" iconSize={16} />}
          text={<T id={'delete'} />}
-          onClick={safeCallback(onDeleteManualJournal)}
+          intent={Intent.DANGER}
+          onClick={handleDeleteManualJournal}
        />
      </NavbarGroup>
    </DashboardActionsBar>
--- a/client/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerDetails.js
+++ b/client/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerDetails.js
@@ -1,4 +1,7 @@
 import React from 'react';
+
+import { Card } from 'components';
+
 import ManualJournalDrawerActionBar from './ManualJournalDrawerActionBar';
 import ManualJournalDrawerHeader from './ManualJournalDrawerHeader';
 import ManualJournalDrawerTable from './ManualJournalDrawerTable';
@@ -15,10 +18,13 @@ export default function ManualJournalDrawerDetails() {
  return (
    <div className={'journal-drawer'}>
      <ManualJournalDrawerActionBar manualJournal={manualJournal} />
+
      <div className="journal-drawer__content">
-        <ManualJournalDrawerHeader manualJournal={manualJournal} />
-        <ManualJournalDrawerTable manualJournal={manualJournal} />
-        <ManualJournalDrawerFooter manualJournal={manualJournal} />
+        <Card>
+          <ManualJournalDrawerHeader />
+          <ManualJournalDrawerTable />
+          <ManualJournalDrawerFooter />
+        </Card>
      </div>
    </div>
  );
--- a/client/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerFooter.js
+++ b/client/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerFooter.js
@@ -1,25 +1,27 @@
 import React from 'react';
-import { FormattedMessage as T } from 'components';
+import { useManualJournalDrawerContext } from './ManualJournalDrawerProvider';
+
+export default function ManualJournalDrawerFooter({}) {
+  const {
+    manualJournal: { amount },
+  } = useManualJournalDrawerContext();

-export default function ManualJournalDrawerFooter({
-  manualJournal: { amount_formatted },
-}) {
  return (
-    <div className="journal-drawer__content--footer">
-      <div className="wrapper">
-        <div>
-          <span>
-            <T id={'sub_total'} />
-          </span>
-          <p>{amount_formatted}</p>
+    <div className="journal-drawer__content-footer">
+      <div class="total-lines">
+        <div class="total-lines__line total-lines__line--subtotal">
+          <div class="title">Subtotal</div>
+          <div class="debit">{amount}</div>
+          <div class="credit">{amount} </div>
        </div>
-        <div>
-          <span>
-            <T id={'total'} />
-          </span>
-          <p>{amount_formatted}</p>
+        <div class="total-lines__line total-lines__line--total">
+          <div class="title">TOTAL</div>
+          <div class="debit">{amount}</div>
+          <div class="credit">{amount}</div>
        </div>
      </div>
    </div>
  );
 }
+
+
--- a/client/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerHeader.js
+++ b/client/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerHeader.js
@@ -1,47 +1,49 @@
 import React from 'react';
-import { FormattedMessage as T } from 'components';
+import { defaultTo } from 'lodash';
+import { DetailsMenu, DetailItem, FormattedMessage as T } from 'components';
+import { useManualJournalDrawerContext } from './ManualJournalDrawerProvider';

 /**
- *  Manual journal details header.
+ * Manual journal details header.
 */
-export default function ManualJournalDrawerHeader({
-  manualJournal: {
-    amount_formatted,
-    journal_type,
-    journal_number,
-    reference,
-    currency_code,
-  },
-}) {
+export default function ManualJournalDrawerHeader() {
+  const {
+    manualJournal: {
+      formatted_amount,
+      journal_type,
+      journal_number,
+      reference,
+      currency_code,
+      description,
+    },
+  } = useManualJournalDrawerContext();
+
  return (
-    <div className={'journal-drawer__content--header'}>
-      <div>
-        <T id={'total'} />
-        <p className="balance">{amount_formatted}</p>
-      </div>
-      <div>
-        <span>
-          <T id={'journal_type'} />
-        </span>
-        <p>{journal_type}</p>
-      </div>
-      <div>
-        <span>
-          <T id={'journal_no'} />
-        </span>
-        <p>{journal_number}</p>
-      </div>
-      <div>
-        <span>
-          <T id={'reference_no'} />
-        </span>
-        <p>{reference}</p>
-      </div>
-      <div>
-        <span>
-          <T id={'currency'} />
-        </span>
-        <p>{currency_code}</p>
+    <div className={'journal-drawer__content-header'}>
+      <DetailsMenu>
+        <DetailItem name={'total'} label={<T id={'total'} />}>
+          <h3 class="amount">{formatted_amount}</h3>
+        </DetailItem>
+
+        <DetailItem name={'journal-type'} label={<T id={'journal_type'} />}>
+          {journal_type}
+        </DetailItem>
+
+        <DetailItem name={'journal-number'} label={<T id={'journal_no'} />}>
+          {journal_number}
+        </DetailItem>
+
+        <DetailItem name={'reference-no'} label={<T id={'reference_no'} />}>
+          {defaultTo(reference, '-')}
+        </DetailItem>
+
+        <DetailItem name={'currency'} label={<T id={'currency'} />}>
+          {currency_code}
+        </DetailItem>
+      </DetailsMenu>
+
+      <div class="journal-drawer__content-description">
+        <b class="title">Description</b>: {defaultTo(description, '—')}
      </div>
    </div>
  );
--- a/client/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerProvider.js
+++ b/client/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerProvider.js
@@ -9,17 +9,22 @@ const ManualJournalDrawerContext = React.createContext();
 * Manual journal drawer provider.
 */
 function ManualJournalDrawerProvider({ manualJournalId, ...props }) {
-  // fetch the specific manual journal details.
-  const { data: manualJournal, isLoading: isJournalLoading } = useJournal(
-    manualJournalId,
-    {
-      enabled: !!manualJournalId,
-    },
-  );
-  // provider.
+  // Fetch the specific manual journal details.
+  const {
+    data: manualJournal,
+    isLoading: isJournalLoading,
+    isFetching: isJournalFetching,
+  } = useJournal(manualJournalId, {
+    enabled: !!manualJournalId,
+  });
+
+  // Provider.
  const provider = {
    manualJournalId,
    manualJournal,
+
+    isJournalFetching,
+    isJournalLoading,
  };

  return (
--- a/client/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerTable.js
+++ b/client/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerTable.js
@@ -1,73 +1,20 @@
 import React from 'react';
-import { Classes, Tooltip, Position } from '@blueprintjs/core';

-import intl from 'react-intl-universal';
-import { DataTable, Money, If, Icon } from 'components';
-import { isBlank } from 'utils';
-
-/**
- * Note column accessor.
- */
-export function NoteAccessor(row) {
-  return (
-    <If condition={row.note}>
-      <Tooltip
-        className={Classes.TOOLTIP_INDICATOR}
-        content={row.note}
-        position={Position.LEFT_TOP}
-        hoverOpenDelay={50}
-      >
-        <Icon icon={'file-alt'} iconSize={16} />
-      </Tooltip>
-    </If>
-  );
-}
+import { DataTable, If } from 'components';
+import { useManualJournalEntriesColumns } from './utils';
+import { useManualJournalDrawerContext } from './ManualJournalDrawerProvider';

 /**
 * Manual journal drawer table.
 */
-export default function ManualJournalDrawerTable({
-  manualJournal: { entries, description, currency_code },
-}) {
-  const columns = React.useMemo(
-    () => [
-      {
-        Header: intl.get('account_name'),
-        accessor: 'account.name',
-        width: 130,
-      },
-      {
-        Header: intl.get('contact'),
-        accessor: 'contact.display_name',
-        width: 130,
-      },
-      {
-        Header: intl.get('credit'),
-        accessor: ({ credit }) =>
-          !isBlank(credit) && credit !== 0 ? (
-            <Money amount={credit} currency={currency_code} />
-          ) : null,
-        width: 80,
-      },
-      {
-        Header: intl.get('debit'),
-        accessor: ({ debit }) =>
-          !isBlank(debit) && debit !== 0 ? (
-            <Money amount={debit} currency={currency_code} />
-          ) : null,
-        width: 80,
-      },
-      {
-        Header: intl.get('note'),
-        accessor: NoteAccessor,
-        width: 80,
-      },
-    ],
-    [],
-  );
+export default function ManualJournalDrawerTable() {
+  const columns = useManualJournalEntriesColumns();
+  const {
+    manualJournal: { entries, description },
+  } = useManualJournalDrawerContext();

  return (
-    <div className="journal-drawer__content--table">
+    <div className="journal-drawer__content-table">
      <DataTable columns={columns} data={entries} />

      <If condition={description}>
--- a/client/src/containers/Drawers/ManualJournalDrawer/index.js
+++ b/client/src/containers/Drawers/ManualJournalDrawer/index.js
@@ -19,7 +19,15 @@ function ManualJournalDrawer({
  payload: { manualJournalId },
 }) {
  return (
-    <Drawer isOpen={isOpen} name={name} size={'900px'}>
+    <Drawer
+      isOpen={isOpen}
+      name={name}
+      size={'65%'}
+      style={{
+        minWidth: '700px',
+        maxWidth: '900px',
+      }}
+    >
      <DrawerSuspense>
        <ManualJournalDrawerContent manualJournalId={manualJournalId} />
      </DrawerSuspense>
--- a/client/src/containers/Drawers/ManualJournalDrawer/utils.js
+++ b/client/src/containers/Drawers/ManualJournalDrawer/utils.js
@@ -0,0 +1,65 @@
+import intl from 'react-intl-universal';
+import React from 'react';
+import { Classes, Tooltip, Position } from '@blueprintjs/core';
+
+import { If, Icon } from 'components';
+
+/**
+ * Note column accessor.
+ */
+export function NoteAccessor(row) {
+  return (
+    <If condition={row.note}>
+      <Tooltip
+        className={Classes.TOOLTIP_INDICATOR}
+        content={row.note}
+        position={Position.LEFT_TOP}
+        hoverOpenDelay={50}
+      >
+        <Icon icon={'file-alt'} iconSize={16} />
+      </Tooltip>
+    </If>
+  );
+}
+
+/**
+ * Retrieve read-only manual journal entries columns.
+ */
+export const useManualJournalEntriesColumns = () =>
+  React.useMemo(
+    () => [
+      {
+        Header: intl.get('account_name'),
+        accessor: 'account.name',
+        width: 130,
+        disableSortBy: true,
+      },
+      {
+        Header: intl.get('contact'),
+        accessor: 'contact.display_name',
+        width: 130,
+        disableSortBy: true,
+      },
+      {
+        Header: intl.get('note'),
+        accessor: NoteAccessor,
+        width: 80,
+        disableSortBy: true,
+      },
+      {
+        Header: intl.get('credit'),
+        accessor: 'credit',
+        width: 100,
+        disableResizable: true,
+        disableSortBy: true,
+      },
+      {
+        Header: intl.get('debit'),
+        accessor: 'debit',
+        width: 100,
+        disableResizable: true,
+        disableSortBy: true,
+      },
+    ],
+    [],
+  );