74 lines
No EOL
2.6 KiB
TypeScript
74 lines
No EOL
2.6 KiB
TypeScript
import { observer } from 'mobx-react-lite';
|
||
import KanbanCardCss from './kanban-card.module.css';
|
||
import React from 'react';
|
||
import { ICardStore } from './store';
|
||
import { getStyleObjectFromString } from '../utils/style';
|
||
import * as TimePassedNs from '../misc-components/time-passed';
|
||
import * as TagsNs from '../misc-components/tags';
|
||
import * as IssueDetailsDialogNs from '../misc-components/issue-details-dialog';
|
||
|
||
export type Props = {
|
||
store: ICardStore
|
||
};
|
||
|
||
export type TagProps = {
|
||
style?: string;
|
||
tag: string;
|
||
};
|
||
|
||
export const KanbanCardTag = (props: TagProps): JSX.Element => {
|
||
const inlineStyle = getStyleObjectFromString(props.style || '');
|
||
return (
|
||
<span className={KanbanCardCss.kanbanCardTag} style={inlineStyle}>
|
||
{props.tag}
|
||
</span>
|
||
);
|
||
}
|
||
|
||
/**
|
||
* Какие дальше требования к карточкам?
|
||
*
|
||
* 1. Отобразить как было в статичной доске
|
||
* 2. Переделать отображение с учётом store.params
|
||
*/
|
||
|
||
export const KanbanCard = observer((props: Props) => {
|
||
let tagsSection = <></>;
|
||
const tagsParams = props.store.params.fields.find((field) => {
|
||
return field.component === 'tags';
|
||
});
|
||
console.debug('Tag params:', tagsParams); // DEBUG
|
||
console.debug('Issue:', props.store.issue); // DEBUG
|
||
if (tagsParams && props.store.issue[tagsParams.path]) {
|
||
const tags = props.store.issue[tagsParams.path] as TagProps[];
|
||
console.debug(`Tags:`, tags); // DEBUG
|
||
tagsSection = <TagsNs.Tags params={{tags: tags}}/>
|
||
}
|
||
const timePassedParams: TimePassedNs.Params = {
|
||
fromIssue: {
|
||
issue: props.store.issue,
|
||
keyName: 'timePassedClass'
|
||
}
|
||
}
|
||
const detailsStore = IssueDetailsDialogNs.Store.create({
|
||
issue: props.store.issue,
|
||
visible: false,
|
||
})
|
||
return (
|
||
<div className={KanbanCardCss.kanbanCard} onClick={(e) => {e.stopPropagation(); detailsStore.show();}}>
|
||
<IssueDetailsDialogNs.IssueDetailsDialog store={detailsStore} />
|
||
<div className={KanbanCardCss.kanbanCardTitle}>
|
||
<TimePassedNs.TimePassed params={timePassedParams}/>
|
||
<a href={props.store.issue.url.url}>{props.store.issue.tracker.name} #{props.store.issue.id} - {props.store.issue.subject}</a>
|
||
</div>
|
||
<div>Исп.: {props.store.issue.current_user.name}</div>
|
||
<div>Прио.: {props.store.issue.priority.name}</div>
|
||
<div>Версия: {props.store.issue.fixed_version?.name || ''}</div>
|
||
<div>Прогресс: {props.store.issue.done_ratio}</div>
|
||
<div>Трудозатраты: {props.store.issue.total_spent_hours} / {props.store.issue.total_estimated_hours}</div>
|
||
{tagsSection}
|
||
</div>
|
||
);
|
||
});
|
||
|
||
export default KanbanCard; |