TobaOjo/BayIQ-UI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

- added formik custom fields to settings and output #14

Merged
TobaOjo merged 1 commits from enhancement/customFields into develop 2025-12-04 09:55:19 +00:00
Conversation 0 Commits 1 Files Changed 4 +184 -89
4 changed files with 184 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/features/output/components/ChannelFields.tsx
View File

@@ -1,4 +1,4 @@
import { Field } from "formik"; import { Field, FieldArray } from "formik";
import type { FormTypes, InitialValuesFormErrors, OutputDataResponse } from "../../../types/types"; import type { FormTypes, InitialValuesFormErrors, OutputDataResponse } from "../../../types/types";
import { useEffect, useMemo } from "react"; import { useEffect, useMemo } from "react";
import { useOptionalConstants } from "../hooks/useOptionalConstants"; import { useOptionalConstants } from "../hooks/useOptionalConstants";
@@ -17,6 +17,7 @@ type ChannelFieldsProps = {
const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }: ChannelFieldsProps) => { const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }: ChannelFieldsProps) => {
const { optionalConstantsQuery } = useOptionalConstants(outputData?.id?.split("-")[1] || ""); const { optionalConstantsQuery } = useOptionalConstants(outputData?.id?.split("-")[1] || "");
const optionalConstants = optionalConstantsQuery?.data; const optionalConstants = optionalConstantsQuery?.data;
const channelFieldsObject = useMemo(() => { const channelFieldsObject = useMemo(() => {
return { return {
connectTimeoutSeconds: outputData?.propConnectTimeoutSeconds?.value || "5", connectTimeoutSeconds: outputData?.propConnectTimeoutSeconds?.value || "5",
@@ -261,6 +262,47 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
</div> </div>
</> </>
)} )}
<div className="border-b border-gray-500 my-3">
<h2 className="font-bold">Custom Fields</h2>
</div>
<div className="items-center mb-4">
<FieldArray name="customFields">
{(arrayHelpers) => (
<>
{values?.customFields?.map((_, index) => (
<div key={index} className="flex flex-row justify-between items-center mb-4">
<label htmlFor={`customFields.${index}`} className="mr-2">
Custom Field {index + 1}
</label>
<Field
name={`customFields.${index}`}
key={index}
className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
placeholder={`Enter Custom Field ${index + 1}`}
autoComplete="off"
/>
</div>
))}
<button
type="button"
onClick={() => arrayHelpers.push("")}
className="mr-2 border p-2 rounded-lg hover:bg-gray-700 hover:cursor-pointer"
>
Add Custom Field
</button>
{values?.customFields && values?.customFields?.length > 0 && (
<button
type="button"
onClick={() => arrayHelpers.pop()}
className="border p-2 rounded-lg hover:bg-gray-700 hover:cursor-pointer"
>
Remove Custom Field
</button>
)}
</>
)}
</FieldArray>
</div>
</> </>
) : ( ) : (
<></> <></>

3
src/features/output/components/OutputForms.tsx
View File

@@ -41,6 +41,9 @@ const OutputForms = () => {
LID2: "", LID2: "",
// ftp - fields // ftp - fields
//custom fields
customFields: [],
}; };
const handleSubmit = async (values: FormTypes) => { const handleSubmit = async (values: FormTypes) => {

220
src/features/settings/components/SystemConfig.tsx
View File

@@ -1,4 +1,4 @@
import { Formik, Form, Field } from "formik"; import { Formik, Form, Field, FieldArray } from "formik";
import { useSystemSettings } from "../hooks/useSystemSettings"; import { useSystemSettings } from "../hooks/useSystemSettings";
import type { SystemSettings } from "../../../types/types"; import type { SystemSettings } from "../../../types/types";
import { toast } from "sonner"; import { toast } from "sonner";
@@ -28,104 +28,150 @@ const SystemConfig = () => {
primaryServer: "", primaryServer: "",
secondaryServer: "", secondaryServer: "",
timeSource: timeSource ?? "", timeSource: timeSource ?? "",
customFields: [],
}; };
const handleSubmit = async (values: SystemSettings) => { const handleSubmit = async (values: SystemSettings) => {
const result = await systemSettingsMutation.mutateAsync(values); const result = await systemSettingsMutation.mutateAsync(values);
console.log(result);
if (result.id) { if (result.id) {
toast.success("System settings updated successfully"); toast.success("System settings updated successfully");
} else {
toast.error("Failed to update system settings");
} }
}; };
return ( return (
<Formik initialValues={initialValues} onSubmit={handleSubmit} enableReinitialize> <Formik initialValues={initialValues} onSubmit={handleSubmit} enableReinitialize>
<Form> {({ values }) => (
<div className="flex flex-row justify-between items-center mb-4"> <Form>
<label htmlFor="deviceName">Device Name</label> <div className="flex flex-row justify-between items-center mb-4">
<Field <label htmlFor="deviceName">Device Name</label>
name="deviceName" <Field
type="text" name="deviceName"
className="p-2 border border-gray-400 rounded-lg w-full max-w-xs" type="text"
placeholder="Enter device name" className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
autoComplete="off" placeholder="Enter device name"
/> autoComplete="off"
</div> />
<div className="flex flex-row justify-between items-center mb-4"> </div>
<label htmlFor="timeZone">Timezone</label> <div className="flex flex-row justify-between items-center mb-4">
<Field <label htmlFor="timeZone">Timezone</label>
name="timeZone" <Field
as="select" name="timeZone"
className="p-2 border border-gray-400 rounded-lg w-full max-w-xs bg-[#253445] " as="select"
autoComplete="off" className="p-2 border border-gray-400 rounded-lg w-full max-w-xs bg-[#253445] "
> autoComplete="off"
{timeZoneOpts?.map((option: string) => ( >
<option key={option} value={option}> {timeZoneOpts?.map((option: string) => (
{option} <option key={option} value={option}>
</option> {option}
))} </option>
</Field> ))}
</div> </Field>
<div className="flex flex-row justify-between items-center mb-4"> </div>
<label htmlFor="timeSource">Time Source</label> <div className="flex flex-row justify-between items-center mb-4">
<Field <label htmlFor="timeSource">Time Source</label>
name="timeSource" <Field
as="select" name="timeSource"
className="p-2 border border-gray-400 rounded-lg w-full max-w-xs bg-[#253445] " as="select"
autoComplete="off" className="p-2 border border-gray-400 rounded-lg w-full max-w-xs bg-[#253445] "
> autoComplete="off"
{timeSourceOpts?.map((option: string) => ( >
<option key={option} value={option}> {timeSourceOpts?.map((option: string) => (
{option} <option key={option} value={option}>
</option> {option}
))} </option>
</Field> ))}
</div> </Field>
</div>
<div className="flex flex-row justify-between items-center mb-4"> <div className="flex flex-row justify-between items-center mb-4">
<label htmlFor="SNTPServer">SNTP Server</label> <label htmlFor="SNTPServer">SNTP Server</label>
<Field <Field
name="SNTPServer" name="SNTPServer"
type="text" type="text"
className="p-2 border border-gray-400 rounded-lg w-full max-w-xs" className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
placeholder="Enter SNTP server" placeholder="Enter SNTP server"
autoComplete="off" autoComplete="off"
/> />
</div> </div>
<div className="flex flex-row justify-between items-center mb-4"> <div className="flex flex-row justify-between items-center mb-4">
<label htmlFor="SNTPInterval">SNTP Interval</label> <label htmlFor="SNTPInterval">SNTP Interval</label>
<Field <Field
name="SNTPInterval" name="SNTPInterval"
type="number" type="number"
className="p-2 border border-gray-400 rounded-lg w-full max-w-xs" className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
placeholder="Enter SNTP interval" placeholder="Enter SNTP interval"
autoComplete="off" autoComplete="off"
/> />
</div> </div>
<div className="flex flex-row justify-between items-center mb-4"> <div className="flex flex-row justify-between items-center mb-4">
<label htmlFor="primaryServer">Primary DNS Server</label> <label htmlFor="primaryServer">Primary DNS Server</label>
<Field <Field
name="primaryServer" name="primaryServer"
type="text" type="text"
className="p-2 border border-gray-400 rounded-lg w-full max-w-xs" className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
placeholder="Enter primary DNS server" placeholder="Enter primary DNS server"
autoComplete="off" autoComplete="off"
/> />
</div> </div>
<div className="flex flex-row justify-between items-center mb-4"> <div className="flex flex-row justify-between items-center mb-4">
<label htmlFor="secondaryServer">Secondary DNS Server</label> <label htmlFor="secondaryServer">Secondary DNS Server</label>
<Field <Field
name="secondaryServer" name="secondaryServer"
type="text" type="text"
className="p-2 border border-gray-400 rounded-lg w-full max-w-xs" className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
placeholder="Enter secondary DNS server" placeholder="Enter secondary DNS server"
autoComplete="off" autoComplete="off"
/> />
</div> </div>
<button type="submit" className="px-4 py-2 bg-green-700 text-white rounded-lg"> <div className="border-b border-gray-500 my-3">
Save Settings <h2 className="font-bold">Custom Fields</h2>
</button> </div>
</Form> <div className="items-center mb-4">
<FieldArray name="customFields">
{(arrayHelpers) => (
<>
{values.customFields.map((field, index) => (
<div key={index} className="flex flex-row justify-between items-center mb-4">
<label htmlFor={`customFields.${index}`} className="mr-2">
Custom Field {index + 1}
</label>
<Field
name={`customFields.${index}`}
key={index}
className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
placeholder={`Enter Custom Field ${index + 1}`}
autoComplete="off"
/>
</div>
))}
<button
type="button"
onClick={() => arrayHelpers.push("")}
className="mr-2 border p-2 rounded-lg hover:bg-gray-700 hover:cursor-pointer"
>
Add Custom Field
</button>
{values.customFields.length > 0 && (
<button
type="button"
onClick={() => arrayHelpers.pop()}
className="border p-2 rounded-lg hover:bg-gray-700 hover:cursor-pointer"
>
Remove Custom Field
</button>
)}
</>
)}
</FieldArray>
</div>
<button type="submit" className="px-4 py-2 bg-green-700 text-white rounded-lg">
Save Settings
</button>
</Form>
)}
</Formik> </Formik>
); );
}; };

6
src/types/types.ts
View File

@@ -56,6 +56,10 @@ export type OptionalLaneIDs = {
LID3?: string; LID3?: string;
}; };
export type CustomFields = {
customFields?: string[];
};
export type InitialValuesFormErrors = { export type InitialValuesFormErrors = {
backOfficeURL?: string; backOfficeURL?: string;
username?: string; username?: string;
@@ -64,7 +68,7 @@ export type InitialValuesFormErrors = {
readTimeoutSeconds?: string; readTimeoutSeconds?: string;
}; };
export type FormTypes = BearerTypeFields & OptionalConstants & OptionalLaneIDs; export type FormTypes = BearerTypeFields & OptionalConstants & OptionalLaneIDs & CustomFields;
type FieldProperty = { type FieldProperty = {
datatype: string; datatype: string;
value: string; value: string;