Merge pull request #133 from brown-ccv/feat-people-sort

feat: sort people by team

components/base/AuthorCard.vue

@@ -18,7 +18,9 @@
               v-if="person.github_username"
               :href="'https://github.com/' + person.github_username"
               aria-label="information icon"
-              ><span class="icon"><i class="mdi mdi-github" /></span>
+              ><span class="icon is-large"
+                ><i class="mdi mdi-48px mdi-github"
+              /></span>
             </a>
             <a
               v-if="person.brown_directory_uuid"
@@ -27,7 +29,9 @@
                 person.brown_directory_uuid
               "
               aria-label="information icon"
-              ><span class="icon"><i class="mdi mdi-information" /></span>
+              ><span class="icon is-large"
+                ><i class="mdi mdi-48px mdi-email"
+              /></span>
             </a>
           </div>
         </template>

components/base/DPersonCard.vue

@@ -17,6 +17,7 @@
         @blur="active = false"
         @mouseover="active = true"
         @mouseout="active = false"
+        @click="$router.push(`/people/${name}`)"
       >
         <img
           :alt="'Picture of' + name"
@@ -28,9 +29,13 @@
     </template>
     <template #footer>
       <footer class="content py-3 px-3">
-        <h5>{{ name }}</h5>
+        <h5 @click="$router.push(`/people/${name}`)">{{ name }}</h5>
         <p data-testid="title-team">
-          <small>{{ title }} | {{ team }}</small>
+          <div><small>{{ title }}</small></div>
+          <div><small>{{ team }}</small></div>
+          <div><small>{{ subteam }}</small></div><span class="icon" :class="[`has-text-${accent}`]" @click="scrollToElement(subteam)">
+            <i :class="['icon mdi', `${teamIcon(subteam)}`]" />
+          </span>
         </p>
         <slot name="icons" />
       </footer>
@@ -60,6 +65,10 @@ export default {
       type: String,
       required: true,
     },
+    subteam: {
+      type: String,
+      required: true,
+    },
     mainImage: {
       type: String,
       required: true,
@@ -77,8 +86,30 @@ export default {
     return {
       active: false,
       hover: false,
+      teamIconArray: {
+        'Computational Biology Core': 'mdi-dna',
+        'Graphics, Software, and Data Core': 'mdi-graph',
+        'High-Performance Computing': 'mdi-server',
+        'High-Performance Computing Systems': 'mdi-server-network',
+        'Research Technical Services': 'mdi-earth'
+      },
+      teamElementArray: {
+        'Computational Biology Core': 'computational-biology-core',
+        'Graphics, Software, and Data Core': 'graphics-software-and-data-core',
+        'High-Performance Computing': 'high-performance-computing',
+        'High-Performance Computing Systems': 'high-performance-computing-systems',
+        'Research Technical Services': 'research-technical-services'
+      },
     };
   },
+  methods: {
+    teamIcon(team) {
+      return this.teamIconArray[team];
+    },
+    scrollToElement(team) {
+      document.getElementById(this.teamElementArray[team]).scrollIntoView();
+    },
+  },
 };
 </script>
 

components/blocks/About.vue

@@ -69,20 +69,20 @@
         <!-- People -->
         <div v-if="item.title === 'People'" class="card-group">
           <DPersonCard
-            v-for="person in orderedPeople"
+            v-for="person in teamSort"
             :key="urlize(person.name)"
             variant="white"
-            accent="warning"
+            :accent="teamColor()[person.subteam]"
             width="xsmall"
             class="mx-1 my-1"
             :name="person.name"
             :title="person.title"
             :team="person.team"
+            :subteam="person.subteam"
             :main-image="'/content/images/people/' + person.image"
             :hover-image="
               '/content/images/people/' + person.image.replace('main', 'hover')
             "
-            @click.native="$router.push(`/people/${person.name}`)"
           >
             <template #icons>
               <a
@@ -98,7 +98,7 @@
                   person.brown_directory_uuid
                 "
                 aria-label="information icon"
-                ><span class="icon"><i class="mdi mdi-information" /></span>
+                ><span class="icon"><i class="mdi mdi-email" /></span>
               </a>
             </template>
           </DPersonCard>
@@ -117,7 +117,7 @@
 <script>
 import DTOC from '@/components/base/DTableOfContents.vue';
 import DPersonCard from '@/components/base/DPersonCard.vue';
-import { urlize } from '@/utils';
+import { COLOR_VARIANTS, urlize } from '@/utils';
 
 export default {
   components: {
@@ -155,7 +155,6 @@ export default {
         return sortOrder.indexOf(a.slug) - sortOrder.indexOf(b.slug);
       });
     },
-
     tocData() {
       return this.sortedData.map((d, i) => {
         return {
@@ -165,16 +164,40 @@ export default {
         };
       });
     },
-
     orderedPeople() {
       const d = this.data;
       const people = [...d.find((d) => d.title === 'People').data];
       people.sort((a, b) => (a.name > b.name ? 1 : -1));
       return people;
     },
+    teams() {
+      const teams = [...new Set(this.orderedPeople.map((x) => x.team))];
+      const subteams = [...new Set(this.orderedPeople.map((x) => x.subteam))];
+      teams.sort((a, b) => (a > b ? 1 : -1));
+      subteams.sort((a, b) => (a > b ? 1 : -1));
+      return [teams, subteams];
+    },
+    teamSort() {
+      const d = this.orderedPeople;
+      d.sort((a, b) => {
+        return (
+          this.teams[1].indexOf(a.subteam) - this.teams[1].indexOf(b.subteam)
+        );
+      });
+      return d;
+    },
   },
   methods: {
     urlize,
+    teamColor() {
+      const numTeams = this.teams[1].length;
+      const colors = COLOR_VARIANTS.slice(2, numTeams + 2);
+      const obj = {};
+      this.teams[1].forEach((k, i) => {
+        obj[k] = colors[i];
+      });
+      return obj;
+    },
   },
 };
 </script>

pages/people/_people.vue

@@ -17,7 +17,10 @@
             <h2 class="title has-text-black pt-6">{{ person.name }}</h2>
             <h2 class="subtitle has-text-black">{{ person.title }}</h2>
             <h2 class="subtitle has-text-black">
-              {{ person.team }} | {{ person.subteam }}
+              {{ person.team }}
+            </h2>
+            <h2 class="subtitle has-text-black">
+              {{ person.subteam }}
             </h2>
             <a
               v-if="person.github_username"
@@ -35,7 +38,7 @@
               "
               aria-label="information icon"
               ><span class="icon is-large"
-                ><i class="mdi mdi-48px mdi-information"
+                ><i class="mdi mdi-48px mdi-email"
               /></span>
             </a>
           </div>