Jannex
/
admin-dashboard-web
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

checkbox

main
alex 2023-10-29 23:20:48 +01:00
parent 5d1b9bec2c
commit ec337b4c5b
4 changed files with 216 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/Handlers/WebSocketMessageHandler.js
View File

@ -298,6 +298,8 @@ export function handleWebSocketMessage(
// update input value
console.log("body", body.inputType, body.value, body.element);
if (body.inputType === "text") {
// html based DOM manipulation
const foundInput = document.getElementById(body.element);
@ -306,7 +308,7 @@ export function handleWebSocketMessage(
// this timeout is needed because the previous useState for the lockedByUserId takes some milliseconds to complete
setTimeout(() => setNativeValue(foundInput, body.value), 50);
}
} else if (body.inputType === "select") {
} else if (body.inputType === "select" || body.inputType === "checkbox") {
groupTasksContext.setSelectInputs((prev) => {
const newInputs = { ...prev };

149
src/Pages/GroupTasks/Overview/GroupTasksViewModal.js
View File

@ -1,18 +1,20 @@
import {
Alert,
Button,
Checkbox,
Form,
Input,
InputNumber,
Popover,
Space,
Steps,
Tag,
Typography,
notification,
} from "antd";
import { useEffect, useRef } from "react";
import { useNavigate, useParams } from "react-router-dom";
import {
AppStyle,
BrowserTabSession,
Constants,
FormatDatetime,
@ -36,7 +38,11 @@ import { useWebSocketContext } from "../../../Contexts/WebSocketContext";
import { useGroupTasksContext } from "../../../Contexts/GroupTasksContext";
import { useAppContext } from "../../../Contexts/AppContext";
import { SentMessagesCommands } from "../../../Handlers/WebSocketMessageHandler";
import { SelectMachineComponent } from "./GroupTypeSelectionModal";
import {
SelectComponent,
SelectMachineComponent,
} from "./GroupTypeSelectionModal";
import { MyFormItem, MyFormItemLabel } from ".";
export default function GroupTasksViewModal({ isOpen }) {
const webSocketContext = useWebSocketContext();
@ -727,6 +733,7 @@ function InputRequiredHandler({
taskLockedByUserId,
}) {
const { t } = useTranslation();
const groupTasksContext = useGroupTasksContext();
const globalInputs = JSON.parse(currentGroupTask.GlobalInputs);
const stepInputs = JSON.parse(groupTaskStepInputs);
@ -753,19 +760,6 @@ function InputRequiredHandler({
return globalInputValue !== undefined ? globalInputValue.value : "";
};
const getLabel = (displayName, groupTaskParameter) => {
return groupTaskParameter.global ? (
<>
{displayName}
<Tag style={{ marginLeft: 6 }} color="purple">
{t("groupTasks.tag.global")}
</Tag>
</>
) : (
displayName
);
};
let lastChange = useRef();
let typingTimer = useRef();
@ -788,7 +782,7 @@ function InputRequiredHandler({
};
if (inputType === "text") {
// element is only needed for text inputs for the DOM manipulation
// element is only needed for text and checkbox inputs for the DOM manipulation
data.element = `${currentGroupTaskId}-${step}-${groupTaskParameterName}`;
} else {
data.data = notes;
@ -833,13 +827,11 @@ function InputRequiredHandler({
switch (groupTaskParameter.type) {
case "text":
return (
<Form.Item
<MyFormItem
key={index}
label={getLabel(
groupTaskParameter.displayName,
groupTaskParameter
)}
required
t={t}
labelDisplayName={groupTaskParameter.displayName}
isGlobal={groupTaskParameter.global}
>
<Input
id={`${currentGroupTask.Id}-${step}-${groupTaskParameter.parameterName}`}
@ -854,17 +846,15 @@ function InputRequiredHandler({
)
}
/>
</Form.Item>
</MyFormItem>
);
case "number":
return (
<Form.Item
<MyFormItem
key={index}
label={getLabel(
groupTaskParameter.displayName,
groupTaskParameter
)}
required
t={t}
labelDisplayName={groupTaskParameter.displayName}
isGlobal={groupTaskParameter.global}
>
<InputNumber
id={`${currentGroupTask.Id}-${step}-${groupTaskParameter.parameterName}`}
@ -881,17 +871,15 @@ function InputRequiredHandler({
)
}
/>
</Form.Item>
</MyFormItem>
);
case "textarea":
return (
<Form.Item
<MyFormItem
key={index}
label={getLabel(
groupTaskParameter.displayName,
groupTaskParameter
)}
required
t={t}
labelDisplayName={groupTaskParameter.displayName}
isGlobal={groupTaskParameter.global}
>
<TextArea
id={`${currentGroupTask.Id}-${step}-${groupTaskParameter.parameterName}`}
@ -906,17 +894,15 @@ function InputRequiredHandler({
)
}
/>
</Form.Item>
</MyFormItem>
);
case "select_machine":
return (
<Form.Item
<MyFormItem
key={index}
label={getLabel(
groupTaskParameter.displayName,
groupTaskParameter
)}
required
t={t}
labelDisplayName={groupTaskParameter.displayName}
isGlobal={groupTaskParameter.global}
>
<SelectMachineComponent
disabled={taskLockedByUserId !== ""}
@ -933,15 +919,84 @@ function InputRequiredHandler({
)
}
/>
</Form.Item>
</MyFormItem>
);
case "checkbox":
return (
<MyFormItem
key={index}
t={t}
style={{
marginBottom:
groupTaskParameters.length > index &&
groupTaskParameters[index + 1].type === "checkbox"
? 0
: AppStyle.app.margin,
}}
>
<Checkbox
defaultChecked={getDefaultValue(groupTaskParameter)}
disabled={taskLockedByUserId !== ""}
checked={
groupTaskStepInputs[groupTaskParameter.parameterName]?.value
}
onChange={(e) => {
groupTasksContext.setSelectInputs((prevState) => ({
...prevState,
[groupTaskParameter.parameterName]: {
value: e.target.checked,
},
}));
handleInputChange(
"checkbox",
e.target.checked,
currentGroupTask.Id,
groupTaskParameter.parameterName
);
}}
>
{console.log("checked", groupTaskStepInputs)}
<MyFormItemLabel
t={t}
displayName={groupTaskParameter.displayName}
isGlobal={groupTaskParameter.global}
/>
</Checkbox>
</MyFormItem>
);
case "select":
return (
<MyFormItem
key={index}
t={t}
labelDisplayName={groupTaskParameter.displayName}
isGlobal={groupTaskParameter.global}
>
<SelectComponent
t={t}
disabled={taskLockedByUserId !== ""}
options={groupTaskParameter.options}
parameterName={groupTaskParameter.parameterName}
onSelectChange={(value) =>
handleInputChange(
"select",
value,
currentGroupTask.Id,
groupTaskParameter.parameterName
)
}
/>
</MyFormItem>
);
default:
return (
<p key={index}>
<Typography.Text type="danger" key={index}>
Type <b>{groupTaskParameter.type}</b> not implemented. Was
specified in: <b>{groupTaskParameter.displayName}</b>
</p>
specified in: <b>{groupTaskParameter.displayName}</b> <br />
<br />
</Typography.Text>
);
}
})}

117
src/Pages/GroupTasks/Overview/GroupTypeSelectionModal.js
View File

@ -12,7 +12,7 @@ import {
Typography,
notification,
} from "antd";
import { AppStyle, Constants, GetUuid, myFetch } from "../../../utils";
import { AppStyle, GetUuid, myFetch } from "../../../utils";
import { InfoCircleOutlined } from "@ant-design/icons";
import TextArea from "antd/es/input/TextArea";
import { useTranslation } from "react-i18next";
@ -20,7 +20,7 @@ import { useWebSocketContext } from "../../../Contexts/WebSocketContext";
import { useGroupTasksContext } from "../../../Contexts/GroupTasksContext";
import { SentMessagesCommands } from "../../../Handlers/WebSocketMessageHandler";
import { useEffect, useRef, useState } from "react";
import Paragraph from "antd/es/skeleton/Paragraph";
import { MyFormItem, MyFormItemLabel } from ".";
export default function GroupTypeSelectionModal({
isOpen,
@ -260,10 +260,16 @@ export default function GroupTypeSelectionModal({
);
}
export function SelectComponent({ t, globalInput }) {
export function SelectComponent({
t,
options,
parameterName,
onSelectChange,
disabled,
}) {
const groupTasksContext = useGroupTasksContext();
if (globalInput.options === null) {
if (options === undefined) {
return (
<Typography.Text type="danger">
Options for this input not specified in the index.json
@ -273,23 +279,29 @@ export function SelectComponent({ t, globalInput }) {
return (
<Select
disabled={disabled}
placeholder={t(
"groupTasks.groupTypeSelectionModal.select.valuePlaceholder"
)}
style={{ width: "100%" }}
options={globalInput.options.map((option) => {
options={options.map((option) => {
return {
label: option,
value: option,
};
})}
onChange={(value) => {
value={groupTasksContext.selectInputs[parameterName]?.value}
onSelect={(value) => {
groupTasksContext.setSelectInputs((prevState) => ({
...prevState,
[globalInput.parameterName]: {
[parameterName]: {
value: value,
},
}));
if (onSelectChange !== undefined) {
onSelectChange(value);
}
}}
/>
);
@ -376,9 +388,6 @@ export function SelectMachineComponent({
});
}, []);
const selectedInput =
groupTasksContext.selectInputs[globalInput.parameterName]?.value;
return (
<Select
disabled={disabled}
@ -388,7 +397,7 @@ export function SelectMachineComponent({
)}
style={{ width: "100%" }}
options={options}
value={selectedInput}
value={groupTasksContext.selectInputs[globalInput.parameterName]?.value}
onSelect={(value) => {
const parsedNotes = JSON.parse(responseData.current[value].Notes);
@ -415,23 +424,6 @@ function GroupGlobalInputs({
}) {
const { t } = useTranslation();
const getLabel = (displayName) => {
return (
<>
{displayName === undefined || displayName === "" ? (
<Typography.Text type="danger">
DisplayName is missing
</Typography.Text>
) : (
displayName
)}
<Tag style={{ marginLeft: 6 }} color="purple">
{t("groupTasks.tag.global")}
</Tag>
</>
);
};
var elements = [];
if (currentSelectedModalGroupType !== undefined) {
@ -444,67 +436,72 @@ function GroupGlobalInputs({
switch (globalInput.type) {
case "text":
elements.push(
<Form.Item
<MyFormItem
key={index}
label={getLabel(globalInput.displayName)}
required
t={t}
labelDisplayName={globalInput.displayName}
isGlobal={true}
>
<Input id={globalInput.parameterName} />
</Form.Item>
</MyFormItem>
);
break;
case "number":
elements.push(
<Form.Item
<MyFormItem
key={index}
label={getLabel(globalInput.displayName)}
required
t={t}
labelDisplayName={globalInput.displayName}
isGlobal={true}
>
<InputNumber
style={{ width: "100%" }}
max={Number.MAX_SAFE_INTEGER}
id={globalInput.parameterName}
/>
</Form.Item>
</MyFormItem>
);
break;
case "textarea":
elements.push(
<Form.Item
<MyFormItem
key={index}
label={getLabel(globalInput.displayName)}
required
t={t}
labelDisplayName={globalInput.displayName}
isGlobal={true}
>
<TextArea id={globalInput.parameterName} />
</Form.Item>
</MyFormItem>
);
break;
case "select_machine":
elements.push(
<Form.Item
<MyFormItem
key={index}
label={getLabel(globalInput.displayName)}
required
t={t}
labelDisplayName={globalInput.displayName}
isGlobal={true}
>
<SelectMachineComponent
t={t}
notificationApi={notificationApi}
globalInput={globalInput}
/>
</Form.Item>
</MyFormItem>
);
break;
case "checkbox":
elements.push(
<Form.Item
<MyFormItem
key={index}
required
t={t}
isGlobal={true}
style={{
marginBottom:
group.globalInputs.length > index &&
group.globalInputs[index + 1].type === "checkbox"
? 0
: 12,
: AppStyle.app.margin,
}}
>
<Checkbox
@ -516,20 +513,32 @@ function GroupGlobalInputs({
: false
}
>
{getLabel(globalInput.displayName)}
{
<MyFormItemLabel
t={t}
displayName={globalInput.displayName}
isGlobal={true}
/>
}
</Checkbox>
</Form.Item>
</MyFormItem>
);
break;
case "select":
elements.push(
<Form.Item
<MyFormItem
key={index}
label={getLabel(globalInput.displayName)}
required
t={t}
labelDisplayName={globalInput.displayName}
isGlobal={true}
>
<SelectComponent t={t} globalInput={globalInput} />
</Form.Item>
<SelectComponent
t={t}
globalInput={globalInput}
options={globalInput.options}
parameterName={globalInput.parameterName}
/>
</MyFormItem>
);
break;

49
src/Pages/GroupTasks/Overview/index.js
View File

@ -1,4 +1,13 @@
import { Button, Col, Popconfirm, Result, Row } from "antd";
import {
Button,
Col,
Form,
Popconfirm,
Result,
Row,
Tag,
Typography,
} from "antd";
import { useEffect, useState } from "react";
import GroupTasksViewModal from "./GroupTasksViewModal";
import GroupTypeSelectionModal from "./GroupTypeSelectionModal";
@ -162,3 +171,41 @@ export default function GroupTasks({ isGroupTasksViewModalOpen }) {
</>
);
}
export function MyFormItem({ children, t, style, labelDisplayName, isGlobal }) {
return (
<Form.Item
style={style}
required
label={
labelDisplayName !== undefined && (
<MyFormItemLabel
t={t}
displayName={labelDisplayName}
isGlobal={isGlobal}
/>
)
}
>
{children}
</Form.Item>
);
}
export function MyFormItemLabel({ t, displayName, isGlobal }) {
return (
<>
{displayName === undefined || displayName === "" ? (
<Typography.Text type="danger">DisplayName is missing</Typography.Text>
) : (
displayName
)}
{isGlobal && (
<Tag style={{ marginLeft: 6 }} color="purple">
{t("groupTasks.tag.global")}
</Tag>
)}
</>
);
}