99 lines
No EOL
2.7 KiB
TypeScript
99 lines
No EOL
2.7 KiB
TypeScript
import React, { useEffect } from 'react';
|
||
import { RedmineTypes } from '../redmine-types';
|
||
import { observer } from 'mobx-react-lite';
|
||
import { Instance, types } from 'mobx-state-tree';
|
||
import * as IssueHrefNs from '../misc-components/issue-href';
|
||
import Css from './issue-details-dialog.module.css';
|
||
|
||
export const Store = types.model({
|
||
visible: types.boolean,
|
||
issue: types.frozen<RedmineTypes.ExtendedIssue>()
|
||
}).actions((self) => {
|
||
return {
|
||
hide: () => {
|
||
console.debug(`Issue details dialog hide: issue_id=${self.issue.id}`); // DEBUG
|
||
self.visible = false;
|
||
},
|
||
show: () => {
|
||
console.debug(`Issue details dialog show: issue_id=${self.issue.id}`); // DEBUG
|
||
self.visible = true;
|
||
}
|
||
};
|
||
}).views((self) => {
|
||
return {
|
||
get displayStyle(): React.CSSProperties {
|
||
return {display: self.visible ? 'block' : 'none'};
|
||
}
|
||
};
|
||
});
|
||
|
||
export type Props = {
|
||
store: Instance<typeof Store>
|
||
};
|
||
|
||
export const IssueDetailsDialog = observer((props: Props): JSX.Element => {
|
||
// DEBUG: begin
|
||
useEffect(() => {
|
||
console.debug(`Issue detailts dialog: issue_id=${props.store.issue.id}; subject=${props.store.issue?.subject || '-'}; description=${props.store.issue.description}; visible=${props.store.visible}`);
|
||
});
|
||
// DEBUG: end
|
||
return (
|
||
<div className={Css.modal} style={props.store.displayStyle}>
|
||
<div className={Css.modalContent}>
|
||
<h1>
|
||
<button onClick={(e) => {e.stopPropagation(); props.store.hide();}}>close</button>
|
||
<IssueHrefNs.IssueHref
|
||
id={props.store.issue?.id || -1}
|
||
subject={props.store.issue?.subject || ''}
|
||
tracker={props.store.issue?.tracker?.name || ''}
|
||
url={props.store.issue?.url?.url || ''}
|
||
/>
|
||
</h1>
|
||
<hr/>
|
||
<div>
|
||
<h2>Описание:</h2>
|
||
<pre>
|
||
{props.store.issue.description}
|
||
</pre>
|
||
</div>
|
||
<hr/>
|
||
<div>
|
||
<h2>Комментарии:</h2>
|
||
<Comments details={props.store.issue.journals || []} issue={props.store.issue}/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
});
|
||
|
||
export const Comments = (props: {details?: RedmineTypes.Journal[], issue: RedmineTypes.ExtendedIssue}): JSX.Element => {
|
||
const comments = props.details?.filter((detail) => {
|
||
return Boolean(detail.notes);
|
||
});
|
||
if (!comments) {
|
||
return <>No comments</>
|
||
}
|
||
console.debug(`Comments: details=${JSON.stringify(props.details)}`); // DEBUG
|
||
const list = comments.map((detail) => {
|
||
const key = `issueid_${props.issue.id}_commentid_${detail.id}`;
|
||
return <Comment data={detail} key={key}/>
|
||
});
|
||
return (
|
||
<>{list}</>
|
||
);
|
||
}
|
||
|
||
export const Comment = (props: {data: RedmineTypes.Journal}): JSX.Element => {
|
||
console.debug(`Comment: data=${JSON.stringify(props.data)}`); // DEBUG
|
||
return (
|
||
<>
|
||
<h3>{props.data.user.name}:</h3>
|
||
<div>
|
||
<pre>
|
||
{props.data.notes || '-'}
|
||
</pre>
|
||
</div>
|
||
<hr/>
|
||
</>
|
||
);
|
||
} |