Select options are not matched

[WoutervanderLoopNL]

When I have a field that is a select with options. the values from the xlsx are not automaticly matched with the field options.
not on label, and not on value.

tried both, and even played with selectHeaderStepHook and matchColumnsStepHook but no success.

fields:

options passed into the field:

tried both with typehinting it into a string and integer.

not matched:

any wat to automaticly match the values, based on label or value?

backgroud: we have several imports during the week. and between 10-20 product groups. and between 10-20 warehouse zones, its no fun to manually match these fields every import.

[masiulis]

Hey @WoutervanderLoopNL, the automatic matching is only for column headers, there is no logic to match select values. If you would like to add that, PRs are welcome.

But I think it should be possible to match data in matchColumnsStepHook. You have the validation table data and raw data there. If you map over table data, you can fill in your select columns by matching raw data with your options. Are you lacking anything to get this to work?

I guess it's hard to find your column data in the raw data, because we don't expose the index anywhere.

[WoutervanderLoopNL]

@masiulis

the matchColumnsStepHook is called when you completed the mapping, (by yourself). so thats to late in the process. needs to check if it can match options before that step (when it completes the header step. or opening the match column step)

I was already in the selectHeaderStepHook testing.

there you have the headerValues which is a flat array passed into MatchColumnsStep

on MatchColumnsStep.tsx:70 you convert that flat array to a more deeper array with the matched options:

I was testing with this, to convert that flat array to the deeper array in the callback, but then React gives an error i cant pass that parameter anymore. Im not that good/experienced with React/NodeJS to find out whats going wrong.

                        selectHeaderStepHook={async (headerValues, data) => {
                            console.log(headerValues)
                            console.log(data)

                            headerValues = [...headerValues.map((value, index) => ({ type: 0, index, header: value ?? "" }))]
                            headerValues[6] = Object.assign({}, headerValues[6], {matchedOptions: [{entry: "Kantoor 2", value: 14}], value: "warehouse_zone_id"});

                            console.log(headerValues)

                            return {headerValues, data};
                        }}

That said. on the mapping step. you have a list with values (from the excel) that needs to be matched. and you have for every value a select with possible options to match. that options have a value and a label. I don't think it is very difficult to match those automaticly. (even if its just the select with the option 'selected="selected"when theoption.value == column.value` (or so)

in TemplateColumn and SubMatchingSelect

[masiulis]

selectHeaderStepHook will not work, it's not the place for select option matching, it can only change data coming from SelectHeaderStep. It has to be done either after the step in matchColumnsStepHook - user can leave select options empty, or this feature has to be added in the library where we assign the data https://github.com/UgnisSoftware/react-spreadsheet-import/blob/master/src/steps/MatchColumnsStep/utils/setColumn.ts#L16

[WoutervanderLoopNL]

I agree on the hook part.

but the mapping options on select can be selected by default if the value matches the index.

and looking more to your code. the most is already done. but i guess that there is a incorrect check of settting the selected option by default on:

SubMatchingSelect.tsx:18

i guess it should be

-   const value = options.find((opt) => opt.value == option.value)
+   const value = options.find((opt) => opt.value == option.entry)

because option.entry is the value from de xlsx (in my example 14)
and the opt.value is the value of the options provided in the field (also 14 in my example)

If i do this, the default option is selected by default.
only the validation check is not completed, still dont know where that is handled

[masiulis]

I don't think anything is wrong with that code, your change would only work in your specific case and it's only a visual change - the data would still be wrong.

If we wanted to add autoMatching for select fields, the config needs to be expanded for options to also have alternateMatches field:

fields: [
  {
    label: "Warehouse zone",
    key: "warehouse",
    alternateMatches: ["Warehouse"],
    fieldType: {
      type: "select",
      options: [
        { label: "Kantoor 2", value: "14", alternateMatches: ["14"] },
        { label: "Kantoor 3", value: "15", alternateMatches: ["15"] },
      ],
    },
  },
]

And when select column is assigned here https://github.com/UgnisSoftware/react-spreadsheet-import/blob/master/src/steps/MatchColumnsStep/utils/setColumn.ts#L16 we need to add the same lavenstein logic as we do for column name matching here https://github.com/UgnisSoftware/react-spreadsheet-import/blob/master/src/steps/MatchColumnsStep/utils/getMatchedColumns.ts#L16

[WoutervanderLoopNL]

Seems a bit odd to set the same data in alternativeMatches as in value.

also, your interface SelectOption doenst have the property alternateMatches

Back to the original request.

If I have a xlsx with the data:

warehouse_zone_id | product_group_id
14 | 14

and a field with the select options:

    fieldType: {
      type: "select",
      options: [
        { label: "Kantoor 2", value: "14" },
        { label: "Kantoor 3", value: "15" },
      ],
    },

its safe to say I want those fields auto matched to the right select options. right?
Is weird to have these options manually set every import?

[masiulis]

Seems a bit odd to set the same data in alternativeMatches as in value.
By default automatching would be done by label, not by value. Matching by value is a specific case for you, so we would need to allow alternative matches.

also, your interface SelectOption doenst have the property alternateMatches
Yes, I was talking what needs to be done for this feature :)

[WoutervanderLoopNL]

Matching on value should be a great feature.

matching on label didnt work either when i tested yesterday

[WoutervanderLoopNL]

@masiulis could you take a look at the feature to match the select options? (possibly the pull from @Yo1L)

[bkuermayr]

Also interested in this feature, this would be awesome, if you can merge this pull request

[TheDaveKent]

We would also love to see this !

[lokacoding]

That feature would be amazing!

[jppty]

Looking to validate state and country ISO codes and would also see value in this feature. 👍

[masiulis]

Released in 4.4.0 - you will need to set autoMapSelectValues={true} - this flag will be set to true by default in the next major release, but I wanted to release it as a non-breaking change.

Now with autoMapSelectValues enabled, imported value will be checked with strict equals if it matches value / label of any field option. No levenshtein distance for now, as it would be too slow on large data sets.