feat(checklist): add possibility to convert checklist item to card an…

…d remove close #1562
erxes · Jan 8, 2020 · fa7a9a0 · fa7a9a0
1 parent 800bdcd
commit fa7a9a0
Show file tree

Hide file tree

Showing 10 changed files with 56 additions and 78 deletions.
diff --git a/src/modules/boards/components/editForm/Left.tsx b/src/modules/boards/components/editForm/Left.tsx
@@ -2,7 +2,7 @@ import ActivityInputs from 'modules/activityLogs/components/ActivityInputs';
 import ActivityLogs from 'modules/activityLogs/containers/ActivityLogs';
 import React from 'react';
 
-import { IItem, IOptions } from 'modules/boards/types';
+import { IItem, IItemParams, IOptions } from 'modules/boards/types';
 import Checklists from 'modules/checklists/containers/Checklists';
 import FormControl from 'modules/common/components/form/Control';
 import FormGroup from 'modules/common/components/form/Group';
@@ -22,6 +22,7 @@ type Props = {
   removeItem: (itemId: string) => void;
   saveItem: (doc: { [key: string]: any }) => void;
   onUpdate: (item: IItem, prevStageId?: string) => void;
+  addItem: (doc: IItemParams, callback: () => void) => void;
 };
 
 class Left extends React.Component<Props> {
@@ -32,11 +33,10 @@ class Left extends React.Component<Props> {
       options,
       copyItem,
       removeItem,
-      onUpdate
+      onUpdate,
+      addItem
     } = this.props;
 
-    console.log('aaaaa', item);
-
     const descriptionOnBlur = e => {
       const description = e.target.value;
 
@@ -108,6 +108,7 @@ class Left extends React.Component<Props> {
           contentType={options.type}
           contentTypeId={item._id}
           stageId={item.stageId}
+          addItem={addItem}
         />
 
         <ActivityInputs

diff --git a/src/modules/boards/containers/portable/AddForm.tsx b/src/modules/boards/containers/portable/AddForm.tsx
@@ -55,12 +55,6 @@ class AddFormContainer extends React.Component<FinalProps> {
           Alert.success(options.texts.addSuccessText);
         }
 
-        console.log('sss', data);
-
-        console.log('sssss', data[options.mutationsName.addMutation]);
-        console.log('sssss1', options.mutationsName.addMutation);
-        console.log('sssss2', data);
-
         if (relType && relTypeIds) {
           editConformity({
             variables: {

diff --git a/src/modules/checklists/components/Item.tsx b/src/modules/checklists/components/Item.tsx
@@ -1,9 +1,11 @@
 import debounce from 'lodash/debounce';
 import Button from 'modules/common/components/Button';
+import DropdownToggle from 'modules/common/components/DropdownToggle';
 import { FormControl } from 'modules/common/components/form';
 import Icon from 'modules/common/components/Icon';
 import { isEmptyContent } from 'modules/common/utils';
 import React from 'react';
+import Dropdown from 'react-bootstrap/Dropdown';
 import xss from 'xss';
 import {
   ChecklistItem,
@@ -19,7 +21,7 @@ type Props = {
     doc: { content: string; isChecked: boolean },
     callback?: () => void
   ) => void;
-  convertToCard: (name: string) => void;
+  convertToCard: (name: string, callback: () => void) => void;
   removeItem: (checklistItemId: string) => void;
 };
 
@@ -107,9 +109,7 @@ class ListRow extends React.Component<Props, State> {
   };
 
   onConvert = () => {
-    this.props.convertToCard(this.state.content);
-
-    this.onRemove();
+    this.props.convertToCard(this.state.content, this.onRemove);
   };
 
   renderContent() {
@@ -160,8 +160,24 @@ class ListRow extends React.Component<Props, State> {
           onClick={this.onClick}
           dangerouslySetInnerHTML={{ __html: xss(this.state.content) }}
         />
-        <Icon icon="times" onClick={this.onRemove} />
-        <Icon icon="ban" onClick={this.onConvert} />
+
+        <Dropdown>
+          <Dropdown.Toggle as={DropdownToggle} id="dropdown-brand">
+            <Icon icon="ellipsis-h" />
+          </Dropdown.Toggle>
+          <Dropdown.Menu>
+            <li>
+              <a onClick={this.onConvert} href="#">
+                Convert to Card
+              </a>
+            </li>
+            <li>
+              <a onClick={this.onRemove} href="#">
+                Delete
+              </a>
+            </li>
+          </Dropdown.Menu>
+        </Dropdown>
       </ChecklistText>
     );
   }

diff --git a/src/modules/checklists/components/List.tsx b/src/modules/checklists/components/List.tsx
@@ -21,7 +21,7 @@ import { IChecklist } from '../types';
 type Props = {
   item: IChecklist;
   addItem: (content: string) => void;
-  convertToCard: (name: string) => void;
+  convertToCard: (name: string, callback: () => void) => void;
   renderButton: (props: IButtonMutateProps) => JSX.Element;
   remove: (checklistId: string) => void;
 };
@@ -296,10 +296,6 @@ class List extends React.Component<Props, State> {
     );
   }
 
-  convert = () => {
-    this.props.convertToCard('1aaaaasss33aaaa');
-  };
-
   render() {
     return (
       <>

diff --git a/src/modules/checklists/containers/Checklists.tsx b/src/modules/checklists/containers/Checklists.tsx
@@ -1,5 +1,6 @@
 import gql from 'graphql-tag';
 import * as compose from 'lodash.flowright';
+import { IItemParams } from 'modules/boards/types';
 import { withProps } from 'modules/common/utils';
 import React from 'react';
 import { graphql } from 'react-apollo';
@@ -11,14 +12,15 @@ type IProps = {
   contentType: string;
   contentTypeId: string;
   stageId: string;
+  addItem: (doc: IItemParams, callback: () => void) => void;
 };
 
 type FinalProps = {
   checklistsQuery: ChecklistsQueryResponse;
 } & IProps;
 
 const ChecklistsContainer = (props: FinalProps) => {
-  const { checklistsQuery, stageId } = props;
+  const { checklistsQuery, stageId, addItem } = props;
 
   if (checklistsQuery.loading) {
     return null;
@@ -27,7 +29,12 @@ const ChecklistsContainer = (props: FinalProps) => {
   const checklists = checklistsQuery.checklists || [];
 
   return checklists.map(list => (
-    <List key={list._id} listId={list._id} stageId={stageId} />
+    <List
+      key={list._id}
+      listId={list._id}
+      stageId={stageId}
+      addItem={addItem}
+    />
   ));
 };
 

diff --git a/src/modules/checklists/containers/Item.tsx b/src/modules/checklists/containers/Item.tsx
@@ -14,7 +14,7 @@ import {
 
 type Props = {
   item: IChecklistItem;
-  convertToCard: (name: string) => void;
+  convertToCard: (name: string, callback: () => void) => void;
 };
 
 type FinalProps = {

diff --git a/src/modules/checklists/containers/List.tsx b/src/modules/checklists/containers/List.tsx
@@ -1,12 +1,9 @@
 import gql from 'graphql-tag';
 import * as compose from 'lodash.flowright';
-import { PipelineConsumer } from 'modules/boards/containers/PipelineContext';
-import { queries as stageQuery } from 'modules/boards/graphql';
-import { IItem } from 'modules/boards/types';
+import { IItemParams } from 'modules/boards/types';
 import ButtonMutate from 'modules/common/components/ButtonMutate';
 import { IButtonMutateProps } from 'modules/common/types';
 import { Alert, confirm, withProps } from 'modules/common/utils';
-import { mutations as dealMutations } from 'modules/deals/graphql';
 import React from 'react';
 import { graphql } from 'react-apollo';
 import List from '../components/List';
@@ -21,7 +18,7 @@ import {
 type Props = {
   listId: string;
   stageId: string;
-  callback: (stageId: string, item: IItem) => void;
+  addItem: (doc: IItemParams, callback: () => void) => void;
 };
 
 type FinalProps = {
@@ -59,27 +56,15 @@ class ListContainer extends React.Component<FinalProps> {
     });
   };
 
-  convertToCard = (name: string) => {
-    const { convertToCardMutations, stageId } = this.props;
+  convertToCard = (name: string, callback: () => void) => {
+    const { stageId } = this.props;
 
-    convertToCardMutations({
-      variables: {
-        stageId,
-        name
-      }
-    })
-      .then(data => {
-        Alert.success('You successfully converted to card');
-
-        console.log(data);
+    const afterConvert = () => {
+      callback();
+      Alert.success('You successfully converted a card');
+    };
 
-        if (this.props.callback) {
-          this.props.callback(stageId, data.dealsAdd);
-        }
-      })
-      .catch(e => {
-        Alert.error(e.message);
-      });
+    this.props.addItem({ stageId, name }, afterConvert);
   };
 
   render() {
@@ -141,7 +126,7 @@ const options = (props: Props) => {
   };
 };
 
-const WithProps = withProps<Props>(
+export default withProps<Props>(
   compose(
     graphql<Props>(gql(queries.checklistDetail), {
       name: 'checklistDetailQuery',
@@ -166,27 +151,6 @@ const WithProps = withProps<Props>(
           refetchQueries: ['checklists']
         })
       }
-    ),
-    graphql<Props>(gql(dealMutations.dealsAdd), {
-      name: 'convertToCardMutations',
-      options: ({ stageId }) => ({
-        refetchQueries: [
-          {
-            query: gql(stageQuery.stageDetail),
-            variables: { _id: stageId }
-          }
-        ]
-      })
-    })
+    )
   )(ListContainer)
 );
-
-export default props => {
-  return (
-    <PipelineConsumer>
-      {({ onAddItem }) => {
-        return <WithProps {...props} callback={onAddItem} />;
-      }}
-    </PipelineConsumer>
-  );
-};
diff --git a/src/modules/deals/components/DealEditForm.tsx b/src/modules/deals/components/DealEditForm.tsx
@@ -15,7 +15,7 @@ import { IDeal, IDealParams } from '../types';
 type Props = {
   options: IOptions;
   item: IDeal;
-  addItem: (doc: IDealParams, callback: () => void, msg?: string) => void;
+  addItem: (doc: IDealParams, callback: () => void) => void;
   saveItem: (doc: IDealParams, callback?: (item) => void) => void;
   onUpdate: (item, prevStageId?: string) => void;
   removeItem: (itemId: string, callback: () => void) => void;
@@ -136,10 +136,7 @@ export default class DealEditForm extends React.Component<Props, State> {
     copy,
     remove
   }: IEditFormContent) => {
-    const { item, options, onUpdate } = this.props;
-
-    console.log(item);
-    console.log(options);
+    const { item, options, onUpdate, addItem } = this.props;
 
     return (
       <>
@@ -160,6 +157,7 @@ export default class DealEditForm extends React.Component<Props, State> {
             removeItem={remove}
             onUpdate={onUpdate}
             item={item}
+            addItem={addItem}
           />
 
           <Sidebar

diff --git a/src/modules/tasks/components/TaskEditForm.tsx b/src/modules/tasks/components/TaskEditForm.tsx
@@ -40,7 +40,7 @@ export default class TaskEditForm extends React.Component<Props> {
     saveItem,
     onChangeStage
   }: IEditFormContent) => {
-    const { item, options, onUpdate } = this.props;
+    const { item, options, onUpdate, addItem } = this.props;
 
     return (
       <>
@@ -60,6 +60,7 @@ export default class TaskEditForm extends React.Component<Props> {
             removeItem={remove}
             onUpdate={onUpdate}
             item={item}
+            addItem={addItem}
           />
 
           <Sidebar

diff --git a/src/modules/tickets/components/TicketEditForm.tsx b/src/modules/tickets/components/TicketEditForm.tsx
@@ -104,7 +104,7 @@ export default class TicketEditForm extends React.Component<Props, State> {
     saveItem,
     onChangeStage
   }: IEditFormContent) => {
-    const { item, options, onUpdate } = this.props;
+    const { item, options, onUpdate, addItem } = this.props;
 
     const renderSidebar = () => this.renderSidebarFields(saveItem);
 
@@ -126,6 +126,7 @@ export default class TicketEditForm extends React.Component<Props, State> {
             removeItem={remove}
             onUpdate={onUpdate}
             item={item}
+            addItem={addItem}
           />
 
           <Sidebar