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

package/project/client/modal-dialog-folder-properties.jsx

@@ -0,0 +1,237 @@
+
+'use strict';
+
+import HelperEventListener from './helper/helper-event-listener';
+import HelperModalPopover from './helper/helper-modal-popover';
+import InputAnalyzer from './helper/input-analyzer';
+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 ModalDialogFolderProperties extends ReactComponentBase {
+  constructor(props) {
+    super(props, {
+      folder: null,
+      folderName: '',
+      types: [],
+      valid: false,
+      error: false,
+      errorText: ''
+    });
+    this.helperModalPopover = new HelperModalPopover();
+    this.inputRef = React.createRef();
+    this.inputAnalyzer = new InputAnalyzer(this.props.capitalFirst ? true : false);
+    this.eventListener = new HelperEventListener('keydown', this._keyDown.bind(this), true);
+  }
+  
+  static getDerivedStateFromProps(props, state) {
+    if(0 === state.types.length) {
+      const types = props.folder?.data.types.map((type) => {
+        return {
+          chosen: true,
+          name: type
+        }
+      });
+      return {
+        types: types ? types : []
+      };
+    }
+    else {
+      return null;
+    }
+  }
+  
+  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.folder, nextProps.folder)
+      || !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({
+      folder: {$set: null},
+      folderName: {$set: ''},
+      types: {$set: []},
+      valid: {$set: false},
+      error: {$set: false},
+      errorText: {$set: ''}
+    });
+    this.props.onHide();
+  }
+  
+  _keyDown(e) {
+    if(!e.ctrlKey && !e.shiftKey && 'Enter' === e.key) {
+      if(!this.state.error) {
+        e.preventDefault();
+        this.update();
+      }
+    }
+    else if(e.ctrlKey && e.shiftKey && 'C' === e.key) {
+      e.preventDefault();
+      this.hide()
+      ;
+    }
+  }
+  
+  renderTypes() {
+    if(null !== this.props.folder) {
+      return this.props.folder.data.types.map((type, index) => {
+        if('actorjs' !== type) {
+          return (
+            <div key={index} className="row">
+              <div className="col-sm-2" style={{textAlign: 'right'}}>
+                <label htmlFor={`folder_properties_input_type${type}`} className="control-label">{type}</label>
+              </div>
+              <div className="col-sm-2">
+                <input type="checkbox" id={`folder_properties_input_type${type}`} aria-label="..." autoComplete="off" checked={this.state.types[index]?.chosen} style={{marginTop: '12px'}}
+                  onChange={(e) => {
+                    this.updateState({types: (types) => {
+                      types[index].chosen = e.currentTarget.checked;
+                    }});
+                  }}
+                />
+              </div>
+            </div>
+          );
+        }
+      });
+    }
+  }
+  
+  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="folder_properties_modal_error_label" className="text-danger control-label modal_body_p_as_label" style={labelStyle}>{msg}</p>
+        </div>
+      );
+    }
+    else {
+      return null;
+    }
+  }
+  
+  render() {
+    const modalResult = this.props.modalResults.get(this.props.name);
+    const origTypes = this.props.folder?.data.types.map((type) => {
+      return {
+        chosen: true,
+        name: type
+      }
+    });
+    const show = modalResult?.visible;
+    this.helperModalPopover.onRender();
+    return (
+      <Modal ref={this.helperModalPopover.modalRef} id="modal_folder_properties" aria-labelledby="contained-modal-title-sm" show={show}
+        onShown={(e) => {
+          this.inputRef.current.select();
+        }}
+        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_folder_properties_name" className="control-label">Name</label>
+              </div>
+              <div className="col-sm-9">
+                <input ref={this.inputRef} type="text" id="modal_dialog_folder_properties_name" className="form-control input-sm" placeholder="folder name" value={this.state.folderName ? this.state.folderName : this.props.folder ? this.props.folder.title : ''}
+                  onChange={(e) => {
+                    const result = this.inputAnalyzer.analyze(e.target.value);
+                    if(result.success) {
+                      this.updateState({valid: {$set: true}});
+                      this.updateState({error: {$set: false}});
+                    }
+                    else {
+                      this.updateState({valid: {$set: false}});
+                      this.updateState({error: {$set: true}});
+                      if(!result.regexpValidation) {
+                        this.updateState({errorText: {$set: `The name contains not allowed characters: '${result.noneValidCharacters}'`}});
+                      }
+                      else if(!result.filenameValidation) {
+                        this.updateState({errorText: {$set: `The folder is not allowed: '${result.noneValidFilename}'`}});
+                      }
+                    }
+                    this.updateState({folderName: {$set: e.target.value}});
+                  }}
+                  />
+              </div>
+            </div>
+            {this.renderTypes()}
+          </div>
+        </ModalBody>
+        <ModalFooter>
+          {this.renderErrorMessage()}
+          <Popover ref={this.helperModalPopover.getPopoverRef()} placement="bottom" heading="" content="" shortcut="Enter" style={{display:'inline-block'}} disabled={!show}>
+            <button id="folder_properties_change_button" type="button" className="btn btn-primary" disabled={(0 === this.state.folderName.length || this.props.folder.title === this.state.folderName)}
+              onClick={(e) => {
+                let types = this.state.types.map((type) => {
+                  if(type.chosen) {
+                    return type.name;
+                  }
+                });
+                const data = this.deepCopy(this.props.folder.data);
+                data.types = types;
+                this.props.onFolderProperties(this.props.folder.projectId, this.props.folder.title, this.state.folderName, data);
+              }}
+            >Change</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="folder_properties_close_button" type="button" className="btn btn-default" disabled={!show}
+              onClick={(e) => {
+                this.hide();
+              }}
+            >Close</button>
+          </Popover>
+        </ModalFooter>
+      </Modal>
+    );
+  }
+}

package/project/client/modal-dialog-folder-remove.jsx

@@ -0,0 +1,149 @@
+
+'use strict';
+
+import HelperEventListener from './helper/helper-event-listener';
+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 ModalDialogFolderRemove extends ReactComponentBase {
+  constructor(props) {
+    super(props);
+    this.helperModalPopover = new HelperModalPopover();
+    this.eventListener = new HelperEventListener('keydown', this._keyDown.bind(this), true);
+  }
+  
+  didMount() {
+    this.helperModalPopover.didMount();
+  }
+  
+  shouldUpdate(nextProps, nextState) {
+    return !this.shallowCompare(this.props.heading, nextProps.heading)
+      || !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.props.onHide();
+  }
+  
+  _keyDown(e) {
+    if(e.ctrlKey && e.shiftKey && 'R' === e.key) {
+      e.preventDefault();
+      this._remove();
+      this.hide();
+    }
+    else if(e.ctrlKey && e.shiftKey && 'D' === e.key) {
+      e.preventDefault();
+      this._delete();
+      this.hide();
+    }
+    else if(e.ctrlKey && e.shiftKey && 'C' === e.key) {
+      e.preventDefault();
+      this.hide();
+    }
+  }
+  
+  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="folder_remove_modal_error_label" className="text-danger control-label modal_body_p_as_label" style={labelStyle}>{msg}</p>
+        </div>
+      );
+    }
+    else {
+      return null;
+    }
+  }
+
+  renderText() {
+    if(null !== this.props.folder) {
+      return `Do you really want to delete or remove: '${this.props.folder.data.path}/${this.props.folder.title}'?`;
+    }
+    else {
+      return '';
+    }
+  }
+  
+  render() {
+    const modalResult = this.props.modalResults.get(this.props.name);
+    const show = modalResult?.visible;
+    this.helperModalPopover.onRender();
+    return (
+      <Modal ref={this.helperModalPopover.modalRef} id="modal_folder_remove" 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>
+          {this.renderText()}
+        </ModalBody>
+        <ModalFooter>
+          {this.renderErrorMessage()}
+          <Popover ref={this.helperModalPopover.getPopoverRef()} placement="bottom" heading="" content="" shortcut="Ctrl+Shift+R" style={{display:'inline-block'}} disabled={!show}>
+            <button id="folder_remove_remove_button" type="button" className="btn btn-warning"
+              onClick={(e) => {
+                this.props.onFolderRemove(this.props.folder.projectId, this.props.folder.title, this.props.folder.key, this.props.folder.data);
+              }}
+            >Remove</button>
+          </Popover>
+          <Popover ref={this.helperModalPopover.getPopoverRef()} placement="bottom" heading="" content="" shortcut="Ctrl+Shift+D" style={{display:'inline-block',marginLeft:'5px'}} disabled={!show}>
+            <button id="folder_remove_delete_button" type="button" className="btn btn-danger"
+              onClick={(e) => {
+                this.props.onFolderDelete(this.props.folder.projectId, this.props.folder.title, this.props.folder.key, this.props.folder.data);
+              }}
+            >Delete</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="folder_remove_close_button" type="button" className="btn btn-default" disabled={!show}
+              onClick={(e) => {
+                this.hide();
+              }}
+            >Close</button>
+          </Popover>  
+        </ModalFooter>
+      </Modal>
+    );
+  }
+}

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

@@ -0,0 +1,144 @@
+
+'use strict';
+
+import HelperEventListener from './helper/helper-event-listener';
+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 ModalDialogSearch extends ReactComponentBase {
+  constructor(props) {
+    super(props, {
+      show: false,
+      search: '',
+      rules: ''
+    });
+    this.helperModalPopover = new HelperModalPopover();
+    this.inputRef = React.createRef();
+    this.eventListener = new HelperEventListener('keydown', this._keyDown.bind(this), true);
+  }
+  
+  didMount() {
+    this.helperModalPopover.didMount();
+  }
+  
+  shouldUpdate(nextProps, nextState) {
+    return !this.shallowCompare(this.props.result, nextProps.result)
+      || !this.shallowCompare(this.state, nextState);
+  }
+  
+  willUnmount() {
+    this.eventListener.exit();
+  }
+  
+  show() {
+    this.updateState({
+      show: {$set: true},
+      search: {$set: ''},
+      rules: {$set: ''}
+    });
+    this.eventListener.init();
+  }
+  
+  hide() {
+    this.eventListener.exit();
+    this.updateState({
+      show: {$set: false}
+    });
+  }
+  
+  _keyDown(e) {
+    if(!e.ctrlKey && !e.shiftKey && 'Enter' === e.key) {
+      if(!this.state.error) {
+        e.preventDefault();
+        this.props.onSearch(this.state.search, this.state.rules);
+        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_search" aria-labelledby="contained-modal-title-sm" show={this.state.show || errorShow}
+        onShown={(e) => {
+          this.inputRef.current.select();
+        }}
+        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">Search</h4>
+        </ModalHeader>
+        <ModalBody>
+          <div className="form-group">
+            <div className="row" style={{textAlign: 'right'}}>
+              <div className="col-sm-2">
+                <label htmlFor="modal_dialog_search_find_what" className="control-label">Name</label>
+              </div>
+              <div className="col-sm-9">
+                <input ref={this.inputRef} type="text" id="modal_dialog_search_find_what" className="form-control input-sm" placeholder="find what" value={this.state.search}
+                  onChange={(e) => {
+                    this.updateState({search: {$set: e.target.value}});
+                  }}
+                  />
+              </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="modal_dialog_search_button" type="button" className="btn btn-primary" disabled={0 === this.state.search.length}
+              onClick={(e) => {
+                this.props.onSearch(this.state.search, this.state.rules);
+                this.hide();
+              }}
+            >Search</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="modal_dialog_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-wizard-list.jsx

@@ -0,0 +1,49 @@
+
+'use strict';
+
+import ReactComponentBase from 'z-abs-corelayer-client/client/react-component/react-component-base';
+import React from 'react';
+
+
+export default class ModalDialogWizardList extends ReactComponentBase {
+  constructor(props) {
+    super(props, {
+      listName: ''
+    });
+  }
+  
+  shouldUpdate(nextProps, nextState) {
+    return !this.shallowCompare(this.props, nextProps)
+      || !this.shallowCompare(this.state, nextState);
+  }
+  
+  renderlistNameOptions() {
+    if(null !==this.props.listNames) {
+      return this.props.listNames.map((listName, index) => {
+        return (
+          <option key={index} value={listName}>{listName}</option>
+        );
+      });
+    }
+  }
+  
+  render() {
+    return (
+      <div className="row" style={{textAlign: 'right'}}>
+        <div className="col-sm-2">
+        <label htmlFor={`modal_dialog_wizard_list_${this.props.listName}`} className="control-label">{this.props.listName}</label>
+        </div>
+        <div className="col-sm-9">
+          <select id={`modal_dialog_wizard_list_${this.props.listName}`} className="form-control input-sm" value={this.state.listName}
+            onChange={(e) => {
+              this.updateState({listName: {$set: e.target.value}});
+              this.props.onChosenList && this.props.onChosenList(e.target.value);
+            }}
+          >
+            {this.renderlistNameOptions()}
+          </select>
+        </div>        
+      </div>
+    );
+  }
+}