Browse Source

logs-content: Added edit log form.

1.0
Gisle Aune 6 years ago
parent
commit
fd737fbbdb
  1. 68
      marko/page/logs-content/components/edit-log-modal/component.js
  2. 25
      marko/page/logs-content/components/edit-log-modal/index.marko
  3. 2
      marko/page/logs-content/components/logs-content-menu/index.marko
  4. 4
      marko/page/logs-content/components/page/component.js
  5. 6
      marko/page/logs-content/components/page/index.marko
  6. 19
      marko/page/logs-content/components/page/style.less
  7. 2
      marko/page/logs/components/logs-list/index.marko
  8. 94
      rpdata/api/Log.js
  9. 6
      rpdata/api/LogHeader.js

68
marko/page/logs-content/components/edit-log-modal/component.js

@ -0,0 +1,68 @@
const moment = require("moment")
const {logsApi} = require("../../../../../rpdata/api/Log")
module.exports = class {
onCreate(input) {
this.state = {
error: null,
loading: false,
values: {
title: "",
event: "",
description: "",
open: false,
},
}
this.first = false
}
onInput(input) {
if (input.log && !this.first) {
this.state.values = {
title: input.log.title,
event: input.log.eventName,
description: input.log.description,
open: input.log.open,
}
this.first = true
}
}
change(key, ev) {
this.state.values[key] = ev.target.value
this.state.values = Object.assign({}, this.state.values)
}
open() {
this.state.loading = false
}
close() {
this.first = false
this.emit("close")
}
save() {
if (this.state.loading) {
return
}
const input = Object.assign({id: this.input.log.id}, this.state.values)
console.log(input)
this.state.loading = true
logsApi.edit(input).then(data => {
this.emit("edited", data)
this.emit("close")
}).catch(errs => {
console.warn("Failed to edit:", errs)
this.state.error = "Failed to edit: " + errs[0].message
}).then(() => {
this.state.loading = false
})
}
}

25
marko/page/logs-content/components/edit-log-modal/index.marko

@ -0,0 +1,25 @@
import moment from "moment"
<modal class="modal color-text nolabel" key="modal" enabled=(input.enabled) closable on-close("close") on-open("open") >
<h1>Edit Log</h1>
<p key="error" class="color-error">${state.error}</p>
<label>Title</label>
<input key="title" placeholder=(input.log.channel.name + " – " + moment(input.log.date).format("MMMM D, YYYY")) class="big" on-change("change", "title") value=state.values.title />
<label>Event Name</label>
<input key="event" placeholder="(Optional)" class="big" on-change("change", "event") value=state.values.event />
<label>Description</label>
<textarea key="description" placeholder="(Optional)" on-change("change", "description") value=state.values.description />
<toggle value=state.values.open on="Open" off="Closed"
onDesc=("New posts in "+input.log.channel.name+" will end up here.")
offDesc="The logbot will not append to this log."
on-change("change", "open") />
<p if(state.values.open) key="warning" class="color-danger">Opening a log will close all others for the same channels.</p>
<button disabled=state.loading on-click("save")>Save</button>
</modal>

2
marko/page/logs-content/components/logs-content-menu/index.marko

@ -1,6 +1,6 @@
<menu user=input.user> <menu user=input.user>
<menu-header>Log</menu-header> <menu-header>Log</menu-header>
<menu-link dark key="_create" on-click("select", "add", null) icon="+">Add Post</menu-link>
<menu-link dark key="_create" on-click("select", "post.add", null) icon="+">Add Post</menu-link>
<menu-gap /> <menu-gap />
<menu-header>Links</menu-header> <menu-header>Links</menu-header>

4
marko/page/logs-content/components/page/component.js

@ -83,6 +83,10 @@ module.exports = class {
this.patch([patch]) this.patch([patch])
} }
logEdited(patch) {
this.state.log = Object.assign(Object.assign({}, this.state.log), patch)
}
postAdded(post) { postAdded(post) {
this.state.log.posts = this.state.log.posts.concat([post]) this.state.log.posts = this.state.log.posts.concat([post])
this.state.log = Object.assign({}, this.state.log) this.state.log = Object.assign({}, this.state.log)

6
marko/page/logs-content/components/page/index.marko

@ -1,7 +1,10 @@
<logs-content-menu user=input.user log=state.log on-select("open") /> <logs-content-menu user=input.user log=state.log on-select("open") />
<main> <main>
<div class="logs-content"> <div class="logs-content">
<div class="header">
<h1 class="color-primary">${component.title}</h1> <h1 class="color-primary">${component.title}</h1>
<a on-click("open", "log.edit") class="color-menu">Edit</a>
</div>
<post for(post in state.log.posts) <post for(post in state.log.posts)
key=post.id key=post.id
on-move("movePost", post) on-move("movePost", post)
@ -13,5 +16,6 @@
/> />
</div> </div>
<add-post-modal enabled=(state.modal === "add") logId=state.log.id on-close("close") on-added("postAdded") />
<add-post-modal enabled=(state.modal === "post.add") logId=state.log.id on-close("close") on-added("postAdded") />
<edit-log-modal enabled=(state.modal === "log.edit") log=state.log on-close("close") on-edited("logEdited") />
</main> </main>

19
marko/page/logs-content/components/page/style.less

@ -3,8 +3,27 @@ div.logs-content {
max-width: 75ch; max-width: 75ch;
margin: auto; margin: auto;
div.header {
text-align: center;
vertical-align: middle;
margin-bottom: 1em;
h1 { h1 {
display: block;
font-weight: 200; font-weight: 200;
text-align: center; text-align: center;
margin-bottom: 0;
}
a {
vertical-align: middle;
display: inline-block;
padding: 0.5em 0.5ch 0.5em 0.5ch;
opacity: 0.5;
}
a:hover {
cursor: pointer;
opacity: 1;
}
} }
} }

2
marko/page/logs/components/logs-list/index.marko

@ -8,7 +8,7 @@ import moment from "moment"
description=log.description description=log.description
characters=log.characters characters=log.characters
name=(log.title || (log.channelName + " - " + moment(log.date).format("MMMM D, YYYY"))) name=(log.title || (log.channelName + " - " + moment(log.date).format("MMMM D, YYYY")))
tags=[{kind: "Location", name: log.channelName}, {kind: "Event", name: log.event}]
tags=[{kind: "Location", name: log.channelName}, {kind: "Event", name: log.eventName}]
enableAllTags=true enableAllTags=true
createdDate=log.date /> createdDate=log.date />
</content-list> </content-list>

94
rpdata/api/Log.js

@ -35,7 +35,7 @@ class Log {
} }
} }
const logsApi = {
class LogAPI {
find(id) { find(id) {
return query(` return query(`
query FindLog($id: String!) { query FindLog($id: String!) {
@ -75,7 +75,95 @@ const logsApi = {
`, {id}).then(({log}) => { `, {id}).then(({log}) => {
return Log.fromData(log) return Log.fromData(log)
}) })
},
} }
module.exports = { Log, logsApi }
/**
* Call `addLog(input)` mutation, returns a Log
*
* @param {{time:Date, channel:string, title:string, eventName:string, description:string, open:boolean}} input
* @returns {Promise<Log>}
*/
add(input) {
return query(`
mutation FindLog($input: LogAddInput!) {
log(input: $input) {
id
shortId
date
title
eventName
description
open
channel {
name
logged
hub
eventName
locationName
}
characters {
id
nicks
author
name
shortName
description
}
posts {
id
position
time
kind
nick
text
}
}
}
`, {input}, {permissions: ["log.add "]}).then(({addLog}) => {
return Log.fromData(addLog)
})
}
/**
* Call `editLog(input)` mutation, returns the id and all editable fields.
*
* @param {{id:string, title:string, eventName:string, description:string, open:boolean}} input
* @returns {Promise<{id:string, title:string, eventName:string, description:string, open:boolean}>}
*/
edit(input) {
return query(`
mutation EditLog($input: LogEditInput!) {
editLog(input: $input) {
id
title
eventName
description
open
}
}
`, {input}, {permissions: ["log.edit"]}).then(({editLog}) => {
return editLog
})
}
/**
* Call `removeLog(input)` mutation, returns the id
*
* @param {{id:string}} input
* @returns {Promise<{id:string}>}
*/
remove(input) {
return query(`
mutation RemoveLog($input: LogRemoveInput!) {
removeLog(input: $input) {
id
}
}
`, {input}, {permissions: ["log.remove"]}).then(({editLog}) => {
return editLog
})
}
}
module.exports = { Log, logsApi: new LogAPI }

6
rpdata/api/LogHeader.js

@ -14,14 +14,14 @@ class LogHeader {
* @param {boolean} open * @param {boolean} open
* @param {{id:string,name:string,shortName:string,author:string}[]} characters * @param {{id:string,name:string,shortName:string,author:string}[]} characters
*/ */
constructor(id, shortId, date, channelName, title, description, event, open, characters) {
constructor(id, shortId, date, channelName, title, description, eventName, open, characters) {
this.id = id this.id = id
this.shortId = shortId this.shortId = shortId
this.date = new Date(date) this.date = new Date(date)
this.channelName = channelName this.channelName = channelName
this.title = title || null this.title = title || null
this.description = description || null this.description = description || null
this.event = event || null
this.eventName = eventName || null
this.open = open this.open = open
this.characters = characters.map(ch => new LogHeaderCharacter(ch.id, ch.name, ch.shortName, ch.author)) this.characters = characters.map(ch => new LogHeaderCharacter(ch.id, ch.name, ch.shortName, ch.author))
} }
@ -76,7 +76,7 @@ const logHeaderApi = {
} }
} }
`, {filter}).then(({headers}) => { `, {filter}).then(({headers}) => {
return headers.map(h => new LogHeader(h.id, h.shortId, h.date, h.channelName, h.title, h.description, h.event, h.open, h.characters))
return headers.map(h => new LogHeader(h.id, h.shortId, h.date, h.channelName, h.title, h.description, h.eventName, h.open, h.characters))
}) })
}, },
} }

Loading…
Cancel
Save