fix(board): fix drag and drop bug

Closes #1023
erxes · Jul 9, 2019 · 7d03d14 · 7d03d14
1 parent e9ea9f6
commit 7d03d14
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 21 deletions.
diff --git a/src/modules/common/components/SortableList.tsx b/src/modules/common/components/SortableList.tsx
@@ -10,6 +10,7 @@ type Props = {
   onChangeFields: (reorderedFields: any) => void;
   isModal?: boolean;
   showDragHandler?: boolean | true;
+  isDragDisabled?: boolean;
 };
 
 class SortableList extends React.Component<Props> {
@@ -47,10 +48,15 @@ class SortableList extends React.Component<Props> {
   }
 
   renderField(field, index) {
-    const { child, isModal } = this.props;
+    const { child, isModal, isDragDisabled } = this.props;
 
     return (
-      <Draggable draggableId={field._id} index={index} key={index}>
+      <Draggable
+        draggableId={field._id}
+        index={index}
+        key={index}
+        isDragDisabled={isDragDisabled}
+      >
         {(provided, snapshot) => (
           <>
             <SortItem

diff --git a/src/modules/settings/boards/components/PipelineRow.tsx b/src/modules/settings/boards/components/PipelineRow.tsx
@@ -9,6 +9,7 @@ type Props = {
   pipeline: IPipeline;
   renderButton: (props: IButtonMutateProps) => JSX.Element;
   remove: (pipelineId: string) => void;
+  onTogglePopup: () => void;
   type: string;
 };
 
@@ -30,7 +31,11 @@ class PipelineRow extends React.Component<Props, State> {
 
     const onClick = () => remove(pipeline._id);
 
-    const edit = () => this.setState({ showModal: true });
+    const edit = () => {
+      this.setState({ showModal: true });
+
+      this.props.onTogglePopup();
+    };
 
     return (
       <ActionButtons>
@@ -47,7 +52,11 @@ class PipelineRow extends React.Component<Props, State> {
   renderEditForm() {
     const { renderButton, type, pipeline } = this.props;
 
-    const closeModal = () => this.setState({ showModal: false });
+    const closeModal = () => {
+      this.setState({ showModal: false });
+
+      this.props.onTogglePopup();
+    };
 
     return (
       <PipelineForm

diff --git a/src/modules/settings/boards/components/Pipelines.tsx b/src/modules/settings/boards/components/Pipelines.tsx
@@ -26,6 +26,7 @@ type Props = {
 type State = {
   showModal: boolean;
   pipelines: IPipeline[];
+  isDragDisabled: boolean;
 };
 
 class Pipelines extends React.Component<Props, State> {
@@ -34,7 +35,8 @@ class Pipelines extends React.Component<Props, State> {
 
     this.state = {
       showModal: false,
-      pipelines: props.pipelines
+      pipelines: props.pipelines,
+      isDragDisabled: false
     };
   }
 
@@ -72,6 +74,12 @@ class Pipelines extends React.Component<Props, State> {
     this.props.updateOrder(collectOrders(pipelines));
   };
 
+  onTogglePopup = () => {
+    const { isDragDisabled } = this.state;
+
+    this.setState({ isDragDisabled: !isDragDisabled });
+  };
+
   renderRows() {
     const { renderButton, type } = this.props;
 
@@ -83,6 +91,7 @@ class Pipelines extends React.Component<Props, State> {
           renderButton={renderButton}
           remove={this.props.remove}
           type={type}
+          onTogglePopup={this.onTogglePopup}
         />
       );
     };
@@ -94,6 +103,7 @@ class Pipelines extends React.Component<Props, State> {
         fields={pipelines}
         child={child}
         onChangeFields={this.onChangePipelines}
+        isDragDisabled={this.state.isDragDisabled}
       />
     );
   }

diff --git a/src/modules/settings/boards/components/Stages.tsx b/src/modules/settings/boards/components/Stages.tsx
@@ -1,5 +1,5 @@
 import { IStage } from 'modules/boards/types';
-import { Button, SortableList } from 'modules/common/components';
+import { Button } from 'modules/common/components';
 import React from 'react';
 import { StageList } from '../styles';
 import StageItem from './StageItem';
@@ -55,23 +55,17 @@ class Stages extends React.Component<Props, {}> {
   };
 
   render() {
-    const child = stage => (
-      <StageItem
-        stage={stage}
-        onChange={this.onChange}
-        remove={this.remove}
-        onKeyPress={this.onStageInputKeyPress}
-      />
-    );
-
     return (
       <StageList>
-        <SortableList
-          fields={this.props.stages}
-          child={child}
-          onChangeFields={this.props.onChangeStages}
-          isModal={true}
-        />
+        {this.props.stages.map((stage: IStage) => (
+          <StageItem
+            key={stage._id}
+            stage={stage}
+            onChange={this.onChange}
+            remove={this.remove}
+            onKeyPress={this.onStageInputKeyPress}
+          />
+        ))}
         <Button onClick={this.add} btnStyle="success" size="small" icon="add">
           Add stage
         </Button>

diff --git a/src/modules/settings/boards/styles.ts b/src/modules/settings/boards/styles.ts
@@ -56,6 +56,9 @@ const StageList = styled.div`
 `;
 
 const StageItemContainer = styled(PipelineRowContainer)`
+  background-color: #fff;
+  margin-bottom: 10px;
+  padding: 5px 20px 10px;
   align-items: center;
 
   > *:not(button) {