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

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

@@ -0,0 +1,157 @@
+
+'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 ModalDialogFileRemove 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();
+    }
+  }
+  
+  _remove(e) {
+    this.props.onFileRemove(this.props.file.projectId, this.props.file.key);
+  }
+  
+  _delete(e) {
+    this.props.onFileDelete(this.props.file.projectId, this.props.file.key, !!this.props.file.plugin);
+  }
+  
+  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="file_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.file) {
+      return `Do you really want to delete or remove: '${this.props.file.path}/${this.props.file.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_file_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="file_remove_remove_button" type="button" className="btn btn-warning"
+              onClick={(e) => {
+                this._remove(e);
+              }}
+            >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="file_remove_delete_button" type="button" className="btn btn-danger" disabled={!this.props.doDelete}
+              onClick={(e) => {
+                this._delete(e);
+              }}
+            >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="file_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-folder-add.jsx

@@ -0,0 +1,292 @@
+
+'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 React from 'react';
+
+
+export default class ModalDialogFolderAdd extends ReactComponentBase {
+  constructor(props) {
+    super(props, {
+      name: '',
+      types: [],
+      project: null
+    });
+    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.props.folder.projectId, this.props.current.folder.title, data);
+        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="folder_add_modal_error_label" className="text-danger control-label modal_body_p_as_label" style={labelStyle}>{msg}</p>
+        </div>
+      );
+    }
+    else {
+      return null;
+    }
+  }
+  
+  renderTree() {
+    const activationFilter = null !== this.props.original.folder ? `${this.props.original.folder.data.path}` : undefined;
+    return (
+      <Tree id="actor_tree_modul_dialog_folder" project={this.props.project} current={this.props.current} expandCurrentFolder={true} allowExpand={false} activationFilter={activationFilter} folderIcons={FolderIcons} fileIcons={FileIcons}
+        onClickFile={(key, title, path, type) => {}}
+        onClickFolder={(key, title, data) => {
+          this.props.project.select(key, true);
+          this.props.onChoose(`${data.path}/${title}`);
+        }}
+        onToggleFolder={(key, expanded) => {}}
+      />
+    );
+  }
+  
+  renderFileTypes(disabled) {
+    if(!disabled && this.props.folder) {
+      const fileTypes = this.props.folder.data.types.map((type, index) => {
+        if('actorjs' !== type) {
+          return (
+            <React.Fragment key={`folder_add_input_${type}`}>
+              <div className="col-sm-1">
+                <input type="checkbox" id={`folder_add_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={`folder_add_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="folder_add_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}`);
+    return (
+      <Modal ref={this.helperModalPopover.modalRef} id="modal_folder_add" 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="folder_add_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(this.props.folder.projectId, this.props.current.folder.title, data);
+              }}
+            >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="folder_add_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-new.jsx

@@ -0,0 +1,231 @@
+
+'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 ModalDialogFolderNew extends ReactComponentBase {
+  constructor(props) {
+    super(props, {
+      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({
+      folderName: {$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.new();
+        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_new_modal_error_label" className="text-danger control-label modal_body_p_as_label" style={labelStyle}>{msg}</p>
+        </div>
+      );
+    }
+    else {
+      return null;
+    }
+  }
+
+  renderTypes() {
+    if(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_new_input_type_${type}`} className="control-label">{type}</label>
+              </div>
+              <div className="col-sm-2">
+                <input type="checkbox" id={`folder_new_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>
+          );
+        }
+      });
+    }
+  }
+  
+  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_new" aria-labelledby="contained-modal-title-sm" show={show}
+        onShown={(e) => {
+          this.inputRef.current.focus();
+        }}
+        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_new_name" className="control-label">Name</label>
+              </div>
+              <div className="col-sm-9">
+                <input ref={this.inputRef} type="text" id="modal_dialog_folder_new_name" className="form-control input-sm" placeholder="folder name" value={this.state.folderName}
+                  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 filename 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_new_new_button" type="button" className="btn btn-primary" disabled={0 === this.state.folderName.length || !this.state.valid}
+              onClick={(e) => {
+                const types = [];
+                this.state.types.forEach((type) => {
+                  if(type.chosen) {
+                    types.push(type.name);
+                  }
+                });
+                const data = this.deepCopy(this.props.folder.data);
+                data.path = `${this.props.folder.data.path}/${this.props.folder.title}`;
+                data.type = 'folder';
+                data.types = types;
+                this.props.onFolderNew(this.props.folder.projectId, this.state.folderName, data);
+              }}
+            >New</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_new_close_button" type="button" className="btn btn-default" disabled={!show}
+              onClick={(e) => {
+                this.hide();
+              }}
+            >Close</button>
+          </Popover>
+        </ModalFooter>
+      </Modal>
+    );
+  }
+}