diff --git a/client/bulma.ls b/client/bulma.ls index 3d12f9f..b19ffeb 100644 --- a/client/bulma.ls +++ b/client/bulma.ls @@ -20,12 +20,33 @@ module.exports = { h \input.input args, children textarea: (args, children) -> h \textarea.textarea args, children - control: (args, children) -> - h \div.control args, children + control: (selector, args, children) -> + if typeof(selector) == "object" + children = args + args = selector + selector = "" + + h (\div.control + selector), args, children + button: (selector, args, children) -> + if typeof(selector) == "object" + children = args + args = selector + selector = "" + + h (\div.button + selector), args, children + tag: (selector, args, children) -> + if typeof(selector) == "object" + children = args + args = selector + selector = "" + + h (\div.tag + selector), args, children + select: (selector, args, children) -> if typeof(selector) == "object" children = args args = selector + selector = "" h (\div.select + selector), { } [ @@ -36,8 +57,13 @@ module.exports = { # FIXME: Use only args and add args.label and args.input? # Or maybe args.name and args.type could be used directly? - field: (args, children) -> - h \div.field args, children + field: (selector, args, children) -> + if typeof(selector) == "object" + children = args + args = selector + selector = "" + + h (\div.field + selector), args, children form: (method, url, content) -> h \form.form { diff --git a/client/project-creation-modal.ls b/client/project-creation-modal.ls index e21b28d..9192751 100644 --- a/client/project-creation-modal.ls +++ b/client/project-creation-modal.ls @@ -4,24 +4,28 @@ Modal = require './modal.ls' UUID = require "uuid/v4" bulma = require "./bulma.ls" +{field, control, label, button, tag, input, select} = bulma + col-to-lines = (column, self) -> - h \div.field.has-addons { - key: "field" + column.id + field \.has-addons { + key: "column.#{column.id}" } [ - h \p.control.is-expanded [ - h \input.input { + control \.is-expanded [ + input { key: "input" + column.id value: column.title oninput: (e) -> self.extra_properties.columns.find((.id == column.id)).title := e.target.value - } [ ] + } ] - h \div.control.button.is-danger.is-outlined { - key: "button" + column.id - onclick: -> - self.extra_properties.columns := self.extra_properties.columns.filter((.id != column.id)) - } [ "DELETE" ] + control [ + button \.is-danger.is-outlined { + key: "button" + column.id + onclick: -> + self.extra_properties.columns := self.extra_properties.columns.filter((.id != column.id)) + } [ "DELETE" ] + ] ] user-form-selection = (self, user) -> @@ -86,10 +90,10 @@ ProjectCreationModal = (project, todod-ws, users) -> content-render: (self) -> h \div.form [ - bulma.field [ - bulma.label "Project title" + field [ + label "Project title" - h \input.input { + input { value: self.title oninput: (e) -> self.title := e.target.value @@ -111,36 +115,41 @@ ProjectCreationModal = (project, todod-ws, users) -> h \hr [] - h \aside.menu [ - h \p.menu-label [ "Permissions" ] - h \ul.menu-list Object.keys(self.permissions).map (permission) -> - h \li { - key: "permission" + permission - } [ - h \p self.permissions[permission].map (e, index) -> - if index == 0 - "Permissions '" + permission + "': " + e + ", " - else - "" + e + ", " - ] + field [ + label "Permissions" + + h \table.table.is-fullwidth.is-striped [ + h \tbody [ + for permission, uids of self.permissions + for uid in uids + h \tr {key: uid.to-string!} [ + h \td [ + uid.to-string! + ] + + h \td.is-narrow [ + permission + ] + ] + ] + ] ] h \hr [] - h \p [ "Adding new user" ] + # FIXME: This is supposed to go in a .field, right? + label "Adding new user" - h \div.field.has-addons { - key: "adding-user" - } [ - h \div.select.control [ - h \select { + field \.has-addons { key: \new-user } [ + control [ + select { onchange: (e) -> self.tmp.new-user-permission.permission := e.target.value } permission-groups.map (permission) -> permission-to-form-selection self, permission ] - h \div.select.control.is-expanded [ - h \select { + control \.is-expanded [ + select \.is-fullwidth { onchange: (e) -> self.tmp.new-user-permission.uid := e.target.value } [ @@ -150,39 +159,39 @@ ProjectCreationModal = (project, todod-ws, users) -> ] ] - h \div.control.button.is-success.is-outlined { - onclick: -> - if self.tmp.new-user-permission.uid == void || self.tmp.new-user-permission.uid == "-" - console.log "adding an user permission on the kanban: failed, no user selected" - else - # TODO: - # adding the permissions in self.permissions - # then editing the project in the db via todod-ws - permissions-add self, self.tmp.new-user-permission.permission, self.tmp.new-user-permission.uid - } [ "+" ] + control [ + button \.is-success.is-outlined { + onclick: -> + if self.tmp.new-user-permission.uid == void || self.tmp.new-user-permission.uid == "-" + console.log "adding an user permission on the kanban: failed, no user selected" + else + # TODO: + # adding the permissions in self.permissions + # then editing the project in the db via todod-ws + permissions-add self, self.tmp.new-user-permission.permission, self.tmp.new-user-permission.uid + } [ "+" ] + ] ] h \hr [] - h \p [ "Choose the columns" ] + label [ "Columns" ] for dom in (self.extra_properties.columns.map (column) -> col-to-lines column, self) dom h \hr [] - h \div.field.has-addons { - key: "adding-field" - } [ - h \p.control.is-expanded [ - h \input.input { + field \.has-addons { key: \new-column } [ + control \.is-expanded [ + input { value: self.tmp.new-column-input.title oninput: (e) -> self.tmp.new-column-input.title := e.target.value - } [ ] + } ] - h \div.control.button.is-success.is-outlined { + button \.is-success.is-outlined { onclick: -> new-col = { id: UUID!