@apia/scheduler-component 4.0.102 → 5.0.1

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.
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Stage.js","sources":["../../../src/Scheduler/mini/Stage.tsx"],"sourcesContent":["import React from 'react';\r\nimport { Box } from '@apia/theme';\r\n\r\nimport StageButton from './StageButton';\r\nimport { isChild, useMountTransition } from '@apia/util';\r\nimport { observer } from 'mobx-react-lite';\r\nimport { useScheduler } from '..';\r\n\r\ninterface IButtonList {\r\n stageIndex: number;\r\n}\r\n\r\nconst Stage = observer(({ stageIndex }: IButtonList) => {\r\n const controller = useScheduler();\r\n const stage = controller.getState().stageData?.[stageIndex];\r\n const [ref, setRef] = React.useState<HTMLElement | null>(null);\r\n const focusStage = controller.getState().focusStage;\r\n const isMounted = !!stage?.name;\r\n const hasTransitionedIn = useMountTransition(isMounted, 1000);\r\n\r\n const doFocus = React.useCallback(() => {\r\n if (!stage || stage.name === 'daysList') return;\r\n\r\n if (!ref) return;\r\n const firstBtn = ref.querySelector(\r\n '.stage_btn:not(:disabled)',\r\n ) as HTMLElement;\r\n if (firstBtn) {\r\n firstBtn.focus();\r\n }\r\n }, [ref, stage]);\r\n\r\n React.useEffect(() => {\r\n if (focusStage === stage?.name) doFocus();\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [focusStage]);\r\n\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n React.useLayoutEffect(doFocus, [ref, stage]);\r\n\r\n const handleFocus = React.useCallback(\r\n (sum: number) => {\r\n const focusedElement = document.activeElement;\r\n if (\r\n isChild(focusedElement as HTMLElement, (current) => current === ref) &&\r\n ref\r\n ) {\r\n const buttons = [\r\n ...ref.querySelectorAll<HTMLElement>('.stage_btn:not(:disabled)'),\r\n ];\r\n if (buttons) {\r\n const index = buttons.findIndex(\r\n (current) => current === focusedElement,\r\n );\r\n\r\n if (buttons[index] === focusedElement && buttons[index - sum]) {\r\n buttons[index - sum].focus();\r\n\r\n controller.setState({ focusStage: stage?.name });\r\n }\r\n }\r\n }\r\n },\r\n [controller, ref, stage?.name],\r\n );\r\n\r\n const handleKeyDown = React.useCallback(\r\n (ev: React.KeyboardEvent) => {\r\n if (ev.key.toLowerCase() === 'arrowdown') {\r\n ev.preventDefault();\r\n handleFocus(-1);\r\n }\r\n if (ev.key.toLowerCase() === 'arrowup') {\r\n ev.preventDefault();\r\n handleFocus(+1);\r\n }\r\n },\r\n [handleFocus],\r\n );\r\n\r\n return stage ? (\r\n <Box\r\n data-name={stage?.name}\r\n className={`stage ${hasTransitionedIn && 'in'} ${isMounted && 'visible'}`}\r\n ref={setRef}\r\n onKeyDown={handleKeyDown}\r\n >\r\n {(hasTransitionedIn || isMounted) &&\r\n stage?.buttons?.map((elem) => {\r\n return <StageButton button={elem} key={elem.title} />;\r\n })}\r\n </Box>\r\n ) : null;\r\n});\r\n\r\nexport default Stage;\r\n"],"names":[],"mappings":"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"}
@@ -0,0 +1,43 @@
1
+ import { jsxs } from 'react/jsx-runtime';
2
+ import { toBoolean } from '@apia/util';
3
+ import { SimpleButton } from '@apia/components';
4
+ import { observer } from 'mobx-react-lite';
5
+ import { useScheduler } from '../index.js';
6
+
7
+ const StageButton = observer(
8
+ ({
9
+ button: {
10
+ action,
11
+ isDisabled,
12
+ isSelectedSelector,
13
+ label,
14
+ title,
15
+ value,
16
+ ...props
17
+ }
18
+ }) => {
19
+ const controller = useScheduler();
20
+ const isSelected = isSelectedSelector();
21
+ const showDisponibility = controller.getState().initialProps.showDisponibility;
22
+ const overassign = controller.getState().data?.overassign;
23
+ return /* @__PURE__ */ jsxs(
24
+ SimpleButton,
25
+ {
26
+ variant: "outline",
27
+ className: `${isSelected ? "selected" : ""} ${value !== "" && !Number(value) && Number(value) <= Number(overassign) ? "td_overassign" : ""} ${isDisabled ? "disabled" : ""} stage_btn`,
28
+ onClick: action,
29
+ disabled: isDisabled,
30
+ ...props,
31
+ children: [
32
+ label,
33
+ " ",
34
+ toBoolean(showDisponibility) && value !== "" && `(${Number(value) + Number(overassign) || Number(overassign)})`
35
+ ]
36
+ },
37
+ title
38
+ );
39
+ }
40
+ );
41
+
42
+ export { StageButton as default };
43
+ //# sourceMappingURL=StageButton.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"StageButton.js","sources":["../../../src/Scheduler/mini/StageButton.tsx"],"sourcesContent":["import { toBoolean } from '@apia/util';\r\nimport { SimpleButton } from '@apia/components';\r\nimport { observer } from 'mobx-react-lite';\r\nimport { useScheduler } from '..';\r\nimport { IStageButton } from '@apia/scheduler-controller';\r\n\r\nconst StageButton = observer(\r\n ({\r\n button: {\r\n action,\r\n isDisabled,\r\n isSelectedSelector,\r\n label,\r\n title,\r\n value,\r\n ...props\r\n },\r\n }: {\r\n button: IStageButton;\r\n }) => {\r\n const controller = useScheduler();\r\n const isSelected = isSelectedSelector();\r\n const showDisponibility =\r\n controller.getState().initialProps.showDisponibility;\r\n const overassign = controller.getState().data?.overassign;\r\n\r\n return (\r\n <SimpleButton\r\n variant=\"outline\"\r\n className={`${isSelected ? 'selected' : ''} ${\r\n value !== '' && !Number(value) && Number(value) <= Number(overassign)\r\n ? 'td_overassign'\r\n : ''\r\n } ${isDisabled ? 'disabled' : ''} stage_btn`}\r\n onClick={action}\r\n key={title}\r\n disabled={isDisabled}\r\n {...props}\r\n >\r\n {label}{' '}\r\n {toBoolean(showDisponibility) &&\r\n value !== '' &&\r\n `(${Number(value) + Number(overassign) || Number(overassign)})`}\r\n </SimpleButton>\r\n );\r\n },\r\n);\r\n\r\nexport default StageButton;\r\n"],"names":[],"mappings":";;;;;;AAMA,MAAM,WAAA,GAAc,QAAA;AAAA,EAClB,CAAC;AAAA,IACC,MAAA,EAAQ;AAAA,MACN,MAAA;AAAA,MACA,UAAA;AAAA,MACA,kBAAA;AAAA,MACA,KAAA;AAAA,MACA,KAAA;AAAA,MACA,KAAA;AAAA,MACA,GAAG;AAAA;AACL,GACF,KAEM;AACJ,IAAA,MAAM,aAAa,YAAA,EAAa;AAChC,IAAA,MAAM,aAAa,kBAAA,EAAmB;AACtC,IAAA,MAAM,iBAAA,GACJ,UAAA,CAAW,QAAA,EAAS,CAAE,YAAA,CAAa,iBAAA;AACrC,IAAA,MAAM,UAAA,GAAa,UAAA,CAAW,QAAA,EAAS,CAAE,IAAA,EAAM,UAAA;AAE/C,IAAA,uBACE,IAAA;AAAA,MAAC,YAAA;AAAA,MAAA;AAAA,QACC,OAAA,EAAQ,SAAA;AAAA,QACR,SAAA,EAAW,GAAG,UAAA,GAAa,UAAA,GAAa,EAAE,CAAA,CAAA,EACxC,KAAA,KAAU,EAAA,IAAM,CAAC,MAAA,CAAO,KAAK,KAAK,MAAA,CAAO,KAAK,CAAA,IAAK,MAAA,CAAO,UAAU,CAAA,GAChE,kBACA,EACN,CAAA,CAAA,EAAI,UAAA,GAAa,UAAA,GAAa,EAAE,CAAA,UAAA,CAAA;AAAA,QAChC,OAAA,EAAS,MAAA;AAAA,QAET,QAAA,EAAU,UAAA;AAAA,QACT,GAAG,KAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAA,KAAA;AAAA,UAAO,GAAA;AAAA,UACP,SAAA,CAAU,iBAAiB,CAAA,IAC1B,KAAA,KAAU,MACV,CAAA,CAAA,EAAI,MAAA,CAAO,KAAK,CAAA,GAAI,MAAA,CAAO,UAAU,CAAA,IAAK,MAAA,CAAO,UAAU,CAAC,CAAA,CAAA;AAAA;AAAA,OAAA;AAAA,MAPzD;AAAA,KAQP;AAAA;AAGN;;;;"}
package/dist/index.d.ts CHANGED
@@ -1,14 +1,2 @@
1
- import * as react_jsx_runtime from 'react/jsx-runtime';
2
- import { Scheduler, ISchedulerDataRetriever, IScheduleInitialProps } from '@apia/scheduler-controller';
3
-
4
- declare const SchedulerComponent: (({ controller, retriever, properties, getController, }: {
5
- controller?: Scheduler;
6
- retriever?: ISchedulerDataRetriever;
7
- properties?: IScheduleInitialProps;
8
- getController?: (ctrl: Scheduler) => void;
9
- }) => react_jsx_runtime.JSX.Element | null) & {
10
- displayName: string;
11
- };
12
-
13
- export { SchedulerComponent };
1
+ export { SchedulerComponent } from './Scheduler/index.js';
14
2
  //# sourceMappingURL=index.d.ts.map
package/dist/index.js CHANGED
@@ -1,504 +1,2 @@
1
- import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
2
- import { Box, getVariant, Heading, Spinner, Label, useBreakpointIndex } from '@apia/theme';
3
- import dayjs from 'dayjs';
4
- import { observer } from 'mobx-react-lite';
5
- import { ApiaUtil, SimpleButton, IconButton, DateInput } from '@apia/components';
6
- import { getLabel, arrayOrArray, getDateFormat, toBoolean, useMountTransition, isChild, getSpecificParent, formatMessage } from '@apia/util';
7
- import { Icon } from '@apia/icons';
8
- import React, { useCallback, createContext, useState, useContext } from 'react';
9
- import { Table } from '@apia/table2-component';
10
- import { Scheduler } from '@apia/scheduler-controller';
11
-
12
- const ReserveDetails = observer(
13
- ({ processes }) => {
14
- let content = /* @__PURE__ */ jsx(Box, { className: "no__appoinments", children: /* @__PURE__ */ jsxs(Box, { as: "span", children: [
15
- getLabel("lblNoAppoinments").text,
16
- " "
17
- ] }) });
18
- if (processes.length > 0)
19
- content = /* @__PURE__ */ jsxs("table", { className: "appoinments__details", children: [
20
- /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
21
- /* @__PURE__ */ jsx("th", { children: getLabel("lblId").text }),
22
- /* @__PURE__ */ jsx("th", { children: getLabel("flaAtr").text })
23
- ] }) }),
24
- /* @__PURE__ */ jsx("tbody", { children: processes?.map((c) => {
25
- const attributes = arrayOrArray(c.attributes.attribute);
26
- return attributes.map((attr, index) => /* @__PURE__ */ jsxs("tr", { children: [
27
- index === 0 && /* @__PURE__ */ jsx(
28
- "td",
29
- {
30
- className: "appoinments__details_id",
31
- rowSpan: attributes.length,
32
- children: c.id
33
- }
34
- ),
35
- /* @__PURE__ */ jsxs("td", { className: "appoinments__details_attribute", children: [
36
- attr.title,
37
- ": ",
38
- attr.value
39
- ] })
40
- ] }, `${c.id}-${index}`));
41
- }) })
42
- ] });
43
- return /* @__PURE__ */ jsx(Box, { ...getVariant("layout.common.components.scheduler.details"), children: content });
44
- }
45
- );
46
-
47
- const dateFormat = getDateFormat();
48
- const CellRenderer = observer(({ cell }) => {
49
- const controller = useScheduler();
50
- const state = controller.getState();
51
- if (cell.getState("content")) {
52
- return cell.getState("content");
53
- }
54
- const properties = cell.getState("properties");
55
- if (!state)
56
- return;
57
- const isSelected = state.selectedCell === properties.cellId;
58
- const ariaLabel = !properties.isEnabled ? `${dayjs(properties.weekDay, dateFormat).add(Number(properties.dayNumber) - 1, "day").format(dateFormat)},${properties.hour.slice(0, -2) ?? ""}:${properties.hour.slice(2) ?? ""}, ${String("disabled")}
59
- ` : `${dayjs(properties.weekDay, dateFormat).add(Number(properties.dayNumber) - 1, "day").format(dateFormat)},${properties.hour.slice(
60
- 0,
61
- -2
62
- )}:${properties.hour.slice(2)}, ${String(
63
- properties.valuePlusOverassign
64
- )}
65
- `;
66
- const title = !properties.isEnabled ? "" : `${dayjs(properties.weekDay, dateFormat).add(Number(properties.dayNumber) - 1, "day").format(dateFormat)},${properties.hour.slice(
67
- 0,
68
- -2
69
- )}:${properties.hour.slice(2)} ${String(
70
- toBoolean(state.initialProps.showDisponibility) ? `, ${properties.valuePlusOverassign}` : ""
71
- )}
72
- `;
73
- return /* @__PURE__ */ jsxs(
74
- Box,
75
- {
76
- className: `scheduler_cell ${properties.isOverassignClassName ? "td_overassign" : ""}`,
77
- children: [
78
- /* @__PURE__ */ jsxs(
79
- SimpleButton,
80
- {
81
- tabIndex: 0,
82
- title,
83
- "aria-label": ariaLabel,
84
- disabled: !properties.isEnabled,
85
- ...getVariant("transparentIcon"),
86
- onClick: () => controller.retriever.selectDayHandler({
87
- cellId: properties.cellId,
88
- weekDay: properties.weekDay,
89
- dayNumber: properties.dayNumber,
90
- hour: properties.hour,
91
- currentDayDefinition: properties.currentDayDefinition,
92
- controller
93
- }),
94
- className: `sched_cell__btn `,
95
- children: [
96
- isSelected && /* @__PURE__ */ jsx(Icon, { title: "", name: "Check" }),
97
- !isSelected && properties.isEnabled && toBoolean(state.initialProps.showDisponibility) && Number(properties.valuePlusOverassign)
98
- ]
99
- }
100
- ),
101
- properties.currentDayDefinition?.type === "laboral" && ApiaUtil.instance.parsers.parseBool(
102
- state.initialProps.showAttributes ?? "false"
103
- ) && /* @__PURE__ */ jsx(
104
- IconButton,
105
- {
106
- size: 24,
107
- icon: "Search",
108
- ...getVariant("transparentIcon"),
109
- className: `schd__info ${!properties.isEnabled ? "schd__info_disabledColor" : ""}`,
110
- onClick: async () => {
111
- const processes = await controller.loadInfo(
112
- properties.dayNumber,
113
- properties.hour
114
- );
115
- ApiaUtil.instance.modals.open({
116
- title: getLabel("lblAppointmentDetails").text,
117
- children: /* @__PURE__ */ jsx(ReserveDetails, { processes }),
118
- variant: "layout.execution.form.fields.scheduler.details"
119
- });
120
- }
121
- }
122
- )
123
- ]
124
- }
125
- );
126
- });
127
- class SchedulerTablePlugin {
128
- getRenderers() {
129
- return {
130
- cell: CellRenderer
131
- };
132
- }
133
- }
134
-
135
- const Navigation = observer(() => {
136
- const controller = useScheduler();
137
- const mondayWeek = controller.getState().data?.mondayWeek;
138
- const {
139
- isDisabled,
140
- isTodayLoading,
141
- isLastWeekLoading,
142
- isDateInputLoading,
143
- isNextWeekLoading,
144
- isDeleteLoading
145
- } = {
146
- isDisabled: controller.getState()?.isLoading !== "NotLoading",
147
- isTodayLoading: controller.getState()?.isLoading === "Today",
148
- isLastWeekLoading: controller.getState()?.isLoading === "LastWeek",
149
- isDateInputLoading: controller.getState()?.isLoading === "DateInput",
150
- isNextWeekLoading: controller.getState()?.isLoading === "NextWeek",
151
- isDeleteLoading: controller.getState()?.isLoading === "DeleteWeek"
152
- };
153
- const onTodayHandler = () => {
154
- controller.setState({ isLoading: "Today" });
155
- controller.makeDaysStage();
156
- controller.loadWeek(dayjs().subtract(1, "day").format(dateFormat));
157
- };
158
- return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(Box, { className: "scheduler__navigator", children: [
159
- /* @__PURE__ */ jsx(
160
- SimpleButton,
161
- {
162
- variant: "outline",
163
- className: "scheduler__navigator_todayBtn",
164
- disabled: isDisabled,
165
- "aria-label": window.LBL_TODAY,
166
- isLoading: isTodayLoading,
167
- onClick: useCallback(onTodayHandler, [controller]),
168
- type: "button",
169
- children: window.LBL_TODAY
170
- }
171
- ),
172
- /* @__PURE__ */ jsx(
173
- SimpleButton,
174
- {
175
- variant: "outline",
176
- className: "scheduler__navigator_lastBtn",
177
- disabled: isDisabled,
178
- title: window.LBL_SCHED_LAST_WEEK_TOOLTIP,
179
- "aria-label": window.LBL_SCHED_LAST_WEEK_TEXT,
180
- isLoading: isLastWeekLoading,
181
- onClick: () => controller.goPreviousWeek(),
182
- type: "button",
183
- children: "<"
184
- }
185
- ),
186
- /* @__PURE__ */ jsx(
187
- DateInput,
188
- {
189
- className: "scheduler__navigator_dateInput",
190
- disabled: isDisabled,
191
- isLoading: isDateInputLoading,
192
- getCustomMask: useCallback(() => {
193
- return "";
194
- }, []),
195
- renderLabel: controller.parsedDateLabel,
196
- onChange: (newDate) => {
197
- if (newDate) {
198
- controller.setState({ isLoading: "DateInput" });
199
- controller.loadWeek(
200
- dayjs(newDate, dateFormat).format(dateFormat)
201
- );
202
- }
203
- },
204
- value: mondayWeek
205
- }
206
- ),
207
- /* @__PURE__ */ jsx(
208
- SimpleButton,
209
- {
210
- variant: "outline",
211
- className: "scheduler__navigator_nextBtn",
212
- disabled: isDisabled,
213
- title: window.LBL_SCHED_NEXT_WEEK_TOOLTIP,
214
- "aria-label": window.LBL_SCHED_NEXT_WEEK_TEXT,
215
- isLoading: isNextWeekLoading,
216
- onClick: () => controller.goNextWeek(),
217
- type: "button",
218
- children: ">"
219
- }
220
- ),
221
- /* @__PURE__ */ jsx(
222
- SimpleButton,
223
- {
224
- variant: "outline-danger",
225
- title: window.LBL_SCHED_RESET_TOOLTIP,
226
- "aria-label": window.LBL_SCHED_RESET_TEXT,
227
- className: "scheduler__navigator_DeleteBtn",
228
- disabled: isDisabled,
229
- isLoading: isDeleteLoading,
230
- onClick: () => controller.deleteDate(),
231
- type: "button",
232
- children: /* @__PURE__ */ jsx(Icon, { name: "Trash", title: window.LBL_SCHED_RESET_TEXT })
233
- }
234
- )
235
- ] }) });
236
- });
237
-
238
- const SchedTable = observer(() => {
239
- const controller = useScheduler();
240
- return /* @__PURE__ */ jsx(
241
- Box,
242
- {
243
- onKeyDownCapture: (ev) => {
244
- if (ev.code === "ArrowRight" && ev.ctrlKey) {
245
- ev.stopPropagation();
246
- controller.goNextWeek();
247
- }
248
- if (ev.code === "ArrowLeft" && ev.ctrlKey) {
249
- ev.stopPropagation();
250
- controller.goPreviousWeek();
251
- }
252
- },
253
- children: /* @__PURE__ */ jsx(Table, { variant: "secondary", controller: controller.tableController })
254
- }
255
- );
256
- });
257
-
258
- const StageButton = observer(
259
- ({
260
- button: {
261
- action,
262
- isDisabled,
263
- isSelectedSelector,
264
- label,
265
- title,
266
- value,
267
- ...props
268
- }
269
- }) => {
270
- const controller = useScheduler();
271
- const isSelected = isSelectedSelector();
272
- const showDisponibility = controller.getState().initialProps.showDisponibility;
273
- const overassign = controller.getState().data?.overassign;
274
- return /* @__PURE__ */ jsxs(
275
- SimpleButton,
276
- {
277
- variant: "outline",
278
- className: `${isSelected ? "selected" : ""} ${value !== "" && !Number(value) && Number(value) <= Number(overassign) ? "td_overassign" : ""} ${isDisabled ? "disabled" : ""} stage_btn`,
279
- onClick: action,
280
- disabled: isDisabled,
281
- ...props,
282
- children: [
283
- label,
284
- " ",
285
- toBoolean(showDisponibility) && value !== "" && `(${Number(value) + Number(overassign) || Number(overassign)})`
286
- ]
287
- },
288
- title
289
- );
290
- }
291
- );
292
-
293
- const Stage = observer(({ stageIndex }) => {
294
- const controller = useScheduler();
295
- const stage = controller.getState().stageData?.[stageIndex];
296
- const [ref, setRef] = React.useState(null);
297
- const focusStage = controller.getState().focusStage;
298
- const isMounted = !!stage?.name;
299
- const hasTransitionedIn = useMountTransition(isMounted, 1e3);
300
- const doFocus = React.useCallback(() => {
301
- if (!stage || stage.name === "daysList")
302
- return;
303
- if (!ref)
304
- return;
305
- const firstBtn = ref.querySelector(
306
- ".stage_btn:not(:disabled)"
307
- );
308
- if (firstBtn) {
309
- firstBtn.focus();
310
- }
311
- }, [ref, stage]);
312
- React.useEffect(() => {
313
- if (focusStage === stage?.name)
314
- doFocus();
315
- }, [focusStage]);
316
- React.useLayoutEffect(doFocus, [ref, stage]);
317
- const handleFocus = React.useCallback(
318
- (sum) => {
319
- const focusedElement = document.activeElement;
320
- if (isChild(focusedElement, (current) => current === ref) && ref) {
321
- const buttons = [
322
- ...ref.querySelectorAll(".stage_btn:not(:disabled)")
323
- ];
324
- if (buttons) {
325
- const index = buttons.findIndex(
326
- (current) => current === focusedElement
327
- );
328
- if (buttons[index] === focusedElement && buttons[index - sum]) {
329
- buttons[index - sum].focus();
330
- controller.setState({ focusStage: stage?.name });
331
- }
332
- }
333
- }
334
- },
335
- [controller, ref, stage?.name]
336
- );
337
- const handleKeyDown = React.useCallback(
338
- (ev) => {
339
- if (ev.key.toLowerCase() === "arrowdown") {
340
- ev.preventDefault();
341
- handleFocus(-1);
342
- }
343
- if (ev.key.toLowerCase() === "arrowup") {
344
- ev.preventDefault();
345
- handleFocus(1);
346
- }
347
- },
348
- [handleFocus]
349
- );
350
- return stage ? /* @__PURE__ */ jsx(
351
- Box,
352
- {
353
- "data-name": stage?.name,
354
- className: `stage ${hasTransitionedIn && "in"} ${isMounted && "visible"}`,
355
- ref: setRef,
356
- onKeyDown: handleKeyDown,
357
- children: (hasTransitionedIn || isMounted) && stage?.buttons?.map((elem) => {
358
- return /* @__PURE__ */ jsx(StageButton, { button: elem }, elem.title);
359
- })
360
- }
361
- ) : null;
362
- });
363
-
364
- const Mini = observer(() => {
365
- const controller = useScheduler();
366
- const data = controller.getState().data;
367
- const stage = controller.getState()?.stageData;
368
- const stagesLength = controller.getState().stageData?.length;
369
- return /* @__PURE__ */ jsxs(
370
- Box,
371
- {
372
- ...getVariant("layout.execution.form.fields.scheduler"),
373
- className: "schedulerMini",
374
- onKeyDown: (ev) => {
375
- if (ev.key.toLowerCase() === "arrowleft") {
376
- const stageName = getSpecificParent(
377
- ev.target,
378
- (current) => current.classList.contains("stage")
379
- )?.dataset.name;
380
- const stageIndex = stage.findIndex(
381
- (current) => current.name === stageName
382
- );
383
- if (stageIndex <= 0)
384
- return;
385
- const nextStage = stage[stageIndex - 1]?.name;
386
- const firstButton = document.querySelector(
387
- `[data-name="${nextStage}"] .selected`
388
- ) || document.querySelector(
389
- `[data-name="${nextStage}"] button:not(:disabled)`
390
- );
391
- if (firstButton)
392
- firstButton.focus();
393
- }
394
- if (ev.key.toLowerCase() === "arrowright") {
395
- const stageName = getSpecificParent(
396
- ev.target,
397
- (current) => current.classList.contains("stage")
398
- )?.dataset.name;
399
- const stageIndex = stage.findIndex(
400
- (current) => current.name === stageName
401
- );
402
- if (stageIndex >= stage.length - 1)
403
- return;
404
- const nextStage = stage[stageIndex + 1]?.name;
405
- const firstButton = document.querySelector(
406
- `[data-name="${nextStage}"] .selected`
407
- ) || document.querySelector(
408
- `[data-name="${nextStage}"] button:not(:disabled)`
409
- );
410
- if (firstButton)
411
- firstButton.focus();
412
- }
413
- },
414
- children: [
415
- data?.weekNotConfigured && /* @__PURE__ */ jsx(Heading, { as: "h1", children: window.LBL_SCHED_WEEK_NOT_CONFIGURED }),
416
- !data?.weekNotConfigured && data?.tskSchDay && /* @__PURE__ */ jsxs(Fragment, { children: [
417
- /* @__PURE__ */ jsx(Stage, { stageIndex: 0 }),
418
- stagesLength >= 2 && /* @__PURE__ */ jsx(
419
- Icon,
420
- {
421
- name: "ArrowDown",
422
- title: "",
423
- className: "schedulerMini_faCaretDown"
424
- }
425
- ),
426
- /* @__PURE__ */ jsx(Stage, { stageIndex: 1 }),
427
- stagesLength >= 3 && /* @__PURE__ */ jsx(
428
- Icon,
429
- {
430
- name: "ArrowDown",
431
- title: "",
432
- className: "schedulerMini_faCaretDown"
433
- }
434
- ),
435
- /* @__PURE__ */ jsx(Stage, { stageIndex: 2 })
436
- ] }),
437
- !data?.weekNotConfigured && !data?.tskSchDay && /* @__PURE__ */ jsx(Box, { className: "box_spinner", title: window.WAIT_A_SECOND, children: /* @__PURE__ */ jsx(Spinner, {}) })
438
- ]
439
- }
440
- );
441
- });
442
-
443
- const SelectedDateInfo = observer(() => {
444
- const controller = useScheduler();
445
- const data = controller.getState().data;
446
- const selectedDay = controller.getState()?.selectedDay;
447
- return /* @__PURE__ */ jsxs(Box, { className: "selectedDateInfo", children: [
448
- selectedDay?.day && selectedDay?.hour && /* @__PURE__ */ jsx(Label, { children: formatMessage(window.LBL_SCHED_SELECTED_DATE, {
449
- TOK1: selectedDay?.day,
450
- TOK2: `${selectedDay.hour.slice(
451
- 0,
452
- -2
453
- )}:${selectedDay.hour.slice(2)}`
454
- }) }),
455
- !selectedDay?.day && !data?.weekNotConfigured && data?.tskSchDay && /* @__PURE__ */ jsx(Label, { sx: { display: "block" }, children: window.LBL_SCHED_DATE_NOT_SELECTED })
456
- ] });
457
- });
458
-
459
- const SchedulerController = createContext(null);
460
- function useScheduler() {
461
- return useContext(SchedulerController);
462
- }
463
- const SchedulerComponent = observer(
464
- ({
465
- controller,
466
- retriever,
467
- properties,
468
- getController
469
- }) => {
470
- if (!controller && !(properties && retriever)) {
471
- console.error(
472
- "Need to create controller or pass retriever and properties"
473
- );
474
- return null;
475
- }
476
- const [actualController] = useState(() => {
477
- const ctrl = controller ?? new Scheduler(properties, retriever);
478
- getController?.(ctrl);
479
- ctrl.tableController.setPlugins((current) => {
480
- if (!current.some((plugin) => plugin instanceof SchedulerTablePlugin)) {
481
- current.push(new SchedulerTablePlugin());
482
- }
483
- return current;
484
- });
485
- return ctrl;
486
- });
487
- const breakPoint = useBreakpointIndex();
488
- return /* @__PURE__ */ jsx(SchedulerController.Provider, { value: actualController, children: /* @__PURE__ */ jsxs(
489
- Box,
490
- {
491
- ...getVariant("layout.common.components.scheduler"),
492
- className: "scheduler",
493
- children: [
494
- /* @__PURE__ */ jsx(Navigation, {}),
495
- /* @__PURE__ */ jsx(SelectedDateInfo, {}),
496
- breakPoint > 4 ? /* @__PURE__ */ jsx(SchedTable, {}) : /* @__PURE__ */ jsx(Mini, {})
497
- ]
498
- }
499
- ) });
500
- }
501
- );
502
-
503
- export { SchedulerComponent };
1
+ export { SchedulerComponent } from './Scheduler/index.js';
504
2
  //# sourceMappingURL=index.js.map