324 lines
13 KiB
JavaScript
Vendored
324 lines
13 KiB
JavaScript
Vendored
import m from "mithril"
|
|
import _ from "lodash"
|
|
import { Card, Button, RaisedButton, Shadow, Menu, List, ListTile } from "polythene-mithril"
|
|
import { nav } from "./nav"
|
|
import { editButton, seeButton } from "./buttons"
|
|
import Questionnaire from "../models/Questionnaire"
|
|
|
|
const plusButton = {
|
|
view: function() {
|
|
return m(".flex#questionnaire-new", m(Button, {
|
|
className: "flex",
|
|
label: [
|
|
m("i.fa.fa-plus.fa-fw"),
|
|
m.trust(" "),
|
|
"Tambah"
|
|
],
|
|
style: {
|
|
padding: ".8em",
|
|
fontSize: "14px",
|
|
lineHeight: "14px",
|
|
fontWeight: "500",
|
|
textTransform: "uppercase",
|
|
whiteSpace: "pre",
|
|
transition: ".2s all ease",
|
|
maxWidth: "95%",
|
|
margin: "0 auto"
|
|
},
|
|
events: {
|
|
onmouseover: function() {
|
|
this.childNodes[0].style.backgroundColor = "rgba(255, 255, 255, .8)"
|
|
},
|
|
onmouseout: function() {
|
|
this.childNodes[0].style.backgroundColor = "#fff"
|
|
},
|
|
onclick: function() {
|
|
}
|
|
}
|
|
}))
|
|
}
|
|
}
|
|
|
|
const filterMenu = {
|
|
oninit: function(vnode) {
|
|
var show = false
|
|
var sections = Questionnaire.current.sections.map(function(o) {
|
|
return {
|
|
title: o.status.charAt(0).toUpperCase() + o.status.slice(1),
|
|
value: o.status
|
|
}
|
|
})
|
|
var menus = []
|
|
menus.push({title: "All", value: "all"})
|
|
menus = menus.concat(sections.filter(function(value, index, self) {
|
|
return self.findIndex(function(v) {
|
|
return v.title === value.title && v.value === value.value
|
|
}) === index
|
|
}))
|
|
vnode.state = {
|
|
show,
|
|
menus
|
|
}
|
|
},
|
|
view: function(vnode) {
|
|
var state = vnode.state
|
|
var show = state.show
|
|
var menus = state.menus
|
|
return [
|
|
m(Shadow),
|
|
m(Menu, {
|
|
target: "#filter",
|
|
origin: "top-left",
|
|
show,
|
|
didHide: function() {state.show = false},
|
|
offset: 8,
|
|
size: 3,
|
|
hideDelay: .2,
|
|
content: m(List, {
|
|
tiles: menus.map(function(current) {
|
|
return {
|
|
title: current.title,
|
|
ink: true,
|
|
hoverable: true,
|
|
value: current.value
|
|
}
|
|
}),
|
|
keyboardControl: true,
|
|
onSelect: function({attrs}) {
|
|
if (attrs.value == "all") return Questionnaire.current.search = []
|
|
return Questionnaire.current.search = _.filter(Questionnaire.current.sections, function(o) {
|
|
return o.status == attrs.value
|
|
})
|
|
}
|
|
})
|
|
}),
|
|
m(RaisedButton, {
|
|
id: "filter",
|
|
label: [
|
|
m("i.fa.fa-filter.fa-fw[aria-hidden=true]"),
|
|
m.trust(" "),
|
|
"Saring"
|
|
],
|
|
style: {
|
|
backgroundColor: "#fff",
|
|
padding: ".8em",
|
|
fontSize: "14px",
|
|
lineHeight: "14px",
|
|
fontWeight: "500",
|
|
textTransform: "uppercase",
|
|
whiteSpace: "pre",
|
|
},
|
|
events: {
|
|
onclick: function() { state.show = true }
|
|
}
|
|
})
|
|
]
|
|
}
|
|
}
|
|
|
|
const qCard = {
|
|
view: function() {
|
|
var sections =
|
|
_.isNil(Questionnaire.current.search)
|
|
|| _.isNull(Questionnaire.current.search)
|
|
|| _.isEmpty(Questionnaire.current.search) ?
|
|
Questionnaire.current.sections
|
|
: Questionnaire.current.search
|
|
return m(Card, {
|
|
style: {
|
|
flexGrow: "1",
|
|
marginBottom: "14vh",
|
|
// marginTop: "11vh"
|
|
},
|
|
content: [
|
|
{
|
|
primary: {
|
|
title: [
|
|
m(editButton, { redirectURL: "/user/questionnaires/" + Questionnaire.current.id + "/edit"}),
|
|
m("#title", Questionnaire.current.title)
|
|
],
|
|
subtitle: Questionnaire.current.description
|
|
}
|
|
},
|
|
{
|
|
text: {
|
|
content: [
|
|
m("div", {
|
|
style: {
|
|
marginBottom: "1em"
|
|
}
|
|
}, [
|
|
m("div.info", {
|
|
style: {
|
|
color: "#999"
|
|
}
|
|
}, "Dibuat: " + Questionnaire.current.createdAt),
|
|
m("div.info", {
|
|
style: {
|
|
color: "#999"
|
|
}
|
|
}, "Pembuat: " + Questionnaire.current.creator.name),
|
|
m("div.info", {
|
|
style: {
|
|
color: "#999"
|
|
}
|
|
}, "Dirilis: " + Questionnaire.current.releasedAt),
|
|
// m("div.info", {
|
|
// style: {
|
|
// color: "#999"
|
|
// }
|
|
// }, "Diperiksa: " + Questionnaire.current.reviewedAt),
|
|
// m("div.info", {
|
|
// style: {
|
|
// color: "#999"
|
|
// }
|
|
// }, "Pemeriksa: " + Questionnaire.current.reviewer.name),
|
|
m("div.info", {
|
|
style: {
|
|
color: "#999"
|
|
}
|
|
}, "Diubah: " + Questionnaire.current.updatedAt)
|
|
]),
|
|
m("p", {
|
|
style: {
|
|
fontSize: "large"
|
|
}
|
|
}, "Seksi"),
|
|
// m(filterMenu),
|
|
m("div", {
|
|
style: {margin: "0 1em"}
|
|
}, m("i.fa.fa-filter.fa-fw[aria-hidden=true]"), " Saring: ", [
|
|
{title: "Semua", icon: "circle-o", value: "all"},
|
|
{title: "Dirilis", icon:"upload", value: "released"},
|
|
{title: "Draft", icon:"file-text-o", value: "draft"},
|
|
{title: "Ditutup", icon:"times", value: "closed"}
|
|
].map(function(o) {
|
|
return m("a", {
|
|
style: {
|
|
color: "rgb(0, 0, 255)",
|
|
cursor: "pointer",
|
|
margin: "0 1em"
|
|
},
|
|
onclick: function() {
|
|
Questionnaire.current.search =
|
|
_.filter(
|
|
Questionnaire.current.sections,
|
|
function(i) {return i.status == o.value}
|
|
)
|
|
console.log(Questionnaire.current.search);
|
|
}
|
|
}, m("i.fa.fa-fw.fa-" + o.icon + "[aria-hidden=true]"), m.trust(" "), o.title)
|
|
})),
|
|
m(".flex", {
|
|
style: {
|
|
flexFlow: "row wrap"
|
|
}
|
|
}, sections.map(function(s) {
|
|
return m(Card, {
|
|
style: {
|
|
flexGrow: "1",
|
|
flexBasis: "100%"
|
|
},
|
|
content: [
|
|
{
|
|
primary: {
|
|
title: m("a", {
|
|
style: {
|
|
cursor: "pointer"
|
|
},
|
|
onclick: function() {
|
|
m.route.set("/user/sections/" + s.id)
|
|
}
|
|
}, s.title + "[" + s.status + "]"),
|
|
subtitle: s.description
|
|
}
|
|
}
|
|
]
|
|
})
|
|
})),
|
|
m(plusButton)
|
|
]
|
|
}
|
|
}
|
|
]
|
|
})
|
|
}
|
|
}
|
|
|
|
const pagination = {
|
|
oncreate: function() {
|
|
for (var i = 0; i < document.getElementsByClassName("flex-single").length; i++) {
|
|
document.getElementsByClassName("flex-single")[i].style.flexGrow = 1
|
|
}
|
|
},
|
|
view: function() {
|
|
return m(".flex", {
|
|
style: {
|
|
backgroundColor: "#fff",
|
|
position: "fixed",
|
|
bottom: "0",
|
|
width: "100%",
|
|
padding: "1em"
|
|
}
|
|
}, [
|
|
m(".flex-single"),
|
|
m(RaisedButton, {
|
|
className: "flex-single",
|
|
label: m("i.fa.fa-arrow-left.fa-fw", {
|
|
style: {
|
|
margin: "1em 0",
|
|
}
|
|
}),
|
|
events: {
|
|
onclick: function() {
|
|
// var prev = _.find(qModel.list, function(o) { return o.id == parseInt(qModel.current.id) - 1 })
|
|
var prev = _.find(qJSON.data, function(o) { return o.id == parseInt(Questionnaire.current.id) - 1 })
|
|
if (prev != undefined) {
|
|
/* Request pake url yang tersedia */
|
|
// qModel.fetch(prev.url)
|
|
m.route.set("/questionnaires/" + prev.id)
|
|
}
|
|
}
|
|
}
|
|
}),
|
|
m(".flex-single"),
|
|
m(RaisedButton, {
|
|
className: "flex-single",
|
|
label: m("i.fa.fa-arrow-right.fa-fw", {
|
|
style: {
|
|
margin: "1em 0",
|
|
}
|
|
}),
|
|
events: {
|
|
onclick: function() {
|
|
// var next = _.find(qModel.list, function(o) { return o.id == parseInt(qModel.current.id) + 1 })
|
|
var next = _.find(qJSON.data, function(o) { return o.id == parseInt(Questionnaire.current.id) + 1 })
|
|
if (next != undefined) {
|
|
/* Request pake url yang tersedia */
|
|
// qModel.fetch(next.url)
|
|
m.route.set("/questionnaires/" + next.id)
|
|
}
|
|
}
|
|
}
|
|
}),
|
|
m(".flex-single")
|
|
])
|
|
}
|
|
}
|
|
|
|
export const questionnaire = {
|
|
oninit: function() {
|
|
Questionnaire.fetchCurrent()
|
|
},
|
|
view: function() {
|
|
return [
|
|
m(nav, {
|
|
title: "Kuesioner #" + Questionnaire.current.id,
|
|
back: "/user/questionnaires"
|
|
}),
|
|
m(".flex", m(qCard)),
|
|
m(pagination)
|
|
]
|
|
}
|
|
}
|