target

src/ts/@overflow/target/react/components/TargetList.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { Table, Button, Modal, Input, Header, Container, InputOnChangeData, ButtonProps } from 'semantic-ui-react';
 import { TargetDetails } from './TargetDetail';
-
 import Target from '@overflow/target/api/model/Target';
 import Probe from '@overflow/probe/api/model/Probe';
+import { ListContainer } from '@overflow/commons/react/component/ListContainer';
 
 export interface StateProps {
 
@@ -18,34 +18,59 @@ export type Props = StateProps & DispatchProps;
 export interface State {
   selected: Target;
   openAddTarget: boolean;
+  list: Target[];
 }
 
 export class TargetList extends React.Component<Props, State> {
 
+   private data: any;
   constructor(props: Props, context: State) {
     super(props, context);
     this.state = {
       selected: null,
       openAddTarget: false,
+      list: null,
     };
   }
 
   public handleAddTarget(event: React.MouseEvent<HTMLButtonElement>, data: ButtonProps): void {
+    alert('test');
     this.setState({
       openAddTarget: true,
     });
   }
 
-  public render(): JSX.Element {
+  public handleSearch(result: Target[]): void {
+    this.setState({
+      list: result,
+    });
+  }
 
-    return (
+  public handleFilter(filterStr: string): void {
+    if (filterStr === null) {
+      this.setState({
+        list: this.data,
+      });
+      return;
+    }
+    let founds = new Array();
+    for (let probe of this.data) {
+      if (probe.metaProbeStatus.name.indexOf(filterStr) !== -1) {
+        founds.push(probe);
+      }
+    }
+    this.setState({
+      list: founds,
+    });
+  }
+
+  public render(): JSX.Element {
+    let targetList =
       <Container fluid>
         {/*search bar  */}
+        <Button content='Add' icon='add' labelPosition='left' floated='right' positive onClick={this.handleAddTarget.bind(this)} />
         <TargetTable />
         <br />
-        <Button content='Add' icon='add' labelPosition='left' floated='right' positive onClick={this.handleAddTarget.bind(this)} />
-        <br /><br /><br /><br /><br /><br /><br /><br /><br />
-        <TargetDetails target={this.state.selected} />
 
         <Modal
           open={this.state.openAddTarget}
@@ -61,7 +86,14 @@ export class TargetList extends React.Component<Props, State> {
             <Button positive labelPosition='right' icon='checkmark' content='Done' />
           </Modal.Actions>
         </Modal>
-      </Container>
+      </Container>;
+    return (
+      <ListContainer
+        contents={targetList}
+        data={this.data}
+        onSearch={this.handleSearch.bind(this)}
+        filter={null}
+      />
     );
   }
 }