Prime Community Forum

Code: Select all

[P.S.->My code might not be the most efficient one so please feel free to suggest improvements]

constructor() {
        super()
        this.state = {
            cars: null,
            message: null,
            models: null,
            selectedModels: null,
            selectedCars: null,
        }

delete() {
        let carIds = this.state.selectedCars.map(car => Number(car.id));
        ApiService.deleteCars(carIds)
            .then(response => this.load(response)
            );
    }
    
    load(response) {
        //Filter all the model symbols first, this list may have duplicates
        let allModels = response.data.result.map(car => car.model);

        //Filter the model list to set of unique values.
        let uniqueModels = allModels.filter((value, index, self) => { return self.indexOf(value) === index });
        uniqueModels.sort();

        //Use the unique model list to create the filter for the datatable.            
        let dropDownModels = [];
        uniqueModels.forEach(model => { dropDownModels.push({ label: model, value: model }) });
        this.setState({ selectedCars: null, cars: response.data.result, models: dropDownModels, selectedModels:  null });
    }


render() {
        const modelFilter = <MultiSelect style={{ width: '100%' }} placeholder="Select Models" value={this.state.selectedModels} options={this.state.models} onChange={this.onCarChange} />;
        return (
            <div>
                <div>
                    <h3>Inventory Editor</h3>
                    <DataTable ref={(el) => this.dt = el} value={this.state.cars} selection={this.state.selectedCars} onSelectionChange={e => this.setState({ selectedCars: e.value })}>
                        <Column selectionMode="multiple" style={{ width: '40px' }} />
                        <Column field="carId" header="Car Id" style={{ height: '3.5em', width: '70px' }} />
                        <Column sortField="model" filter={true} filterElement={modelFilter} field="model" header="Car Model" style={{ height: '3.5em', width: '135px' }} />
                    </DataTable>
                </div>
                <div style={{ float: "left" }}>
                    <Button label="Save" onClick={this.save} />
                    <Button label="Delete" onClick={this.delete} />
                </div>
            </div>
        );
        }