Disabled various buttons when the user doesn't have edit permission

app/imports/ui/creature/CreatureForm.vue

@@ -5,6 +5,7 @@
       :value="model.name"
       :error-messages="errors.name"
       :debounce-time="debounceTime"
+      :disabled="disabled"
       @change="(value, ack) => $emit('change', {path: ['name'], value, ack})"
     />
     <text-field
@@ -12,6 +13,7 @@
       :value="model.alignment"
       :error-messages="errors.alignment"
       :debounce-time="debounceTime"
+      :disabled="disabled"
       @change="(value, ack) => $emit('change', {path: ['alignment'], value, ack})"
     />
     <text-field
@@ -19,6 +21,7 @@
       :value="model.gender"
       :error-messages="errors.gender"
       :debounce-time="debounceTime"
+      :disabled="disabled"
       @change="(value, ack) => $emit('change', {path: ['gender'], value, ack})"
     />
     <text-field
@@ -27,6 +30,7 @@
       :value="model.picture"
       :error-messages="errors.picture"
       :debounce-time="debounceTime"
+      :disabled="disabled"
       @change="(value, ack) => $emit('change', {path: ['picture'], value, ack})"
     />
     <text-field
@@ -35,6 +39,7 @@
       :value="model.avatarPicture"
       :error-messages="errors.avatarPicture"
       :debounce-time="debounceTime"
+      :disabled="disabled"
       @change="(value, ack) => $emit('change', {path: ['avatarPicture'], value, ack})"
     />
     <!--
@@ -44,18 +49,21 @@
 					label="Use variant encumbrance"
 					:input-value="model.settings.useVariantEncumbrance"
 					:error-messages="errors.useVariantEncumbrance"
+          :disabled="disabled"
 					@change="value => $emit('change', {path: ['settings','useVariantEncumbrance'], value})"
 				/>
 				<v-switch
 					label="Hide spells tab"
 					:input-value="model.settings.hideSpellcasting"
 					:error-messages="errors.hideSpellcasting"
+          :disabled="disabled"
 					@change="value => $emit('change', {path: ['settings','hideSpellcasting'], value})"
 				/>
 				<v-switch
 					label="Swap ability scores and modifiers"
 					:input-value="model.settings.swapStatAndModifier"
 					:error-messages="errors.swapStatAndModifier"
+          :disabled="disabled"
 					@change="value => $emit('change', {path: ['settings','swapStatAndModifier'], value})"
 				/>
 			</form-section>
@@ -88,6 +96,7 @@ export default {
 			type: Boolean,
 		},
 		debounceTime: Number,
+    disabled: Boolean,
 	},
 };
 </script>

app/imports/ui/creature/CreatureFormDialog.vue

@@ -6,6 +6,7 @@
     <div>
       <creature-form
         :model="model"
+        :disabled="editPermission === false"
         @change="change"
       />
     </div>
@@ -25,6 +26,7 @@ import Creatures from '/imports/api/creature/Creatures.js';
 import {updateCreature} from '/imports/api/creature/Creatures.js';
 import DialogBase from '/imports/ui/dialogStack/DialogBase.vue';
 import CreatureForm from '/imports/ui/creature/CreatureForm.vue'
+import { assertEditPermission } from '/imports/api/creature/creaturePermissions.js';
 
 export default {
 	components: {
@@ -39,6 +41,14 @@ export default {
 		model(){
 			return Creatures.findOne(this._id);
 		},
+    editPermission(){
+      try {
+        assertEditPermission(this.model, Meteor.userId());
+        return true;
+      } catch (e) {
+        return false;
+      }
+    },
 	},
 	methods: {
 		change({path, value, ack}){

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

@@ -48,17 +48,13 @@
   //TODO add a "no character found" screen if shown on a false address
   // or on a character the user does not have permission to view
 	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/recomputeCreature.js';
+  import { assertEditPermission } from '/imports/api/creature/creaturePermissions.js';
 
 	export default {
 		components: {
@@ -81,7 +77,7 @@
 		},
     reactiveProvide: {
       name: 'context',
-      include: ['creature'],
+      include: ['creature', 'editPermission'],
     },
     onMounted(){
       this.$store.commit('setPageTitle', this.creature && this.creature.name || 'Character Sheet');
@@ -100,6 +96,14 @@
 			creature(){
 				return Creatures.findOne(this.creatureId) || {};
 			},
+      editPermission(){
+        try {
+          assertEditPermission(this.creature, Meteor.userId());
+          return true;
+        } catch (e) {
+          return false;
+        }
+      },
 		},
 	}
 </script>

app/imports/ui/creature/character/characterSheetTabs/InventoryTab.vue

@@ -5,6 +5,7 @@
         <toolbar-card color="">
           <v-spacer slot="toolbar" />
           <v-switch
+            v-if="context.editPermission !== false"
             slot="toolbar"
             v-model="organize"
             label="Organize"
@@ -53,6 +54,9 @@ export default {
 		ContainerCard,
     ToolbarCard,
 	},
+  inject: {
+    context: { default: {} }
+  },
 	props: {
 		creatureId: String,
 	},

app/imports/ui/creature/character/characterSheetTabs/SpellsTab.vue

@@ -5,6 +5,7 @@
         <v-card>
           <v-card-text>
             <v-switch
+              v-if="context.editPermission !== false"
               v-model="organize"
               label="Organize"
               class="justify-end"
@@ -48,6 +49,9 @@ export default {
 		CreaturePropertiesTree,
 		SpellListCard,
 	},
+  inject: {
+    context: { default: {} }
+  },
 	props: {
 		creatureId: {
       type: String,

app/imports/ui/creature/character/characterSheetTabs/TreeTab.vue

@@ -21,6 +21,7 @@
         >
           <v-spacer />
           <v-switch
+            v-if="context.editPermission !== false"
             v-model="organize"
             label="Organize"
             class="mx-3"
@@ -153,6 +154,9 @@
       PropertyIcon,
       LabeledFab,
     },
+    inject: {
+      context: { default: {} }
+    },
     props: {
       creatureId: {
         type: String,

app/imports/ui/properties/components/attributes/HealthBar.vue

@@ -21,17 +21,16 @@
       <v-layout
         column
         align-center
-				@click="edit"
         style="cursor: pointer;"
         class="bar"
+        @click="edit"
       >
         <v-progress-linear
           :value="(value / maxValue) * 100"
           height="20"
           color="green lighten-1"
           class="ma-0"
-				>
+        />
-				</v-progress-linear>
         <span
           class="value"
           style="margin-top: -20px; z-index: 1; font-size: 15px; font-weight: 600; height: 20px;"
@@ -50,40 +49,53 @@
           <v-spacer />
           <v-btn-toggle
             :value="operation === 'add' ? 0: operation === 'subtract' ? 1 : null"
-						@click="$refs.editInput.focus()"
             class="mr-2"
+            @click="$refs.editInput.focus()"
           >
             <v-btn
-							@click="toggleAdd(); $nextTick(() => $refs.editInput.focus())"
+              :disabled="context.editPermission === false"
               class="filled"
+              @click="toggleAdd(); $nextTick(() => $refs.editInput.focus())"
             >
               <v-icon>add</v-icon>
             </v-btn>
             <v-btn
-							@click="toggleSubtract(); $nextTick(() => $refs.editInput.focus())"
+              :disabled="context.editPermission === false"
               class="filled"
+              @click="toggleSubtract(); $nextTick(() => $refs.editInput.focus())"
             >
               <v-icon>remove</v-icon>
             </v-btn>
           </v-btn-toggle>
           <v-text-field
+            v-if="editing"
+            ref="editInput"
             solo
             hide-details
             type="number"
-						v-if="editing"
-						ref="editInput"
             style="max-width: 120px;"
             min="0"
             :value="editValue"
             :prepend-inner-icon="operationIcon(operation)"
+            :disabled="context.editPermission === false"
             @focus="$event.target.select()"
             @keypress="keypress"
+          />
+          <v-btn
+            small
+            fab
+            class="filled"
+            color="red"
+            @click="commitEdit"
           >
-					</v-text-field>
-					<v-btn small fab @click="commitEdit" class="filled" color="red">
             <v-icon>done</v-icon>
           </v-btn>
-					<v-btn small fab @click="cancelEdit" class="mx-0 filled">
+          <v-btn
+            small
+            fab
+            class="mx-0 filled"
+            @click="cancelEdit"
+          >
             <v-icon>close</v-icon>
           </v-btn>
           <v-spacer />
@@ -91,13 +103,26 @@
       </transition>
     </v-flex>
     <transition name="background-transition">
-			<div v-if="editing" class="page-tint" @click="cancelEdit" />
+      <div
+        v-if="editing"
+        class="page-tint"
+        @click="cancelEdit"
+      />
     </transition>
   </v-layout>
 </template>
 
 <script>
 	export default {
+    inject: {
+      context: { default: {} }
+    },
+		props: {
+			value: Number,
+			maxValue: Number,
+			name: String,
+			_id: String,
+		},
 		data() {
 			return {
 				editing: false,
@@ -106,12 +131,6 @@
 				hover: false,
 			};
 		},
-		props: {
-			value: Number,
-			maxValue: Number,
-			name: String,
-			_id: String,
-		},
 		methods: {
 			edit() {
 				this.editing = true;

app/imports/ui/properties/components/attributes/HitDiceListTile.vue

@@ -17,7 +17,7 @@
           <v-btn
             icon
             small
-            :disabled="currentValue >= model.value"
+            :disabled="currentValue >= model.value || context.editPermission === false"
             @click="increment(1)"
           >
             <v-icon>arrow_drop_up</v-icon>
@@ -25,7 +25,7 @@
           <v-btn
             icon
             small
-            :disabled="currentValue <= 0"
+            :disabled="currentValue <= 0 || context.editPermission === false"
             @click="increment(-1)"
           >
             <v-icon>arrow_drop_down</v-icon>
@@ -68,6 +68,9 @@ import ComputedForCreature from '/imports/ui/components/computation/ComputedForC
 export default {
   components: {
     Computed: ComputedForCreature,
+  },
+  inject: {
+    context: { default: {} }
   },
 	props: {
     model: {

app/imports/ui/properties/components/attributes/ResourceCard.vue

@@ -1,18 +1,35 @@
 <template lang="html">
-	<v-card class="resource-card layout row" :class="hover ? 'elevation-8': ''">
+  <v-card
+    class="resource-card layout row"
+    :class="hover ? 'elevation-8': ''"
+  >
     <div class="buttons layout column justify-center pl-3">
-			<v-btn icon small :disabled="currentValue >= value" @click="increment(1)">
+      <v-btn
+        icon
+        small
+        :disabled="currentValue >= value || context.editPermission === false"
+        @click="increment(1)"
+      >
         <v-icon>arrow_drop_up</v-icon>
       </v-btn>
-			<v-btn icon small :disabled="currentValue <= 0" @click="increment(-1)">
+      <v-btn
+        icon
+        small
+        :disabled="currentValue <= 0 || context.editPermission === false"
+        @click="increment(-1)"
+      >
         <v-icon>arrow_drop_down</v-icon>
       </v-btn>
     </div>
     <div
       class="layout row align-center value pl-2 pr-3"
     >
-			<div class="display-1">{{currentValue}}</div>
+      <div class="display-1">
-			<div class="title ml-2 max-value">/{{value}}</div>
+        {{ currentValue }}
+      </div>
+      <div class="title ml-2 max-value">
+        /{{ value }}
+      </div>
     </div>
     <div
       class="content layout row align-center pr-3"
@@ -29,15 +46,18 @@
 
 <script>
 	export default {
-		data(){ return{
-			hover: false,
-		}},
 		props: {
 			_id: String,
 			name: String,
 			color: String,
 			value: Number,
 			damage: Number,
+		},
+		data(){ return{
+			hover: false,
+		}},
+    inject: {
+      context: { default: {} }
     },
 		computed: {
 			currentValue(){

app/imports/ui/properties/components/attributes/SpellSlotListTile.vue

@@ -1,40 +1,74 @@
 <template lang="html">
-	<v-list-tile class="spell-slot-list-tile" :class="{hover}">
+  <v-list-tile
-
+    class="spell-slot-list-tile"
+    :class="{hover}"
+  >
     <v-list-tile-action>
-
+      <div
-			<div class="layout row align-center" v-if="value > 4">
+        v-if="value > 4"
+        class="layout row align-center"
+      >
         <div class="buttons layout column justify-center">
-					<v-btn icon small :disabled="currentValue >= value" @click="increment(1)">
-						<v-icon>arrow_drop_up</v-icon>
-					</v-btn>
-					<v-btn icon small :disabled="currentValue <= 0" @click="increment(-1)">
-						<v-icon>arrow_drop_down</v-icon>
-					</v-btn>
-				</div>
-				<div class="layout row value" style="align-items: baseline;">
-					<div class="display-1">{{currentValue}}</div>
-					<div class="title ml-2 max-value">/{{value}}</div>
-				</div>
-			</div>
-
-			<div class="layout row align-center justify-end slot-buttons" v-else>
           <v-btn
             icon
             small
+            :disabled="
+              currentValue >= value ||
+                context.editPermission === false
+            "
+            @click="increment(1)"
+          >
+            <v-icon>arrow_drop_up</v-icon>
+          </v-btn>
+          <v-btn
+            icon
+            small
+            :disabled="
+              currentValue <= 0 ||
+                context.editPermission === false
+            "
+            @click="increment(-1)"
+          >
+            <v-icon>arrow_drop_down</v-icon>
+          </v-btn>
+        </div>
+        <div
+          class="layout row value"
+          style="align-items: baseline;"
+        >
+          <div class="display-1">
+            {{ currentValue }}
+          </div>
+          <div class="title ml-2 max-value">
+            /{{ value }}
+          </div>
+        </div>
+      </div>
+
+      <div
+        v-else
+        class="layout row align-center justify-end slot-buttons"
+      >
+        <v-btn
           v-for="i in value"
-					:disabled="!(i === currentValue || i === currentValue + 1)"
           :key="i"
+          icon
+          small
+          :disabled="
+            !(i === currentValue || i === currentValue + 1) ||
+              context.editPermission === false
+          "
           @click="increment(i > currentValue ? 1 : -1)"
         >
-					<v-icon>{{
+          <v-icon>
+            {{
               i > currentValue ?
                 'radio_button_unchecked' :
                 'radio_button_checked'
-					}}</v-icon>
+            }}
+          </v-icon>
         </v-btn>
       </div>
-
     </v-list-tile-action>
 
     <v-list-tile-content
@@ -53,9 +87,6 @@
 <script>
 import numberToSignedString from '/imports/ui/utility/numberToSignedString.js';
 export default {
-	data(){ return{
-		hover: false,
-	}},
 	props: {
 		_id: String,
 		name: String,
@@ -65,6 +96,12 @@ export default {
 			type: Number,
 			default: 0,
 		},
+	},
+	data(){ return{
+		hover: false,
+	}},
+  inject: {
+    context: { default: {} }
   },
 	computed: {
 		currentValue(){