Fix #181 Required values in setState (#184)

* FIX: #181 Required values in setstate * Rename files and reorder structure * Values should not be set in setState * Values can be empty * Disable Input when switch is active
MiRo1310 · Sep 15, 2024 · d41091f · d41091f
1 parent 98d1cc9
commit d41091f
Show file tree

Hide file tree

Showing 38 changed files with 207 additions and 174 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -17,6 +17,7 @@
 		"alexa",
 		"azul",
 		"csstype",
+		"dropbox",
 		"echart",
 		"Echart",
 		"echarts",

diff --git a/README.md b/README.md
@@ -37,6 +37,7 @@ You can create different groups with separate menus, and then assign users to th
 ### **WORK IN PROGRESS**
 
 -   FIX: #176 Error in setDynamic value
+-   FIX: #181 Required values in setState
 
 ### 2.0.0 (2024-08-11)
 

diff --git a/admin/app.d.ts b/admin/app.d.ts
@@ -1,4 +1,5 @@
 import { GenericAppProps, GenericAppState } from "@iobroker/adapter-react-v5";
+import { Tab } from '@mui/material';
 
 export interface AdditionalPropInfo extends GenericAppProps {
 	themeName: string;
@@ -57,7 +58,7 @@ export interface StateTabNavigation {
 	editedValueFromHelperText: string | null;
 	isOK: boolean;
 	helperText: boolean;
-	newRow: Nav;
+	newRow: RowsNav;
 	call: string;
 	nav: string;
 	text: string;
@@ -101,7 +102,7 @@ export interface SetState {
 
 export interface PropsTableDndNav {
 	entries: NavEntries[];
-	tableData: Nav | undefined;
+	tableData: NavData | undefined;
 	card: string;
 	activeMenu?: string;
 	openAddRowCard: (value: any) => void;
@@ -111,13 +112,23 @@ export interface PropsTableDndNav {
 	callback: CallbackFunctions;
 }
 
+interface NavData {
+	[key: string]: RowsNav[];
+}
+
 export interface StateTableDndNav {
-	rows: Rows[];
+	rows: RowsNav[];
 	dropStart: number;
 	dropOver: number;
 	dropEnd: number;
 	mouseOverNoneDraggable: boolean;
 }
+export interface RowsNav {
+	call: string;
+	parse_mode: BooleanString;
+	text: string;
+	value: string;
+}
 
 export interface PropsTabAction {
 	callback: Callback;
@@ -127,7 +138,7 @@ export interface PropsTabAction {
 
 export interface Data {
 	activeMenu?: string;
-	nav?: TableData;
+	nav?: NavData;
 	state: AdditionalStateInfo;
 	data?: any;
 	action?: any;
@@ -195,7 +206,7 @@ type BooleanString = "true" | "false";
 
 export interface PropsRowNavCard {
 	entries: NavEntries[];
-	newRow: Nav;
+	newRow: RowsNav;
 	callback: { onchange: (data: ChangeInputNav) => void };
 	inUse: boolean;
 	openHelperText: (value: string) => void;
@@ -242,6 +253,7 @@ export interface InputProps {
 	children?: ReactNode;
 	function?: string;
 	index?: number;
+	disabled?: boolean;
 	onMouseOver?: (e: any, setState: any) => void;
 	onMouseLeave?: (e: any, setState: any) => void;
 	setState?: SetStateFunction;
@@ -404,7 +416,7 @@ export interface StatePopupContainer {
 }
 export interface PropsRowEditPopupCard {
 	entries: any;
-	newRow: any;
+	newRow: ActionNewRowProps;
 	data: any;
 	openHelperText: any;
 	subCard: any;
@@ -413,8 +425,22 @@ export interface PropsRowEditPopupCard {
 	newUnUsedTrigger: any;
 	callback?: { setState: SetStateFunction };
 }
+
+export type BooleanString = "true" | "false";
+
+export interface ActionNewRowProps {
+	IDs: string[];
+	ack: BooleanString[];
+	confirm: BooleanString[];
+	parse_mode: BooleanString[];
+	returnText: string[];
+	values: string[];
+	trigger: string[];
+	switch_checkbox: BooleanString[];
+
+}
 export interface StateRowEditPopupCard {
-	rows: Rows[];
+	rows: RowsSetState[];
 	trigger: string;
 	data: any;
 	showSelectId: boolean;
@@ -426,9 +452,15 @@ export interface StateRowEditPopupCard {
 	mouseOverNoneDraggable: boolean;
 	itemForID: string;
 }
-export interface Rows {
+export interface RowsSetState {
 	IDs: string;
-	call?: string;
+	ack: ActionNewRowProps;
+	confirm: BooleanString;
+	parse_mode: BooleanString;
+	returnText: string;
+	values: string;
+	trigger: string;
+	switch_checkbox: BooleanString;
 }
 
 export interface AppState {
@@ -590,7 +622,7 @@ export interface Native {
 }
 export interface NativeData {
 	action: { [key: string]: Actions };
-	nav: { [key: string]: Nav };
+	nav: { [key: string]: RowsNav };
 }
 export interface Actions {
 	get: Get[];
@@ -608,13 +640,6 @@ export interface HttpRequest {
 	trigger: string[];
 	delay: string[];
 }
-export interface Nav {
-	// nav: string
-	call: string;
-	value: string;
-	text: string;
-	parse_mode: BooleanString;
-}
 export interface Set {
 	ack: BooleanString[];
 	confirm: BooleanString[];

diff --git a/admin/build/index.js b/admin/build/index.js
diff --git a/admin/build/index.js.map b/admin/build/index.js.map
diff --git a/admin/src/app.tsx b/admin/src/app.tsx
@@ -5,11 +5,11 @@ import { AdminConnection } from "@iobroker/adapter-react-v5";
 import { updateTriggerForSelect } from "@/lib/actionUtils";
 import { GenericApp } from "@iobroker/adapter-react-v5";
 
-import HeaderIconBar from "@/pages/HeaderIconBar/HeaderIconBar";
-import MainContent from "@/pages/MainContent";
-import MainDropBox from "@/pages/MainDropBox";
-import MainTriggerOverview from "@/pages/TriggerOverview";
-import DoubleTriggerInfo from "@/pages/DoubleTriggerInfo";
+import AppHeaderIconBar from "@/pages/AppHeaderIconBar";
+import AppContent from "@/pages/AppContent";
+import AppDropBox from "@/pages/AppDropBox";
+import AppTriggerOverview from "@/pages/AppTriggerOverview";
+import AppDoubleTriggerInfo from "@/pages/AppDoubleTriggerInfo";
 
 import getIobrokerData from "@/lib/socket";
 import helperFunction from "@/lib/Utils";
@@ -176,7 +176,7 @@ class App extends GenericApp<AdditionalPropInfo, AdditionalStateInfo> {
 		return (
 			<div className={`App row ${this.props.themeName}`}>
 				<Grid container spacing={1}>
-					<HeaderIconBar
+					<AppHeaderIconBar
 						common={this.common}
 						native={this.state.native}
 						onError={(text) => this.setState({ errorText: (text || text === 0) && typeof text !== "string" ? text.toString() : text })}
@@ -187,7 +187,7 @@ class App extends GenericApp<AdditionalPropInfo, AdditionalStateInfo> {
 						onChange={(attr, value, cb) => this.updateNativeValue(attr, value, cb)}
 					/>
 
-					<MainContent
+					<AppContent
 						callback={{
 							setState: this.setState,
 							updateNative: (attr, value, cb) => this.updateNativeValue(attr, value, cb),
@@ -199,7 +199,7 @@ class App extends GenericApp<AdditionalPropInfo, AdditionalStateInfo> {
 					/>
 				</Grid>
 				{this.state.showDropBox ? (
-					<MainDropBox
+					<AppDropBox
 						state={this.state}
 						callback={{
 							setState: this.setState,
@@ -209,15 +209,15 @@ class App extends GenericApp<AdditionalPropInfo, AdditionalStateInfo> {
 					/>
 				) : null}
 				{this.state.showTriggerInfo ? (
-					<MainTriggerOverview
+					<AppTriggerOverview
 						state={this.state}
 						callback={{
 							setState: this.setState,
 							updateNative: (attr, value, cb) => this.updateNativeValue(attr, value, cb),
 						}}
 					/>
 				) : null}
-				{this.state.doubleTrigger.length > 0 ? <DoubleTriggerInfo state={this.state} /> : null}
+				{this.state.doubleTrigger.length > 0 ? <AppDoubleTriggerInfo state={this.state} /> : null}
 				{this.renderError()}
 				{this.renderToast()}
 				{this.renderSaveCloseButtons()}

diff --git a/admin/src/components/btn-Input/input.tsx b/admin/src/components/btn-Input/input.tsx
@@ -14,6 +14,8 @@ class Input extends Component<InputProps> {
 			this.props.callback({ val: event.target.value, index: this.props.index, id: this.props.id });
 		}
 	};
+
+	getClassName = () => {};
 	render() {
 		const container = {
 			width: this.props.width ? this.props.width : "auto",
@@ -26,7 +28,7 @@ class Input extends Component<InputProps> {
 			fontSize: "16px",
 			border: "none",
 			borderColor: "transparent",
-			borderBottom: "1px solid #ccc",
+			borderBottom: "1px solid #ccc ",
 		};
 		const styleChildren = {
 			display: "inline",
@@ -42,6 +44,7 @@ class Input extends Component<InputProps> {
 						className="InputField noneDraggable"
 						placeholder={I18n.t(this.props.placeholder || "")}
 						value={this.props.value}
+						disabled={this.props.disabled}
 						onChange={this.onChangeHandler}
 						spellCheck={this.props.spellCheck ? this.props.spellCheck : false}
 						onMouseOver={this.props.onMouseOver ? (e) => this.props.onMouseOver?.(e, this.props.setState) : undefined}

diff --git a/admin/src/components/popupCards/rowEditPopupCard/template copy.tsx b/admin/src/components/popupCards/rowEditPopupCard/template copy.tsx
diff --git a/admin/src/pages/MainContent.tsx → admin/src/pages/AppContent.tsx b/admin/src/pages/MainContent.tsx → admin/src/pages/AppContent.tsx
@@ -1,9 +1,9 @@
 import React, { Component } from "react";
 import { TabContext } from "@mui/lab";
 import { Grid, Box } from "@mui/material";
-import TabListing from "@/pages/mainContent/TabListing";
-import MainActions from "@/pages/mainContent/MainActions";
-import Tabs from "@/pages/mainContent/Tabs";
+import TabListing from "@/pages/AppContentTabsListing";
+import MainActions from "@/pages/AppContentHeader";
+import Tabs from "@/pages/AppContentTab";
 import { Properties } from "csstype";
 import { PropsMainContent } from "admin/app";
 

diff --git a/admin/src/pages/mainContent/MainActions.tsx → admin/src/pages/AppContentHeader.tsx b/admin/src/pages/mainContent/MainActions.tsx → admin/src/pages/AppContentHeader.tsx
@@ -1,7 +1,7 @@
 import React, { Component } from "react";
 import { Grid } from "@mui/material";
-import HeaderMenu from "@/pages/mainContent/actions/HeaderMenu";
-import HeaderTelegramUsers from "@/pages/mainContent/actions/HeaderTelegramUsers";
+import HeaderMenu from "@/pages/AppContentHeaderMenu";
+import HeaderTelegramUsers from "@/pages/AppContentHeaderTelegramUsers";
 import { PropsMainActions } from "admin/app";
 
 class MainActions extends Component<PropsMainActions> {

diff --git a/.../pages/mainContent/actions/HeaderMenu.tsx → admin/src/pages/AppContentHeaderMenu.tsx b/.../pages/mainContent/actions/HeaderMenu.tsx → admin/src/pages/AppContentHeaderMenu.tsx
@@ -1,8 +1,8 @@
 import React, { Component } from "react";
 import { Grid } from "@mui/material";
-import Button from "../../../components/btn-Input/Button";
-import BtnCard from "./HeaderMenu/BtnCard/BtnCard";
-import MenuPopupCard from "./HeaderMenu/PopupMenu/menuPopupCard";
+import Button from "../components/btn-Input/Button";
+import BtnCard from "./AppContentHeaderMenuButtons";
+import MenuPopupCard from "./AppContentHeaderMenuPopupCard";
 import { I18n } from "@iobroker/adapter-react-v5";
 import { PropsHeaderMenu } from "admin/app";
 

diff --git a/...nt/actions/HeaderMenu/BtnCard/BtnCard.tsx → ...src/pages/AppContentHeaderMenuButtons.tsx b/...nt/actions/HeaderMenu/BtnCard/BtnCard.tsx → ...src/pages/AppContentHeaderMenuButtons.tsx
@@ -1,13 +1,13 @@
 import React, { Component } from "react";
-import Input from "../../../../../components/btn-Input/input";
+import Input from "../components/btn-Input/input";
 import { Grid } from "@mui/material";
-import Button from "../../../../../components/btn-Input/Button";
+import Button from "../components/btn-Input/Button";
 import { I18n } from "@iobroker/adapter-react-v5";
 import ConfirmDialog from "@iobroker/adapter-react-v5/Dialogs/Confirm";
-import PopupContainer from "../../../../../components/popupCards/PopupContainer";
-import RenameCard from "../../../../../components/popupCards/RenameCard";
+import PopupContainer from "../components/popupCards/PopupContainer";
+import RenameCard from "../components/popupCards/RenameCard";
 
-import { deepCopy } from "../../../../../lib/Utils.js";
+import { deepCopy } from "../lib/Utils.js";
 import { PropsBtnCard, StateBtnCard } from "admin/app";
 
 function checkMenuName(menu): string {

diff --git a/...ns/HeaderMenu/PopupMenu/menuPopupCard.tsx → ...c/pages/AppContentHeaderMenuPopupCard.tsx b/...ns/HeaderMenu/PopupMenu/menuPopupCard.tsx → ...c/pages/AppContentHeaderMenuPopupCard.tsx
@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-import Button from "../../../../../components/btn-Input/Button";
+import Button from "../components/btn-Input/Button";
 import { PropsMenuPopupCard } from "admin/app";
 
 class MenuPopupCard extends Component<PropsMenuPopupCard> {

diff --git a/...inContent/actions/HeaderTelegramUsers.tsx → ...c/pages/AppContentHeaderTelegramUsers.tsx b/...inContent/actions/HeaderTelegramUsers.tsx → ...c/pages/AppContentHeaderTelegramUsers.tsx
@@ -1,9 +1,9 @@
 import React, { Component } from "react";
-import TelegramUserCard from "./TelegramUserCard/TelegramUserCard";
-import Button from "../../../components/btn-Input/Button";
+import TelegramUserCard from "./AppContentHeaderTelegramUsersUserCard";
+import Button from "../components/btn-Input/Button";
 import { Grid } from "@mui/material";
 import { I18n } from "@iobroker/adapter-react-v5";
-import Checkbox from "../../../components/btn-Input/checkbox";
+import Checkbox from "../components/btn-Input/checkbox";
 import { PropsHeaderTelegramUsers, StateHeaderTelegramUsers } from "admin/app";
 
 class HeaderTelegramUsers extends Component<PropsHeaderTelegramUsers, StateHeaderTelegramUsers> {

diff --git a/...ons/TelegramUserCard/TelegramUserCard.tsx → ...AppContentHeaderTelegramUsersUserCard.tsx b/...ons/TelegramUserCard/TelegramUserCard.tsx → ...AppContentHeaderTelegramUsersUserCard.tsx
@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-import Checkbox from "../../../../components/btn-Input/checkbox";
+import Checkbox from "../components/btn-Input/checkbox";
 import { PropsTelegramUserCard, StateTelegramUserCard } from "admin/app";
 
 class TelegramUserCard extends Component<PropsTelegramUserCard, StateTelegramUserCard> {

diff --git a/admin/src/pages/mainContent/Tabs.tsx → admin/src/pages/AppContentTab.tsx b/admin/src/pages/mainContent/Tabs.tsx → admin/src/pages/AppContentTab.tsx
@@ -1,7 +1,7 @@
 import React, { Component } from "react";
-import TabNavigation from "@/pages/mainContent/tabs/TabNavigation/TabNavigation";
-import TabAction from "@/pages/mainContent/tabs/TabAction/TabAction";
-import Settings from "@/pages/mainContent/tabs/Settings";
+import TabNavigation from "@/pages/AppContentTabNavigation";
+import TabAction from "@/pages/AppContentTabAction";
+import Settings from "@/pages/AppContentTabSettings";
 import { TabPanel } from "@mui/lab";
 import { navEntries } from "@/config/entries";
 import { AdditionalStateInfo, CallbackFunctions } from "admin/app";

diff --git a/.../mainContent/tabs/TabAction/TabAction.tsx → admin/src/pages/AppContentTabAction.tsx b/.../mainContent/tabs/TabAction/TabAction.tsx → admin/src/pages/AppContentTabAction.tsx
@@ -1,8 +1,8 @@
 import React, { Component } from "react";
 import { TabContext, TabPanel } from "@mui/lab";
-import ActionCard from "./Action/ActionCard";
-import { tabValues } from "../../../../config/entries";
-import TabActionTabs from "./TabActionTabs";
+import ActionCard from "./AppContentTabActionContent";
+import { tabValues } from "../config/entries";
+import TabActionTabs from "./AppContentTabActionTabsListing";
 import { PropsTabAction, StateTabAction } from "admin/app";
 
 class TabAction extends Component<PropsTabAction, StateTabAction> {