Browse Source

data: Added character nicks modal

1.0
Gisle Aune 6 years ago
parent
commit
843dc42272
  1. 6
      marko/page/data/components/character-list/index.marko
  2. 66
      marko/page/data/components/character-nicks-modal/component.js
  3. 18
      marko/page/data/components/character-nicks-modal/index.marko
  4. 34
      marko/page/data/components/character-nicks-modal/style.less
  5. 2
      marko/page/data/components/character/index.marko
  6. 12
      marko/page/data/components/characters-page/component.js
  7. 2
      marko/page/data/components/characters-page/index.marko
  8. 38
      rpdata/api/Character.js

6
marko/page/data/components/character-list/index.marko

@ -1,5 +1,9 @@
<compact-list> <compact-list>
<compact-list-item for(character in input.characters) key=character.id id=character.id> <compact-list-item for(character in input.characters) key=character.id id=character.id>
<character data=character on-removed("emit", "removed", character) on-edited("emit", "edited", character) />
<character data=character
on-removed("emit", "removed", character)
on-edited("emit", "edited", character)
on-nicks("emit", "nicks", character)
/>
</compact-list-item> </compact-list-item>
</compact-list> </compact-list>

66
marko/page/data/components/character-nicks-modal/component.js

@ -0,0 +1,66 @@
const moment = require("moment")
const {charactersApi} = require("../../../../../rpdata/api/Character")
module.exports = class {
onCreate(input) {
this.state = {
error: null,
loading: false,
values: {
newNick: "",
}
}
}
change(key, ev) {
this.state.values[key] = ev.target.value
}
open() {
}
close() {
this.emit("close")
}
addNick() {
if (this.state.loading) {
return
}
const input = {id: this.input.character.id, nick: this.state.values.newNick}
this.state.loading = true
charactersApi.addNick(input).then((res) => {
this.emit("nicks", res.nicks)
this.state.values = {newNick: ""}
}).catch(errs => {
console.warn("Failed to add nick:", errs)
this.state.error = "Failed to add nick: " + errs[0].message
}).then(() => {
this.state.loading = false
})
}
removeNick(nick) {
if (this.state.loading) {
return
}
const input = {id: this.input.character.id, nick}
this.state.loading = true
charactersApi.removeNick(input).then((res) => {
this.emit("nicks", res.nicks)
}).catch(errs => {
console.warn("Failed to remove nick:", errs)
this.state.error = "Failed to remove nick: " + errs[0].message
}).then(() => {
this.state.loading = false
})
}
}

18
marko/page/data/components/character-nicks-modal/index.marko

@ -0,0 +1,18 @@
<modal class="modal color-text nolabel" key="modal" enabled=(input.enabled) closable on-close("close") on-open("open") >
<h1>Manage Nicks</h1>
<p class="color-error">${state.error}</p>
<label>Add Nick</label>
<div class="add-nick-row">
<input key="newNick" placeholder="New_Nick" class="big" on-change("change", "newNick") value=state.values.newNick />
<button disabled=state.loading on-click("addNick")>Add</button>
</div>
<label>Current Nicks</label>
<div for(nick in input.character.nicks) class="existing-nick-row" >
<div class="content color-text">${nick}</div>
<button disabled=state.loading on-click("removeNick", nick)>Remove</button>
</div>
</modal>

34
marko/page/data/components/character-nicks-modal/style.less

@ -0,0 +1,34 @@
div.add-nick-row {
vertical-align: middle !important;
margin-top: -1em;
input {
vertical-align: middle !important;
display: inline-block !important;
width: 78% !important;
margin: 0 !important;
}
button {
vertical-align: middle !important;
display: inline-block !important;
width: 20% !important;
padding: 0.5em 0 !important;
}
}
div.existing-nick-row {
padding: 0.25em;
border-bottom: 1px solid rgba(0, 220, 255, 0.125);
div.content {
width: 80%;
display: inline-block;
}
button {
width: 20% !important;
display: inline-block !important;
margin: 0 !important;
}
}

2
marko/page/data/components/character/index.marko

@ -5,8 +5,10 @@
<compact-list-property short label="Author" value=input.data.author /> <compact-list-property short label="Author" value=input.data.author />
<compact-list-options long> <compact-list-options long>
<a key="edit" on-click("open", "edit", input.data)>Edit</a> <a key="edit" on-click("open", "edit", input.data)>Edit</a>
<a key="nicks" on-click("open", "nicks", input.data)>Nicks</a>
<a key="remove" on-click("open", "remove", input.data)>Remove</a> <a key="remove" on-click("open", "remove", input.data)>Remove</a>
</compact-list-options> </compact-list-options>
<remove-character-modal enabled=(state.modal === "remove") character=input.data on-removed("emit", "removed") on-close("close") /> <remove-character-modal enabled=(state.modal === "remove") character=input.data on-removed("emit", "removed") on-close("close") />
<edit-character-modal enabled=(state.modal === "edit") character=input.data on-edited("emit", "edited") on-close("close") /> <edit-character-modal enabled=(state.modal === "edit") character=input.data on-edited("emit", "edited") on-close("close") />
<character-nicks-modal enabled=(state.modal === "nicks") character=input.data on-nicks("emit", "nicks") on-close("close") />
</if> </if>

12
marko/page/data/components/characters-page/component.js

@ -33,4 +33,16 @@ module.exports = class {
characterAdded(character) { characterAdded(character) {
this.state.characters = this.state.characters.concat(character) this.state.characters = this.state.characters.concat(character)
} }
characterNicksChanged(character, nicks) {
const characters = this.state.characters.slice()
const index = characters.findIndex(c => c.id === character.id)
if (index === -1) {
return
}
characters[index] = Object.assign(characters[index], {nicks: nicks.slice(), nick: (nicks[0] || "")})
this.state.characters = characters
}
} }

2
marko/page/data/components/characters-page/index.marko

@ -1,5 +1,5 @@
<data-menu categories=input.categories selected=(input.selected || {}) user=input.user on-open("open") /> <data-menu categories=input.categories selected=(input.selected || {}) user=input.user on-open("open") />
<main> <main>
<character-list characters=state.characters on-removed("characterRemoved") on-edited("characterEdited") />
<character-list characters=state.characters on-removed("characterRemoved") on-edited("characterEdited") on-nicks("characterNicksChanged") />
</main> </main>
<add-character-modal enabled=(state.modal === "character.add") user=input.user on-added("characterAdded") on-close("close") /> <add-character-modal enabled=(state.modal === "character.add") user=input.user on-added("characterAdded") on-close("close") />

38
rpdata/api/Character.js

@ -102,6 +102,44 @@ class ChracterAPI {
}) })
} }
/**
* Call `addCharacterNick(input)` mutation, returns new nick list.
*
* @param {{id:string, nick:string}} input
* @returns {Promise<{id:string, nicks:string[]}>}
*/
addNick(input) {
return query(`
mutation AddCharacterNick($input: CharacterNickInput!) {
addCharacterNick(input: $input) {
id
nicks
}
}
`, {input}, {permissions: ["member", "character.edit"]}).then(({addCharacterNick}) => {
return addCharacterNick
})
}
/**
* Call `removeCharacterNick(input)` mutation, returns new nick list.
*
* @param {{id:string, nick:string}} input
* @returns {Promise<{id:string, nicks:string[]}>}
*/
removeNick(input) {
return query(`
mutation RemoveCharacterNick($input: CharacterNickInput!) {
removeCharacterNick(input: $input) {
id
nicks
}
}
`, {input}, {permissions: ["member", "character.edit"]}).then(({removeCharacterNick}) => {
return removeCharacterNick
})
}
/** /**
* Call `removeCharacter(input)` mutation * Call `removeCharacter(input)` mutation
* *

Loading…
Cancel
Save