fix issues in users list.

2026-02-15 12:20:31 +00:00 · 2020-05-26 21:49:09 +02:00
parent 2321c3be99
commit 733ee5caf1
6 changed files with 162 additions and 113 deletions
--- a/client/package.json
+++ b/client/package.json
@@ -28,6 +28,7 @@
    "basscss": "^8.0.2",
    "camelcase": "^5.3.1",
    "case-sensitive-paths-webpack-plugin": "2.3.0",
+    "cross-env": "^7.0.2",
    "css-loader": "3.4.2",
    "dotenv": "8.2.0",
    "dotenv-expand": "5.1.0",
@@ -101,6 +102,7 @@
  },
  "scripts": {
    "start": "PORT=8000 node scripts/start.js",
+    "start-win": "cross-env PORT=8000 node scripts/start.js",
    "build": "node scripts/build.js",
    "test": "node scripts/test.js",
    "flow": "flow"
--- a/client/src/containers/Dialogs/InviteUserDialog.js
+++ b/client/src/containers/Dialogs/InviteUserDialog.js
@@ -12,6 +12,7 @@ import {
 } from '@blueprintjs/core';
 import { objectKeysTransform } from 'utils';
 import { pick, snakeCase } from 'lodash';
+import { queryCache } from 'react-query';

 import AppToaster from 'components/AppToaster';

@@ -80,6 +81,7 @@ function InviteUserDialog({
              message: formatMessage({id:'the_user_details_has_been_updated'}),
            });
            setSubmitting(false);
+            queryCache.refetchQueries('users-table',{force:true})
          })
          .catch((error) => {
            setSubmitting(false);
@@ -97,14 +99,15 @@ function InviteUserDialog({
    formik.resetForm();
  }, [formik.resetForm]);

-  const handleClose = () => {
-    closeDialog(name);
-  };
+ // Handles dialog close.
+ const handleClose = useCallback(() => {
+  closeDialog(name);
+}, [closeDialog, name]);

  return (
    <Dialog
      name={name}
-      title={payload.action === 'edit' ? <T id={'edit_invite'} /> : ''}
+      title={payload.action === 'edit' ? <T id={'edit_user'} /> : ''}
      className={classNames({
        'dialog--loading': fetchHook.pending,
        'dialog--invite-user': true,
@@ -115,6 +118,7 @@ function InviteUserDialog({
      isLoading={fetchHook.pending}
      onClosed={onDialogClosed}
      onOpening={onDialogOpening}
+      onClose={handleClose}
    >
      <form onSubmit={formik.handleSubmit}>
        <div className={Classes.DIALOG_BODY}>
@@ -179,7 +183,7 @@ function InviteUserDialog({
        <div className={Classes.DIALOG_FOOTER}>
          <div className={Classes.DIALOG_FOOTER_ACTIONS}>
            <Button onClick={handleClose}><T id={'close'}/></Button>
-            <Button intent={Intent.PRIMARY} type='submit'>
+            <Button intent={Intent.PRIMARY} type='submit' disabled={formik.isSubmitting} >
              {payload.action === 'edit' ? <T id={'edit'}/> : ''}
            </Button>
          </div>
--- a/client/src/containers/Dialogs/UserFormDialog.js
+++ b/client/src/containers/Dialogs/UserFormDialog.js
@@ -1,4 +1,4 @@
-import React, {useCallback } from 'react';
+import React, { useCallback } from 'react';
 import { FormattedMessage as T, useIntl } from 'react-intl';
 import { useFormik } from 'formik';
 import * as Yup from 'yup';
@@ -37,7 +37,10 @@ function UserFormDialog({
  }, false);

  const validationSchema = Yup.object().shape({
-    email: Yup.string().email().required().label(formatMessage({id:'email'})),
+    email: Yup.string()
+      .email()
+      .required()
+      .label(formatMessage({ id: 'email' })),
  });

  const initialValues = {
@@ -45,7 +48,7 @@ function UserFormDialog({
    ...(payload.action === 'edit' &&
      pick(
        objectKeysTransform(payload.user, snakeCase),
-        Object.keys(validationSchema.fields)
+        Object.keys(validationSchema.fields),
      )),
  };

@@ -82,7 +85,10 @@ function UserFormDialog({
    resetForm();
  }, [resetForm]);

-  const handleClose = () => { closeDialog(name); };
+  // Handles dialog close.
+  const handleClose = useCallback(() => {
+    closeDialog(name);
+  }, [closeDialog, name]);

  return (
    <Dialog
@@ -104,10 +110,11 @@ function UserFormDialog({
      isLoading={fetchHook.pending}
      onClosed={onDialogClosed}
      onOpening={onDialogOpening}
+      onClose={handleClose}
    >
      <form onSubmit={handleSubmit}>
        <div className={Classes.DIALOG_BODY}>
-          <p class='mb2'>
+          <p class="mb2">
            <T id={'your_access_to_your_team'} />
          </p>

@@ -115,7 +122,7 @@ function UserFormDialog({
            label={<T id={'email'} />}
            className={classNames('form-group--email', Classes.FILL)}
            intent={errors.email && touched.email && Intent.DANGER}
-            helperText={<ErrorMessage name='email' {...{ errors, touched }} />}
+            helperText={<ErrorMessage name="email" {...{ errors, touched }} />}
            inline={true}
          >
            <InputGroup
@@ -128,9 +135,19 @@ function UserFormDialog({

        <div className={Classes.DIALOG_FOOTER}>
          <div className={Classes.DIALOG_FOOTER_ACTIONS}>
-            <Button onClick={handleClose}><T id={'cancel'} /></Button>
-            <Button intent={Intent.PRIMARY} type='submit' disabled={isSubmitting}>
-              {payload.action === 'edit' ? <T id={'edit'} /> : <T id={'invite'} />}
+            <Button onClick={handleClose}>
+              <T id={'cancel'} />
+            </Button>
+            <Button
+              intent={Intent.PRIMARY}
+              type="submit"
+              disabled={isSubmitting}
+            >
+              {payload.action === 'edit' ? (
+                <T id={'edit'} />
+              ) : (
+                <T id={'invite'} />
+              )}
            </Button>
          </div>
        </div>
@@ -141,5 +158,5 @@ function UserFormDialog({

 export default compose(
  UserFormDialogConnect,
-  DialogReduxConnect
+  DialogReduxConnect,
 )(UserFormDialog);
--- a/client/src/containers/Preferences/Users/UsersList.js
+++ b/client/src/containers/Preferences/Users/UsersList.js
@@ -1,5 +1,5 @@
 import React, { useState, useMemo, useCallback } from 'react';
-import { useQuery } from 'react-query';
+import { queryCache,useQuery } from 'react-query';
 import DataTable from 'components/DataTable';
 import {
  Alert,
@@ -10,10 +10,14 @@ import {
  MenuDivider,
  Position,
  Intent,
-  Tag
+  Tag,
 } from '@blueprintjs/core';
 import { snakeCase } from 'lodash';
-import { FormattedMessage as T, useIntl } from 'react-intl';
+import {
+  FormattedMessage as T,
+  FormattedHTMLMessage,
+  useIntl,
+} from 'react-intl';

 import Icon from 'components/Icon';
 import LoadingIndicator from 'components/LoadingIndicator';
@@ -27,13 +31,12 @@ import withUsersActions from 'containers/Users/withUsersActions';

 import { compose } from 'utils';

-
 function UsersListPreferences({
  // #withDialog
  openDialog,
  closeDialog,

-  // #withUsers  
+  // #withUsers
  usersList,

  // #withUsersActions
@@ -46,9 +49,8 @@ function UsersListPreferences({
 }) {
  const [deleteUserState, setDeleteUserState] = useState(false);
  const [inactiveUserState, setInactiveUserState] = useState(false);
-  const { formatMessage } = useIntl()
-  const fetchUsers = useQuery('users-table',
-    () => requestFetchUsers());
+  const { formatMessage } = useIntl();
+  const fetchUsers = useQuery('users-table', () => requestFetchUsers());

  const onInactiveUser = (user) => {
    setInactiveUserState(user);
@@ -63,9 +65,18 @@ function UsersListPreferences({
  const handleConfirmUserActive = useCallback(() => {
    requestInactiveUser(inactiveUserState.id).then(() => {
      setInactiveUserState(false);
-      AppToaster.show({ message: formatMessage({id:'the_user_has_been_successfully_inactivated'}) });
+      AppToaster.show({
+        message: formatMessage({
+          id: 'the_user_has_been_successfully_inactivated',
+        }),
+      });
    });
-  }, [inactiveUserState, requestInactiveUser, requestFetchUsers,formatMessage]);
+  }, [
+    inactiveUserState,
+    requestInactiveUser,
+    requestFetchUsers,
+    formatMessage,
+  ]);

  const onDeleteUser = (user) => {
    setDeleteUserState(user);
@@ -75,16 +86,6 @@ function UsersListPreferences({
    setDeleteUserState(false);
  };

-  const onEditInviteUser = (user) => () => {
-    const form = Object.keys(user).reduce((obj, key) => {
-      const camelKey = snakeCase(key);
-      obj[camelKey] = user[key];
-      return obj;
-    }, {});
-
-    openDialog('user-form', { action: 'edit', user: form });
-  };
-
  const onEditUser = (user) => () => {
    const form = Object.keys(user).reduce((obj, key) => {
      const camelKey = snakeCase(key);
@@ -95,72 +96,97 @@ function UsersListPreferences({
    openDialog('userList-form', { action: 'edit', user: form });
  };

-  const handleConfirmUserDelete = () => {
-    if (!deleteUserState) { return; }
+  // Handle confirm User delete
+
+  const handleConfirmUserDelete =useCallback(()=>{
+    if (!deleteUserState) {
+      return;
+    }
    requestDeleteUser(deleteUserState.id).then((response) => {
      setDeleteUserState(false);
      AppToaster.show({
-        message: formatMessage({id:'the_user_has_been_successfully_deleted'}),
+        message: formatMessage({
+          id: 'the_user_has_been_successfully_deleted',
+        }),
+        intent:Intent.SUCCESS,
      });
-    });
-  };
+      queryCache.refetchQueries('users-table',{force:true})
+    }).catch((errors)=>{
+      setDeleteUserState(false)
+    })
+  },[deleteUserState,requestDeleteUser,formatMessage])
+

  const actionMenuList = useCallback(
    (user) => (
      <Menu>
        <MenuItem text={<T id={'edit_user'} />} onClick={onEditUser(user)} />
-        <MenuDivider />
-        <MenuItem text={<T id={'edit_invite'} />} onClick={onEditInviteUser(user)} />
-        <MenuItem text={<T id={'inactivate_user'} />} onClick={() => onInactiveUser(user)} />
-        <MenuItem text={<T id={'delete_user'} />} onClick={() => onDeleteUser(user)} />
+        <MenuItem
+          text={<T id={'inactivate_user'} />}
+          onClick={() => onInactiveUser(user)}
+        />
+        <MenuItem
+          text={<T id={'delete_user'} />}
+          onClick={() => onDeleteUser(user)}
+        />
      </Menu>
    ),
-    []
+    [],
  );

-  const columns = useMemo(() => [
-    {
-      id: 'full_name',
-      Header:formatMessage({id:'full_name'}),
+  const columns = useMemo(
+    () => [
+      {
+        id: 'full_name',
+        Header: formatMessage({ id: 'full_name' }),
        accessor: 'full_name',
-      width: 170,
-    },
-    {
-      id: 'email',
-      Header: formatMessage({id:'email'}),
-      accessor: 'email',
-      width: 150,
-    },
-    {
-      id: 'phone_number',
-      Header: formatMessage({id:'phone_number'}),
-      accessor: 'phone_number',
-      width: 150,
-    },
-    {
-      id: 'active',
-      Header: 'Status',
-      accessor: (user) => user.active ?
-        <Tag intent={Intent.SUCCESS} minimal={true}><T id={'activate'} /></Tag> :
-        <Tag intent={Intent.WARNING} minimal={true}><T id={'inactivate'} /></Tag>,
-      width: 50,
-      className: 'status',
-    },
-    {
-      id: 'actions',
-      Header: '',
-      Cell: ({ cell }) => (
-        <Popover
-          content={actionMenuList(cell.row.original)}
-          position={Position.RIGHT_TOP}
-        >
-          <Button icon={<Icon icon='ellipsis-h' />} />
-        </Popover>
-      ),
-      className: 'actions',
-      width: 50,
-    },
-  ], [actionMenuList,formatMessage]);
+        width: 150,
+      },
+      {
+        id: 'email',
+        Header: formatMessage({ id: 'email' }),
+        accessor: 'email',
+        width: 150,
+      },
+      {
+        id: 'phone_number',
+        Header: formatMessage({ id: 'phone_number' }),
+        accessor: 'phone_number',
+        width: 120,
+      },
+      {
+        id: 'active',
+        Header: 'Status',
+        accessor: (user) =>
+          user.active ? (
+            <Tag intent={Intent.SUCCESS} minimal={true}>
+              <T id={'activate'} />
+            </Tag>
+          ) : (
+            <Tag intent={Intent.WARNING} minimal={true}>
+              <T id={'inactivate'} />
+            </Tag>
+          ),
+        width: 50,
+        className: 'status',
+      },
+      {
+        id: 'actions',
+        Header: '',
+        Cell: ({ cell }) => (
+          <Popover
+            content={actionMenuList(cell.row.original)}
+            position={Position.RIGHT_TOP}
+          >
+            <Button icon={<Icon icon="ellipsis-h" />} />
+          </Popover>
+        ),
+        className: 'actions',
+        width: 50,
+      },
+    ],
+    [actionMenuList, formatMessage],
+  );

  const handelDataTableFetchData = useCallback(() => {
    onFetchData && onFetchData();
@@ -178,32 +204,31 @@ function UsersListPreferences({
      />

      <Alert
-        cancelButtonText={<T id={'cancel'}/>}
-        confirmButtonText={<T id={'move_to_trash'}/>}
-        icon='trash'
+        cancelButtonText={<T id={'cancel'} />}
+        confirmButtonText={<T id={'delete'} />}
+        icon="trash"
        intent={Intent.DANGER}
        isOpen={deleteUserState}
        onCancel={handleCancelUserDelete}
        onConfirm={handleConfirmUserDelete}
      >
        <p>
-          Are you sure you want to move <b>filename</b> to Trash? You will be
-          able to restore it later, but it will become private to you.
+          <FormattedHTMLMessage
+            id={'once_delete_this_account_you_will_able_to_restore_it'}
+          />
        </p>
      </Alert>

      <Alert
-        cancelButtonText={<T id={'cancel'}/>}
-        confirmButtonText={<T id={'inactivate'}/>}
-        icon='trash'
+        cancelButtonText={<T id={'cancel'} />}
+        confirmButtonText={<T id={'inactivate'} />}
        intent={Intent.WARNING}
        isOpen={inactiveUserState}
        onCancel={handleCancelInactiveUser}
        onConfirm={handleConfirmUserActive}
      >
        <p>
-          Are you sure you want to move <b>filename</b> to Trash? You will be
-          able to restore it later, but it will become private to you.
+          <T id={'are_sure_to_inactive_this_account'} />
        </p>
      </Alert>
    </LoadingIndicator>
--- a/client/src/lang/en/index.js
+++ b/client/src/lang/en/index.js
@@ -77,17 +77,16 @@ export default {
  new_exchange_rate: 'New Exchange Rate',
  delete_exchange_rate: 'Delete Exchange Rate',
  exchange_rate: 'Exchange Rate',
-  edit_invite: 'Edit invite',
  edit_category: 'Edit Category',
  delete_category: 'Delete Category',
  new_category: 'New Category',
  category_name: 'Category Name',
  parent_category: 'Parent Category',
  new: 'New',
-  invite_user: 'invite User',
+  invite_user: 'Invite User',
  your_access_to_your_team:
    'Your teammate will get an email that gives them access to your team.',
-  invite: 'invite',
+  invite: 'Invite',
  count: 'Count',
  item_type: 'Item Type',
  item_name: 'Item Name',
--- a/client/src/style/pages/invite-form.scss
+++ b/client/src/style/pages/invite-form.scss
@@ -1,18 +1,20 @@
-
 .dialog--invite-form {
-  &.bp3-dialog {
-    width: 450px;
-  }
-  &:not(.dialog--loading) .bp3-dialog-body {
-    margin-bottom: 25px;
-  }
+  width: 450px;
+
  .bp3-dialog-body {
-  
-    .bp3-dialog-footer-actions {
-      margin-right: 30px;
-      display: flex;
-      justify-content: flex-end;
+    .bp3-form-group.bp3-inline {
+      .bp3-label {
+        min-width: 70px;
+      }
+      .bp3-form-content {
+        width: 250px;
+
+        .bp3-dialog-footer-actions {
+          margin-right: 20px;
+          display: flex;
+          justify-content: flex-end;
+        }
+      }
    }
  }
 }
-