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


module.exports = {

	new: (self, project, model, socket) ->
		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.
				socket.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.
				socket.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
										socket.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: ->
											socket.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
										socket.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
										socket.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: ->
								socket.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: ->
										socket.delete-task project.id, self.id
								} [ "Delete! For real!" ]
							]

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

		self
}