1bzATwK4

1import { useState } from 'react';
2import './App.css';
3import { DefaultButton, Dropdown, DropdownMenuItemType, PrimaryButton, Stack, TextField } from '@fluentui/react';
4
5const formTokens = { childrenGap: 20 };
6const buttonStackTokens = { childrenGap: 10 };
7
8const dropdownControlledExampleOptions = [
9  { key: '1998', text: '1998', itemType: DropdownMenuItemType.Header },
10  { key: '1999', text: '1999' },
11  { key: '2000', text: '2000' },
12  { key: '2001', text: '2001' }
13];
14
15function App() {
16  const [formState, setFormState] = useState({
17    businessObjectives: '',
18    fiscalYear: undefined,
19    owner: undefined,
20    kpi: '',
21    csa: undefined,
22    industry: undefined,
23    geoOu: undefined,
24    segment: undefined,
25  });
26
27  const handleInputChange = (field, value) => {
28    setFormState(prevState => ({ ...prevState, [field]: value }));
29  };
30
31  const handleSubmit = () => {
32    const formData = {
33      businessObjectives: formState.businessObjectives,
34      fiscalYear: formState.fiscalYear ? formState.fiscalYear.text : '',
35      owner: formState.owner ? formState.owner.text : '',
36      kpi: formState.kpi,
37      csa: formState.csa ? formState.csa.text : '',
38      industry: formState.industry ? formState.industry.text : '',
39      geoOu: formState.geoOu ? formState.geoOu.text : '',
40      segment: formState.segment ? formState.segment.text : ''
41    };
42    console.log('Form Data:', formData);
43    // Process formData here, e.g., send to an API or update the state
44  };
45
46  return (
47    <Stack tokens={formTokens}>
48      <TextField
49        label="Business Objectives*"
50        placeholder="Enter Business Objectives"
51        value={formState.businessObjectives}
52        onChange={(e, newValue) => handleInputChange('businessObjectives', newValue)}
53      />
54      <Dropdown
55        label="Fiscal Year*"
56        selectedKey={formState.fiscalYear ? formState.fiscalYear.key : undefined}
57        onChange={(event, item) => handleInputChange('fiscalYear', item)}
58        placeholder="Select Fiscal Year"
59        options={dropdownControlledExampleOptions}
60      />
61      <Dropdown
62        label="Owner"
63        selectedKey={formState.owner ? formState.owner.key : undefined}
64        onChange={(event, item) => handleInputChange('owner', item)}
65        placeholder="Select Owner"
66        options={dropdownControlledExampleOptions}
67      />
68      <TextField
69        label="KPI"
70        placeholder="Enter KPI"
71        value={formState.kpi}
72        onChange={(e, newValue) => handleInputChange('kpi', newValue)}
73      />
74      <Dropdown
75        label="CSA*"
76        selectedKey={formState.csa ? formState.csa.key : undefined}
77        onChange={(event, item) => handleInputChange('csa', item)}
78        placeholder="Select CSA"
79        options={dropdownControlledExampleOptions}
80      />
81      <Dropdown
82        label="Industry"
83        selectedKey={formState.industry ? formState.industry.key : undefined}
84        onChange={(event, item) => handleInputChange('industry', item)}
85        placeholder="Select Industry"
86        options={dropdownControlledExampleOptions}
87      />
88      <Dropdown
89        label="GEO/OU"
90        selectedKey={formState.geoOu ? formState.geoOu.key : undefined}
91        onChange={(event, item) => handleInputChange('geoOu', item)}
92        placeholder="Select GEO/OU"
93        options={dropdownControlledExampleOptions}
94      />
95      <Dropdown
96        label="Segment"
97        selectedKey={formState.segment ? formState.segment.key : undefined}
98        onChange={(event, item) => handleInputChange('segment', item)}
99        placeholder="Select Segment"
100        options={dropdownControlledExampleOptions}
101      />
102      <Stack horizontal tokens={buttonStackTokens}>
103        <PrimaryButton text="Save" onClick={handleSubmit} allowDisabledFocus />
104        <DefaultButton text="Cancel" allowDisabledFocus />
105      </Stack>
106    </Stack>
107  );
108}
109
110export default App;
111