From 5fa8f32d77adf3f66563828182a50de4f5498584 Mon Sep 17 00:00:00 2001 From: Philippe PITTOLI Date: Fri, 6 Dec 2019 21:07:39 +0100 Subject: [PATCH] Project Creation Modal --- Makefile | 5 ++- client/index.ls | 18 +++++++- client/project-creation-modal.ls | 72 +++++++++++++++++++++++++++++++ client/project.ls | 74 +++++++++++++++++++------------- client/task-creation-modal.ls | 8 +++- 5 files changed, 142 insertions(+), 35 deletions(-) create mode 100644 client/project-creation-modal.ls diff --git a/Makefile b/Makefile index 765c348..b73bdb1 100644 --- a/Makefile +++ b/Makefile @@ -37,7 +37,7 @@ main.js: main.bundle.js $(Q)npx babel --minified main.bundle.js -o main.js -main.bundle.js: client/index.ls client/authd.ls client/bulma.ls client/card.ls client/modal.ls client/project.ls client/task-creation-modal.ls client/task.ls client/task-removal-modal.ls client/todowebsocket.ls client/validation-modal.ls +main.bundle.js: client/index.ls client/authd.ls client/bulma.ls client/card.ls client/modal.ls client/project-creation-modal.ls client/project.ls client/task-creation-modal.ls client/task.ls client/task-removal-modal.ls client/todowebsocket.ls client/validation-modal.ls @echo ' BUN > main.bundle.js' $(Q)npx browserify -t browserify-livescript client/index.ls -o main.bundle.js @@ -120,6 +120,7 @@ $(PACKAGE)-$(VERSION).tar.gz: distdir $(PACKAGE)-$(VERSION)/client/bulma.ls \ $(PACKAGE)-$(VERSION)/client/card.ls \ $(PACKAGE)-$(VERSION)/client/modal.ls \ + $(PACKAGE)-$(VERSION)/client/project-creation-modal.ls \ $(PACKAGE)-$(VERSION)/client/project.ls \ $(PACKAGE)-$(VERSION)/client/task-creation-modal.ls \ $(PACKAGE)-$(VERSION)/client/task.ls \ @@ -138,6 +139,7 @@ $(PACKAGE)-$(VERSION).tar.xz: distdir $(PACKAGE)-$(VERSION)/client/bulma.ls \ $(PACKAGE)-$(VERSION)/client/card.ls \ $(PACKAGE)-$(VERSION)/client/modal.ls \ + $(PACKAGE)-$(VERSION)/client/project-creation-modal.ls \ $(PACKAGE)-$(VERSION)/client/project.ls \ $(PACKAGE)-$(VERSION)/client/task-creation-modal.ls \ $(PACKAGE)-$(VERSION)/client/task.ls \ @@ -156,6 +158,7 @@ $(PACKAGE)-$(VERSION).tar.bz2: distdir $(PACKAGE)-$(VERSION)/client/bulma.ls \ $(PACKAGE)-$(VERSION)/client/card.ls \ $(PACKAGE)-$(VERSION)/client/modal.ls \ + $(PACKAGE)-$(VERSION)/client/project-creation-modal.ls \ $(PACKAGE)-$(VERSION)/client/project.ls \ $(PACKAGE)-$(VERSION)/client/task-creation-modal.ls \ $(PACKAGE)-$(VERSION)/client/task.ls \ diff --git a/client/index.ls b/client/index.ls index 04ff201..1559de0 100644 --- a/client/index.ls +++ b/client/index.ls @@ -174,8 +174,24 @@ model.todod-ws.add-event-listener \new-list, (message) -> model.project-list := model.project-list ++ [ (Project message.list, model.todod-ws) ] projector.schedule-render! +model.todod-ws.add-event-listener \list-updated, (message) -> + console.log message + + new-project = Project message.list, model.todod-ws + + model.project-list.map (project) -> + if project.id == message.list.id + new-project + else + project + + if model.viewed-project && model.viewed-project.id == message.list.id + model.viewed-project = new-project + + projector.schedule-render! + model.todod-ws.add-event-listener \tasks, (message) -> - console.log "RECEIVED TASKS MESSAGE", message + console.log "Tasks received", message project = model.project-list.find((.id == message.list)) model.project-list.find((.id == message.list)).tasks := message.tasks.map (e) -> Task e, project, model.todod-ws console.log "Once done: ", model.project-list.find((.id == message.list)).tasks diff --git a/client/project-creation-modal.ls b/client/project-creation-modal.ls new file mode 100644 index 0000000..a60da42 --- /dev/null +++ b/client/project-creation-modal.ls @@ -0,0 +1,72 @@ + +h = require 'maquette' .h +Modal = require './modal.ls' +UUID = require "uuid/v4" + +ProjectCreationModal = (project, todod-ws) -> + + self = { + title: project.title || "" + extra_properties: + columns: project.extra_properties.columns || [] + } + + modal = Modal { + +visible + new-column-input: "New column !" + + content: h \div.form [ + h \input.input { + value: self.title + oninput: (e) -> + self.title := e.target.value + } + + h \aside.menu [ + h \p.menu-label [ "Choose the columns" ] + + h \ul.menu-list self.extra_properties.columns.map (column) -> + + h \li [ + h \input.input { + key: column.id + value: column.title + oninput: (e) -> + self.extra_properties.columns.find((.id == column.id)).title := e.target.value + } [ ] + + h \div.button { + onclick: -> + # TODO: create a new entry in self.extra_properties.columns + self.extra_properties.columns = self.extra_properties.select((.id != column.id)) + } [ "X" ] + ] + + h \input.input { + value: self.new-column-input + oninput: (e) -> + self.new-column-input := e.target.value + } [ ] + + h \div.button { + onclick: -> + # TODO: create a new entry in self.extra_properties.columns + self.extra_properties.columns ++= [ self.new-column-input ] + self.new-column-input := "New column !" + } [ "+" ] + ] + ] + on-validation: -> + if project.id + todod-ws.edit-list project.id, self + else + todod-ws.add-list self.title, self + } + + self.render = -> + modal.render! + + self + +module.exports = ProjectCreationModal + diff --git a/client/project.ls b/client/project.ls index 1f18758..4314a93 100644 --- a/client/project.ls +++ b/client/project.ls @@ -3,7 +3,8 @@ h = require 'maquette' .h bulma = require "./bulma.ls" Task = require "./task.ls" Modal = require './modal.ls' -TaskCreationModal = require './task-creation-modal.ls' +TaskCreationModal = require './task-creation-modal.ls' +ProjectCreationModal = require "./project-creation-modal.ls" Project = (self, todod-ws) -> self.todod-ws = todod-ws @@ -28,41 +29,52 @@ Project = (self, todod-ws) -> ] ] + self.render-navbar = -> + h \div.navbar [ + + h \div.navbar-brand [ + h \div.navbar-item [ + self.title + ] + ] + + h \div.navbar-end [ + + h \div.navbar-item [ + h \div.button.is-danger.is-outlined { + onclick: -> + modal := ProjectCreationModal self, self.todod-ws + } [ "EDIT" ] + ] + + h \div.navbar-item [ + h \div.button.is-success.is-outlined { + onclick: -> + modal := TaskCreationModal self, self.todod-ws + } [ "+" ] + ] + + h \div.navbar-item [ + h \div.button.is-danger.is-outlined { + onclick: -> + modal := Modal { + +visible + content: + h \p [ "Are you sure you want to remove board #{self.title}?" ] + on-validation: -> + self.todod-ws.remove-list self.id + } + } [ "X" ] + ] + ] + ] + self.render = -> # console.log "Project to render: ", self h \div.project {} [ - h \div.navbar [ - - h \div.navbar-brand [ - h \div.navbar-item [ - self.title - ] - ] - - h \div.navbar-end [ - h \div.navbar-item [ - h \div.button.is-success.is-outlined { - onclick: -> - modal := TaskCreationModal self, self.todod-ws - } [ "+" ] - ] - - h \div.navbar-item [ - h \div.button.is-danger.is-outlined { - onclick: -> - modal := Modal { - +visible - content: - h \p [ "Are you sure you want to remove board #{self.title}?" ] - on-validation: -> - self.todod-ws.remove-list self.id - } - } [ "X" ] - ] - ] - ] + self.render-navbar! h \div.columns [ if columns = self.extra_properties.columns diff --git a/client/task-creation-modal.ls b/client/task-creation-modal.ls index 52b8818..bb20b3d 100644 --- a/client/task-creation-modal.ls +++ b/client/task-creation-modal.ls @@ -27,11 +27,15 @@ TaskCreationModal = (project, todod-ws, task) -> self.description := e.target.value } - h \div.menu [ + h \aside.menu [ h \p.menu-label [ "Choose the column" ] h \ul.menu-list project.extra_properties.columns.map (column) -> + h \li [ - h \a { + h \a { + classes: { + is-active: self.extra_properties && self.extra_properties.column == column.id + } onclick: -> self.column := column.id } [ column.title ]