317 lines
13 KiB
JavaScript
Vendored
317 lines
13 KiB
JavaScript
Vendored
import m from "mithril"
|
|
import stream from "mithril/stream"
|
|
import {
|
|
Card,
|
|
ListTile,
|
|
Icon,
|
|
Search,
|
|
Shadow,
|
|
IconButton
|
|
} from "polythene-mithril"
|
|
import menuList from "./menuList"
|
|
import Dept from "../../models/beta/Dept"
|
|
import User from "../../models/beta/User"
|
|
|
|
const angleDownIcon = "<svg width=\"1792\" height=\"1792\" viewBox=\"0 0 1792 1792\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1395 736q0 13-10 23l-466 466q-10 10-23 10t-23-10l-466-466q-10-10-10-23t10-23l50-50q10-10 23-10t23 10l393 393 393-393q10-10 23-10t23 10l50 50q10 10 10 23z\"/></svg>"
|
|
const searchIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path d=\"M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z\"/></svg>"
|
|
const clearIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\">"
|
|
|
|
export const userList = {
|
|
view: function(vnode) {
|
|
Dept.current = _.find(Dept.list, function(d) {return d.id == vnode.attrs.id})
|
|
Dept.current.users = _.filter(User.list, function(u) {return u.dept == Dept.current.id})
|
|
return [
|
|
m(menuList, {title: Dept.current.name, list: Dept.list}),
|
|
m(".wrapper-body", {
|
|
style: {
|
|
display: "flex",
|
|
flexFlow: "row wrap",
|
|
margin: "0 auto",
|
|
paddingTop: "64px"
|
|
}
|
|
}, _.filter(Dept.current.users, function(u) {return u.super}).map(function(user) {
|
|
return m(superList, {user})
|
|
}))
|
|
]
|
|
}
|
|
}
|
|
|
|
export const userAll = {
|
|
oninit: function(vnode) {
|
|
var show = stream(false)
|
|
var search = ""
|
|
vnode.state = {show, search}
|
|
},
|
|
view: function(vnode) {
|
|
var state = vnode.state
|
|
var show = state.show()
|
|
var search = state.search
|
|
return [
|
|
m(menuList, {title: "User List", list: Dept.list}),
|
|
m(".wrapper-body", {
|
|
style: {
|
|
display: "flex",
|
|
flexFlow: "row wrap",
|
|
margin: "0 auto",
|
|
paddingTop: "64px"
|
|
}
|
|
}, [
|
|
m(Search, {
|
|
style: {
|
|
margin: "1em"
|
|
},
|
|
textfield: {
|
|
label: "Search",
|
|
value: state.search,
|
|
onChange: function({value}) {
|
|
state.search = value
|
|
}
|
|
},
|
|
before: m(Shadow),
|
|
buttons: {
|
|
none: {
|
|
before: m(IconButton, {
|
|
icon: {svg: m.trust(searchIcon)},
|
|
inactive: true
|
|
}),
|
|
after: m(IconButton, {
|
|
icon: {svg: m.trust(clearIcon)},
|
|
events: {
|
|
onclick: function() {
|
|
state.search = ""
|
|
}
|
|
}
|
|
})
|
|
},
|
|
focus: {
|
|
before: m(IconButton, {
|
|
icon: {svg: m.trust(searchIcon)},
|
|
inactive: true
|
|
}),
|
|
after: m(IconButton, {
|
|
icon: {svg: m.trust(clearIcon)},
|
|
events: {
|
|
onclick: function() {
|
|
state.search = ""
|
|
}
|
|
}
|
|
})
|
|
},
|
|
dirty: {
|
|
before: m(IconButton, {
|
|
icon: {svg: m.trust(searchIcon)},
|
|
inactive: true
|
|
}),
|
|
after: m(IconButton, {
|
|
icon: {svg: m.trust(clearIcon)},
|
|
events: {
|
|
onclick: function() {
|
|
state.search = ""
|
|
}
|
|
}
|
|
})
|
|
},
|
|
focus_dirty: {
|
|
before: m(IconButton, {
|
|
icon: {svg: m.trust(searchIcon)},
|
|
inactive: true
|
|
}),
|
|
after: m(IconButton, {
|
|
icon: {svg: m.trust(clearIcon)},
|
|
events: {
|
|
onclick: function() {
|
|
state.search = ""
|
|
}
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}),
|
|
User.list.map(function(user) {
|
|
return m(superList, {user})
|
|
})
|
|
])
|
|
]
|
|
}
|
|
}
|
|
|
|
const superList = {
|
|
oninit: function(vnode) {
|
|
var show = stream(false)
|
|
vnode.state = {show}
|
|
},
|
|
view: function(vnode) {
|
|
var state = vnode.state
|
|
var show = state.show()
|
|
var user = vnode.attrs.user
|
|
return m(Card, {
|
|
style: {
|
|
flexBasis: "100%",
|
|
webkitTransition: "all .2s cubic-bezier(0, 0, .6, 1)",
|
|
mozTransition: "all .2s cubic-bezier(0, 0, .6, 1)",
|
|
oTransition: "all .2s cubic-bezier(0, 0, .6, 1)",
|
|
transition: "all .2s cubic-bezier(0, 0, .6, 1)",
|
|
},
|
|
content: [{
|
|
text: {
|
|
content: [
|
|
m(ListTile, {
|
|
front: m(Icon, {
|
|
avatar: true,
|
|
size: "large",
|
|
src: "../../img/yayasan.png"
|
|
}),
|
|
title: user.name,
|
|
subContent: show ? m("div", {
|
|
style: {fontSize: "smaller", marginTop: "1em"}
|
|
}, [
|
|
m("div", [
|
|
"Alamat: ",
|
|
user.address
|
|
]),
|
|
m("div", [
|
|
"TTL: ",
|
|
user.birth
|
|
]),
|
|
m("div", [
|
|
"Telp.: ",
|
|
user.phone
|
|
]),
|
|
m("div", [
|
|
"Email: ",
|
|
user.mail
|
|
]),
|
|
m("div", [
|
|
"Tgl. Masuk: ",
|
|
user.workEntry
|
|
]),
|
|
m("div", [
|
|
"Lama Kerja: ",
|
|
user.workPeriod
|
|
]),
|
|
m("div", [
|
|
"Pendidikan: ",
|
|
user.education
|
|
])
|
|
]) : null
|
|
}),
|
|
m("div", {
|
|
style: {textAlign: "center"}
|
|
}, m(Icon, {
|
|
element: "a",
|
|
svg: {content: m.trust(angleDownIcon), style: {color: "rgb(0, 145, 234)"}},
|
|
style: {
|
|
// opacity: ".5",
|
|
cursor: "pointer",
|
|
borderRadius: "50%",
|
|
transform: show ? "rotateX(180deg)" : "rotateX(0)",
|
|
webkitTransition: "all .25s linear",
|
|
mozTransition: "all .25s linear",
|
|
oTransition: "all .25s linear",
|
|
transition: "all .25s linear"
|
|
},
|
|
events: {
|
|
onclick: function() {
|
|
state.show(!state.show())
|
|
}
|
|
}
|
|
})),
|
|
show ? _.filter(
|
|
Dept.current.users,
|
|
function(u) {return !u.super}
|
|
).map(function(staff) {return m(staffList, {staff})}) : null
|
|
]
|
|
}
|
|
}]
|
|
})
|
|
}
|
|
}
|
|
|
|
const staffList = {
|
|
oninit: function(vnode) {
|
|
var peek = stream(false)
|
|
vnode.state = {peek}
|
|
},
|
|
view: function(vnode) {
|
|
var state = vnode.state
|
|
var peek = state.peek()
|
|
var staff = vnode.attrs.staff
|
|
return m(Card, {
|
|
style: {
|
|
width: "100%",
|
|
webkitTransition: "all .1s cubic-bezier(0, 0, .6, 1)",
|
|
mozTransition: "all .1s cubic-bezier(0, 0, .6, 1)",
|
|
oTransition: "all .1s cubic-bezier(0, 0, .6, 1)",
|
|
transition: "all .1s cubic-bezier(0, 0, .6, 1)",
|
|
},
|
|
content: [{
|
|
text: {
|
|
content: [
|
|
m(ListTile, {
|
|
front: m(Icon, {
|
|
avatar: true,
|
|
size: "large",
|
|
src: "../../img/yayasan.png"
|
|
}),
|
|
title: staff.name,
|
|
subContent: peek ? m("div", {
|
|
style: {fontSize: "smaller", marginTop: "1em"}
|
|
}, [
|
|
m("div", [
|
|
"Alamat: ",
|
|
staff.address
|
|
]),
|
|
m("div", [
|
|
"TTL: ",
|
|
staff.birth
|
|
]),
|
|
m("div", [
|
|
"Telp.: ",
|
|
staff.phone
|
|
]),
|
|
m("div", [
|
|
"Email: ",
|
|
staff.mail
|
|
]),
|
|
m("div", [
|
|
"Tgl. Masuk: ",
|
|
staff.workEntry
|
|
]),
|
|
m("div", [
|
|
"Lama Kerja: ",
|
|
staff.workPeriod
|
|
]),
|
|
m("div", [
|
|
"Pendidikan: ",
|
|
staff.education
|
|
])
|
|
]) : null
|
|
}),
|
|
m("div", {
|
|
style: {textAlign: "center"}
|
|
}, m(Icon, {
|
|
element: "a",
|
|
svg: {content: m.trust(SVGAngleDown)},
|
|
style: {
|
|
opacity: ".5",
|
|
cursor: "pointer",
|
|
borderRadius: "50%",
|
|
transform: peek ? "rotateX(180deg)" : "rotateX(0)",
|
|
webkitTransition: "all .25s linear",
|
|
mozTransition: "all .25s linear",
|
|
oTransition: "all .25s linear",
|
|
transition: "all .25s linear"
|
|
},
|
|
events: {
|
|
onclick: function() {
|
|
state.peek(!state.peek())
|
|
}
|
|
}
|
|
}))
|
|
]
|
|
}
|
|
}]
|
|
})
|
|
}
|
|
}
|