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

- addressing feedback

Browse Source
This commit is contained in:
Toba Ojo
2025-12-04 19:14:14 +00:00
parent 3af4e585e7
commit 9208470e53
13 changed files with 229 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/features/output/components/ChannelCard.tsx
View File

@@ -5,7 +5,11 @@ import ChannelFields from "./ChannelFields";
import type { FormTypes } from "../../../types/types";
import { useGetBearerConfig } from "../hooks/useBearer";
const ChannelCard = () => {
type ChannelCardProps = {
customFields: (string | undefined)[];
};
const ChannelCard = ({ customFields }: ChannelCardProps) => {
const { values, errors, touched, setFieldValue } = useFormikContext<FormTypes>();
const { bearerQuery } = useGetBearerConfig(values?.format?.toLowerCase() || "json");
const outputData = bearerQuery?.data;
@@ -18,10 +22,11 @@ const ChannelCard = () => {
values={values}
outputData={outputData}
onSetFieldValue={setFieldValue}
customFields={customFields}
/>
<button
type="submit"
className="w-full md:w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
className="w-full md:w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5 hover:cursor-pointer"
>
{"Save Changes"}
</button>

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

@@ -12,12 +12,13 @@ type ChannelFieldsProps = {
};
outputData?: OutputDataResponse;
onSetFieldValue: (field: string, value: string, shouldValidate?: boolean | undefined) => void;
customFields: (string | undefined)[];
};
const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }: ChannelFieldsProps) => {
const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue, customFields }: ChannelFieldsProps) => {
const { optionalConstantsQuery } = useOptionalConstants(outputData?.id?.split("-")[1] || "");
const optionalConstants = optionalConstantsQuery?.data;
console.log(customFields);
const channelFieldsObject = useMemo(() => {
return {
connectTimeoutSeconds: outputData?.propConnectTimeoutSeconds?.value || "5",
@@ -269,24 +270,28 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
<FieldArray name="customFields">
{(arrayHelpers) => (
<>
{values?.customFields?.map((_, index) => (
{values?.customFields?.slice(0, 6).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}`}
name={`customFields.${index}.label`}
className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
placeholder={`Custom Field ${index + 1} label`}
/>
<Field
name={`customFields.${index}.value`}
key={index}
className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
placeholder={`Enter Custom Field ${index + 1}`}
placeholder={`Enter Custom Field ${index + 1} value`}
autoComplete="off"
/>
</div>
))}
<button
type="button"
onClick={() => arrayHelpers.push("")}
className="mr-2 border p-2 rounded-lg hover:bg-gray-700 hover:cursor-pointer"
onClick={() => arrayHelpers.push({ label: "", value: "" })}
className={`mr-2 border p-2 rounded-lg hover:bg-gray-700 hover:cursor-pointer ${values?.customFields && values?.customFields?.length >= 6 ? "opacity-50 cursor-not-allowed" : ""}`}
disabled={values?.customFields && values?.customFields?.length >= 6}
>
Add Custom Field
</button>

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

@@ -5,10 +5,12 @@ import type { BearerTypeFields, FormTypes, OptionalBOF2Constants, OptionalUTMCCo
import { usePostBearerConfig } from "../hooks/useBearer";
import { useDispatcherConfig } from "../hooks/useDispatcherConfig";
import { useOptionalConstants } from "../hooks/useOptionalConstants";
import { useCustomFields } from "../hooks/useCustomFields";
const OutputForms = () => {
const { bearerMutation } = usePostBearerConfig();
const { dispatcherQuery, dispatcherMutation } = useDispatcherConfig();
const { customFieldsQuery } = useCustomFields();
const isLoading = dispatcherQuery?.isLoading;
const format = dispatcherQuery?.data?.propFormat?.value;
@@ -18,6 +20,22 @@ const OutputForms = () => {
const timestampSource = optionalConstantsQuery?.data?.propTimeZoneType?.value;
const gpsFormat = optionalConstantsQuery?.data?.propGpsFormat?.value;
const customFieldLabel1 = customFieldsQuery?.data?.propCustomFieldName1?.value;
const customFieldLabel2 = customFieldsQuery?.data?.propCustomFieldName2?.value;
const customFieldLabel3 = customFieldsQuery?.data?.propCustomFieldName3?.value;
const customFieldLabel4 = customFieldsQuery?.data?.propCustomFieldName4?.value;
const customFieldLabel5 = customFieldsQuery?.data?.propCustomFieldName5?.value;
const customFieldLabel6 = customFieldsQuery?.data?.propCustomFieldName6?.value;
const customfields = [
customFieldLabel1,
customFieldLabel2,
customFieldLabel3,
customFieldLabel4,
customFieldLabel5,
customFieldLabel6,
];
const inititalValues: FormTypes = {
format: format ?? "JSON",
enabled: true,
@@ -43,7 +61,7 @@ const OutputForms = () => {
// ftp - fields
//custom fields
customFields: [],
customFields: customfields ?? ["", "", "", "", "", ""],
};
const handleSubmit = async (values: FormTypes) => {
@@ -99,7 +117,7 @@ const OutputForms = () => {
<Formik initialValues={inititalValues} onSubmit={handleSubmit} enableReinitialize>
<Form className="grid grid-cols-1 md:grid-cols-2">
<BearerTypeCard />
<ChannelCard />
<ChannelCard customFields={customfields} />
</Form>
</Formik>
);