@subiz/widget-v4 4.1.141 → 4.1.142

package/assets/less/form-page.less

@@ -308,7 +308,7 @@ select.form-control {
 
 @import 'form.less';
 
-@media only screen and (max-width: 600px) {
+@media only screen and (max-width: 768px) {
 	.form-page-header-bg {
 		height: 100px;
 	}

package/assets/less/form.less

@@ -496,3 +496,82 @@ select {
 select.form-control.form-control--empty {
 	.color(@text-muted);
 }
+
+@media only screen and (min-width: 968px) {
+	.form-radios-wrapper.horizontal {
+		display: flex;
+		flex-wrap: wrap;
+
+		.radio {
+			margin-right: 10px;
+			width: 300px; // form wrapper width is 620px
+
+			&:first-child {
+				margin-top: 0;
+			}
+			&:nth-child(2) {
+				margin-top: 0;
+			}
+			&:nth-child(2n) {
+				margin-right: 0;
+			}
+		}
+	}
+
+	.form-checkboxes-wrapper.horizontal {
+		display: flex;
+		flex-wrap: wrap;
+
+		.checkbox {
+			margin-right: 10px;
+			width: 300px; // form wrapper width is 620px
+
+			&:first-child {
+				margin-top: 0;
+			}
+			&:nth-child(2) {
+				margin-top: 0;
+			}
+			&:nth-child(2n) {
+				margin-right: 0;
+			}
+		}
+	}
+}
+
+.form-ratings-wrapper {
+	display: inline-flex;
+}
+
+.star {
+	width: 32px; // please keep widthxheight always 32x30
+	height: 30px;
+	background-image: url('../img/stars_v2.png');
+	background-position: 0px 0px;
+  background-size: cover;
+}
+
+.form-wrapper-attachment .star-wrapper {
+  padding-right: 12px;
+}
+
+.star-wrapper {
+	cursor: pointer;
+	padding-right: 20px;
+	&:last-child {
+		padding-right: 0;
+	}
+
+	&.hovering {
+		.star {
+			background-position: -32px 0;
+		}
+	}
+
+	&.selected {
+		cursor: auto;
+		.star {
+			background-position: -64px 0;
+		}
+	}
+}

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;

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.141",
+	"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

@@ -2,6 +2,7 @@ import {Com} from '../common.js'
 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

package/src/form/FormPage.js

@@ -98,6 +98,86 @@ export default class FormPage extends Com {
 			let json = atob(this.props.previewJson)
 			json = decodeURIComponent(json)
 			json = sb.parseJSON(json)
+			//json = {
+				//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',
+				//},
+			//}
 			await this.insertCss(chatbox, json)
 			this.setState({formSetting: json, loading: false})
 			return
@@ -170,7 +250,7 @@ export default class FormPage extends Com {
 		let brandLogo = sb.get(formSetting, 'logo.url')
 		let coverUrl = sb.get(formSetting, 'cover_image.url')
 		//coverUrl =
-			//'https://lh7-us.googleusercontent.com/fX5mhofX-12ygFkS6I3UbMh6_NYtd7ySVQkuFxm7Y7ArYMvWu_Ew65l4Ic3QC8eMaBJpUU_5ZNITgigAbqkNJcQRbPjnddxGGE7YOaNBACoWws7b6AuNaAjlisDDY3GCvPHFhh-99Jt0SBiJKnNloWrxxdel_EkVI6MMf6ENTwj2NDQ8MvkCI8ow6z75pwK9C1ZMxDZn?key=-6fBH6GC0hPnLatLRgG5tA'
+		//'https://lh7-us.googleusercontent.com/fX5mhofX-12ygFkS6I3UbMh6_NYtd7ySVQkuFxm7Y7ArYMvWu_Ew65l4Ic3QC8eMaBJpUU_5ZNITgigAbqkNJcQRbPjnddxGGE7YOaNBACoWws7b6AuNaAjlisDDY3GCvPHFhh-99Jt0SBiJKnNloWrxxdel_EkVI6MMf6ENTwj2NDQ8MvkCI8ow6z75pwK9C1ZMxDZn?key=-6fBH6GC0hPnLatLRgG5tA'
 		let wrappercls = 'form-page'
 		if (coverUrl) wrappercls += ' sketch'
 		return (