fix: accounts list

client/src/components/AccountsTypesSelect.js

@@ -29,15 +29,10 @@ export default function AccountsTypesSelect({
     onTypeSelected && onTypeSelected(accountType);
   };
 
-  const items = accountsTypes.map((type) => ({
-    id: type.id,
-    label: type.label,
-  }));
-
   return (
     <ListSelect
-      items={items}
-      selectedItemProp={'id'}
+      items={accountsTypes}
+      selectedItemProp={'key'}
       selectedItem={selectedTypeId}
       textProp={'label'}
       defaultText={defaultSelectText}

client/src/containers/Accounts/AccountsDataTable.js

@@ -148,15 +148,15 @@ function AccountsDataTable({
       {
         id: 'type',
         Header: formatMessage({ id: 'type' }),
-        accessor: 'type.label',
+        accessor: 'account_type_label',
         className: 'type',
         width: 140,
       },
       {
         id: 'normal',
         Header: formatMessage({ id: 'normal' }),
-        Cell: NormalCell,
-        accessor: 'type.normal',
+        // Cell: NormalCell,
+        accessor: 'account_normal',
         className: 'normal',
         width: 65,
       },
@@ -176,14 +176,14 @@ function AccountsDataTable({
       {
         id: 'actions',
         Header: '',
-        Cell: ({ cell }) => (
-          <Popover
-            content={actionMenuList(cell.row.original)}
-            position={Position.RIGHT_TOP}
-          >
-            <Button icon={<Icon icon="more-h-16" iconSize={16} />} />
-          </Popover>
-        ),
+        // Cell: ({ cell }) => (
+        //   <Popover
+        //     content={actionMenuList(cell.row.original)}
+        //     position={Position.RIGHT_TOP}
+        //   >
+        //     <Button icon={<Icon icon="more-h-16" iconSize={16} />} />
+        //   </Popover>
+        // ),
         className: 'actions',
         width: 50,
       },
@@ -229,6 +229,8 @@ function AccountsDataTable({
         autoResetExpanded={false}
         autoResetSortBy={false}
         selectionColumnWidth={50}
+        virtualizedRows={true}
+        fixedSizeHeight={1000}
       />
     </div>
   );

client/src/containers/Accounts/components.js

@@ -8,17 +8,14 @@ import { FormattedMessage as T, useIntl } from 'react-intl';
 import classNames from 'classnames';
 import { Icon, Money, If, Choose } from 'components';
 
-export function NormalCell({ cell }) {
+export function NormalCell({ cell: { value } }) {
   const { formatMessage } = useIntl();
-
-  const account = cell.row.original;
-  const normal = account?.type?.normal || '';
-  const arrowDirection = normal === 'credit' ? 'down' : 'up';
+  const arrowDirection = value === 'credit' ? 'down' : 'up';
 
   return (
     <Tooltip
       className={Classes.TOOLTIP_INDICATOR}
-      content={formatMessage({ id: normal })}
+      content={formatMessage({ id: value })}
       position={Position.RIGHT}
       hoverOpenDelay={100}
     >

client/src/containers/Dialogs/AccountFormDialog/AccountForm.schema.js

@@ -9,10 +9,9 @@ const Schema = Yup.object().shape({
     .max(DATATYPES_LENGTH.STRING)
     .label(formatMessage({ id: 'account_name_' })),
   code: Yup.string().nullable().min(3).max(6),
-  account_type_id: Yup.number()
-    .nullable()
+  account_type: Yup.string()
     .required()
-    .label(formatMessage({ id: 'account_type_id' })),
+    .label(formatMessage({ id: 'account_type' })),
   description: Yup.string().min(3).max(DATATYPES_LENGTH.TEXT).nullable().trim(),
   parent_account_id: Yup.number().nullable(),
 });

client/src/containers/Dialogs/AccountFormDialog/AccountFormDialogFields.js

@@ -42,22 +42,22 @@ function AccountFormDialogFields({
   return (
     <Form>
       <div className={Classes.DIALOG_BODY}>
-        <FastField name={'account_type_id'}>
+        <FastField name={'account_type'}>
           {({ form, field: { value }, meta: { error, touched } }) => (
             <FormGroup
               label={<T id={'account_type'} />}
               labelInfo={<FieldRequiredHint />}
               className={classNames('form-group--account-type', Classes.FILL)}
               inline={true}
-              helperText={<ErrorMessage name="account_type_id" />}
+              helperText={<ErrorMessage name="account_type" />}
               intent={inputIntent({ error, touched })}
             >
               <AccountsTypesSelect
                 accountsTypes={accountsTypes}
                 selectedTypeId={value}
                 defaultSelectText={<T id={'select_account_type'} />}
-                onTypeSelected={(account) => {
-                  form.setFieldValue('account_type_id', account.id);
+                onTypeSelected={(accountType) => {
+                  form.setFieldValue('account_type', accountType.key);
                 }}
                 disabled={!isNewMode}
                 popoverProps={{ minimal: true }}