You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
113 lines
3.2 KiB
113 lines
3.2 KiB
import React from 'react'
|
|
import { useEffect } from 'react';
|
|
import { Control, FieldValues, useFieldArray, useForm, UseFormRegister, UseFormSetValue } from 'react-hook-form';
|
|
import { useFetchWithAuth } from '../../hooks/useFetchWithAuth';
|
|
import { Manytooneform } from './Manytooneform';
|
|
import TableHeadForm from './TableHeadForm';
|
|
|
|
interface Props {
|
|
entityName: string,
|
|
entityId: number,
|
|
element:string,
|
|
oneToManyHeader: {id:string, name:string}[],
|
|
control: Control<any, any>,
|
|
register: UseFormRegister<any>,
|
|
setValue: UseFormSetValue<any>
|
|
|
|
|
|
}
|
|
|
|
export const Onetomany = ({entityName, entityId, element, oneToManyHeader, control, register, setValue }:Props) => {
|
|
|
|
const { fields, append, remove } = useFieldArray({
|
|
control,
|
|
name: element
|
|
});
|
|
|
|
|
|
const getInitData = async () => {
|
|
|
|
const { data, error } = await useFetchWithAuth(entityName + "/" + entityId);
|
|
if (!error) {
|
|
|
|
setValue(element,data[element]);
|
|
} else {
|
|
console.log(error)
|
|
}
|
|
}
|
|
|
|
useEffect(() => {
|
|
getInitData();
|
|
}, [entityId])
|
|
|
|
|
|
const renderElement = (key:string, attribute: string) => {
|
|
|
|
switch (attribute){
|
|
case 'String':
|
|
return <input key={key} type='text' className='input input-bordered input-primary input-xs' {...register(key)}/>;
|
|
case "ManyToOne":
|
|
return <Manytooneform key={key} attribute={ "producto"} keyRegiter={key.concat(".id")} control={control} />
|
|
case 'Long':
|
|
return <input key={key} type='number' className='input input-bordered input-primary input-xs' {...register(key)}/>;
|
|
case 'Boolean':
|
|
return <input key={key} type='checkbox' className='toggle toggle-primary toggle-xs' {...register(key)}/>;
|
|
case 'BigDecimal':
|
|
return <input key={key} type='number' className='input input-bordered input-primary input-xs' {...register(key)}/>;
|
|
case 'LocalDateTime':
|
|
return <input key={key} type='date' className='input input-bordered input-primary input-xs' {...register(key)}/>;
|
|
default:
|
|
console.log(key)
|
|
return <span key={key}>{key}</span>;
|
|
}
|
|
}
|
|
|
|
const columnNames = oneToManyHeader.map(column => (column.id))
|
|
let defaultvalue = "";
|
|
if (columnNames.length>0){
|
|
defaultvalue = columnNames.reduce((acc, curr) => {
|
|
acc = "";
|
|
return acc;
|
|
}, );
|
|
}else{
|
|
|
|
}
|
|
|
|
|
|
return (
|
|
<div key={entityName+"div"} className="overflow-x-auto">
|
|
|
|
<table className="table w-full table-compact">
|
|
<TableHeadForm columns={oneToManyHeader}/>
|
|
<tbody>
|
|
{
|
|
|
|
fields.map((line, index) => {
|
|
return (
|
|
|
|
<tr key={line['id']}>
|
|
{
|
|
oneToManyHeader.map(column => (
|
|
<td key={line['id']+column.id}>
|
|
|
|
{renderElement(`${element}.${index}.${column.id}`,column.name)}
|
|
</td>
|
|
))
|
|
}
|
|
</tr>
|
|
|
|
)
|
|
})
|
|
}
|
|
</tbody>
|
|
</table>
|
|
<button className='btn btn-primary'
|
|
type="button"
|
|
onClick={() => append(defaultvalue)}
|
|
>
|
|
append
|
|
</button>
|
|
</div>
|
|
)
|
|
}
|