@aj-shadow/z-abs-complayer-modaldialog-client 0.0.0-aj-beta.221

package/project/client/modal-dialog-wizard.jsx

@@ -0,0 +1,145 @@
+
+'use strict';
+
+import HelperModalPopover from './helper/helper-modal-popover';
+import Modal from 'z-abs-complayer-bootstrap-client/client/modal';
+import ModalHeader from 'z-abs-complayer-bootstrap-client/client/modal-header';
+import ModalBody from 'z-abs-complayer-bootstrap-client/client/modal-body';
+import ModalFooter from 'z-abs-complayer-bootstrap-client/client/modal-footer';
+import Popover from 'z-abs-complayer-bootstrap-client/client/popover';
+import ReactComponentBase from 'z-abs-corelayer-client/client/react-component/react-component-base';
+import React from 'react';
+
+
+export default class ModalDialogWizard extends ReactComponentBase {
+  constructor(props) {
+    super(props, {
+      show: false,
+      folder: null,
+      name: ''
+    });
+    this.boundKeyDown = this._keyDown.bind(this);
+    this.helperModalPopover = new HelperModalPopover();
+  }
+  
+  didMount() {
+    this.helperModalPopover.didMount();
+  }
+  
+  shouldUpdate(nextProps, nextState) {
+    return !this.shallowCompare(this.props, nextProps)
+      || !this.shallowCompare(this.state, nextState);
+  }
+  
+  show(folder) {
+    this.updateState({
+      show: {$set: true},
+      folder: {$set: folder},
+      name: {$set: ''}
+    });
+    window.addEventListener('keydown', this.boundKeyDown, true);
+  }
+  
+  hide() {
+    window.removeEventListener('keydown', this.boundKeyDown, true);
+    this.updateState({
+      show: {$set: false},
+      folder: {$set: null}
+    });
+  }  
+  
+  _keyDown(e) {
+    if(!e.ctrlKey && !e.shiftKey && 'Enter' === e.key) {
+      if(!this.state.error) {
+        e.preventDefault();
+        this.new();
+        this.hide();
+      }
+    }
+    else if(e.ctrlKey && e.shiftKey && 'C' === e.key) {
+      e.preventDefault();
+      this.hide();
+    }
+  }
+  
+  renderErrorMessage() {
+   /* if(this.props.result.code !== 'success') {
+      let errorDivStyle = {
+        float: 'left',
+        textAlign: 'left',
+        width: 440
+      }
+      return (
+        <div style={errorDivStyle}>
+          <p className="text-danger control-label modal_body_p_as_label">{this.props.result.msg}</p>
+        </div>
+      );
+    }*/
+  }
+  
+  renderChildren() {
+    return (
+      <>
+        <br />
+        {this.props.children}
+      </>
+    );
+  }
+  
+  render() {
+    let nameDivLabelClassName = 'col-sm-10';
+    let errorShow = false;
+    if(undefined !== this.props.result.status && !this.props.result.status.name.status) {
+      nameDivLabelClassName += ' has-error';
+      errorShow = true;
+    }
+    this.helperModalPopover.onRender();
+    return (
+      <Modal ref={this.helperModalPopover.modalRef} id="modal_wizard" aria-labelledby="contained-modal-title-sm" show={this.state.show || errorShow}
+        onHide={(e) => {
+          this.hide();
+        }}
+        >
+        <ModalHeader closeButton>
+          <img className="modal_header_icon pull-left" src="/abs-images/svg/ActorJsA.svg" alt="ActorJs Icon"></img>
+          <h4 className="modal_header_heading modal-sm">{this.props.heading}</h4>
+        </ModalHeader>
+        <ModalBody>
+          <div className="form-group">
+            <div className="row" style={{textAlign: 'right'}}>
+              <div className="col-sm-2">
+                <label htmlFor="modal_dialog_wizard_name" className="control-label">Name</label>
+              </div>
+              <div className="col-sm-9">
+                <input type="text" id="modal_dialog_wizard_name" className="form-control input-sm" placeholder={this.props.namePlaceHolder} value={this.state.name}
+                  onChange={(e) => {
+                    this.updateState({name: {$set: e.target.value}});
+                  }}
+                  />
+              </div>
+            </div>
+            {this.renderChildren()}
+          </div>
+        </ModalBody>
+        <ModalFooter>
+          {this.renderErrorMessage()}
+          <Popover ref={this.helperModalPopover.getPopoverRef()} placement="bottom" heading="" content="" shortcut="Enter" style={{display:'inline-block'}} disabled={!this.state.show}>
+            <button id="wizard_add_button" type="button" className="btn btn-primary" disabled={0 === this.state.name.length}
+              onClick={(e) => {
+                this.props.onWizardNew(this.state.folder.projectId, `${this.state.folder.data.path}/${this.state.folder.title}`, this.state.name);
+                this.hide();
+              }}
+            >Add</button>
+          </Popover>
+          <Popover ref={this.helperModalPopover.getPopoverRef()} placement="bottom" heading="" content="" shortcut="Ctrl+Shift+C" style={{display:'inline-block',marginLeft:'5px'}} disabled={!this.state.show}>
+            <button id="wizard_close_button" type="button" className="btn btn-default" disabled={!this.state.show}
+              onClick={(e) => {
+                this.hide();
+              }}
+            >Close</button>
+          </Popover>
+        </ModalFooter>
+      </Modal>
+    );
+  }
+}

package/project/client/modal-dialog-workspace-new.jsx

@@ -0,0 +1,157 @@
+
+'use strict';
+
+import HelperModalPopover from './helper/helper-modal-popover';
+import Modal from 'z-abs-complayer-bootstrap-client/client/modal';
+import ModalHeader from 'z-abs-complayer-bootstrap-client/client/modal-header';
+import ModalBody from 'z-abs-complayer-bootstrap-client/client/modal-body';
+import ModalFooter from 'z-abs-complayer-bootstrap-client/client/modal-footer';
+import Popover from 'z-abs-complayer-bootstrap-client/client/popover';
+import ReactComponentBase from 'z-abs-corelayer-client/client/react-component/react-component-base';
+import React from 'react';
+
+
+export default class ModalDialogWorkspaceNew extends ReactComponentBase {
+  constructor(props) {
+    super(props, {
+      show: false,
+      appName: '',
+      appType: 0
+    });
+    this.boundKeyDown = this._keyDown.bind(this);
+    this.helperModalPopover = new HelperModalPopover();
+  }
+  
+  didMount() {
+    this.helperModalPopover.didMount();
+  }
+  
+  shouldUpdate(nextProps, nextState) {
+    return !this.shallowCompare(this.props.heading, nextProps.heading)
+      || !this.shallowCompare(this.props.result, nextProps.result)
+      || !this.shallowCompare(this.state, nextState);
+  }
+  
+  show() {
+    this.updateState({
+      show: {$set: true},
+      appName: {$set: ''},
+      appType: {$set: 0}
+    });
+    window.addEventListener('keydown', this.boundKeyDown, true);
+  }
+  
+  hide() {
+    window.removeEventListener('keydown', this.boundKeyDown, true);
+    this.updateState({
+      show: {$set: false},
+      appName: {$set: ''},
+      appType: {$set: 0}
+    });
+  }
+  
+  _keyDown(e) {
+    if(!e.ctrlKey && !e.shiftKey && 'Enter' === e.key) {
+      if(!this.state.error) {
+        e.preventDefault();
+        this.new();
+        this.hide();
+      }
+    }
+    else if(e.ctrlKey && e.shiftKey && 'C' === e.key) {
+      e.preventDefault();
+      this.hide();
+    }
+  }
+  
+  renderErrorMessage() {
+   /* if(this.props.result.code !== 'success') {
+      let errorDivStyle = {
+        float: 'left',
+        textAlign: 'left',
+        width: 440
+      }
+      return (
+        <div style={errorDivStyle}>
+          <p className="text-danger control-label modal_body_p_as_label">{this.props.result.msg}</p>
+        </div>
+      );
+    }*/
+  }
+  
+  render() {
+    let nameDivLabelClassName = 'col-sm-10';
+    let errorShow = false;
+    if(undefined !== this.props.result.status && !this.props.result.status.name.status) {
+      nameDivLabelClassName += ' has-error';
+      errorShow = true;
+    }
+    this.helperModalPopover.onRender();
+    return (
+      <Modal ref={this.helperModalPopover.modalRef} id="modal_workspace_new" aria-labelledby="contained-modal-title-sm" show={this.state.show || errorShow}
+        onHide={(e) => {
+          this.hide();
+        }}
+      >
+        <ModalHeader closeButton>
+          <img className="modal_header_icon pull-left" src="/abs-images/svg/ActorJsA.svg" alt="ActorJs Icon"></img>
+          <h4 className="modal_header_heading modal-sm">{this.props.heading}</h4>
+        </ModalHeader>
+        <ModalBody>
+          <div className="form-group">
+            <div className="row" style={{textAlign: 'right'}}>
+              <div className="col-sm-3">
+                <label htmlFor="workspace_new_app_name" className="control-label">App Name</label>
+              </div>
+              <div className="col-sm-8">
+                <input type="text" id="workspace_new_app_name" className="form-control input-sm" placeholder="app name" value={this.state.appName}
+                  onChange={(e) => {
+                    this.updateState({appName: {$set: e.target.value}});
+                  }}
+                  />
+              </div>
+            </div>
+            <br />
+            <div className="row" style={{textAlign: 'right'}}>
+              <div className="col-sm-3">
+                <label htmlFor="workspace_new_workspace_name" className="control-label">App Type</label>
+              </div>
+              <div className="col-sm-8">
+                <div className="col-sm-3">
+                  <input type="radio" id="radio-app" style={{position:'relative',top:'1px'}} aria-label="..." checked={0 === this.state.appType} onChange={(e) => {
+                    this.updateState({appType: {$set: 0}});
+                  }}/>
+                  <label htmlFor="radio-app" style={{paddingLeft:'4px'}}>{"App"}</label>
+                </div>
+                <div className="col-sm-3">
+                  <input type="radio" id="radio-node" style={{position:'relative',top:'1px'}} aria-label="..." checked={1 === this.state.appType} onChange={(e) => {
+                    this.updateState({appType: {$set: 1}});
+                  }}/>
+                  <label htmlFor="radio-node" style={{paddingLeft:'4px'}}>{"Node"}</label>
+                </div>
+              </div>
+            </div>
+          </div>
+        </ModalBody>
+        <ModalFooter>
+          {this.renderErrorMessage()}
+          <Popover ref={this.helperModalPopover.getPopoverRef()} placement="bottom" heading="" content="" shortcut="Enter" style={{display:'inline-block'}} disabled={!this.state.show}>
+            <button id="workspace_new_add_button" type="button" className="btn btn-primary" disabled={0 === this.state.appName.length}
+              onClick={(e) => {
+                this.props.onWorkspaceNew(this.state.appName, this.state.appType);
+                this.hide();
+              }}
+              >Add</button>
+          </Popover>
+          <Popover ref={this.helperModalPopover.getPopoverRef()} placement="bottom" heading="" content="" shortcut="Ctrl+Shift+C" style={{display:'inline-block',marginLeft:'5px'}} disabled={!this.state.show}>
+            <button id="workspace_new_close_button" type="button" className="btn btn-default" disabled={!this.state.show}
+              onClick={(e) => {
+                this.hide();
+              }}
+            >Close</button>
+          </Popover>
+        </ModalFooter>
+      </Modal>
+    );
+  }
+}

package/project/client/modal-dialog-workspace-open.jsx

@@ -0,0 +1,306 @@
+
+'use strict';
+
+import HelperEventListener from './helper/helper-event-listener';
+import HelperModalPopover from './helper/helper-modal-popover';
+import FileIcons from 'z-abs-complayer-bootstrap-client/client/icons/file-icons';
+import FolderIcons from 'z-abs-complayer-bootstrap-client/client/icons/folder-icons';
+import Modal from 'z-abs-complayer-bootstrap-client/client/modal';
+import ModalHeader from 'z-abs-complayer-bootstrap-client/client/modal-header';
+import ModalBody from 'z-abs-complayer-bootstrap-client/client/modal-body';
+import ModalFooter from 'z-abs-complayer-bootstrap-client/client/modal-footer';
+import Popover from 'z-abs-complayer-bootstrap-client/client/popover';
+import Tree from 'z-abs-complayer-tree-client/client/react-components/tree';
+import ReactComponentBase from 'z-abs-corelayer-client/client/react-component/react-component-base';
+import Project  from 'z-abs-corelayer-cs/clientServer/project';
+import React from 'react';
+
+
+export default class ModalDialogWorkspaceOpen extends ReactComponentBase {
+  constructor(props) {
+    super(props, {
+      name: '',
+      types: []
+    });
+    this.helperModalPopover = new HelperModalPopover();
+    this.eventListener = new HelperEventListener('keydown', this._keyDown.bind(this), true);
+  }
+  
+  static getDerivedStateFromProps(props, state) {
+    let update = null;
+    if(0 === state.types.length) {
+      const types = props.folder?.data.types.map((type) => {
+        return {
+          chosen: 'actorjs' !== type,
+          name: type
+        }
+      });
+      update = {
+        types: types ? types : []
+      };
+    }
+    return update;
+  }
+  
+  didMount() {
+    this.helperModalPopover.didMount();
+  }
+  
+  shouldUpdate(nextProps, nextState) {
+    return !this.shallowCompare(this.props.name, nextProps.name)
+      || !this.shallowCompare(this.props.heading, nextProps.heading)
+      || !this.shallowCompare(this.props.result, nextProps.result)
+      //|| !this.shallowCompare(this.props.project, nextProps.project)
+      //|| !this.shallowCompare(this.props.current, nextProps.current)
+      //|| !this.shallowCompare(this.props.original, nextProps.original)
+      || !this.shallowCompare(this.props.modalResults, nextProps.modalResults)
+      || !this.shallowCompare(this.state, nextState);
+  }
+  
+  didUpdate(prevProps, prevState) {
+    const previousModalResult = prevProps.modalResults.get(this.props.name);
+    const modalResult = this.props.modalResults.get(this.props.name);
+    if(modalResult) {
+      if(!prevProps.modalResult || (prevProps.modalResult.visible !== modalResult.visible)) {
+        if(modalResult.visible) {
+          this.eventListener.init();
+        }
+        else {
+          this.eventListener.exit();
+        }
+      }
+    }
+  }
+  
+  willUnmount() {
+    this.eventListener.exit();
+  }
+  
+  hide() {
+    this.updateState({
+      name: {$set: ''},
+      types: {$set: []}
+    });
+    this.props.onHide();
+  }
+  
+  _keyDown(e) {
+    const disabled = null === this.props.current.folder || !this.props.current.folder.data.path.startsWith(`${this.props.original.folder.data.path}/${this.props.original.folder.title}`);
+    if(!e.ctrlKey && !e.shiftKey && 'Enter' === e.key) {
+      if(!disabled) {
+        e.preventDefault();
+        const types = [];
+        this.state.types.forEach((type) => {
+          if(type.chosen) {
+            types.push(type.name);
+          }
+        });
+        const data = this.deepCopy(this.props.current.folder.data);
+        data.path = `${this.props.folder.data.path}/${this.props.folder.title}`;
+        data.types = types;
+        this.props.onAdd();
+        this.hide();
+      }
+    }
+    else if(e.ctrlKey && e.shiftKey && 'C' === e.key) {
+      e.preventDefault();
+      this.hide();
+    }
+    else if('ArrowUp' === e.key) {
+      
+    }
+    else if('ArrowDown' === e.key) {
+      
+    }
+    else if('ArrowLeft' === e.key) {
+      
+    }
+    
+    else if('ArrowRight' === e.key) {
+      
+    }
+  }
+  
+  setName(name) {
+    this.updateState({
+      name: {$set: name}
+    });    
+  }
+  
+  setDescription(description) {
+    this.updateState({
+      description: description
+    });    
+  }
+  
+  renderErrorMessage() {
+    const modalResult = this.props.modalResults.get(this.props.name);
+    if(this.state.error || 'error' === modalResult?.result.code) {
+      const msg = this.state.error ? this.state.errorText : modalResult.result.msg;
+      const errorDivStyle = {
+        float: 'left',
+        textAlign: 'left',
+        width: 420
+      };
+      const labelStyle = {
+        top: '2px',
+        position: 'relative'
+      };
+      return (
+        <div style={errorDivStyle}>
+          <p id="worksapce_opn_modal_error_label" className="text-danger control-label modal_body_p_as_label" style={labelStyle}>{msg}</p>
+        </div>
+      );
+    }
+    else {
+      return null;
+    }
+  }
+  
+  renderTree() {
+    if(0 !== this.props.workspaces.length) {
+      const project = new Project();
+      let node = project.addRootFolder('workspaces', [], 'key', true);
+      this.props.workspaces.forEach((workspace) => {
+        project.addFolderToNode(workspace, '.', [], node);
+      });
+      return (
+        <Tree id="actor_tree_modal_dialogworkspace_open" project={project} current={{folder:null, file:null}} expandCurrentFolder={true} allowExpand={false} folderIcons={FolderIcons} fileIcons={FileIcons}
+          onClickFile={(key, title, path, type) => {}}
+          onClickFolder={(key, title, data) => {
+            console.log('KLOCLSDASDASDASDASDASDASDASDASDASDASDASDA');
+            project.select(key, true);
+            this.props.onChoose(title);
+          }}
+          onToggleFolder={(key, expanded) => {}}
+        />
+      );
+    }
+    else {
+      return null;
+    }
+  }
+  
+  /*renderFileTypes(disabled) {
+    if(!disabled && this.props.folder) {
+      const fileTypes = this.props.folder.data.types.map((type, index) => {
+        if('actorjs' !== type) {
+          return (
+            <React.Fragment key={`worksapce_opn_input_${type}`}>
+              <div className="col-sm-1">
+                <input type="checkbox" id={`worksapce_opn_input_type_${type}`} aria-label="..." autoComplete="off" checked={this.state.types[index]?.chosen}
+                  onChange={(e) => {
+                    this.state.types[index].chosen = e.currentTarget.checked;
+                    this.updateState({types: {$set: this.state.types}});
+                  }}
+                />
+              </div>
+              <div className="col-sm-1">
+                <label htmlFor={`worksapce_opn_input_type_${type}`} className="modal_body_file_type control-label">{type}</label>
+              </div>
+            </React.Fragment>
+          );
+        }
+      });
+      return (
+        <>
+          <hr className="modal_body_hr" />
+          <div className="row">
+            <div className="col-sm-1" />
+            <h5 className="modal_body_file_type_heading col-sm-4">File Types</h5>
+          </div>
+          <div key="file_types" className="row">
+          <div className="col-sm-1" />
+            {fileTypes}
+          </div>
+        </>
+      );
+    }
+  }*/
+  
+  _calculateDepth(node, currentDepth, depth) {
+    if(depth > currentDepth.value) {
+      ++currentDepth.value;
+    }
+    node.children.forEach((child) => {
+      if(child.folder) {
+        this._calculateDepth(child, currentDepth, ++depth);
+      }
+    });
+  }
+  
+  /*renderNotFound(disabled) {
+    if(disabled && 0 !== this.props.project.source.length) {
+       const errorDivStyle = {
+        float: 'left',
+        textAlign: 'left',
+        width: 420
+      };
+      const labelStyle = {
+        top: '2px',
+        position: 'relative'
+      };
+      const currentDepth = {value: 0};
+      this._calculateDepth(this.props.project.source[0], currentDepth, 0);
+      return (
+        <div style={errorDivStyle}>
+          <p id="worksapce_opn_modal_error_label" className="text-danger control-label modal_body_p_as_label" style={labelStyle}>No Folders Found</p>
+        </div>
+      );
+    }
+  }*/
+  
+  render() {
+    this.helperModalPopover.onRender();
+    const modalResult = this.props.modalResults.get(this.props.name);
+    const show = !!modalResult?.visible;
+   // const disabled = null === this.props.current.folder || !this.props.current.folder.data.path.startsWith(`${this.props.original.folder.data.path}/${this.props.original.folder.title}`);
+    const disabled = false;
+    return (
+      <Modal ref={this.helperModalPopover.modalRef} id="modal_worksapce_opn" aria-labelledby="contained-modal-title-sm" show={show}
+        onHide={(e) => {
+          this.hide();
+        }}
+      >
+        <ModalHeader closeButton>
+          <img className="modal_header_icon pull-left" src="/abs-images/svg/ActorJsA.svg" alt="ActorJs Icon"></img>
+          <h4 className="modal_header_heading modal-sm">{this.props.heading}</h4>
+        </ModalHeader>
+        <ModalBody className="modal-dialog-file-body">
+          {this.renderTree()}
+          {/*this.renderFileTypes(disabled)*/}
+        </ModalBody>
+        <ModalFooter>
+          {this.renderErrorMessage()}
+          {/*this.renderNotFound(disabled)*/}
+          <Popover ref={this.helperModalPopover.getPopoverRef()} placement="bottom" heading="" content="" shortcut="Enter" style={{display:'inline-block'}} disabled={!show}>
+            <button id="worksapce_opn_add_button" type="button" className="btn btn-primary" disabled={disabled}
+              onClick={(e) => {
+                const types = [];
+                this.state.types.forEach((type) => {
+                  if(type.chosen) {
+                    types.push(type.name);
+                  }
+                });
+                {/*const data = this.deepCopy(this.props.current.folder.data);
+                data.path = `${this.props.folder.data.path}/${this.props.folder.title}`;
+                data.types = types;*/}
+                this.props.onAdd();
+              }}
+            >Add</button>
+          </Popover>
+          <Popover ref={this.helperModalPopover.getPopoverRef()} placement="bottom" heading="" content="" shortcut="Ctrl+Shift+C" style={{display:'inline-block',marginLeft:'5px'}} disabled={!show}>
+            <button id="worksapce_opn_close_button" type="button" className="btn btn-default" disabled={!show}
+              onClick={(e) => {
+                this.hide();
+              }}
+            >Close</button>
+          </Popover>
+        </ModalFooter>
+      </Modal>
+    );
+  }
+}
+
+
+module.exports = ModalDialogWorkspaceOpen;

package/project/client/stores/modal-dialog-store.js

@@ -0,0 +1,63 @@
+
+'use strict';
+
+import StoreBaseRealtime from 'z-abs-corelayer-client/client/store/store-base-realtime';
+
+
+class ModalDialogStore extends StoreBaseRealtime {
+  constructor() {
+    super({
+      modalResults: new Map()
+    });
+    this.pendingName = '';
+  }
+  
+  onActionModalDialogShow(action) {
+    this.updateState({modalResults: (modalResults) => {
+      const modalResultNew = {
+        name: action.name,
+        visible: true,
+        result: {
+          code: 'success',
+          error: null,
+          msg: ''
+        }
+      };
+      modalResults.set(action.name, modalResultNew);
+    }});
+  }
+  
+  onActionModalDialogHide(action) {
+    this.updateState({modalResults: (modalResults) => {
+      const modalResultNew = {
+        name: action.name,
+        visible: false,
+        result: {
+          code: 'success',
+          error: null,
+          msg: ''
+        }
+      };
+      modalResults.set(action.name, modalResultNew);
+    }});
+  }
+  
+  onActionModalDialogPending(action) {
+    this.pendingName = action.name;
+  }
+  
+  onActionModalDialogResult(action) {
+    this.updateState({modalResults: (modalResults) => {
+      const modalResultNew = {
+        name: this.pendingName,
+        visible: 'error' === action.result.code,
+        result: action.result
+      };
+      modalResults.set(this.pendingName, modalResultNew);
+    }});
+    this.pendingName = '';
+  }
+}
+
+
+module.exports = new ModalDialogStore();