@aj-shadow/actorjs-app 0.0.0-aj-beta.221

package/project/client/components/middle/system-under-test/middle-system-under-test-view-multi.jsx

@@ -0,0 +1,119 @@
+
+'use strict';
+
+import LoginStore from '../../../stores/login-store';
+import SystemUnderTestStore from '../../../stores/system-under-test-store';
+import FilterStore from '../../../stores/filter-store';
+import ActorDefault from '../../../actor-default';
+import { ActionSystemUnderTestChecked } from '../../../actions/action-system-under-test/action-system-under-test';
+import ReactComponentStore from 'z-abs-corelayer-client/client/react-component/react-component-store';
+import Link from 'z-abs-complayer-router-client/client/react-component/link';
+import React from 'react';
+
+
+export default class MiddleSystemUnderTestViewMulti extends ReactComponentStore {
+  constructor(props) {
+    super(props, [LoginStore, SystemUnderTestStore, FilterStore]);
+  }
+  
+  shouldUpdate(nextProps, nextState) {
+    return !this.shallowCompare(this.state.LoginStore.login.systemUnderTest, nextState.LoginStore.systemUnderTest)
+      || !this.deepCompare(this.state.SystemUnderTestStore.systemUnderTests, nextState.SystemUnderTestStore.systemUnderTests)
+      || !this.shallowCompareSetValues(this.state.TestSuitesStore.testSuitesChecked, nextState.TestSuitesStore.testSuitesChecked)
+      || !this.shallowCompare(this.state.FilterStore.show, nextState.FilterStore.show);
+  }
+  
+  renderCheckbox(sutRepo, sutName) {
+    if(ActorDefault.NAME() !== sutName) {
+      if(this.state.LoginStore.login.systemUnderTest === sutName) {
+        return (
+          <td>
+            <input type="checkbox" id={`system_under_test_staged_${sutRepo}_${sutName}`} className="disabled" aria-label="..." autoComplete="off" checked={false} onChange={(e) => {}} />
+          </td>
+        )
+      }
+      else {
+        return (
+          <td>
+            <input type="checkbox" id={`system_under_test_not_staged_${sutRepo}_${sutName}`} aria-label="..." autoComplete="off" checked={this.state.SystemUnderTestStore.systemUnderTestsChecked.has(`${sutRepo}_${sutName}`)}
+              onChange={(e) => {
+                this.dispatch(SystemUnderTestStore, new ActionSystemUnderTestChecked(sutRepo, sutName, e.currentTarget.checked));
+              }}
+            />
+          </td>
+        );
+      }
+    }
+    else {
+      return (
+        <td></td>
+      );
+    }
+  }
+  
+  renderStatusHeading() {
+    if(this.state.FilterStore.show) {
+      return (
+        <th>Status</th>
+      );
+    }
+  }
+  
+  renderStatus(sutStatus) {
+    if(this.state.FilterStore.show) {
+      return (
+        <td>{sutStatus}</td>
+      );
+    }
+  }
+  
+  renderSystemUnderTestRow(sut, index) {
+    if(!this.state.FilterStore.hide || (this.state.FilterStore.hide && sut.status !== SystemUnderTestStore.HIDDEN())) {
+      return (
+        <tr key={index}>
+          <th scope="row">{index + 1}</th>
+          {this.renderCheckbox(sut.repo, sut.name)}
+          {this.renderStatus(sut.status)}
+          <td>
+            <Link href={`${sut.name}`}>
+              {sut.name}
+            </Link>
+          </td>
+          <td>{sut.repo}</td>
+          <td>{sut.description}</td>
+        </tr>
+      );
+    }
+  }
+  
+  renderSystemUnderTestRows() {
+    return this.state.SystemUnderTestStore.systemUnderTests.map((sut, index) => {
+      return this.renderSystemUnderTestRow(sut, index);
+    });
+  }
+  
+  render() {
+    return (
+      <div className="middle_view middle_view_system_under_tests middle_system_under_test_multi_view">
+        <div className="panel panel-default">
+          <div className="panel-heading">System Under Test</div>
+          <table id="system_under_test_table" className="table">
+            <thead>
+              <tr>
+                <th>#</th>
+                <th></th>
+                {this.renderStatusHeading()}
+                <th>Name</th>
+                <th>Repo</th>
+                <th>Description</th>
+              </tr>
+            </thead>
+            <tbody>
+              {this.renderSystemUnderTestRows()}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    );
+  }
+}

package/project/client/components/middle/system-under-test/middle-system-under-test-view-single.jsx

@@ -0,0 +1,85 @@
+
+'use strict';
+
+import SystemUnderTestStore from '../../../stores/system-under-test-store';
+import StyleStore from 'z-abs-complayer-markup-client/client/stores/style-store';
+import MiddleSystemUnderTestTabInstances from './tabs/middle-system-under-test-tab-instances';
+import MiddleSystemUnderTestTabNodes from './tabs/middle-system-under-test-tab-nodes';
+import MiddleSystemUnderTestTabSpecification from './tabs/middle-system-under-test-tab-specification';
+import { ActionSystemUnderTestSet } from '../../../actions/action-system-under-test/action-system-under-test';
+import ComponentBreadcrump from 'z-abs-complayer-bootstrap-client/client/breadcrump';
+import Tabs from 'z-abs-complayer-bootstrap-client/client/tabs';
+import Tab from 'z-abs-complayer-bootstrap-client/client/tab';
+import {RouterContext} from 'z-abs-complayer-router-client/client/react-component/router-context';
+import HelperTab from 'z-abs-corelayer-client/client/components/helper-tab';
+import ReactComponentStore from 'z-abs-corelayer-client/client/react-component/react-component-store';
+import React from 'react';
+
+
+export default class MiddleSystemUnderTestViewSingle extends ReactComponentStore {
+  constructor(props) {
+    super(props, [SystemUnderTestStore, StyleStore], {
+      activeKey: 0
+    });
+    this.helperTab = new HelperTab(['Specification', 'Instances', 'Nodes']);
+    const key = this.helperTab.getIndex(props.tab);
+    this.state.activeKey = undefined !== key ? key : 0;
+  }
+  
+  didMount() {
+    this.dispatch(SystemUnderTestStore, new ActionSystemUnderTestSet(this.props.sut));
+  }
+  
+  shouldUpdate(nextProps, nextState) {
+    return !this.shallowCompare(this.props.tab, nextProps.tab)
+      || !this.shallowCompare(this.props.sut, nextProps.sut)
+      || !this.shallowCompare(this.state.activeKey, nextState.activeKey)
+      || !this.shallowCompare(this.state.StyleStore.stackStyles, nextState.StyleStore.stackStyles);
+  }
+  
+  didUpdate(prevProps, prevState) {
+    const key = this.helperTab.getIndex(this.props.tab);
+    if(this.state.activeKey !== key) {
+      this.updateState({activeKey: {$set: key}});
+    }
+  }
+  
+  getTabPath(index) {
+    return `${this.props.tab ? '' : this.props.sut + '/'}${this.helperTab.getRoute(index)}`;
+  }
+  
+  render() {
+    let index = 0;
+    return (
+      <div className="middle_view middle_view_system_under_tests middle_system_under_test_single_view">
+        <div>
+          <ComponentBreadcrump items={[
+            {name: 'Systems Under Test', link: ''},
+            {name: this.props.sut, link: `${this.props.sut}`},
+          ]}/>
+        </div>
+        <div className="system_under_test">
+          <Tabs id="test_case_tabs" className="same_size_as_parent" activeKey={this.state.activeKey} animation={false}
+            onSelect={(key) => {
+              if(undefined !== key) {
+                this.context.history(`${this.props.sut}/${this.helperTab.getRoute(key)}`, {replace: true});
+              }
+            }}
+          >
+            <Tab id="sut_specification" tab={this.getTabPath(index)} title={this.helperTab.getTabName(index++)}>
+              <MiddleSystemUnderTestTabSpecification sut={this.props.sut} />
+            </Tab>
+            <Tab id="sut_instances" tab={this.getTabPath(index)} title={this.helperTab.getTabName(index++)}>
+              <MiddleSystemUnderTestTabInstances sut={this.props.sut} />
+            </Tab>
+            <Tab id="sut_nodes" tab={this.getTabPath(index)} title={this.helperTab.getTabName(index++)}>
+              <MiddleSystemUnderTestTabNodes sut={this.props.sut} />
+            </Tab>
+          </Tabs>
+        </div>
+      </div>
+    );
+  }
+}
+
+MiddleSystemUnderTestViewSingle.contextType = RouterContext;

package/project/client/components/middle/system-under-test/middle-system-under-test.jsx

@@ -0,0 +1,40 @@
+
+'use strict';
+
+import MiddleSystemUnderTestToolbar from './middle-system-under-test-toolbar';
+import MiddleSidebar from '../middle_sidebar';
+import FilterStore from '../../../stores/filter-store';
+import MiddleSystemUnderTestViewSingle from './middle-system-under-test-view-single';
+import MiddleSystemUnderTestViewMulti from './middle-system-under-test-view-multi';
+import Route from 'z-abs-complayer-router-client/client/react-component/route';
+import ReactComponentBase from 'z-abs-corelayer-client/client/react-component/react-component-base';
+import React from 'react';
+
+
+export default class MiddleSystemUnderTest extends ReactComponentBase {
+  constructor(props) {
+    super(props);
+    this.setTitle(() => {
+      return {
+        isPath: this.props._uriPath,
+        text: this.props._uriPath ? this.props._uriPath : 'System Under Test',
+        prefix: 'SUT: '
+      };
+    });
+  }
+    
+  shouldUpdate(nextProps, nextState) {
+    return !this.shallowCompare(this.props._uriPath, nextProps._uriPath);
+  }
+  
+  render() {
+    return (
+      <div className="middle middle_system_under_test">
+        <MiddleSystemUnderTestToolbar />
+        <MiddleSidebar />
+        <Route switch="" handler={MiddleSystemUnderTestViewMulti} />
+        <Route switch={["/:sut/:tab", "/:sut"]} handler={MiddleSystemUnderTestViewSingle} />
+      </div>
+    );
+  }
+}

package/project/client/components/middle/system-under-test/tabs/middle-system-under-test-tab-instances.jsx

@@ -0,0 +1,164 @@
+
+'use strict';
+
+import SystemUnderTestStore from '../../../../stores/system-under-test-store';
+import { ActionSystemUnderTestInstancesMarkup, ActionSystemUnderTestInstancesMarkupChange, ActionSystemUnderTestInstancesMarkupCancel, ActionSystemUnderTestInstancesMarkupSave } from '../../../../actions/action-system-under-test/action-system-under-test';
+import Button from 'z-abs-complayer-bootstrap-client/client/button';
+import ButtonNew from 'z-abs-complayer-bootstrap-client/client/button-new';
+import ComponentMarkedTextarea from 'z-abs-complayer-bootstrap-client/client/marked-textarea';
+import DataSystemUnderTestInstances from 'z-abs-complayer-markup-client/client/data/data-system-under-test/data-system-under-test-instances';
+import ComponentTableDataTable from 'z-abs-complayer-markup-client/client/react-components/markup/component-table-data-table';
+import ComponentDocument from 'z-abs-complayer-markup-client/client/react-components/markup/component-document';
+import ReactComponentStore from 'z-abs-corelayer-client/client/react-component/react-component-store';
+import React from 'react';
+
+
+export default class MiddleSystemUnderTestTabInstances extends ReactComponentStore {
+  constructor(props) {
+    super(props, [SystemUnderTestStore]);
+    this.dataSystemUnderTestInstances = new DataSystemUnderTestInstances();
+    this.markupDisabledOpen = false;
+    this.markupDisabledSave = true;
+    this.markupDisabledHelp = false;
+    this.markupDisabledCancel = true;
+  }
+  
+  shouldUpdate(nextProps, nextState) {
+    return !this.shallowCompare(this.state.SystemUnderTestStore.instances, nextState.SystemUnderTestStore.instances);
+  }
+  
+  _markupOpen() {
+    this.dispatch(SystemUnderTestStore, new ActionSystemUnderTestInstancesMarkup());
+  }
+  
+  _markupSave() {
+    this.dispatch(SystemUnderTestStore, new ActionSystemUnderTestInstancesMarkupSave(this.state.SystemUnderTestStore.currentSut, this.state.SystemUnderTestStore.instances.content));
+  }
+  
+  _markupHelp() {
+  
+  }
+  
+  _markupCancel() {
+    this.dispatch(SystemUnderTestStore, new ActionSystemUnderTestInstancesMarkupCancel());
+  }
+  
+  renderMarkupOpenButton() {
+    this.markupDisabledOpen = this.state.SystemUnderTestStore.instances.definition;
+    return (
+      <ButtonNew id="sut_instances_markup_open" icon="icon-markup-open" size="aj_btn_xs" colorMark="markup_color" placement="bottom" heading="Open" content="Markup" shortcut="Ctrl+O" disabled={this.markupDisabledOpen}
+        onClick={(e) => {
+          this._markupOpen();
+        }}
+      />
+    );
+  }
+  
+  renderMarkupSaveButton() {
+    this.markupDisabledSave = this.state.SystemUnderTestStore.instances.content === this.state.SystemUnderTestStore.instances.contentOriginal;
+    return (
+      <ButtonNew id="sut_instances_markup_save" icon="icon-markup-save" size="aj_btn_xs" colorMark="markup_color" placement="bottom" heading="Save" content="Markup" shortcut="Ctrl+S" disabled={this.markupDisabledSave}
+        onClick={(e) => {
+          this._markupSave();
+        }}
+      />
+    );    
+  }
+  
+  renderMarkupHelpButton() {
+    this.markupDisabledHelp = this.state.SystemUnderTestStore.instances.definition;
+    return (
+      <ButtonNew id="sut_instances_markup_help" icon="icon-markup-help" size="aj_btn_xs" colorMark="markup_color" placement="bottom" heading="Help" content="Markup" shortcut="Ctrl+?" disabled={this.markupDisabledHelp}
+        onClick={(e) => {
+          this._markupHelp();
+        }}
+      />
+    );
+  }
+  
+  renderMarkupCancelButton() {
+    this.markupDisabledCancel = !this.state.SystemUnderTestStore.instances.definition;
+    return (
+      <ButtonNew id="sut_instances_markup_cancel" icon="icon-markup-close" size="aj_btn_xs" colorMark="markup_color" placement="bottom" heading="Cancel" content="Markup" shortcut="Ctrl+Shift+C" disabled={this.markupDisabledCancel}
+        onClick={(e) => {
+          this._markupCancel();
+        }}
+      />
+    );
+  }
+  
+  renderMarkup() {
+    return (
+      <div className="markup_filter_horizontal_1">
+        <div className="systems_under_test_group">
+          <label htmlFor="system_under_test_instances_markup_textarea">Instances - Markup</label>
+          <ComponentMarkedTextarea id="system_under_test_instances_markup_textarea" className="form-control content_definition same_size_as_parent" rows="10" value={this.state.SystemUnderTestStore.instances.content} results={this.state.SystemUnderTestStore.instances.rows}
+            onChange={(value) => {
+              this.dispatch(SystemUnderTestStore, new ActionSystemUnderTestInstancesMarkupChange(value));
+            }}
+            />
+        </div>
+      </div>
+    );
+  }
+  
+  renderInstances() {
+    if(this.state.SystemUnderTestStore.instances.definition) {
+      return (
+        <div className="systems_under_test_tab_view_inner">
+          {this.renderMarkup()}
+        </div>
+      );
+    }
+    else {
+      return (
+        <div className="systems_under_test_tab_view_inner">
+          <ComponentTableDataTable showAlways classTable="markup_table_fit_content markup_table_local" classHeading="markup_table_local_table_heading" classRow="test_data_table" dataTable={this.dataSystemUnderTestInstances} values={this.state.SystemUnderTestStore.instances.instances}/>
+        </div>
+      );
+    }
+  }
+  
+  renderSpecificationInstancesDescription(sutName) {
+    return (
+      <div className="systems_under_test_specification_description">
+        <h3 className="systems_under_test_specification">Instances:&#160;</h3>
+        <h3 className="systems_under_test_specification_sut">{sutName}</h3>
+      </div>
+    );
+  }
+  
+  renderSpecificationInstancesMarkup() {
+    return (
+      <div className="systems_under_test_specification_markup">
+        <div className="systems_under_test_markup_panel">
+          <div className="toolbar" role="toolbar" aria-label="...">
+            <div className="aj_btn_group" role="group" aria-label="...">
+              {this.renderMarkupOpenButton()}
+              {this.renderMarkupSaveButton()}
+              {this.renderMarkupHelpButton()}
+              {this.renderMarkupCancelButton()}
+            </div>
+          </div>
+        </div>
+        {this.renderInstances()}
+      </div>
+    );
+  }
+  
+  render() {
+    const sut = this.state.SystemUnderTestStore.currentSut;
+    if(sut) {
+      return (
+        <div className="systems_under_test_tab_view systems_under_test_tab_view_outer">
+          {this.renderSpecificationInstancesDescription(sut.name)}
+          {this.renderSpecificationInstancesMarkup()} 
+        </div>
+      );
+    }
+    else {
+      return null;
+    }
+  }    
+}
+

package/project/client/components/middle/system-under-test/tabs/middle-system-under-test-tab-nodes.jsx

@@ -0,0 +1,160 @@
+
+'use strict';
+
+import SystemUnderTestStore from '../../../../stores/system-under-test-store';
+import { ActionSystemUnderTestNodesMarkup, ActionSystemUnderTestNodesMarkupChange, ActionSystemUnderTestNodesMarkupCancel, ActionSystemUnderTestNodesMarkupSave } from '../../../../actions/action-system-under-test/action-system-under-test';
+import ButtonNew from 'z-abs-complayer-bootstrap-client/client/button-new';
+import ComponentMarkedTextarea from 'z-abs-complayer-bootstrap-client/client/marked-textarea';
+import DataSystemUnderTestNodes from 'z-abs-complayer-markup-client/client/data/data-system-under-test/data-system-under-test-nodes';
+import ComponentTableDataTable from 'z-abs-complayer-markup-client/client/react-components/markup/component-table-data-table';
+import ComponentDocument from 'z-abs-complayer-markup-client/client/react-components/markup/component-document';
+import ReactComponentStore from 'z-abs-corelayer-client/client/react-component/react-component-store';
+import React from 'react';
+
+
+export default class MiddleSystemUnderTestTabNodes extends ReactComponentStore {
+  constructor(props) {
+    super(props, [SystemUnderTestStore]);
+    this.dataSystemUnderTestNodes = new DataSystemUnderTestNodes();
+    this.markupDisabledOpen = false;
+    this.markupDisabledSave = true;
+    this.markupDisabledHelp = false;
+    this.markupDisabledCancel = true;
+  }
+  
+  shouldUpdate(nextProps, nextState) {
+    return !this.shallowCompare(this.state.SystemUnderTestStore.nodes, nextState.SystemUnderTestStore.nodes);
+  }
+  
+  _markupOpen() {
+    this.dispatch(SystemUnderTestStore, new ActionSystemUnderTestNodesMarkup());
+  }
+  
+  _markupSave() {
+    this.dispatch(SystemUnderTestStore, new ActionSystemUnderTestNodesMarkupSave(this.state.SystemUnderTestStore.currentSut, this.state.SystemUnderTestStore.nodes.content));
+  }
+  
+  _markupHelp() {
+  
+  }
+  
+  _markupCancel() {
+    this.dispatch(SystemUnderTestStore, new ActionSystemUnderTestNodesMarkupCancel());
+  }
+  
+  renderMarkupOpenButton() {
+    this.markupDisabledOpen = this.state.SystemUnderTestStore.nodes.definition;
+    return (
+      <ButtonNew id="sut_nodes_markup_open" icon="icon-markup-open" size="aj_btn_xs" colorMark="markup_color" placement="bottom" heading="Open" content="Markup" shortcut="Ctrl+O" disabled={this.markupDisabledOpen}
+        onClick={(e) => {
+          this._markupOpen();
+        }}
+      />
+    );
+  }
+  
+  renderMarkupSaveButton() {
+    this.markupDisabledSave = this.state.SystemUnderTestStore.nodes.content === this.state.SystemUnderTestStore.nodes.contentOriginal;
+    return (
+      <ButtonNew id="sut_nodes_markup_save" icon="icon-markup-save" size="aj_btn_xs" colorMark="markup_color" placement="bottom" heading="Save" content="Markup" shortcut="Ctrl+S" disabled={this.markupDisabledSave}
+        onClick={(e) => {
+          this._markupSave();
+        }}
+      />
+    );    
+  }
+  
+  renderMarkupHelpButton() {
+    this.markupDisabledHelp = this.state.SystemUnderTestStore.nodes.definition;
+    return (
+      <ButtonNew id="sut_nodes_markup_help" icon="icon-markup-help" size="aj_btn_xs" colorMark="markup_color" placement="bottom" heading="Help" content="Markup" shortcut="Ctrl+?" disabled={this.markupDisabledHelp}
+        onClick={(e) => {
+          this._markupHelp();
+        }}
+      />
+    );
+  }
+  
+  renderMarkupCancelButton() {
+    this.markupDisabledCancel = !this.state.SystemUnderTestStore.nodes.definition;
+    return (
+      <ButtonNew id="sut_nodes_markup_cancel" icon="icon-markup-close" size="aj_btn_xs" colorMark="markup_color" placement="bottom" heading="Cancel" content="Markup" shortcut="Ctrl+Shift+C" disabled={this.markupDisabledCancel}
+        onClick={(e) => {
+          this._markupCancel();
+        }}
+      />
+    );
+  }
+  
+  renderMarkup() {
+    return (
+      <div className="systems_under_test_group">
+        <label htmlFor="system_under_test_nodes_markup_textarea">Nodes - Markup</label>
+        <ComponentMarkedTextarea id="system_under_test_nodes_markup_textarea" className="form-control content_definition same_size_as_parent" rows="10" value={this.state.SystemUnderTestStore.nodes.content} results={this.state.SystemUnderTestStore.nodes.rows}
+          onChange={(value) => {
+            this.dispatch(SystemUnderTestStore, new ActionSystemUnderTestNodesMarkupChange(value));
+          }}
+          />
+      </div>
+    );
+  }
+  
+  renderNodes() {
+    if(this.state.SystemUnderTestStore.nodes.definition) {
+      return (
+        <div className="systems_under_test_tab_view_inner">
+          {this.renderMarkup()}
+        </div>
+      );
+    }
+    else {
+      return (
+        <div className="systems_under_test_tab_view">
+          <ComponentTableDataTable showAlways classTable="markup_table_fit_content markup_table_local" classHeading="markup_table_local_table_heading" classRow="test_data_table" dataTable={this.dataSystemUnderTestNodes} values={this.state.SystemUnderTestStore.nodes.nodes}/>
+        </div>
+      );
+    }
+  }
+  
+  renderSpecificationnodesDescription(sutName) {
+    return (
+      <div className="systems_under_test_specification_description">
+        <h3 className="systems_under_test_specification">Nodes:&#160;</h3>
+        <h3 className="systems_under_test_specification_sut">{sutName}</h3>
+      </div>
+    );
+  }
+  
+  renderSpecificationNodesMarkup() {
+    return (
+      <div className="systems_under_test_specification_markup">
+        <div className="systems_under_test_markup_panel">
+          <div className="toolbar" role="toolbar" aria-label="...">
+            <div className="aj_btn_group" role="group" aria-label="...">
+              {this.renderMarkupOpenButton()}
+              {this.renderMarkupSaveButton()}
+              {this.renderMarkupHelpButton()}
+              {this.renderMarkupCancelButton()}
+            </div>
+          </div>
+        </div>
+        {this.renderNodes()}
+      </div>
+    );
+  }
+  
+  render() {
+    const sut = this.state.SystemUnderTestStore.currentSut;
+    if(sut) {
+      return (
+        <div className="systems_under_test_tab_view systems_under_test_tab_view_outer">
+          {this.renderSpecificationnodesDescription(sut.name)}
+          {this.renderSpecificationNodesMarkup()} 
+        </div>
+      );
+    }
+    else {
+      return null;
+    }
+  }
+}