we need a small app, that maps CSV files with given fields.
1. Upload a csv file. The fields (Header) will be shown on the left side among them selves.
2. The given fields (Name, PreName, Age, Birthday, Gender) will be always shown on the right side.
3. You can now connect the fields from the left side with them on the left side by dragging from a left field to a right field. An arrow will appear, which will remain after you dragged it. If they are in different rows, the field on the left side change its position, so that they are in the same row.
4. To delete a connection, a small delete icon appears, when you move with the mouse over the arrow.
5. Below the fields, there is a preview grid. It shows max. 5 entries from the CSV, after you uploaded it.
It is very important, that the UI and design is very userfriendly and looks nice.
For the grid, you can use this here:
The fields on the right side should be defined by this interface:
isMandatory: boolean, // Sets, if the field is mandatory or not. If so, this field must be mapped.
name: string, // The internal name of the field
uiText: string, // Text that will be shown in the UI
tooltip: string, // Tooltip, when you mouseover the field
datatype: "string" | "int" | "float" | "boolean" | "date" // If the user enters a fixed value, a control must be shown. Textbox at string, Checkbox at "boolean", calendar at "date" and so on.
Mandatory fields must be marked by a * and if they are not already connected, the background color should be a light red.
The fixed value fields are on the right side. When you connect one with the predefined fields, it jumps to the left side in the same row.