Merge branch 'master' of https://github.com/abouolia/Ratteb

client/src/components/DialogsContainer.js

@@ -2,6 +2,7 @@ import React from 'react';
 
 import AccountDialog from 'containers/Dialogs/AccountDialog';
 import InviteUserDialog from 'containers/Dialogs/InviteUserDialog';
+import UserFormDialog from 'containers/Dialogs/UserFormDialog';
 import ItemCategoryDialog from 'containers/Dialogs/ItemCategoryDialog';
 import CurrencyFormDialog from 'containers/Dialogs/CurrencyFormDialog';
 import ExchangeRateFormDialog from 'containers/Dialogs/ExchangeRateFormDialog';
@@ -22,6 +23,7 @@ export default function DialogsContainer() {
       <AccountDialog dialogName={'account-form'} />
       <CurrencyFormDialog dialogName={'currency-form'} />
       <InviteUserDialog dialogName={'invite-user'} />
+      <UserFormDialog dialogName={'user-form'} />
       <ExchangeRateFormDialog dialogName={'exchangeRate-form'} />
       <ItemCategoryDialog dialogName={'item-category-form'} />
       <InventoryAdjustmentDialog dialogName={'inventory-adjustment'} />

client/src/containers/Dialogs/CurrencyFormDialog/CurrencyFormFields.js

@@ -19,6 +19,17 @@ export default function CurrencyFormFields() {
 
   const { isEditMode } = useCurrencyFormContext();
 
+  // Filter currency code
+  const filterCurrencyCode = (query, currency, _index, exactMatch) => {
+    const normalizedTitle = currency.name.toLowerCase();
+    const normalizedQuery = query.toLowerCase();
+    if (exactMatch) {
+      return normalizedTitle === normalizedQuery;
+    } else {
+      return normalizedTitle.indexOf(normalizedQuery) >= 0;
+    }
+  };
+
   return (
     <div className={Classes.DIALOG_BODY}>
       <FastField name={'currency_code'}>
@@ -27,7 +38,10 @@ export default function CurrencyFormFields() {
           field: { value },
           meta: { error, touched },
         }) => (
-          <FormGroup label={'Currency code'} className={classNames(CLASSES.FILL, 'form-group--type')}>
+          <FormGroup
+            label={'Currency code'}
+            className={classNames(CLASSES.FILL, 'form-group--type')}
+          >
             <ListSelect
               items={currenciesOptions}
               selectedItemProp={'currency_code'}
@@ -39,6 +53,7 @@ export default function CurrencyFormFields() {
                 setFieldValue('currency_name', currency.name);
                 setFieldValue('currency_sign', currency.symbol);
               }}
+              itemPredicate={filterCurrencyCode}
               disabled={isEditMode}
               popoverProps={{ minimal: true }}
             />

client/src/containers/Dialogs/InviteUserDialog/InviteUserFormContent.js

@@ -35,7 +35,6 @@ function InviteUserFormContent({
               className={classNames('form-group--email', CLASSES.FILL)}
               intent={inputIntent({ error, touched })}
               helperText={<ErrorMessage name="email" />}
-              inline={true}
             >
               <InputGroup medium={true} {...field} />
             </FormGroup>

client/src/containers/Dialogs/UserFormDialog/UserForm.js

@@ -0,0 +1,83 @@
+import React from 'react';
+import { Formik } from 'formik';
+import { Intent } from '@blueprintjs/core';
+import { useIntl } from 'react-intl';
+import { pick, snakeCase } from 'lodash';
+import { AppToaster } from 'components';
+
+import withDialogActions from 'containers/Dialog/withDialogActions';
+
+import { UserFormSchema } from './UserForm.schema';
+import UserFormContent from './UserFormContent';
+import { useUserFormContext } from './UserFormProvider';
+
+import { compose, objectKeysTransform } from 'utils';
+
+/**
+ * User form.
+ */
+function UserForm({
+  // #withDialogActions
+  closeDialog,
+}) {
+  const { formatMessage } = useIntl();
+
+  const {
+    dialogName,
+    user,
+    userId,
+    isEditMode,
+    EditUserMutate,
+  } = useUserFormContext();
+  console.log(user, 'EE');
+  const initialValues = {
+    ...(isEditMode &&
+      pick(
+        objectKeysTransform(user, snakeCase),
+        Object.keys(UserFormSchema.fields),
+      )),
+  };
+
+  const handleSubmit = (values, { setSubmitting, setErrors }) => {
+    const form = { ...values };
+
+    // Handle close the dialog after success response.
+    const afterSubmit = () => {
+      closeDialog(dialogName);
+    };
+
+    const onSuccess = ({ response }) => {
+      AppToaster.show({
+        message: formatMessage({
+          id: 'teammate_invited_to_organization_account',
+        }),
+        intent: Intent.SUCCESS,
+      });
+      afterSubmit(response);
+    };
+
+    // Handle the response error.
+    const onError = (error) => {
+      const {
+        response: {
+          data: { errors },
+        },
+      } = error;
+
+      setSubmitting(false);
+    };
+
+    EditUserMutate([userId, form]).then(onSuccess).catch(onError);
+  };
+
+  return (
+    <Formik
+      validationSchema={UserFormSchema}
+      initialValues={initialValues}
+      onSubmit={handleSubmit}
+    >
+      <UserFormContent />
+    </Formik>
+  );
+}
+export default compose(withDialogActions)(UserForm);

client/src/containers/Dialogs/UserFormDialog/UserForm.schema.js

@@ -0,0 +1,21 @@
+import * as Yup from 'yup';
+import { formatMessage } from 'services/intl';
+
+const Schema = Yup.object().shape({
+  email: Yup.string()
+    .email()
+    .required()
+    .label(formatMessage({ id: 'email' })),
+  first_name: Yup.string()
+    .required()
+    .label(formatMessage({ id: 'first_name_' })),
+  last_name: Yup.string()
+    .required()
+    .label(formatMessage({ id: 'last_name_' })),
+  phone_number: Yup.string()
+    .matches()
+    .required()
+    .label(formatMessage({ id: 'phone_number_' })),
+});
+
+export const UserFormSchema = Schema;

client/src/containers/Dialogs/UserFormDialog/UserFormContent.js

@@ -0,0 +1,107 @@
+import React from 'react';
+import {
+  FormGroup,
+  InputGroup,
+  Intent,
+  Classes,
+  Button,
+} from '@blueprintjs/core';
+import { FastField, Form, useFormikContext, ErrorMessage } from 'formik';
+import { FormattedMessage as T } from 'react-intl';
+import { CLASSES } from 'common/classes';
+import classNames from 'classnames';
+import { inputIntent } from 'utils';
+import { FieldRequiredHint } from 'components';
+import { useUserFormContext } from './UserFormProvider';
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import { compose } from 'utils';
+
+/**
+ * User form content.
+ */
+function UserFormContent({
+  // #withDialogActions
+  closeDialog,
+}) {
+  const { isSubmitting } = useFormikContext();
+  const { dialogName } = useUserFormContext();
+
+  const handleClose = () => {
+    closeDialog(dialogName);
+  };
+
+  return (
+    <Form>
+      <div className={Classes.DIALOG_BODY}>
+        {/* ----------- Email ----------- */}
+        <FastField name={'email'}>
+          {({ field, meta: { error, touched } }) => (
+            <FormGroup
+              label={<T id={'email'} />}
+              labelInfo={<FieldRequiredHint />}
+              className={classNames('form-group--email', CLASSES.FILL)}
+              intent={inputIntent({ error, touched })}
+              helperText={<ErrorMessage name="email" />}
+            >
+              <InputGroup medium={true} {...field} />
+            </FormGroup>
+          )}
+        </FastField>
+
+        {/* ----------- First name ----------- */}
+        <FastField name={'first_name'}>
+          {({ form, field, meta: { error, touched } }) => (
+            <FormGroup
+              label={<T id={'first_name'} />}
+              labelInfo={<FieldRequiredHint />}
+              intent={inputIntent({ error, touched })}
+              helperText={<ErrorMessage name={'first_name'} />}
+            >
+              <InputGroup intent={inputIntent({ error, touched })} {...field} />
+            </FormGroup>
+          )}
+        </FastField>
+
+        {/* ----------- Last name ----------- */}
+        <FastField name={'last_name'}>
+          {({ form, field, meta: { error, touched } }) => (
+            <FormGroup
+              label={<T id={'last_name'} />}
+              labelInfo={<FieldRequiredHint />}
+              intent={inputIntent({ error, touched })}
+              helperText={<ErrorMessage name={'last_name'} />}
+            >
+              <InputGroup intent={inputIntent({ error, touched })} {...field} />
+            </FormGroup>
+          )}
+        </FastField>
+        {/* ----------- Phone name ----------- */}
+        <FastField name={'phone_number'}>
+          {({ form, field, meta: { error, touched } }) => (
+            <FormGroup
+              label={<T id={'phone_number'} />}
+              labelInfo={<FieldRequiredHint />}
+              intent={inputIntent({ error, touched })}
+              helperText={<ErrorMessage name={'phone_number'} />}
+            >
+              <InputGroup intent={inputIntent({ error, touched })} {...field} />
+            </FormGroup>
+          )}
+        </FastField>
+      </div>
+
+      <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}>
+            <T id={'edit'} />
+          </Button>
+        </div>
+      </div>
+    </Form>
+  );
+}
+export default compose(withDialogActions)(UserFormContent);

client/src/containers/Dialogs/UserFormDialog/UserFormDialogContent.js

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import UserForm from './UserForm';
+import { UserFormProvider } from './UserFormProvider';
+import 'style/pages/Users/UserFormDialog.scss';
+
+/**
+ * User form dialog content.
+ */
+export default function UserFormDialogContent({ userId, dialogName }) {
+  return (
+    <UserFormProvider userId={userId} dialogName={dialogName}>
+      <UserForm />
+    </UserFormProvider>
+  );
+}

client/src/containers/Dialogs/UserFormDialog/UserFormProvider.js

@@ -0,0 +1,42 @@
+import React, { createContext, useContext } from 'react';
+import { useEditUser, useUser } from 'hooks/query';
+
+import { DialogContent } from 'components';
+
+const UserFormContext = createContext();
+
+/**
+ * User Form provider.
+ */
+function UserFormProvider({ userId, dialogName, ...props }) {
+  //  edit user mutations.
+  const { mutateAsync: EditUserMutate } = useEditUser();
+
+  // fetch user detail.
+  const { data: user, isLoading: isUserLoading } = useUser(userId, {
+    enabled: !!userId,
+  });
+
+  const isEditMode = userId;
+
+  // Provider state.
+  const provider = {
+    userId,
+    dialogName,
+
+    user,
+    EditUserMutate,
+
+    isEditMode,
+  };
+
+  return (
+    <DialogContent isLoading={isUserLoading} name={'user-form'}>
+      <UserFormContext.Provider value={provider} {...props} />
+    </DialogContent>
+  );
+}
+
+const useUserFormContext = () => useContext(UserFormContext);
+
+export { UserFormProvider, useUserFormContext };

client/src/containers/Dialogs/UserFormDialog/index.js

@@ -0,0 +1,35 @@
+import React, { lazy } from 'react';
+import { FormattedMessage as T } from 'react-intl';
+import { Dialog, DialogSuspense } from 'components';
+import withDialogRedux from 'components/DialogReduxConnect';
+import { compose } from 'utils';
+
+const UserFormDialogContent = lazy(() => import('./UserFormDialogContent'));
+
+function UserFormDialog({
+  dialogName,
+  payload = { action: '', userId: null },
+  isOpen,
+}) {
+
+  return (
+    <Dialog
+      name={dialogName}
+      title={<T id={'edit_user'} />}
+      className={'dialog--user-form'}
+      autoFocus={true}
+      canEscapeKeyClose={true}
+      isOpen={isOpen}
+    >
+      <DialogSuspense>
+        <UserFormDialogContent
+          dialogName={dialogName}
+          userId={payload.userId}
+          action={payload.action}
+        />
+      </DialogSuspense>
+    </Dialog>
+  );
+}
+
+export default compose(withDialogRedux())(UserFormDialog);

client/src/containers/Preferences/Users/UsersDataTable.js

@@ -27,7 +27,7 @@ function UsersDataTable({
   // Handle edit user action.
   const handleEditUserAction = useCallback(
     (user) => {
-      openDialog('userList-form', { action: 'edit', userId: user.id });
+      openDialog('user-form', { action: 'edit', userId: user.id });
     },
     [openDialog],
   );

client/src/hooks/query/users.js

@@ -46,38 +46,30 @@ export function useInactivateUser(props) {
   const apiRequest = useApiRequest();
   const queryClient = useQueryClient();
 
-  return useMutation(
-    (userId) => apiRequest.put(`users/${userId}/inactivate`),
-    {
-      onSuccess: (res, userId) => {
-        queryClient.invalidateQueries([t.USER, userId]);
+  return useMutation((userId) => apiRequest.put(`users/${userId}/inactivate`), {
+    onSuccess: (res, userId) => {
+      queryClient.invalidateQueries([t.USER, userId]);
 
-        // Common invalidate queries.
-        commonInvalidateQueries(queryClient);
-      },
-      ...props,
+      // Common invalidate queries.
+      commonInvalidateQueries(queryClient);
     },
-  );
+    ...props,
+  });
 }
 
-
-
 export function useActivateUser(props) {
   const apiRequest = useApiRequest();
   const queryClient = useQueryClient();
 
-  return useMutation(
-    (userId) => apiRequest.put(`users/${userId}/activate`),
-    {
-      onSuccess: (res, userId) => {
-        queryClient.invalidateQueries([t.USER, userId]);
+  return useMutation((userId) => apiRequest.put(`users/${userId}/activate`), {
+    onSuccess: (res, userId) => {
+      queryClient.invalidateQueries([t.USER, userId]);
 
-        // Common invalidate queries.
-        commonInvalidateQueries(queryClient);
-      },
-      ...props,
+      // Common invalidate queries.
+      commonInvalidateQueries(queryClient);
     },
-  );
+    ...props,
+  });
 }
 
 /**
@@ -123,8 +115,8 @@ export function useUser(id, props) {
   const apiRequest = useApiRequest();
 
   return useQueryTenant(
-    ['USER', id],
-    () => apiRequest.get(`users/${id}`).then((response) => response.data.item),
+    [t.USER, id],
+    () => apiRequest.get(`users/${id}`).then((response) => response.data.user),
     props,
   );
 }

client/src/style/App.scss

@@ -33,6 +33,8 @@
 // Views
 @import 'views/filter-dropdown';
 
+// fonts
+@import 'pages/fonts';
 
 .App {
   min-width: 960px;
@@ -40,11 +42,11 @@
 
 // =======
 
-body.hide-scrollbar .Pane2{
+body.hide-scrollbar .Pane2 {
   overflow: hidden;
 }
 
-.bp3-fill{
+.bp3-fill {
   .bp3-popover-wrapper,
   .bp3-popover-target {
     display: block;
@@ -82,25 +84,22 @@ body.hide-scrollbar .Pane2{
   max-width: 300px;
 }
 
-.bp3-timezone-picker{
-
-  .bp3-button{
-
-    [icon="caret-down"] {
+.bp3-timezone-picker {
+  .bp3-button {
+    [icon='caret-down'] {
       display: none;
     }
   }
 }
 
-.bp3-progress-bar.bp3-intent-primary .bp3-progress-meter{
+.bp3-progress-bar.bp3-intent-primary .bp3-progress-meter {
   background-color: #0066ff;
 }
 
-.bp3-overlay-backdrop{
-  background-color: rgba(0,10,30, .7);
+.bp3-overlay-backdrop {
+  background-color: rgba(0, 10, 30, 0.7);
 }
 
-
 .ReactVirtualized__Collection {
 }
 
@@ -176,4 +175,4 @@ body.hide-scrollbar .Pane2{
 /* List default theme */
 
 .ReactVirtualized__List {
-}
+}

client/src/style/pages/Users/UserFormDialog.scss

@@ -0,0 +1,28 @@
+.dialog--user-form {
+  width: 450px;
+
+  .bp3-form-group {
+    margin-bottom: 15px;
+  }
+  .bp3-dialog-body {
+    margin-bottom: 30px;
+
+    .bp3-form-group.bp3-inline {
+      .bp3-label {
+        min-width: 140px;
+      }
+      .bp3-form-content {
+        width: 250px;
+      }
+    }
+    .bp3-dialog-header {
+      height: 170px;
+    }
+  }
+
+  .bp3-dialog-footer {
+    .bp3-button {
+      min-width: 75px;
+    }
+  }
+}

client/src/style/pages/fonts.scss

@@ -0,0 +1,31 @@
+@font-face {
+  font-family: Noto Sans;
+  src: local('Noto Sans'), url('../fonts/NotoSans-SemiBold.woff') format('woff');
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: Noto Sans;
+  src: local('Noto Sans'), url('../fonts/NotoSans-Regular.woff') format('woff');
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: Noto Sans;
+  src: local('Noto Sans'), url('../fonts/NotoSans-Medium.woff') format('woff');
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: Noto Sans;
+  src: local('Noto Sans'), url('../fonts/NotoSans-Black.woff') format('woff');
+  font-style: normal;
+  font-weight: 900;
+  font-display: swap;
+}

client/src/style/variables.scss

@@ -3,7 +3,7 @@
 $ns: bp3;
 
 $pt-popover-box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.02),
-0 2px 4px rgba(16, 22, 26, 0.1), 0 8px 24px rgba(16, 22, 26, 0.1);
+  0 2px 4px rgba(16, 22, 26, 0.1), 0 8px 24px rgba(16, 22, 26, 0.1);
 
 $blue1: #0069ff;
 $blue2: #0052ff;
@@ -24,9 +24,9 @@ $button-box-shadow-active: 0 0 0 !default;
 $button-intent-box-shadow: 0 0 0 !default;
 $button-intent-box-shadow-active: 0 0 0 !default;
 
-$button-background-color-disabled: #E9ECEF !default;
-$button-background-color: #E6EFFB !default;
-$button-background-color-hover: #CFDCEE !default;
+$button-background-color-disabled: #e9ecef !default;
+$button-background-color: #e6effb !default;
+$button-background-color-hover: #cfdcee !default;
 
 $sidebar-background: #01115e;
 $sidebar-text-color: #fff;