perf(products): some refactor & update some UI in settings

erxes · Jan 8, 2024 · a27de3a · a27de3a
1 parent 9a5530c
commit a27de3a
Show file tree

Hide file tree

Showing 22 changed files with 455 additions and 365 deletions.
diff --git a/packages/erxes-ui/src/brands/components/BrandFilter.tsx b/packages/erxes-ui/src/brands/components/BrandFilter.tsx
@@ -26,7 +26,7 @@ function Brands({ history, counts, brands, loading, emptyText }: IProps) {
         return (
           <li key={brand._id}>
             <a
-              href='#filter'
+              href="#filter"
               tabIndex={0}
               className={
                 router.getParam(history, 'brand') === brand._id ? 'active' : ''
@@ -46,15 +46,16 @@ function Brands({ history, counts, brands, loading, emptyText }: IProps) {
     <Box
       title={__('Filter by brand')}
       collapsible={brands.length > 5}
-      name='showFilterByBrand'
+      name="showFilterByBrand"
+      isOpen={router.getParam(history, 'brand')}
     >
       <DataWithLoader
         data={data}
         loading={loading}
         count={brands.length}
         emptyText={emptyText || 'Empty'}
-        emptyIcon='leaf'
-        size='small'
+        emptyIcon="leaf"
+        size="small"
         objective={true}
       />
     </Box>

diff --git a/packages/plugin-products-ui/src/components/config/GeneralSettings.tsx b/packages/plugin-products-ui/src/components/config/GeneralSettings.tsx
@@ -4,7 +4,9 @@ import {
   CollapseContent,
   ControlLabel,
   FormControl,
-  FormGroup
+  FormGroup,
+  Icon,
+  Spinner
 } from '@erxes/ui/src/components';
 import { Title } from '@erxes/ui-settings/src/styles';
 import { __ } from '@erxes/ui/src/utils';
@@ -20,6 +22,7 @@ type Props = {
   save: (configsMap: IConfigsMap) => void;
   configsMap: IConfigsMap;
   uoms: IUom[];
+  loading: boolean;
 };
 
 type State = {
@@ -39,6 +42,18 @@ class GeneralSettings extends React.Component<Props, State> {
     };
   }
 
+  componentDidUpdate(prevProps: Readonly<Props>): void {
+    const { configsMap } = this.props;
+
+    if (prevProps.configsMap !== configsMap) {
+      this.setState({
+        currentMap: configsMap || {},
+        is_uom: configsMap.isRequireUOM || false,
+        defaultUOM: configsMap.defaultUOM ? configsMap.defaultUOM : ''
+      });
+    }
+  }
+
   save = e => {
     e.preventDefault();
 
@@ -105,6 +120,26 @@ class GeneralSettings extends React.Component<Props, State> {
     );
   };
 
+  renderContent = () => {
+    if (this.props.loading) {
+      return <Spinner objective={true} />;
+    }
+
+    return (
+      <ContentBox id={'GeneralSettingsMenu'}>
+        <CollapseContent
+          title="General settings"
+          beforeTitle={<Icon icon="settings" />}
+          transparent={true}
+        >
+          {this.renderCheckbox('isRequireUOM', 'is Required UOM', '')}
+          {this.state.is_uom &&
+            this.renderCombobox('defaultUOM', 'default uom')}
+        </CollapseContent>
+      </ContentBox>
+    );
+  };
+
   render() {
     const breadcrumb = [
       { title: __('Settings'), link: '/settings' },
@@ -113,7 +148,7 @@ class GeneralSettings extends React.Component<Props, State> {
 
     const actionButtons = (
       <Button
-        btnStyle="primary"
+        btnStyle="success"
         onClick={this.save}
         icon="check-circle"
         uppercase={false}
@@ -122,16 +157,6 @@ class GeneralSettings extends React.Component<Props, State> {
       </Button>
     );
 
-    const content = (
-      <ContentBox id={'GeneralSettingsMenu'}>
-        <CollapseContent title="General settings">
-          {this.renderCheckbox('isRequireUOM', 'is Required UOM', '')}
-          {this.state.is_uom &&
-            this.renderCombobox('defaultUOM', 'default uom')}
-        </CollapseContent>
-      </ContentBox>
-    );
-
     return (
       <Wrapper
         header={
@@ -149,7 +174,7 @@ class GeneralSettings extends React.Component<Props, State> {
           />
         }
         leftSidebar={<Sidebar />}
-        content={content}
+        content={this.renderContent()}
         transparent={true}
         hasBorder
       />

diff --git a/packages/plugin-products-ui/src/components/config/PerSimilarityGroup.tsx b/packages/plugin-products-ui/src/components/config/PerSimilarityGroup.tsx
@@ -6,11 +6,12 @@ import {
   ControlLabel,
   FormControl,
   FormGroup,
+  Icon,
   Tip
 } from '@erxes/ui/src/components';
 import { MainStyleModalFooter as ModalFooter } from '@erxes/ui/src/styles/eindex';
 import { FormColumn, FormWrapper } from '@erxes/ui/src/styles/main';
-import { __ } from '@erxes/ui/src/utils';
+import { Alert, __, confirm } from '@erxes/ui/src/utils';
 import React from 'react';
 import { IConfigsMap } from '../../types';
 
@@ -55,7 +56,13 @@ class PerSettings extends React.Component<Props, State> {
   onDelete = e => {
     e.preventDefault();
 
-    this.props.delete(this.props.currentConfigKey);
+    confirm(`This action will remove the config. Are you sure?`)
+      .then(() => {
+        this.props.delete(this.props.currentConfigKey);
+      })
+      .catch(error => {
+        Alert.error(error.message);
+      });
   };
 
   onChange = e => {
@@ -205,6 +212,8 @@ class PerSettings extends React.Component<Props, State> {
         open={
           this.props.currentConfigKey === 'newSimilarityGroup' ? true : false
         }
+        transparent={true}
+        beforeTitle={<Icon icon="settings" />}
       >
         <FormWrapper>
           <FormColumn>{this.renderInput('title', 'Title', '')}</FormColumn>
@@ -217,13 +226,13 @@ class PerSettings extends React.Component<Props, State> {
           <Button
             btnStyle="primary"
             onClick={this.addRule}
-            icon="plus"
+            icon="plus-circle"
             uppercase={false}
           >
             Add Rule
           </Button>
           <Button
-            btnStyle="simple"
+            btnStyle="danger"
             icon="cancel-1"
             onClick={this.onDelete}
             uppercase={false}
@@ -232,7 +241,7 @@ class PerSettings extends React.Component<Props, State> {
           </Button>
 
           <Button
-            btnStyle="primary"
+            btnStyle="success"
             icon="check-circle"
             onClick={this.onSave}
             uppercase={false}

diff --git a/packages/plugin-products-ui/src/components/config/Row.tsx b/packages/plugin-products-ui/src/components/config/Row.tsx
@@ -42,7 +42,7 @@ class Row extends React.Component<Props, State> {
     const editTrigger = (
       <Button btnStyle="link">
         <Tip text={__('Edit')} placement="bottom">
-          <Icon icon="edit" />
+          <Icon icon="edit-3" />
         </Tip>
       </Button>
     );
@@ -76,16 +76,14 @@ class Row extends React.Component<Props, State> {
         <td>{uom.name || ''}</td>
         <td>
           <ActionButtons>
-            <ActionButtons>
-              {this.renderEditAction(uom)}
-              <Tip text={__('Delete')} placement="bottom">
-                <Button
-                  btnStyle="link"
-                  onClick={() => this.remove(uom)}
-                  icon="cancel-1"
-                />
-              </Tip>
-            </ActionButtons>
+            {this.renderEditAction(uom)}
+            <Tip text={__('Delete')} placement="bottom">
+              <Button
+                btnStyle="link"
+                onClick={() => this.remove(uom)}
+                icon="times-circle"
+              />
+            </Tip>
           </ActionButtons>
         </td>
       </tr>

diff --git a/packages/plugin-products-ui/src/components/config/SimilarityGroup.tsx b/packages/plugin-products-ui/src/components/config/SimilarityGroup.tsx
@@ -3,20 +3,27 @@ import { FIELDS_GROUPS_CONTENT_TYPES } from '@erxes/ui-forms/src/settings/proper
 import { queries as fieldQueries } from '@erxes/ui-forms/src/settings/properties/graphql';
 import { IFieldGroup } from '@erxes/ui-forms/src/settings/properties/types';
 import client from '@erxes/ui/src/apolloClient';
-import { Button, HeaderDescription } from '@erxes/ui/src/components';
+import {
+  Button,
+  DataWithLoader,
+  EmptyState,
+  HeaderDescription,
+  Spinner
+} from '@erxes/ui/src/components';
 import { Wrapper } from '@erxes/ui/src/layout';
-import { MainStyleTitle as Title } from '@erxes/ui/src/styles/eindex';
 import { __ } from '@erxes/ui/src/utils';
 import { isEnabled } from '@erxes/ui/src/utils/core';
 import React from 'react';
 import { ContentBox } from '../../styles';
 import { IConfigsMap } from '../../types';
 import PerSettings from './PerSimilarityGroup';
 import Sidebar from './Sidebar';
+import { Title } from '@erxes/ui-settings/src/styles';
 
 type Props = {
   save: (configsMap: IConfigsMap) => void;
   configsMap: IConfigsMap;
+  loading: boolean;
 };
 
 type State = {
@@ -49,6 +56,12 @@ class GeneralSettings extends React.Component<Props, State> {
     }
   }
 
+  componentDidUpdate(prevProps: Readonly<Props>): void {
+    if (prevProps.configsMap !== this.props.configsMap) {
+      this.setState({ configsMap: this.props.configsMap || {} });
+    }
+  }
+
   add = e => {
     e.preventDefault();
     const { configsMap } = this.state;
@@ -98,8 +111,23 @@ class GeneralSettings extends React.Component<Props, State> {
 
   renderContent() {
     const { configsMap } = this.state;
+    const { loading } = this.props;
     const configs = configsMap.similarityGroup || {};
 
+    if (loading) {
+      return <Spinner objective={true} />;
+    }
+
+    if (!loading && Object.keys(configs).length === 0) {
+      return (
+        <EmptyState
+          image="/images/actions/8.svg"
+          text="No Uoms config"
+          size="small"
+        />
+      );
+    }
+
     return (
       <ContentBox id={'GeneralSettingsMenu'}>
         {this.renderConfigs(configs)}
@@ -115,9 +143,9 @@ class GeneralSettings extends React.Component<Props, State> {
 
     const actionButtons = (
       <Button
-        btnStyle="primary"
+        btnStyle="success"
         onClick={this.add}
-        icon="plus"
+        icon="plus-circle"
         uppercase={false}
       >
         New config

diff --git a/packages/plugin-products-ui/src/components/config/Uoms.tsx b/packages/plugin-products-ui/src/components/config/Uoms.tsx
@@ -15,6 +15,7 @@ import React from 'react';
 import Sidebar from './Sidebar';
 import { IUom } from '../../types';
 import Row from './Row';
+import { Title } from '@erxes/ui-settings/src/styles';
 
 type Props = {
   uomsTotalCount: number;
@@ -28,12 +29,6 @@ class Uoms extends React.Component<Props, {}> {
   renderContent() {
     const { uoms, renderButton, remove } = this.props;
 
-    if (uoms.length === 0) {
-      return (
-        <EmptyState image="/images/actions/8.svg" text="No Uoms" size="small" />
-      );
-    }
-
     return (
       <>
         <Table>
@@ -94,6 +89,8 @@ class Uoms extends React.Component<Props, {}> {
       />
     );
 
+    const leftActionBar = <Title>{`All Uoms (${uomsTotalCount})`}</Title>;
+
     return (
       <Wrapper
         header={<Wrapper.Header title={`Uom`} breadcrumb={breadcrumb} />}
@@ -104,7 +101,13 @@ class Uoms extends React.Component<Props, {}> {
             description={__('Add uoms ...')}
           />
         }
-        actionBar={<Wrapper.ActionBar right={righActionBar} wideSpacing />}
+        actionBar={
+          <Wrapper.ActionBar
+            right={righActionBar}
+            wideSpacing={true}
+            left={leftActionBar}
+          />
+        }
         leftSidebar={<Sidebar />}
         content={
           <DataWithLoader
@@ -116,7 +119,7 @@ class Uoms extends React.Component<Props, {}> {
           />
         }
         footer={uomsTotalCount > 0 && <Pagination count={uomsTotalCount} />}
-        hasBorder
+        hasBorder={true}
       />
     );
   }