From c6af5240d6c7231bc841acc16ef9bf9219728af5 Mon Sep 17 00:00:00 2001
From: Fang Lin <fanglin@uw.edu>
Date: Thu, 11 Jul 2024 11:34:14 -0700
Subject: [PATCH] Resolve MUWM-4369 (#3117)

Resolve MUWM-4369

---------

Co-authored-by: William Washington <will.wash@gmail.com>
---
 .../teaching/classlist/photo-list.vue         | 64 ++++++++++++++++++-
 1 file changed, 63 insertions(+), 1 deletion(-)

diff --git a/myuw_vue/components/teaching/classlist/photo-list.vue b/myuw_vue/components/teaching/classlist/photo-list.vue
index c36f5a05c..9e9b29f49 100644
--- a/myuw_vue/components/teaching/classlist/photo-list.vue
+++ b/myuw_vue/components/teaching/classlist/photo-list.vue
@@ -6,8 +6,19 @@
     <h3 class="visually-hidden">
       Grid of Student Photos
     </h3>
+    <div class="sort-buttons myuw-text-md">
+      <span class="py-1" style=""><strong>Sort by:</strong></span><button
+        v-for="field in fields"
+        :key="field.key"
+        type="button"
+        :class="buttonClass(field.key)"
+        @click="setSortKey(field.key)"
+      >
+        {{ field.label }}
+      </button>
+    </div>
     <ol class="list-unstyled d-flex flex-wrap">
-      <li v-for="(reg, i) in registrations"
+      <li v-for="(reg, i) in sortedRegistrations"
           :id="`student-photo-${reg.regid}`"
           :key="i"
           class="p-1 mb-1"
@@ -41,5 +52,56 @@ export default {
       default: false,
     },
   },
+  data() {
+    return {
+      sortKey: 'surname',
+      fields: [
+        { key: 'first_name', label: 'first name', sortable: true },
+        { key: 'surname', label: 'last name', sortable: true }
+      ]
+    };
+  },
+  computed: {
+    sortedRegistrations() {
+      const key = this.sortKey;
+      return [...this.registrations].sort((a, b) => {
+        if (a[key] < b[key]) return -1;
+        if (a[key] > b[key]) return 1;
+        return 0;
+      });
+    },
+  },
+  methods: {
+    setSortKey(key) {
+      this.sortKey = key;
+    },
+    buttonClass(key) {
+      return {
+        'btn': true,
+        'btn-link': true,
+        'active': this.sortKey === key,
+        'inactive': this.sortKey !== key,
+        'disabled': this.sortKey === key,
+        'myuw-text-md': true,
+        'px-1': true,
+        'py-1': true
+      };
+    }
+  }
 };
 </script>
+<style scoped>
+.sort-buttons{
+  padding-bottom:.5em;
+}
+.active {
+  font-weight: bold;
+}
+.inactive {
+  font-weight: normal;
+}
+.btn-link.disabled {
+  color: #000;
+  opacity:1;
+}
+  </style>