Baguette/todo-webclient
3
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Project Creation Modal

Browse Source
This commit is contained in:
Philippe PITTOLI 2019-12-06 21:07:39 +01:00
parent 2e86433d25
commit 5fa8f32d77
5 changed files with 142 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
Makefile
View File

@ -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 \

18
client/index.ls
View File

@ -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

72
client/project-creation-modal.ls Normal file
View File

@ -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

22
client/project.ls
View File

@ -4,6 +4,7 @@ bulma = require "./bulma.ls"
Task = require "./task.ls"
Modal = require './modal.ls'
TaskCreationModal = require './task-creation-modal.ls'
ProjectCreationModal = require "./project-creation-modal.ls"
Project = (self, todod-ws) ->
self.todod-ws = todod-ws
@ -28,11 +29,7 @@ Project = (self, todod-ws) ->
]
]
self.render = ->
# console.log "Project to render: ", self
h \div.project {} [
self.render-navbar = ->
h \div.navbar [
h \div.navbar-brand [
@ -42,6 +39,14 @@ Project = (self, todod-ws) ->
]
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: ->
@ -64,6 +69,13 @@ Project = (self, todod-ws) ->
]
]
self.render = ->
# console.log "Project to render: ", self
h \div.project {} [
self.render-navbar!
h \div.columns [
if columns = self.extra_properties.columns
for dom in columns.map((column, index) -> self.render-column(column, index == 0))

6
client/task-creation-modal.ls
View File

@ -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 {
classes: {
is-active: self.extra_properties && self.extra_properties.column == column.id
}
onclick: ->
self.column := column.id
} [ column.title ]