added ability to create new child card on cards

packages/plugin-cards-api/src/graphql/resolvers/queries/utils.ts

@@ -138,6 +138,7 @@ export const generateCommonFilters = async (
     pipelineId,
     pipelineIds,
     stageId,
+    parentId,
     search,
     closeDateType,
     assignedUserIds,
@@ -170,10 +171,14 @@ export const generateCommonFilters = async (
 
   const filter: any = noSkipArchive
     ? {}
-    : { status: { $ne: BOARD_STATUSES.ARCHIVED } };
+    : { status: { $ne: BOARD_STATUSES.ARCHIVED }, parentId: undefined };
 
   let filterIds: string[] = [];
 
+  if(parentId){
+    filter.parentId = parentId
+  }
+
   if (assignedUserIds) {
     // Filter by assigned to no one
     const notAssigned = isListEmpty(assignedUserIds);

packages/plugin-cards-api/src/graphql/schema/common.ts

@@ -81,6 +81,7 @@ export const commonTypes = `
 `;
 
 export const commonMutationParams = `
+  parentId:String,
   proccessId: String,
   aboveItemId: String,
   stageId: String,

packages/plugin-cards-api/src/graphql/schema/deal.ts

@@ -62,6 +62,7 @@ const dealMutationParams = `
 const commonQueryParams = `
   _ids: [String]
   date: ItemDate
+  parentId:String
   pipelineId: String
   pipelineIds: [String]
   customerIds: [String]

packages/plugin-cards-api/src/graphql/schema/task.ts

@@ -33,6 +33,7 @@ const listQueryParams = `
     _ids: [String]
     pipelineId: String
     pipelineIds: [String]
+    parentId:String
     stageId: String
     customerIds: [String]
     companyIds: [String]

packages/plugin-cards-api/src/graphql/schema/ticket.ts

@@ -34,6 +34,7 @@ const listQueryParams = `
   _ids: [String]
   pipelineId: String
   pipelineIds: [String]
+  parentId:String
   stageId: String
   customerIds: [String]
   companyIds: [String]

packages/plugin-cards-api/src/models/definitions/boards.ts

@@ -175,6 +175,7 @@ const relationSchema = new Schema(
 
 export const commonItemFieldsSchema = {
   _id: field({ pkey: true }),
+  parentId: field({ type: String,optional:true,label: 'Parent Id'}),
   userId: field({ type: String, optional: true, esType: 'keyword' }),
   createdAt: field({ type: Date, label: 'Created at', esType: 'date' }),
   order: field({ type: Number }),

packages/ui-cards/src/boards/components/editForm/ChildrenSection.tsx

@@ -0,0 +1,142 @@
+import { ModalTrigger, Button, Box, EmptyState, Tip, Icon } from '@erxes/ui/src/components';
+import React from 'react';
+import { AddForm } from '@erxes/ui-cards/src/boards/containers/portable';
+import EditForm from '@erxes/ui-cards/src/boards/containers/editForm/EditForm';
+import { IOptions } from '../../types';
+import { __ } from '@erxes/ui/src/utils';
+import { IDeal } from '../../../deals/types';
+import { ITicket } from '../../../tickets/types';
+import { ITask } from '../../../tasks/types';
+import { SectionBodyItem } from '@erxes/ui/src/layout/styles';
+import { ProductName } from '../../../deals/styles';
+import { Flex } from '@erxes/ui/src/styles/main';
+
+type Props = {
+  children: IDeal[] | ITicket[] | ITask[];
+  parentId: string;
+  options: IOptions;
+  stageId: string;
+  itemId: string;
+};
+
+type State = {
+  openChildId: string;
+  openParentId: string;
+};
+
+class ChildrenSection extends React.Component<Props, State> {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      openChildId: '',
+      openParentId: ''
+    };
+  }
+
+  renderAddForm() {
+    const content = ({ closeModal }) => {
+      const updateProps = {
+        ...this.props,
+        parentId: this.props.itemId,
+        closeModal
+      };
+      return <AddForm {...updateProps} />;
+    };
+    const trigger = (
+      <Button btnStyle="link">
+        <Tip text={__('Add Child Card')}>
+          <Icon icon="plus-circle" />
+        </Tip>
+      </Button>
+    );
+    return <ModalTrigger title="Add New Child Card" trigger={trigger} content={content} />;
+  }
+
+  renderParentForm() {
+    const { stageId, parentId } = this.props;
+
+    const { openParentId } = this.state;
+
+    const closeModal = () => {
+      this.setState({ openParentId: '' });
+    };
+
+    const openModal = () => {
+      const { parentId } = this.props;
+      this.setState({ openParentId: parentId });
+    };
+
+    const updatedProps = {
+      itemId: parentId,
+      stageId: stageId,
+      isPopupVisible: openParentId === parentId,
+      beforePopupClose: closeModal
+    };
+
+    return (
+      <>
+        <Button btnStyle="link" onClick={openModal}>
+          <Tip text={__('See Parent Card')}>
+            <Icon icon="technology" />
+          </Tip>
+        </Button>
+        <EditForm {...updatedProps} />
+      </>
+    );
+  }
+
+  renderChildForm(child: IDeal | ITicket | ITask) {
+    const { openChildId } = this.state;
+
+    const closeModal = () => {
+      this.setState({ openChildId: '' });
+    };
+
+    const openModal = () => {
+      this.setState({ openChildId: child._id });
+    };
+
+    const updatedProps = {
+      itemId: child._id,
+      parentId: this.props.itemId,
+      stageId: child.stageId,
+      isPopupVisible: openChildId === child._id,
+      beforePopupClose: closeModal
+    };
+
+    return (
+      <>
+        <ProductName onClick={openModal}>{child.name}</ProductName>
+        <EditForm {...updatedProps} />
+      </>
+    );
+  }
+
+  render() {
+    const { children, parentId } = this.props;
+
+    const extraButtons = () => {
+      return (
+        <Flex>
+          {parentId && this.renderParentForm()}
+          {this.renderAddForm()}
+        </Flex>
+      );
+    };
+
+    return (
+      <Box title="Children" extraButtons={extraButtons()} isOpen={true}>
+        {children?.length ? (
+          (children as Array<IDeal | ITicket | ITask>).map(child => (
+            <SectionBodyItem key={child._id}>{this.renderChildForm(child)}</SectionBodyItem>
+          ))
+        ) : (
+          <EmptyState text="No Children" icon="list-ui-alt" />
+        )}
+      </Box>
+    );
+  }
+}
+
+export default ChildrenSection;

packages/ui-cards/src/boards/components/editForm/Sidebar.tsx

@@ -23,11 +23,12 @@ type Props = {
     }: { _id: string; status: string; timeSpent: number; startDate?: string },
     callback?: () => void
   ) => void;
+  childrenSection:()=>any
 };
 
 class Sidebar extends React.Component<Props> {
   render() {
-    const { item, saveItem, sidebar } = this.props;
+    const { item, saveItem, sidebar, childrenSection } = this.props;
 
     const userOnChange = usrs => saveItem({ assignedUserIds: usrs });
     const assignedUserIds = (item.assignedUsers || []).map(user => user._id);
@@ -43,7 +44,7 @@ class Sidebar extends React.Component<Props> {
             onSelect={userOnChange}
           />
         </FormGroup>
-
+        {childrenSection()}
         {isEnabled('products') && sidebar && sidebar(saveItem)}
 
         <SidebarConformity {...this.props} />

packages/ui-cards/src/boards/containers/editForm/ChildrenSection.tsx

@@ -0,0 +1,99 @@
+import React from 'react';
+import * as compose from 'lodash.flowright';
+import gql from 'graphql-tag';
+import { graphql } from 'react-apollo';
+import { queries as dealQueries } from '../../../deals/graphql';
+import { queries as taskQueries } from '../../../tasks/graphql';
+import { queries as ticketQueries } from '../../../tickets/graphql';
+import { withProps } from '@erxes/ui/src/utils';
+import { IOptions } from '../../types';
+import { IQueryParams } from '@erxes/ui/src/types';
+import { getFilterParams } from '../../utils';
+import { DealsQueryResponse } from '../../../deals/types';
+import { TasksQueryResponse } from '../../../tasks/types';
+import { TicketsQueryResponse } from '../../../tickets/types';
+import ChildrenSectionComponent from '../../components/editForm/ChildrenSection';
+
+type Props = {
+  type: string;
+  parentId?: string;
+  itemId:string;
+  stageId: string;
+  queryParams: IQueryParams;
+  options: IOptions;
+  pipelineId: string;
+};
+
+type FinalProps = {
+  dealQueries: DealsQueryResponse;
+  taskQueries: TasksQueryResponse;
+  ticketQueries: TicketsQueryResponse;
+} & Props;
+
+class ChildrenSection extends React.Component<FinalProps> {
+  render() {
+    const { type, dealQueries, taskQueries, ticketQueries, parentId, options } = this.props;
+
+    let children: any[] = [];
+    let refetch;
+
+    if (type === 'deal') {
+      children = dealQueries.deals;
+      refetch = dealQueries.refetch;
+    }
+    if (type === 'task') {
+      children = taskQueries.tasks;
+      refetch = taskQueries.refetch;
+    }
+    if (type === 'ticket') {
+      children = ticketQueries.tickets;
+      refetch = ticketQueries.refetch;
+    }
+
+    const updatedProps = {
+      ...this.props,
+      children,
+      parentId:parentId||'',
+      options,
+      refetch
+    };
+
+    return <ChildrenSectionComponent {...updatedProps} />;
+  }
+}
+
+const commonFilter = ({
+  itemId,
+  queryParams,
+  options
+}: {
+  itemId: string;
+  queryParams: IQueryParams;
+  options: IOptions;
+}) => ({
+  variables: {
+    parentId:itemId,
+    ...getFilterParams(queryParams, options.getExtraParams),
+    hasStartAndCloseDate: false
+  }
+});
+
+export default withProps<Props>(
+  compose(
+    graphql<Props>(gql(dealQueries.deals), {
+      name: 'dealQueries',
+      skip: ({ type }) => type !== 'deal',
+      options: props => commonFilter(props)
+    }),
+    graphql<Props>(gql(taskQueries.tasks), {
+      name: 'taskQueries',
+      skip: ({ type }) => type !== 'task',
+      options: props => commonFilter(props)
+    }),
+    graphql<Props>(gql(ticketQueries.tickets), {
+      name: 'ticketQueries',
+      skip: ({ type }) => type !== 'ticket',
+      options: props => commonFilter(props)
+    })
+  )(ChildrenSection)
+);

packages/ui-cards/src/boards/containers/portable/AddForm.tsx

@@ -28,6 +28,7 @@ type IProps = {
   boardId?: string;
   pipelineId?: string;
   stageId?: string;
+  parentId?: string;
   showSelect?: boolean;
   relType?: string;
   mailSubject?: string;
@@ -70,7 +71,8 @@ class AddFormContainer extends React.Component<FinalProps> {
       relType,
       relTypeIds,
       editConformity,
-      bookingProductId
+      bookingProductId,
+      parentId
     } = this.props;
 
     doc.assignedUserIds = doc.assignedUserIds || assignedUserIds;
@@ -82,6 +84,7 @@ class AddFormContainer extends React.Component<FinalProps> {
     doc.proccessId = proccessId;
     doc.description = doc.description || description;
     doc.attachments = doc.attachments || attachments;
+    doc.parentId = parentId
 
     if (sourceConversationId) {
       doc.sourceConversationIds = [sourceConversationId];

packages/ui-cards/src/boards/graphql/mutations.ts

@@ -15,6 +15,7 @@ const createTicketComment = `
 `;
 
 export const commonMutationVariables = `
+  $parentId: String,
   $proccessId: String,
   $aboveItemId: String,
   $stageId: String,
@@ -34,6 +35,7 @@ export const commonMutationVariables = `
 `;
 
 export const commonMutationParams = `
+  parentId: $parentId,
   proccessId: $proccessId,
   aboveItemId: $aboveItemId,
   stageId: $stageId,

packages/ui-cards/src/boards/types.ts

@@ -100,6 +100,7 @@ export interface IItemParams {
   _id?: string;
   name?: string;
   stageId?: string;
+  parentId?: string;
   assignedUserIds?: string[];
   closeDate?: Date;
   description?: string;