From 5de6ee136ac820f640e0d11f64fff4ccba5379d5 Mon Sep 17 00:00:00 2001
From: jmt-gh <13617455+jmt-gh@users.noreply.github.com>
Date: Fri, 25 Nov 2022 21:10:05 -0800
Subject: [PATCH] Convert Users settings page to use new component

This commit moves the Users settings page to use the new Settings
Content component. Similar to the Libraries page, this one is already a
component. I mimiced the behavior of the existing libraries component to
get the same functionality needed here
---
 client/components/tables/UsersTable.vue |  9 +--------
 client/pages/config/users/index.vue     | 17 ++++++++++++++---
 2 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/client/components/tables/UsersTable.vue b/client/components/tables/UsersTable.vue
index 8fb644ea..d243fe31 100644
--- a/client/components/tables/UsersTable.vue
+++ b/client/components/tables/UsersTable.vue
@@ -1,12 +1,5 @@
 <template>
-  <div class="bg-bg rounded-md shadow-lg border border-white border-opacity-5 p-4 mb-8">
-    <div class="flex items-center mb-2">
-      <h1 class="text-xl">{{ $strings.HeaderUsers }}</h1>
-      <div class="mx-2 w-7 h-7 flex items-center justify-center rounded-full cursor-pointer hover:bg-white hover:bg-opacity-10 text-center" @click="clickAddUser">
-        <span class="material-icons" style="font-size: 1.4rem">add</span>
-      </div>
-    </div>
-
+  <div>
     <div class="text-center">
       <table id="accounts">
         <tr>
diff --git a/client/pages/config/users/index.vue b/client/pages/config/users/index.vue
index a47eedc4..7501ef0c 100644
--- a/client/pages/config/users/index.vue
+++ b/client/pages/config/users/index.vue
@@ -1,16 +1,27 @@
 <template>
   <div>
-    <tables-users-table />
+    <app-settings-content :headerText="$strings.HeaderUsers" showAddButton=true @clicked="setShowUserModal">
+      <tables-users-table />
+    </app-settings-content>
+    <modals-account-modal ref="accountModal" v-model="showAccountModal" :account="selectedAccount" />
   </div>
 </template>
 
 <script>
 export default {
   data() {
-    return {}
+    return {
+      selectedAccount: null,
+      showAccountModal: false,
+    }
   },
   computed: {},
-  methods: {},
+  methods: {
+    setShowUserModal(selectedAccount) {
+      this.selectedAccount = selectedAccount
+      this.showAccountModal = true
+    }
+  },
   mounted() {}
 }
 </script>
\ No newline at end of file