Browse Source

logs-content: Added move up/down mutations

1.0
Gisle Aune 6 years ago
parent
commit
6cb1043004
  1. 42
      marko/page/logs-content/components/page/component.js
  2. 2
      marko/page/logs-content/components/page/index.marko
  3. 13
      marko/page/logs-content/components/post/component.js
  4. 6
      marko/page/logs-content/components/post/index.marko
  5. 24
      marko/page/logs-content/components/post/style.less
  6. 23
      rpdata/api/Post.js

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

@ -1,5 +1,7 @@
const moment = require("moment") const moment = require("moment")
const {postApi} = require("../../../../../rpdata/api/Post")
module.exports = class { module.exports = class {
onCreate(input) { onCreate(input) {
this.state = { this.state = {
@ -7,6 +9,46 @@ module.exports = class {
} }
} }
/**
* Patch the posts
*
* @param {{id:string, [x:string]: any}[]} patches
*/
patch(patches) {
const posts = this.state.log.posts.slice()
for (const patch of patches) {
const index = posts.findIndex(p => p.id === patch.id)
if (index == -1) {
console.warn("Post not found for patch:", patch)
// TODO: Force full refresh
continue
}
posts[index] = Object.assign(Object.assign({}, posts[index]), patch)
}
// Sort posts and look for continuity issues (duplicate or skipped positions)
posts.sort((a, b) => a.position - b.position)
for (let i = 1; i < posts.length; ++i) {
if (posts[i].position !== posts[i - 1].position + 1) {
console.warn("Discontinuity detected!")
// TODO: Force full refresh
}
}
this.state.log.posts = posts
this.state.log = Object.assign({}, this.state.log)
}
movePost(post, toPosition) {
postApi.move({id: post.id, toPosition}).then(patches => {
this.patch(patches)
}).catch(err => {
console.warn(err)
})
}
get title() { get title() {
if (this.state.log.title) { if (this.state.log.title) {
return this.state.log.title return this.state.log.title

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

@ -2,6 +2,6 @@
<main> <main>
<div class="logs-content"> <div class="logs-content">
<h1 class="color-primary">${component.title}</h1> <h1 class="color-primary">${component.title}</h1>
<post for(post in state.log.posts) post=post characters=state.log.characters />
<post for(post in state.log.posts) on-move("movePost", post) post=post characters=state.log.characters last=(post.position === state.log.posts.length) />
</div> </div>
</main> </main>

13
marko/page/logs-content/components/post/component.js

@ -4,11 +4,24 @@ module.exports = class {
shortName: "", shortName: "",
name: "", name: "",
text: "", text: "",
modal: null,
} }
this.updatePost(input) this.updatePost(input)
} }
open(modal) {
this.state.modal == modal
}
close() {
this.state.modal = null
}
move(toPosition) {
this.emit("move", toPosition)
}
onInput(input) { onInput(input) {
if (this.state == null) { if (this.state == null) {
return return

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

@ -1,5 +1,11 @@
<div class=["post", component.kindClass("post-type")]> <div class=["post", component.kindClass("post-type")]>
<div class="post-meta-row"> <div class="post-meta-row">
<div class="options color-menu">
<a if(input.post.position != 1) on-click("move", input.post.position - 1)>Up</a>
<a if(!input.last) on-click("move", input.post.position + 1)>Down</a>
<!--<a on-click("open", "edit") >Edit</a>-->
<!--<a on-click("open", "remove") >Remove</a>-->
</div>
<post-meta kind="timestamp" value=input.post.time /> <post-meta kind="timestamp" value=input.post.time />
<post-meta kind="nick" value=input.post.nick /> <post-meta kind="nick" value=input.post.nick />
</div> </div>

24
marko/page/logs-content/components/post/style.less

@ -1,11 +1,31 @@
div.post { div.post {
margin-bottom: 1ch; margin-bottom: 1ch;
.post-meta-row {
div.post-meta-row {
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
div.options {
position: absolute;
text-align: right;
width: calc(100% - 35.5ch);
max-width: 75ch;
a {
display: inline-block;
padding: 0 0.5ch;
opacity: 0.5;
cursor: pointer;
user-select: none;
}
a:hover {
opacity: 1;
}
}
div.post-body { div.post-body {
font-size: 1.25em; font-size: 1.25em;

23
rpdata/api/Post.js

@ -23,4 +23,25 @@ class Post {
} }
} }
module.exports = {Post}
class PostAPI {
/**
* Call `movePost(input)` mutation, returns the id and position of all affected posts.
*
* @param {{id:string, toPosition: number}} input
* @returns {Promise<{id:string, position:number}[]>}
*/
move(input) {
return query(`
mutation MovePost($input: PostMoveInput!) {
movePost(input: $input) {
id
position
}
}
`, {input}, {permissions: ["post.move"]}).then(({movePost}) => {
return movePost
})
}
}
module.exports = {Post, postApi: new PostAPI}
Loading…
Cancel
Save