From c0dda229d9bd6b2b53a84f67c35a819b246cbe92 Mon Sep 17 00:00:00 2001 From: selankon Date: Mon, 28 Oct 2024 15:31:49 +0100 Subject: [PATCH] chore(meshconfig): bulk bugfix --- .../src/components/ConfigSection.tsx | 8 ++- .../src/components/OptionForm.tsx | 26 +++++---- .../src/components/modals.tsx | 17 ++++-- ...nfiguration.tsx => LimeConfigEditForm.tsx} | 54 +++++++++---------- .../src/meshConfigPage.tsx | 4 +- src/components/buttons/button.tsx | 24 ++++----- 6 files changed, 75 insertions(+), 58 deletions(-) rename plugins/lime-plugin-mesh-wide-config/src/containers/{EditConfiguration.tsx => LimeConfigEditForm.tsx} (53%) diff --git a/plugins/lime-plugin-mesh-wide-config/src/components/ConfigSection.tsx b/plugins/lime-plugin-mesh-wide-config/src/components/ConfigSection.tsx index 7e02dbcb..c89813c3 100644 --- a/plugins/lime-plugin-mesh-wide-config/src/components/ConfigSection.tsx +++ b/plugins/lime-plugin-mesh-wide-config/src/components/ConfigSection.tsx @@ -39,7 +39,7 @@ export const ConfigSection = ({ keyString={key} /> ))} - + ); }; @@ -106,7 +106,11 @@ export const SectionEditOrDelete = ({ name }) => { ); }; -export const AddNewElementBtn = ({ sectionName }: { sectionName?: string }) => { +export const AddNewConfigSection = ({ + sectionName, +}: { + sectionName?: string; +}) => { const { open, onOpen, onClose } = useDisclosure(); const { showToast } = useToast(); diff --git a/plugins/lime-plugin-mesh-wide-config/src/components/OptionForm.tsx b/plugins/lime-plugin-mesh-wide-config/src/components/OptionForm.tsx index 17c0cb2c..46037e08 100644 --- a/plugins/lime-plugin-mesh-wide-config/src/components/OptionForm.tsx +++ b/plugins/lime-plugin-mesh-wide-config/src/components/OptionForm.tsx @@ -1,5 +1,5 @@ -import { Trans } from "@lingui/macro"; -import { StateUpdater, useState } from "preact/hooks"; +import { Trans, t } from "@lingui/macro"; +import { StateUpdater, useEffect, useState } from "preact/hooks"; import { Controller, useFormContext } from "react-hook-form"; import { useDisclosure } from "components/Modal/useDisclosure"; @@ -104,7 +104,6 @@ export const EditableField = ({ setIsEditing?: StateUpdater; }) => { const { control, setValue, watch, getValues } = useFormContext(); - // const { showToast } = useToast(); const value = watch(name); const [initialState] = useState(value); @@ -117,6 +116,13 @@ export const EditableField = ({ setValue(name, [...value, ""]); // Update form values }; + // Ensure the list has at least one item at the start + useEffect(() => { + if (isList && value.length === 0) { + setValue(name, [""]); + } + }, [isList, value, name, setValue]); + return ( <> {isList ? ( @@ -126,6 +132,13 @@ export const EditableField = ({ key={index} control={control} name={`${name}[${index}]`} + rules={{ + minLength: { + value: 1, + message: t`Minimum length is 1`, + }, + required: t`This field cannot be empty`, + }} render={({ field }) => (
( - + )} /> diff --git a/plugins/lime-plugin-mesh-wide-config/src/components/modals.tsx b/plugins/lime-plugin-mesh-wide-config/src/components/modals.tsx index f89c8617..2b040f01 100644 --- a/plugins/lime-plugin-mesh-wide-config/src/components/modals.tsx +++ b/plugins/lime-plugin-mesh-wide-config/src/components/modals.tsx @@ -1,4 +1,4 @@ -import { Trans } from "@lingui/macro"; +import { Trans, t } from "@lingui/macro"; import { Label } from "@tanstack/react-query-devtools/build/lib/Explorer"; import { FormProvider, useForm } from "react-hook-form"; @@ -60,12 +60,18 @@ export const AddNewSectionModal = ({ defaultValues: { name: "", value: "", values: [""], isList: false }, }); + const handleSuccess = (data: AddNewSectionFormProps) => { + onSuccess(data); // Call the parent onSuccess handler + reset(); // Reset the form after successful submission + }; + const { register, handleSubmit, setValue, formState: { errors }, watch, + reset, } = fmethods; let title = Add new section; @@ -80,7 +86,7 @@ export const AddNewSectionModal = ({ title={title} successBtnText={Add} {...rest} - onSuccess={handleSubmit(onSuccess)} + onSuccess={handleSubmit(handleSuccess)} > Name} register={register} options={{ - required: "Name is required", - minLength: { value: 1, message: "Minimum length is 1" }, + required: t`This field cannot be empty`, + minLength: { + value: 1, + message: t`Minimum length is 1`, + }, }} error={errors.name?.message} /> diff --git a/plugins/lime-plugin-mesh-wide-config/src/containers/EditConfiguration.tsx b/plugins/lime-plugin-mesh-wide-config/src/containers/LimeConfigEditForm.tsx similarity index 53% rename from plugins/lime-plugin-mesh-wide-config/src/containers/EditConfiguration.tsx rename to plugins/lime-plugin-mesh-wide-config/src/containers/LimeConfigEditForm.tsx index fd9f6357..2506ec72 100644 --- a/plugins/lime-plugin-mesh-wide-config/src/containers/EditConfiguration.tsx +++ b/plugins/lime-plugin-mesh-wide-config/src/containers/LimeConfigEditForm.tsx @@ -13,14 +13,14 @@ import { } from "components/Modal/FullScreenModal"; import { - AddNewElementBtn, + AddNewConfigSection, ConfigSection, } from "plugins/lime-plugin-mesh-wide-config/src/components/ConfigSection"; import { MeshStatus } from "plugins/lime-plugin-mesh-wide-config/src/components/MeshStatus"; import { useMeshWideConfig } from "plugins/lime-plugin-mesh-wide-config/src/meshConfigQueries"; import { IMeshWideConfig } from "plugins/lime-plugin-mesh-wide-config/src/meshConfigTypes"; -const EditConfiguration = (props: Partial) => { +const LimeConfigEditForm = (props: Partial) => { const { data: meshWideConfig, isLoading } = useMeshWideConfig({}); return ( @@ -30,14 +30,13 @@ const EditConfiguration = (props: Partial) => { {...props} > {!!meshWideConfig && ( - // - + )} ); }; -const EditConfigurationInner = ({ +const EditConfigForm = ({ meshWideConfig, }: { meshWideConfig: IMeshWideConfig; @@ -46,34 +45,33 @@ const EditConfigurationInner = ({ defaultValues: meshWideConfig, }); + const formData = fMethods.watch(); + const onSubmit = (data) => { console.log("Form Data:", data); }; - return ( - -
-
- - -
- - -
- ); -}; - -const DrawForm = () => { - const { watch } = useFormContext(); - const formData = watch(); - console.log("formData", formData); return ( - <> - {Object.entries(formData).map(([title, dropdown], index) => ( - - ))} - +
+ +
+
+ {Object.entries(formData).map( + ([title, dropdown], index) => ( + + ) + )} + +
+ + +
+
); }; -export default EditConfiguration; +export default LimeConfigEditForm; diff --git a/plugins/lime-plugin-mesh-wide-config/src/meshConfigPage.tsx b/plugins/lime-plugin-mesh-wide-config/src/meshConfigPage.tsx index deab7a26..292a6711 100644 --- a/plugins/lime-plugin-mesh-wide-config/src/meshConfigPage.tsx +++ b/plugins/lime-plugin-mesh-wide-config/src/meshConfigPage.tsx @@ -3,7 +3,7 @@ import React from "react"; import WizardWrapper from "components/mesh-wide-wizard/WizardWrapper"; -import EditConfiguration from "plugins/lime-plugin-mesh-wide-config/src/containers/EditConfiguration"; +import LimeConfigEditForm from "plugins/lime-plugin-mesh-wide-config/src/containers/LimeConfigEditForm"; import NodesListPage from "plugins/lime-plugin-mesh-wide-config/src/containers/NodesListPage"; import StatusPage from "plugins/lime-plugin-mesh-wide-config/src/containers/StatusPage"; @@ -11,7 +11,7 @@ const MeshConfigPage = () => { const [showEditConfig, setShowEditConfig] = useState(false); if (showEditConfig) { - return setShowEditConfig(false)} />; + return setShowEditConfig(false)} />; } // return ; diff --git a/src/components/buttons/button.tsx b/src/components/buttons/button.tsx index b92e8fde..2b659836 100644 --- a/src/components/buttons/button.tsx +++ b/src/components/buttons/button.tsx @@ -1,7 +1,7 @@ import { useState } from "preact/hooks"; import React, { useCallback } from "react"; -export interface ButtonProps { +export type ButtonProps = { onClick?: ((e) => void) | ((e) => Promise); children?: any; // type error with Trans component size?: "sm" | "md" | "lg"; @@ -9,7 +9,7 @@ export interface ButtonProps { href?: string; outline?: boolean; disabled?: boolean; -} +} & Omit, "size">; export const Button = ({ size = "md", @@ -72,10 +72,9 @@ export const Button = ({ const cls = `cursor-pointer font-semibold rounded-xl text-center place-content-center transition-all duration-300 justify-center border-0 ${sizeClasses} ${colorClasses}`; - // useCallback for button click const handleClick = useCallback( async (e) => { - if (innerIsLoading || disabled) return; + if (innerIsLoading || disabled || !onClick) return; setInnerIsLoading(true); try { await onClick(e); @@ -83,10 +82,10 @@ export const Button = ({ setInnerIsLoading(false); } }, - [disabled, innerIsLoading, onClick] + [innerIsLoading, disabled, onClick] ); - const Btn = () => ( + const btn = (
handleClick(e)} @@ -96,11 +95,10 @@ export const Button = ({ {children}
); - return href ? ( - - - - ) : ( - - ); + + if (href) { + return {btn}; + } + + return <>{btn}; };