105 lines
2.7 KiB
TypeScript
105 lines
2.7 KiB
TypeScript
import { observer } from 'mobx-react-lite';
|
|
import React from 'react';
|
|
import * as DashboardStoreNs from './dashboard-store';
|
|
import * as WidgetFactoryNs from './widgets/widget-factory';
|
|
|
|
export type Props = {
|
|
store: DashboardStoreNs.IWidget;
|
|
};
|
|
|
|
/**
|
|
* Пример данных передаваемых в виджет:
|
|
*
|
|
* {
|
|
* "type": "kanban_by_tree",
|
|
* "id": "first",
|
|
* "title": "Первый виджет",
|
|
* "dataLoaderParams": {
|
|
* "rootIssueId": 2,
|
|
* "groups": {
|
|
* "fromIssues": [
|
|
* {
|
|
* "issueId": 3,
|
|
* "name": "Тест"
|
|
* }
|
|
* ],
|
|
* "fromIssuesIncluded": false,
|
|
* "showOthers": true
|
|
* },
|
|
* "statuses": [
|
|
* "New",
|
|
* "Re-opened",
|
|
* "In Progress",
|
|
* "Code Review",
|
|
* "Resolved",
|
|
* "Testing",
|
|
* "Feedback",
|
|
* "Wait Release",
|
|
* "Pending",
|
|
* "Closed",
|
|
* "Rejected"
|
|
* ],
|
|
* "tags": {
|
|
* "tagsKeyName": "tags",
|
|
* "styledTagsKeyName": "styledTags",
|
|
* "styles": {
|
|
* "supertag": "background-color: rgb(128, 0, 0); color: rgb(255, 255, 255);"
|
|
* },
|
|
* "defaultStyle": "background-color: rgb(128, 128, 128);"
|
|
* },
|
|
* "priorities": [
|
|
* {
|
|
* "rules": [
|
|
* {
|
|
* "priorityName": "P1",
|
|
* "style": "background-color: #DB2228;"
|
|
* },
|
|
* {
|
|
* "priorityName": "P2",
|
|
* "style": "background-color: #FA5E26;"
|
|
* },
|
|
* {
|
|
* "priorityName": "P3",
|
|
* "style": "background-color: #FDAF19;"
|
|
* },
|
|
* {
|
|
* "priorityName": "P4",
|
|
* "style": "background-color: #31A8FF;",
|
|
* "default": true
|
|
* },
|
|
* {
|
|
* "priorityName": "P5",
|
|
* "style": "background-color: #FFFFFF; border: 0.5px solid #393838; color: #202020;"
|
|
* }
|
|
* ],
|
|
* "targetKey": "priorityStyle"
|
|
* }
|
|
* ]
|
|
* }
|
|
* }
|
|
*/
|
|
|
|
function onWidgetVisibleToggleClick(store: DashboardStoreNs.IWidget): void {
|
|
if (!store.loaded && store.dashboardId) {
|
|
DashboardStoreNs.WidgetLoadData(store);
|
|
}
|
|
store.toggle();
|
|
}
|
|
|
|
export const Widget = observer((props: Props): JSX.Element => {
|
|
const display = props.store.visible ? 'block' : 'none';
|
|
|
|
return (
|
|
<div>
|
|
<div>
|
|
<button onClick={() => onWidgetVisibleToggleClick(props.store)}>
|
|
Show/hide
|
|
</button>
|
|
<span>Title - {props.store.title}</span>
|
|
</div>
|
|
<div style={{ display: display }}>
|
|
<WidgetFactoryNs.WidgetFactory store={props.store} />
|
|
</div>
|
|
</div>
|
|
);
|
|
});
|