feature(export_label_proj): add export api call

IDEA-Research · Jun 16, 2023 · ce41ca3 · ce41ca3
1 parent 05aeb5c
commit ce41ca3
Show file tree

Hide file tree

Showing 8 changed files with 141 additions and 82 deletions.
diff --git a/packages/app/src/locales/en-US.ts b/packages/app/src/locales/en-US.ts
@@ -381,10 +381,12 @@ export default {
   'proj.infoModal.label': 'Project Managers',
 
   'proj.exportModal.title': 'Export to Dataset',
-  'proj.exportModal.labelSet.name': 'Labelset',
-  'proj.exportModal.labelSet.rule': 'Please input labelset name',
+  'proj.exportModal.labelName.name': 'Labelset',
+  'proj.exportModal.labelName.rule': 'Please input labelset name',
+  'proj.exportModal.labelName.tips':
+    'You can check labeling result in selected dataset with the labelset name after clicking "OK". ',
   'proj.exportModal.submitSuccess':
-    'Successfully export to labelset "{name}", you can check results in datasets module.',
+    'Successfully export labelset "{name}" into selected dataset, you can check labeled results in datasets module.',
 
   'proj.workspace.eTask.startLabel': 'Start Label',
   'proj.workspace.eTask.edit': 'Edit',
@@ -401,6 +403,7 @@ export default {
   'proj.statusMap.reviewing': 'Reviewing',
   'proj.statusMap.rejected': 'Rejected',
   'proj.statusMap.accepted': 'Accepted',
+  'proj.statusMap.exported': 'Exported',
 
   'proj.eTaskStatus.waiting': 'Waiting',
   'proj.eTaskStatus.working': 'Working',

diff --git a/packages/app/src/locales/zh-CN.ts b/packages/app/src/locales/zh-CN.ts
@@ -350,10 +350,12 @@ export default {
   'proj.infoModal.label': '项目经理',
 
   'proj.exportModal.title': '导出到数据集',
-  'proj.exportModal.labelSet.name': '标注集名称',
-  'proj.exportModal.labelSet.rule': '请输入标注集名称',
+  'proj.exportModal.labelName.name': '标注集名称',
+  'proj.exportModal.labelName.rule': '请输入标注集名称',
+  'proj.exportModal.labelName.tips':
+    '点击“确定”后，可以用标注集名称查看所选数据集的标注结果。',
   'proj.exportModal.submitSuccess':
-    '已成功导入至 "{name}" 结果集中，您可以移步数据集模块查看标注结果',
+    '已成功导出标注集 "{name}" 到所选数据集，您可以在数据集模块中查看标注结果。',
 
   'proj.workspace.eTask.startLabel': '开始标注',
   'proj.workspace.eTask.edit': '编辑',
@@ -370,6 +372,7 @@ export default {
   'proj.statusMap.reviewing': '审核中',
   'proj.statusMap.rejected': '已拒绝',
   'proj.statusMap.accepted': '已通过',
+  'proj.statusMap.exported': '已导出',
 
   'proj.eTaskStatus.waiting': '等待中',
   'proj.eTaskStatus.working': '进行中',

diff --git a/packages/app/src/pages/Project/components/ProjectExportModal/index.tsx b/packages/app/src/pages/Project/components/ProjectExportModal/index.tsx
@@ -1,23 +1,22 @@
 import { ModalForm, ProFormText } from '@ant-design/pro-components';
+import { useModel } from '@umijs/max';
 import { useLocale } from '@/locales/helper';
-import { Form, message } from 'antd';
+import { Form } from 'antd';
 import styles from './index.less';
 
-const ProjectExportModal = () => {
-  const { localeText } = useLocale();
-  const [form] = Form.useForm<{ labelSet: string }>();
+interface IModalProps {
+  projectId: string;
+}
 
-  const waitTime = (time: number = 100) => {
-    return new Promise((resolve) => {
-      setTimeout(() => {
-        resolve(true);
-      }, time);
-    });
-  };
+const ProjectExportModal: React.FC<IModalProps> = (props) => {
+  const { projectId } = props;
+  const { onExportLabelProject } = useModel('Project.list');
+  const [form] = Form.useForm<{ labelName: string }>();
+  const { localeText } = useLocale();
 
   return (
     <ModalForm<{
-      labelSet: string;
+      labelName: string;
     }>
       title={localeText('proj.exportModal.title')}
       width={450}
@@ -32,28 +31,19 @@ const ProjectExportModal = () => {
         destroyOnClose: true,
       }}
       submitTimeout={2000}
-      onFinish={async (values) => {
-        // Todo: replace with actual export API
-        await waitTime(2000);
-        console.log(values.labelSet);
-        message.success(
-          localeText('proj.exportModal.submitSuccess', {
-            name: values.labelSet,
-          }),
-        );
-        return true;
-      }}
+      onFinish={async (values) => await onExportLabelProject(projectId, values)}
       className={styles.input}
     >
       <ProFormText
-        label={localeText('proj.exportModal.labelSet.name')}
-        name="labelSet"
+        label={localeText('proj.exportModal.labelName.name')}
+        name="labelName"
         rules={[
           {
             required: true,
-            message: localeText('proj.exportModal.labelSet.rule'),
+            message: localeText('proj.exportModal.labelName.rule'),
           },
         ]}
+        extra={localeText('proj.exportModal.labelName.tips')}
       />
     </ModalForm>
   );

diff --git a/packages/app/src/pages/Project/constants.ts b/packages/app/src/pages/Project/constants.ts
@@ -8,6 +8,7 @@ export enum EProjectStatus {
   Reviewing = 'reviewing',
   Rejected = 'rejected',
   Accepted = 'accepted',
+  Exported = 'exported',
 }
 
 export const PROJECT_STATUS_MAP = {
@@ -35,6 +36,10 @@ export const PROJECT_STATUS_MAP = {
     text: 'proj.statusMap.accepted',
     color: 'success',
   },
+  [EProjectStatus.Exported]: {
+    text: 'proj.statusMap.exported',
+    color: 'default',
+  },
 };
 
 export enum ETaskStatus {

diff --git a/packages/app/src/pages/Project/index.tsx b/packages/app/src/pages/Project/index.tsx
@@ -15,7 +15,7 @@ import TableTags from './components/TableTags';
 import { EProjectAction } from './models/auth';
 import { useSize } from 'ahooks';
 import styles from './index.less';
-// import ProjectExportModal from './components/ProjectExportModal';
+import ProjectExportModal from './components/ProjectExportModal';
 
 const ProjectList: React.FC = () => {
   const { user } = useModel('user');
@@ -40,37 +40,29 @@ const ProjectList: React.FC = () => {
     const actions = [];
     if (
       checkPermission(record.userRoles, EProjectAction.ProjectQa) &&
-      [
-        EProjectStatus.Reviewing,
-        EProjectStatus.Accepted,
-        EProjectStatus.Rejected,
-      ].includes(record.status)
+      [EProjectStatus.Reviewing].includes(record.status)
     ) {
       // ProjectQa
-      if (record.status !== EProjectStatus.Accepted) {
-        actions.push(
-          <a
-            key="accept"
-            style={{ color: '#4fbb30' }}
-            onClick={() => onChangeProjectResult(record, EQaAction.Accept)}
-          >
-            {localeText('proj.table.action.accept')}
-          </a>,
-        );
-      }
-      if (record.status !== EProjectStatus.Rejected) {
-        actions.push(
-          <Popconfirm
-            key="reject"
-            title="Are you sure to reject this project?"
-            onConfirm={() => onChangeProjectResult(record, EQaAction.Reject)}
-          >
-            <a key="reject" style={{ color: 'red' }}>
-              {localeText('proj.table.action.reject')}
-            </a>
-          </Popconfirm>,
-        );
-      }
+      actions.push(
+        <a
+          key="accept"
+          style={{ color: '#4fbb30' }}
+          onClick={() => onChangeProjectResult(record, EQaAction.Accept)}
+        >
+          {localeText('proj.table.action.accept')}
+        </a>,
+      );
+      actions.push(
+        <Popconfirm
+          key="reject"
+          title="Are you sure to reject this project?"
+          onConfirm={() => onChangeProjectResult(record, EQaAction.Reject)}
+        >
+          <a key="reject" style={{ color: 'red' }}>
+            {localeText('proj.table.action.reject')}
+          </a>
+        </Popconfirm>,
+      );
     }
     if (checkPermission(record.userRoles, EProjectAction.ProjectEdit)) {
       // Init/info is not necessary when there is an edit function.
@@ -124,17 +116,16 @@ const ProjectList: React.FC = () => {
         </Link>,
       );
     }
-    // Todo: uncommented out when actual export API is avaliable
-    // if (
-    //   checkPermission(record.userRoles, EProjectAction.ProjectEdit)
-    //   && record.status === EProjectStatus.Accepted
-    // ) {
-    //   actions.push(
-    //     <a key="export">
-    //       <ProjectExportModal />
-    //     </a>
-    //   );
-    // }
+    if (
+      checkPermission(record.userRoles, EProjectAction.ProjectExport) &&
+      record.status === EProjectStatus.Accepted
+    ) {
+      actions.push(
+        <a key="export">
+          <ProjectExportModal projectId={record.id} />
+        </a>,
+      );
+    }
     return actions;
   };
 
@@ -157,15 +148,37 @@ const ProjectList: React.FC = () => {
     {
       title: localeText('proj.table.datasets'),
       ellipsis: true,
-      render: (_, record) => (
-        <TableTags
-          max={2}
-          data={record.datasets.map((item) => ({
-            text: item.name,
-            color: 'blue',
-          }))}
-        />
-      ),
+      render: (_, record) => {
+        const pageState = JSON.stringify({
+          datasetId: record?.datasets?.[0]?.id,
+          datasetName: record?.datasets?.[0]?.name,
+        });
+
+        return record.status === EProjectStatus.Exported ? (
+          <a
+            href={`${
+              window.location.origin
+            }/page/dataset/detail?pageState=${encodeURIComponent(pageState)}`}
+            target="blank"
+          >
+            <TableTags
+              max={2}
+              data={record.datasets.map((item) => ({
+                text: item.name,
+                color: 'blue',
+              }))}
+            />
+          </a>
+        ) : (
+          <TableTags
+            max={2}
+            data={record.datasets.map((item) => ({
+              text: item.name,
+              color: 'blue',
+            }))}
+          />
+        );
+      },
     },
     {
       title: localeText('proj.table.progress'),

diff --git a/packages/app/src/pages/Project/models/auth.ts b/packages/app/src/pages/Project/models/auth.ts
@@ -16,6 +16,7 @@ export enum EProjectAction {
   ProjectInfo,
   ProjectInit,
   ProjectQa,
+  ProjectExport,
   /** task */
   AssignLeader = 100,
   TaskQa,
@@ -33,6 +34,7 @@ const RolePermissions: Record<EProjectRole, EProjectAction[]> = {
     EProjectAction.ProjectEdit,
     EProjectAction.ProjectQa,
     EProjectAction.View,
+    EProjectAction.ProjectExport,
   ],
   [EProjectRole.Manager]: [
     EProjectAction.ProjectInit,

diff --git a/packages/app/src/pages/Project/models/list.ts b/packages/app/src/pages/Project/models/list.ts
@@ -7,6 +7,7 @@ import {
   initProject,
   newProject,
   qaProject,
+  exportLabelProject,
 } from '@/services/project';
 import { DATA } from '@/services/type';
 import { message } from 'antd';
@@ -51,6 +52,10 @@ export interface ProjectModal {
   disableInitProject?: boolean;
 }
 
+export interface ExportModalForm {
+  labelName: string;
+}
+
 export const SET_WORKFLOW_NOW = 'proj.editModal.setWorkflowNow';
 
 const INIT_PROJECT_MODEL = {
@@ -255,6 +260,26 @@ export default () => {
     }
   };
 
+  /** For owner */
+  const onExportLabelProject = async (
+    projectId: string,
+    values: ExportModalForm,
+  ) => {
+    try {
+      await exportLabelProject(projectId, {
+        labelName: values?.labelName,
+      });
+      message.success(
+        globalLocaleText('proj.exportModal.submitSuccess', {
+          name: values?.labelName,
+        }),
+      );
+      loadPageData();
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
   /**
    * Initialize page parameters from the URL.
    * @param urlPageState
@@ -287,5 +312,6 @@ export default () => {
     projectModalNext,
     projectModalFinish,
     onChangeProjectResult,
+    onExportLabelProject,
   };
 };
diff --git a/packages/app/src/services/project.ts b/packages/app/src/services/project.ts
@@ -104,6 +104,23 @@ export async function qaProject(
   });
 }
 
+/** export label project (for owner) */
+export async function exportLabelProject(
+  projectId: string,
+  params: {
+    labelName: string;
+  },
+  options?: { [key: string]: any },
+) {
+  return request(`/api/v1/label_project_export/${projectId}`, {
+    method: 'POST',
+    data: {
+      ...params,
+    },
+    ...(options || {}),
+  });
+}
+
 /** dataset lint */
 export async function fetchDatasetLint(
   params: {