Sync changes v29.0.0 from IceHrmPro (https://icehrm.com/purchase-icehrmpro)

web/components/IceColorPick.js

@@ -0,0 +1,70 @@
+import React, { useState, useRef, useEffect } from "react";
+import { SketchPicker } from 'react-color';
+
+function useComponentVisible(initialIsVisible) {
+  const [isComponentVisible, setIsComponentVisible] = useState(initialIsVisible);
+  const ref = useRef(null);
+
+  const handleClickOutside = (event) => {
+    if (ref.current && !ref.current.contains(event.target)) {
+      setIsComponentVisible(false);
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener('click', handleClickOutside, true);
+    return () => {
+      document.removeEventListener('click', handleClickOutside, true);
+    };
+  });
+
+  return { ref, isComponentVisible, setIsComponentVisible };
+}
+
+function IceColorPick(props) {
+  const { value, onChange, readOnly } = props;
+
+  const { ref, isComponentVisible, setIsComponentVisible } = useComponentVisible(true);
+
+  const [color, setColor] = useState(value || '#FFF');
+  const [showPicker, setShowPicker] = useState(false);
+
+  useEffect(() => {
+    if (!isComponentVisible) {
+      setShowPicker(false);
+    }
+  }, [isComponentVisible])
+
+  useEffect(() => {
+    if (value) {
+      setColor(value);
+    }
+    
+  }, [value]);
+
+  return <div className="colorpicker-container">
+    <div
+      className="colorpicker-preview"
+      onClick={() => {
+        if (!showPicker) {
+          setIsComponentVisible(true);
+        }
+        setShowPicker(!showPicker);
+      }}
+      style={ { backgroundColor: color} }
+    />
+    <div ref={ref} className={`colorpicker-component ${(readOnly || !showPicker) ? 'hidden': ''}` }>
+      <SketchPicker
+        color={color}
+        disableAlpha
+        presetColors={[]}
+        onChangeComplete={({ hex }) => {
+          onChange(hex);
+          setColor(hex);
+        }}
+      />
+    </div>
+  </div>;
+} 
+
+export default IceColorPick;

web/components/IceDataGroup.js

@@ -21,6 +21,7 @@ class IceDataGroup extends React.Component {
     value = this.parseValue(value);
     value = value.map(item => ({ ...item, key:item.id } ));
     const columns = JSON.parse(JSON.stringify(field[1].columns));
+
     if (!this.props.readOnly) {
       columns.push({
         title: 'Action',
@@ -30,6 +31,7 @@ class IceDataGroup extends React.Component {
         ),
       });
     }
+
     return (
       <>
         {!this.props.readOnly &&

web/components/IceForm.js

@@ -7,6 +7,8 @@ import IceUpload from './IceUpload';
 import IceDataGroup from './IceDataGroup';
 import IceSelect from './IceSelect';
 import IceLabel from './IceLabel';
+import IceColorPick from './IceColorPick';
+import IceSignature from './IceSignature';
 
 
 const ValidationRules = {
@@ -86,24 +88,36 @@ class IceForm extends React.Component {
   }
 
   render() {
-    const { fields, twoColumnLayout } = this.props;
+    const { fields, twoColumnLayout, adapter } = this.props;
+    let formInputs = [];
     const formInputs1 = [];
     const formInputs2 = [];
     const columns = !twoColumnLayout ? 1 : 2;
     for (let i = 0; i < fields.length; i++) {
-      const formInput = this.createFromField(fields[i], this.props.viewOnly);
-      if (formInput != null) {
+      formInputs.push(
+        adapter.beforeRenderFieldHook(
+          fields[i][0],
+          this.createFromField(fields[i], this.props.viewOnly),
+          fields[i][1]
+        )
+      );
+    }
+    formInputs = formInputs.filter(input => !!input);
+
+    for (let i = 0; i < formInputs.length; i++) {
+      
+      if (formInputs[i] != null) {
         if (columns === 1) {
-          formInputs1.push(formInput);
+          formInputs1.push(formInputs[i]);
         } else if (i % 2 === 0) {
-          formInputs1.push(formInput);
+          formInputs1.push(formInputs[i]);
         } else {
-          formInputs2.push(formInput);
+          formInputs2.push(formInputs[i]);
         }
       }
     }
 
-    const onFormLayoutChange = () => {};
+    const onFormLayoutChange = () => { };
 
     return (
       <Form
@@ -116,12 +130,12 @@ class IceForm extends React.Component {
         size="middle"
       >
         {this.state.errorMsg
-        && (
-          <>
-            <Alert message={this.state.errorMsg} type="error" showIcon />
-            <br />
-          </>
-        )}
+          && (
+            <>
+              <Alert message={this.state.errorMsg} type="error" showIcon />
+              <br />
+            </>
+          )}
         {columns === 1 && formInputs1}
         {columns === 2 && (
           <Row gutter={16}>
@@ -239,6 +253,9 @@ class IceForm extends React.Component {
         </Form.Item>
       );
     } if (data.type === 'textarea') {
+      if (!data.rows) {
+        data.rows = 4;
+      }
       return (
         <Form.Item
           labelCol={labelSpan}
@@ -249,7 +266,7 @@ class IceForm extends React.Component {
         >
           {viewOnly
             ? <IceLabel />
-            : <Input.TextArea />}
+            : <Input.TextArea rows={data.rows} />}
         </Form.Item>
       );
     } if (data.type === 'date') {
@@ -355,6 +372,34 @@ class IceForm extends React.Component {
           />
         </Form.Item>
       );
+    } if (data.type === 'colorpick') {
+      return (
+        <Form.Item
+          labelCol={labelSpan}
+          name={name}
+          key={name}
+          label={data.label}
+        >
+          <IceColorPick
+            adapter={adapter}
+            field={field}
+            title={data.label}
+            readOnly={viewOnly}
+          />
+        </Form.Item>
+        );
+      } if (data.type === 'signature') {
+        return (
+          <Form.Item
+            labelCol={labelSpan}
+            label={data.label}
+            key={name}
+            name={name}
+            rules={rules}
+          >
+            <IceSignature readOnly={viewOnly} />
+          </Form.Item>
+        );
     }
     return null;
   }

web/components/IceFormModal.js

@@ -21,6 +21,7 @@ class IceFormModal extends React.Component {
   }
 
   show(data) {
+    this.props.adapter.beforeRenderFieldHook = this.props.adapter.beforeRenderField ? this.props.adapter.beforeRenderField(data) : (fieldName, field) => field;
     if (!data) {
       this.setState({ visible: true });
       if (this.iceFormReference.current) {

web/components/IceSignature.js

@@ -0,0 +1,83 @@
+import React from 'react';
+import SignatureCanvas from 'react-signature-canvas';
+import { Button, Modal, Tag } from 'antd';
+import { VerifiedOutlined } from '@ant-design/icons';
+
+class IceSignature extends React.Component {
+  constructor(props) {
+    super(props);
+    this.onChange = props.onChange;
+    this.state = {
+      visible: false,
+    };
+    this.signature = React.createRef();
+  }
+
+  componentDidMount() {
+  }
+
+  show() {
+    this.setState({ visible: true });
+  }
+
+  setSignature(ref) {
+    if (ref == null) {
+      return;
+    }
+    const { value } = this.props;
+    if (value != null && value.length > 10) {
+      ref.fromDataURL(value);
+    }
+  }
+
+  hide() {
+    this.setState({ visible: false });
+  }
+
+  clear() {
+    this.signature.clear();
+  }
+
+  save() {
+    const data = this.signature.toDataURL('image/png');
+    this.onChange(data);
+    this.setState({ visible: false });
+  }
+
+  render() {
+    const { readOnly } = this.props;
+
+    return (
+      <>
+        <Modal
+          visible={this.state.visible}
+          title="Signature"
+          maskClosable={false}
+          centered
+          width={300}
+          onCancel={() => { this.hide(); }}
+          footer={[
+            <Button key="cancel" onClick={() => { this.hide(); }}>
+              Cancel
+            </Button>,
+            <Button key="clear" disabled={readOnly} type="dashed" onClick={() => { if (!readOnly) { this.clear(); } }}>
+              Clear
+            </Button>,
+            <Button key="ok" disabled={readOnly} type="primary" onClick={() => { if (!readOnly) { this.save(); } }}>
+              Submit
+            </Button>,
+          ]}
+        >
+          <SignatureCanvas ref={(ref) => { this.signature = ref; this.setSignature(ref); }} canvasProps={{ width: 250, height: 200, className: 'sigCanvas', ...( readOnly ? { readOnly } : {}), }} />
+        </Modal>
+        <Tag color="blue" style={{ cursor: 'pointer' }} onClick={() => { this.show(); }}>
+          <VerifiedOutlined />
+          {' '}
+          Sign
+        </Tag>
+      </>
+    );
+  }
+}
+
+export default IceSignature;

web/components/IceStepFromModal.js

@@ -10,6 +10,7 @@ class IceStepFormModal extends IceFormModal {
   }
 
   show(data) {
+    this.props.adapter.beforeRenderFieldHook = this.props.adapter.beforeRenderField ? this.props.adapter.beforeRenderField(data) : (fieldName, field) => field;
     if (!data) {
       this.setState({ visible: true });
       if (this.iceFormReference.current) {

web/components/IceTable.js

@@ -69,7 +69,6 @@ class IceTable extends React.Component {
   };
 
   search = (value) => {
-    console.log('search table:' + value);
     this.setState({ search: value });
     const fetchConfig = this.state.fetchConfig;
     console.log(fetchConfig);
@@ -105,12 +104,10 @@ class IceTable extends React.Component {
   }
 
   fetch = (params = {}) => {
-    console.log('params:', params);
     //this.setState({ loading: this.state.showLoading });
     this.setState({ loading: true });
     //const hideMessage = message.loading({ content: 'Loading Latest Data ...', key: 'loadingTable', duration: 1});
     const pagination = { ...this.state.pagination };
-    console.log('pagination:', pagination);
 
     if (this.props.adapter.localStorageEnabled) {
       try {

web/components/UpdatePasswordModal.js

@@ -150,7 +150,7 @@ class UpdatePasswordModal extends React.Component {
             return this.props.adapter.gt('Password too short');
         }
 
-        if (password.length > 20) {
+        if (password.length > 30) {
             return this.props.adapter.gt('Password too long');
         }