Skip to content

Commit 6fb237d

Browse files
johannesloetzschjohannesloetzsch
committed
prepared editors to use uiSchema
1 parent f988f8b commit 6fb237d

9 files changed

Lines changed: 71 additions & 55 deletions

File tree

‎packages/edit-table/features/table/Table.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import * as _ from 'lodash'
77
import { useAppSelector, useAppDispatch } from 'state';
88
import { selectData, setCellData, selectEditorState, setRowSelection, Row } from 'state';
99

10-
import { selectJsonSchema } from 'project-state';
10+
import { selectJsonSchema, selectUiSchema } from 'project-state';
1111
import { schema2columns } from './schema2columns';
1212

1313
export const Table = () => {
@@ -18,9 +18,10 @@ export const Table = () => {
1818
const dispatch = useAppDispatch();
1919

2020
const jsonSchema = useAppSelector(selectJsonSchema);
21+
const uiSchema = useAppSelector(selectUiSchema);
2122
const columns = useMemo(
22-
() => jsonSchema && schema2columns(jsonSchema),
23-
[jsonSchema],
23+
() => jsonSchema && schema2columns(jsonSchema, uiSchema),
24+
[jsonSchema, uiSchema],
2425
);
2526

2627
const handleSaveCell = (cell: MRT_Cell<Row>, value: any) => {

‎packages/edit-table/features/table/schema2columns.ts‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { JsonSchema } from '@jsonforms/core'
1+
import { JsonSchema, UISchemaElement } from '@jsonforms/core'
22

33
function upperCaseWord(s: string) {
44
return s.slice(0,1).toUpperCase() + s.slice(1)
@@ -20,12 +20,11 @@ type Column = {
2020
columns?: Column[]
2121
}
2222

23-
function property2column([key, schema]: [key: string, schema: JsonSchema],
24-
prefix: string): Column {
23+
function property2column({key, subJsonSchema, prefix, uiSchema}: {key: string, subJsonSchema: JsonSchema, prefix: string, uiSchema?: UISchemaElement}): Column {
2524
const accessorKey = prefix == '' ? key : prefix + '.' + key;
2625

2726
const muiTableBodyCellEditTextFieldProps = {
28-
type: schema.type == "string" && schema.format == "date-time" ? "datetime-local" : undefined
27+
type: subJsonSchema.type == "string" && subJsonSchema.format == "date-time" ? "datetime-local" : undefined
2928
}
3029

3130
const common = {
@@ -34,23 +33,24 @@ function property2column([key, schema]: [key: string, schema: JsonSchema],
3433
...notOnlyUndefined({muiTableBodyCellEditTextFieldProps})
3534
}
3635

37-
switch(schema.type) {
36+
switch(subJsonSchema.type) {
3837
case "object":
3938
return {
4039
...common,
41-
columns: Object.entries(schema.properties||{})
42-
.map(([key, property]) => property2column([key, property], accessorKey))
40+
columns: Object.entries(subJsonSchema.properties||{})
41+
.map(([key, property]) => property2column({key, subJsonSchema: property, prefix: accessorKey, uiSchema}))
4342
}
4443
default:
4544
return common
4645
}
4746
}
4847

49-
export function schema2columns(schema: JsonSchema, prefix='') {
48+
export function schema2columns(schema: JsonSchema, uiSchema?: UISchemaElement, prefix='') {
49+
console.log({schema, uiSchema})
5050
switch(schema.type) {
5151
case "object":
5252
return Object.entries(schema.properties||{})
53-
.map(KeyAndProperty => property2column(KeyAndProperty, prefix))
53+
.map(([key, subJsonSchema]) => property2column({key, subJsonSchema, prefix, uiSchema}))
5454
default:
5555
console.error('Schema is expected to be of type object!', schema)
5656
return

packages/edit-timeline/features/timeline/TimelineExpl.tsx renamed to packages/edit-timeline/features/timeline/Timeline.tsx

Lines changed: 39 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
import { useCallback, useMemo } from "react";
2+
import { selectJsonSchema, selectUiSchema } from 'project-state';
3+
import { schema2mapping } from './schema2mapping';
24

35
// @ts-ignore
46
// import Timeline from "react-visjs-timeline";
@@ -16,10 +18,7 @@ import {
1618
import { useAppSelector, useAppDispatch } from "state";
1719
import { AppDispatch } from "state";
1820
import { selectData, setCellData, setRowSelection, Row } from "state";
19-
20-
import mapping from "./example-mapping.json";
2121
import * as _ from "lodash";
22-
2322
import { Moment } from 'moment';
2423

2524
// TODO: - Zeitspanne interaktiv aendern, rechtsklick evtl, event loeschen, neues Event anlegen, Name im Timetable editieren, sortieren in Timeline nach typeVar (groupings),
@@ -31,18 +30,6 @@ interface Item extends TimelineItem {
3130
_rowIdx: number;
3231
}
3332

34-
/** Calculate a timeline event from a row of table data **/
35-
function eventFromRow(row: Row, index: number) {
36-
return {
37-
id: row.id,
38-
content: _.get(row, mapping.content),
39-
start: _.get(row, mapping.start),
40-
end: _.get(row, mapping.end),
41-
_rowIdx:
42-
index /** by keeping the index, during updates we save an O(n) lookup that would be required using the id **/,
43-
};
44-
}
45-
4633
const defaultOptions: TimelineOptions = {
4734
stack: true,
4835
horizontalScroll: true,
@@ -54,25 +41,6 @@ const defaultOptions: TimelineOptions = {
5441
timeAxis: { scale: "month", step: 1 },
5542
};
5643

57-
/** Creates an onMove callback to update table data when timeline item was moved.
58-
* The time is stored in format of html-input of type datetime-local
59-
**/
60-
function handleMove(dispatch: AppDispatch, item: Item, callback: any) {
61-
console.log(item);
62-
/** TODO we could use a reducer, that is setting both dates in one dispatch **/
63-
dispatch(
64-
setCellData([
65-
item._rowIdx,
66-
mapping.start,
67-
item.start?.toISOString().slice(0, 19),
68-
])
69-
);
70-
dispatch(
71-
setCellData([item._rowIdx, mapping.end, item.end?.toISOString().slice(0, 19)])
72-
);
73-
callback(item);
74-
}
75-
7644
function handleSelect(
7745
dispatch: AppDispatch,
7846
selectionArgs: { items: number[] },
@@ -86,10 +54,29 @@ function handleSelect(
8654
dispatch(setRowSelection(selectedRows));
8755
}
8856

89-
export function TimelineExpl() {
57+
export function Timeline() {
9058
const tableData = useAppSelector(selectData);
9159
const dispatch = useAppDispatch();
9260

61+
const jsonSchema = useAppSelector(selectJsonSchema);
62+
const uiSchema = useAppSelector(selectUiSchema);
63+
64+
const mapping = useMemo(
65+
() => jsonSchema && schema2mapping(jsonSchema, uiSchema),
66+
[jsonSchema, uiSchema],
67+
);
68+
69+
/** Calculate a timeline event from a row of table data **/
70+
const eventFromRow = useCallback( (row: Row, index: number) => (
71+
{
72+
id: row.id,
73+
content: _.get(row, mapping.content),
74+
start: _.get(row, mapping.start),
75+
end: _.get(row, mapping.end),
76+
_rowIdx: index /** by keeping the index, during updates we save an O(n) lookup that would be required using the id **/,
77+
}
78+
), [mapping])
79+
9380
const items = useMemo(
9481
() =>
9582
tableData
@@ -99,6 +86,23 @@ export function TimelineExpl() {
9986
) /** entries with missing start are not valid **/,
10087
[tableData]
10188
);
89+
console.log({tableData, mapping, items})
90+
91+
const handleMove = useCallback( (dispatch: AppDispatch, item: Item, callback: any) => {
92+
/** TODO we could use a reducer, that is setting both dates in one dispatch **/
93+
dispatch(
94+
setCellData([
95+
item._rowIdx,
96+
mapping.start,
97+
item.start?.toISOString().slice(0, 19),
98+
])
99+
);
100+
dispatch(
101+
setCellData([item._rowIdx, mapping.end, item.end?.toISOString().slice(0, 19)])
102+
);
103+
callback(item);
104+
} ,[mapping])
105+
102106

103107
const onMove: TimelineOptionsItemCallbackFunction = useCallback(
104108
(item: TimelineItem, callback: any) => handleMove(dispatch, item as Item, callback),

‎packages/edit-timeline/features/timeline/example-mapping.json‎

Lines changed: 0 additions & 5 deletions
This file was deleted.

‎packages/edit-timeline/features/timeline/schema2mapping.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { JsonSchema, UISchemaElement } from '@jsonforms/core'
2+
3+
export function schema2mapping(json: JsonSchema, uiSchema?: UISchemaElement) {
4+
// TODO
5+
const mapping = {
6+
"content": "Mehrzeiliges Textfeld",
7+
"start": "Datumsfeld",
8+
"end": "Datumszeitfeld"
9+
}
10+
11+
return mapping
12+
}

‎packages/edit-timeline/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
export * from "./features/timeline/TimelineExpl";
1+
export * from "./features/timeline/Timeline";

‎packages/edit-timeline/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
"@types/react": "^18.2.21",
2020
"lodash": "^4.17.21",
2121
"moment": "^2.29.4",
22+
"project-state": "workspace:*",
2223
"state": "workspace:*",
2324
"vis-data": "^7.1.6",
2425
"vis-timeline": "^7.7.2",

‎packages/example/features/app/Tabs.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { TimelineExpl } from 'edit-timeline';
1+
import { Timeline } from 'edit-timeline';
22

33
import PlaceIcon from '@mui/icons-material/Place';
44
import CalendarMonthIcon from '@mui/icons-material/CalendarMonth';
@@ -13,7 +13,7 @@ const notYetImplemented = <p>Not Yet Implemented</p>;
1313
export const tabs = [
1414
{icon: <PlaceIcon/>, label: "Map", content: notYetImplemented},
1515
{icon: <CalendarMonthIcon/>, label: "Calendar", content: notYetImplemented},
16-
{icon: <AccessTimeIcon/>, label: "Timeline", content: <TimelineExpl/>},
16+
{icon: <AccessTimeIcon/>, label: "Timeline", content: <Timeline/>},
1717
{icon: <ViewWeekIcon/>, label: "Kanban", content: notYetImplemented},
1818
{icon: <ViewTimelineIcon/>, label: "Gantt", content: notYetImplemented},
1919
{icon: <HubIcon/>, label: "Network", content: notYetImplemented},

‎pnpm-lock.yaml‎

Lines changed: 3 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)