+
+
+
+
+ {__('choose Entity')}
+
+
+ {ENTITY.map((item, index) => (
+
+ ))}
+
+
+
+
+ {__('Stage')}
+
+
+ {__('Segment')}
+
+
+ {this.state.segmentRadio === true && (
+
+ {isEnabled('segments') && (
+ <>
+ {__('Segment')}
+
+ this.onChangeSegments(segmentIds)
+ }
+ />
+
+ )}
+
+ )}
+ {this.state.stageRadio === true && (
+
+ {isEnabled('cards') && (
+
+ )}
+
+ )}
+
+ {/* next development
+ {__('frequency')}
+
+ {FREQUENCY.map((typeName, index) => (
+
+ ))}
+
+ */}
+
+ {__('start duration')}:
+
+
+
+
+
+ {__('end duration')}:
+
+
+
+
+
+
+
+
+ {__('choose goalType type')}
+
+
+ {GOAL_TYPE.map((typeName, index) => (
+
+ ))}
+
+
+
+
+ {__('contribution type')}
+
+
+ {CONTRIBUTION.map((item, index) => (
+
+ ))}
+
+
+ {this.state.contributionType === 'person' && (
+
+ contribution
+
+
+ )}
+ {this.state.contributionType === 'team' && (
+
+ {__('Choose Structure')}
+
+ {GOAL_STRUCTURE.map((item, index) => (
+
+ ))}
+
+
+ )}
+ {this.state.teamGoalType === 'Departments' &&
+ this.state.contributionType === 'team' && (
+
+ {__('Departments')}
+
+ {departments.map((item, index) => (
+
+ ))}
+
+
+ )}
+ {this.state.teamGoalType === 'Units' &&
+ this.state.contributionType === 'team' && (
+
+ {__('Units')}
+
+ {units.map((item, index) => (
+
+ ))}
+
+
+ )}
+ {this.state.teamGoalType === 'Branches' &&
+ this.state.contributionType === 'team' && (
+
+ {__('Branches')}
+
+ {branches.map((item, index) => (
+
+ ))}
+
+
+ )}
+
+
+ {__('metric')}:
+
+ {['Value', 'Count'].map((typeName, index) => (
+
+ ))}
+
+
+
+ {this.renderFormGroup('target', {
+ ...formProps,
+ name: 'target',
+ type: 'number',
+ defaultValue: goalType.target || 0
+ })}
+
+
+
+ {__('choose specific period goals')}
+
+
+ {SPECIFIC_PERIOD_GOAL.map((item, index) => (
+
+ ))}
+
+
+
+
+ {this.state.periodGoal === 'Monthly' && (
+
+ {months.map((month, index) => (
+
+
+ {__('Period (Monthly)')}
+
+ {month}
+
+
+
+ {__('Target')}
+
+ this.onChangeTarget(index, event)}
+ />
+
+
+
+ ))}
+
+ )}
+ {this.state.periodGoal === 'Weekly' && (
+
+ {weeks.map((week, index) => (
+
+
+ {__('Period (Weekly)')}
+
+ {week}
+
+
+
+ {__('Target')}
+
+ this.onChangeTarget(index, event)}
+ />
+
+
+
+ ))}
+
+ )}
+
+
+ |
+
+ |
+ {displayValue(goalType, 'entity')} |
+ {boardName} |
+ {pipelineName} |
+ {stageName} |
+
+ {displayValue(goalType, 'contributionType')}
+ |
+ {displayValue(goalType, 'frequency')} |
+ {displayValue(goalType, 'metric')} |
+ {displayValue(goalType, 'goalType')} |
+ {displayValue(goalType, 'startDate')} |
+ {displayValue(goalType, 'endDate')} |
+ {displayValue(goalType.progress, 'current')} |
+ {displayValue(goalType, 'target')} |
+ {displayValue(goalType.progress, 'progress')} |
+
+ {renderViewAction(
+ goalType,
+ boardName,
+ pipelineName,
+ stageName,
+ emailName
+ )}
+ |
+ {renderEditAction(goalType)} |
+
+ );
+}
+
+export default GoalRow;
diff --git a/packages/plugin-goals-ui/src/components/goalTypesList.tsx b/packages/plugin-goals-ui/src/components/goalTypesList.tsx
new file mode 100755
index 0000000000..babe628c17
--- /dev/null
+++ b/packages/plugin-goals-ui/src/components/goalTypesList.tsx
@@ -0,0 +1,259 @@
+import {
+ Alert,
+ BarItems,
+ Button,
+ confirm,
+ DataWithLoader,
+ FormControl,
+ ModalTrigger,
+ Pagination,
+ router,
+ Table,
+ Wrapper
+} from '@erxes/ui/src';
+import { IRouterProps } from '@erxes/ui/src/types';
+import React from 'react';
+import { withRouter } from 'react-router-dom';
+import { queries } from '../graphql';
+import GoalTypeForm from '../containers/goalForm';
+import { GoalTypesTableWrapper } from '../styles';
+import { IGoalType } from '../types';
+import GoalRow from './goalRow';
+import dayjs from 'dayjs';
+import { IBoard, IPipeline, IStage } from '../types';
+import goalForm from '../containers/goalForm';
+import GoalForm from '../containers/goalForm';
+import { Spinner, __ } from '@erxes/ui/src';
+import Sidebar from './Sidebar';
+// import Sidebar from '../containers/Sidebar';
+import queryString from 'query-string';
+import { gql, useQuery } from '@apollo/client';
+interface IProps extends IRouterProps {
+ goalTypes: IGoalType[];
+ loading: boolean;
+ searchValue: string;
+ totalCount: number;
+ // TODO: check is below line not throwing error ?
+ toggleBulk: () => void;
+ toggleAll: (targets: IGoalType[], containerId: string) => void;
+ bulk: any[];
+ isAllSelected: boolean;
+ emptyBulk: () => void;
+ removeGoalTypes: (
+ doc: { goalTypeIds: string[] },
+ emptyBulk: () => void
+ ) => void;
+ history: any;
+ queryParams: any;
+}
+
+type State = {
+ searchValue?: string;
+};
+
+class GoalTypesList extends React.Component