70 lines
No EOL
2.4 KiB
TypeScript
70 lines
No EOL
2.4 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';
|
||
|
||
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 timePassedColorClassName = '';
|
||
const timePassedIssueValue: string = props.store.issue.timePassedClass;
|
||
if (timePassedIssueValue && KanbanCardCss[timePassedIssueValue]) {
|
||
timePassedColorClassName = KanbanCardCss[timePassedIssueValue];
|
||
}
|
||
const timePassedClassName = `${KanbanCardCss.timepassedDot} ${timePassedColorClassName}`;
|
||
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 = (
|
||
<div>
|
||
{tagsParams.label || 'Tags'}: {tags.map(tag => <KanbanCardTag tag={tag.tag} style={tag.style} />)}
|
||
</div>
|
||
);
|
||
}
|
||
return (
|
||
<div className={KanbanCardCss.kanbanCard}>
|
||
<div className={KanbanCardCss.kanbanCardTitle}>
|
||
<span className={timePassedClassName}></span>
|
||
<a href={props.store.issue.url.url}>{props.store.issue.tracker.name} #{props.store.issue.id} - {props.store.issue.subject}</a>
|
||
<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>
|
||
</div>
|
||
);
|
||
});
|
||
|
||
export default KanbanCard; |