Merge pull request #1459 from frankrousseau/master

[ux] Add a studio name widget

src/components/lists/PeopleList.vue

@@ -70,7 +70,7 @@
               :departments="person.departments"
             />
             <td class="studio" v-if="!isBots">
-              {{ getStudioName(person) }}
+              <studio-name :studio-id="person.studio_id" />
             </td>
             <row-actions-cell
               v-if="isCurrentUserAdmin"
@@ -120,7 +120,7 @@
               :departments="person.departments"
             />
             <td class="studio" v-if="!isBots">
-              {{ getStudioName(person) }}
+              <studio-name :studio-id="person.studio_id" />
             </td>
             <row-actions-cell
               v-if="isCurrentUserAdmin"
@@ -149,6 +149,7 @@ import { AlertTriangleIcon } from 'vue-feather-icons'
 import DepartmentNamesCell from '@/components/cells/DepartmentNamesCell.vue'
 import PeopleNameCell from '@/components/cells/PeopleNameCell.vue'
 import RowActionsCell from '@/components/cells/RowActionsCell.vue'
+import StudioName from '@/components/widgets/StudioName.vue'
 import TableInfo from '@/components/widgets/TableInfo.vue'
 
 export default {
@@ -159,6 +160,7 @@ export default {
     DepartmentNamesCell,
     PeopleNameCell,
     RowActionsCell,
+    StudioName,
     TableInfo
   },
 

src/components/widgets/StudioName.vue

@@ -0,0 +1,43 @@
+<template>
+  <div>
+    <span class="square" :style="{ backgroundColor: studio.color }"></span>
+    {{ studio.name }}
+  </div>
+</template>
+
+<script>
+import { mapGetters, mapActions } from 'vuex'
+
+export default {
+  name: 'studio-name',
+  components: {},
+
+  props: {
+    studioId: {
+      type: String,
+      default: null
+    }
+  },
+
+  computed: {
+    ...mapGetters(['studioMap']),
+
+    studio() {
+      return this.studioMap.get(this.studioId)
+    }
+  },
+
+  methods: {
+    ...mapActions([])
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.square {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  margin-right: 5px;
+}
+</style>