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

package/project/client/components/middle/addresses/middle-addresses-view.jsx

@@ -0,0 +1,155 @@
+
+'use strict';
+
+import AddressesStore from '../../../stores/addresses-store';
+import LoginStore from '../../../stores/login-store';
+import MiddleAddressesViewSrc from './middle-addresses-view-src';
+import MiddleAddressesViewDst from './middle-addresses-view-dst';
+import MiddleAddressesViewSrv from './middle-addresses-view-srv';
+import MiddleAddressesViewClientAddress from './middle-addresses-view-client-address';
+import MiddleAddressesViewSutAddress from './middle-addresses-view-sut-address';
+import MiddleAddressesViewServerAddress from './middle-addresses-view-server-address';
+import MiddleAddressesViewClientInterface from './middle-addresses-view-client-interface';
+import MiddleAddressesViewSutInterface from './middle-addresses-view-sut-interface';
+import MiddleAddressesViewServerInterface from './middle-addresses-view-server-interface';
+import MiddleAddressesViewNetworkInterface from './middle-addresses-view-network-interface';
+import MiddleAddressesViewPorts from './middle-addresses-view-ports';
+import MiddleAddressesViewDns from './middle-addresses-view-dns';
+import { ActionAddressesSrcGet, ActionAddressesDstGet, ActionAddressesSrvGet, ActionAddressesClientAddressGet, ActionAddressesSutAddressGet, ActionAddressesServerAddressGet, ActionAddressesClientInterfaceGet, ActionAddressesSutInterfaceGet, ActionAddressesServerInterfaceGet, ActionAddressesNetworkInterfaceGet, ActionAddressesPortsGet, ActionAddressesDnsGet, ActionAddressesMarkupCancel } from '../../../actions/action-addresses/action-addresses';
+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 MiddleAddressesViewAddresses extends ReactComponentStore {
+  constructor(props) {
+    super(props, [AddressesStore, LoginStore], {
+      activeKey: 0
+    });
+    this.helperTab = new HelperTab(['Src', 'Dst', 'Srv', 'Client-address', 'Sut-address', 'Server-address', 'Client-interface', 'Sut-interface', 'Server-interface', 'Network-interface', 'Ports', 'Dns']);
+    this.state.activeKey = this.helperTab.getIndex(props.tab);
+  }
+  
+  didMount() {
+    this._getData(this.state.activeKey);
+  }
+  
+  shouldUpdate(nextProps, nextState) {
+    return !this.shallowCompare(this.props.tab, nextProps.tab)
+      || !this.shallowCompare(this.state.activeKey, nextState.activeKey)
+      || !this.shallowCompare(this.state.AddressesStore.markup.definition, nextState.AddressesStore.markup.definition)
+      || !this.shallowCompare(this.state.LoginStore.login, nextState.LoginStore.login);
+  }
+
+  didUpdate(prevProps) {
+    const nextKey = this.helperTab.getIndex(this.props.tab);
+    if(this.state.activeKey !== nextKey) {
+      this.updateState({activeKey: {$set: nextKey}});
+      this._getData(nextKey);
+    }
+  }
+  
+  render() {
+    let index = 0;
+    return (
+      <div className="same_size_as_parent">
+        <div className="address_tabs">
+           <Tabs id="address_tabs" activeKey={this.state.activeKey}
+            onSelect={(key) => {
+              if(undefined !== key && this.state.activeKey !== key) {
+                if(this.state.AddressesStore.markup.definition) {
+                  // TODO: Ask if we really want to leve markup.
+                  this.dispatch(AddressesStore, new ActionAddressesMarkupCancel());
+                }
+                this.context.history(`${this.helperTab.getRoute(key)}`, {replace: true});
+              }
+            }}
+          >
+            <Tab id="addresses_src_tab" tab={`${this.helperTab.getRoute(index)}`} title={this.helperTab.getTabName(index++)}>
+              <MiddleAddressesViewSrc stage={this.state.LoginStore.login} />
+            </Tab>
+            <Tab id="addresses_dst_tab" tab={`${this.helperTab.getRoute(index)}`} title={this.helperTab.getTabName(index++)}>
+              <MiddleAddressesViewDst stage={this.state.LoginStore.login} />
+            </Tab>
+            <Tab id="addresses_srv_tab" tab={`${this.helperTab.getRoute(index)}`} title={this.helperTab.getTabName(index++)}>
+              <MiddleAddressesViewSrv stage={this.state.LoginStore.login} />
+            </Tab>
+            <Tab id="addresses_client_address_tab" tab={`${this.helperTab.getRoute(index)}`} title={this.helperTab.getTabName(index++)}>
+              <MiddleAddressesViewClientAddress stage={this.state.LoginStore.login} />
+            </Tab>
+            <Tab id="addresses_sut_address_tab" tab={`${this.helperTab.getRoute(index)}`} title={this.helperTab.getTabName(index++)}>
+              <MiddleAddressesViewSutAddress stage={this.state.LoginStore.login} />
+            </Tab>
+            <Tab id="addresses_server_address_tab" tab={`${this.helperTab.getRoute(index)}`} title={this.helperTab.getTabName(index++)}>
+              <MiddleAddressesViewServerAddress stage={this.state.LoginStore.login} />
+            </Tab>  
+            <Tab id="addresses_client_interface_tab" tab={`${this.helperTab.getRoute(index)}`} title={this.helperTab.getTabName(index++)}>
+              <MiddleAddressesViewClientInterface stage={this.state.LoginStore.login} />
+            </Tab>
+            <Tab id="addresses_sut_interface_tab" tab={`${this.helperTab.getRoute(index)}`} title={this.helperTab.getTabName(index++)}>
+              <MiddleAddressesViewSutInterface stage={this.state.LoginStore.login} />
+            </Tab>
+            <Tab id="addresses_server_interface_tab" tab={`${this.helperTab.getRoute(index)}`} title={this.helperTab.getTabName(index++)}>
+              <MiddleAddressesViewServerInterface stage={this.state.LoginStore.login} />
+            </Tab> 
+            <Tab id="addresses_network_interface_tab" tab={`${this.helperTab.getRoute(index)}`} title={this.helperTab.getTabName(index++)}>
+              <MiddleAddressesViewNetworkInterface stage={this.state.LoginStore.login} />
+            </Tab>
+            <Tab id="addresses_ports_tab" tab={`${this.helperTab.getRoute(index)}`} title={this.helperTab.getTabName(index++)}>
+              <MiddleAddressesViewPorts stage={this.state.LoginStore.login} />
+            </Tab>
+            <Tab id="addresses_dns_tab" tab={`${this.helperTab.getRoute(index)}`} title={this.helperTab.getTabName(index++)}>
+              <MiddleAddressesViewDns stage={this.state.LoginStore.login} />
+            </Tab>
+          </Tabs>
+        </div>
+      </div>
+    );
+  }
+  
+  _getData(key) {
+    let tabName = this.helperTab.getTabName(key);
+    if('Src' === tabName) {
+      this.dispatch(AddressesStore, new ActionAddressesSrcGet());
+    }
+    else if('Dst' === tabName) {
+      this.dispatch(AddressesStore, new ActionAddressesDstGet());
+    }
+    else if('Srv' === tabName) {
+      this.dispatch(AddressesStore, new ActionAddressesSrvGet());
+    }
+    else if('Client-address' === tabName) {
+      this.dispatch(AddressesStore, new ActionAddressesClientAddressGet());
+    }
+    else if('Sut-address' === tabName) {
+      this.dispatch(AddressesStore, new ActionAddressesSutAddressGet());
+    }
+    else if('Server-address' === tabName) {
+      this.dispatch(AddressesStore, new ActionAddressesServerAddressGet());
+    }
+    else if('Client-interface' === tabName) {
+      this.dispatch(AddressesStore, new ActionAddressesClientInterfaceGet());
+    }
+    else if('Sut-interface' === tabName) {
+      this.dispatch(AddressesStore, new ActionAddressesSutInterfaceGet());
+    }
+    else if('Server-interface' === tabName) {
+      this.dispatch(AddressesStore, new ActionAddressesServerInterfaceGet());
+    }
+    else if('Network-interface' === tabName) {
+      this.dispatch(AddressesStore, new ActionAddressesNetworkInterfaceGet());
+    }
+    else if('Ports' === tabName) {
+      this.dispatch(AddressesStore, new ActionAddressesPortsGet());
+    }
+    else if('Dns' === tabName) {
+      this.dispatch(AddressesStore, new ActionAddressesDnsGet());
+    }
+  }
+}
+
+
+MiddleAddressesViewAddresses.contextType = RouterContext;

package/project/client/components/middle/addresses/middle-addresses.jsx

@@ -0,0 +1,39 @@
+
+'use strict';
+
+import MiddleAddressesToolbar from './middle-addresses-toolbar';
+import MiddleSidebar from '../middle_sidebar';
+import MiddleAddressesView from './middle-addresses-view';
+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 MiddleAddresses extends ReactComponentBase {
+  constructor(props) {
+    super(props);
+    this.setTitle(() => {
+      return {
+        isPath: this.props._uriPath,
+        text: this.props._uriPath ? this.props._uriPath : 'Addresses',
+        prefix: 'ADDR: '
+      };
+    });
+  }
+  
+  shouldUpdate(nextProps, nextState) {
+    return !this.shallowCompare(this.props._uriPath, nextProps._uriPath);
+  }
+  
+  render() {
+    return (
+      <div className="middle">
+        <MiddleAddressesToolbar />
+        <MiddleSidebar />
+        <div className="middle_view middle_view_address">
+          <Route switch="/:tab" handler={MiddleAddressesView} />
+        </div>
+      </div>
+    );
+  }
+}

package/project/client/components/middle/content/middle-content-toolbar.jsx

@@ -0,0 +1,135 @@
+
+'use strict';
+
+
+import React from 'react';
+import ReactComponentStore from 'z-abs-corelayer-client/client/react-component/react-component-store';
+import ButtonNew from 'z-abs-complayer-bootstrap-client/client/button-new';
+import ContentStore from '../../../stores/content-store';
+import { ActionContentMarkup, ActionContentMarkupSave, ActionContentMarkupCancel } from '../../../actions/action-content/action-content';
+
+
+export default class MiddleContentToolbar extends ReactComponentStore {
+  constructor(props) {
+    super(props, [ContentStore]);
+    this.boundKeyDown = this._keyDown.bind(this);
+    this.markupDisabledOpen = false;
+    this.markupDisabledSave = true;
+    this.markupDisabledHelp = false;
+    this.markupDisabledCancel = true;
+  }
+  
+  didMount() {
+    window.addEventListener('keydown', this.boundKeyDown, true);
+  }
+  
+  shouldUpdate(nextProps, nextState) {
+    return !this.shallowCompare(this.state.ContentStore.markup, nextState.ContentStore.markup);
+  }
+  
+  willUnmount() {
+    window.removeEventListener('keydown', this.boundKeyDown, true);
+  }
+  
+  _markupOpen() {
+    this.dispatch(ContentStore, new ActionContentMarkup());
+  }
+  
+  _markupSave() {
+    this.dispatch(ContentStore, new ActionContentMarkupSave());
+  }
+  
+  _markupHelp() {
+  
+  }
+  
+  _markupCancel() {
+    this.dispatch(ContentStore, new ActionContentMarkupCancel());
+  }
+  
+  _keyDown(e) {
+    if(e.ctrlKey && 'o' === e.key) {
+      if(!this.markupDisabledOpen) {
+        e.preventDefault();
+        this._markupOpen();
+      }
+    }
+    else if(e.ctrlKey && e.shiftKey && '?' === e.key) {
+      if(!this.markupDisabledHelp) {
+        e.preventDefault();
+        this._markupHelp();
+      }
+    }
+    else if(e.ctrlKey && e.shiftKey && 'C' === e.key) {
+      if(!this.markupDisabledCancel) {
+        e.preventDefault();
+        this._markupCancel();
+      }
+    }
+    else if(e.ctrlKey && 's' === e.key) {
+      if(!this.markupDisabledSave) {
+        e.preventDefault();
+        this._markupSave();
+      }
+    }
+  }
+  
+  renderMarkupOpenButton() {
+    this.markupDisabledOpen = this.state.ContentStore.markup.definition;
+    return (
+      <ButtonNew id="content_markup_open" icon="icon-markup-open" size="aj_btn_sm" colorMark="markup_color" placement="bottom" heading="Open" content="Markup" shortcut="Ctrl+O" disabled={this.markupDisabledOpen}
+        onClick={(e) => {
+          this._markupOpen();
+        }}
+      />
+    );
+  }
+  
+  renderMarkupSaveButton() {
+    this.markupDisabledSave = this.state.ContentStore.markup.content === this.state.ContentStore.markup.contentOriginal;
+    return (
+      <ButtonNew id="content_markup_save" icon="icon-markup-save" size="aj_btn_sm" colorMark="markup_color" placement="bottom" heading="Save" content="Markup" shortcut="Ctrl+S" disabled={this.markupDisabledSave}
+        onClick={(e) => {
+          this._markupSave();
+        }}
+      />
+    );
+  }
+  
+  renderMarkupHelpButton() {
+    this.markupDisabledHelp = this.state.ContentStore.markup.definition;
+    return (
+      <ButtonNew id="content_markup_help" icon="icon-markup-help" size="aj_btn_sm" colorMark="markup_color" placement="bottom" heading="Help" content="Markup" shortcut="Ctrl+?" shortcut="Ctrl+Shift+C" disabled={this.markupDisabledHelp}
+        onClick={(e) => {
+          this._markupHelp();
+        }}
+      />
+    );
+  }
+  
+  renderMarkupCancelButton() {
+    this.markupDisabledCancel = !this.state.ContentStore.markup.definition;
+    return (
+      <ButtonNew id="content_markup_cancel" icon="icon-markup-close" size="aj_btn_sm" colorMark="markup_color" placement="bottom" heading="Cancel" content="Markup" shortcut="Ctrl+Shift+C" disabled={this.markupDisabledCancel}
+        onClick={(e) => {
+          this._markupCancel();
+        }}
+      />
+    );
+  }
+  
+  render() {
+    return (
+      <div className="middle_toolbar">
+        <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>
+    );
+  }
+}

package/project/client/components/middle/content/middle-content-view-audio.jsx

@@ -0,0 +1,60 @@
+
+'use strict';
+
+import ContentStore from '../../../stores/content-store';
+import { ActionContentMarkupChange } from '../../../actions/action-content/action-content';
+import ComponentMarkedTextarea from 'z-abs-complayer-bootstrap-client/client/marked-textarea';
+import DataContentAudioGlobal from 'z-abs-complayer-markup-client/client/data/data-content/data-content-audio-global';
+import DataContentAudioLocal from 'z-abs-complayer-markup-client/client/data/data-content/data-content-audio-local';
+import ComponentTableDataTable from 'z-abs-complayer-markup-client/client/react-components/markup/component-table-data-table';
+import ReactComponentStore from 'z-abs-corelayer-client/client/react-component/react-component-store';
+import React from 'react';
+
+
+export default class MiddleContentViewAudio extends ReactComponentStore {
+  constructor(props) {
+    super(props, [ContentStore]);
+    this.dataContentAudioGlobal = new DataContentAudioGlobal();
+    this.dataContentAudioLocal = new DataContentAudioLocal();
+  }
+  
+  shouldUpdate(nextProps, nextState) {
+     return 'audio' === nextState.ContentStore.currentView
+      && (
+        !this.shallowCompare(this.state.ContentStore.markup, nextState.ContentStore.markup)
+        || !this.shallowCompareArrayValues(this.state.ContentStore.contentAudioLocals, nextState.ContentStore.contentAudioLocals)
+        || !this.shallowCompareArrayValues(this.state.ContentStore.contentAudioGlobals, nextState.ContentStore.contentAudioGlobals)
+      );
+  }
+  
+  renderMarkup() {
+    return (
+      <div className="content_group">
+        <label htmlFor="content_audio_markup_textarea">Content - Markup</label>
+        <ComponentMarkedTextarea id="content_audio_markup_textarea" className="form-control content_definition same_size_as_parent" rows="10" value={this.state.ContentStore.markup.content} results={this.state.ContentStore.markup.rows}
+          onChange={(value) => {
+            this.dispatch(ContentStore, new ActionContentMarkupChange(value));
+          }}
+          />
+      </div>
+    );
+  }
+
+  render() {
+    if(this.state.ContentStore.markup.definition) {
+      return (
+        <div className="content_tab_view">
+          {this.renderMarkup()}
+        </div>
+      );
+    }
+    else {
+      return (
+        <div className="content_tab_view">
+          <ComponentTableDataTable classTable="markup_table_fit_content markup_table_local" classHeading="markup_table_local_table_heading" classRow="test_data_table" showAlways dataTable={this.dataContentAudioLocal} values={this.state.ContentStore.contentAudioLocals}/>
+          <ComponentTableDataTable classTable="markup_table_fit_content markup_table_global" classHeading="markup_table_global_table_heading" classRow="test_data_table" showAlways dataTable={this.dataContentAudioGlobal} values={this.state.ContentStore.contentAudioGlobals}/>
+        </div>
+      );
+    }
+  }
+}

package/project/client/components/middle/content/middle-content-view-documents.jsx

@@ -0,0 +1,60 @@
+
+'use strict';
+
+import ContentStore from '../../../stores/content-store';
+import { ActionContentMarkupChange } from '../../../actions/action-content/action-content';
+import ComponentMarkedTextarea from 'z-abs-complayer-bootstrap-client/client/marked-textarea';
+import DataContentDocumentsGlobal from 'z-abs-complayer-markup-client/client/data/data-content/data-content-documents-global';
+import DataContentDocumentsLocal from 'z-abs-complayer-markup-client/client/data/data-content/data-content-documents-local';
+import ComponentTableDataTable from 'z-abs-complayer-markup-client/client/react-components/markup/component-table-data-table';
+import ReactComponentStore from 'z-abs-corelayer-client/client/react-component/react-component-store';
+import React from 'react';
+
+
+export default class MiddleContentViewDocuments extends ReactComponentStore {
+  constructor(props) {
+    super(props, [ContentStore]);
+    this.dataContentDocumentsGlobal = new DataContentDocumentsGlobal();
+    this.dataContentDocumentsLocal = new DataContentDocumentsLocal();
+  }
+  
+  shouldUpdate(nextProps, nextState) {
+     return 'documents' === nextState.ContentStore.currentView
+      && (
+        !this.shallowCompare(this.state.ContentStore.markup, nextState.ContentStore.markup)
+        || !this.shallowCompareArrayValues(this.state.ContentStore.contentDocumentsLocals, nextState.ContentStore.contentDocumentsLocals)
+        || !this.shallowCompareArrayValues(this.state.ContentStore.contentDocumentsGlobals, nextState.ContentStore.contentDocumentsGlobals)
+      );
+  }
+  
+  renderMarkup() {
+    return (
+      <div className="content_group">
+        <label htmlFor="content_documents_markup_textarea">Content - Markup</label>
+        <ComponentMarkedTextarea id="content_documents_markup_textarea" className="form-control content_definition same_size_as_parent" rows="10" value={this.state.ContentStore.markup.content} results={this.state.ContentStore.markup.rows}
+          onChange={(value) => {
+            this.dispatch(ContentStore, new ActionContentMarkupChange(value));
+          }}
+          />
+      </div>
+    );
+  }
+
+  render() {
+    if(this.state.ContentStore.markup.definition) {
+      return (
+        <div className="content_tab_view">
+          {this.renderMarkup()}
+        </div>
+      );
+    }
+    else {
+      return (
+        <div className="content_tab_view">
+          <ComponentTableDataTable classTable="markup_table_fit_content markup_table_local" classHeading="markup_table_local_table_heading" classRow="test_data_table" showAlways dataTable={this.dataContentDocumentsLocal} values={this.state.ContentStore.contentDocumentsLocals}/>
+          <ComponentTableDataTable classTable="markup_table_fit_content markup_table_global" classHeading="markup_table_global_table_heading" classRow="test_data_table" showAlways dataTable={this.dataContentDocumentsGlobal} values={this.state.ContentStore.contentDocumentsGlobals}/>
+        </div>
+      );
+    }
+  }
+}

package/project/client/components/middle/content/middle-content-view-image.jsx

@@ -0,0 +1,60 @@
+
+'use strict';
+
+import ContentStore from '../../../stores/content-store';
+import { ActionContentMarkupChange } from '../../../actions/action-content/action-content';
+import ComponentMarkedTextarea from 'z-abs-complayer-bootstrap-client/client/marked-textarea';
+import DataContentImageGlobal from 'z-abs-complayer-markup-client/client/data/data-content/data-content-image-global';
+import DataContentImageLocal from 'z-abs-complayer-markup-client/client/data/data-content/data-content-image-local';
+import ComponentTableDataTable from 'z-abs-complayer-markup-client/client/react-components/markup/component-table-data-table';
+import ReactComponentStore from 'z-abs-corelayer-client/client/react-component/react-component-store';
+import React from 'react';
+
+
+export default class MiddleContentViewImage extends ReactComponentStore {
+  constructor(props) {
+    super(props, [ContentStore]);
+    this.dataContentImageGlobal = new DataContentImageGlobal();
+    this.dataContentImageLocal = new DataContentImageLocal();
+  }
+  
+  shouldUpdate(nextProps, nextState) {
+    return 'image' === nextState.ContentStore.currentView
+      && (
+        !this.shallowCompare(this.state.ContentStore.markup, nextState.ContentStore.markup)
+        || !this.shallowCompareArrayValues(this.state.ContentStore.contentImageLocals, nextState.ContentStore.contentImageLocals)
+        || !this.shallowCompareArrayValues(this.state.ContentStore.contentImageGlobals, nextState.ContentStore.contentImageGlobals)
+      );
+  }
+
+  renderMarkup() {
+    return (
+      <div className="content_group">
+        <label htmlFor="content_image_markup_textarea">Content - Markup</label>
+        <ComponentMarkedTextarea id="content_image_markup_textarea" className="form-control content_definition same_size_as_parent" rows="10" value={this.state.ContentStore.markup.content} results={this.state.ContentStore.markup.rows}
+          onChange={(value) => {
+            this.dispatch(ContentStore, new ActionContentMarkupChange(value));
+          }}
+          />
+      </div>
+    );
+  }
+
+  render() {
+    if(this.state.ContentStore.markup.definition) {
+      return (
+        <div className="content_tab_view">
+          {this.renderMarkup()}
+        </div>
+      );
+    }
+    else {
+      return (
+        <div className="content_tab_view">
+          <ComponentTableDataTable classTable="markup_table_fit_content markup_table_local" classHeading="markup_table_local_table_heading" classRow="test_data_table" showAlways dataTable={this.dataContentImageLocal} values={this.state.ContentStore.contentImageLocals}/>
+          <ComponentTableDataTable classTable="markup_table_fit_content markup_table_global" classHeading="markup_table_global_table_heading" classRow="test_data_table" showAlways dataTable={this.dataContentImageGlobal} values={this.state.ContentStore.contentImageGlobals}/>
+        </div>
+      );
+    }
+  }
+}

package/project/client/components/middle/content/middle-content-view-other.jsx

@@ -0,0 +1,60 @@
+
+'use strict';
+
+import ContentStore from '../../../stores/content-store';
+import { ActionContentMarkupChange } from '../../../actions/action-content/action-content';
+import ComponentMarkedTextarea from 'z-abs-complayer-bootstrap-client/client/marked-textarea';
+import DataContentOtherGlobal from 'z-abs-complayer-markup-client/client/data/data-content/data-content-other-global';
+import DataContentOtherLocal from 'z-abs-complayer-markup-client/client/data/data-content/data-content-other-local';
+import ComponentTableDataTable from 'z-abs-complayer-markup-client/client/react-components/markup/component-table-data-table';
+import ReactComponentStore from 'z-abs-corelayer-client/client/react-component/react-component-store';
+import React from 'react';
+
+
+export default class MiddleContentViewOther extends ReactComponentStore {
+  constructor(props) {
+    super(props, [ContentStore]);
+    this.dataContentOtherGlobal = new DataContentOtherGlobal();
+    this.dataContentOtherLocal = new DataContentOtherLocal();
+  }
+  
+  shouldUpdate(nextProps, nextState) {
+     return 'other' === nextState.ContentStore.currentView
+      && (
+        !this.shallowCompare(this.state.ContentStore.markup, nextState.ContentStore.markup)
+        || !this.shallowCompareArrayValues(this.state.ContentStore.contentOtherLocals, nextState.ContentStore.contentOtherLocals)
+        || !this.shallowCompareArrayValues(this.state.ContentStore.contentOtherGlobals, nextState.ContentStore.contentOtherGlobals)
+      );
+  }
+
+  renderMarkup() {
+    return (
+      <div className="content_group">
+        <label htmlFor="content_other_markup_textarea">Content - Markup</label>
+        <ComponentMarkedTextarea id="content_other_markup_textarea" className="form-control content_definition same_size_as_parent" rows="10" value={this.state.ContentStore.markup.content} results={this.state.ContentStore.markup.rows}
+          onChange={(value) => {
+            this.dispatch(ContentStore, new ActionContentMarkupChange(value));
+          }}
+          />
+      </div>
+    );
+  }
+
+  render() {
+    if(this.state.ContentStore.markup.definition) {
+      return (
+        <div className="content_tab_view">
+          {this.renderMarkup()}
+        </div>
+      );
+    }
+    else {
+      return (
+        <div className="content_tab_view">
+          <ComponentTableDataTable classTable="markup_table_fit_content markup_table_local" classHeading="markup_table_local_table_heading" classRow="test_data_table" showAlways dataTable={this.dataContentOtherLocal} values={this.state.ContentStore.contentOtherLocals}/>
+          <ComponentTableDataTable classTable="markup_table_fit_content markup_table_global" classHeading="markup_table_global_table_heading" classRow="test_data_table" showAlways dataTable={this.dataContentOtherGlobal} values={this.state.ContentStore.contentOtherGlobals}/>
+        </div>
+      );
+    }
+  }
+}

package/project/client/components/middle/content/middle-content-view-text.jsx

@@ -0,0 +1,60 @@
+
+'use strict';
+
+import ContentStore from '../../../stores/content-store';
+import { ActionContentMarkupChange } from '../../../actions/action-content/action-content';
+import ComponentMarkedTextarea from 'z-abs-complayer-bootstrap-client/client/marked-textarea';
+import DataContentTextGlobal from 'z-abs-complayer-markup-client/client/data/data-content/data-content-text-global';
+import DataContentTextLocal from 'z-abs-complayer-markup-client/client/data/data-content/data-content-text-local';
+import ComponentTableDataTable from 'z-abs-complayer-markup-client/client/react-components/markup/component-table-data-table';
+import ReactComponentStore from 'z-abs-corelayer-client/client/react-component/react-component-store';
+import React from 'react';
+
+
+export default class MiddleContentViewText extends ReactComponentStore {
+  constructor(props) {
+    super(props, [ContentStore]);
+    this.dataContentTextGlobal = new DataContentTextGlobal();
+    this.dataContentTextLocal = new DataContentTextLocal();
+  }
+  
+  shouldUpdate(nextProps, nextState) {
+     return 'text' === nextState.ContentStore.currentView
+      && (
+        !this.shallowCompare(this.state.ContentStore.markup, nextState.ContentStore.markup)
+        || !this.shallowCompareArrayValues(this.state.ContentStore.contentTextLocals, nextState.ContentStore.contentTextLocals)
+        || !this.shallowCompareArrayValues(this.state.ContentStore.contentTextGlobals, nextState.ContentStore.contentTextGlobals)
+      );
+  }
+  
+  renderMarkup() {
+    return (
+      <div className="content_group">
+        <label htmlFor="content_text_markup_textarea">Content - Markup</label>
+        <ComponentMarkedTextarea id="content_text_markup_textarea" className="form-control content_definition same_size_as_parent" rows="10" value={this.state.ContentStore.markup.content} results={this.state.ContentStore.markup.rows}
+          onChange={(value) => {
+            this.dispatch(ContentStore, new ActionContentMarkupChange(value));
+          }}
+          />
+      </div>
+    );
+  }
+
+  render() {
+    if(this.state.ContentStore.markup.definition) {
+      return (
+        <div className="content_tab_view">
+          {this.renderMarkup()}
+        </div>
+      );
+    }
+    else {
+      return (
+        <div className="content_tab_view">
+          <ComponentTableDataTable classTable="markup_table_fit_content markup_table_local" classHeading="markup_table_local_table_heading" classRow="test_data_table" showAlways dataTable={this.dataContentTextLocal} values={this.state.ContentStore.contentTextLocals}/>
+          <ComponentTableDataTable classTable="markup_table_fit_content markup_table_global" classHeading="markup_table_global_table_heading" classRow="test_data_table" showAlways dataTable={this.dataContentTextGlobal} values={this.state.ContentStore.contentTextGlobals}/>
+        </div>
+      );
+    }
+  }
+}