probe detail modify

src/ts/@overflow/probe/react/components/ProbeDetailInfo.tsx

@@ -8,8 +8,7 @@ import {
   Container,
   Input,
   InputOnChangeData,
-  Loader,
+  Icon,
-  Dimmer,
 } from 'semantic-ui-react';
 import Probe from '@overflow/probe/api/model/Probe';
 import { Discovery } from '@overflow/discovery/react/components/Discovery';
@@ -17,8 +16,8 @@ import { Discovery } from '@overflow/discovery/react/components/Discovery';
 import * as Utils from '@overflow/commons/util/Utils';
 
 export interface StateProps {
-  id: string;
+  id?: string;
-  probe: Probe;
+  probe?: Probe;
 }
 
 export interface DispatchProps {
@@ -32,6 +31,8 @@ export type Props = StateProps & DispatchProps;
 export interface State {
   name: string;
   desc: string;
+  nameModifying: boolean;
+  descModifying: boolean;
 }
 
 
@@ -42,11 +43,14 @@ export class ProbeDetailInfo extends React.Component<Props, State> {
     this.state = {
       name: undefined,
       desc: undefined,
+      nameModifying: false,
+      descModifying: false,
     };
+    this.props.onRead(this.props.id);
   }
 
   public componentWillMount(): void {
-    this.props.onRead(this.props.id);
+    console.log('');
   }
 
   public handleStartStop(event: any, data: any): void {
@@ -68,12 +72,18 @@ export class ProbeDetailInfo extends React.Component<Props, State> {
     const p: Probe = this.props.probe;
     p.displayName = this.state.name;
     this.props.onModify(p);
+    this.setState({
+      nameModifying: false,
+    });
   }
 
   public handleDescModify = () => {
     let p: Probe = this.props.probe;
     p.description = this.state.desc;
     this.props.onModify(p);
+    this.setState({
+      descModifying: false,
+    });
   }
 
 
@@ -83,64 +93,7 @@ export class ProbeDetailInfo extends React.Component<Props, State> {
     }
     return (
       <Container fluid>
-        <Table celled={false} >
+        {this.renderDetail()}
-          <Table.Body>
-            <Table.Row>
-              <Table.Cell collapsing>
-                <Header size='small'>Name</Header>
-              </Table.Cell>
-              <Table.Cell>
-                <Input action={{ color: 'teal', icon: 'edit', onClick: this.handleNameModify.bind(this) }}
-                  defaultValue={this.props.probe.displayName} size='small' onChange={
-                    (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
-                      this.setState({ name: data.value });
-                    }} />
-              </Table.Cell>
-            </Table.Row>
-            <Table.Row>
-              <Table.Cell collapsing>
-                <Header size='small'>Status</Header>
-              </Table.Cell>
-              <Table.Cell>{this.props.probe.status.name}</Table.Cell>
-            </Table.Row>
-            <Table.Row>
-              <Table.Cell collapsing>
-                <Header size='small'>Created at</Header>
-              </Table.Cell>
-              <Table.Cell>{Utils.date2date(this.props.probe.createDate)}</Table.Cell>
-            </Table.Row>
-            <Table.Row>
-              <Table.Cell collapsing>
-                <Header size='small'>Authorized at</Header>
-              </Table.Cell>
-              <Table.Cell>{Utils.date2date(this.props.probe.authorizeDate)}</Table.Cell>
-            </Table.Row>
-            <Table.Row>
-              <Table.Cell collapsing>
-                <Header size='small'>Authorized by</Header>
-              </Table.Cell>
-              <Table.Cell>{this.props.probe.authorizeMember.name}</Table.Cell>
-            </Table.Row>
-            <Table.Row>
-              <Table.Cell collapsing>
-                <Header size='small'>Uptime</Header>
-              </Table.Cell>
-              <Table.Cell>todo.</Table.Cell>
-            </Table.Row>
-            <Table.Row>
-              <Table.Cell collapsing>
-                <Header size='small'>Description</Header>
-              </Table.Cell>
-              <Table.Cell>
-                <Input action={{ color: 'teal', icon: 'edit', onClick: this.handleDescModify }}
-                  defaultValue={this.props.probe.description} size='small' onChange={
-                    (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
-                      this.setState({ desc: data.value });
-                    }} />
-              </Table.Cell>
-            </Table.Row>
-          </Table.Body>
-        </Table>
         {this.showStopBtn()}
         <Button content='Discovery' icon='search' labelPosition='left' floated={'right'} positive onClick={this.handleDiscovery} />
         {/*{this.renderDiscovery()}*/}
@@ -148,5 +101,107 @@ export class ProbeDetailInfo extends React.Component<Props, State> {
     );
   }
 
+  public renderDisplayName(): JSX.Element {
+    if (this.state.nameModifying) {
+      return (
+        <Input action={{ color: 'teal', icon: 'save', onClick: this.handleNameModify.bind(this) }}
+          defaultValue={this.props.probe.displayName} size='small' onChange={
+            (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
+              this.setState({ name: data.value });
+            }} />
+      );
+    } else {
+      return (
+        <div>
+          {this.props.probe.displayName}
+          <Button icon circular size='mini'
+            onClick={() => this.setState({ name: this.props.probe.displayName, nameModifying: true })}>
+            <Icon name='edit' />
+          </Button>
+        </div>
+      );
+    }
+  }
+
+  public renderDescription(): JSX.Element {
+    if (this.state.descModifying) {
+      return (
+        <Input fluid action={{ color: 'teal', icon: 'save', onClick: this.handleDescModify.bind(this) }}
+          defaultValue={this.props.probe.description} size='small' onChange={
+            (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
+              this.setState({ desc: data.value });
+            }} />
+      );
+    } else {
+      return (
+        <div>
+          {this.props.probe.description}
+          <Button icon circular size='mini'
+            onClick={() => this.setState({ desc: this.props.probe.description, descModifying: true })}>
+            <Icon name='edit' />
+          </Button>
+        </div>
+      );
+    }
+  }
+
+  private renderDetail(): JSX.Element {
+    if (this.props.probe === undefined) {
+      return null;
+    }
+    return (
+      <Table celled={false} >
+        <Table.Body>
+          <Table.Row>
+            <Table.Cell collapsing>
+              <Header size='small'>Name</Header>
+            </Table.Cell>
+            <Table.Cell>
+              {this.renderDisplayName()}
+            </Table.Cell>
+          </Table.Row>
+          <Table.Row>
+            <Table.Cell collapsing>
+              <Header size='small'>Status</Header>
+            </Table.Cell>
+            <Table.Cell>{this.props.probe.status.name}</Table.Cell>
+          </Table.Row>
+          <Table.Row>
+            <Table.Cell collapsing>
+              <Header size='small'>Created at</Header>
+            </Table.Cell>
+            <Table.Cell>{Utils.date2date(this.props.probe.createDate)}</Table.Cell>
+          </Table.Row>
+          <Table.Row>
+            <Table.Cell collapsing>
+              <Header size='small'>Authorized at</Header>
+            </Table.Cell>
+            <Table.Cell>{Utils.date2date(this.props.probe.authorizeDate)}</Table.Cell>
+          </Table.Row>
+          <Table.Row>
+            <Table.Cell collapsing>
+              <Header size='small'>Authorized by</Header>
+            </Table.Cell>
+            <Table.Cell>{this.props.probe.authorizeMember.name}</Table.Cell>
+          </Table.Row>
+          <Table.Row>
+            <Table.Cell collapsing>
+              <Header size='small'>Uptime</Header>
+            </Table.Cell>
+            <Table.Cell>todo.</Table.Cell>
+          </Table.Row>
+          <Table.Row>
+            <Table.Cell collapsing>
+              <Header size='small'>Description</Header>
+            </Table.Cell>
+            <Table.Cell>
+              {this.renderDescription()}
+            </Table.Cell>
+          </Table.Row>
+        </Table.Body>
+      </Table>
+    );
+  }
+
 }