From 66dc0ee34f5279f08412341aa0b67e64a9397c84 Mon Sep 17 00:00:00 2001
From: Stefan Zermatten <stefanzermatten@gmail.com>
Date: Mon, 21 Jun 2021 16:37:02 +0200
Subject: [PATCH] Added icon to indicate sharing status of characters

---
 app/imports/ui/components/SharedIcon.vue      | 47 +++++++++++++++++++
 .../character/CharacterSheetToolbar.vue       |  3 ++
 .../creatureList/CreatureListTile.vue         |  8 ++++
 3 files changed, 58 insertions(+)
 create mode 100644 app/imports/ui/components/SharedIcon.vue

diff --git a/app/imports/ui/components/SharedIcon.vue b/app/imports/ui/components/SharedIcon.vue
new file mode 100644
index 00000000..568bd91c
--- /dev/null
+++ b/app/imports/ui/components/SharedIcon.vue
@@ -0,0 +1,47 @@
+<template lang="html">
+  <v-tooltip
+    v-if="accessRights === 'reader' || accessRights === 'writer'"
+    bottom
+  >
+    <template #activator="{ on }">
+      <v-icon
+        style="opacity: 0.4"
+        v-on="on"
+      >
+        {{ accessRights === 'reader' ? 'mdi-file-eye' : 'mdi-file-edit' }}
+      </v-icon>
+    </template>
+    <span>{{ accessText }}</span>
+  </v-tooltip>
+</template>
+
+<script lang="js">
+export default {
+  props:{
+    model: {
+      type: Object,
+      required: true,
+    },
+  },
+  meteor:{
+    accessRights(){
+      let userId = Meteor.userId();
+      if (this.model.owner === userId) return 'owner'
+      else if (this.model.writers.includes(userId)) return 'writer';
+      else if (this.model.readers.includes(userId)) return 'reader';
+      else if (this.model.public) return 'public';
+      else return 'denied'
+    },
+    accessText(){
+      switch (this.accessRights){
+        case 'writer': return 'Shared with edit permission';
+        case 'reader': return 'Shared as view-only';
+        case 'public': return 'Shared as publicly viewable';
+      }
+    }
+  }
+}
+</script>
+
+<style lang="css" scoped>
+</style>
diff --git a/app/imports/ui/creature/character/CharacterSheetToolbar.vue b/app/imports/ui/creature/character/CharacterSheetToolbar.vue
index 693fcd57..fe6106e2 100644
--- a/app/imports/ui/creature/character/CharacterSheetToolbar.vue
+++ b/app/imports/ui/creature/character/CharacterSheetToolbar.vue
@@ -26,6 +26,7 @@
     >
       <div :key="$route.meta.title">
         <template v-if="creature">
+          <shared-icon :model="creature" />
           <v-menu
             bottom
             left
@@ -130,6 +131,7 @@ import { updateUserSharePermissions } from '/imports/api/sharing/sharing.js';
 import isDarkColor from '/imports/ui/utility/isDarkColor.js';
 import CharacterSheetFab from '/imports/ui/creature/character/CharacterSheetFab.vue';
 import getThemeColor from '/imports/ui/utility/getThemeColor.js';
+import SharedIcon from '/imports/ui/components/SharedIcon.vue';
 
 export default {
   inject: {
@@ -137,6 +139,7 @@ export default {
   },
   components: {
     CharacterSheetFab,
+    SharedIcon,
   },
   computed: {
     creatureId(){
diff --git a/app/imports/ui/creature/creatureList/CreatureListTile.vue b/app/imports/ui/creature/creatureList/CreatureListTile.vue
index 29c67e97..d98825d3 100644
--- a/app/imports/ui/creature/creatureList/CreatureListTile.vue
+++ b/app/imports/ui/creature/creatureList/CreatureListTile.vue
@@ -21,6 +21,9 @@
         {{ model.alignment }} {{ model.gender }} {{ model.race }}
       </v-list-item-subtitle>
     </v-list-item-content>
+    <v-list-item-action>
+      <shared-icon :model="model" />
+    </v-list-item-action>
     <v-list-item-action>
       <v-checkbox
         v-if="selection"
@@ -38,7 +41,12 @@
 </template>
 
 <script lang="js">
+import SharedIcon from '/imports/ui/components/SharedIcon.vue';
+
 export default {
+  components: {
+    SharedIcon,
+  },
   props: {
     model: {
       type: Object,