DiceCloud/app/imports/ui/creature/character/CharacterSheet.vue

<template>
	<div class="character-sheet layout column">
    <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>
			<v-menu bottom left transition="slide-y-transition" data-id="creature-menu">
	      <template v-slot:activator="{ on }">
	 				<v-btn icon v-on="on">
	 					<v-icon>more_vert</v-icon>
	 				</v-btn>
	 			</template>
	 			<v-list>
	 				<v-list-tile @click="deleteCharacter">
	 					<v-list-tile-title>
	 						<v-icon>delete</v-icon> Delete
	 					</v-list-tile-title>
	 				</v-list-tile>
					<v-list-tile @click="showCharacterForm">
	 					<v-list-tile-title>
	 						<v-icon>create</v-icon> Edit details
	 					</v-list-tile-title>
	 				</v-list-tile>
					<v-list-tile @click="showShareDialog">
	 					<v-list-tile-title>
	 						<v-icon>share</v-icon> Sharing
	 					</v-list-tile-title>
	 				</v-list-tile>
	 			</v-list>
 		 	</v-menu>
			<v-tabs
				v-model="tab"
				slot="extension"
				centered
				grow
			>
				<v-tab>
					Stats
				</v-tab>
				<v-tab>
					Features
				</v-tab>
				<v-tab>
					Inventory
				</v-tab>
				<v-tab>
					Spells
				</v-tab>
				<v-tab>
					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">
				<v-tab-item>
					<stats-tab :creature-id="creatureId"/>
				</v-tab-item>
				<v-tab-item>
					<features-tab :creature-id="creatureId"/>
				</v-tab-item>
				<v-tab-item>
					<inventory-tab :creature-id="creatureId"/>
				</v-tab-item>
				<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>
    	</v-tabs-items>
    </v-content>
		<v-content v-else>
			<v-progress-circular indeterminate />
		</v-content>
  </div>
</template>

<script>
	import Creatures from '/imports/api/creature/Creatures.js';
	import removeCreature from '/imports/api/creature/removeCreature.js';
	import isDarkColor from '/imports/ui/utility/isDarkColor.js';
	import { mapMutations } from "vuex";
	import { theme } from '/imports/ui/theme.js';
	import StatsTab from '/imports/ui/creature/character/characterSheetTabs/StatsTab.vue';
	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/computation/creatureComputation.js';

	export default {
		props: {
			showMenuButton: Boolean,
			creatureId: String,
		},
		components: {
			StatsTab,
			FeaturesTab,
			InventoryTab,
			SpellsTab,
			PersonaTab,
			TreeTab,
		},
		data(){return {
			theme,
			tab: 0,
		}},
		methods: {
      ...mapMutations([
        "toggleDrawer",
      ]),
			recompute(charId){
				recomputeCreature.call({charId});
			},
			showCharacterForm(){
				this.$store.commit('pushDialogStack', {
					component: 'creature-form-dialog',
					elementId: 'creature-menu',
					data: {
						_id: this.creatureId,
					},
				});
			},
			showShareDialog(){
				this.$store.commit('pushDialogStack', {
					component: 'share-dialog',
					elementId: 'creature-menu',
					data: {
						docRef: {
							id: this.creatureId,
							collection: 'creatures',
						}
					},
				});
			},
			deleteCharacter(){
				let that = this;
				this.$store.commit('pushDialogStack', {
					component: 'delete-confirmation-dialog',
					elementId: 'creature-menu',
					data: {
						name: this.character.name,
						typeName: 'Character'
					},
					callback(confirmation){
						if(!confirmation) return;
						removeCreature.call({charId: that.creatureId}, (error, result) => {
							if (error) {
								console.error(error);
							} else {
								that.$router.push('/characterList');
							}
						});
					}
				});
			},
			isDarkColor,
    },
		meteor: {
			$subscribe: {
	      'singleCharacter'(){
					return [this.creatureId];
				},
			},
			character(){
				return Creatures.findOne(this.creatureId) || {};
			},
		},
	}
</script>

<style>
	.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%;
	}
	.v-window-item {
		padding: 0.1px;
	}
</style>