target select table

src/ts/@overflow/sensor/react/components/SensorConfigTargetSelect.tsx

@@ -33,6 +33,7 @@ import SensorRegistInfo from '../../api/model/SensorRegistInfo';
 
 import PageParams from '@overflow/commons/api/model/PageParams';
 
+import * as Utils from '@overflow/commons/util/Utils';
 
 export interface StateProps {
   infraList?: Page;
@@ -52,7 +53,7 @@ export interface DispatchProps {
 export type Props = StateProps & DispatchProps;
 
 export interface State {
-
+  selected: Infra;
 }
 
 
@@ -64,6 +65,7 @@ export class SensorConfigTargetSelect extends React.Component<Props, State> {
   constructor(props: Props, context: State) {
     super(props, context);
     this.state = {
+      selected: null,
     };
   }
 
@@ -81,20 +83,46 @@ export class SensorConfigTargetSelect extends React.Component<Props, State> {
     }
   }
 
-  public convertInfraList(): void {
+  public handleSelect(infra: Infra): void {
+    this.setState({
+      selected: infra,
+    });
+
+    let sd = this.props.getSensor();
+    sd.infra = infra;
+    this.props.setSensor(sd);
+  }
+
+  public handleRowActive(infra: Infra): boolean {
+    if (this.state.selected === infra) {
+      return true;
+    }
+    return false;
+  }
+
+  public convertInfraList(): JSX.Element[] {
 
     if (this.props.infraList === undefined) {
       return null;
     }
 
-    let selectionOptions: Array<DropdownItemProps> = new Array;
+    let elems: Array<JSX.Element> = new Array();
 
-    for (let infra of this.props.infraList.content) {
-
-      selectionOptions.push(this.createOption(infra));
+    for (let index: number = 0; index < this.props.infraList.content.length; ++index) {
+      let infra: Infra = this.props.infraList.content[index];
+      elems.push(
+        <Table.Row key={infra.id} onClick={this.handleSelect.bind(this, infra)} active={this.handleRowActive(infra)}>
+          <Table.Cell textAlign={'center'}>{index + 1}</Table.Cell>
+          <Table.Cell textAlign={'center'}>{infra.infraType.name}</Table.Cell>
+          <Table.Cell textAlign={'center'}>{infra.target.displayName}</Table.Cell>
+          <Table.Cell>TODO</Table.Cell>
+          <Table.Cell>{Utils.date2date(infra.target.createDate)}</Table.Cell>
+        </Table.Row>,
+      );
 
     }
-    this.selectOptions = selectionOptions;
+
+    return elems;
   }
 
   public convertInfra(): void {
@@ -141,24 +169,41 @@ export class SensorConfigTargetSelect extends React.Component<Props, State> {
     this.props.setSensor(sd);
   }
 
-  public renderInfra(): JSX.Element {
+  public renderInfra(): JSX.Element[] {
 
     if (this.props.infraId === undefined) {
-      this.convertInfraList();
+      return this.convertInfraList();
     } else {
       this.convertInfra();
     }
 
-    return (<Dropdown
-      placeholder='Select Target' selection options={this.selectOptions}
-      // defaultValue={this.defaultValue()}
-      onChange={this.onChangeTarget.bind(this)} />);
+    return null;
+
+    // return (<Dropdown
+    //   placeholder='Select Target' selection options={this.selectOptions}
+    //   // defaultValue={this.defaultValue()}
+    //   onChange={this.onChangeTarget.bind(this)} />);
   }
 
   public render(): JSX.Element {
     return (
       <Container fluid>
-        {this.renderInfra()}
+        {/* */}
+        <Table celled selectable>
+          <Table.Header>
+            <Table.Row>
+              <Table.HeaderCell textAlign={'center'}>No.</Table.HeaderCell>
+              <Table.HeaderCell textAlign={'center'}>Type</Table.HeaderCell>
+              <Table.HeaderCell textAlign={'center'}>Name</Table.HeaderCell>
+              <Table.HeaderCell textAlign={'center'}>Sensor Count</Table.HeaderCell>
+              <Table.HeaderCell textAlign={'center'}>Created at</Table.HeaderCell>
+            </Table.Row>
+          </Table.Header>
+
+          <Table.Body>
+            {this.renderInfra()}
+          </Table.Body>
+        </Table>
       </Container>
     );
   }