render() {
        
        return (
            <Container className="card">
                <Row className="card-header">
                    <Col>
                        <Row className="d-flex flex-row">
                            <Col sm={2} className="table-title title">Drivers</Col>
                            <Col sm={8} class="mt-3">
                                <InputGroup class="mb-2">
                                    <InputGroup.Text/>
                                    <FormControl
                                        type="text"
                                        placeholder="Search Drivers"
                                        id="search"
                                        v-model="search"
                                        name="search"
                                        aria-label="Search"
                                        onChange={this.handleSearch}
                                    ></FormControl>
                                </InputGroup>
                            </Col>
                            <Col sm={2} className="justify-content-around d-flex flex-row">
                                <Button href="/addDriver" style={{ marginRight: 2.5 }}>Add New</Button>
                                <Button onClick={(e) => this.handleAllShow(e, searchService.findDrivers(e, this.state.drivers))} variant='primary' style={{ marginLeft: 2.5 }}>Delete All</Button>
                                <DialogBox 
                                    show={this.state.allShow} 
                                    modalTitle='Confirm Deletion'
                                    mainMessageText='Are you sure you want to delete all entries?'
                                    handleClose={this.handleClose}
                                    handleSave={this.handleSave}
                                    closeText='Cancel'
                                    saveText='Delete'
                                    buttonType='danger'
                                />
                            </Col>
                        </Row>
                    </Col>
                </Row>
                <Row className="card-body table-wrapper-scroll-y my-custom-scrollbar">
                    <Table className="striped bordered hover table table-bordered table-striped mb-0">
                        <thead>
                            <tr>
                                <th>
                                    <Stack direction='horizontal' gap={3}>
                                        <div >First Name</div> 
                                        <div className='ms-auto'>
                                            <Button 
                                                variant='outline-secondary' 
                                                size='sm'
                                                onClick={() => this.sortColumn('firstname')}
                                            >&#8693;</Button>
                                        </div>
                                    </Stack>
                                </th>
                                <th>
                                <Stack direction='horizontal' gap={3}>
                                        <div >Last Name</div> 
                                        <div className='ms-auto'>
                                            <Button 
                                                variant='outline-secondary' 
                                                size='sm' 
                                                onClick={() => this.sortColumn('lastname')}
                                                >&#8693;</Button>
                                        </div>
                                    </Stack>
                                </th>
                                <th>
                                    <Stack direction='horizontal' gap={3}>
                                        <div >Phone Number</div>
                                        <div className='ms-auto'>
                                            <Button 
                                                variant='outline-secondary' 
                                                size='sm'
                                                onClick={() => this.sortColumn('phone')}
                                                >&#8693;</Button>
                                        </div>
                                    </Stack>
                                </th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            {this.state.filtered.map(d =>
                                <tr key={d.id}>
                                    <td>{d.first_name}</td>
                                    <td>{d.last_name}</td>
                                    <td>{d.phone}</td>
                                    <td >
                                        <Button className="mr-2" href={"/driverDetail/" + d.id} variant='primary'>View</Button>
                                        <Button className="mr-2" href={"/updateDriver/" + d.id} variant='primary'>Edit</Button>
                                        <Button onClick={(e) => this.handleShow(e, d)} variant='primary'> Delete</Button>
                                        <DialogBox 
                                            show={this.state.show} 
                                            modalTitle='Confirm Deletion'
                                            mainMessageText='Are you sure you want to delete this entry?'
                                            handleClose={this.handleClose}
                                            handleSave={this.handleSave}
                                            closeText='Cancel'
                                            saveText='Delete'
                                            buttonType='danger'
                                        />
                                    </td>
                                </tr>)}
                        </tbody>
                    </Table>
                </Row>
                <Row className="justify-content-md-left mt-2 pt-2 mb-2 title border-top">
                    <Col xs md="auto" className="h4">File Upload</Col>
                </Row>
                <Row>
                    <Col md="auto" className="ml-4">
                        <Row>
                            <Form.Group controlId="formFile" className="mb-3">
                                <Form.Control type="file" onChange={(e) => {
                                    this.readFile(e);
                                }} ref= {this.fileInput} accept='.csv, .xls, .xlsx'/>
                            </Form.Group>
                        </Row>
                    </Col>
                    <Col>
                        <Row>
                            <Col sm={2} className="d-flex flex-row">
                                <Button className="mx-1" onClick={this.handleUploadSubmit}>
                                    {this.state.loading ?
                                        <Spinner
                                            animation="border" role="status" style={{ height: 25, width: 25 }}>
                                        </Spinner> : "Add Drivers"}
                                </Button>
                            </Col>
                            <Col>
                            <CSVLink
                                data={this.getCSVData()}
                                headers={headers}
                                filename='drivers.csv'
                            >Download Drivers</CSVLink>
                            </Col>
                        </Row>
                    </Col>
                </Row>
            </Container>
        );
    }
/**
 * The render method used to display the component. 
 * @returns The HTML to be rendered.
 */
The render method used to display the component.
@returns The HTML to be rendered.
The render method used to display the component . @returns The HTML to be rendered .
render() {
        return (
            <Container className="card">
                <Row className="card-header">
                    <Col>
                        <Row className="d-flex flex-row">
                            <Col sm={2} className="table-title title">Drivers</Col>
                            <Col sm={8} class="mt-3">
                                <InputGroup class="mb-2">
                                    <InputGroup.Text/>
                                    <FormControl
                                        type="text"
                                        placeholder="Search Drivers"
                                        id="search"
                                        v-model="search"
                                        name="search"
                                        aria-label="Search"
                                        onChange={this.handleSearch}
                                    ></FormControl>
                                </InputGroup>
                            </Col>
                            <Col sm={2} className="justify-content-around d-flex flex-row">
                                <Button href="/addDriver" style={{ marginRight: 2.5 }}>Add New</Button>
                                <Button onClick={(e) => this.handleAllShow(e, searchService.findDrivers(e, this.state.drivers))} variant='primary' style={{ marginLeft: 2.5 }}>Delete All</Button>
                                <DialogBox 
                                    show={this.state.allShow} 
                                    modalTitle='Confirm Deletion'
                                    mainMessageText='Are you sure you want to delete all entries?'
                                    handleClose={this.handleClose}
                                    handleSave={this.handleSave}
                                    closeText='Cancel'
                                    saveText='Delete'
                                    buttonType='danger'
                                />
                            </Col>
                        </Row>
                    </Col>
                </Row>
                <Row className="card-body table-wrapper-scroll-y my-custom-scrollbar">
                    <Table className="striped bordered hover table table-bordered table-striped mb-0">
                        <thead>
                            <tr>
                                <th>
                                    <Stack direction='horizontal' gap={3}>
                                        <div >First Name</div> 
                                        <div className='ms-auto'>
                                            <Button 
                                                variant='outline-secondary' 
                                                size='sm'
                                                onClick={() => this.sortColumn('firstname')}
                                            >&#8693;</Button>
                                        </div>
                                    </Stack>
                                </th>
                                <th>
                                <Stack direction='horizontal' gap={3}>
                                        <div >Last Name</div> 
                                        <div className='ms-auto'>
                                            <Button 
                                                variant='outline-secondary' 
                                                size='sm' 
                                                onClick={() => this.sortColumn('lastname')}
                                                >&#8693;</Button>
                                        </div>
                                    </Stack>
                                </th>
                                <th>
                                    <Stack direction='horizontal' gap={3}>
                                        <div >Phone Number</div>
                                        <div className='ms-auto'>
                                            <Button 
                                                variant='outline-secondary' 
                                                size='sm'
                                                onClick={() => this.sortColumn('phone')}
                                                >&#8693;</Button>
                                        </div>
                                    </Stack>
                                </th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            {this.state.filtered.map(d =>
                                <tr key={d.id}>
                                    <td>{d.first_name}</td>
                                    <td>{d.last_name}</td>
                                    <td>{d.phone}</td>
                                    <td >
                                        <Button className="mr-2" href={"/driverDetail/" + d.id} variant='primary'>View</Button>
                                        <Button className="mr-2" href={"/updateDriver/" + d.id} variant='primary'>Edit</Button>
                                        <Button onClick={(e) => this.handleShow(e, d)} variant='primary'> Delete</Button>
                                        <DialogBox 
                                            show={this.state.show} 
                                            modalTitle='Confirm Deletion'
                                            mainMessageText='Are you sure you want to delete this entry?'
                                            handleClose={this.handleClose}
                                            handleSave={this.handleSave}
                                            closeText='Cancel'
                                            saveText='Delete'
                                            buttonType='danger'
                                        />
                                    </td>
                                </tr>)}
                        </tbody>
                    </Table>
                </Row>
                <Row className="justify-content-md-left mt-2 pt-2 mb-2 title border-top">
                    <Col xs md="auto" className="h4">File Upload</Col>
                </Row>
                <Row>
                    <Col md="auto" className="ml-4">
                        <Row>
                            <Form.Group controlId="formFile" className="mb-3">
                                <Form.Control type="file" onChange={(e) => {
                                    this.readFile(e);
                                }} ref= {this.fileInput} accept='.csv, .xls, .xlsx'/>
                            </Form.Group>
                        </Row>
                    </Col>
                    <Col>
                        <Row>
                            <Col sm={2} className="d-flex flex-row">
                                <Button className="mx-1" onClick={this.handleUploadSubmit}>
                                    {this.state.loading ?
                                        <Spinner
                                            animation="border" role="status" style={{ height: 25, width: 25 }}>
                                        </Spinner> : "Add Drivers"}
                                </Button>
                            </Col>
                            <Col>
                            <CSVLink
                                data={this.getCSVData()}
                                headers={headers}
                                filename='drivers.csv'
                            >Download Drivers</CSVLink>
                            </Col>
                        </Row>
                    </Col>
                </Row>
            </Container>
        );
    }
render ( ) { return ( < Container className = "card" > < Row className = "card-header" > < Col > < Row className = "d-flex flex-row" > < Col sm = { 2 } className = "table-title title" > Drivers < / Col > < Col sm = { 8 } class = "mt-3" > < InputGroup class = "mb-2" > < InputGroup . Text / > < FormControl type = "text" placeholder = "Search Drivers" id = "search" v-model = "search" name = "search" aria-label = "Search" onChange = { this . handleSearch } > < / FormControl > < / InputGroup > < / Col > < Col sm = { 2 } className = "justify-content-around d-flex flex-row" > < Button href = "/addDriver" style = { { marginRight : 2.5 } } > Add New < / Button > < Button onClick = { ( e ) => this . handleAllShow ( e , searchService . findDrivers ( e , this . state . drivers ) ) } variant = 'primary' style = { { marginLeft : 2.5 } } > Delete All < / Button > < DialogBox show = { this . state . allShow } modalTitle = 'Confirm Deletion' mainMessageText = 'Are you sure you want to delete all entries?' handleClose = { this . handleClose } handleSave = { this . handleSave } closeText = 'Cancel' saveText = 'Delete' buttonType = 'danger' / > < / Col > < / Row > < / Col > < / Row > < Row className = "card-body table-wrapper-scroll-y my-custom-scrollbar" > < Table className = "striped bordered hover table table-bordered table-striped mb-0" > < thead > < tr > < th > < Stack direction = 'horizontal' gap = { 3 } > < div > First Name < / div > < div className = 'ms-auto' > < Button variant = 'outline-secondary' size = 'sm' onClick = { ( ) => this . sortColumn ( 'firstname' ) } > &#8693; < / Button > < / div > < / Stack > < / th > < th > < Stack direction = 'horizontal' gap = { 3 } > < div > Last Name < / div > < div className = 'ms-auto' > < Button variant = 'outline-secondary' size = 'sm' onClick = { ( ) => this . sortColumn ( 'lastname' ) } > &#8693; < / Button > < / div > < / Stack > < / th > < th > < Stack direction = 'horizontal' gap = { 3 } > < div > Phone Number < / div > < div className = 'ms-auto' > < Button variant = 'outline-secondary' size = 'sm' onClick = { ( ) => this . sortColumn ( 'phone' ) } > &#8693; < / Button > < / div > < / Stack > < / th > < th > < / th > < / tr > < / thead > < tbody > { this . state . filtered . map ( d => < tr key = { d . id } > < td > { d . first_name } < / td > < td > { d . last_name } < / td > < td > { d . phone } < / td > < td > < Button className = "mr-2" href = { "/driverDetail/" + d . id } variant = 'primary' > View < / Button > < Button className = "mr-2" href = { "/updateDriver/" + d . id } variant = 'primary' > Edit < / Button > < Button onClick = { ( e ) => this . handleShow ( e , d ) } variant = 'primary' >  Delete < / Button > < DialogBox show = { this . state . show } modalTitle = 'Confirm Deletion' mainMessageText = 'Are you sure you want to delete this entry?' handleClose = { this . handleClose } handleSave = { this . handleSave } closeText = 'Cancel' saveText = 'Delete' buttonType = 'danger' / > < / td > < / tr > ) } < / tbody > < / Table > < / Row > < Row className = "justify-content-md-left mt-2 pt-2 mb-2 title border-top" > < Col xs md = "auto" className = "h4" > File Upload < / Col > < / Row > < Row > < Col md = "auto" className = "ml-4" > < Row > < Form . Group controlId = "formFile" className = "mb-3" > < Form . Control type = "file" onChange = { ( e ) => { this . readFile ( e ) ; } } ref = { this . fileInput } accept = '.csv, .xls, .xlsx' / > < / Form . Group > < / Row > < / Col > < Col > < Row > < Col sm = { 2 } className = "d-flex flex-row" > < Button className = "mx-1" onClick = { this . handleUploadSubmit } > { this . state . loading ? < Spinner animation = "border" role = "status" style = { { height : 25 , width : 25 } } > < / Spinner > : "Add Drivers" } < / Button > < / Col > < Col > < CSVLink data = { this . getCSVData ( ) } headers = { headers } filename = 'drivers.csv' > Download Drivers < / CSVLink > < / Col > < / Row > < / Col > < / Row > < / Container > ) ; }
The render method used to display the component.
The render method used to display the component .