Click here to Skip to main content
14,330,541 members
Rate this:
Please Sign up or sign in to vote.
Hi, I have requirement for the component which has a dropdown, which fills from web api, that dropdown is bound with a list box, which displays an unordered list, that unordered list displays items with editable (selectable) checkboxes, and this component has a download button.

Basically how it does is,
1. dropdown shows the directories in a folder, each directory is shown as an item in the dropdown (just as string items though​).

2. When a directory is selected, the dropdown change event makes a call to the api, which shows all the files within that directory. these files are just shown as names with checkboxes as unordered list within the listbox that's bound with the dropdown

3. Until user selected at least one checkbox or all checkboxes the download button wouldn't be visible, it should become invisible if all the items in the listbox are unselected automatically.

4. Once the user makes the selection and clicks on download, it calls the web api which zips all the selected files and names it as the selected text of the dropdown and lets user download the zip file at the client side.

Can anybody please suggest me for something from the below Code, how to achieve this functionality - thanks in advance.

class AccessData extends React.Component {
    state = {
        files: [],
        communities: [],
        selectedCommunity: { display: 'Select a Community...', value: '' },
        communityValidationError: ""
     }
    
    componentDidMount() {
        let env = clientConfiguration['Environment'];
        let x = `communitiesApi.${env}`;
        alert(clientConfiguration[x]);
    
        fetch(clientConfiguration['communitiesApi.local'])
            .then((response) => {
            return response.json();
        })
          .then(data => {
                let communitiesFromApi = data.map(community => { return { value: community, display: community } })
                this.setState({ communities: [{ value: '', display: 'Select a Community...' }].concat(communitiesFromApi) });
     })
    .catch(error => {
        console.log(error);
        });
      }
    
    handleDDLCommunityChange = (event) => {
        alert(event.target.value);
        this.setState({
            selectedCommunity: event.target.value
        });
    
        alert(this.state['selectedCommunity'].display);
     }
    
    render() {
        return (
          <main>
            <div className="container">
            <div className="aqview-section">
    
            <div id="download_tool">
              <form id="download_form" method="post">
                <div className="row">
                <div className="col-md-12">
                  <div className="header-box">
                    <h2>Data Download Tool</h2>
                  </div>
                  <select id="communityName" title="Select a Community" name="communityName" onChange={"this.handleDDLCommunityChange.bind(this")} value={"this.state.selectedCommunity"}>
                    {this.state.communities.map((community) => <option key={"community.value"} value={"community.value"}>{community.display}</option>)}
                  </select>
                  <div id="file_list_box">
                    <p>
                      Data Files
                    </p>
                    <ul id="file_listing">
                      <li>Please select a community to display available files.</li>
                    </ul>
                  </div>
                  <button id="download" styles="display: none;">Download</button>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </main>
    );
    }
    }
    
    export default connect()(AccessData);


And my dropdown is as below:
<select id="communityName" title="Select a Community" name="communityName" onChange={this.handleDDLCommunityChange.bind(this)} value={this.state.selectedCommunity}>
    {this.state.communities.map((community) => <option key={community.value} value={community.value}>{community.display}</option>)}
</select>


What I have tried:

Reading online, searching, asking friends
Posted
Updated 8-Oct-19 12:55pm
v3

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100