feat: apply new cards design system.

feat: empty status datatables. fix: edit account.
2026-02-17 13:20:31 +00:00 · 2020-11-18 21:55:17 +02:00
parent 0b386a7cb2
commit 128feb73f8
64 changed files with 869 additions and 688 deletions
--- a/client/src/containers/Items/ItemCategoriesTable.js
+++ b/client/src/containers/Items/ItemCategoriesTable.js
@@ -9,12 +9,15 @@ import {
  Position,
 } from '@blueprintjs/core';
 import { FormattedMessage as T, useIntl } from 'react-intl';
+import classNames from 'classnames';

 import Icon from 'components/Icon';
 import LoadingIndicator from 'components/LoadingIndicator';
 import { compose } from 'utils';
 import DataTable from 'components/DataTable';

+import { CLASSES } from 'common/classes';
+
 import withItemCategories from './withItemCategories';
 import withDialogActions from 'containers/Dialog/withDialogActions';

@@ -139,21 +142,23 @@ const ItemsCategoryList = ({
  );

  return (
-    <LoadingIndicator mount={false}>
-      <DataTable
-        noInitialFetch={true}
-        columns={columns}
-        data={categoriesList}
-        onFetchData={handelFetchData}
-        manualSortBy={true}
-        selectionColumn={selectionColumn}
-        expandable={true}
-        sticky={true}
-        onSelectedRowsChange={handleSelectedRowsChange}
-        loading={categoriesTableLoading}
-        rowContextMenu={handleRowContextMenu}
-      />
-    </LoadingIndicator>
+    <div className={classNames(CLASSES.DASHBOARD_DATATABLE)}>
+      <LoadingIndicator mount={false}>
+        <DataTable
+          noInitialFetch={true}
+          columns={columns}
+          data={categoriesList}
+          onFetchData={handelFetchData}
+          manualSortBy={true}
+          selectionColumn={selectionColumn}
+          expandable={true}
+          sticky={true}
+          onSelectedRowsChange={handleSelectedRowsChange}
+          loading={categoriesTableLoading}
+          rowContextMenu={handleRowContextMenu}
+        />
+      </LoadingIndicator>
+    </div>
  );
 };

--- a/client/src/containers/Items/ItemForm.js
+++ b/client/src/containers/Items/ItemForm.js
@@ -1,11 +1,11 @@
 import React, { useState, useMemo, useCallback, useEffect } from 'react';
-import * as Yup from 'yup';
 import { Formik, Form } from 'formik';
 import { Intent } from '@blueprintjs/core';
 import { queryCache } from 'react-query';
 import { useHistory } from 'react-router-dom';
 import { useIntl } from 'react-intl';
 import classNames from 'classnames';
+import { defaultTo } from 'lodash';

 import { CLASSES } from 'common/classes';
 import AppToaster from 'components/AppToaster';
@@ -22,6 +22,8 @@ import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withSettings from 'containers/Settings/withSettings';

 import { compose, transformToForm } from 'utils';
+import { transitionItemTypeKeyToLabel } from './utils';
+import { EditItemFormSchema, CreateItemFormSchema } from './ItemForm.schema';

 const defaultInitialValues = {
  active: true,
@@ -83,66 +85,15 @@ function ItemForm({
    deleteCallback: requestDeleteMedia,
  });

-  const validationSchema = Yup.object().shape({
-    active: Yup.boolean(),
-    name: Yup.string()
-      .required()
-      .label(formatMessage({ id: 'item_name_' })),
-    type: Yup.string()
-      .trim()
-      .required()
-      .label(formatMessage({ id: 'item_type_' })),
-    sku: Yup.string().trim(),
-    cost_price: Yup.number().when(['purchasable'], {
-      is: true,
-      then: Yup.number()
-        .required()
-        .label(formatMessage({ id: 'cost_price_' })),
-      otherwise: Yup.number().nullable(true),
-    }),
-    sell_price: Yup.number().when(['sellable'], {
-      is: true,
-      then: Yup.number()
-        .required()
-        .label(formatMessage({ id: 'sell_price_' })),
-      otherwise: Yup.number().nullable(true),
-    }),
-    cost_account_id: Yup.number()
-      .when(['purchasable'], {
-        is: true,
-        then: Yup.number().required(),
-        otherwise: Yup.number().nullable(true),
-      })
-      .label(formatMessage({ id: 'cost_account_id' })),
-    sell_account_id: Yup.number()
-      .when(['sellable'], {
-        is: true,
-        then: Yup.number().required(),
-        otherwise: Yup.number().nullable(),
-      })
-      .label(formatMessage({ id: 'sell_account_id' })),
-    inventory_account_id: Yup.number()
-      .when(['type'], {
-        is: (value) => value === 'inventory',
-        then: Yup.number().required(),
-        otherwise: Yup.number().nullable(),
-      })
-      .label(formatMessage({ id: 'inventory_account' })),
-    category_id: Yup.number().positive().nullable(),
-    stock: Yup.string() || Yup.boolean(),
-    sellable: Yup.boolean().required(),
-    purchasable: Yup.boolean().required(),
-  });
-
  /**
   * Initial values in create and edit mode.
   */
  const initialValues = useMemo(
    () => ({
      ...defaultInitialValues,
-      cost_account_id: parseInt(preferredCostAccount),
-      sell_account_id: parseInt(preferredSellAccount),
-      inventory_account_id: parseInt(preferredInventoryAccount),
+      cost_account_id: defaultTo(preferredCostAccount, ''),
+      sell_account_id: defaultTo(preferredSellAccount, ''),
+      inventory_account_id: defaultTo(preferredInventoryAccount, ''),
      /**
       * 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
@@ -150,7 +101,12 @@ function ItemForm({
       */
      ...transformToForm(itemDetail, defaultInitialValues),
    }),
-    [],
+    [
+      itemDetail,
+      preferredCostAccount,
+      preferredSellAccount,
+      preferredInventoryAccount,
+    ],
  );

  useEffect(() => {
@@ -214,7 +170,7 @@ function ItemForm({

  useEffect(() => {
    if (itemDetail && itemDetail.type) {
-      changePageSubtitle(formatMessage({ id: itemDetail.type }));
+      changePageSubtitle(transitionItemTypeKeyToLabel(itemDetail.type));
    }
  }, [itemDetail, changePageSubtitle, formatMessage]);

@@ -262,14 +218,14 @@ function ItemForm({
    <div class={classNames(CLASSES.PAGE_FORM_ITEM)}>
      <Formik
        enableReinitialize={true}
-        validationSchema={validationSchema}
+        validationSchema={isNewMode ? CreateItemFormSchema : EditItemFormSchema}
        initialValues={initialValues}
        onSubmit={handleFormSubmit}
      >
        {({ isSubmitting, handleSubmit }) => (
          <Form>
            <div class={classNames(CLASSES.PAGE_FORM_BODY)}>
-              <ItemFormPrimarySection />
+              <ItemFormPrimarySection itemId={itemId} />
              <ItemFormBody />
              <ItemFormInventorySection />
            </div>
@@ -294,8 +250,10 @@ export default compose(
  withDashboardActions,
  withMediaActions,
  withSettings(({ itemsSettings }) => ({
-    preferredCostAccount: itemsSettings.preferredCostAccount,
-    preferredSellAccount: itemsSettings.preferredSellAccount,
-    preferredInventoryAccount: itemsSettings.preferredInventoryAccount,
+    preferredCostAccount: parseInt(itemsSettings?.preferredCostAccount),
+    preferredSellAccount: parseInt(itemsSettings?.preferredSellAccount),
+    preferredInventoryAccount: parseInt(
+      itemsSettings?.preferredInventoryAccount,
+    ),
  })),
 )(ItemForm);
--- a/client/src/containers/Items/ItemForm.schema.js
+++ b/client/src/containers/Items/ItemForm.schema.js
@@ -0,0 +1,56 @@
+import * as Yup from 'yup';
+import { formatMessage } from 'services/intl';
+
+const Schema = Yup.object().shape({
+  active: Yup.boolean(),
+  name: Yup.string()
+    .required()
+    .label(formatMessage({ id: 'item_name_' })),
+  type: Yup.string()
+    .trim()
+    .required()
+    .label(formatMessage({ id: 'item_type_' })),
+  sku: Yup.string().trim(),
+  cost_price: Yup.number().when(['purchasable'], {
+    is: true,
+    then: Yup.number()
+      .required()
+      .label(formatMessage({ id: 'cost_price_' })),
+    otherwise: Yup.number().nullable(true),
+  }),
+  sell_price: Yup.number().when(['sellable'], {
+    is: true,
+    then: Yup.number()
+      .required()
+      .label(formatMessage({ id: 'sell_price_' })),
+    otherwise: Yup.number().nullable(true),
+  }),
+  cost_account_id: Yup.number()
+    .when(['purchasable'], {
+      is: true,
+      then: Yup.number().required(),
+      otherwise: Yup.number().nullable(true),
+    })
+    .label(formatMessage({ id: 'cost_account_id' })),
+  sell_account_id: Yup.number()
+    .when(['sellable'], {
+      is: true,
+      then: Yup.number().required(),
+      otherwise: Yup.number().nullable(),
+    })
+    .label(formatMessage({ id: 'sell_account_id' })),
+  inventory_account_id: Yup.number()
+    .when(['type'], {
+      is: (value) => value === 'inventory',
+      then: Yup.number().required(),
+      otherwise: Yup.number().nullable(),
+    })
+    .label(formatMessage({ id: 'inventory_account' })),
+  category_id: Yup.number().positive().nullable(),
+  stock: Yup.string() || Yup.boolean(),
+  sellable: Yup.boolean().required(),
+  purchasable: Yup.boolean().required(),
+});
+
+export const CreateItemFormSchema = Schema;
+export const EditItemFormSchema = Schema;
--- a/client/src/containers/Items/ItemFormBody.js
+++ b/client/src/containers/Items/ItemFormBody.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { FastField, ErrorMessage } from 'formik';
+import { FastField, Field, ErrorMessage } from 'formik';
 import {
  FormGroup,
  Classes,
@@ -27,8 +27,8 @@ function ItemFormBody({ accountsList }) {
      <Row>
        <Col xs={6}>
          {/*------------- Purchasable checbox ------------- */}
-          <FastField name={'sellable'}>
-            {({ field, field: { value } }) => (
+          <FastField name={'sellable'} type="checkbox">
+            {({ field: { onChange, onBlur, name, checked } }) => (
              <FormGroup inline={true} className={'form-group--sellable'}>
                <Checkbox
                  inline={true}
@@ -37,8 +37,10 @@ function ItemFormBody({ accountsList }) {
                      <T id={'i_sell_this_item'} />
                    </h3>
                  }
-                  checked={value}
-                  {...field}
+                  name={'sellable'}
+                  checked={!!checked}
+                  onChange={onChange}
+                  onBlur={onBlur}
                />
              </FormGroup>
            )}
--- a/client/src/containers/Items/ItemFormFloatingActions.js
+++ b/client/src/containers/Items/ItemFormFloatingActions.js
@@ -56,7 +56,7 @@ export default function ItemFormFloatingActions({
      {/*----------- Active ----------*/}
      <FastField name={'active'}>
        {({ field, field: { value } }) => (
-          <FormGroup label={' '} inline={true} className={'form-group--active'}>
+          <FormGroup inline={true} className={'form-group--active'}>
            <Checkbox
              inline={true}
              label={<T id={'active'} />}
--- a/client/src/containers/Items/ItemFormPage.js
+++ b/client/src/containers/Items/ItemFormPage.js
@@ -3,6 +3,7 @@ import { useParams, useHistory } from 'react-router-dom';
 import { useQuery } from 'react-query';

 import DashboardInsider from 'components/Dashboard/DashboardInsider';
+import DashboardCard from 'components/Dashboard/DashboardCard';
 import ItemForm from 'containers/Items/ItemForm';

 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
@@ -62,11 +63,13 @@ const ItemFormContainer = ({
      }
      name={'item-form'}
    >
-      <ItemForm
-        onFormSubmit={handleFormSubmit}
-        itemId={id}
-        onCancelForm={handleCancel}
-      />
+      <DashboardCard page>
+        <ItemForm
+          onFormSubmit={handleFormSubmit}
+          itemId={id}
+          onCancelForm={handleCancel}
+        />
+      </DashboardCard>
    </DashboardInsider>
  );
 };
--- a/client/src/containers/Items/ItemFormPrimarySection.js
+++ b/client/src/containers/Items/ItemFormPrimarySection.js
@@ -25,6 +25,7 @@ import withAccounts from 'containers/Accounts/withAccounts';
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';

 import { compose, handleStringChange, inputIntent } from 'utils';
+import { transitionItemTypeKeyToLabel } from './utils';

 /**
 * Item form primary section.
@@ -35,8 +36,12 @@ function ItemFormPrimarySection({

  // #withDashboardActions
  changePageSubtitle,
+
+  // #ownProps
+  itemId,
 }) {
  const { formatMessage } = useIntl();
+  const isNewMode = !itemId;

  const itemTypeHintContent = (
    <>
@@ -59,48 +64,45 @@ function ItemFormPrimarySection({

  return (
    <div className={classNames(CLASSES.PAGE_FORM_HEADER_PRIMARY)}>
+      {/*----------- Item type ----------*/}
+      <FastField name={'type'}>
+        {({ form, field: { value }, meta: { touched, error } }) => (
+          <FormGroup
+            medium={true}
+            label={<T id={'item_type'} />}
+            labelInfo={
+              <span>
+                <FieldRequiredHint />
+                <Hint
+                  content={itemTypeHintContent}
+                  position={Position.BOTTOM_LEFT}
+                />
+              </span>
+            }
+            className={'form-group--item-type'}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="item_type" />}
+            inline={true}
+          >
+            <RadioGroup
+              inline={true}
+              onChange={handleStringChange((_value) => {
+                form.setFieldValue('type', _value);
+                changePageSubtitle(transitionItemTypeKeyToLabel(_value));
+              })}
+              selectedValue={value}
+              disabled={value === 'inventory' && !isNewMode}
+            >
+              <Radio label={<T id={'service'} />} value="service" />
+              <Radio label={<T id={'non_inventory'} />} value="non-inventory" />
+              <Radio label={<T id={'inventory'} />} value="inventory" />
+            </RadioGroup>
+          </FormGroup>
+        )}
+      </FastField>
+
      <Row>
        <Col xs={7}>
-          {/*----------- Item type ----------*/}
-          <FastField name={'type'}>
-            {({ form, field: { value }, meta: { touched, error } }) => (
-              <FormGroup
-                medium={true}
-                label={<T id={'item_type'} />}
-                labelInfo={
-                  <span>
-                    <FieldRequiredHint />
-                    <Hint
-                      content={itemTypeHintContent}
-                      position={Position.BOTTOM_LEFT}
-                    />
-                  </span>
-                }
-                className={'form-group--item-type'}
-                intent={inputIntent({ error, touched })}
-                helperText={<ErrorMessage name="item_type" />}
-                inline={true}
-              >
-                <RadioGroup
-                  inline={true}
-                  onChange={handleStringChange((_value) => {
-                    form.setFieldValue('type', _value);
-                    changePageSubtitle(formatMessage({ id: _value }));
-                  })}
-                  selectedValue={value}
-                  disabled={value === 'inventory'}
-                >
-                  <Radio label={<T id={'service'} />} value="service" />
-                  <Radio
-                    label={<T id={'non_inventory'} />}
-                    value="non-inventory"
-                  />
-                  <Radio label={<T id={'inventory'} />} value="inventory" />
-                </RadioGroup>
-              </FormGroup>
-            )}
-          </FastField>
-
          {/*----------- Item name ----------*/}
          <FastField name={'name'}>
            {({ field, meta: { error, touched } }) => (
--- a/client/src/containers/Items/utils.js
+++ b/client/src/containers/Items/utils.js
@@ -0,0 +1,10 @@
+import { formatMessage } from "services/intl";
+
+export const transitionItemTypeKeyToLabel = (itemTypeKey) => {
+  const table = {
+    'service': formatMessage({ id: 'service' }),
+    'inventory': formatMessage({ id: 'inventory' }),
+    'non-inventory': formatMessage({ id: 'non_inventory' }),
+  };
+  return typeof table[itemTypeKey] === 'string' ? table[itemTypeKey] : '';
+};