periode

src/container/BudgetTahunan.js

@@ -15,11 +15,12 @@ export default class BudgetTahunan extends Component {
     constructor(props) {
         super(props)
         this.state = {
-            periode: '2021',
             perusahaan: 'TAP Group',
             revisi: '0',
             visibleBudgetTahunan: true,
             visibleBS: false,
+            listPeriode: null,
+            periode: null,
             listCompany: null,
             company: null,
             report_id: null,
@@ -36,7 +37,7 @@ export default class BudgetTahunan extends Component {
     getReport() {
         let payload = {
             "company_id": this.state.company.company_id,
-            "periode": this.state.periode,
+            "periode": this.state.periode.periode,
             "report_type": "Master Budget",
         }
         api.create().getReportTypeBody(payload).then(response => {
@@ -75,13 +76,27 @@ export default class BudgetTahunan extends Component {
                     options: companyData,
                     getOptionLabel: (option) => titleCase(option.company_name),
                 };
-                this.setState({ listCompany: defaultProps, company: companyData[0] }, () => this.getReport())
+                this.setState({ listCompany: defaultProps, company: companyData[0] }, () => this.getPeriode())
             } else {
                 alert(response.data.message)
             }
         })
     }
 
+    getPeriode() {
+        let data = ["2021", "2020", "2019"]
+        let periodeData = data.map((item) => {
+            return {
+                periode: item,
+            }
+        })
+        let defaultProps = {
+            options: periodeData,
+            getOptionLabel: (option) => option.periode,
+        };
+        this.setState({ listPeriode: defaultProps, periode: periodeData[0] }, () => this.getReport())
+    }
+
     clickDetail(item, id) {
         this.setState({ report_id: id })
         if (item === 'Balance Sheet') {
@@ -200,7 +215,7 @@ export default class BudgetTahunan extends Component {
                                         cursor: tableMeta.rowData[5] ? 'pointer' : null,
                                         borderColor: 'transparent'
                                     }}
-                                    onClick={() => 
+                                    onClick={() =>
                                         tableMeta.rowData[5] ? this.clickDetail(tableMeta.rowData[1], tableMeta.rowData[4]) : null
                                     }
                                 >
@@ -279,20 +294,16 @@ export default class BudgetTahunan extends Component {
                                 </div>
                                 <div style={{ padding: 20 }}>
                                     <div>
-                                        <TextField
-                                            style={{ width: 250, }}
+                                        <Autocomplete
+                                            {...this.state.listPeriode}
                                             id="periode"
-                                            select
-                                            label="Periode"
+                                            onChange={(event, newInputValue) => this.setState({ periode: newInputValue }, () => this.getReport())}
+                                            debug
+                                            disableClearable
+                                            style={{ width: 250 }}
+                                            renderInput={(params) => <TextField {...params} label="Periode" margin="normal" style={{ marginTop: 7 }} />}
                                             value={this.state.periode}
-                                            onChange={(e) => this.setState({ periode: e.target.value })}
-                                        >
-                                            {periode.map((option) => (
-                                                <MenuItem key={option.value} value={option.value}>
-                                                    {option.label}
-                                                </MenuItem>
-                                            ))}
-                                        </TextField>
+                                        />
                                     </div>
                                     <div style={{ marginTop: 20 }}>
                                         <Autocomplete