fix style issue & add missing fields (#1075)

* fix(dop): fix style issue

* feat(dop): i18n

* feat(dop): compatible with backend api

* feat(dop): add member multi select

shell/app/common/components/contractive-filter.tsx

@@ -317,7 +317,9 @@ const FilterItem = ({ itemData, value, active, onVisibleChange, onChange, onQuic
   }
 
   if (type === 'dateRange') {
-    const [startDate, endDate] = value || [];
+    const [_startDate, _endDate] = value || [];
+    const startDate = typeof _startDate === 'string' ? +_startDate : _startDate;
+    const endDate = typeof _endDate === 'string' ? +_endDate : _endDate;
     const { borderTime } = customProps || {};
 
     const disabledDate = (isStart: boolean) => (current: Moment | undefined) => {

shell/app/locales/en.json

@@ -2868,6 +2868,7 @@
     "create milestone": "create milestone",
     "created successfully": "created successfully",
     "createdAt": "createdAt",
+    "creation date": "creation date",
     "creation method": "creation method",
     "creator": "creator",
     "currently supports importing Excel files": "currently support importing Excel files",
@@ -3131,6 +3132,7 @@
     "please enter the correct http address": "please enter the correct http address",
     "please enter the correct phone number": "please enter the correct phone number",
     "please enter the correct url address": "please enter the correct url address",
+    "please enter title or ID": "please enter title or ID",
     "please enter valid repository address": "please enter valid repository address",
     "please fill in the correct ip": "please fill in the correct ip",
     "please fill in the correct port number": "please fill in the correct port number",

shell/app/locales/zh.json

@@ -2868,6 +2868,7 @@
     "create milestone": "创建里程碑",
     "created successfully": "创建成功",
     "createdAt": "创建时间",
+    "creation date": "创建日期",
     "creation method": "创建方式",
     "creator": "创建人",
     "currently supports importing Excel files": "当前支持导入Excel类型文件",
@@ -3131,6 +3132,7 @@
     "please enter the correct http address": "请输入正确的http地址",
     "please enter the correct phone number": "请输入正确的手机号码",
     "please enter the correct url address": "请输入正确的url地址",
+    "please enter title or ID": "请输入标题或ID",
     "please enter valid repository address": "请输入正确的仓库地址",
     "please fill in the correct ip": "请填写正确ip",
     "please fill in the correct port number": "请填写正确的端口号",

shell/app/modules/project/pages/backlog/backlog.tsx

@@ -12,7 +12,7 @@
 // along with this program. If not, see <http://www.gnu.org/licenses/>.
 
 import React from 'react';
-import { isEmpty, map } from 'lodash';
+import { isEmpty, map, unset } from 'lodash';
 import { useDrop } from 'react-dnd';
 import { Button, Spin, Popconfirm, Pagination } from 'core/nusi';
 import { Icon as CustomIcon, useUpdate, ContractiveFilter } from 'common';
@@ -48,7 +48,7 @@ const Backlog = () => {
   ]);
   const totalWorkflowStateList = issueWorkflowStore.useStore((s) => s.totalWorkflowStateList);
 
-  const stateCollection: { label: string | React.ReactNode; children: { label: string; value: string }[] }[] =
+  const stateCollection: Array<{ label: string | React.ReactNode; children: Array<{ label: string; value: string }> }> =
     React.useMemo(() => {
       const collection = totalWorkflowStateList.reduce((acc, current) => {
         const { issueType, stateName, stateID } = current;
@@ -125,7 +125,19 @@ const Backlog = () => {
   const getList = React.useCallback(
     (filters: Obj = {}, goTop = true) => {
       goTop && (listRef.current.scrollTop = 0);
-      return getBacklogIssues({ ...filterState, ...filters });
+      const submitValues = { ...filterState, ...filters };
+      const { finishedAtStartEnd, createdAtStartEnd } = submitValues;
+      if (finishedAtStartEnd) {
+        unset(submitValues, 'finishedAtStartEnd');
+        submitValues.startFinishedAt = finishedAtStartEnd[0];
+        submitValues.endFinishedAt = finishedAtStartEnd[1];
+      }
+      if (createdAtStartEnd) {
+        unset(submitValues, 'createdAtStartEnd');
+        submitValues.startCreatedAt = createdAtStartEnd[0];
+        submitValues.endCreatedAt = createdAtStartEnd[1];
+      }
+      return getBacklogIssues(submitValues);
     },
     [filterState, getBacklogIssues],
   );
@@ -199,27 +211,36 @@ const Backlog = () => {
         label: i18n.t('project:assignee'),
         fixed: false,
         type: 'memberSelector',
+        customProps: {
+          mode: 'multiple',
+        },
       },
       {
         key: 'creator',
         label: i18n.t('project:creator'),
         fixed: false,
         type: 'memberSelector',
+        customProps: {
+          mode: 'multiple',
+        },
       },
       {
-        key: 'title',
-        label: i18n.t('title'),
-        emptyText: i18n.t('application:all'),
-        fixed: true,
-        placeholder: i18n.t('filter by {name}', { name: i18n.t('title') }),
-        type: 'input' as const,
+        key: 'finishedAtStartEnd',
+        label: i18n.t('project:deadline'),
+        fixed: false,
+        type: 'dateRange',
       },
       {
-        key: 'id',
-        label: 'IconDown',
+        key: 'createdAtStartEnd',
+        label: i18n.t('project:creation date'),
+        fixed: false,
+        type: 'dateRange',
+      },
+      {
+        key: 'title',
         emptyText: i18n.t('application:all'),
         fixed: true,
-        placeholder: i18n.t('filter by {name}', { name: 'ID' }),
+        placeholder: i18n.t('project:please enter title or ID'),
         type: 'input' as const,
       },
     ],

shell/app/modules/project/pages/backlog/issue-item.tsx

@@ -27,6 +27,7 @@ import './issue-item.scss';
 import routeInfoStore from 'core/stores/route';
 import userStore from 'app/user/stores';
 import { useUserMap } from 'core/stores/userMap';
+import { useMount } from 'react-use';
 
 export enum BACKLOG_ISSUE_TYPE {
   iterationIssue = 'iterationIssue',
@@ -44,7 +45,7 @@ interface IIssueProps {
 const noop = () => Promise.resolve();
 export const IssueItem = (props: IIssueProps) => {
   const { data, onDelete, onDragDelete, issueType, onClickIssue = noop } = props;
-  const { title, type, priority, creator, assignee } = data;
+  const { title, type, priority, creator, assignee, id } = data;
   const curPriority = ISSUE_PRIORITY_MAP[priority] || {};
   const userMap = useUserMap();
   const projectPerm = usePerm((s) => s.project);
@@ -94,6 +95,7 @@ export const IssueItem = (props: IIssueProps) => {
     >
       <div className="issue-info h-full">
         <div className="backlog-item-content">
+          <div className="w-20">{id}</div>
           <IssueIcon type={type as ISSUE_OPTION} />
           <Ellipsis className="font-bold" title={name} />
         </div>
@@ -148,11 +150,17 @@ const placeholderMap = {
   TASK: i18n.t('{name} title', { name: i18n.t('project:task') }),
   BUG: i18n.t('{name} title', { name: i18n.t('project:bug') }),
 };
+
 export const IssueForm = (props: IIssueFormProps) => {
   const { onCancel = noop, onOk = noop, className = '', defaultIssueType } = props;
   const [chosenType, setChosenType] = React.useState(defaultIssueType || ISSUE_OPTION.REQUIREMENT);
   const formRef = React.useRef(null as any);
   const { projectId } = routeInfoStore.getState((s) => s.params);
+  const [shouldAutoFocus, setShouldAutoFocus] = React.useState(true);
+
+  useMount(() => {
+    setShouldAutoFocus(false);
+  });
 
   const onAdd = () => {
     const curForm = formRef && formRef.current;
@@ -201,7 +209,7 @@ export const IssueForm = (props: IIssueFormProps) => {
         placeholder: `${placeholderMap[chosenType]}, ${i18n.t('enter key to save quickly')}`,
         maxLength: 255,
         size: 'small',
-        autoFocus: true,
+        autoFocus: shouldAutoFocus,
         className: 'backlog-issue-add-title',
         onPressEnter: onAdd,
       },
@@ -237,7 +245,7 @@ export const IssueForm = (props: IIssueFormProps) => {
     if (curForm) {
       curForm.setFields(fields);
     }
-  }, [chosenType]);
+  }, [chosenType, shouldAutoFocus]);
 
   return (
     <div className={`${className} backlog-issue-form flex justify-between items-center`}>