Project Creation Modal
This commit is contained in:
parent
2e86433d25
commit
5fa8f32d77
5
Makefile
5
Makefile
@ -37,7 +37,7 @@ main.js: main.bundle.js
|
|||||||
$(Q)npx babel --minified main.bundle.js -o main.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'
|
@echo '[01;32m BUN > [01;37mmain.bundle.js[00m'
|
||||||
$(Q)npx browserify -t browserify-livescript client/index.ls -o 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/bulma.ls \
|
||||||
$(PACKAGE)-$(VERSION)/client/card.ls \
|
$(PACKAGE)-$(VERSION)/client/card.ls \
|
||||||
$(PACKAGE)-$(VERSION)/client/modal.ls \
|
$(PACKAGE)-$(VERSION)/client/modal.ls \
|
||||||
|
$(PACKAGE)-$(VERSION)/client/project-creation-modal.ls \
|
||||||
$(PACKAGE)-$(VERSION)/client/project.ls \
|
$(PACKAGE)-$(VERSION)/client/project.ls \
|
||||||
$(PACKAGE)-$(VERSION)/client/task-creation-modal.ls \
|
$(PACKAGE)-$(VERSION)/client/task-creation-modal.ls \
|
||||||
$(PACKAGE)-$(VERSION)/client/task.ls \
|
$(PACKAGE)-$(VERSION)/client/task.ls \
|
||||||
@ -138,6 +139,7 @@ $(PACKAGE)-$(VERSION).tar.xz: distdir
|
|||||||
$(PACKAGE)-$(VERSION)/client/bulma.ls \
|
$(PACKAGE)-$(VERSION)/client/bulma.ls \
|
||||||
$(PACKAGE)-$(VERSION)/client/card.ls \
|
$(PACKAGE)-$(VERSION)/client/card.ls \
|
||||||
$(PACKAGE)-$(VERSION)/client/modal.ls \
|
$(PACKAGE)-$(VERSION)/client/modal.ls \
|
||||||
|
$(PACKAGE)-$(VERSION)/client/project-creation-modal.ls \
|
||||||
$(PACKAGE)-$(VERSION)/client/project.ls \
|
$(PACKAGE)-$(VERSION)/client/project.ls \
|
||||||
$(PACKAGE)-$(VERSION)/client/task-creation-modal.ls \
|
$(PACKAGE)-$(VERSION)/client/task-creation-modal.ls \
|
||||||
$(PACKAGE)-$(VERSION)/client/task.ls \
|
$(PACKAGE)-$(VERSION)/client/task.ls \
|
||||||
@ -156,6 +158,7 @@ $(PACKAGE)-$(VERSION).tar.bz2: distdir
|
|||||||
$(PACKAGE)-$(VERSION)/client/bulma.ls \
|
$(PACKAGE)-$(VERSION)/client/bulma.ls \
|
||||||
$(PACKAGE)-$(VERSION)/client/card.ls \
|
$(PACKAGE)-$(VERSION)/client/card.ls \
|
||||||
$(PACKAGE)-$(VERSION)/client/modal.ls \
|
$(PACKAGE)-$(VERSION)/client/modal.ls \
|
||||||
|
$(PACKAGE)-$(VERSION)/client/project-creation-modal.ls \
|
||||||
$(PACKAGE)-$(VERSION)/client/project.ls \
|
$(PACKAGE)-$(VERSION)/client/project.ls \
|
||||||
$(PACKAGE)-$(VERSION)/client/task-creation-modal.ls \
|
$(PACKAGE)-$(VERSION)/client/task-creation-modal.ls \
|
||||||
$(PACKAGE)-$(VERSION)/client/task.ls \
|
$(PACKAGE)-$(VERSION)/client/task.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) ]
|
model.project-list := model.project-list ++ [ (Project message.list, model.todod-ws) ]
|
||||||
projector.schedule-render!
|
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) ->
|
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))
|
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
|
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
|
console.log "Once done: ", model.project-list.find((.id == message.list)).tasks
|
||||||
|
72
client/project-creation-modal.ls
Normal file
72
client/project-creation-modal.ls
Normal 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
|
||||||
|
|
@ -4,6 +4,7 @@ bulma = require "./bulma.ls"
|
|||||||
Task = require "./task.ls"
|
Task = require "./task.ls"
|
||||||
Modal = require './modal.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) ->
|
Project = (self, todod-ws) ->
|
||||||
self.todod-ws = todod-ws
|
self.todod-ws = todod-ws
|
||||||
@ -28,11 +29,7 @@ Project = (self, todod-ws) ->
|
|||||||
]
|
]
|
||||||
]
|
]
|
||||||
|
|
||||||
self.render = ->
|
self.render-navbar = ->
|
||||||
|
|
||||||
# console.log "Project to render: ", self
|
|
||||||
h \div.project {} [
|
|
||||||
|
|
||||||
h \div.navbar [
|
h \div.navbar [
|
||||||
|
|
||||||
h \div.navbar-brand [
|
h \div.navbar-brand [
|
||||||
@ -42,6 +39,14 @@ Project = (self, todod-ws) ->
|
|||||||
]
|
]
|
||||||
|
|
||||||
h \div.navbar-end [
|
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.navbar-item [
|
||||||
h \div.button.is-success.is-outlined {
|
h \div.button.is-success.is-outlined {
|
||||||
onclick: ->
|
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 [
|
h \div.columns [
|
||||||
if columns = self.extra_properties.columns
|
if columns = self.extra_properties.columns
|
||||||
for dom in columns.map((column, index) -> self.render-column(column, index == 0))
|
for dom in columns.map((column, index) -> self.render-column(column, index == 0))
|
||||||
|
@ -27,11 +27,15 @@ TaskCreationModal = (project, todod-ws, task) ->
|
|||||||
self.description := e.target.value
|
self.description := e.target.value
|
||||||
}
|
}
|
||||||
|
|
||||||
h \div.menu [
|
h \aside.menu [
|
||||||
h \p.menu-label [ "Choose the column" ]
|
h \p.menu-label [ "Choose the column" ]
|
||||||
h \ul.menu-list project.extra_properties.columns.map (column) ->
|
h \ul.menu-list project.extra_properties.columns.map (column) ->
|
||||||
|
|
||||||
h \li [
|
h \li [
|
||||||
h \a {
|
h \a {
|
||||||
|
classes: {
|
||||||
|
is-active: self.extra_properties && self.extra_properties.column == column.id
|
||||||
|
}
|
||||||
onclick: ->
|
onclick: ->
|
||||||
self.column := column.id
|
self.column := column.id
|
||||||
} [ column.title ]
|
} [ column.title ]
|
||||||
|
Loading…
Reference in New Issue
Block a user