fix(settings): structure (#4647)

packages/core-ui/src/modules/settings/main/components/Settings.tsx

@@ -145,7 +145,7 @@ class Settings extends React.PureComponent {
             )}
             {this.renderBox(
               'Structure',
-              '/images/icons/erxes-23.svg',
+              '/images/icons/erxes-15.svg',
               '/settings/structure',
               'usersAll',
               teamPermissions

packages/core-ui/src/modules/settings/team/components/branch/Form.tsx

@@ -9,7 +9,6 @@ import { __ } from 'modules/common/utils';
 import { IBranch } from '@erxes/ui/src/team/types';
 import SelectTeamMembers from '@erxes/ui/src/team/containers/SelectTeamMembers';
 import ContactInfoForm from '../common/ContactInfoForm';
-import SelectBranches from '@erxes/ui/src/team/containers/SelectBranches';
 
 type Props = {
   renderButton: (props: IButtonMutateProps) => JSX.Element;
@@ -19,7 +18,7 @@ type Props = {
 };
 
 export default function BranchForm(props: Props) {
-  const { closeModal, renderButton } = props;
+  const { closeModal, renderButton, branches } = props;
   const object = props.branch || ({} as IBranch);
 
   const [userIds, setUserIds] = useState(
@@ -75,6 +74,14 @@ export default function BranchForm(props: Props) {
   const renderContent = (formProps: IFormProps) => {
     const { values, isSubmitted } = formProps;
 
+    const generateOptions = () => {
+      return branches.map(branch => (
+        <option key={branch._id} value={branch._id}>
+          {branch.title}
+        </option>
+      ));
+    };
+
     return (
       <>
         <FormGroup>
@@ -120,13 +127,16 @@ export default function BranchForm(props: Props) {
 
         <FormGroup>
           <ControlLabel>{__('Parent')}</ControlLabel>
-          <SelectBranches
-            label="Choose parent"
+          <FormControl
+            {...formProps}
             name="parentId"
-            initialValue={parentId || ''}
-            onSelect={onChangeParent}
-            multi={false}
-          />
+            componentClass="select"
+            defaultValue={parentId || null}
+            onChange={onChangeParent}
+          >
+            <option value="" />
+            {generateOptions()}
+          </FormControl>
         </FormGroup>
         <FormGroup>
           <ControlLabel>{__('Team Members')}</ControlLabel>

packages/core-ui/src/modules/settings/team/components/branch/MainList.tsx

@@ -2,7 +2,6 @@ import {
   Button,
   ModalTrigger,
   BarItems,
-  HeaderDescription,
   FormControl,
   Table,
   Wrapper,
@@ -13,13 +12,15 @@ import {
 } from '@erxes/ui/src';
 import { BranchesMainQueryResponse, IBranch } from '@erxes/ui/src/team/types';
 import React from 'react';
-import SettingsSideBar from '../common/SettingsSideBar';
+import SettingsSideBar from '../../containers/common/SettingSideBar';
 import Form from '../../containers/branch/Form';
 import { generateTree } from '../../utils';
 import { queries } from '@erxes/ui/src/team/graphql';
 import { gql } from '@apollo/client';
 import { generatePaginationParams } from '@erxes/ui/src/utils/router';
-import { DescriptionContentRow } from '../common/DescriptionContentRow';
+import ActionButtons from '@erxes/ui/src/components/ActionButtons';
+import Tip from '@erxes/ui/src/components/Tip';
+import Icon from '@erxes/ui/src/components/Icon';
 
 type Props = {
   listQuery: BranchesMainQueryResponse;
@@ -55,8 +56,24 @@ class MainList extends React.Component<Props, State> {
     }
   ];
 
+  remove = (_id?: string) => {
+    if (_id) {
+      this.props.deleteBranches([_id], () =>
+        this.setState({ selectedItems: [] })
+      );
+    } else {
+      this.props.deleteBranches(this.state.selectedItems, () =>
+        this.setState({ selectedItems: [] })
+      );
+    }
+  };
+
   renderForm() {
-    const trigger = <Button btnStyle="success">{__('Add Branch')}</Button>;
+    const trigger = (
+      <Button btnStyle="success" icon="plus-circle">
+        {__('Add Branch')}
+      </Button>
+    );
 
     const content = ({ closeModal }) => (
       <Form
@@ -122,7 +139,16 @@ class MainList extends React.Component<Props, State> {
     const onclick = e => {
       e.stopPropagation();
     };
+
     const trigger = (
+      <Button btnStyle="link">
+        <Tip text={__('Edit')} placement="top">
+          <Icon icon="edit-3" />
+        </Tip>
+      </Button>
+    );
+
+    return (
       <tr key={branch._id}>
         <td onClick={onclick}>
           <FormControl
@@ -136,22 +162,31 @@ class MainList extends React.Component<Props, State> {
         <td>{branch?.parent?.title || ''}</td>
         <td>{__(branch.address.replace(/\n/g, ''))}</td>
         <td>{branch.userCount}</td>
+        <td>
+          <ActionButtons>
+            <ModalTrigger
+              key={branch._id}
+              title="Edit Branch"
+              content={({ closeModal }) => (
+                <Form
+                  branch={branch}
+                  closeModal={closeModal}
+                  additionalRefetchQueries={this.refetchQueries()}
+                />
+              )}
+              trigger={trigger}
+            />
+            <Tip text={__('Delete')} placement="top">
+              <Button
+                btnStyle="link"
+                onClick={() => this.remove(branch._id)}
+                icon="times-circle"
+              />
+            </Tip>
+          </ActionButtons>
+        </td>
       </tr>
     );
-    return (
-      <ModalTrigger
-        key={branch._id}
-        title="Edit Branch"
-        content={({ closeModal }) => (
-          <Form
-            branch={branch}
-            closeModal={closeModal}
-            additionalRefetchQueries={this.refetchQueries()}
-          />
-        )}
-        trigger={trigger}
-      />
-    );
   }
 
   renderContent() {
@@ -169,16 +204,6 @@ class MainList extends React.Component<Props, State> {
       this.setState({ selectedItems: [] });
     };
 
-    const generateList = () => {
-      const list = branches.map(branch => {
-        if (!branches.find(dep => dep._id === branch.parentId)) {
-          branch.parentId = null;
-        }
-        return branch;
-      });
-      return list;
-    };
-
     return (
       <Table>
         <thead>
@@ -195,56 +220,46 @@ class MainList extends React.Component<Props, State> {
             <th>{__('Parent')}</th>
             <th>{__('Address')}</th>
             <th>{__('Team member count')}</th>
+            <th>{__('Actions')}</th>
           </tr>
         </thead>
         <tbody>
-          {generateTree(generateList(), null, (branch, level) =>
+          {generateTree(branches, null, (branch, level) =>
+            this.renderRow(branch, level)
+          )}
+          {generateTree(branches, '', (branch, level) =>
             this.renderRow(branch, level)
           )}
         </tbody>
       </Table>
     );
   }
 
-  deleteBranches() {
-    const {} = this.state;
-  }
-
   render() {
-    const { listQuery, deleteBranches } = this.props;
+    const { listQuery } = this.props;
 
-    const { totalCount, totalUsersCount } = listQuery.branchesMain;
+    const { totalCount } = listQuery.branchesMain;
 
     const { selectedItems } = this.state;
 
-    const remove = () => {
-      deleteBranches(selectedItems, () => this.setState({ selectedItems: [] }));
-    };
-
     const rightActionBar = (
       <BarItems>
         {this.renderSearch()}
-        {!!selectedItems.length && (
-          <Button btnStyle="danger" onClick={remove}>
-            {__(`Remove ${selectedItems.length}`)}
-          </Button>
-        )}
         {this.renderForm()}
       </BarItems>
     );
 
-    const leftActionBar = (
-      <HeaderDescription
-        title="Branches"
-        icon="/images/actions/21.svg"
-        description=""
-        renderExtra={DescriptionContentRow({
-          label: 'branches',
-          totalCount: totalCount,
-          teamMembersCount: totalUsersCount
-        })}
-      />
+    const leftActionBar = selectedItems.length > 0 && (
+      <Button
+        btnStyle="danger"
+        size="small"
+        icon="times-circle"
+        onClick={() => this.remove()}
+      >
+        Remove
+      </Button>
     );
+
     return (
       <Wrapper
         header={
@@ -257,7 +272,7 @@ class MainList extends React.Component<Props, State> {
           />
         }
         actionBar={
-          <Wrapper.ActionBar right={rightActionBar} left={leftActionBar} />
+          <Wrapper.ActionBar left={leftActionBar} right={rightActionBar} />
         }
         content={
           <DataWithLoader
@@ -270,6 +285,7 @@ class MainList extends React.Component<Props, State> {
         }
         leftSidebar={<SettingsSideBar />}
         footer={<Pagination count={totalCount || 0} />}
+        hasBorder={true}
       />
     );
   }

packages/core-ui/src/modules/settings/team/components/common/SettingsSideBar.tsx

@@ -3,30 +3,47 @@ import SidebarHeader from '@erxes/ui-settings/src/common/components/SidebarHeade
 import LeftSidebar from '@erxes/ui/src/layout/components/Sidebar';
 import { SidebarList, __ } from '@erxes/ui/src';
 import { Link } from 'react-router-dom';
+import { SidebarCounter, FieldStyle } from '@erxes/ui/src/layout/styles';
 
-function ListItem(url, text) {
+function ListItem(url, text, totalCount?) {
   return (
     <li>
       <Link
         to={url}
         className={window.location.href.includes(url) ? 'active' : ''}
       >
-        {__(text)}
+        <FieldStyle>{__(text)}</FieldStyle>
+        <SidebarCounter nowrap={true}>{totalCount}</SidebarCounter>
       </Link>
     </li>
   );
 }
 
-export default function SettingsSideBar() {
-  return (
-    <LeftSidebar header={<SidebarHeader />} hasBorder>
-      <LeftSidebar.Header uppercase>{__('Structures')}</LeftSidebar.Header>
-      <SidebarList>
-        {ListItem('/settings/structure', 'Structure')}
-        {ListItem('/settings/branches', 'Branches')}
-        {ListItem('/settings/departments', 'Departments')}
-        {ListItem('/settings/units', 'Units')}
-      </SidebarList>
-    </LeftSidebar>
-  );
+type Props = {
+  branchTotalCount: number;
+  unitTotalCount: number;
+  departmentTotalCount: number;
+};
+
+export default class SettingsSideBar extends React.Component<Props> {
+  render() {
+    return (
+      <LeftSidebar header={<SidebarHeader />} hasBorder={true}>
+        <SidebarList>
+          {ListItem('/settings/structure', 'Structure')}
+          {ListItem(
+            '/settings/branches',
+            'Branches',
+            this.props.branchTotalCount
+          )}
+          {ListItem(
+            '/settings/departments',
+            'Departments',
+            this.props.departmentTotalCount
+          )}
+          {ListItem('/settings/units', 'Units', this.props.unitTotalCount)}
+        </SidebarList>
+      </LeftSidebar>
+    );
+  }
 }

packages/core-ui/src/modules/settings/team/components/department/Form.tsx

@@ -18,7 +18,7 @@ type Props = {
 };
 
 export default function DepartmentForm(props: Props) {
-  const { closeModal, renderButton } = props;
+  const { closeModal, renderButton, departments } = props;
   const object = props.department || ({} as any);
 
   const [userIds, setUserIds] = useState(
@@ -61,6 +61,14 @@ export default function DepartmentForm(props: Props) {
   const renderContent = (formProps: IFormProps) => {
     const { values, isSubmitted } = formProps;
 
+    const generateOptions = () => {
+      return departments.map(branch => (
+        <option key={branch._id} value={branch._id}>
+          {branch.title}
+        </option>
+      ));
+    };
+
     return (
       <>
         <FormGroup>
@@ -104,14 +112,16 @@ export default function DepartmentForm(props: Props) {
         </FormGroup>
         <FormGroup>
           <ControlLabel>{__('Parent')}</ControlLabel>
-          <SelectDepartments
-            label="Choose parent"
+          <FormControl
+            {...formProps}
             name="parentId"
-            onSelect={onChangeParent}
-            initialValue={parentId}
-            multi={false}
-          />
-          {/* /> */}
+            componentClass="select"
+            defaultValue={parentId || null}
+            onChange={onChangeParent}
+          >
+            <option value="" />
+            {generateOptions()}
+          </FormControl>
         </FormGroup>
         <FormGroup>
           <ControlLabel>{__('Team Members')}</ControlLabel>