Search in TableComponent as well

src/client/components/boardComponent.tsx

@@ -35,10 +35,7 @@ class BoardComponent extends React.Component<Props, State> {
 
 	constructor(props: Props) {
 		super(props)
-		this.state = {
+		this.state = { isHoverOnCover: false, isSearching: !!this.props.boardTree?.getSearchText() }
-			isHoverOnCover: false,
-			isSearching: false
-		}
 	}
 
 	componentDidUpdate(prevPros: Props, prevState: State) {

src/client/components/tableComponent.tsx

@@ -23,16 +23,24 @@ type Props = {
 
 type State = {
 	isHoverOnCover: boolean
+	isSearching: boolean
 }
 
 class TableComponent extends React.Component<Props, State> {
 	private draggedHeaderTemplate: IPropertyTemplate
 	private cardIdToRowMap = new Map<string, React.RefObject<TableRow>>()
 	private cardIdToFocusOnRender: string
+	private searchFieldRef = React.createRef<Editable>()
 
 	constructor(props: Props) {
 		super(props)
-		this.state = { isHoverOnCover: false }
+		this.state = { isHoverOnCover: false, isSearching: !!this.props.boardTree?.getSearchText() }
+	}
+
+	componentDidUpdate(prevPros: Props, prevState: State) {
+		if (this.state.isSearching && !prevState.isSearching) {
+			this.searchFieldRef.current.focus()
+		}
 	}
 
 	render() {
@@ -83,7 +91,15 @@ class TableComponent extends React.Component<Props, State> {
 							<div className="octo-button" onClick={(e) => { this.propertiesClicked(e) }}>Properties</div>
 							<div className={ hasFilter ? "octo-button active" : "octo-button"} onClick={(e) => { this.filterClicked(e) }}>Filter</div>
 							<div className={ hasSort ? "octo-button active" : "octo-button"} onClick={(e) => { this.sortClicked(e) }}>Sort</div>
-							<div className="octo-button">Search</div>
+							{this.state.isSearching
+								? <Editable
+									ref={this.searchFieldRef}
+									text={boardTree.getSearchText()}
+									placeholderText="Search text"
+									onChanged={(text) => { this.searchChanged(text) }}
+									onKeyDown={(e) => { this.onSearchKeyDown(e) }}></Editable>
+								: <div className="octo-button" onClick={() => { this.setState({ ...this.state, isSearching: true }) }}>Search</div>
+							}
 							<div className="octo-button" onClick={(e) => this.optionsClicked(e)}><div className="imageOptions"></div></div>
 							<div className="octo-button filled" onClick={() => { this.addCard(true) }}>New</div>
 						</div>
@@ -401,6 +417,19 @@ class TableComponent extends React.Component<Props, State> {
 		const destIndex = template ? board.cardProperties.indexOf(template) : 0
 		await mutator.changePropertyTemplateOrder(board, draggedHeaderTemplate, destIndex)
 	}
+
+	onSearchKeyDown(e: React.KeyboardEvent) {
+		if (e.keyCode === 27) {		// ESC: Clear search
+			this.searchFieldRef.current.text = ""
+			this.setState({ ...this.state, isSearching: false })
+			this.props.pageController.setSearchText(undefined)
+			e.preventDefault()
+		}
+	}
+
+	searchChanged(text?: string) {
+		this.props.pageController.setSearchText(text)
+	}
 }
 
 export { TableComponent }