From 7fe2292c2a53b147e57f1cc21eff0e2f1aaa7ace Mon Sep 17 00:00:00 2001
From: Stefan Zermatten <stefanzermatten@gmail.com>
Date: Fri, 13 Mar 2020 14:56:43 +0200
Subject: [PATCH] Added persona page

---
 .../ui/creature/character/CharacterSheet.vue  | 35 +++++++---
 .../characterSheetTabs/PersonaTab.vue         | 65 +++++++++++++++++++
 .../components/persona/NoteCard.vue           | 34 ++++++++++
 .../viewers/shared/PropertyDescription.vue    |  6 +-
 4 files changed, 127 insertions(+), 13 deletions(-)
 create mode 100644 app/imports/ui/creature/character/characterSheetTabs/PersonaTab.vue
 create mode 100644 app/imports/ui/properties/components/persona/NoteCard.vue

diff --git a/app/imports/ui/creature/character/CharacterSheet.vue b/app/imports/ui/creature/character/CharacterSheet.vue
index 01de2f4b..826d322b 100644
--- a/app/imports/ui/creature/character/CharacterSheet.vue
+++ b/app/imports/ui/creature/character/CharacterSheet.vue
@@ -1,14 +1,17 @@
 <template>
 	<div class="character-sheet layout column">
-    <v-toolbar app :color="character.color || 'secondary'" :dark="isDarkColor(character.color || theme.primary)">
+    <v-toolbar
+			app clipped-left
+			:color="character.color || 'secondary'"
+			:dark="isDarkColor(character.color || theme.primary)"
+		>
       <v-btn v-if="showMenuButton" flat icon @click="toggleDrawer">
         <v-icon>menu</v-icon>
       </v-btn>
+			<div class="flex">{{character.name}}</div>
 			<v-btn flat icon @click="recompute(character._id)">
         <v-icon>refresh</v-icon>
       </v-btn>
-			<span>{{character.name}}</span>
-			<v-spacer/>
 			<v-menu bottom left transition="slide-y-transition" data-id="creature-menu">
 	      <template v-slot:activator="{ on }">
 	 				<v-btn icon v-on="on">
@@ -34,10 +37,11 @@
 	 			</v-list>
  		 	</v-menu>
 			<v-tabs
-        slot="extension"
-        v-model="tab"
-        centered
-      >
+				v-model="tab"
+				slot="extension"
+				centered
+				grow
+			>
 				<v-tab>
 					Stats
 				</v-tab>
@@ -51,9 +55,12 @@
 					Spells
 				</v-tab>
 				<v-tab>
-          Tree
-        </v-tab>
-      </v-tabs>
+					Persona
+				</v-tab>
+				<v-tab>
+					Tree
+				</v-tab>
+			</v-tabs>
     </v-toolbar>
     <v-content class="flex" v-if="$subReady.singleCharacter">
 			<v-tabs-items v-model="tab">
@@ -69,6 +76,9 @@
 				<v-tab-item>
 					<spells-tab :creature-id="creatureId"/>
 				</v-tab-item>
+				<v-tab-item>
+					<persona-tab :creature-id="creatureId"/>
+				</v-tab-item>
 				<v-tab-item>
 					<tree-tab :creature-id="creatureId"/>
 				</v-tab-item>
@@ -90,6 +100,7 @@
 	import FeaturesTab from '/imports/ui/creature/character/characterSheetTabs/FeaturesTab.vue';
 	import InventoryTab from '/imports/ui/creature/character/characterSheetTabs/InventoryTab.vue';
 	import SpellsTab from '/imports/ui/creature/character/characterSheetTabs/SpellsTab.vue';
+	import PersonaTab from '/imports/ui/creature/character/characterSheetTabs/PersonaTab.vue';
 	import TreeTab from '/imports/ui/creature/character/characterSheetTabs/TreeTab.vue';
 	import { recomputeCreature } from '/imports/api/creature/creatureComputation.js';
 
@@ -103,6 +114,7 @@
 			FeaturesTab,
 			InventoryTab,
 			SpellsTab,
+			PersonaTab,
 			TreeTab,
 		},
 		data(){return {
@@ -177,6 +189,9 @@
 	.v-tabs__bar {
 		background: none !important;
 	}
+	.v-tabs__container--grow .v-tabs__div {
+		max-width: 180px !important;
+	}
 	.v-window-item, .v-window, .v-window__container {
 		height: 100%;
 	}
diff --git a/app/imports/ui/creature/character/characterSheetTabs/PersonaTab.vue b/app/imports/ui/creature/character/characterSheetTabs/PersonaTab.vue
new file mode 100644
index 00000000..e91a7cfa
--- /dev/null
+++ b/app/imports/ui/creature/character/characterSheetTabs/PersonaTab.vue
@@ -0,0 +1,65 @@
+<template lang="html">
+	<div class="inventory">
+		<column-layout>
+			<div>
+				<v-card hover @click="showCharacterForm" data-id="creature-summary">
+					<v-card-title class="title">
+						{{creature.name}}
+					</v-card-title>
+					<v-card-text>
+						{{creature.alignment}}<br/>
+						{{creature.gender}}
+					</v-card-text>
+				</v-card>
+			</div>
+			<div v-for="note in notes">
+				<note-card :model="note" :key="note._id"/>
+			</div>
+		</column-layout>
+	</div>
+</template>
+
+<script>
+import Creatures from '/imports/api/creature/Creatures.js';
+import CreatureProperties from '/imports/api/creature/CreatureProperties.js';
+import ColumnLayout from '/imports/ui/components/ColumnLayout.vue';
+import NoteCard from '/imports/ui/properties/components/persona/NoteCard.vue';
+
+export default {
+	props: {
+		creatureId: String,
+	},
+	components: {
+		ColumnLayout,
+		NoteCard,
+	},
+	meteor: {
+		notes(){
+			return CreatureProperties.find({
+				'ancestors.id': this.creatureId,
+				type: 'note',
+				removed: {$ne: true},
+			}, {
+				sort: {order: 1},
+			});
+		},
+		creature(){
+			return Creatures.findOne(this.creatureId);
+		}
+	},
+	methods: {
+		showCharacterForm(){
+			this.$store.commit('pushDialogStack', {
+				component: 'creature-form-dialog',
+				elementId: 'creature-summary',
+				data: {
+					_id: this.creatureId,
+				},
+			});
+		},
+	},
+};
+</script>
+
+<style lang="css" scoped>
+</style>
diff --git a/app/imports/ui/properties/components/persona/NoteCard.vue b/app/imports/ui/properties/components/persona/NoteCard.vue
new file mode 100644
index 00000000..46ea35fb
--- /dev/null
+++ b/app/imports/ui/properties/components/persona/NoteCard.vue
@@ -0,0 +1,34 @@
+<template lang="html">
+	<v-card :color="model.color" :data-id="model._id" hover @click="clickProperty(model._id)">
+		<v-card-title class="title">
+			{{model.name}}
+		</v-card-title>
+		<v-card-text>
+			<property-description :value="model.description"/>
+		</v-card-text>
+	</v-card>
+</template>
+
+<script>
+import PropertyDescription from '/imports/ui/properties/viewers/shared/PropertyDescription.vue';
+export default {
+	components: {
+		PropertyDescription,
+	},
+	props: {
+		model: Object,
+	},
+	methods: {
+		clickProperty(_id){
+			this.$store.commit('pushDialogStack', {
+				component: 'creature-property-dialog',
+				elementId: `${_id}`,
+				data: {_id},
+			});
+		},
+	},
+};
+</script>
+
+<style lang="css" scoped>
+</style>
diff --git a/app/imports/ui/properties/viewers/shared/PropertyDescription.vue b/app/imports/ui/properties/viewers/shared/PropertyDescription.vue
index 77f15ba6..599998c6 100644
--- a/app/imports/ui/properties/viewers/shared/PropertyDescription.vue
+++ b/app/imports/ui/properties/viewers/shared/PropertyDescription.vue
@@ -1,7 +1,7 @@
 <template lang="html">
-	<p v-if="value" class="mt-3">
-		<markdown-text :markdown="value"/>
-	</p>
+	<div>
+		<markdown-text v-if="value" :markdown="value"/>
+	</div>
 </template>
 
 <script>