questionnaire/assets/js/components/editQuestionnaire.js

160 lines
6.3 KiB
JavaScript
Vendored

import m from "mithril"
import moment from "moment"
import powerform from "powerform"
import { Card, RaisedButton, TextField } from "polythene-mithril"
import DatePicker from "../custom/mithril-datepicker"
import {} from "../../css/custom/mithril-datepicker.css"
import { nav } from "./nav"
import Questionnaire from "../models/Questionnaire"
var qCard = {
form: powerform({
title: function(v) {
if (!v || v == "" || _.isEmpty(v) || _.isNil(v)) {
return "Kolom ini harus diisi"
}
},
release: function(v) {
if (!v || v == "" || _.isEmpty(v) || _.isNil(v)) {
return "Kolom ini harus diisi"
}
}
}),
oninit: function() {
qCard.form.title(Questionnaire.current.title)
},
oncreate: function() {
Questionnaire.current.releasedAt = moment().format("YYYY-MM-DD HH:mm:ss")
qCard.form.release(Questionnaire.current.releasedAt)
},
view: function() {
return m("form", {
style: {flexGrow: "1", display: "flex"},
onsubmit: function(e) {
e.preventDefault()
if (qCard.form.isValid()) {
m.route.set("/user/questionnaires/" + Questionnaire.current.id)
}
}
}, m(Card, {
style: {
flexGrow: "1"
},
content: [
{
text: {
content: [
m(TextField, {
label: "Judul",
floatingLabel: true,
tight: true,
value: Questionnaire.current.title,
events: {
oninput: m.withAttr("value", function(v) {
Questionnaire.current.title = v
qCard.form.title(v)
})
},
validate: function() {
return {
valid: qCard.form.title.isValid(),
error: qCard.form.title.error()
}
}
}),
m(TextField, {
label: "Deskripsi",
required: true,
floatingLabel: true,
tight: true,
value: Questionnaire.current.description,
events: {
oninput: m.withAttr("value", function(v) {
Questionnaire.current.description = v
})
}
}),
m("div", {
style: {
color: "rgba(0, 0, 0, .4)",
fontSize: "small",
fontWeight: "400",
lineHeight: "24px",
marginBottom: ".5em"
}
}, "Tanggal Rilis *"),
m(DatePicker, {
date: moment(Questionnaire.current.releasedAt),
locale: "id-id",
onchange: function(v) {
Questionnaire.current.releasedAt =
moment(v).format("YYYY-MM-DD HH:mm:ss")
qCard.form.release(Questionnaire.current.releasedAt)
}
})
]
}
},
{
actions: {
bordered: true,
content: [
m(RaisedButton, {
element: "button",
label: [
m("i.fa.fa-floppy-o.fa-fw"),
m.trust(" "),
"Simpan"
],
style: {
padding: ".6em .8em",
fontSize: "14px",
lineHeight: "14px",
fontWeight: "500",
textTransform: "uppercase",
whiteSpace: "pre",
backgroundColor: "rgb(255, 153, 0)"
},
tone: "dark"
}),
m(".flex"),
m(RaisedButton, {
label: [
m("i.fa.fa-times.fa-fw"),
m.trust(" "),
"Hapus"
],
style: {
padding: ".6em .8em",
fontSize: "14px",
lineHeight: "14px",
fontWeight: "500",
textTransform: "uppercase",
whiteSpace: "pre",
backgroundColor: "rgb(255, 0, 0)"
},
tone: "dark"
})
]
}
}
]
}))
}
}
export const editQuestionnaire = {
oninit: function() {
Questionnaire.fetchCurrent()
},
view: function() {
return [
m(nav, {
title: "Ubah - " + Questionnaire.current.title,
back: "/user/questionnaires/" + Questionnaire.current.id
}),
m(".flex", m(qCard))
]
}
}