From ef0deb20aa741c0350683d6786b2d9feec91f8c1 Mon Sep 17 00:00:00 2001
From: Stefan Zermatten <stefanzermatten@gmail.com>
Date: Thu, 7 Sep 2017 14:36:45 +0200
Subject: [PATCH] Swapped dropdown box for full character list

---
 .../applyBuffDialog/applyBuffDialog.html      | 42 +++++----------
 .../buffs/applyBuffDialog/applyBuffDialog.js  | 11 +---
 .../characterPicker/characterPicker.css       | 17 ++++++
 .../characterPicker/characterPicker.html      | 34 ++++++++++++
 .../characterPicker/characterPicker.js        | 53 +++++++++++++++++++
 5 files changed, 118 insertions(+), 39 deletions(-)
 create mode 100644 rpg-docs/client/views/characterList/characterPicker/characterPicker.css
 create mode 100644 rpg-docs/client/views/characterList/characterPicker/characterPicker.html
 create mode 100644 rpg-docs/client/views/characterList/characterPicker/characterPicker.js

diff --git a/rpg-docs/client/views/character/buffs/applyBuffDialog/applyBuffDialog.html b/rpg-docs/client/views/character/buffs/applyBuffDialog/applyBuffDialog.html
index 1cfc4320..12634ba8 100644
--- a/rpg-docs/client/views/character/buffs/applyBuffDialog/applyBuffDialog.html
+++ b/rpg-docs/client/views/character/buffs/applyBuffDialog/applyBuffDialog.html
@@ -1,36 +1,20 @@
 <!-- data is the CustomBuff -->
 <template name="applyBuffDialog">
-	<div class="fit layout vertical">
-		<div class="flex">
-			<app-header fixed effects="waterfall">
-				<app-toolbar>
-					Apply Buff
-				</app-toolbar>
-			</app-header>
-			<div class="form flex">
-				<paper-dropdown-menu class=flex label="Target" style="flex-basis: 150px; max-width: 200px;">
-					<dicecloud-selector selected="default" class="dropdown-content target-dropdown">
-						{{#if canApplyToSelf}}
-							<paper-item name="default" style="width: 150px;">
-								Self
-							</paper-item>
-						{{else}}
-							<paper-item name="default" style="width: 150px;">
-								Choose a character
-							</paper-item>
-						{{/if}}
-						{{#each character in writableCharacters}}
-							<paper-item name="{{character._id}}">
-								{{character.name}}
-							</paper-item>
-						{{/each}}
-					</dicecloud-selector>
-				</paper-dropdown-menu>
-
+	<div class="fit layout vertical applyBuffDialog">
+		<app-header fixed effects="waterfall">
+			<app-toolbar>
+				Apply Buff
+			</app-toolbar>
+		</app-header>
+		<div class="flex layout horizontal" style="height:100%">
+			<div class="flex" style="margin-right: 16px; height: 100%; max-width: 240px; overflow-y: auto;">
+				{{> characterPicker selfId=buff.charId includeSelf=canApplyToSelf writableOnly=true}}
+			</div>
+			<div class="flex buff-description" style="height: 100%; overflow-y: auto">
 				<hr style="margin: 16px 0 16px 0;">
 				{{#if buff.description}}
-					<div>{{#markdown}}{{evaluateString buff.charId buff.description}}{{/markdown}}</div>
-					<hr style="margin: 16px 0 16px 0;">
+				<div>{{#markdown}}{{evaluateString buff.charId buff.description}}{{/markdown}}</div>
+				<hr style="margin: 16px 0 16px 0;">
 				{{/if}}
 				{{> effectsViewList charId=buff.charId parentId=buff._id}}
 				{{> proficiencyViewList charId=buff.charId parentId=buff._id}}
diff --git a/rpg-docs/client/views/character/buffs/applyBuffDialog/applyBuffDialog.js b/rpg-docs/client/views/character/buffs/applyBuffDialog/applyBuffDialog.js
index c5f9bb8c..afed51f6 100644
--- a/rpg-docs/client/views/character/buffs/applyBuffDialog/applyBuffDialog.js
+++ b/rpg-docs/client/views/character/buffs/applyBuffDialog/applyBuffDialog.js
@@ -9,19 +9,10 @@ Template.applyBuffDialog.helpers({
 	canApplyToSelf: function() {
 		return this.buff.target !== "others"; //i.e. it is "self" or "both"
 	},
-	writableCharacters: function() {
-		var returnArray = [];
-		Characters.find({_id: {$ne: this.buff.charId}}).forEach(function(char){ //we look through all characters we have access to
-			if (canEditCharacter(char._id)) {
-				returnArray.push(char);
-			}
-		});
-		return returnArray;
-	},
 });
 
 Template.applyBuffDialog.events({
-	"iron-select .target-dropdown": function(event){
+	"iron-select .characterPicker": function(event){
 		var detail = event.originalEvent.detail;
 		var value = detail.item.getAttribute("name");
 		Template.instance().selectedTarget.set(value);
diff --git a/rpg-docs/client/views/characterList/characterPicker/characterPicker.css b/rpg-docs/client/views/characterList/characterPicker/characterPicker.css
new file mode 100644
index 00000000..7062c38f
--- /dev/null
+++ b/rpg-docs/client/views/characterList/characterPicker/characterPicker.css
@@ -0,0 +1,17 @@
+.characterPicker .character-name {
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.characterPicker .partyHead {
+    font-weight: 500;
+}
+
+.characterPicker .partyHead iron-icon {
+	transition: transform 0.3s ease;
+}
+
+.characterPicker .partyHead iron-icon.open {
+	transform: rotate(90deg);
+}
diff --git a/rpg-docs/client/views/characterList/characterPicker/characterPicker.html b/rpg-docs/client/views/characterList/characterPicker/characterPicker.html
new file mode 100644
index 00000000..2f43a12a
--- /dev/null
+++ b/rpg-docs/client/views/characterList/characterPicker/characterPicker.html
@@ -0,0 +1,34 @@
+<template name="characterPicker">
+	<dicecloud-selector class="characterPicker" selected={{selected}} selectable="paper-item" style="height: 100%; overflow-y: auto;">
+		{{#if selfId}}{{#if includeSelf}}
+			<paper-item class="short clickable" name={{selfId}}>
+				<div class="character-name">
+					Self
+				</div>
+			</paper-item>
+		{{/if}}{{/if}}
+		{{#each charactersWithNoParty}}
+			<paper-item class="short clickable" name={{_id}}>
+				<div class="character-name">
+					{{name}}
+				</div>
+			</paper-item>
+		{{/each}}
+		{{#each parties}}
+			<div class="paper-font-subhead partyHead clickable">
+				<iron-icon icon="chevron-right" class="{{#if isOpen _id}}open{{/if}}">
+				</iron-icon>
+				{{name}}
+			</div>
+			<iron-collapse opened={{isOpen _id}}>
+				{{#each charactersInParty}}
+					<paper-item class="short clickable" name={{_id}}>
+						<div class="character-name">
+							{{name}}
+						</div>
+					</paper-item>
+				{{/each}}
+			</iron-collapse>
+		{{/each}}
+	</dicecloud-selector>
+</template>
diff --git a/rpg-docs/client/views/characterList/characterPicker/characterPicker.js b/rpg-docs/client/views/characterList/characterPicker/characterPicker.js
new file mode 100644
index 00000000..d8c094a5
--- /dev/null
+++ b/rpg-docs/client/views/characterList/characterPicker/characterPicker.js
@@ -0,0 +1,53 @@
+Template.characterPicker.onCreated(function() {
+	this.subscribe("characterList");
+	this.openedParties = new ReactiveVar(new Set());
+});
+
+Template.characterPicker.helpers({
+	parties() {
+		return Parties.find(
+			{owner: Meteor.userId()},
+			{sort: {name: 1}},
+		);
+	},
+	charactersInParty() {
+		var userId = Meteor.userId();
+		var selector = {
+			_id: {$in: this.characters, $ne: this.selfId},
+			$or: [{readers: userId}, {writers: userId}, {owner: userId}],
+		};
+		if (this.writableOnly) {
+			selector.$or = [{writers: userId}, {owner: userId}];
+		}
+		return Characters.find(selector,{sort: {name: 1}});
+	},
+	charactersWithNoParty() {
+		var userId = Meteor.userId();
+		var charArrays = Parties.find({owner: userId}).map(p => p.characters);
+		var partyChars = _.uniq(_.flatten(charArrays));
+		var selector = {
+			_id: {$nin: partyChars, $ne: this.selfId},
+			$or: [{readers: userId}, {writers: userId}, {owner: userId}],
+		};
+		if (this.writableOnly) {
+			selector.$or = [{writers: userId}, {owner: userId}];
+		}
+		return Characters.find(selector, {sort: {name: 1}});
+	},
+	isOpen(id) {
+		var openedParties = Template.instance().openedParties.get();
+		return openedParties.has(id);
+	},
+});
+
+Template.characterPicker.events({
+	"click .partyHead": function(event, instance){
+		var openedParties = instance.openedParties.get();
+		if (openedParties.has(this._id)){
+			openedParties.delete(this._id);
+		} else {
+			openedParties.add(this._id);
+		}
+		instance.openedParties.set(openedParties);
+	},
+});