todo-webclient/client/task.ls

#
# Tasks, previous version of todos
#

h     = require 'maquette' .h
bulma = require "./bulma.ls"
nmd   = require "nano-markdown"

#
# generic functions
#

get-previous = (collection, element) ->
	var previous

	for item in collection
		if item == element
			return previous

		previous = item

get-next = (collection, element) ->
	var found-element

	for item in collection
		if found-element
			return item

		if item == element
			found-element := true


Task = (self, project, model) ->
	self.render = ->
		author = model.users[self.author]
		if typeof(author) != "object" and author != "request sent"
			model.users[self.author] = "request sent"
			# FIXME: This should go directly to authd.
			model.todod-ws.get-user self.author

		assigned_to = model.users[self.assigned_to]
		if self.assigned_to and typeof(assigned_to) != "object" and assigned_to != "request sent"
			model.users[self.assigned_to] = "request sent"
			# FIXME: This should go directly to authd.
			model.todod-ws.get-user self.assigned_to

		is-selected = model.selected == self.id

		h (\div.card.is- + (self.color || "dark")), {
			key: self.id
			classes: {
				"is-selected": is-selected
			}
			onclick: ->
				model.selected := self.id
		} [
			h \div.card-content [
				h \div.media [
					h \div.media-left [
						h \img.image.is-48x48.avatar {
							alt: "user image"
							src: if typeof(assigned_to) == "object"
								assigned_to.avatar
							else
								"https://bulma.io/images/placeholders/96x96.png"
						}
					]
					h \div.media-content [
						if model.editing == self.id + ".title"
							h \input.input {
								value: self.title
								onchange: (e) ->
									model.editing := undefined
									model.todod-ws.edit-task project.id, self.id, {
										title: e.target.value
									}
							} [ self.title ]
						else
							h \a [
								bulma.title 4 self.title
							]

						if typeof(model.users[self.assigned_to]) == "object"
							user = model.users[self.assigned_to]

							h \div.subtitle.is-6 [
								"@" + (user.full_name || user.login)
							]
					]
					if ! is-selected && self.description != ""
						h \div.media-right {key: "description-icon"} [
							h \span.icon.is-size-1 [ "🗎" ]
						]

					if is-selected
						h \div.media-right {key: "edit"} [
							h \a.small {
								onclick: ->
									if model.editing == self.id + ".title"
										model.editing := undefined
									else
										model.editing := self.id + ".title"
							} [
								"Edit"
							]
						]

					if is-selected
						h \div.media-right {key: "delete"} [
							h \a.small {
								onclick: ->
									model.editing := self.id + ".delete"
							} [
								"Delete"
							]
						]
				]

				if is-selected
					h \div.content {
						key: self.description
						after-create: (dom) ->
							dom.innerHTML = nmd self.description
					} [
						if model.editing == self.id + ".description"
							h \form.form [
								h \textarea.textarea {
									value: model.editing-data
									oninput: (e) ->
										model.editing-data := e.target.value
								}
								h \div.button.is-fullwidth {
									onclick: ->
										model.todod-ws.edit-task project.id, self.id, {
											description: model.editing-data
										}
										model.editing-data := undefined
										model.editing := undefined
								} [ "Update" ]
							]
					]

				if is-selected
					h \span.button.is-small {
						onclick: ->
							model.editing-data := self.description
							model.editing := self.id + ".description"
					} [
						"edit"
					]
			]

			if is-selected
				h \div.card-footer {key: "assign"} [
					if model.editing == self.id + ".assigned_to"
						h \div.card-footer-item {
							key: "assign.clicked"
						} [
							h \input.input {
								onchange: (e) ->
									model.editing := undefined
									model.todod-ws.edit-task project.id, self.id, {
										assigned_to: Number e.target.value
									}
							}
						]
					else
						h \a.card-footer-item {
							key: "assign"
							onclick: ->
								model.editing := self.id + ".assigned_to"
						} [ "Assign" ]
				]

			if is-selected
				h \div.card-footer {key: "color"} [
					if model.editing == self.id + ".color"
						h \div.card-footer-item {
							key: "color.clicked"
						} [
							h \input.input {
								onchange: (e) ->
									model.editing := undefined
									model.todod-ws.edit-task project.id, self.id, {
										color: e.target.value
									}
							}
						]
					else
						h \a.card-footer-item {
							key: "assign"
							onclick: ->
								model.editing := self.id + ".color"
						} [ "Change Color" ]
				]

			if is-selected
				h \div.card-footer {key: "move"} [
					h \a.card-footer-item {
						key: "⇐"
						onclick: ->
							model.todod-ws.edit-task project.id, self.id, {
								column: get-previous project.columns.map((.id)), self.column
							}
					} [ "⇐" ]

					if model.editing == self.id + ".delete"
						h \a.card-footer-item {
							key: "delete"
						} [
							h \div.button.is-danger {
								onclick: ->
									model.todod-ws.delete-task project.id, self.id
							} [ "Delete! For real!" ]
						]

					h \a.card-footer-item {
						key: "⇒"
						onclick: ->
							model.todod-ws.edit-task project.id, self.id, {
								column: get-next project.columns.map((.id)), self.column
							}
					} [ "⇒" ]
				]
		]

	self

module.exports = Task