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 '[01;32m BUN > [01;37mmain.bundle.js[00m'
$(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 ]