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 { useEffect, useMemo } from "react";
import { useOptionalConstants } from "../hooks/useOptionalConstants";
@@ -17,6 +17,7 @@ type ChannelFieldsProps = {
const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }: ChannelFieldsProps) => {
const { optionalConstantsQuery } = useOptionalConstants(outputData?.id?.split("-")[1] || "");
const optionalConstants = optionalConstantsQuery?.data;
const channelFieldsObject = useMemo(() => {
return {
connectTimeoutSeconds: outputData?.propConnectTimeoutSeconds?.value || "5",
@@ -261,6 +262,47 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
</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: "",
// ftp - fields
//custom fields
customFields: [],
};
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 type { SystemSettings } from "../../../types/types";
import { toast } from "sonner";
@@ -28,104 +28,150 @@ const SystemConfig = () => {
primaryServer: "",
secondaryServer: "",
timeSource: timeSource ?? "",
customFields: [],
};
const handleSubmit = async (values: SystemSettings) => {
const result = await systemSettingsMutation.mutateAsync(values);
console.log(result);
if (result.id) {
toast.success("System settings updated successfully");
} else {
toast.error("Failed to update system settings");
}
};
return (
<Formik initialValues={initialValues} onSubmit={handleSubmit} enableReinitialize>
<Form>
<div className="flex flex-row justify-between items-center mb-4">
<label htmlFor="deviceName">Device Name</label>
<Field
name="deviceName"
type="text"
className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
placeholder="Enter device name"
autoComplete="off"
/>
</div>
<div className="flex flex-row justify-between items-center mb-4">
<label htmlFor="timeZone">Timezone</label>
<Field
name="timeZone"
as="select"
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}>
{option}
</option>
))}
</Field>
</div>
<div className="flex flex-row justify-between items-center mb-4">
<label htmlFor="timeSource">Time Source</label>
<Field
name="timeSource"
as="select"
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}>
{option}
</option>
))}
</Field>
</div>
{({ values }) => (
<Form>
<div className="flex flex-row justify-between items-center mb-4">
<label htmlFor="deviceName">Device Name</label>
<Field
name="deviceName"
type="text"
className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
placeholder="Enter device name"
autoComplete="off"
/>
</div>
<div className="flex flex-row justify-between items-center mb-4">
<label htmlFor="timeZone">Timezone</label>
<Field
name="timeZone"
as="select"
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}>
{option}
</option>
))}
</Field>
</div>
<div className="flex flex-row justify-between items-center mb-4">
<label htmlFor="timeSource">Time Source</label>
<Field
name="timeSource"
as="select"
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}>
{option}
</option>
))}
</Field>
</div>
<div className="flex flex-row justify-between items-center mb-4">
<label htmlFor="SNTPServer">SNTP Server</label>
<Field
name="SNTPServer"
type="text"
className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
placeholder="Enter SNTP server"
autoComplete="off"
/>
</div>
<div className="flex flex-row justify-between items-center mb-4">
<label htmlFor="SNTPInterval">SNTP Interval</label>
<Field
name="SNTPInterval"
type="number"
className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
placeholder="Enter SNTP interval"
autoComplete="off"
/>
</div>
<div className="flex flex-row justify-between items-center mb-4">
<label htmlFor="primaryServer">Primary DNS Server</label>
<Field
name="primaryServer"
type="text"
className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
placeholder="Enter primary DNS server"
autoComplete="off"
/>
</div>
<div className="flex flex-row justify-between items-center mb-4">
<label htmlFor="secondaryServer">Secondary DNS Server</label>
<Field
name="secondaryServer"
type="text"
className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
placeholder="Enter secondary DNS server"
autoComplete="off"
/>
</div>
<button type="submit" className="px-4 py-2 bg-green-700 text-white rounded-lg">
Save Settings
</button>
</Form>
<div className="flex flex-row justify-between items-center mb-4">
<label htmlFor="SNTPServer">SNTP Server</label>
<Field
name="SNTPServer"
type="text"
className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
placeholder="Enter SNTP server"
autoComplete="off"
/>
</div>
<div className="flex flex-row justify-between items-center mb-4">
<label htmlFor="SNTPInterval">SNTP Interval</label>
<Field
name="SNTPInterval"
type="number"
className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
placeholder="Enter SNTP interval"
autoComplete="off"
/>
</div>
<div className="flex flex-row justify-between items-center mb-4">
<label htmlFor="primaryServer">Primary DNS Server</label>
<Field
name="primaryServer"
type="text"
className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
placeholder="Enter primary DNS server"
autoComplete="off"
/>
</div>
<div className="flex flex-row justify-between items-center mb-4">
<label htmlFor="secondaryServer">Secondary DNS Server</label>
<Field
name="secondaryServer"
type="text"
className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
placeholder="Enter secondary DNS server"
autoComplete="off"
/>
</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((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>
);
};

6
src/types/types.ts
View File

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