Search in the Dashboard

[kohsah]

The Gawati Editor has a dashboard, we need to implement a search within that :

The search needs to be in the bar which has add document , select all on the left hand side.

Needs to search in documents accessible by the user.

[kohsah]

@Basant1861 1) Wrong placement of search box: (should be on the left)

2) As you can see in the screenshot, the control looks misaligned with wrong fonts. It is tot styles compliant; we use ReactStrap (https://reactstrap.github.io/components/alerts/) which is a thin layer on Bootstrap, you need to use ReactStrap components instead of direct html tags so they inherit the correct styles from the theme:

    <form>
      <label>
        Search:
          <input type="text" value={value} onChange={handleChange} />
      </label>
    </form>

3) Search has been placed in the wrong component, AdditonalActions is for dynamically rendered buttons, there is no reason for the search box to be part of that components since its basically a static component. You need to move it out to a higher level it should be directly within DocActions. See the render() in DocActions, there is the commented ButtonGroup with className="float-left" ...just put the search box in there its already aligned to the left, and should also fix problem (2) above:

  render() {
    return(
      <Card className="bg-white text-right mt-1 mb-1">
        <CardBody className="pt-0 pb-0 pl-0 pr-0">
{/*           <ButtonGroup className="float-left">
            <Button type="button" className={ `btn btn-link` } onClick={this.handleTransition.bind(this)}>Transition</Button>
            <Button type="button" className={ `btn btn-link` }>Action A</Button>
            <Button type="button" className={ `btn btn-link` }>Action B</Button>
          </ButtonGroup> */}

          <PropsRoute path={ getRoute("logged-in-root") } component={AdditionalActions} linkDocumentAdd={this.linkDocumentAdd()} handleSelectAll={this.handleSelectAll.bind(this)} handleChange={this.handleChange.bind(this)} value={this.value()} />

        </CardBody>
      </Card>
    )
  }