Browse Source

logs-content: Added remove modal, fixed move up/down mutations

1.0
Gisle Aune 6 years ago
parent
commit
ba2b827119
  1. 11
      marko/components/modal/style.less
  2. 23
      marko/page/logs-content/components/page/component.js
  3. 9
      marko/page/logs-content/components/page/index.marko
  4. 8
      marko/page/logs-content/components/post/component.js
  5. 9
      marko/page/logs-content/components/post/index.marko
  6. 35
      marko/page/logs-content/components/remove-post-modal/component.js
  7. 16
      marko/page/logs-content/components/remove-post-modal/index.marko
  8. 18
      rpdata/api/Post.js

11
marko/components/modal/style.less

@ -113,6 +113,17 @@ div.overlay {
opacity: 1; opacity: 1;
cursor: pointer; cursor: pointer;
} }
div.summary {
text-align: left;
margin: auto;
p {
margin: 0;
text-indent: -2ch;
margin-left: 2ch;
}
}
} }
div.modal.nolabel { div.modal.nolabel {
input, textarea { input, textarea {

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

@ -41,7 +41,11 @@ module.exports = class {
this.state.log = Object.assign({}, this.state.log) this.state.log = Object.assign({}, this.state.log)
} }
movePost(post, toPosition) {
movePost(post, toPosition, relative) {
if (relative) {
toPosition = post.position + toPosition
}
postApi.move({id: post.id, toPosition}).then(patches => { postApi.move({id: post.id, toPosition}).then(patches => {
this.patch(patches) this.patch(patches)
}).catch(err => { }).catch(err => {
@ -49,6 +53,23 @@ module.exports = class {
}) })
} }
removePost(post) {
postApi.remove({id: post.id}).then(() => {
this.state.log.posts = this.state.log.posts.filter(p => p.id !== post.id)
for (const p of this.state.log.posts) {
if (p.position > post.position) {
p.position--
}
}
this.state.log = Object.assign({}, this.state.log)
}).catch(errs => {
console.warn("Failed to delete:", errs)
this.state.error = "Failed to delete: " + (errs.message || errs[0].message)
})
}
get title() { get title() {
if (this.state.log.title) { if (this.state.log.title) {
return this.state.log.title return this.state.log.title

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

@ -2,6 +2,13 @@
<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) on-move("movePost", post) post=post characters=state.log.characters last=(post.position === state.log.posts.length) />
<post for(post in state.log.posts)
key=post.id
on-move("movePost", post)
on-remove("removePost", post)
post=post
characters=state.log.characters
last=(post.position === state.log.posts.length)
/>
</div> </div>
</main> </main>

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

@ -5,13 +5,14 @@ module.exports = class {
name: "", name: "",
text: "", text: "",
modal: null, modal: null,
removed: false,
} }
this.updatePost(input) this.updatePost(input)
} }
open(modal) { open(modal) {
this.state.modal == modal
this.state.modal = modal
} }
close() { close() {
@ -22,6 +23,11 @@ module.exports = class {
this.emit("move", toPosition) this.emit("move", toPosition)
} }
remove() {
this.state.removed = true
this.emit("remove")
}
onInput(input) { onInput(input) {
if (this.state == null) { if (this.state == null) {
return return

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

@ -1,10 +1,10 @@
<div class=["post", component.kindClass("post-type")]>
<div if(!state.removed) class=["post", component.kindClass("post-type")]>
<div class="post-meta-row"> <div class="post-meta-row">
<div class="options color-menu"> <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("move", -1, true)>Up</a>
<a on-click("move", +1, true)>Down</a>
<!--<a on-click("open", "edit") >Edit</a>--> <!--<a on-click("open", "edit") >Edit</a>-->
<!--<a on-click("open", "remove") >Remove</a>-->
<a on-click("open", "remove")>Remove</a>
</div> </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 />
@ -23,4 +23,5 @@
<div if(input.post.kind === "text") class="post-body color-text"> <div if(input.post.kind === "text") class="post-body color-text">
<markdown class="post-content post-text" source=state.text /> <markdown class="post-content post-text" source=state.text />
</div> </div>
<remove-post-modal enabled=(state.modal === "remove") post=input.post on-close("close") on-remove("remove") />
</div> </div>

35
marko/page/logs-content/components/remove-post-modal/component.js

@ -0,0 +1,35 @@
const moment = require("moment")
const {postApi} = require("../../../../../rpdata/api/Post")
module.exports = class {
onCreate(input) {
this.state = {
error: null,
clicked: false,
timestamp: moment(input.post.time).format("YYYY-MM-DD HH:mm:ss")
}
}
change(key, ev) {
this.state.values[key] = ev.target.value
}
open() {
}
close() {
this.emit("close")
}
doIt() {
if (this.state.clicked) {
return
}
this.state.clicked = true
this.emit("remove")
this.emit("close")
}
}

16
marko/page/logs-content/components/remove-post-modal/index.marko

@ -0,0 +1,16 @@
<modal class="modal color-text nolabel" key="modal" enabled=(input.enabled) closable on-close("close") on-open("open") >
<h1>Remove Post ${input.post.position}</h1>
<p class="color-error">${state.error}</p>
<p class="color-danger">Are you sure you got the right post?</p>
<div class="summary">
<p><b>Timestamp</b>: ${state.timestamp}</p>
<p><b>Kind</b>: ${input.post.kind}</p>
<p><b>Nick</b>: ${input.post.nick}</p>
<p><b>Text</b>: ${input.post.text}</p>
</div>
<button disabled=state.loading on-click("doIt")>Yes, erase history!</button>
</modal>

18
rpdata/api/Post.js

@ -42,6 +42,24 @@ class PostAPI {
return movePost return movePost
}) })
} }
/**
* Call `removePost(input)` mutation, returns the id of the affected post.
*
* @param {{id:string, toPosition: number}} input
* @returns {Promise<{id:string}>}
*/
remove(input) {
return query(`
mutation RemovePost($input: PostRemoveInput!) {
removePost(input: $input) {
id
}
}
`, {input}, {permissions: ["post.remove"]}).then(({removePost}) => {
return removePost
})
}
} }
module.exports = {Post, postApi: new PostAPI} module.exports = {Post, postApi: new PostAPI}
Loading…
Cancel
Save