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

- finally fixed custom imput to match what is on backend on sighting amend endpoint

Browse Source
This commit is contained in:
Toba Ojo
2025-12-05 12:53:42 +00:00
parent 9208470e53
commit 9e89193747
5 changed files with 108 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -5,11 +5,7 @@ import ChannelFields from "./ChannelFields";
import type { FormTypes } from "../../../types/types";
import { useGetBearerConfig } from "../hooks/useBearer";
type ChannelCardProps = {
customFields: (string | undefined)[];
};
const ChannelCard = ({ customFields }: ChannelCardProps) => {
const ChannelCard = () => {
const { values, errors, touched, setFieldValue } = useFormikContext<FormTypes>();
const { bearerQuery } = useGetBearerConfig(values?.format?.toLowerCase() || "json");
const outputData = bearerQuery?.data;
@@ -22,7 +18,6 @@ const ChannelCard = ({ customFields }: ChannelCardProps) => {
values={values}
outputData={outputData}
onSetFieldValue={setFieldValue}
customFields={customFields}
/>
<button
type="submit"

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

@@ -12,13 +12,12 @@ type ChannelFieldsProps = {
};
outputData?: OutputDataResponse;
onSetFieldValue: (field: string, value: string, shouldValidate?: boolean | undefined) => void;
customFields: (string | undefined)[];
};
const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue, customFields }: ChannelFieldsProps) => {
const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }: ChannelFieldsProps) => {
const { optionalConstantsQuery } = useOptionalConstants(outputData?.id?.split("-")[1] || "");
const optionalConstants = optionalConstantsQuery?.data;
console.log(customFields);
const channelFieldsObject = useMemo(() => {
return {
connectTimeoutSeconds: outputData?.propConnectTimeoutSeconds?.value || "5",
@@ -160,7 +159,7 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue, c
className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60"
>
<option value={"UTC"}>UTC</option>
<option value={"local"}>Local</option>
<option value={"LOCAL"}>Local</option>
</Field>
</div>
<div className="flex flex-row justify-between">
@@ -270,23 +269,24 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue, c
<FieldArray name="customFields">
{(arrayHelpers) => (
<>
{values?.customFields?.slice(0, 6).map((_, index) => (
<div key={index} className="flex flex-row justify-between items-center mb-4">
<Field
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} value`}
autoComplete="off"
/>
</div>
))}
{values?.customFields?.map((_, index) => {
// if (!field.value) return null;
return (
<div key={index} className="flex flex-row justify-between items-center mb-4 gap-2">
<Field
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`}
className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
placeholder={`Custom Field ${index + 1} Value`}
autoComplete="off"
/>
</div>
);
})}
<button
type="button"
onClick={() => arrayHelpers.push({ label: "", value: "" })}

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

@@ -10,9 +10,10 @@ import { useCustomFields } from "../hooks/useCustomFields";
const OutputForms = () => {
const { bearerMutation } = usePostBearerConfig();
const { dispatcherQuery, dispatcherMutation } = useDispatcherConfig();
const { customFieldsQuery } = useCustomFields();
const { customFieldsQuery, customFieldsMutation } = useCustomFields();
const isLoading = dispatcherQuery?.isLoading;
const format = dispatcherQuery?.data?.propFormat?.value;
const { optionalConstantsQuery, optionalConstantsMutation } = useOptionalConstants(format?.toLowerCase());
const FFID = optionalConstantsQuery?.data?.propFeedIdentifier?.value;
@@ -23,18 +24,25 @@ const OutputForms = () => {
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 customFieldLabel4 = customFieldsQuery?.data?.propStringName4?.value;
const customFieldLabel5 = customFieldsQuery?.data?.propStringName5?.value;
const customFieldLabel6 = customFieldsQuery?.data?.propStringName6?.value;
const customfields = [
customFieldLabel1,
customFieldLabel2,
customFieldLabel3,
customFieldLabel4,
customFieldLabel5,
customFieldLabel6,
];
const customFieldValues1 = customFieldsQuery?.data?.propCustomFieldValue1?.value;
const customFieldValues2 = customFieldsQuery?.data?.propCustomFieldValue2?.value;
const customFieldValues3 = customFieldsQuery?.data?.propCustomFieldValue3?.value;
const customFieldValues4 = customFieldsQuery?.data?.propStringValue4?.value;
const customFieldValues5 = customFieldsQuery?.data?.propStringValue5?.value;
const customFieldValues6 = customFieldsQuery?.data?.propStringValue6?.value;
const initialCustomFields = [
{ label: customFieldLabel1 || "", value: customFieldValues1 || "" },
{ label: customFieldLabel2 || "", value: customFieldValues2 || "" },
{ label: customFieldLabel3 || "", value: customFieldValues3 || "" },
{ label: customFieldLabel4 || "", value: customFieldValues4 || "" },
{ label: customFieldLabel5 || "", value: customFieldValues5 || "" },
{ label: customFieldLabel6 || "", value: customFieldValues6 || "" },
].filter((field) => field.label && field.value);
const inititalValues: FormTypes = {
format: format ?? "JSON",
@@ -61,7 +69,7 @@ const OutputForms = () => {
// ftp - fields
//custom fields
customFields: customfields ?? ["", "", "", "", "", ""],
customFields: initialCustomFields,
};
const handleSubmit = async (values: FormTypes) => {
@@ -107,6 +115,11 @@ const OutputForms = () => {
await optionalConstantsMutation.mutateAsync(optionalUTMCFields);
}
}
if (values.customFields && values.customFields.length > 0) {
const customFields = [...values.customFields];
await customFieldsMutation.mutateAsync(customFields);
}
};
if (isLoading) {
@@ -117,7 +130,7 @@ const OutputForms = () => {
<Formik initialValues={inititalValues} onSubmit={handleSubmit} enableReinitialize>
<Form className="grid grid-cols-1 md:grid-cols-2">
<BearerTypeCard />
<ChannelCard customFields={customfields} />
<ChannelCard />
</Form>
</Formik>
);