366 lines
19 KiB
JavaScript
Vendored
366 lines
19 KiB
JavaScript
Vendored
import m from "mithril"
|
|
import powerform from "powerform"
|
|
import moment from "moment"
|
|
import DatePicker from "../../custom/mithril-datepicker"
|
|
import {
|
|
Card,
|
|
Button,
|
|
TextField,
|
|
RadioGroup,
|
|
List,
|
|
ListTile
|
|
} from "polythene-mithril"
|
|
import Category from "../../models/Category"
|
|
import Respondent from "../../models/Respondent"
|
|
|
|
const registerForm = {
|
|
form: powerform({
|
|
name: function(v) {
|
|
if (_.isEmpty(v)) {
|
|
return "Tuliskan nama Anda"
|
|
}
|
|
},
|
|
gender: function(v) {
|
|
if (_.isEmpty(v)) return "Pilih salah satu"
|
|
},
|
|
birthdate: function(v) {
|
|
|
|
},
|
|
handphone: function(v) {
|
|
if (_.isEmpty(v)) return "Tuliskan nomor telepon Anda"
|
|
},
|
|
occupation: function(v) {
|
|
if (_.isEmpty(v)) return "Tuliskan pekerjaan Anda saat ini"
|
|
},
|
|
category: function(v) {
|
|
if (_.isEmpty(v)) return "Pilih kategori Anda"
|
|
},
|
|
email: function(v) {
|
|
if (_.isEmpty(v)) return "Masukkan email Anda"
|
|
}
|
|
}),
|
|
oninit: function(vnode) {
|
|
registerForm.form.email(vnode.attrs.u)
|
|
registerForm.form.name("")
|
|
registerForm.form.gender("")
|
|
registerForm.form.birthdate(moment().format("YYYY-MM-DD HH:mm:ss"))
|
|
registerForm.form.handphone("")
|
|
registerForm.form.occupation("")
|
|
registerForm.form.category("")
|
|
|
|
Category.loadList()
|
|
var showCategory = false
|
|
vnode.state = {showCategory}
|
|
},
|
|
view: function(vnode) {
|
|
var state = vnode.state
|
|
var showCategory = state.showCategory
|
|
return _.isEmpty(Category.list) ?
|
|
[m(".signal"), m(".signal.late")] : [
|
|
m(".header-img", {
|
|
style: {
|
|
backgroundImage: "url('img/head1.jpg')"
|
|
}
|
|
}),
|
|
m(".header-content", {
|
|
style: {top: 0}
|
|
}, m("article", {
|
|
style: {backgroundColor: "#fff"}
|
|
}, [
|
|
m("h2.article-title", {
|
|
style: {marginBottom: ".5em"}
|
|
}, m("div", {
|
|
style: {marginTop: ".3em"}
|
|
}, "Registrasi")),
|
|
m(".flex"),
|
|
m(".header-title", {
|
|
style: {
|
|
display: "table"
|
|
}
|
|
}, m("form", {
|
|
onsubmit: function(e) {
|
|
e.preventDefault()
|
|
// m.route.set("/questionnaires")
|
|
if (!registerForm.form.isValid()) console.log('err', registerForm.form.error())
|
|
else {
|
|
registerForm.form.category(registerForm.form.category().id)
|
|
Respondent.save(registerForm.form.data())
|
|
}
|
|
},
|
|
style: {
|
|
padding: "1em",
|
|
display: "table",
|
|
height: "100%",
|
|
width: "100%"
|
|
}
|
|
}, m("div", {
|
|
style: {
|
|
display: "table-cell",
|
|
verticalAlign: "middle",
|
|
}
|
|
}, m(".flex", {
|
|
style: {
|
|
width: "100%",
|
|
}
|
|
}, m(".constant"), m(Card, {
|
|
className: "front-card",
|
|
style: {
|
|
height: "100%",
|
|
margin: "0"
|
|
},
|
|
content: [
|
|
{
|
|
primary: {
|
|
title: "Data Diri",
|
|
subtitle: "Silahkan isi data diri Anda terlebih dahulu"
|
|
}
|
|
},
|
|
{
|
|
text: {
|
|
className: "flex but",
|
|
content: [
|
|
m("div", {
|
|
style: {
|
|
flexBasis: "45%"
|
|
}
|
|
}, [
|
|
m(TextField, {
|
|
className: "firstInput",
|
|
label: "Nama Lengkap",
|
|
floatingLabel: true,
|
|
tight: true,
|
|
autofocus: true,
|
|
value: registerForm.form.name(),
|
|
events: {
|
|
oninput: function() {
|
|
registerForm.form.name(this.value)
|
|
}
|
|
},
|
|
validate: function() {
|
|
return {
|
|
valid: registerForm.form.name.isValid(),
|
|
error: registerForm.form.name.error()
|
|
}
|
|
}
|
|
}),
|
|
m("span", {
|
|
style: {
|
|
color: "rgba(0, 0, 0, .4)",
|
|
fontSize: "16px",
|
|
fontWeight: "400",
|
|
lineHeight: "24px"
|
|
}
|
|
}, "Jenis Kelamin *"),
|
|
m(RadioGroup, {
|
|
id: "gender",
|
|
name: "gender",
|
|
style: {
|
|
margin: ".5rem 0"
|
|
},
|
|
buttons: [
|
|
{
|
|
id: "gender-m",
|
|
value: "m",
|
|
label: "Laki-laki",
|
|
events: {
|
|
oncreate: function() {
|
|
document.getElementById("gender-m")
|
|
.querySelector("input")
|
|
.required = "required"
|
|
}
|
|
}
|
|
},
|
|
{
|
|
id: "gender-f",
|
|
value: "f",
|
|
label: "Perempuan",
|
|
events: {
|
|
oncreate: function() {
|
|
document.getElementById("gender-f")
|
|
.querySelector("input")
|
|
.required = "required"
|
|
}
|
|
}
|
|
}
|
|
],
|
|
onChange: function(state) {
|
|
registerForm.form.gender(state.value)
|
|
}
|
|
}),
|
|
m("div", {
|
|
style: {
|
|
color: "rgba(0, 0, 0, .4)",
|
|
fontSize: "16px",
|
|
fontWeight: "400",
|
|
lineHeight: "24px",
|
|
marginBottom: ".5em"
|
|
}
|
|
}, "Tanggal Lahir *"),
|
|
m(DatePicker, {
|
|
date: registerForm.form.birthdate(),
|
|
locale: "id-id",
|
|
onchange: function(chosenDate) {
|
|
registerForm.form.birthdate(moment(chosenDate).format("YYYY-MM-DD HH:mm:ss"))
|
|
},
|
|
oncreate: function() {
|
|
var target = document.querySelector(".mithril-date-picker")
|
|
var click = target.childNodes[0].onclick
|
|
var className = target.childNodes[0].className
|
|
return m.mount(target, {
|
|
view: function() {
|
|
return m("input", {
|
|
className: className,
|
|
value: moment(registerForm.form.birthdate()).format("ddd, DD MMM YYYY"),
|
|
onclick: click,
|
|
required: "required",
|
|
readonly: "readonly",
|
|
})
|
|
}
|
|
})
|
|
}
|
|
})
|
|
]),
|
|
m("div", {
|
|
style: {
|
|
flexGrow: "1"
|
|
}
|
|
}),
|
|
m("div", {
|
|
style: {
|
|
flexBasis: "45%"
|
|
}
|
|
}, [
|
|
m(TextField, {
|
|
label: "No. Handphone",
|
|
floatingLabel: true,
|
|
tight: true,
|
|
validateOnInput: true,
|
|
events: {
|
|
oninput: function() {
|
|
registerForm.form.handphone(this.value)
|
|
}
|
|
},
|
|
value: registerForm.form.handphone(),
|
|
validate: function() {
|
|
return {
|
|
valid: registerForm.form.handphone.isValid(),
|
|
error: registerForm.form.handphone.error()
|
|
}
|
|
}
|
|
}),
|
|
m(TextField, {
|
|
className: "lastInput",
|
|
label: "Pekerjaan",
|
|
floatingLabel: true,
|
|
tight: true,
|
|
events: {
|
|
oninput: function() {
|
|
registerForm.form.occupation(this.value)
|
|
}
|
|
},
|
|
value: registerForm.form.occupation(),
|
|
validate: function() {
|
|
return {
|
|
valid: registerForm.form.occupation.isValid(),
|
|
error: registerForm.form.occupation.error()
|
|
}
|
|
}
|
|
}),
|
|
m(TextField, {
|
|
id: "category",
|
|
label: "Kategori",
|
|
events: {
|
|
onfocus: function() {
|
|
state.showCategory = true
|
|
}
|
|
},
|
|
validate: function() {
|
|
return {
|
|
valid: registerForm.form.category.isValid(),
|
|
error: registerForm.form.category.error()
|
|
}
|
|
},
|
|
validateOnInput: true,
|
|
value: registerForm.form.category().name
|
|
}),
|
|
m(List, {
|
|
tiles: Category.list.data.map(function(o) {
|
|
return m(ListTile, {
|
|
title: o.name,
|
|
value: o.id,
|
|
hoverable: true,
|
|
events: {
|
|
onclick: function() {
|
|
registerForm.form.category(o)
|
|
state.showCategory = false
|
|
}
|
|
}
|
|
})
|
|
}),
|
|
compact: true,
|
|
borders: true,
|
|
style: {
|
|
backgroundColor: "rgba(0, 0, 0, .04)",
|
|
display: showCategory ? "block" : "none"
|
|
}
|
|
})
|
|
])
|
|
]
|
|
}
|
|
},
|
|
{
|
|
actions: {
|
|
content: [
|
|
m(".flex", [
|
|
m(Button, {
|
|
element: "button",
|
|
label: [
|
|
m("i.fa.fa-chevron-left.fa-fw[aria-hidden=true]"),
|
|
m.trust(" "),
|
|
"kembali"
|
|
],
|
|
style: {
|
|
backgroundColor: "rgb(255, 153, 0)",
|
|
padding: ".8em",
|
|
fontSize: "14px",
|
|
lineHeight: "14px",
|
|
fontWeight: "500",
|
|
textTransform: "uppercase",
|
|
whiteSpace: "pre"
|
|
},
|
|
tone: "dark"
|
|
}),
|
|
m(".flex"),
|
|
m(Button, {
|
|
element: "button",
|
|
label: [
|
|
"kirim",
|
|
m.trust(" "),
|
|
m("i.fa.fa-upload.fa-fw[aria-hidden=true]")
|
|
],
|
|
type: "submit",
|
|
style: {
|
|
backgroundColor: "rgb(255, 153, 0)",
|
|
padding: ".8em",
|
|
fontSize: "14px",
|
|
lineHeight: "14px",
|
|
fontWeight: "500",
|
|
textTransform: "uppercase",
|
|
whiteSpace: "pre"
|
|
},
|
|
tone: "dark"
|
|
})
|
|
])
|
|
]
|
|
}
|
|
}
|
|
]
|
|
}), m(".constant"))))),
|
|
m(".flex")
|
|
]))
|
|
]
|
|
}
|
|
}
|
|
|
|
export default registerForm
|