data: Added character nicks modal

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

@@ -1,5 +1,9 @@
 <compact-list>
   <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>

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
+    })
+  }
+}

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>

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;
+  }
+}

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

@@ -5,8 +5,10 @@
   <compact-list-property short label="Author" value=input.data.author />
   <compact-list-options long>
     <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>
   </compact-list-options>
   <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") />
+  <character-nicks-modal enabled=(state.modal === "nicks") character=input.data on-nicks("emit", "nicks") on-close("close") />
 </if>

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

@@ -33,4 +33,16 @@ module.exports = class {
   characterAdded(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
+  }
 }

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") />
 <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> 
 <add-character-modal enabled=(state.modal === "character.add") user=input.user on-added("characterAdded") on-close("close") />

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
    *