Add: user column to ereaders

client/pages/config/email.vue

@@ -70,6 +70,7 @@
         <tr>
           <th class="text-left">{{ $strings.LabelName }}</th>
           <th class="text-left">{{ $strings.LabelEmail }}</th>
+          <th class="text-left">{{ $strings.LabelAccessibleBy }}</th>
           <th class="w-40"></th>
         </tr>
         <tr v-for="device in existingEReaderDevices" :key="device.name">
@@ -79,6 +80,9 @@
           <td class="text-left">
             <p class="text-sm md:text-base text-gray-100">{{ device.email }}</p>
           </td>
+          <td class="text-left">
+            <p class="text-sm md:text-base text-gray-100">{{ getAccessibleBy(device) }}</p>
+          </td>
           <td class="w-40">
             <div class="flex justify-end items-center h-10">
               <ui-icon-btn icon="edit" borderless :size="8" icon-font-size="1.1rem" :disabled="deletingDeviceName === device.name" class="mx-1" @click="editDeviceClick(device)" />
@@ -105,6 +109,7 @@ export default {
   },
   data() {
     return {
+      users: [],
       loading: false,
       savingSettings: false,
       sendingTest: false,
@@ -146,6 +151,29 @@ export default {
         ...this.settings
       }
     },
+    async loadUsers() {
+      this.users = await this.$axios
+        .$get('/api/users')
+        .then((res) => {
+          return res.users.sort((a, b) => {
+            return a.createdAt - b.createdAt
+          })
+        })
+        .catch((error) => {
+          console.error('Failed', error)
+          return []
+        })
+    },
+    getAccessibleBy(device) {
+      const user = device.availabilityOption
+      if (user === 'userOrUp') return 'Users (excluding Guests)'
+      if (user === 'guestOrUp') return 'Users (including Guests)'
+      if (user === 'specificUsers') {
+        this.loadUsers()
+        return device.users.map((id) => this.users.find((u) => u.id === id)?.username).join(', ')
+      }
+      return 'Admins Only'
+    },
     editDeviceClick(device) {
       this.selectedEReaderDevice = device
       this.showEReaderDeviceModal = true

client/strings/en-us.json

@@ -191,6 +191,7 @@
   "LabelAbridged": "Abridged",
   "LabelAbridgedChecked": "Abridged (checked)",
   "LabelAbridgedUnchecked": "Unabridged (unchecked)",
+  "LabelAccessibleBy": "Accessible by",
   "LabelAccountType": "Account Type",
   "LabelAccountTypeAdmin": "Admin",
   "LabelAccountTypeGuest": "Guest",