Update email page to only load users when needed

client/components/modals/emails/EReaderDeviceModal.vue

@@ -46,7 +46,12 @@ export default {
     ereaderDevice: {
       type: Object,
       default: () => null
-    }
+    },
+    users: {
+      type: Array,
+      default: () => []
+    },
+    loadUsers: Function
   },
   data() {
     return {
@@ -56,8 +61,7 @@ export default {
         email: '',
         availabilityOption: 'adminAndUp',
         users: []
-      },
+      }
-      users: []
     }
   },
   watch: {
@@ -108,25 +112,13 @@ export default {
   methods: {
     availabilityOptionChanged(option) {
       if (option === 'specificUsers' && !this.users.length) {
-        this.loadUsers()
+        this.callLoadUsers()
       }
     },
-    async loadUsers() {
+    async callLoadUsers() {
       this.processing = true
-      this.users = await this.$axios
+      await this.loadUsers()
-        .$get('/api/users')
+      this.processing = false
-        .then((res) => {
-          return res.users.sort((a, b) => {
-            return a.createdAt - b.createdAt
-          })
-        })
-        .catch((error) => {
-          console.error('Failed', error)
-          return []
-        })
-        .finally(() => {
-          this.processing = false
-        })
     },
     submitForm() {
       this.$refs.ereaderNameInput.blur()
@@ -226,10 +218,6 @@ export default {
         this.newDevice.email = this.ereaderDevice.email
         this.newDevice.availabilityOption = this.ereaderDevice.availabilityOption || 'adminOrUp'
         this.newDevice.users = this.ereaderDevice.users || []
-
-        if (this.newDevice.availabilityOption === 'specificUsers' && !this.users.length) {
-          this.loadUsers()
-        }
       } else {
         this.newDevice.name = ''
         this.newDevice.email = ''

client/pages/config/email.vue

@@ -91,12 +91,12 @@
           </td>
         </tr>
       </table>
-      <div v-else class="text-center py-4">
+      <div v-else-if="!loading" class="text-center py-4">
         <p class="text-lg text-gray-100">No Devices</p>
       </div>
     </app-settings-content>
 
-    <modals-emails-e-reader-device-modal v-model="showEReaderDeviceModal" :existing-devices="existingEReaderDevices" :ereader-device="selectedEReaderDevice" @update="ereaderDevicesUpdated" />
+    <modals-emails-e-reader-device-modal v-model="showEReaderDeviceModal" :users="users" :existing-devices="existingEReaderDevices" :ereader-device="selectedEReaderDevice" @update="ereaderDevicesUpdated" :loadUsers="loadUsers" />
   </div>
 </template>
 
@@ -152,6 +152,7 @@ export default {
       }
     },
     async loadUsers() {
+      if (this.users.length) return
       this.users = await this.$axios
         .$get('/api/users')
         .then((res) => {
@@ -161,6 +162,7 @@ export default {
         })
         .catch((error) => {
           console.error('Failed', error)
+          this.$toast.error(this.$strings.ToastFailedToLoadData)
           return []
         })
     },
@@ -169,7 +171,6 @@ export default {
       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'
@@ -212,6 +213,11 @@ export default {
     ereaderDevicesUpdated(ereaderDevices) {
       this.settings.ereaderDevices = ereaderDevices
       this.newSettings.ereaderDevices = ereaderDevices.map((d) => ({ ...d }))
+
+      // Load users if a device has availability set to specific users
+      if (ereaderDevices.some((device) => device.availabilityOption === 'specificUsers')) {
+        this.loadUsers()
+      }
     },
     addNewDeviceClick() {
       this.selectedEReaderDevice = null
@@ -279,7 +285,12 @@ export default {
 
       this.$axios
         .$get(`/api/emails/settings`)
-        .then((data) => {
+        .then(async (data) => {
+          // Load users if a device has availability set to specific users
+          if (data.settings.ereaderDevices.some((device) => device.availabilityOption === 'specificUsers')) {
+            await this.loadUsers()
+          }
+
           this.settings = data.settings
           this.newSettings = {
             ...this.settings