Component CRUD
Create

Add quick / details

Form Inputs

Problem

Creating new line in the listing depend of a lot of conditions one of them the type of attribut (number, string, list, ...) to have the right type for each attribut we have to add the right syntax.

Solution

In this case, adding type date for datetime type of the API and it have to be in the next files :

  • Create.tsx
  • Method.ts

Code example

In Create.tsx :

if (field.type == 'date')
    return (
        <div
        key={index}
        id={getFQCN(fqcn_bui, 'form', field.name)}
        className="flex flex-col items-start -space-y-2 text-sm"
        >
        <label id={getFQCN(fqcn_bui, 'form', field.name + '-label')}>
            {selectedList != undefined ? findRequiredField(selectedList,field.name) : t(field.label)}
        </label>
        <Input
            type='date'
            id={getFQCN(fqcn_bui, 'form', field.name + '-input')}
            onChange={e =>
            setFormData({
                ...FormData,
                [field.name]: e.target.value,
            })
            }
            value={FormData[field.name] ?? ''}
            placeholder={t(field.placeholder ? field.placeholder : '')}
        />
        </div>
    );

In Methods.ts :

if (item.type == 'date') {
      if (item.prefixOnSubmit)
        // @ts-ignore
        newFormData[item.name] =
          // @ts-ignore
          item.prefixOnSubmit + formData[item.name];
      // @ts-ignore
      else newFormData[item.name] = formData[item.name];
    }