@configura/debug-react 2.1.0-alpha.2 → 2.1.0
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/.eslintrc.json +5 -5
- package/.postcssrc.json +8 -8
- package/LICENSE +201 -201
- package/dist/LogMessageView.d.ts +5 -5
- package/dist/LogMessageView.js +8 -8
- package/dist/LogMessagesView.d.ts +5 -5
- package/dist/LogMessagesView.js +10 -10
- package/dist/TextualConfigurationView.d.ts +7 -7
- package/dist/TextualConfigurationView.js +58 -58
- package/dist/css/debug.css.map +1 -1
- package/dist/exerciser/Exerciser.d.ts +37 -37
- package/dist/exerciser/Exerciser.js +155 -155
- package/dist/exerciser/ExerciserReportFilterView.d.ts +9 -9
- package/dist/exerciser/ExerciserReportFilterView.js +205 -205
- package/dist/exerciser/ExerciserReportItem.d.ts +10 -10
- package/dist/exerciser/ExerciserReportItem.js +1 -1
- package/dist/exerciser/ExerciserReportItemView.d.ts +6 -6
- package/dist/exerciser/ExerciserReportItemView.js +53 -53
- package/dist/exerciser/ExerciserReportView.d.ts +7 -7
- package/dist/exerciser/ExerciserReportView.js +8 -8
- package/dist/exerciser/ExerciserRun.d.ts +19 -19
- package/dist/exerciser/ExerciserRun.js +158 -158
- package/dist/exerciser/ExerciserSetup.d.ts +15 -15
- package/dist/exerciser/ExerciserSetup.js +54 -54
- package/dist/exerciser/FilterSelect.d.ts +8 -8
- package/dist/exerciser/FilterSelect.js +40 -40
- package/dist/hooks.d.ts +2 -2
- package/dist/hooks.js +7 -7
- package/dist/index.d.ts +12 -12
- package/dist/index.js +12 -12
- package/dist/productConfiguration/DebugAdditionalProductView.d.ts +3 -3
- package/dist/productConfiguration/DebugAdditionalProductView.js +6 -6
- package/dist/productConfiguration/DebugFeatureCommon.d.ts +10 -10
- package/dist/productConfiguration/DebugFeatureCommon.js +35 -35
- package/dist/productConfiguration/DebugFeatureGroupView.d.ts +4 -4
- package/dist/productConfiguration/DebugFeatureGroupView.js +20 -20
- package/dist/productConfiguration/DebugFeatureView.d.ts +4 -4
- package/dist/productConfiguration/DebugFeatureView.js +8 -8
- package/dist/productConfiguration/DebugMiscFileView.d.ts +3 -3
- package/dist/productConfiguration/DebugMiscFileView.js +10 -10
- package/dist/productConfiguration/DebugNoteView.d.ts +3 -3
- package/dist/productConfiguration/DebugNoteView.js +10 -10
- package/dist/productConfiguration/DebugOptionCommon.d.ts +10 -10
- package/dist/productConfiguration/DebugOptionCommon.js +30 -30
- package/dist/productConfiguration/DebugOptionView.d.ts +4 -4
- package/dist/productConfiguration/DebugOptionView.js +8 -8
- package/dist/productConfiguration/DebugProductCommon.d.ts +9 -9
- package/dist/productConfiguration/DebugProductCommon.js +40 -40
- package/dist/productConfiguration/DebugProductConfigurationView.d.ts +16 -16
- package/dist/productConfiguration/DebugProductConfigurationView.js +26 -26
- package/dist/productConfiguration/DebugRowsFactory.d.ts +9 -9
- package/dist/productConfiguration/DebugRowsFactory.js +31 -31
- package/dist/productConfiguration/DebugTable.d.ts +8 -8
- package/dist/productConfiguration/DebugTable.js +8 -8
- package/dist/productConfiguration/debugComponentsHelper.d.ts +3 -3
- package/dist/productConfiguration/debugComponentsHelper.js +36 -36
- package/dist/productConfiguration/index.d.ts +8 -8
- package/dist/productConfiguration/index.js +8 -8
- package/package.json +6 -6
|
@@ -1,158 +1,158 @@
|
|
|
1
|
-
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
2
|
-
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
3
|
-
return new (P || (P = Promise))(function (resolve, reject) {
|
|
4
|
-
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
5
|
-
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
6
|
-
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
7
|
-
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
8
|
-
});
|
|
9
|
-
};
|
|
10
|
-
import { SingleProductViewPhase, } from "@configura/babylon-view";
|
|
11
|
-
import { BabylonView } from "@configura/babylon-view-react";
|
|
12
|
-
import { degToRad, loadImage, LogObservable, toError, } from "@configura/web-utilities";
|
|
13
|
-
import React, { useEffect, useState } from "react";
|
|
14
|
-
import { ExerciserReportItemView } from "./ExerciserReportItemView.js";
|
|
15
|
-
/**
|
|
16
|
-
* This configures the Babylon view, for example the camera configuration and detail levels used.
|
|
17
|
-
*
|
|
18
|
-
* To change the detail levels, just add allowedDetailLevels.
|
|
19
|
-
* For example, the line below will load the lowest available detail level for each product:
|
|
20
|
-
* allowedDetailLevels: [DetailLevel.low, DetailLevel.medium, DetailLevel.high, DetailLevel.base],
|
|
21
|
-
*/
|
|
22
|
-
const viewConfiguration = {
|
|
23
|
-
camera: {
|
|
24
|
-
yaw: degToRad(110),
|
|
25
|
-
pitch: degToRad(70),
|
|
26
|
-
},
|
|
27
|
-
};
|
|
28
|
-
function snapImage(scheduleRerender) {
|
|
29
|
-
return __awaiter(this, void 0, void 0, function* () {
|
|
30
|
-
const url = yield new Promise((resolve) => scheduleRerender(resolve));
|
|
31
|
-
const image = yield loadImage(url);
|
|
32
|
-
return { image, url };
|
|
33
|
-
});
|
|
34
|
-
}
|
|
35
|
-
export function ExerciserRunner(props) {
|
|
36
|
-
const { addErrorReportItem, addReportItem, generateExerciserUrl, loadingObservable, productIterator, } = props;
|
|
37
|
-
const [viewPhase, setViewPhase] = useState();
|
|
38
|
-
const [renderEnv, setRenderEnv] = useState();
|
|
39
|
-
const [startLoading, setStartLoading] = useState(performance.now());
|
|
40
|
-
const [productResult, setProductResult] = useState();
|
|
41
|
-
const [product, setProduct] = useState();
|
|
42
|
-
const [snapshotResult, setSnapshotResult] = useState();
|
|
43
|
-
const [currentItem, setCurrentItem] = useState();
|
|
44
|
-
const loadNext = () => {
|
|
45
|
-
setSnapshotResult(undefined);
|
|
46
|
-
setViewStateReachedIdleOrError(undefined);
|
|
47
|
-
setStartLoading(performance.now());
|
|
48
|
-
};
|
|
49
|
-
useEffect(() => {
|
|
50
|
-
let canceled = false;
|
|
51
|
-
LogObservable.clear();
|
|
52
|
-
const token = loadingObservable.startChildLoading();
|
|
53
|
-
productIterator
|
|
54
|
-
.next()
|
|
55
|
-
.then((result) => !canceled && setProductResult(result))
|
|
56
|
-
.catch((err) => !canceled && setProductResult(toError(err)))
|
|
57
|
-
.then(() => loadingObservable.stopChildLoading(token));
|
|
58
|
-
return () => {
|
|
59
|
-
canceled = true;
|
|
60
|
-
loadingObservable.stopChildLoading(token);
|
|
61
|
-
};
|
|
62
|
-
}, [startLoading, loadingObservable, productIterator]);
|
|
63
|
-
useEffect(() => {
|
|
64
|
-
let token;
|
|
65
|
-
if (productResult === undefined) {
|
|
66
|
-
// done or not started
|
|
67
|
-
return;
|
|
68
|
-
}
|
|
69
|
-
else if (productResult instanceof Error) {
|
|
70
|
-
addErrorReportItem(productResult);
|
|
71
|
-
loadNext();
|
|
72
|
-
}
|
|
73
|
-
else if (productResult.done) {
|
|
74
|
-
setProduct(undefined);
|
|
75
|
-
}
|
|
76
|
-
else {
|
|
77
|
-
const v = productResult.value;
|
|
78
|
-
if (v instanceof Error) {
|
|
79
|
-
addErrorReportItem(v);
|
|
80
|
-
loadNext();
|
|
81
|
-
}
|
|
82
|
-
else {
|
|
83
|
-
token = loadingObservable.startChildLoading();
|
|
84
|
-
setProduct(v);
|
|
85
|
-
}
|
|
86
|
-
}
|
|
87
|
-
return () => loadingObservable.stopChildLoading(token);
|
|
88
|
-
}, [addErrorReportItem, loadingObservable, productResult]);
|
|
89
|
-
const [viewStateReachedIdleOrError, setViewStateReachedIdleOrError] = useState();
|
|
90
|
-
useEffect(() => {
|
|
91
|
-
if (viewPhase === undefined ||
|
|
92
|
-
(viewPhase.current !== SingleProductViewPhase.Idle &&
|
|
93
|
-
viewPhase.current !== SingleProductViewPhase.Error)) {
|
|
94
|
-
return;
|
|
95
|
-
}
|
|
96
|
-
setViewStateReachedIdleOrError({});
|
|
97
|
-
}, [viewPhase]);
|
|
98
|
-
useEffect(() => {
|
|
99
|
-
if (product === undefined ||
|
|
100
|
-
renderEnv === undefined ||
|
|
101
|
-
viewStateReachedIdleOrError === undefined) {
|
|
102
|
-
return;
|
|
103
|
-
}
|
|
104
|
-
let canceled = false;
|
|
105
|
-
const token = loadingObservable.startChildLoading();
|
|
106
|
-
snapImage(renderEnv.scheduleRerender)
|
|
107
|
-
.then((url) => !canceled && setSnapshotResult(url))
|
|
108
|
-
.catch((err) => !canceled && setSnapshotResult(toError(err)))
|
|
109
|
-
.then(() => loadingObservable.stopChildLoading(token));
|
|
110
|
-
return () => {
|
|
111
|
-
canceled = true;
|
|
112
|
-
loadingObservable.stopChildLoading(token);
|
|
113
|
-
};
|
|
114
|
-
}, [product, viewStateReachedIdleOrError, renderEnv, loadingObservable]);
|
|
115
|
-
useEffect(() => {
|
|
116
|
-
if (product === undefined || snapshotResult === undefined) {
|
|
117
|
-
// done or loading
|
|
118
|
-
return;
|
|
119
|
-
}
|
|
120
|
-
else if (snapshotResult instanceof Error) {
|
|
121
|
-
addErrorReportItem(snapshotResult);
|
|
122
|
-
}
|
|
123
|
-
else {
|
|
124
|
-
const randNum = Math.random();
|
|
125
|
-
setCurrentItem({
|
|
126
|
-
duration: performance.now() - startLoading,
|
|
127
|
-
imageDataUrl: snapshotResult.image && snapshotResult.url,
|
|
128
|
-
logMessages: [],
|
|
129
|
-
productWithConfiguration: product,
|
|
130
|
-
productUrl: "",
|
|
131
|
-
randId: randNum,
|
|
132
|
-
});
|
|
133
|
-
addReportItem({
|
|
134
|
-
duration: performance.now() - startLoading,
|
|
135
|
-
imageDataUrl: snapshotResult.image && snapshotResult.url,
|
|
136
|
-
logMessages: LogObservable.allMessages,
|
|
137
|
-
productWithConfiguration: product,
|
|
138
|
-
productUrl: generateExerciserUrl("run", product.product.lang, Object.assign(Object.assign({}, product.product.catId), { partNumber: product.product.partNumber })),
|
|
139
|
-
randId: randNum,
|
|
140
|
-
});
|
|
141
|
-
}
|
|
142
|
-
loadNext();
|
|
143
|
-
}, [
|
|
144
|
-
addErrorReportItem,
|
|
145
|
-
addReportItem,
|
|
146
|
-
generateExerciserUrl,
|
|
147
|
-
product,
|
|
148
|
-
snapshotResult,
|
|
149
|
-
startLoading,
|
|
150
|
-
currentItem,
|
|
151
|
-
]);
|
|
152
|
-
if (!product) {
|
|
153
|
-
return null;
|
|
154
|
-
}
|
|
155
|
-
return (React.createElement("div", { className: "cfgExerciserColumn" },
|
|
156
|
-
currentItem && React.createElement(ExerciserReportItemView, { item: currentItem, showImg: false }),
|
|
157
|
-
React.createElement(BabylonView, { errorCallback: setProductResult, applicationAreas: product.applicationAreasResponse.applicationAreas, product: product.product, width: 500, height: 500, viewPhaseCallback: setViewPhase, renderEnvironmentCallback: setRenderEnv, configuration: viewConfiguration })));
|
|
158
|
-
}
|
|
1
|
+
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
2
|
+
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
3
|
+
return new (P || (P = Promise))(function (resolve, reject) {
|
|
4
|
+
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
5
|
+
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
6
|
+
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
7
|
+
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
8
|
+
});
|
|
9
|
+
};
|
|
10
|
+
import { SingleProductViewPhase, } from "@configura/babylon-view";
|
|
11
|
+
import { BabylonView } from "@configura/babylon-view-react";
|
|
12
|
+
import { degToRad, loadImage, LogObservable, toError, } from "@configura/web-utilities";
|
|
13
|
+
import React, { useEffect, useState } from "react";
|
|
14
|
+
import { ExerciserReportItemView } from "./ExerciserReportItemView.js";
|
|
15
|
+
/**
|
|
16
|
+
* This configures the Babylon view, for example the camera configuration and detail levels used.
|
|
17
|
+
*
|
|
18
|
+
* To change the detail levels, just add allowedDetailLevels.
|
|
19
|
+
* For example, the line below will load the lowest available detail level for each product:
|
|
20
|
+
* allowedDetailLevels: [DetailLevel.low, DetailLevel.medium, DetailLevel.high, DetailLevel.base],
|
|
21
|
+
*/
|
|
22
|
+
const viewConfiguration = {
|
|
23
|
+
camera: {
|
|
24
|
+
yaw: degToRad(110),
|
|
25
|
+
pitch: degToRad(70),
|
|
26
|
+
},
|
|
27
|
+
};
|
|
28
|
+
function snapImage(scheduleRerender) {
|
|
29
|
+
return __awaiter(this, void 0, void 0, function* () {
|
|
30
|
+
const url = yield new Promise((resolve) => scheduleRerender(resolve));
|
|
31
|
+
const image = yield loadImage(url);
|
|
32
|
+
return { image, url };
|
|
33
|
+
});
|
|
34
|
+
}
|
|
35
|
+
export function ExerciserRunner(props) {
|
|
36
|
+
const { addErrorReportItem, addReportItem, generateExerciserUrl, loadingObservable, productIterator, } = props;
|
|
37
|
+
const [viewPhase, setViewPhase] = useState();
|
|
38
|
+
const [renderEnv, setRenderEnv] = useState();
|
|
39
|
+
const [startLoading, setStartLoading] = useState(performance.now());
|
|
40
|
+
const [productResult, setProductResult] = useState();
|
|
41
|
+
const [product, setProduct] = useState();
|
|
42
|
+
const [snapshotResult, setSnapshotResult] = useState();
|
|
43
|
+
const [currentItem, setCurrentItem] = useState();
|
|
44
|
+
const loadNext = () => {
|
|
45
|
+
setSnapshotResult(undefined);
|
|
46
|
+
setViewStateReachedIdleOrError(undefined);
|
|
47
|
+
setStartLoading(performance.now());
|
|
48
|
+
};
|
|
49
|
+
useEffect(() => {
|
|
50
|
+
let canceled = false;
|
|
51
|
+
LogObservable.clear();
|
|
52
|
+
const token = loadingObservable.startChildLoading();
|
|
53
|
+
productIterator
|
|
54
|
+
.next()
|
|
55
|
+
.then((result) => !canceled && setProductResult(result))
|
|
56
|
+
.catch((err) => !canceled && setProductResult(toError(err)))
|
|
57
|
+
.then(() => loadingObservable.stopChildLoading(token));
|
|
58
|
+
return () => {
|
|
59
|
+
canceled = true;
|
|
60
|
+
loadingObservable.stopChildLoading(token);
|
|
61
|
+
};
|
|
62
|
+
}, [startLoading, loadingObservable, productIterator]);
|
|
63
|
+
useEffect(() => {
|
|
64
|
+
let token;
|
|
65
|
+
if (productResult === undefined) {
|
|
66
|
+
// done or not started
|
|
67
|
+
return;
|
|
68
|
+
}
|
|
69
|
+
else if (productResult instanceof Error) {
|
|
70
|
+
addErrorReportItem(productResult);
|
|
71
|
+
loadNext();
|
|
72
|
+
}
|
|
73
|
+
else if (productResult.done) {
|
|
74
|
+
setProduct(undefined);
|
|
75
|
+
}
|
|
76
|
+
else {
|
|
77
|
+
const v = productResult.value;
|
|
78
|
+
if (v instanceof Error) {
|
|
79
|
+
addErrorReportItem(v);
|
|
80
|
+
loadNext();
|
|
81
|
+
}
|
|
82
|
+
else {
|
|
83
|
+
token = loadingObservable.startChildLoading();
|
|
84
|
+
setProduct(v);
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
return () => loadingObservable.stopChildLoading(token);
|
|
88
|
+
}, [addErrorReportItem, loadingObservable, productResult]);
|
|
89
|
+
const [viewStateReachedIdleOrError, setViewStateReachedIdleOrError] = useState();
|
|
90
|
+
useEffect(() => {
|
|
91
|
+
if (viewPhase === undefined ||
|
|
92
|
+
(viewPhase.current !== SingleProductViewPhase.Idle &&
|
|
93
|
+
viewPhase.current !== SingleProductViewPhase.Error)) {
|
|
94
|
+
return;
|
|
95
|
+
}
|
|
96
|
+
setViewStateReachedIdleOrError({});
|
|
97
|
+
}, [viewPhase]);
|
|
98
|
+
useEffect(() => {
|
|
99
|
+
if (product === undefined ||
|
|
100
|
+
renderEnv === undefined ||
|
|
101
|
+
viewStateReachedIdleOrError === undefined) {
|
|
102
|
+
return;
|
|
103
|
+
}
|
|
104
|
+
let canceled = false;
|
|
105
|
+
const token = loadingObservable.startChildLoading();
|
|
106
|
+
snapImage(renderEnv.scheduleRerender)
|
|
107
|
+
.then((url) => !canceled && setSnapshotResult(url))
|
|
108
|
+
.catch((err) => !canceled && setSnapshotResult(toError(err)))
|
|
109
|
+
.then(() => loadingObservable.stopChildLoading(token));
|
|
110
|
+
return () => {
|
|
111
|
+
canceled = true;
|
|
112
|
+
loadingObservable.stopChildLoading(token);
|
|
113
|
+
};
|
|
114
|
+
}, [product, viewStateReachedIdleOrError, renderEnv, loadingObservable]);
|
|
115
|
+
useEffect(() => {
|
|
116
|
+
if (product === undefined || snapshotResult === undefined) {
|
|
117
|
+
// done or loading
|
|
118
|
+
return;
|
|
119
|
+
}
|
|
120
|
+
else if (snapshotResult instanceof Error) {
|
|
121
|
+
addErrorReportItem(snapshotResult);
|
|
122
|
+
}
|
|
123
|
+
else {
|
|
124
|
+
const randNum = Math.random();
|
|
125
|
+
setCurrentItem({
|
|
126
|
+
duration: performance.now() - startLoading,
|
|
127
|
+
imageDataUrl: snapshotResult.image && snapshotResult.url,
|
|
128
|
+
logMessages: [],
|
|
129
|
+
productWithConfiguration: product,
|
|
130
|
+
productUrl: "",
|
|
131
|
+
randId: randNum,
|
|
132
|
+
});
|
|
133
|
+
addReportItem({
|
|
134
|
+
duration: performance.now() - startLoading,
|
|
135
|
+
imageDataUrl: snapshotResult.image && snapshotResult.url,
|
|
136
|
+
logMessages: LogObservable.allMessages,
|
|
137
|
+
productWithConfiguration: product,
|
|
138
|
+
productUrl: generateExerciserUrl("run", product.product.lang, Object.assign(Object.assign({}, product.product.catId), { partNumber: product.product.partNumber })),
|
|
139
|
+
randId: randNum,
|
|
140
|
+
});
|
|
141
|
+
}
|
|
142
|
+
loadNext();
|
|
143
|
+
}, [
|
|
144
|
+
addErrorReportItem,
|
|
145
|
+
addReportItem,
|
|
146
|
+
generateExerciserUrl,
|
|
147
|
+
product,
|
|
148
|
+
snapshotResult,
|
|
149
|
+
startLoading,
|
|
150
|
+
currentItem,
|
|
151
|
+
]);
|
|
152
|
+
if (!product) {
|
|
153
|
+
return null;
|
|
154
|
+
}
|
|
155
|
+
return (React.createElement("div", { className: "cfgExerciserColumn" },
|
|
156
|
+
currentItem && React.createElement(ExerciserReportItemView, { item: currentItem, showImg: false }),
|
|
157
|
+
React.createElement(BabylonView, { errorCallback: setProductResult, applicationAreas: product.applicationAreasResponse.applicationAreas, product: product.product, width: 500, height: 500, viewPhaseCallback: setViewPhase, renderEnvironmentCallback: setRenderEnv, configuration: viewConfiguration })));
|
|
158
|
+
}
|
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
import { CatalogueAPI, DtoProductParamsWithCid, GeneratedProductConfiguration } from "@configura/web-api";
|
|
2
|
-
import { AggregatedLoadingObservable } from "@configura/web-utilities";
|
|
3
|
-
import React from "react";
|
|
4
|
-
import { ExerciserAction, ExerciserState } from "./Exerciser.js";
|
|
5
|
-
interface Props {
|
|
6
|
-
api: CatalogueAPI;
|
|
7
|
-
exerciserState: ExerciserState;
|
|
8
|
-
generateExerciserUrl: (action: ExerciserAction, lang: string, params: Partial<DtoProductParamsWithCid>) => string;
|
|
9
|
-
loadingObservable: AggregatedLoadingObservable;
|
|
10
|
-
setError: (err: unknown) => void;
|
|
11
|
-
setExerciserState: (next: ExerciserState) => void;
|
|
12
|
-
setProductIterator: (next: AsyncIterableIterator<GeneratedProductConfiguration | Error>) => void;
|
|
13
|
-
}
|
|
14
|
-
export declare const ExerciserSetup: React.FC<Props>;
|
|
15
|
-
export {};
|
|
1
|
+
import { CatalogueAPI, DtoProductParamsWithCid, GeneratedProductConfiguration } from "@configura/web-api";
|
|
2
|
+
import { AggregatedLoadingObservable } from "@configura/web-utilities";
|
|
3
|
+
import React from "react";
|
|
4
|
+
import { ExerciserAction, ExerciserState } from "./Exerciser.js";
|
|
5
|
+
interface Props {
|
|
6
|
+
api: CatalogueAPI;
|
|
7
|
+
exerciserState: ExerciserState;
|
|
8
|
+
generateExerciserUrl: (action: ExerciserAction, lang: string, params: Partial<DtoProductParamsWithCid>) => string;
|
|
9
|
+
loadingObservable: AggregatedLoadingObservable;
|
|
10
|
+
setError: (err: unknown) => void;
|
|
11
|
+
setExerciserState: (next: ExerciserState) => void;
|
|
12
|
+
setProductIterator: (next: AsyncIterableIterator<GeneratedProductConfiguration | Error>) => void;
|
|
13
|
+
}
|
|
14
|
+
export declare const ExerciserSetup: React.FC<Props>;
|
|
15
|
+
export {};
|
|
16
16
|
//# sourceMappingURL=ExerciserSetup.d.ts.map
|
|
@@ -1,54 +1,54 @@
|
|
|
1
|
-
import { applyCatalogueFilters, applyProductRefFilters, makeCatalogueKey, } from "@configura/web-api";
|
|
2
|
-
import { Loading } from "@configura/web-ui";
|
|
3
|
-
import React, { useEffect } from "react";
|
|
4
|
-
import { Link } from "react-router-dom";
|
|
5
|
-
import { useMemoized, useMemoized2 } from "../hooks.js";
|
|
6
|
-
import { flattenCataloguePermissions, useCatalogueFilters, useProductConfigurationIterator, useProductFilters, useToc, } from "./Exerciser.js";
|
|
7
|
-
import { FilterSelect } from "./FilterSelect.js";
|
|
8
|
-
export const ExerciserSetup = (props) => {
|
|
9
|
-
var _a;
|
|
10
|
-
const { loadingObservable, exerciserState, setProductIterator, api, setError } = props;
|
|
11
|
-
const { action, lang } = exerciserState;
|
|
12
|
-
const next = action === "run" ? "setup" : "run";
|
|
13
|
-
const catalogues = useMemoized(flattenCataloguePermissions, ((_a = api.auth) === null || _a === void 0 ? void 0 : _a.apiSession.permissions) || []);
|
|
14
|
-
const catalogueFilters = useCatalogueFilters(exerciserState);
|
|
15
|
-
const [availableCataloguePropertyValues, filteredCatalogues] = useMemoized2(applyCatalogueFilters, catalogueFilters, catalogues);
|
|
16
|
-
const tocParams = filteredCatalogues.length === 1 ? filteredCatalogues[0] : undefined;
|
|
17
|
-
const toc = useToc(api, tocParams, lang, setError, loadingObservable);
|
|
18
|
-
const productRefs = (toc === null || toc === void 0 ? void 0 : toc.prdRefs) || [];
|
|
19
|
-
const productFilters = useProductFilters(exerciserState);
|
|
20
|
-
const [availablePartNrs, filteredProducts] = useMemoized2(applyProductRefFilters, productFilters, productRefs);
|
|
21
|
-
const productIterator = useProductConfigurationIterator(api, lang, filteredCatalogues, productFilters);
|
|
22
|
-
useEffect(() => setProductIterator(productIterator), [setProductIterator, productIterator]);
|
|
23
|
-
function updateUrl(key, val) {
|
|
24
|
-
props.setExerciserState(Object.assign(Object.assign({}, exerciserState), { [key]: val }));
|
|
25
|
-
}
|
|
26
|
-
return (React.createElement("div", { className: "cfgExerciserSetup" },
|
|
27
|
-
React.createElement("div", { className: "cfgExerciserView cfgExerciserSetup__select" },
|
|
28
|
-
React.createElement("h2", { className: "cfgExerciserHeader" }, "Product Setup"),
|
|
29
|
-
React.createElement("h3", { className: "cfgExerciserHeader" }, "Filter Catalogues"),
|
|
30
|
-
React.createElement(FilterSelect, { name: "enterprise", filter: catalogueFilters.enterprise, values: availableCataloguePropertyValues.enterprise, updateUrl: updateUrl }),
|
|
31
|
-
React.createElement(FilterSelect, { name: "prdCat", filter: catalogueFilters.prdCat, values: availableCataloguePropertyValues.prdCat, updateUrl: updateUrl }),
|
|
32
|
-
React.createElement(FilterSelect, { name: "prdCatVersion", filter: catalogueFilters.prdCatVersion, values: availableCataloguePropertyValues.prdCatVersion, updateUrl: updateUrl }),
|
|
33
|
-
React.createElement(FilterSelect, { name: "vendor", filter: catalogueFilters.vendor, values: availableCataloguePropertyValues.vendor, updateUrl: updateUrl }),
|
|
34
|
-
React.createElement(FilterSelect, { name: "priceList", filter: catalogueFilters.priceList, values: availableCataloguePropertyValues.priceList, updateUrl: updateUrl }),
|
|
35
|
-
React.createElement("h3", { className: "cfgExerciserHeader" }, "Filter Products"),
|
|
36
|
-
React.createElement(FilterSelect, { name: "partNr", filter: productFilters.partNr, values: availablePartNrs, updateUrl: updateUrl }),
|
|
37
|
-
React.createElement("button", { className: "cfgButton cfgExerciserButton", onClick: (e) => updateUrl("action", next) }, next === "run" ? "Start" : "Stop")),
|
|
38
|
-
action === "setup" && (React.createElement("div", { className: "cfgExerciserView cfgExerciserSetup__preview" },
|
|
39
|
-
React.createElement("h2", { className: "cfgExerciserHeader" }, "Catalogues Preview"),
|
|
40
|
-
React.createElement("ol", null, filteredCatalogues.map((p) => (React.createElement("li", { key: makeCatalogueKey(p) },
|
|
41
|
-
React.createElement(Link, { className: "cfgExerciserLink", to: props.generateExerciserUrl(action, lang, p) },
|
|
42
|
-
p.enterprise,
|
|
43
|
-
" / ",
|
|
44
|
-
p.prdCat,
|
|
45
|
-
" / ",
|
|
46
|
-
p.prdCatVersion,
|
|
47
|
-
" / ",
|
|
48
|
-
p.vendor,
|
|
49
|
-
" /",
|
|
50
|
-
" ",
|
|
51
|
-
p.priceList))))),
|
|
52
|
-
React.createElement("h2", { className: "cfgExerciserHeader" }, "Products Preview"),
|
|
53
|
-
toc !== undefined ? (React.createElement("ol", null, filteredProducts.map((p) => (React.createElement("li", { key: p.partNr }, p.partNr))))) : filteredCatalogues.length === 1 ? (React.createElement(Loading, { small: true })) : (React.createElement("p", null, "Product preview is only available if a single catalogue is selected"))))));
|
|
54
|
-
};
|
|
1
|
+
import { applyCatalogueFilters, applyProductRefFilters, makeCatalogueKey, } from "@configura/web-api";
|
|
2
|
+
import { Loading } from "@configura/web-ui";
|
|
3
|
+
import React, { useEffect } from "react";
|
|
4
|
+
import { Link } from "react-router-dom";
|
|
5
|
+
import { useMemoized, useMemoized2 } from "../hooks.js";
|
|
6
|
+
import { flattenCataloguePermissions, useCatalogueFilters, useProductConfigurationIterator, useProductFilters, useToc, } from "./Exerciser.js";
|
|
7
|
+
import { FilterSelect } from "./FilterSelect.js";
|
|
8
|
+
export const ExerciserSetup = (props) => {
|
|
9
|
+
var _a;
|
|
10
|
+
const { loadingObservable, exerciserState, setProductIterator, api, setError } = props;
|
|
11
|
+
const { action, lang } = exerciserState;
|
|
12
|
+
const next = action === "run" ? "setup" : "run";
|
|
13
|
+
const catalogues = useMemoized(flattenCataloguePermissions, ((_a = api.auth) === null || _a === void 0 ? void 0 : _a.apiSession.permissions) || []);
|
|
14
|
+
const catalogueFilters = useCatalogueFilters(exerciserState);
|
|
15
|
+
const [availableCataloguePropertyValues, filteredCatalogues] = useMemoized2(applyCatalogueFilters, catalogueFilters, catalogues);
|
|
16
|
+
const tocParams = filteredCatalogues.length === 1 ? filteredCatalogues[0] : undefined;
|
|
17
|
+
const toc = useToc(api, tocParams, lang, setError, loadingObservable);
|
|
18
|
+
const productRefs = (toc === null || toc === void 0 ? void 0 : toc.prdRefs) || [];
|
|
19
|
+
const productFilters = useProductFilters(exerciserState);
|
|
20
|
+
const [availablePartNrs, filteredProducts] = useMemoized2(applyProductRefFilters, productFilters, productRefs);
|
|
21
|
+
const productIterator = useProductConfigurationIterator(api, lang, filteredCatalogues, productFilters);
|
|
22
|
+
useEffect(() => setProductIterator(productIterator), [setProductIterator, productIterator]);
|
|
23
|
+
function updateUrl(key, val) {
|
|
24
|
+
props.setExerciserState(Object.assign(Object.assign({}, exerciserState), { [key]: val }));
|
|
25
|
+
}
|
|
26
|
+
return (React.createElement("div", { className: "cfgExerciserSetup" },
|
|
27
|
+
React.createElement("div", { className: "cfgExerciserView cfgExerciserSetup__select" },
|
|
28
|
+
React.createElement("h2", { className: "cfgExerciserHeader" }, "Product Setup"),
|
|
29
|
+
React.createElement("h3", { className: "cfgExerciserHeader" }, "Filter Catalogues"),
|
|
30
|
+
React.createElement(FilterSelect, { name: "enterprise", filter: catalogueFilters.enterprise, values: availableCataloguePropertyValues.enterprise, updateUrl: updateUrl }),
|
|
31
|
+
React.createElement(FilterSelect, { name: "prdCat", filter: catalogueFilters.prdCat, values: availableCataloguePropertyValues.prdCat, updateUrl: updateUrl }),
|
|
32
|
+
React.createElement(FilterSelect, { name: "prdCatVersion", filter: catalogueFilters.prdCatVersion, values: availableCataloguePropertyValues.prdCatVersion, updateUrl: updateUrl }),
|
|
33
|
+
React.createElement(FilterSelect, { name: "vendor", filter: catalogueFilters.vendor, values: availableCataloguePropertyValues.vendor, updateUrl: updateUrl }),
|
|
34
|
+
React.createElement(FilterSelect, { name: "priceList", filter: catalogueFilters.priceList, values: availableCataloguePropertyValues.priceList, updateUrl: updateUrl }),
|
|
35
|
+
React.createElement("h3", { className: "cfgExerciserHeader" }, "Filter Products"),
|
|
36
|
+
React.createElement(FilterSelect, { name: "partNr", filter: productFilters.partNr, values: availablePartNrs, updateUrl: updateUrl }),
|
|
37
|
+
React.createElement("button", { className: "cfgButton cfgExerciserButton", onClick: (e) => updateUrl("action", next) }, next === "run" ? "Start" : "Stop")),
|
|
38
|
+
action === "setup" && (React.createElement("div", { className: "cfgExerciserView cfgExerciserSetup__preview" },
|
|
39
|
+
React.createElement("h2", { className: "cfgExerciserHeader" }, "Catalogues Preview"),
|
|
40
|
+
React.createElement("ol", null, filteredCatalogues.map((p) => (React.createElement("li", { key: makeCatalogueKey(p) },
|
|
41
|
+
React.createElement(Link, { className: "cfgExerciserLink", to: props.generateExerciserUrl(action, lang, p) },
|
|
42
|
+
p.enterprise,
|
|
43
|
+
" / ",
|
|
44
|
+
p.prdCat,
|
|
45
|
+
" / ",
|
|
46
|
+
p.prdCatVersion,
|
|
47
|
+
" / ",
|
|
48
|
+
p.vendor,
|
|
49
|
+
" /",
|
|
50
|
+
" ",
|
|
51
|
+
p.priceList))))),
|
|
52
|
+
React.createElement("h2", { className: "cfgExerciserHeader" }, "Products Preview"),
|
|
53
|
+
toc !== undefined ? (React.createElement("ol", null, filteredProducts.map((p) => (React.createElement("li", { key: p.partNr }, p.partNr))))) : filteredCatalogues.length === 1 ? (React.createElement(Loading, { small: true })) : (React.createElement("p", null, "Product preview is only available if a single catalogue is selected"))))));
|
|
54
|
+
};
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { Filter } from "@configura/web-utilities";
|
|
2
|
-
export interface FilterSelectProps<K extends string> {
|
|
3
|
-
filter: Filter;
|
|
4
|
-
name: K;
|
|
5
|
-
updateUrl: (key: K, val: Filter) => void;
|
|
6
|
-
values: string[];
|
|
7
|
-
}
|
|
8
|
-
export declare function FilterSelect<K extends string>(props: FilterSelectProps<K>): JSX.Element;
|
|
1
|
+
import { Filter } from "@configura/web-utilities";
|
|
2
|
+
export interface FilterSelectProps<K extends string> {
|
|
3
|
+
filter: Filter;
|
|
4
|
+
name: K;
|
|
5
|
+
updateUrl: (key: K, val: Filter) => void;
|
|
6
|
+
values: string[];
|
|
7
|
+
}
|
|
8
|
+
export declare function FilterSelect<K extends string>(props: FilterSelectProps<K>): JSX.Element;
|
|
9
9
|
//# sourceMappingURL=FilterSelect.d.ts.map
|
|
@@ -1,40 +1,40 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
export function FilterSelect(props) {
|
|
3
|
-
const { filter, name, updateUrl, values } = props;
|
|
4
|
-
const invalidValue = filter.mode === "exact" && filter.value !== "-" && values.indexOf(filter.value) === -1;
|
|
5
|
-
const { mode, value } = filter;
|
|
6
|
-
return (React.createElement("div", { className: "cfgExerciserControl" },
|
|
7
|
-
React.createElement("label", { className: "cfgExerciserControl__label", htmlFor: name }, name),
|
|
8
|
-
React.createElement("div", { className: "cfgExerciserControl__selectWrapper" },
|
|
9
|
-
React.createElement("select", { className: "cfgExerciserControl__select--operator", onChange: (e) => {
|
|
10
|
-
const newMode = e.target.value;
|
|
11
|
-
if (newMode === mode) {
|
|
12
|
-
return;
|
|
13
|
-
}
|
|
14
|
-
else if (newMode === "exact" || newMode === "all") {
|
|
15
|
-
updateUrl(name, { mode: newMode, value: "-" });
|
|
16
|
-
}
|
|
17
|
-
else if (newMode === "random" || newMode === "first") {
|
|
18
|
-
updateUrl(name, {
|
|
19
|
-
mode: newMode,
|
|
20
|
-
value: typeof value === "number" ? value : 1,
|
|
21
|
-
});
|
|
22
|
-
}
|
|
23
|
-
else {
|
|
24
|
-
console.error("invalid mode", newMode);
|
|
25
|
-
}
|
|
26
|
-
}, value: value === "-" ? "all" : mode },
|
|
27
|
-
React.createElement("option", { value: "all" }, "all"),
|
|
28
|
-
React.createElement("option", { value: "exact" }, "exact"),
|
|
29
|
-
React.createElement("option", { value: "random" }, "random"),
|
|
30
|
-
React.createElement("option", { value: "first" }, "first")),
|
|
31
|
-
" ",
|
|
32
|
-
mode === "all" || mode === "exact" ? (React.createElement("select", { className: "cfgExerciserControl__select--full", id: name, onChange: (e) => {
|
|
33
|
-
const newValue = e.target.value;
|
|
34
|
-
const newMode = newValue === "-" ? "all" : "exact";
|
|
35
|
-
updateUrl(name, { mode: newMode, value: newValue });
|
|
36
|
-
}, value: value, style: { borderColor: invalidValue ? "red" : undefined } },
|
|
37
|
-
React.createElement("option", { value: "-" }, "-"),
|
|
38
|
-
invalidValue && React.createElement("option", { value: value }, value),
|
|
39
|
-
values.map((e) => (React.createElement("option", { key: e, value: e }, e))))) : (React.createElement("input", { type: "number", value: value, onChange: (e) => updateUrl(name, { mode, value: parseInt(e.target.value) }) })))));
|
|
40
|
-
}
|
|
1
|
+
import React from "react";
|
|
2
|
+
export function FilterSelect(props) {
|
|
3
|
+
const { filter, name, updateUrl, values } = props;
|
|
4
|
+
const invalidValue = filter.mode === "exact" && filter.value !== "-" && values.indexOf(filter.value) === -1;
|
|
5
|
+
const { mode, value } = filter;
|
|
6
|
+
return (React.createElement("div", { className: "cfgExerciserControl" },
|
|
7
|
+
React.createElement("label", { className: "cfgExerciserControl__label", htmlFor: name }, name),
|
|
8
|
+
React.createElement("div", { className: "cfgExerciserControl__selectWrapper" },
|
|
9
|
+
React.createElement("select", { className: "cfgExerciserControl__select--operator", onChange: (e) => {
|
|
10
|
+
const newMode = e.target.value;
|
|
11
|
+
if (newMode === mode) {
|
|
12
|
+
return;
|
|
13
|
+
}
|
|
14
|
+
else if (newMode === "exact" || newMode === "all") {
|
|
15
|
+
updateUrl(name, { mode: newMode, value: "-" });
|
|
16
|
+
}
|
|
17
|
+
else if (newMode === "random" || newMode === "first") {
|
|
18
|
+
updateUrl(name, {
|
|
19
|
+
mode: newMode,
|
|
20
|
+
value: typeof value === "number" ? value : 1,
|
|
21
|
+
});
|
|
22
|
+
}
|
|
23
|
+
else {
|
|
24
|
+
console.error("invalid mode", newMode);
|
|
25
|
+
}
|
|
26
|
+
}, value: value === "-" ? "all" : mode },
|
|
27
|
+
React.createElement("option", { value: "all" }, "all"),
|
|
28
|
+
React.createElement("option", { value: "exact" }, "exact"),
|
|
29
|
+
React.createElement("option", { value: "random" }, "random"),
|
|
30
|
+
React.createElement("option", { value: "first" }, "first")),
|
|
31
|
+
" ",
|
|
32
|
+
mode === "all" || mode === "exact" ? (React.createElement("select", { className: "cfgExerciserControl__select--full", id: name, onChange: (e) => {
|
|
33
|
+
const newValue = e.target.value;
|
|
34
|
+
const newMode = newValue === "-" ? "all" : "exact";
|
|
35
|
+
updateUrl(name, { mode: newMode, value: newValue });
|
|
36
|
+
}, value: value, style: { borderColor: invalidValue ? "red" : undefined } },
|
|
37
|
+
React.createElement("option", { value: "-" }, "-"),
|
|
38
|
+
invalidValue && React.createElement("option", { value: value }, value),
|
|
39
|
+
values.map((e) => (React.createElement("option", { key: e, value: e }, e))))) : (React.createElement("input", { type: "number", value: value, onChange: (e) => updateUrl(name, { mode, value: parseInt(e.target.value) }) })))));
|
|
40
|
+
}
|
package/dist/hooks.d.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
export declare function useMemoized<T, V>(func: (value: V) => T, value: V): T;
|
|
2
|
-
export declare function useMemoized2<T, V, U>(func: (first: V, second: U) => T, first: V, second: U): T;
|
|
1
|
+
export declare function useMemoized<T, V>(func: (value: V) => T, value: V): T;
|
|
2
|
+
export declare function useMemoized2<T, V, U>(func: (first: V, second: U) => T, first: V, second: U): T;
|
|
3
3
|
//# sourceMappingURL=hooks.d.ts.map
|
package/dist/hooks.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { useMemo } from "react";
|
|
2
|
-
export function useMemoized(func, value) {
|
|
3
|
-
return useMemo(() => func(value), [func, value]);
|
|
4
|
-
}
|
|
5
|
-
export function useMemoized2(func, first, second) {
|
|
6
|
-
return useMemo(() => func(first, second), [func, first, second]);
|
|
7
|
-
}
|
|
1
|
+
import { useMemo } from "react";
|
|
2
|
+
export function useMemoized(func, value) {
|
|
3
|
+
return useMemo(() => func(value), [func, value]);
|
|
4
|
+
}
|
|
5
|
+
export function useMemoized2(func, first, second) {
|
|
6
|
+
return useMemo(() => func(first, second), [func, first, second]);
|
|
7
|
+
}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
export * from "./exerciser/Exerciser.js";
|
|
2
|
-
export * from "./exerciser/ExerciserReportFilterView.js";
|
|
3
|
-
export * from "./exerciser/ExerciserReportItem.js";
|
|
4
|
-
export * from "./exerciser/ExerciserReportItemView.js";
|
|
5
|
-
export * from "./exerciser/ExerciserReportView.js";
|
|
6
|
-
export * from "./exerciser/ExerciserRun.js";
|
|
7
|
-
export * from "./exerciser/ExerciserSetup.js";
|
|
8
|
-
export * from "./hooks.js";
|
|
9
|
-
export * from "./LogMessagesView.js";
|
|
10
|
-
export * from "./LogMessageView.js";
|
|
11
|
-
export * from "./productConfiguration/index.js";
|
|
12
|
-
export * from "./TextualConfigurationView.js";
|
|
1
|
+
export * from "./exerciser/Exerciser.js";
|
|
2
|
+
export * from "./exerciser/ExerciserReportFilterView.js";
|
|
3
|
+
export * from "./exerciser/ExerciserReportItem.js";
|
|
4
|
+
export * from "./exerciser/ExerciserReportItemView.js";
|
|
5
|
+
export * from "./exerciser/ExerciserReportView.js";
|
|
6
|
+
export * from "./exerciser/ExerciserRun.js";
|
|
7
|
+
export * from "./exerciser/ExerciserSetup.js";
|
|
8
|
+
export * from "./hooks.js";
|
|
9
|
+
export * from "./LogMessagesView.js";
|
|
10
|
+
export * from "./LogMessageView.js";
|
|
11
|
+
export * from "./productConfiguration/index.js";
|
|
12
|
+
export * from "./TextualConfigurationView.js";
|
|
13
13
|
//# sourceMappingURL=index.d.ts.map
|