From 615ed26f0ffb8b2af9517d08a3e57208db99f243 Mon Sep 17 00:00:00 2001
From: advplyr <advplyr@protonmail.com>
Date: Mon, 2 Dec 2024 17:35:35 -0600
Subject: [PATCH] Update:Users table show count next to header

---
 client/components/tables/UsersTable.vue | 1 +
 client/pages/config/users/index.vue     | 9 +++++++--
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/client/components/tables/UsersTable.vue b/client/components/tables/UsersTable.vue
index 92fa684e..09db3341 100644
--- a/client/components/tables/UsersTable.vue
+++ b/client/components/tables/UsersTable.vue
@@ -120,6 +120,7 @@ export default {
           this.users = res.users.sort((a, b) => {
             return a.createdAt - b.createdAt
           })
+          this.$emit('numUsers', this.users.length)
         })
         .catch((error) => {
           console.error('Failed', error)
diff --git a/client/pages/config/users/index.vue b/client/pages/config/users/index.vue
index 4dd82591..184529cb 100644
--- a/client/pages/config/users/index.vue
+++ b/client/pages/config/users/index.vue
@@ -2,6 +2,10 @@
   <div>
     <app-settings-content :header-text="$strings.HeaderUsers">
       <template #header-items>
+        <div v-if="numUsers" class="mx-2 px-1.5 rounded-lg bg-primary/50 text-gray-300/90 text-sm inline-flex items-center justify-center">
+          <span>{{ numUsers }}</span>
+        </div>
+
         <ui-tooltip :text="$strings.LabelClickForMoreInfo" class="inline-flex ml-2">
           <a href="https://www.audiobookshelf.org/guides/users" target="_blank" class="inline-flex">
             <span class="material-symbols text-xl w-5 text-gray-200">help_outline</span>
@@ -13,7 +17,7 @@
         <ui-btn color="primary" small @click="setShowUserModal()">{{ $strings.ButtonAddUser }}</ui-btn>
       </template>
 
-      <tables-users-table class="pt-2" @edit="setShowUserModal" />
+      <tables-users-table class="pt-2" @edit="setShowUserModal" @numUsers="(count) => (numUsers = count)" />
     </app-settings-content>
     <modals-account-modal ref="accountModal" v-model="showAccountModal" :account="selectedAccount" />
   </div>
@@ -29,7 +33,8 @@ export default {
   data() {
     return {
       selectedAccount: null,
-      showAccountModal: false
+      showAccountModal: false,
+      numUsers: 0
     }
   },
   computed: {},