Huge update: Front-end for client fixed.
This commit is contained in:
124
assets/js/components/beta/menuList.js
vendored
Normal file
124
assets/js/components/beta/menuList.js
vendored
Normal file
@@ -0,0 +1,124 @@
|
||||
import m from "mithril"
|
||||
import stream from "mithril/stream"
|
||||
import {
|
||||
Toolbar,
|
||||
ToolbarTitle,
|
||||
Shadow,
|
||||
List,
|
||||
ListTile,
|
||||
Search,
|
||||
IconButton
|
||||
} from "polythene-mithril"
|
||||
import Dept from "../../models/beta/Dept"
|
||||
|
||||
const barsIcon = "<svg width=\"1792\" height=\"1792\" viewBox=\"0 0 1792 1792\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1664 1344v128q0 26-19 45t-45 19h-1408q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45zm0-512v128q0 26-19 45t-45 19h-1408q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45zm0-512v128q0 26-19 45t-45 19h-1408q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45z\" fill=\"#fff\"/></svg>"
|
||||
const backIcon = "<svg width=\"1792\" height=\"1792\" viewBox=\"0 0 1792 1792\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1664 896v128q0 53-32.5 90.5t-84.5 37.5h-704l293 294q38 36 38 90t-38 90l-75 76q-37 37-90 37-52 0-91-37l-651-652q-37-37-37-90 0-52 37-91l651-650q38-38 91-38 52 0 90 38l75 74q38 38 38 91t-38 91l-293 293h704q52 0 84.5 37.5t32.5 90.5z\"/></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 searchBox = {
|
||||
view: function() {
|
||||
return m(Search, {
|
||||
textfield: {label: "Search"},
|
||||
buttons: {
|
||||
none: {
|
||||
after: m(IconButton, {
|
||||
icon: {svg: m.trust(searchIcon)},
|
||||
inactive: true
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const menuList = {
|
||||
oninit: function(vnode) {
|
||||
const show = stream(false)
|
||||
vnode.state = {
|
||||
show
|
||||
}
|
||||
},
|
||||
view: function(vnode) {
|
||||
const state = vnode.state
|
||||
const show = state.show()
|
||||
return m("div", [
|
||||
m(Toolbar, {
|
||||
style: {
|
||||
position: "fixed",
|
||||
zIndex: "11",
|
||||
width: "100%",
|
||||
backgroundColor: "rgba(255, 255, 255, .93)"
|
||||
}
|
||||
}, [
|
||||
m("#bars", {
|
||||
style: {cursor: "pointer", display: "inline-block", marginLeft: "1em"},
|
||||
onclick: function() {
|
||||
this.classList.toggle("change")
|
||||
state.show(!state.show())
|
||||
}
|
||||
}, [
|
||||
m(".bar1"),
|
||||
m(".bar2"),
|
||||
m(".bar3")
|
||||
]),
|
||||
m(ToolbarTitle, {
|
||||
text: vnode.attrs.title
|
||||
})
|
||||
]),
|
||||
m("#menu", {
|
||||
style: {
|
||||
left: show ? "0" : "-100%"
|
||||
}
|
||||
}, [
|
||||
m(Shadow),
|
||||
m(List, {
|
||||
id: "menu-list",
|
||||
tiles: [
|
||||
m(ListTile, {
|
||||
title: "All Users",
|
||||
hoverable: true,
|
||||
events: {
|
||||
onclick: function() {
|
||||
m.route.set("/beta/users")
|
||||
}
|
||||
}
|
||||
}),
|
||||
m(ListTile, {
|
||||
header: true,
|
||||
title: "Department List"
|
||||
}),
|
||||
vnode.attrs.list.map(function(o) {
|
||||
return m(ListTile, {
|
||||
title: o.name,
|
||||
hoverable: true,
|
||||
events: {
|
||||
onclick: function() {
|
||||
state.show(false)
|
||||
document.getElementById("bars")
|
||||
.classList.toggle("change")
|
||||
m.route.set("/beta/departments/" + o.id)
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
]
|
||||
})
|
||||
]),
|
||||
m("#menu-overlay", {
|
||||
style: {
|
||||
opacity: ".4",
|
||||
display: show ? "block" : "none"
|
||||
},
|
||||
onclick: function() {
|
||||
if (show) {
|
||||
state.show(false)
|
||||
document.getElementById("bars")
|
||||
.classList.toggle("change")
|
||||
}
|
||||
}
|
||||
})
|
||||
])
|
||||
}
|
||||
}
|
||||
|
||||
export default menuList
|
||||
316
assets/js/components/beta/userList.js
vendored
Normal file
316
assets/js/components/beta/userList.js
vendored
Normal file
@@ -0,0 +1,316 @@
|
||||
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())
|
||||
}
|
||||
}
|
||||
}))
|
||||
]
|
||||
}
|
||||
}]
|
||||
})
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user