reactjs-deshboard-trigger

gistfile1.txt

import React, { useState } from 'react';
import Select from 'react-select';
import makeAnimated from 'react-select/animated';

const App = () => {
  const animatedComponents = makeAnimated();

  // Options for the first dropdown
  const firstDropdownOptions = [
    { label: 'All', value: 'all' },
    { label: 'Dashboard', value: 'dashboard' },
    { label: 'Analysis', value: 'analysis' },
    { label: 'Dataset', value: 'dataset' }
  ];

  // Options for the second dropdown
  const dashboardOptions = [
    { label: 'Dashboard 1', value: 'dashboard1' },
    { label: 'Dashboard 2', value: 'dashboard2' }
  ];

  // Options for the third dropdown
  const analysisOptions = [
    { label: 'Analysis 1', value: 'analysis1' },
    { label: 'Analysis 2', value: 'analysis2' }
  ];

  // Options for the fourth dropdown
  const datasetOptions = [
    { label: 'Dataset 1', value: 'dataset1' },
    { label: 'Dataset 2', value: 'dataset2' }
  ];

  // State to manage selected options
  const [selectedFirstDropdown, setSelectedFirstDropdown] = useState([]);
  const [selectedDashboard, setSelectedDashboard] = useState([]);
  const [selectedAnalysis, setSelectedAnalysis] = useState([]);
  const [selectedDataset, setSelectedDataset] = useState([]);

  // Function to handle submit
  const handleSubmit = (e) => {
    e.preventDefault();
    const selectedValues = {
      selectedFirstDropdown,
      selectedDashboard,
      selectedAnalysis,
      selectedDataset
    };
    console.log('Selected Values:', JSON.stringify(selectedValues, null, 2));
    // Further processing can be done here
  };

  return (
    <div style={{ padding: '20px' }}>
      <h1>Multi-select Dropdowns</h1>
      <form onSubmit={handleSubmit}>
        <div style={{ marginBottom: '20px' }}>
          <label>First Dropdown:</label>
          <Select
            closeMenuOnSelect={false}
            components={animatedComponents}
            isMulti
            options={firstDropdownOptions}
            value={selectedFirstDropdown}
            onChange={setSelectedFirstDropdown}
          />
        </div>
        <div style={{ marginBottom: '20px' }}>
          <label>Dashboard Dropdown:</label>
          <Select
            closeMenuOnSelect={false}
            components={animatedComponents}
            isMulti
            options={dashboardOptions}
            value={selectedDashboard}
            onChange={setSelectedDashboard}
          />
        </div>
        <div style={{ marginBottom: '20px' }}>
          <label>Analysis Dropdown:</label>
          <Select
            closeMenuOnSelect={false}
            components={animatedComponents}
            isMulti
            options={analysisOptions}
            value={selectedAnalysis}
            onChange={setSelectedAnalysis}
          />
        </div>
        <div style={{ marginBottom: '20px' }}>
          <label>Dataset Dropdown:</label>
          <Select
            closeMenuOnSelect={false}
            components={animatedComponents}
            isMulti
            options={datasetOptions}
            value={selectedDataset}
            onChange={setSelectedDataset}
          />
        </div>
        <button type="submit">Submit</button>
      </form>
    </div>
  );
};

====================================
import React, { useState } from 'react';
import Select from 'react-select';
import makeAnimated from 'react-select/animated';

const App = () => {
  const animatedComponents = makeAnimated();

  // Options for the first dropdown
  const firstDropdownOptions = [
    { label: 'All', value: 'all' },
    { label: 'Dashboard', value: 'dashboard' },
    { label: 'Analysis', value: 'analysis' },
    { label: 'Dataset', value: 'dataset' }
  ];

  // Options for the second dropdown
  const dashboardOptions = [
    { label: 'Dashboard 1', value: 'dashboard1' },
    { label: 'Dashboard 2', value: 'dashboard2' }
  ];

  // Options for the third dropdown
  const analysisOptions = [
    { label: 'Analysis 1', value: 'analysis1' },
    { label: 'Analysis 2', value: 'analysis2' }
  ];

  // Options for the fourth dropdown
  const datasetOptions = [
    { label: 'Dataset 1', value: 'dataset1' },
    { label: 'Dataset 2', value: 'dataset2' }
  ];

  // State to manage selected options
  const [selectedFirstDropdown, setSelectedFirstDropdown] = useState([]);
  const [selectedDashboard, setSelectedDashboard] = useState([]);
  const [selectedAnalysis, setSelectedAnalysis] = useState([]);
  const [selectedDataset, setSelectedDataset] = useState([]);

  // Function to handle submit
  const handleSubmit = (e) => {
    e.preventDefault();
    const selectedValues = {
      selectedFirstDropdown,
      selectedDashboard,
      selectedAnalysis,
      selectedDataset
    };
    console.log('Selected Values:', JSON.stringify(selectedValues, null, 2));
    // Further processing can be done here
  };

  return (
    <div style={{ padding: '20px' }}>
      <h1>Multi-select Dropdowns</h1>
      <form onSubmit={handleSubmit}>
        <div style={{ marginBottom: '20px' }}>
          <label>First Dropdown:</label>
          <Select
            closeMenuOnSelect={false}
            components={animatedComponents}
            isMulti
            options={firstDropdownOptions}
            value={selectedFirstDropdown}
            onChange={setSelectedFirstDropdown}
          />
        </div>
        <div style={{ marginBottom: '20px' }}>
          <label>Dashboard Dropdown:</label>
          <Select
            closeMenuOnSelect={false}
            components={animatedComponents}
            isMulti
            options={dashboardOptions}
            value={selectedDashboard}
            onChange={setSelectedDashboard}
          />
        </div>
        <div style={{ marginBottom: '20px' }}>
          <label>Analysis Dropdown:</label>
          <Select
            closeMenuOnSelect={false}
            components={animatedComponents}
            isMulti
            options={analysisOptions}
            value={selectedAnalysis}
            onChange={setSelectedAnalysis}
          />
        </div>
        <div style={{ marginBottom: '20px' }}>
          <label>Dataset Dropdown:</label>
          <Select
            closeMenuOnSelect={false}
            components={animatedComponents}
            isMulti
            options={datasetOptions}
            value={selectedDataset}
            onChange={setSelectedDataset}
          />
        </div>
        <button type="submit">Submit</button>
      </form>
    </div>
  );
};