Browse Source

logs-content: Added add post form

1.0
Gisle Aune 6 years ago
parent
commit
3466b1a707
  1. 59
      marko/page/logs-content/components/add-post-modal/component.js
  2. 26
      marko/page/logs-content/components/add-post-modal/index.marko
  3. 5
      marko/page/logs-content/components/logs-content-menu/component.js
  4. 4
      marko/page/logs-content/components/logs-content-menu/index.marko
  5. 20
      marko/page/logs-content/components/page/component.js
  6. 4
      marko/page/logs-content/components/page/index.marko
  7. 32
      rpdata/api/Post.js

59
marko/page/logs-content/components/add-post-modal/component.js

@ -0,0 +1,59 @@
const moment = require("moment")
const {postApi} = require("../../../../../rpdata/api/Post")
module.exports = class {
onCreate(input) {
this.state = {
error: null,
loading: false,
values: {
time: moment.utc(new Date()).format("YYYY-MM-DD HH:mm:ss"),
kind: "text",
nick: "",
text: "",
},
}
this.first = false
}
change(key, ev) {
this.state.values[key] = ev.target.value
}
open() {
}
close() {
this.first = false
this.emit("close")
}
save() {
if (this.state.loading) {
return
}
const values = this.state.values
let time = new Date(values.time + " UTC")
if (Number.isNaN(time)) {
this.state.error = `Could not parse ${values.time} as date`
return
}
const input = {logId: this.input.logId, time, kind: this.state.values.kind, nick: this.state.values.nick, text: this.state.values.text}
this.state.loading = true
postApi.add(input).then(data => {
this.emit("added", data)
this.emit("close")
}).catch(errs => {
console.warn("Failed to add post:", errs)
this.state.error = "Failed to add post: " + errs[0].message
}).then(() => {
this.state.loading = false
})
}
}

26
marko/page/logs-content/components/add-post-modal/index.marko

@ -0,0 +1,26 @@
<modal class="modal color-text nolabel" key="modal" enabled=(input.enabled) closable on-close("close") on-open("open") >
<h1>Add Post</h1>
<p key="error" class="color-error">${state.error}</p>
<label>Timestamp</label>
<input key="time" placeholder="Title" class="big" on-change("change", "time") value=state.values.time />
<label>Kind</label>
<select key="kind" class="big" placeholder="Kind" on-change("change", "kind") value=state.values.kind>
<option value="text" selected=(state.values.kind === "text")>Text (text, /npc)</option>
<option value="action" selected=(state.values.kind === "action")>Action (/me, /npca)</option>
<option value="scene" selected=(state.values.kind === "scene")>Scene (/scene)</option>
<option value="annotation.info" selected=(state.values.kind === "annotation.info")>Annotation - Info</option>
<option value="annotation.warning" selected=(state.values.kind === "annotation.warning")>Annotation - Warning</option>
<option value="annotation.error" selected=(state.values.kind === "annotation.error")>Annotation - Error</option>
</select>
<label>Nick</label>
<input key="nick" placeholder="IRC_Nick (You can use non-IRC letters here, like ', but I recommend you don't so the character is found)" class="big" on-change("change", "nick") value=state.values.nick />
<label>Text</label>
<textarea key="text" placeholder="Text" class="tall" on-change("change", "text") value=state.values.text />
<button disabled=state.loading on-click("save")>Add Post</button>
</modal>

5
marko/page/logs-content/components/logs-content-menu/component.js

@ -0,0 +1,5 @@
module.exports = class {
select(value) {
this.emit("select", value)
}
}

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

@ -1,5 +1,9 @@
<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-gap />
<menu-header>Links</menu-header>
<menu-link href=("/logs/?channels="+input.log.channel.name) icon="#">${input.log.channel.name}</menu-link> <menu-link href=("/logs/?channels="+input.log.channel.name) icon="#">${input.log.channel.name}</menu-link>
<menu-link if(input.log.channel.eventName) href=("/logs/?channels="+input.log.channel.eventName) icon="E">${input.log.channel.eventName}</menu-link> <menu-link if(input.log.channel.eventName) href=("/logs/?channels="+input.log.channel.eventName) icon="E">${input.log.channel.eventName}</menu-link>
<for(character in input.log.characters)> <for(character in input.log.characters)>

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

@ -5,10 +5,19 @@ const {postApi} = require("../../../../../rpdata/api/Post")
module.exports = class { module.exports = class {
onCreate(input) { onCreate(input) {
this.state = { this.state = {
log: input.log
log: input.log,
modal: null,
} }
} }
open(modal) {
this.state.modal = modal
}
close() {
this.state.modal = null
}
/** /**
* Patch the posts * Patch the posts
* *
@ -70,8 +79,13 @@ module.exports = class {
}) })
} }
postEdited(post) {
this.patch([post])
postEdited(patch) {
this.patch([patch])
}
postAdded(post) {
this.state.log.posts = this.state.log.posts.concat([post])
this.state.log = Object.assign({}, this.state.log)
} }
get title() { get title() {

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

@ -1,4 +1,4 @@
<logs-content-menu user=input.user log=state.log />
<logs-content-menu user=input.user log=state.log on-select("open") />
<main> <main>
<div class="logs-content"> <div class="logs-content">
<h1 class="color-primary">${component.title}</h1> <h1 class="color-primary">${component.title}</h1>
@ -12,4 +12,6 @@
last=(post.position === state.log.posts.length) last=(post.position === state.log.posts.length)
/> />
</div> </div>
<add-post-modal enabled=(state.modal === "add") logId=state.log.id on-close("close") on-added("postAdded") />
</main> </main>

32
rpdata/api/Post.js

@ -24,6 +24,30 @@ class Post {
} }
class PostAPI { class PostAPI {
/**
* Call `addPost(input)` mutation, returns the id and edited fields of the post
*
* @param {{logId:string, time:Date, kind:string, nick:string, text:string}} input
* @returns {Promise<{id:string, time:Date, kind:string, nick:string, text:string}>}
*/
add(input) {
return query(`
mutation AddPost($input: PostAddInput!) {
addPost(input: $input) {
id
position
time
kind
nick
text
}
}
`, {input}, {permissions: ["post.add"]}).then(({addPost}) => {
return new Post(addPost.id, addPost.position, addPost.time, addPost.kind, addPost.nick, addPost.text)
})
}
/** /**
* Call `movePost(input)` mutation, returns the id and position of all affected posts. * Call `movePost(input)` mutation, returns the id and position of all affected posts.
* *
@ -51,7 +75,7 @@ class PostAPI {
*/ */
edit(input) { edit(input) {
return query(` return query(`
mutation RemovePost($input: PostEditInput!) {
mutation EditPost($input: PostEditInput!) {
editPost(input: $input) { editPost(input: $input) {
id id
time time
@ -61,7 +85,11 @@ class PostAPI {
} }
} }
`, {input}, {permissions: ["post.edit"]}).then(({editPost}) => { `, {input}, {permissions: ["post.edit"]}).then(({editPost}) => {
return editPost
if (editPost.time != null) {
editPost.time = new Date(editPost.time)
}
return editPost
}) })
} }

Loading…
Cancel
Save