feat: Create new component multi step select async

[themarufsharifi]

Description

Created a new Multi-Step Select Async Component

Related Issues

#94

Hey @salahlalami, please check my changes and give me your feedback, It's just something I got from the description of the issue and created it. please provide me with some details of the project that I need to know for better work, I am interested in having daily PRs

[salahlalami]

@themarufsharifi , you need to fetch data two times ,
1- first select fetch data auto on page load
2- when user select option from first select ,
3- second select appear and fetch data from server using {id} of option selected from firstSelect

Example GoupeOfCategory select and seconSelect of subcategory

[themarufsharifi]

@salahlalami please review and give new feedback or merge it. I am not sure about the props of the component are they compatible with the convention you use in the repo?

I am not familiar with your coding style and convention it takes a little time.

[polymahh]

hello @themarufsharifi thank you for your contribution
i was trying to test this but with no luck ... i could only see the first options
can you give us screenshots for how it looks

[themarufsharifi]

Hello @polymahh, thank you for trying to test, As this was a public component I didn't know where to use it, so I tested the component with fake data, Please help me with the following questions,

1. Where should I use this component and test it in the app?
2. From which entity i should fetch the data of the component?

[polymahh]

@themarufsharifi i actually dont know where to use this component
maybe @salahlalami can tell us more on that
can you show me how to test it with fake data

[themarufsharifi]

@themarufsharifi i actually dont know where to use this component maybe @salahlalami can tell us more on that can you show me how to test it with fake data

Hi @salahlalami, Could you help us use this component and test it, I mean where should I use this?

[polymahh]

@themarufsharifi if you just want to try it
,maybe we can use it to select a client and
then selecting one of his invoices

[themarufsharifi]

Thanks @polymahh for your answer, I am new to this project, so could you give me the entity name to get the clients and their invoices

[polymahh]

@themarufsharifi "client" entity for clients and "invoice" entity for invoices
maybe you can use these routes

[themarufsharifi]

Screen.Recording.2023-09-13.at.11.19.04.AM.mov

@polymahh Thank you so much for your help, You can review it again and test it

const [multiStepSelectValue, setMultiStepSelectValue] = useState({});

<MultiStepSelectAsync
        entityName="invoice"
        subEntityName="items"
        onChange={(value) => setMultiStepSelectValue(value)}
        value={multiStepSelectValue}
        firstSelectValueKey="note"
        firstSelectLabelKey="note"
        secondSelectLabelKey="itemName"
        secondSelectValueKey="itemName"
        style={{ marginTop: 8 }}
      />

[salahlalami]

Thank you @themarufsharifi