@subiz/widget-v4 4.1.140 → 4.1.142

package/compiled_src/form/Form.js

@@ -8,6 +8,7 @@ var _common = require("../common.js");
 var _preact = require("preact");
 var _index = _interopRequireDefault(require("../util/index.js"));
 var _block = _interopRequireDefault(require("../chatbox/block.js"));
+var _ratingStars = _interopRequireDefault(require("./rating-stars.js"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
@@ -63,7 +64,7 @@ class Form2 extends _common.Com {
         class: "label"
       }, com.label, " ", com.is_required && (0, _preact.h)("span", {
         class: "red"
-      }, "*")), com.input_type === 'text' && this.renderFieldTextInput(com, idx), com.input_type === 'textarea' && this.renderFieldTextareaInput(com, idx), com.input_type === 'date' && this.renderFieldDateInput(com, idx), com.input_type === 'radio' && this.renderFieldRadioInput(com, idx), com.input_type === 'checkbox' && this.renderFieldCheckboxInput(com, idx), (com.input_type === 'dropdown' || com.input_type === 'select') && this.renderFieldDropdownInput(com, idx), errorMsg && (0, _preact.h)("div", {
+      }, "*")), com.input_type === 'text' && this.renderFieldTextInput(com, idx), com.input_type === 'textarea' && this.renderFieldTextareaInput(com, idx), com.input_type === 'date' && this.renderFieldDateInput(com, idx), com.input_type === 'radio' && this.renderFieldRadioInput(com, idx), com.input_type === 'checkbox' && this.renderFieldCheckboxInput(com, idx), (com.input_type === 'dropdown' || com.input_type === 'select') && this.renderFieldDropdownInput(com, idx), com.input_type === 'rating' && this.renderFieldRatingInput(com, idx), errorMsg && (0, _preact.h)("div", {
         class: "form-control--valid-input--error"
       }, errorMsg));
     });
@@ -106,7 +107,11 @@ class Form2 extends _common.Com {
       let val = _index.default.find(this.props.submission.values, f => f.key === com.key) || {};
       val = val.value || '""';
       val = _index.default.parseJSON(val);
-      return _index.default.map(com.input_options, (option, oidx) => {
+      let wrappercls = 'form-radios-wrapper';
+      if (_index.default.size(com.input_options) >= 3 && this.props.mode !== 'attachment') wrappercls += ' horizontal';
+      return (0, _preact.h)("div", {
+        class: wrappercls
+      }, _index.default.map(com.input_options, (option, oidx) => {
         let id = com.key + '_' + oidx;
         return (0, _preact.h)("div", {
           class: "radio"
@@ -122,13 +127,17 @@ class Form2 extends _common.Com {
         }, option.label), (0, _preact.h)("div", {
           class: "radio--check"
         }));
-      });
+      }));
     });
     _defineProperty(this, "renderFieldCheckboxInput", (com, idx) => {
       let val = _index.default.find(this.props.submission.values, f => f.key === com.key) || {};
       val = val.value || '[]';
       val = _index.default.parseJSON(val);
-      return _index.default.map(com.input_options, (option, oidx) => {
+      let wrappercls = 'form-checkboxes-wrapper';
+      if (_index.default.size(com.input_options) >= 3 && this.props.mode !== 'attachment') wrappercls += ' horizontal';
+      return (0, _preact.h)("div", {
+        class: wrappercls
+      }, _index.default.map(com.input_options, (option, oidx) => {
         let id = com.key + '_' + oidx;
         return (0, _preact.h)("div", {
           class: "checkbox"
@@ -144,7 +153,7 @@ class Form2 extends _common.Com {
         }, option.label), (0, _preact.h)("div", {
           class: "checkbox--check"
         }));
-      });
+      }));
     });
     _defineProperty(this, "renderFieldDropdownInput", (com, idx) => {
       let val = _index.default.find(this.props.submission.values, f => f.key === com.key) || {};
@@ -183,6 +192,11 @@ class Form2 extends _common.Com {
         placeholder: com.placeholder
       });
     });
+    _defineProperty(this, "renderFieldRatingInput", (com, idx) => {
+      return (0, _preact.h)(_ratingStars.default, {
+        onChange: v => this.onChangeValue(com.key, v)
+      });
+    });
     _defineProperty(this, "onSubmit", e => {
       e.preventDefault();
       if (!this.validateForm()) return;
@@ -263,6 +277,43 @@ class Form2 extends _common.Com {
         errorFields: errors
       });
     });
+    _defineProperty(this, "renderFormHeader", () => {
+      let title = _index.default.get(this.props.formSetting, 'title') || '';
+      let desc = _index.default.get(this.props.formSetting, 'description') || '';
+      if (this.props.mode === 'attachment') {
+        if (title.trim() || desc.trim()) {
+          return (0, _preact.h)("div", {
+            class: "form-component form-component-block"
+          }, title && (0, _preact.h)("div", null, title), desc && (0, _preact.h)("div", {
+            class: "text-sm text-muted"
+          }, desc));
+        }
+      }
+      let brandLogo = _index.default.get(this.props.formSetting, 'logo.url');
+      let brandUrl = _index.default.get(this.props.formSetting, 'brand_url');
+      let $logo = null;
+      if (brandLogo) {
+        $logo = (0, _preact.h)("div", {
+          class: "form-page-logo-wrapper"
+        }, (0, _preact.h)("a", {
+          href: brandUrl || 'javascript:;'
+        }, (0, _preact.h)("img", {
+          src: brandLogo,
+          class: "form-page-logo"
+        })));
+      }
+      let $header = null;
+      if (title.trim() || desc.trim()) {
+        $header = (0, _preact.h)("div", {
+          class: "form-page-header"
+        }, (0, _preact.h)("div", {
+          class: "form-page-title"
+        }, title), desc && (0, _preact.h)("div", {
+          class: "form-page-desc"
+        }, desc));
+      }
+      return (0, _preact.h)(_preact.Fragment, null, $logo, $header);
+    });
     let _components = _index.default.get(this.props.formSetting, 'components') || [];
     _index.default.each(_components, com => {
       if (com.type === 'input' && com.input_type !== 'checkbox' && com.input_type !== 'radio') {
@@ -298,11 +349,7 @@ class Form2 extends _common.Com {
       class: "form-component"
     }, this.props.t('you_have_submitted_info_successfully')), (0, _preact.h)("form", {
       onSubmit: this.onSubmit
-    }, this.props.mode === 'attachment' && (title || desc) && (0, _preact.h)("div", {
-      class: "form-component form-component-block"
-    }, title && (0, _preact.h)("div", null, title), desc && (0, _preact.h)("div", {
-      class: "text-sm text-muted"
-    }, desc)), _index.default.map(components, this.renderFormComponent)));
+    }, this.renderFormHeader(), _index.default.map(components, this.renderFormComponent)));
   }
 }
 exports.default = Form2;

package/compiled_src/form/FormPage.js

@@ -197,29 +197,20 @@ class FormPage extends _common.Com {
       }, this.props.t('try_again'))));
     }
     let brandLogo = _index.default.get(formSetting, 'logo.url');
+    let coverUrl = _index.default.get(formSetting, 'cover_image.url');
+    let wrappercls = 'form-page';
+    if (coverUrl) wrappercls += ' sketch';
     return (0, _preact.h)("div", {
       class: "form-page-body",
       key: "form"
     }, this.props.previewJson && (0, _preact.h)("div", {
       class: "form-page-preview-noti"
-    }, 'Form ở trạng thái xem thử, không ghi nhận phản hồi'), (0, _preact.h)("div", {
-      class: "form-page"
-    }, (0, _preact.h)("div", {
-      class: "form-page-logo-wrapper"
-    }, (0, _preact.h)("a", {
-      href: formSetting.brand_url || 'javascript:;'
-    }, brandLogo ? (0, _preact.h)("img", {
-      src: brandLogo,
-      class: "form-page-logo"
-    }) : (0, _preact.h)("div", {
-      class: "form-page-logo-text"
-    }, _index.default.get(this.props.store.matchAccount(), 'name')))), (formSetting.title || formSetting.description) && (0, _preact.h)("div", {
-      class: "form-page-header"
-    }, (0, _preact.h)("div", {
-      class: "form-page-title"
-    }, formSetting.title), formSetting.description && (0, _preact.h)("div", {
-      class: "form-page-desc"
-    }, formSetting.description)), (0, _preact.h)(_Form.default, {
+    }, 'Form ở trạng thái xem thử, không ghi nhận phản hồi'), coverUrl && (0, _preact.h)("div", {
+      class: "form-page-header-bg",
+      style: `background: url(${coverUrl}); background-size: cover;`
+    }), (0, _preact.h)("div", {
+      class: wrappercls
+    }, (0, _preact.h)(_Form.default, {
       store: this.props.store,
       formSetting: formSetting,
       t: this.props.t,

package/compiled_src/form/rating-stars.js

@@ -0,0 +1,129 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _common = require("../common.js");
+var _preact = require("preact");
+var _index = _interopRequireDefault(require("../util/index.js"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+class Form2 extends _common.Com {
+  constructor(props) {
+    super(props);
+    _defineProperty(this, "state", {
+      hovering: 0,
+      selected: 0
+    });
+    _defineProperty(this, "onMouseEnter", v => {
+      let {
+        selected,
+        hovering
+      } = this.state;
+      if (v <= selected) {
+        this.setState({
+          hovering: selected
+        });
+        return;
+      }
+      this.setState({
+        hovering: v
+      });
+    });
+    _defineProperty(this, "onMouseLeave", () => {
+      let {
+        selected,
+        hovering
+      } = this.state;
+      this.setState({
+        hovering: 0
+      });
+    });
+  }
+  onToggleValue(v) {
+    let {
+      selected
+    } = this.state;
+    let newVal = v;
+    if (v === selected) newVal = 0;
+    this.setState({
+      selected: newVal,
+      hovering: newVal
+    });
+    this.props.onChange(newVal);
+  }
+  render() {
+    let {
+      selected,
+      hovering
+    } = this.state;
+    let star1Cls = 'star-wrapper';
+    if (selected >= 1) {
+      star1Cls += ' selected';
+    } else if (hovering >= 1) {
+      star1Cls += ' hovering';
+    }
+    let star2Cls = 'star-wrapper';
+    if (selected >= 2) {
+      star2Cls += ' selected';
+    } else if (hovering >= 2) {
+      star2Cls += ' hovering';
+    }
+    let star3Cls = 'star-wrapper';
+    if (selected >= 3) {
+      star3Cls += ' selected';
+    } else if (hovering >= 3) {
+      star3Cls += ' hovering';
+    }
+    let star4Cls = 'star-wrapper';
+    if (selected >= 4) {
+      star4Cls += ' selected';
+    } else if (hovering >= 4) {
+      star4Cls += ' hovering';
+    }
+    let star5Cls = 'star-wrapper';
+    if (selected >= 5) {
+      star5Cls += ' selected';
+    } else if (hovering >= 5) {
+      star5Cls += ' hovering';
+    }
+    return (0, _preact.h)("div", {
+      class: "form-ratings-wrapper",
+      onMouseLeave: () => this.onMouseLeave()
+    }, (0, _preact.h)("div", {
+      class: star1Cls,
+      onClick: () => this.onToggleValue(1),
+      onMouseEnter: () => this.onMouseEnter(1)
+    }, (0, _preact.h)("div", {
+      class: "star"
+    })), (0, _preact.h)("div", {
+      class: star2Cls,
+      onClick: () => this.onToggleValue(2),
+      onMouseEnter: () => this.onMouseEnter(2)
+    }, (0, _preact.h)("div", {
+      class: "star"
+    })), (0, _preact.h)("div", {
+      class: star3Cls,
+      onClick: () => this.onToggleValue(3),
+      onMouseEnter: () => this.onMouseEnter(3)
+    }, (0, _preact.h)("div", {
+      class: "star"
+    })), (0, _preact.h)("div", {
+      class: star4Cls,
+      onClick: () => this.onToggleValue(4),
+      onMouseEnter: () => this.onMouseEnter(4)
+    }, (0, _preact.h)("div", {
+      class: "star"
+    })), (0, _preact.h)("div", {
+      class: star5Cls,
+      onClick: () => this.onToggleValue(5),
+      onMouseEnter: () => this.onMouseEnter(5)
+    }, (0, _preact.h)("div", {
+      class: "star"
+    })));
+  }
+}
+exports.default = Form2;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@subiz/widget-v4",
-	"version": "4.1.140",
+	"version": "4.1.142",
 	"main": "./compiled_src/lib.js",
 	"scripts": {
 		"dev": "npx webpack serve --config webpack.dev.js",

package/src/chatbox/FormAttachment2.js

@@ -31,6 +31,89 @@ export default class FormAttachment extends Com {
 		let formSetting = formAttachment.form || {}
 		let submission = formAttachment.form_submission || {}
 		let isSubmited = sb.size(submission) > 0
+		//if (this.props.ev.id === 'evshwmvhbthkrvbceozazgxno') {
+		//formSetting = {
+		//id: 'atshrpqxzuufzzdkzquz_dlbgwyib',
+		//title: 'Đặt lịch khám',
+		//components: [
+		//{
+		//type: 'input',
+		//label: 'Họ và tên',
+		//input_type: 'text',
+		//is_required: true,
+		//key: 'fullname',
+		//},
+		//{
+		//type: 'input',
+		//label: 'SĐT',
+		//input_type: 'text',
+		//is_required: true,
+		//key: 'phone',
+		//},
+		//{
+		//type: 'input',
+		//label: 'Chọn ca',
+		//input_type: 'radio',
+		//is_required: true,
+		//key: 'shift',
+		//input_options: [
+		//{
+		//label: 'Buổi sáng',
+		//value: 'Buổi sáng',
+		//},
+		//{
+		//label: 'Buổi chiều',
+		//value: 'Buổi chiều',
+		//},
+		//{
+		//label: 'Buổi toi',
+		//value: 'Buổi toi',
+		//},
+		//{
+		//label: 'Buổi dem ',
+		//value: 'Buổi dem',
+		//},
+		//{
+		//label: 'Other',
+		//value: 'Other',
+		//},
+		//],
+		//},
+		//{
+		//type: 'input',
+		//label: 'Chọn ngày',
+		//input_type: 'date',
+		//is_required: true,
+		//key: 'schedule',
+		//},
+		//{
+		//type: 'input',
+		//label: 'Đánh giá',
+		//label_description: 'Chọn theo thang điểm 1-5',
+		//input_type: 'rating',
+		//key: 'rating',
+		//},
+		//{
+		//type: 'button',
+		//label: 'Đặt lịch',
+		//},
+		//],
+		//primary_color: 'rgb(224, 31, 111)',
+		//header_style: {
+		//font_family: 'Roboto',
+		//font_size: '20',
+		//},
+		//text_style: {
+		//font_family: 'Yeseva One',
+		//font_size: '16',
+		//},
+		//input_style: {
+		//font_family: 'Dancing Script',
+		//font_size: '18',
+		//},
+
+		//}
+		//}
 		this.setState({formSetting, submission, isSubmited})
 	}
 

package/src/form/Form.js

@@ -1,7 +1,8 @@
 import {Com} from '../common.js'
-import {h, createRef} from 'preact'
+import {h, createRef, Fragment} from 'preact'
 import sb from '../util/index.js'
 import Block from '../chatbox/block.js'
+import RatingStars from './rating-stars.js'
 
 export default class Form2 extends Com {
 	state = {
@@ -71,6 +72,7 @@ export default class Form2 extends Com {
 				{com.input_type === 'radio' && this.renderFieldRadioInput(com, idx)}
 				{com.input_type === 'checkbox' && this.renderFieldCheckboxInput(com, idx)}
 				{(com.input_type === 'dropdown' || com.input_type === 'select') && this.renderFieldDropdownInput(com, idx)}
+				{com.input_type === 'rating' && this.renderFieldRatingInput(com, idx)}
 				{errorMsg && <div class='form-control--valid-input--error'>{errorMsg}</div>}
 			</div>
 		)
@@ -121,48 +123,60 @@ export default class Form2 extends Com {
 		let val = sb.find(this.props.submission.values, (f) => f.key === com.key) || {}
 		val = val.value || '""'
 		val = sb.parseJSON(val)
-		return sb.map(com.input_options, (option, oidx) => {
-			let id = com.key + '_' + oidx
-			return (
-				<div class='radio'>
-					<input
-						type='radio'
-						name={com.key}
-						id={id}
-						checked={option.value === val}
-						onChange={() => this.toggleRadioField(com.key, option.value)}
-					/>
-					<label class='radio--label' for={id}>
-						{option.label}
-					</label>
-					<div class='radio--check' />
-				</div>
-			)
-		})
+		let wrappercls = 'form-radios-wrapper'
+		if (sb.size(com.input_options) >= 3 && this.props.mode !== 'attachment') wrappercls += ' horizontal'
+		return (
+			<div class={wrappercls}>
+				{sb.map(com.input_options, (option, oidx) => {
+					let id = com.key + '_' + oidx
+					return (
+						<div class='radio'>
+							<input
+								type='radio'
+								name={com.key}
+								id={id}
+								checked={option.value === val}
+								onChange={() => this.toggleRadioField(com.key, option.value)}
+							/>
+							<label class='radio--label' for={id}>
+								{option.label}
+							</label>
+							<div class='radio--check' />
+						</div>
+					)
+				})}
+			</div>
+		)
 	}
 
 	renderFieldCheckboxInput = (com, idx) => {
 		let val = sb.find(this.props.submission.values, (f) => f.key === com.key) || {}
 		val = val.value || '[]'
 		val = sb.parseJSON(val)
-		return sb.map(com.input_options, (option, oidx) => {
-			let id = com.key + '_' + oidx
-			return (
-				<div class='checkbox'>
-					<input
-						type='checkbox'
-						name={com.key}
-						id={id}
-						checked={val.includes(option.value)}
-						onChange={() => this.toggleCheckboxField(com.key, option.value)}
-					/>
-					<label class='checkbox--label' for={id}>
-						{option.label}
-					</label>
-					<div class='checkbox--check' />
-				</div>
-			)
-		})
+		let wrappercls = 'form-checkboxes-wrapper'
+		if (sb.size(com.input_options) >= 3 && this.props.mode !== 'attachment') wrappercls += ' horizontal'
+		return (
+			<div class={wrappercls}>
+				{sb.map(com.input_options, (option, oidx) => {
+					let id = com.key + '_' + oidx
+					return (
+						<div class='checkbox'>
+							<input
+								type='checkbox'
+								name={com.key}
+								id={id}
+								checked={val.includes(option.value)}
+								onChange={() => this.toggleCheckboxField(com.key, option.value)}
+							/>
+							<label class='checkbox--label' for={id}>
+								{option.label}
+							</label>
+							<div class='checkbox--check' />
+						</div>
+					)
+				})}
+			</div>
+		)
 	}
 
 	renderFieldDropdownInput = (com, idx) => {
@@ -207,6 +221,10 @@ export default class Form2 extends Com {
 		)
 	}
 
+	renderFieldRatingInput = (com, idx) => {
+		return <RatingStars onChange={(v) => this.onChangeValue(com.key, v)} />
+	}
+
 	onSubmit = (e) => {
 		e.preventDefault()
 		if (!this.validateForm()) return
@@ -303,6 +321,51 @@ export default class Form2 extends Com {
 		this.setState({errorFields: errors})
 	}
 
+	renderFormHeader = () => {
+		let title = sb.get(this.props.formSetting, 'title') || ''
+		let desc = sb.get(this.props.formSetting, 'description') || ''
+
+		if (this.props.mode === 'attachment') {
+			if (title.trim() || desc.trim()) {
+				return (
+					<div class='form-component form-component-block'>
+						{title && <div>{title}</div>}
+						{desc && <div class='text-sm text-muted'>{desc}</div>}
+					</div>
+				)
+			}
+		}
+
+		let brandLogo = sb.get(this.props.formSetting, 'logo.url')
+		let brandUrl = sb.get(this.props.formSetting, 'brand_url')
+		let $logo = null
+		if (brandLogo) {
+			$logo = (
+				<div class='form-page-logo-wrapper'>
+					<a href={brandUrl || 'javascript:;'}>
+						<img src={brandLogo} class='form-page-logo' />
+					</a>
+				</div>
+			)
+		}
+		let $header = null
+		if (title.trim() || desc.trim()) {
+			$header = (
+				<div class='form-page-header'>
+					<div class='form-page-title'>{title}</div>
+					{desc && <div class='form-page-desc'>{desc}</div>}
+				</div>
+			)
+		}
+
+		return (
+			<Fragment>
+				{$logo}
+				{$header}
+			</Fragment>
+		)
+	}
+
 	render() {
 		let components = sb.get(this.props.formSetting, 'components') || []
 		let title = sb.get(this.props.formSetting, 'title') || ''
@@ -315,12 +378,7 @@ export default class Form2 extends Com {
 					<div class='form-component'>{this.props.t('you_have_submitted_info_successfully')}</div>
 				)}
 				<form onSubmit={this.onSubmit}>
-					{this.props.mode === 'attachment' && (title || desc) && (
-						<div class='form-component form-component-block'>
-							{title && <div>{title}</div>}
-							{desc && <div class='text-sm text-muted'>{desc}</div>}
-						</div>
-					)}
+					{this.renderFormHeader()}
 					{sb.map(components, this.renderFormComponent)}
 				</form>
 			</div>