idurar/idurar-erp-crm

Create new Component Mulit Step Select Async

Open

#94 opened on Jun 2, 2021

View on GitHub
 (8 comments) (0 reactions) (0 assignees)JavaScript (4,308 stars) (1,036 forks)batch import
good first issue🎨 Frontend

Description

Issue Description: Create new Component Mulit Step Select Async

Description: The goal of this issue is to create a new component called MultiStepSelectAsync that allows users to select data from a dropdown menu and dynamically fetch additional data from the server based on the user's selection. Here is an example scenario to help illustrate how the MultiStepSelectAsync component should work:

The user starts by selecting an option from the initial input select component. Once the user makes a selection, the second select component dynamically appears, fetching data from the server based on the user's choice in the first select component. To elaborate further:

The first select component will display a list of options for the user to choose from. Upon selecting an option, the MultiStepSelectAsync component will fetch further data from the server related to the user's choice and populate the second select component with the fetched data. The fetched data could be retrieved through an asynchronous API call to the server using techniques such as AJAX or fetch. The options in the second select component will be based on the data received from the server and will be updated dynamically whenever the user changes their selection in the first select component.

you can inspire from this SelectAsync component https://github.com/idurar/idurar-erp-crm/blob/dev/frontend/src/components/SelectAsync/index.jsx

Contributor guide

Tech stack
javascriptreact
Domain
frontend
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Reactasync operationsMERN stack basics
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
60
Research direction
Create a new component MultiStepSelectAsync in the frontend/src/components directory. Follow the pattern of the existing SelectAsync component at https://github.com/idurar/idurar erp crm/blob/dev/frontend/src/components/SelectAsync/index.jsx. Implement two step selection with async data fetching using fetch or axios. Ensure the component is reusable and integrates with the existing Ant Design UI. No PRs or assignees exist, so work can start independently.