Skip to content

Commit 8139d64

Browse files
mamicomamico
committed
fix: sidebar volto18
1 parent baf3010 commit 8139d64

File tree

3 files changed

+132
-151
lines changed

3 files changed

+132
-151
lines changed

‎src/components/Blocks/DataTableBlock/Edit.jsx

Lines changed: 18 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,9 @@
11
import { ReactTableWidget } from '@eeacms/volto-react-table-widget';
2-
import {
3-
Error,
4-
Form,
5-
Icon,
6-
Toast,
7-
Toolbar,
8-
SidebarPortal,
9-
} from '@plone/volto/components';
10-
import { useEffect, useState, useMemo, useRef } from 'react';
11-
import { FormGroup, FormField, Radio } from 'semantic-ui-react';
12-
import { Checkbox } from 'semantic-ui-react';
2+
import { SidebarPortal } from '@plone/volto/components';
3+
import { useMemo } from 'react';
134
import { useIntl, defineMessages } from 'react-intl';
5+
// import { BlockDataForm } from '@plone/volto/components/manage/Form';
6+
import { InlineForm } from '@plone/volto/components/manage/Form';
147

158
const messages = defineMessages({
169
no_filter: {
@@ -26,6 +19,7 @@ const messages = defineMessages({
2619
defaultMessage: 'Text filter',
2720
},
2821
});
22+
2923
const emptySchema = () => {
3024
return {
3125
properties: {},
@@ -40,22 +34,16 @@ const emptySchema = () => {
4034
};
4135
};
4236

43-
const Edit = ({ block, data, onChangeBlock, selected }) => {
37+
const Edit = (props) => {
38+
const { block, data, onChangeBlock, selected } = props;
4439
const intl = useIntl();
45-
// const form = useRef();
4640
const onChange = (id, props) => {
4741
const { items, schema } = props;
48-
// console.log("change data")
4942
onChangeBlock(block, {
5043
...data,
5144
items: items,
5245
schema: schema || data.schema,
5346
});
54-
// if (schema) {
55-
// debugger;
56-
// console.log(form);
57-
// }
58-
// form.current.forceUpdate();
5947
};
6048

6149
const contentTypeSchema = {
@@ -81,13 +69,6 @@ const Edit = ({ block, data, onChangeBlock, selected }) => {
8169
layouts: null,
8270
};
8371

84-
const onChangeSchema = ({ schema }) => {
85-
onChangeBlock(block, {
86-
...data,
87-
schema: schema,
88-
});
89-
};
90-
9172
const schema = useMemo(() => {
9273
if (data?.schema) {
9374
return data.schema;
@@ -96,18 +77,6 @@ const Edit = ({ block, data, onChangeBlock, selected }) => {
9677
}
9778
}, [data?.schema]);
9879

99-
// const fields = data?.schema?.fieldsets?.[0]?.fields || [];
100-
101-
// const onChangeSortable = (value, checked) => {
102-
// console.log(value, checked);
103-
// const sortable = data?.sortable || [];
104-
// onChangeBlock(block, {
105-
// ...data,
106-
// sortable: checked ? [...sortable, value]: sortable.filter((f) => f !== value),
107-
// });
108-
// console.log(checked ? [...sortable, value]: sortable.filter((f) => f !== value));
109-
// };
110-
11180
const onChangeFilterable = (field, value) => {
11281
const filterable = data?.filterable || {};
11382
onChangeBlock(block, {
@@ -123,7 +92,7 @@ const Edit = ({ block, data, onChangeBlock, selected }) => {
12392
schema={schema}
12493
csvexport={true}
12594
csvimport={true}
126-
undomodifications={true}
95+
undomodifications={false}
12796
value={data?.items || []}
12897
onChange={(id, items, schema) => onChange(id, { items, schema })}
12998
columnActions={(column) => (
@@ -140,21 +109,24 @@ const Edit = ({ block, data, onChangeBlock, selected }) => {
140109
{intl.formatMessage(messages.text_filter)}
141110
</option>
142111
</select>
143-
{/* <pre>{JSON.stringify(column, null, 2)}</pre> */}
144112
</div>
145113
)}
146114
/>
147-
148115
<SidebarPortal selected={selected}>
149-
<h3>Schema dati</h3>
150-
<Form
116+
<InlineForm
151117
schema={contentTypeSchema}
152118
formData={{ schema: schema }}
153-
onChangeFormData={onChangeSchema}
119+
onChangeBlock={onChangeBlock}
120+
onChangeField={(id, value, itemInfo) => {
121+
console.log(id, value, itemInfo);
122+
onChangeBlock(block, {
123+
...data,
124+
[id]: value,
125+
});
126+
}}
127+
applySchemaEnhancers={false}
154128
hideActions
155129
/>
156-
{/* <pre>{JSON.stringify(data?.schema, null, 2)}</pre> */}
157-
{/* <pre>{JSON.stringify(data?.sortable, null, 2)}</pre> */}
158130
</SidebarPortal>
159131
</>
160132
);

‎src/components/Blocks/DataTableBlock/View.jsx

Lines changed: 104 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ const messages = defineMessages({
2828
const View = ({ data, id, path, properties }) => {
2929
// console.log(props);
3030
const schema = data?.schema;
31-
const sortable_fields = data?.sortable || [];
31+
// const sortable_fields = data?.sortable || [];
3232
const filterable_fields = data?.filterable || [];
3333
const intl = useIntl();
3434
const includesFilter = (rows, ids, filterValue) => {
@@ -166,108 +166,114 @@ const View = ({ data, id, path, properties }) => {
166166
);
167167

168168
return (
169-
<div className="cms-ui" style={{ marginTop: '1em' }}>
170-
<Table celled {...getTableProps()}>
171-
<Table.Header>
172-
{headerGroups.map((headerGroup, key) => (
173-
<Table.Row key={key} {...headerGroup.getHeaderGroupProps()}>
174-
{headerGroup.headers.map((column) => (
175-
<Table.HeaderCell
176-
{...column.getHeaderProps(column.getSortByToggleProps())}
177-
className="wide one"
178-
style={{ maxWidth: '40px', verticalAlign: 'top' }}
179-
>
180-
{column.render('Header')}
181-
{column.defaultCanSort && (
182-
<span class="sort">
183-
{column.isSorted ? (
184-
column.isSortedDesc ? (
185-
<Icon name={sortUp} />
169+
<div className="block dataTableBlock">
170+
<div className="cms-ui" style={{ marginTop: '1em' }}>
171+
<Table celled {...getTableProps()}>
172+
<Table.Header>
173+
{headerGroups.map((headerGroup, key) => (
174+
<Table.Row key={key} {...headerGroup.getHeaderGroupProps()}>
175+
{headerGroup.headers.map((column) => (
176+
<Table.HeaderCell
177+
{...column.getHeaderProps(column.getSortByToggleProps())}
178+
className="wide one"
179+
style={{ maxWidth: '40px', verticalAlign: 'top' }}
180+
>
181+
{column.render('Header')}
182+
{column.defaultCanSort && (
183+
<span class="sort">
184+
{column.isSorted ? (
185+
column.isSortedDesc ? (
186+
<Icon name={sortUp} />
187+
) : (
188+
<Icon name={sortDown} />
189+
)
186190
) : (
187-
<Icon name={sortDown} />
188-
)
189-
) : (
190-
<Icon name={sortDown} color="#D3D3D3" />
191-
)}
192-
</span>
193-
)}
194-
<div>{column.canFilter ? column.render('Filter') : null}</div>
195-
</Table.HeaderCell>
196-
))}
197-
</Table.Row>
198-
))}
199-
</Table.Header>
200-
<Table.Body {...getTableBodyProps()}>
201-
{page.map((row, i) => {
202-
prepareRow(row);
203-
return (
204-
<Table.Row {...row.getRowProps()}>
205-
{row.cells.map((cell) => {
206-
return (
207-
<Table.Cell {...cell.getCellProps()}>
208-
{cell.render('Cell')}
209-
</Table.Cell>
210-
);
211-
})}
191+
<Icon name={sortDown} color="#D3D3D3" />
192+
)}
193+
</span>
194+
)}
195+
<div>
196+
{column.canFilter ? column.render('Filter') : null}
197+
</div>
198+
</Table.HeaderCell>
199+
))}
212200
</Table.Row>
213-
);
214-
})}
215-
</Table.Body>
216-
</Table>
201+
))}
202+
</Table.Header>
203+
<Table.Body {...getTableBodyProps()}>
204+
{page.map((row, i) => {
205+
prepareRow(row);
206+
return (
207+
<Table.Row {...row.getRowProps()}>
208+
{row.cells.map((cell) => {
209+
return (
210+
<Table.Cell {...cell.getCellProps()}>
211+
{cell.render('Cell')}
212+
</Table.Cell>
213+
);
214+
})}
215+
</Table.Row>
216+
);
217+
})}
218+
</Table.Body>
219+
</Table>
217220

218-
{data?.items && (
219-
<div className="pagination-wrapper react-table-pagination cms-ui">
220-
{data.items.length > 10 && (
221-
<>
222-
<Pagination
223-
activePage={pageIndex + 1}
224-
totalPages={pageCount}
225-
onPageChange={(e, { activePage }) => {
226-
gotoPage(activePage - 1);
227-
}}
228-
firstItem={null}
229-
lastItem={null}
230-
prevItem={{
231-
content: <Icon name={paginationLeftSVG} size="18px" />,
232-
icon: true,
233-
'aria-disabled': pageIndex + 1 === 1,
234-
className: pageIndex + 1 === 1 ? 'disabled' : null,
235-
}}
236-
nextItem={{
237-
content: <Icon name={paginationRightSVG} size="18px" />,
238-
icon: true,
239-
'aria-disabled': pageIndex + 1 === pageCount,
240-
className: pageIndex + 1 === pageCount ? 'disabled' : null,
241-
}}
242-
></Pagination>
243-
<select
244-
style={{ maxWidth: '7rem' }}
245-
value={pageSize}
246-
onChange={(e) => {
247-
setPageSize(Number(e.target.value));
248-
}}
221+
{data?.items && (
222+
<div className="pagination-wrapper react-table-pagination cms-ui">
223+
{data.items.length > 10 && (
224+
<>
225+
<Pagination
226+
activePage={pageIndex + 1}
227+
totalPages={pageCount}
228+
onPageChange={(e, { activePage }) => {
229+
gotoPage(activePage - 1);
230+
}}
231+
firstItem={null}
232+
lastItem={null}
233+
prevItem={{
234+
content: <Icon name={paginationLeftSVG} size="18px" />,
235+
icon: true,
236+
'aria-disabled': pageIndex + 1 === 1,
237+
className: pageIndex + 1 === 1 ? 'disabled' : null,
238+
}}
239+
nextItem={{
240+
content: <Icon name={paginationRightSVG} size="18px" />,
241+
icon: true,
242+
'aria-disabled': pageIndex + 1 === pageCount,
243+
className: pageIndex + 1 === pageCount ? 'disabled' : null,
244+
}}
245+
></Pagination>
246+
<select
247+
style={{ maxWidth: '7rem' }}
248+
value={pageSize}
249+
onChange={(e) => {
250+
setPageSize(Number(e.target.value));
251+
}}
252+
>
253+
{[10, 25, 50, 100]
254+
.filter((v) => data.items.length * 2 > v)
255+
.map((pageSize) => (
256+
<option key={pageSize} value={pageSize}>
257+
{intl.formatMessage(messages.page_size, { pageSize })}
258+
</option>
259+
))}
260+
</select>
261+
</>
262+
)}
263+
<div className="actions">
264+
<CSVLink
265+
className="ui button"
266+
filename={schema.title ? `${schema.title}.csv` : 'export.csv'}
267+
separator=";"
268+
headers={csv_columns}
269+
data={data?.items || []}
249270
>
250-
{[10, 25, 50, 100].map((pageSize) => (
251-
<option key={pageSize} value={pageSize}>
252-
{intl.formatMessage(messages.page_size, { pageSize })}
253-
</option>
254-
))}
255-
</select>
256-
</>
257-
)}
258-
<div className="actions">
259-
<CSVLink
260-
className="ui button"
261-
filename={schema.title ? `${schema.title}.csv` : 'export.csv'}
262-
separator=";"
263-
headers={csv_columns}
264-
data={data?.items || []}
265-
>
266-
{intl.formatMessage(messages.export_csv_file)}
267-
</CSVLink>
271+
{intl.formatMessage(messages.export_csv_file)}
272+
</CSVLink>
273+
</div>
268274
</div>
269-
</div>
270-
)}
275+
)}
276+
</div>
271277
</div>
272278
);
273279
};

‎src/index.js

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,38 @@
11
import ReactTableWidget from './components/Widgets/ReactTableWidget';
22
export { ReactTableWidget };
3-
import {DataTableBlockView, DataTableBlockEdit} from './components/Blocks';
3+
import { DataTableBlockView, DataTableBlockEdit } from './components/Blocks';
44
import { defineMessages } from 'react-intl';
55

66
import IconSVG from '@plone/volto/icons/registry-resources.svg';
77

8+
import ImageSettingsSchema from '@plone/volto/components/manage/Blocks/Image/LayoutSchema';
9+
import EditImageBlock from '@plone/volto/components/manage/Blocks/Image/Edit';
10+
811
defineMessages({
9-
'DataTableBlock': {
12+
DataTableBlock: {
1013
id: 'DataTableBlock',
1114
defaultMessage: 'Data Table',
1215
},
1316
});
1417

15-
export const dataTableBlock = {
18+
const dataTableBlock = {
1619
id: 'dataTableBlock',
1720
title: 'Data Table',
1821
icon: IconSVG,
1922
group: 'common',
2023
view: DataTableBlockView,
2124
edit: DataTableBlockEdit,
25+
// edit: EdiImageBlock,
26+
// schema: ImageSettingsSchema,
27+
2228
restricted: false,
2329
mostUsed: false,
2430
security: {
2531
addPermission: [],
2632
view: [],
2733
},
28-
// templates: {
29-
// default: { label: 'Default template', template: DefaultRSSTemplate },
30-
// },
3134
sidebarTab: 1,
32-
}
35+
};
3336

3437
const applyConfig = (config) => {
3538
config.blocks.blocksConfig = {

0 commit comments

Comments
 (0)