Task moving between projects (#3164)
Dmitry Kalinin
5 years ago
committed by
GitHub
parent
e0f10d7b7f
commit
a2df499f50
@ -0,0 +1,84 @@
|
|||||||
|
// Copyright (C) 2021 Intel Corporation
|
||||||
|
//
|
||||||
|
// SPDX-License-Identifier: MIT
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import { Col, Row } from 'antd/lib/grid';
|
||||||
|
import Tag from 'antd/lib/tag';
|
||||||
|
import Select from 'antd/lib/select';
|
||||||
|
import Checkbox from 'antd/lib/checkbox';
|
||||||
|
import { ArrowRightOutlined } from '@ant-design/icons';
|
||||||
|
import CVATTooltip from 'components/common/cvat-tooltip';
|
||||||
|
|
||||||
|
export interface LabelMapperItemValue {
|
||||||
|
labelId: number;
|
||||||
|
newLabelName: string | null;
|
||||||
|
clearAtrributes: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface LabelMapperItemProps {
|
||||||
|
label: any;
|
||||||
|
projectLabels?: any[];
|
||||||
|
value: LabelMapperItemValue;
|
||||||
|
labelMappers: LabelMapperItemValue[];
|
||||||
|
onChange: (value: LabelMapperItemValue) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function LabelMapperItem(props: LabelMapperItemProps): JSX.Element {
|
||||||
|
const {
|
||||||
|
label, value, onChange, projectLabels, labelMappers,
|
||||||
|
} = props;
|
||||||
|
|
||||||
|
const labelNames = labelMappers.map((mapper) => mapper.newLabelName).filter((el) => el);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Row className='cvat-move-task-label-mapper-item' align='middle'>
|
||||||
|
<Col span={6}>
|
||||||
|
{label.name.length > 12 ? (
|
||||||
|
<CVATTooltip overlay={label.name}>
|
||||||
|
<Tag color={label.color}>
|
||||||
|
{`${label.name.slice(0, 12)}...`}
|
||||||
|
</Tag>
|
||||||
|
</CVATTooltip>
|
||||||
|
) : (
|
||||||
|
<Tag color={label.color}>
|
||||||
|
{label.name}
|
||||||
|
</Tag>
|
||||||
|
)}
|
||||||
|
<ArrowRightOutlined />
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<Select
|
||||||
|
disabled={typeof projectLabels === 'undefined'}
|
||||||
|
value={value.newLabelName || ''}
|
||||||
|
onChange={(_value) =>
|
||||||
|
onChange({
|
||||||
|
...value,
|
||||||
|
newLabelName: _value as string,
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
{projectLabels?.filter((_label) => (
|
||||||
|
!labelNames.includes(_label.name)
|
||||||
|
)).map((_label) => (
|
||||||
|
<Select.Option key={_label.id} value={_label.name}>
|
||||||
|
{_label.name}
|
||||||
|
</Select.Option>
|
||||||
|
))}
|
||||||
|
</Select>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<Checkbox
|
||||||
|
disabled
|
||||||
|
checked={value.clearAtrributes}
|
||||||
|
onChange={(_value) =>
|
||||||
|
onChange({
|
||||||
|
...value,
|
||||||
|
clearAtrributes: _value.target.checked,
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
Clear attributes
|
||||||
|
</Checkbox>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,163 @@
|
|||||||
|
// Copyright (C) 2021 Intel Corporation
|
||||||
|
//
|
||||||
|
// SPDX-License-Identifier: MIT
|
||||||
|
|
||||||
|
import './styles.scss';
|
||||||
|
import React, { useState, useEffect } from 'react';
|
||||||
|
import { useSelector, useDispatch } from 'react-redux';
|
||||||
|
import Modal from 'antd/lib/modal';
|
||||||
|
import { Row, Col } from 'antd/lib/grid';
|
||||||
|
import Divider from 'antd/lib/divider';
|
||||||
|
import notification from 'antd/lib/notification';
|
||||||
|
import { QuestionCircleFilled } from '@ant-design/icons';
|
||||||
|
|
||||||
|
import ProjectSearch from 'components/create-task-page/project-search-field';
|
||||||
|
import CVATTooltip from 'components/common/cvat-tooltip';
|
||||||
|
import { CombinedState } from 'reducers/interfaces';
|
||||||
|
import { switchMoveTaskModalVisible, moveTaskToProjectAsync } from 'actions/tasks-actions';
|
||||||
|
import getCore from 'cvat-core-wrapper';
|
||||||
|
import LabelMapperItem, { LabelMapperItemValue } from './label-mapper-item';
|
||||||
|
|
||||||
|
const core = getCore();
|
||||||
|
|
||||||
|
export default function MoveTaskModal(): JSX.Element {
|
||||||
|
const visible = useSelector((state: CombinedState) => state.tasks.moveTask.modalVisible);
|
||||||
|
const task = useSelector((state: CombinedState) => {
|
||||||
|
const [taskInstance] = state.tasks.current.filter((_task) => _task.instance.id === state.tasks.moveTask.taskId);
|
||||||
|
return taskInstance?.instance;
|
||||||
|
});
|
||||||
|
const taskUpdating = useSelector((state: CombinedState) => state.tasks.updating);
|
||||||
|
const dispatch = useDispatch();
|
||||||
|
|
||||||
|
const [projectId, setProjectId] = useState<number | null>(null);
|
||||||
|
const [project, setProject] = useState<any>(null);
|
||||||
|
const [labelMap, setLabelMap] = useState<{ [key: string]: LabelMapperItemValue }>({});
|
||||||
|
|
||||||
|
const initValues = (): void => {
|
||||||
|
if (task) {
|
||||||
|
const labelValues: { [key: string]: LabelMapperItemValue } = {};
|
||||||
|
task.labels.forEach((label: any) => {
|
||||||
|
labelValues[label.id] = {
|
||||||
|
labelId: label.id,
|
||||||
|
newLabelName: null,
|
||||||
|
clearAtrributes: true,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
setLabelMap(labelValues);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const onCancel = (): void => {
|
||||||
|
dispatch(switchMoveTaskModalVisible(false));
|
||||||
|
initValues();
|
||||||
|
setProject(null);
|
||||||
|
setProjectId(null);
|
||||||
|
};
|
||||||
|
|
||||||
|
const submitMove = async (): Promise<void> => {
|
||||||
|
if (!projectId) {
|
||||||
|
notification.error({
|
||||||
|
message: 'Project not selected',
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (!Object.values(labelMap).every((map) => map.newLabelName !== null)) {
|
||||||
|
notification.error({
|
||||||
|
message: 'Not all labels mapped',
|
||||||
|
description: 'Please choose any action to not mapped labels first',
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
dispatch(
|
||||||
|
moveTaskToProjectAsync(
|
||||||
|
task,
|
||||||
|
projectId,
|
||||||
|
Object.values(labelMap).map((map) => ({
|
||||||
|
label_id: map.labelId,
|
||||||
|
new_label_name: map.newLabelName,
|
||||||
|
clear_attributes: map.clearAtrributes,
|
||||||
|
})),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
onCancel();
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (projectId) {
|
||||||
|
core.projects.get({ id: projectId }).then((_project: any) => {
|
||||||
|
if (projectId) {
|
||||||
|
setProject(_project[0]);
|
||||||
|
const { labels } = _project[0];
|
||||||
|
const labelValues: { [key: string]: LabelMapperItemValue } = {};
|
||||||
|
Object.entries(labelMap).forEach(([id, label]) => {
|
||||||
|
const taskLabelName = task.labels.filter(
|
||||||
|
(_label: any) => (_label.id === label.labelId),
|
||||||
|
)[0].name;
|
||||||
|
const [autoNewLabel] = labels.filter((_label: any) => (
|
||||||
|
_label.name === taskLabelName
|
||||||
|
));
|
||||||
|
labelValues[id] = {
|
||||||
|
labelId: label.labelId,
|
||||||
|
newLabelName: autoNewLabel ? autoNewLabel.name : null,
|
||||||
|
clearAtrributes: true,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
setLabelMap(labelValues);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
setProject(null);
|
||||||
|
}
|
||||||
|
}, [projectId]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
initValues();
|
||||||
|
}, [task?.id]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Modal
|
||||||
|
visible={visible}
|
||||||
|
onCancel={onCancel}
|
||||||
|
onOk={submitMove}
|
||||||
|
okButtonProps={{ disabled: taskUpdating }}
|
||||||
|
title={(
|
||||||
|
<span>
|
||||||
|
{`Move task ${task?.id} to project`}
|
||||||
|
{/* TODO: replace placeholder */}
|
||||||
|
<CVATTooltip title='Some moving proccess description here'>
|
||||||
|
<QuestionCircleFilled className='ant-typography-secondary' />
|
||||||
|
</CVATTooltip>
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
className='cvat-task-move-modal'
|
||||||
|
>
|
||||||
|
<Row align='middle'>
|
||||||
|
<Col>Project:</Col>
|
||||||
|
<Col>
|
||||||
|
<ProjectSearch
|
||||||
|
value={projectId}
|
||||||
|
onSelect={setProjectId}
|
||||||
|
filter={(_project) => _project.id !== task?.projectId}
|
||||||
|
/>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<Divider orientation='left'>Label mapping</Divider>
|
||||||
|
{!!Object.keys(labelMap).length && !taskUpdating &&
|
||||||
|
task?.labels.map((label: any) => (
|
||||||
|
<LabelMapperItem
|
||||||
|
label={label}
|
||||||
|
key={label.id}
|
||||||
|
projectLabels={project?.labels}
|
||||||
|
value={labelMap[label.id]}
|
||||||
|
labelMappers={Object.values(labelMap)}
|
||||||
|
onChange={(value) => {
|
||||||
|
setLabelMap({
|
||||||
|
...labelMap,
|
||||||
|
[value.labelId]: value,
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</Modal>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,34 @@
|
|||||||
|
// Copyright (C) 2021 Intel Corporation
|
||||||
|
//
|
||||||
|
// SPDX-License-Identifier: MIT
|
||||||
|
|
||||||
|
@import 'base.scss';
|
||||||
|
|
||||||
|
.cvat-task-move-modal > .ant-modal-content {
|
||||||
|
> .ant-modal-body {
|
||||||
|
> div:nth-child(1) {
|
||||||
|
margin-bottom: $grid-unit-size * 2;
|
||||||
|
|
||||||
|
> div:nth-child(1) {
|
||||||
|
padding-right: $grid-unit-size * 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
> .ant-modal-header .anticon {
|
||||||
|
margin-left: $grid-unit-size;
|
||||||
|
|
||||||
|
> svg {
|
||||||
|
color: $text-color-secondary;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-select {
|
||||||
|
margin: 0 $grid-unit-size;
|
||||||
|
width: $grid-unit-size * 25;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.cvat-move-task-label-mapper-item {
|
||||||
|
margin: $grid-unit-size * 2 0;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue