@headless-adminapp/fluent 0.0.17-alpha.41 → 0.0.17-alpha.43
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/DataGrid/GridListContainer.js +1 -1
- package/DataGrid/GridTableContainer.js +1 -1
- package/DataGrid/TableCell/TableCellChoice.js +3 -10
- package/PageBoard/BoardColumn.d.ts +5 -0
- package/PageBoard/BoardColumn.js +9 -0
- package/PageBoard/BoardColumnCard.d.ts +12 -0
- package/PageBoard/BoardColumnCard.js +28 -0
- package/PageBoard/BoardColumnUI.d.ts +2 -0
- package/PageBoard/BoardColumnUI.js +81 -0
- package/PageBoard/BoardingColumnCardLoading.d.ts +1 -0
- package/PageBoard/BoardingColumnCardLoading.js +21 -0
- package/PageBoard/Header.d.ts +7 -0
- package/PageBoard/Header.js +40 -0
- package/PageBoard/PageBoard.d.ts +7 -0
- package/PageBoard/PageBoard.js +47 -0
- package/PageBoard/index.d.ts +1 -0
- package/PageBoard/index.js +5 -0
- package/PageEntityForm/RelatedViewSelector.d.ts +0 -2
- package/PageEntityForm/RelatedViewSelector.js +33 -5
- package/package.json +2 -2
|
@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.GridListContainer = void 0;
|
|
4
4
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
5
|
const react_components_1 = require("@fluentui/react-components");
|
|
6
|
+
const ScrollbarWithMoreDataRequest_1 = require("@headless-adminapp/app/components/ScrollbarWithMoreDataRequest");
|
|
6
7
|
const datagrid_1 = require("@headless-adminapp/app/datagrid");
|
|
7
8
|
const hooks_1 = require("@headless-adminapp/app/datagrid/hooks");
|
|
8
9
|
const locale_1 = require("@headless-adminapp/app/locale");
|
|
@@ -14,7 +15,6 @@ const react_1 = require("react");
|
|
|
14
15
|
const uuid_1 = require("uuid");
|
|
15
16
|
const RecordCard_1 = require("../PageEntityForm/RecordCard");
|
|
16
17
|
const RecordCardLoading_1 = require("../PageEntityForm/RecordCardLoading");
|
|
17
|
-
const ScrollbarWithMoreDataRequest_1 = require("./ScrollbarWithMoreDataRequest");
|
|
18
18
|
const useStyles = (0, react_components_1.makeStyles)({
|
|
19
19
|
root: {
|
|
20
20
|
'&:hover': {
|
|
@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.GridTableContainer = void 0;
|
|
4
4
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
5
|
const react_components_1 = require("@fluentui/react-components");
|
|
6
|
+
const ScrollbarWithMoreDataRequest_1 = require("@headless-adminapp/app/components/ScrollbarWithMoreDataRequest");
|
|
6
7
|
const datagrid_1 = require("@headless-adminapp/app/datagrid");
|
|
7
8
|
const hooks_1 = require("@headless-adminapp/app/datagrid/hooks");
|
|
8
9
|
const locale_1 = require("@headless-adminapp/app/locale");
|
|
@@ -15,7 +16,6 @@ const react_virtual_1 = require("@tanstack/react-virtual");
|
|
|
15
16
|
const react_1 = require("react");
|
|
16
17
|
const uuid_1 = require("uuid");
|
|
17
18
|
const PageEntityViewStringContext_1 = require("../PageEntityView/PageEntityViewStringContext");
|
|
18
|
-
const ScrollbarWithMoreDataRequest_1 = require("./ScrollbarWithMoreDataRequest");
|
|
19
19
|
const useTableColumns_1 = require("./useTableColumns");
|
|
20
20
|
const utils_1 = require("./utils");
|
|
21
21
|
const useStyles = (0, react_components_1.makeStyles)({
|
|
@@ -3,16 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.TableCellChoice = TableCellChoice;
|
|
4
4
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
5
|
const react_components_1 = require("@fluentui/react-components");
|
|
6
|
+
const color_1 = require("@headless-adminapp/app/utils/color");
|
|
6
7
|
const react_1 = require("react");
|
|
7
8
|
const TableCellBase_1 = require("./TableCellBase");
|
|
8
|
-
function isColorDark(color) {
|
|
9
|
-
const rgb = parseInt(color, 16);
|
|
10
|
-
const r = (rgb >> 16) & 0xff;
|
|
11
|
-
const g = (rgb >> 8) & 0xff;
|
|
12
|
-
const b = (rgb >> 0) & 0xff;
|
|
13
|
-
const luma = 0.2126 * r + 0.7152 * g + 0.0722 * b;
|
|
14
|
-
return luma < 128;
|
|
15
|
-
}
|
|
16
9
|
function TableCellChoice(props) {
|
|
17
10
|
const bgColor = (0, react_1.useMemo)(() => {
|
|
18
11
|
var _a;
|
|
@@ -20,12 +13,12 @@ function TableCellChoice(props) {
|
|
|
20
13
|
return;
|
|
21
14
|
}
|
|
22
15
|
return (_a = props.attribute.options.find((option) => option.value === props.value)) === null || _a === void 0 ? void 0 : _a.color;
|
|
23
|
-
}, [props.
|
|
16
|
+
}, [props.attribute.options, props.value]);
|
|
24
17
|
const color = (0, react_1.useMemo)(() => {
|
|
25
18
|
if (!bgColor) {
|
|
26
19
|
return;
|
|
27
20
|
}
|
|
28
|
-
return isColorDark(bgColor) ? '#FFFFFF' : '#000000';
|
|
21
|
+
return (0, color_1.isColorDark)(bgColor) ? '#FFFFFF' : '#000000';
|
|
29
22
|
}, [bgColor]);
|
|
30
23
|
return ((0, jsx_runtime_1.jsx)(TableCellBase_1.TableCellBase, { style: {
|
|
31
24
|
textOverflow: 'ellipsis',
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.BoardColumn = BoardColumn;
|
|
4
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
+
const BoardColumnProvider_1 = require("@headless-adminapp/app/board/BoardColumnProvider");
|
|
6
|
+
const BoardColumnUI_1 = require("./BoardColumnUI");
|
|
7
|
+
function BoardColumn(props) {
|
|
8
|
+
return ((0, jsx_runtime_1.jsx)(BoardColumnProvider_1.BoardColumnProvider, { config: props.config, children: (0, jsx_runtime_1.jsx)(BoardColumnUI_1.BoardColumnUI, {}) }));
|
|
9
|
+
}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { BoardColumnCardPreviewFC } from '@headless-adminapp/app/board/types';
|
|
2
|
+
import { Schema } from '@headless-adminapp/core/schema';
|
|
3
|
+
interface BoardColumnCardProps {
|
|
4
|
+
record: Record<string, unknown>;
|
|
5
|
+
index: number;
|
|
6
|
+
canDrag: boolean;
|
|
7
|
+
columnId: string;
|
|
8
|
+
PreviewComponent: BoardColumnCardPreviewFC;
|
|
9
|
+
schema: Schema;
|
|
10
|
+
}
|
|
11
|
+
export declare function BoardColumnCard({ record, canDrag, columnId, PreviewComponent, schema, }: BoardColumnCardProps): import("react/jsx-runtime").JSX.Element;
|
|
12
|
+
export {};
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.BoardColumnCard = BoardColumnCard;
|
|
4
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
+
const react_components_1 = require("@fluentui/react-components");
|
|
6
|
+
const react_1 = require("react");
|
|
7
|
+
const react_dnd_1 = require("react-dnd");
|
|
8
|
+
function BoardColumnCard({ record, canDrag, columnId, PreviewComponent, schema, }) {
|
|
9
|
+
const ref = (0, react_1.useRef)(null);
|
|
10
|
+
const [{ isDragging }, drag] = (0, react_dnd_1.useDrag)({
|
|
11
|
+
type: columnId,
|
|
12
|
+
canDrag,
|
|
13
|
+
item: () => {
|
|
14
|
+
return { id: record[schema.idAttribute], columnId, record };
|
|
15
|
+
},
|
|
16
|
+
collect: (monitor) => ({
|
|
17
|
+
isDragging: monitor.isDragging(),
|
|
18
|
+
}),
|
|
19
|
+
});
|
|
20
|
+
drag(ref);
|
|
21
|
+
return ((0, jsx_runtime_1.jsx)("div", { ref: ref, style: {
|
|
22
|
+
display: 'flex',
|
|
23
|
+
background: react_components_1.tokens.colorNeutralBackground1,
|
|
24
|
+
borderRadius: react_components_1.tokens.borderRadiusLarge,
|
|
25
|
+
boxShadow: react_components_1.tokens.shadow4,
|
|
26
|
+
opacity: isDragging ? 0.5 : 1,
|
|
27
|
+
}, children: (0, jsx_runtime_1.jsx)(PreviewComponent, { record: record }) }));
|
|
28
|
+
}
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
3
|
+
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
4
|
+
return new (P || (P = Promise))(function (resolve, reject) {
|
|
5
|
+
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
6
|
+
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
7
|
+
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
8
|
+
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
9
|
+
});
|
|
10
|
+
};
|
|
11
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
12
|
+
exports.BoardColumnUI = void 0;
|
|
13
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
14
|
+
const react_components_1 = require("@fluentui/react-components");
|
|
15
|
+
const context_1 = require("@headless-adminapp/app/board/context");
|
|
16
|
+
const hooks_1 = require("@headless-adminapp/app/board/hooks");
|
|
17
|
+
const hooks_2 = require("@headless-adminapp/app/command/hooks");
|
|
18
|
+
const ScrollbarWithMoreDataRequest_1 = require("@headless-adminapp/app/components/ScrollbarWithMoreDataRequest");
|
|
19
|
+
const context_2 = require("@headless-adminapp/app/mutable/context");
|
|
20
|
+
const react_1 = require("react");
|
|
21
|
+
const react_dnd_1 = require("react-dnd");
|
|
22
|
+
const BoardColumnCard_1 = require("./BoardColumnCard");
|
|
23
|
+
const BoardingColumnCardLoading_1 = require("./BoardingColumnCardLoading");
|
|
24
|
+
const BoardColumnUI = () => {
|
|
25
|
+
const data = (0, hooks_1.useBoardColumnData)();
|
|
26
|
+
const dataState = (0, hooks_1.useBoardColumnDataState)();
|
|
27
|
+
const fetchNextPage = (0, context_2.useContextSelector)(context_1.BoardColumnContext, (state) => state.fetchNextPage);
|
|
28
|
+
const { columnId, acceptSourceIds, title, updateFn } = (0, hooks_1.useBoardColumnConfig)();
|
|
29
|
+
const { PreviewComponent, schema, columnConfigs } = (0, hooks_1.useBoardConfig)();
|
|
30
|
+
const baseContext = (0, hooks_2.useBaseCommandHandlerContext)();
|
|
31
|
+
const ref = (0, react_1.useRef)(null);
|
|
32
|
+
const [{ handlerId, over, canDrop }, drop] = (0, react_dnd_1.useDrop)({
|
|
33
|
+
accept: acceptSourceIds,
|
|
34
|
+
collect(monitor) {
|
|
35
|
+
return {
|
|
36
|
+
handlerId: monitor.getHandlerId(),
|
|
37
|
+
over: monitor.isOver(),
|
|
38
|
+
canDrop: monitor.canDrop(),
|
|
39
|
+
};
|
|
40
|
+
},
|
|
41
|
+
drop: (item) => {
|
|
42
|
+
(() => __awaiter(void 0, void 0, void 0, function* () {
|
|
43
|
+
yield (updateFn === null || updateFn === void 0 ? void 0 : updateFn(Object.assign(Object.assign({}, baseContext), { primaryControl: {
|
|
44
|
+
logicalName: schema.logicalName,
|
|
45
|
+
id: item.id,
|
|
46
|
+
schema: schema,
|
|
47
|
+
} })));
|
|
48
|
+
}))().catch(console.error);
|
|
49
|
+
},
|
|
50
|
+
});
|
|
51
|
+
const canDrag = (0, react_1.useMemo)(() => {
|
|
52
|
+
return columnConfigs.some((config) => config.acceptSourceIds.length > 0);
|
|
53
|
+
}, [columnConfigs]);
|
|
54
|
+
drop(ref);
|
|
55
|
+
return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, style: {
|
|
56
|
+
display: 'flex',
|
|
57
|
+
flexDirection: 'column',
|
|
58
|
+
flex: 1,
|
|
59
|
+
borderRadius: react_components_1.tokens.borderRadiusXLarge,
|
|
60
|
+
outline: over
|
|
61
|
+
? `2px dashed ${react_components_1.tokens.colorBrandBackground}`
|
|
62
|
+
: canDrop
|
|
63
|
+
? `2px dashed ${react_components_1.tokens.colorNeutralStroke1}`
|
|
64
|
+
: 'none',
|
|
65
|
+
outlineOffset: -5,
|
|
66
|
+
paddingTop: react_components_1.tokens.spacingVerticalS,
|
|
67
|
+
}, "data-handler-id": handlerId, children: [(0, jsx_runtime_1.jsx)("div", { style: {
|
|
68
|
+
display: 'flex',
|
|
69
|
+
paddingInline: react_components_1.tokens.spacingHorizontalS,
|
|
70
|
+
alignItems: 'center',
|
|
71
|
+
}, children: (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'center', width: '100%' }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Body1Strong, { children: title }), (0, jsx_runtime_1.jsx)("div", { style: { flex: 1 } })] }) }), (0, jsx_runtime_1.jsx)(ScrollbarWithMoreDataRequest_1.ScrollbarWithMoreDataRequest, { data: data === null || data === void 0 ? void 0 : data.records, hasMore: dataState === null || dataState === void 0 ? void 0 : dataState.hasNextPage, onRequestMore: () => {
|
|
72
|
+
fetchNextPage();
|
|
73
|
+
}, children: (0, jsx_runtime_1.jsxs)("div", { style: {
|
|
74
|
+
display: 'flex',
|
|
75
|
+
flexDirection: 'column',
|
|
76
|
+
gap: react_components_1.tokens.spacingHorizontalM,
|
|
77
|
+
padding: react_components_1.tokens.spacingHorizontalS,
|
|
78
|
+
}, children: [data === null || data === void 0 ? void 0 : data.records.map((record, index) => ((0, jsx_runtime_1.jsx)(BoardColumnCard_1.BoardColumnCard, { record: record, index: index, columnId: columnId, canDrag: canDrag, PreviewComponent: PreviewComponent, schema: schema }, index))), dataState.isFetching &&
|
|
79
|
+
Array.from({ length: 5 }).map((_, index) => ((0, jsx_runtime_1.jsx)(BoardingColumnCardLoading_1.BoardingColumnCardLoading, {}, index)))] }) })] }));
|
|
80
|
+
};
|
|
81
|
+
exports.BoardColumnUI = BoardColumnUI;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function BoardingColumnCardLoading(): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.BoardingColumnCardLoading = BoardingColumnCardLoading;
|
|
4
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
+
const react_components_1 = require("@fluentui/react-components");
|
|
6
|
+
function BoardingColumnCardLoading() {
|
|
7
|
+
return ((0, jsx_runtime_1.jsxs)(react_components_1.Skeleton, { style: {
|
|
8
|
+
backgroundColor: react_components_1.tokens.colorNeutralBackground1,
|
|
9
|
+
borderRadius: react_components_1.tokens.borderRadiusLarge,
|
|
10
|
+
padding: react_components_1.tokens.spacingHorizontalM,
|
|
11
|
+
display: 'flex',
|
|
12
|
+
flexDirection: 'column',
|
|
13
|
+
gap: react_components_1.tokens.spacingVerticalM,
|
|
14
|
+
}, children: [(0, jsx_runtime_1.jsx)(react_components_1.SkeletonItem, { style: {
|
|
15
|
+
height: 16,
|
|
16
|
+
width: '100%',
|
|
17
|
+
} }), (0, jsx_runtime_1.jsx)(react_components_1.SkeletonItem, { style: {
|
|
18
|
+
height: 16,
|
|
19
|
+
width: '50%',
|
|
20
|
+
} })] }));
|
|
21
|
+
}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
3
|
+
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
4
|
+
return new (P || (P = Promise))(function (resolve, reject) {
|
|
5
|
+
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
6
|
+
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
7
|
+
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
8
|
+
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
9
|
+
});
|
|
10
|
+
};
|
|
11
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
12
|
+
exports.Header = void 0;
|
|
13
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
14
|
+
// eslint-disable-next-line simple-import-sort/imports
|
|
15
|
+
const react_components_1 = require("@fluentui/react-components");
|
|
16
|
+
const react_query_1 = require("@tanstack/react-query");
|
|
17
|
+
const hooks_1 = require("@headless-adminapp/app/board/hooks");
|
|
18
|
+
const icons_1 = require("@headless-adminapp/icons");
|
|
19
|
+
const AppStringContext_1 = require("../App/AppStringContext");
|
|
20
|
+
const Header = ({ title, subtitle }) => {
|
|
21
|
+
const client = (0, react_query_1.useQueryClient)();
|
|
22
|
+
const schema = (0, hooks_1.useBoardSchema)();
|
|
23
|
+
const [searchText, setSearchText] = (0, hooks_1.useSearchText)();
|
|
24
|
+
const appStrings = (0, AppStringContext_1.useAppStrings)();
|
|
25
|
+
const refresh = () => __awaiter(void 0, void 0, void 0, function* () {
|
|
26
|
+
yield client.invalidateQueries({
|
|
27
|
+
queryKey: ['data', 'retriveRecords', schema.logicalName],
|
|
28
|
+
});
|
|
29
|
+
});
|
|
30
|
+
return ((0, jsx_runtime_1.jsxs)("div", { style: {
|
|
31
|
+
display: 'flex',
|
|
32
|
+
alignItems: 'center',
|
|
33
|
+
gap: react_components_1.tokens.spacingHorizontalM,
|
|
34
|
+
}, children: [(0, jsx_runtime_1.jsx)("div", { style: { flex: 1 }, children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Subtitle2, { style: { color: react_components_1.tokens.colorNeutralForeground1 }, children: title }), (0, jsx_runtime_1.jsx)(react_components_1.Caption1, { style: { color: react_components_1.tokens.colorNeutralForeground2 }, children: subtitle })] }) }) }), (0, jsx_runtime_1.jsxs)("div", { style: {
|
|
35
|
+
display: 'flex',
|
|
36
|
+
alignItems: 'center',
|
|
37
|
+
gap: react_components_1.tokens.spacingHorizontalS,
|
|
38
|
+
}, children: [(0, jsx_runtime_1.jsx)(react_components_1.SearchBox, { appearance: "filled-darker", placeholder: appStrings.searchPlaceholder, value: searchText, onChange: (e, data) => setSearchText(data.value) }), (0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "subtle", icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Refresh, { size: 20 }), onClick: refresh })] })] }));
|
|
39
|
+
};
|
|
40
|
+
exports.Header = Header;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { BoardConfig } from '@headless-adminapp/app/board/types';
|
|
2
|
+
import { SchemaAttributes } from '@headless-adminapp/core/schema';
|
|
3
|
+
interface PageBoardProps<S extends SchemaAttributes = SchemaAttributes> {
|
|
4
|
+
config: BoardConfig<S>;
|
|
5
|
+
}
|
|
6
|
+
export declare function PageBoard<S extends SchemaAttributes = SchemaAttributes>(props: PageBoardProps<S>): import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
export {};
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.PageBoard = PageBoard;
|
|
4
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
+
const react_components_1 = require("@fluentui/react-components");
|
|
6
|
+
const context_1 = require("@headless-adminapp/app/board/context");
|
|
7
|
+
const context_2 = require("@headless-adminapp/app/mutable/context");
|
|
8
|
+
const react_1 = require("react");
|
|
9
|
+
const react_dnd_1 = require("react-dnd");
|
|
10
|
+
const react_dnd_html5_backend_1 = require("react-dnd-html5-backend");
|
|
11
|
+
const BoardColumn_1 = require("./BoardColumn");
|
|
12
|
+
const Header_1 = require("./Header");
|
|
13
|
+
function PageBoard(props) {
|
|
14
|
+
const contextValue = (0, context_2.useCreateContextStore)({
|
|
15
|
+
config: props.config,
|
|
16
|
+
searchText: '',
|
|
17
|
+
});
|
|
18
|
+
(0, react_1.useEffect)(() => {
|
|
19
|
+
contextValue.setValue({
|
|
20
|
+
config: props.config,
|
|
21
|
+
searchText: '',
|
|
22
|
+
});
|
|
23
|
+
}, [contextValue, props.config]);
|
|
24
|
+
return ((0, jsx_runtime_1.jsx)(context_1.BoardContext.Provider, { value: contextValue, children: (0, jsx_runtime_1.jsx)(react_dnd_1.DndProvider, { backend: react_dnd_html5_backend_1.HTML5Backend, children: (0, jsx_runtime_1.jsxs)("div", { style: {
|
|
25
|
+
display: 'flex',
|
|
26
|
+
flexDirection: 'column',
|
|
27
|
+
flex: 1,
|
|
28
|
+
gap: react_components_1.tokens.spacingVerticalM,
|
|
29
|
+
padding: react_components_1.tokens.spacingHorizontalL,
|
|
30
|
+
background: react_components_1.tokens.colorNeutralBackground3,
|
|
31
|
+
}, children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("div", { style: {
|
|
32
|
+
display: 'flex',
|
|
33
|
+
flexDirection: 'column',
|
|
34
|
+
background: react_components_1.tokens.colorNeutralBackground1,
|
|
35
|
+
borderRadius: react_components_1.tokens.borderRadiusLarge,
|
|
36
|
+
paddingBlock: react_components_1.tokens.spacingVerticalM,
|
|
37
|
+
paddingInline: react_components_1.tokens.spacingHorizontalM,
|
|
38
|
+
gap: react_components_1.tokens.spacingVerticalM,
|
|
39
|
+
boxShadow: react_components_1.tokens.shadow4,
|
|
40
|
+
}, children: (0, jsx_runtime_1.jsx)(Header_1.Header, { title: props.config.title, subtitle: props.config.description }) }) }), (0, jsx_runtime_1.jsx)("div", { style: {
|
|
41
|
+
display: 'flex',
|
|
42
|
+
flexDirection: 'row',
|
|
43
|
+
flex: 1,
|
|
44
|
+
marginInline: -6,
|
|
45
|
+
marginTop: react_components_1.tokens.spacingVerticalM,
|
|
46
|
+
}, children: props.config.columnConfigs.map((config) => ((0, jsx_runtime_1.jsx)(BoardColumn_1.BoardColumn, { config: config }, config.columnId))) })] }) }) }));
|
|
47
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { PageBoard } from './PageBoard';
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.PageBoard = void 0;
|
|
4
|
+
var PageBoard_1 = require("./PageBoard");
|
|
5
|
+
Object.defineProperty(exports, "PageBoard", { enumerable: true, get: function () { return PageBoard_1.PageBoard; } });
|
|
@@ -2,8 +2,6 @@ import { Localized } from '@headless-adminapp/core/types';
|
|
|
2
2
|
export interface RelatedItemInfo {
|
|
3
3
|
key: string;
|
|
4
4
|
logicalName: string;
|
|
5
|
-
label: string;
|
|
6
|
-
localizedLabels?: Localized<string>;
|
|
7
5
|
pluralLabel: string;
|
|
8
6
|
localizedPluralLabels?: Localized<string>;
|
|
9
7
|
attributeName: string;
|
|
@@ -10,7 +10,36 @@ const utils_1 = require("@headless-adminapp/core/attributes/utils");
|
|
|
10
10
|
const icons_1 = require("@headless-adminapp/icons");
|
|
11
11
|
const react_1 = require("react");
|
|
12
12
|
const PageEntityFormStringContext_1 = require("./PageEntityFormStringContext");
|
|
13
|
-
function getRelatedItems(currentSchema, schemas) {
|
|
13
|
+
function getRelatedItems(currentSchema, schemas, relatedItems) {
|
|
14
|
+
if (relatedItems === null) {
|
|
15
|
+
return [];
|
|
16
|
+
}
|
|
17
|
+
if (relatedItems) {
|
|
18
|
+
return relatedItems.map((item) => {
|
|
19
|
+
var _a, _b;
|
|
20
|
+
const schema = schemas[item.logicalName];
|
|
21
|
+
if (!schema) {
|
|
22
|
+
throw new Error(`Schema not found: ${item.logicalName}`);
|
|
23
|
+
}
|
|
24
|
+
if (!schema.attributes[item.attributeName]) {
|
|
25
|
+
throw new Error(`Attribute not found: ${item.logicalName}.${item.attributeName}`);
|
|
26
|
+
}
|
|
27
|
+
const attribute = schema.attributes[item.attributeName];
|
|
28
|
+
if (!(0, utils_1.isLookupAttribute)(attribute)) {
|
|
29
|
+
throw new Error(`Attribute is not a lookup: ${item.logicalName}.${item.attributeName}`);
|
|
30
|
+
}
|
|
31
|
+
if (attribute.entity !== currentSchema.logicalName) {
|
|
32
|
+
throw new Error(`Attribute entity does not match: ${item.logicalName}.${item.attributeName}`);
|
|
33
|
+
}
|
|
34
|
+
return {
|
|
35
|
+
key: `${schema.logicalName}.${item.attributeName}`,
|
|
36
|
+
logicalName: schema.logicalName,
|
|
37
|
+
attributeName: item.attributeName,
|
|
38
|
+
pluralLabel: (_a = item.pluralLabel) !== null && _a !== void 0 ? _a : schema.pluralLabel,
|
|
39
|
+
localizedPluralLabels: (_b = item.localizedPluralLabels) !== null && _b !== void 0 ? _b : schema.localizedPluralLabels,
|
|
40
|
+
};
|
|
41
|
+
});
|
|
42
|
+
}
|
|
14
43
|
return Object.values(schemas)
|
|
15
44
|
.map((s) => {
|
|
16
45
|
return Object.entries(s.attributes)
|
|
@@ -35,11 +64,9 @@ function getRelatedItems(currentSchema, schemas) {
|
|
|
35
64
|
return {
|
|
36
65
|
key: `${s.logicalName}.${item.key}`,
|
|
37
66
|
logicalName: s.logicalName,
|
|
38
|
-
|
|
39
|
-
localizedLabels: s.localizedLabels,
|
|
67
|
+
attributeName: item.key,
|
|
40
68
|
pluralLabel: (_a = item.attribute.relatedLabel) !== null && _a !== void 0 ? _a : s.pluralLabel,
|
|
41
69
|
localizedPluralLabels: (_b = item.attribute.localizedRelatedLabel) !== null && _b !== void 0 ? _b : s.localizedPluralLabels,
|
|
42
|
-
attributeName: item.key,
|
|
43
70
|
};
|
|
44
71
|
});
|
|
45
72
|
})
|
|
@@ -47,10 +74,11 @@ function getRelatedItems(currentSchema, schemas) {
|
|
|
47
74
|
}
|
|
48
75
|
function RelatedViewSelector(props) {
|
|
49
76
|
const schema = (0, hooks_1.useDataFormSchema)();
|
|
77
|
+
const formConfig = (0, hooks_1.useSelectedForm)();
|
|
50
78
|
const { schemas } = (0, hooks_2.useMetadata)();
|
|
51
79
|
const strings = (0, PageEntityFormStringContext_1.usePageEntityFormStrings)();
|
|
52
80
|
const { language } = (0, locale_1.useLocale)();
|
|
53
|
-
const data = (0, react_1.useMemo)(() => getRelatedItems(schema, schemas), [schema, schemas]);
|
|
81
|
+
const data = (0, react_1.useMemo)(() => getRelatedItems(schema, schemas, formConfig.experience.relatedItems), [formConfig.experience.relatedItems, schema, schemas]);
|
|
54
82
|
if (!data.length) {
|
|
55
83
|
return null;
|
|
56
84
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@headless-adminapp/fluent",
|
|
3
|
-
"version": "0.0.17-alpha.
|
|
3
|
+
"version": "0.0.17-alpha.43",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"types": "index.d.ts",
|
|
@@ -48,5 +48,5 @@
|
|
|
48
48
|
"uuid": "11.0.3",
|
|
49
49
|
"yup": "^1.4.0"
|
|
50
50
|
},
|
|
51
|
-
"gitHead": "
|
|
51
|
+
"gitHead": "ee8c97501940617fa6dcfc935252a3b8d363804f"
|
|
52
52
|
}
|