questionnaire/assets/js/components/questionnaireList.js

import m from "mithril"
import { Card, Button, RaisedButton, Toolbar, ToolbarTitle, Search, Shadow, Menu, List, ListTile } from "polythene-mithril"
import { ButtonCSS, addTypography } from "polythene-css"
import { nav } from "./nav"
import Questionnaire from "../models/Questionnaire"

ButtonCSS.addStyle(".bordered-button", {
    color_light_text:   "#03a9f4",
    color_light_border: "#03a9f4",
    color_dark_text:    "#03a9f4",
    color_dark_border:  "#03a9f4"
})

addTypography()

const head = {
    view: function() {
        return [
            m(".header-nav.left", {
                style: {
                    color: "#fff"
                }
            }, m("p", {
                style: {
                    fontSize: "larger"
                }
            }, "Questionnaire")),
            m(".header-nav", {
                style: {
                    color: "#fff",
                    cursor: "pointer"
                },
                onclick: function() {
                    m.route.set("")
                }
            }, m("i.fa.fa-home.fa-lg")),
            m(".header-img", {
                style: {
                    backgroundImage: "url('img/head1.jpg')",
                    position: "fixed",
                    color: "#FFFFFF",
                    textAlign: "center",
                    width: "100%"
                }
            })
        ]
    }
}

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
        vnode.state = {
            show
        }
    },
    view: function(vnode) {
        var state = vnode.state
        var show = state.show
        return [
            m(Shadow),
            m(Menu, {
                target: "#filter",
                origin: "top-left",
                show,
                didHide: function() { state.show = false },
                offset: 8,
                size: 3,
                hideDelay: .240,
                content: m(List, {
                    tiles: Questionnaire.questionnaire.map(function(value) {
                        return {
                            title: value.status.charAt(0).toUpperCase() + value.status.slice(1),
                            value: value.status
                        }
                    }).map(function(current) {
                        return {
                            title: current.title,
                            ink: true,
                            hoverable: true,
                            value: current.value
                        }
                    }),
                    keyboardControl: true,
                    onSelect: function({attrs}) {
                        return Questionnaire.search = _.filter(Questionnaire.data, 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 }
                }
            })
        ]
    }
}

export const questionnaireList = {
    oninit: function() {
        Questionnaire.fetchList()
    },
    view: function() {
        var questionnaire =
        _.isNil(Questionnaire.search)
        || _.isNull(Questionnaire.search)
        || _.isEmpty(Questionnaire.search) ?
        Questionnaire.list : Questionnaire.search
        return [
            m(nav, { title: "Questionnaires", back: false }),
            m(Search, {
                id: "search-questionnaire",
                textfield: {
                    label: "Search",
                    autofocus: true,
                    onChange: function({value}) {
                        var regex = new RegExp(value, "gi")
                        Questionnaire.search = _.filter(Questionnaire.list, function(o) {
                            return o.title.match(regex)
                        })
                    }
                },
                before: m(Shadow)
            }),
            // m(filterMenu),
            m("div", {
                style: {margin: "1em 1em 0"}
            }, 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.search =
                        _.filter(
                            Questionnaire.list,
                            function(i) {return i.status == o.value}
                        )
                        console.log(Questionnaire.search);
                    }
                }, m("i.fa.fa-fw.fa-" + o.icon + "[aria-hidden=true]"), m.trust(" "), o.title)
            })),
            m("div.flex", {
                style: {
                    flexFlow: "row wrap",
                    justifyContent: "flex-start",
                }
            }, questionnaire.map(function(qs) {
                return m(Card, {
                    className: "box",
                    style: {
                        flexGrow: "1"
                    },
                    content: [
                        {
                            primary: {
                                title: m("a", {
                                    style: {
                                        cursor: "pointer"
                                    },
                                    onclick: function() {
                                        /* Request ke questionnaire model masuk ke current */
                                        // qModel.fetch(qs.url)
                                        /* Route */
                                        m.route.set("/user/questionnaires/" + qs.id)
                                    }
                                }, qs.title),
                                subtitle: qs.description.length > 56 ? qs.description.substr(0, 50) + " ..." : qs.desc
                            }
                        }
                    ]
                })
            })),
            m(plusButton)
        ]
    }
}