add: modal edit user

src/views/UsersView.vue

@@ -3,6 +3,7 @@
     import Spiner from '../components/ui/Spiner.vue';
     import CardUser from '../components/CardUser.vue';
     import { useCompanyStore } from '../stores/company';
+    import CreateUserModal from '../components/CreateUserModal.vue';
 
     const companyStore = useCompanyStore();
 
@@ -10,6 +11,9 @@
         getInitData();
     });
 
+    const currentUser = ref(null);
+    const openModal = ref(false);
+
     const getInitData = async() => {
         console.log('callll')
         loading.value = true;
@@ -19,17 +23,43 @@
 
     const loading = ref(false);
 
+    const handleSetCurrentUser = (user) => {
+        openModal.value = true;
+        currentUser.value = user;
+    }
+
+    const handleResetCurrentUser = () => {
+        openModal.value = false;
+        currentUser.value = null;
+    }
+
 </script>
 
 <template>
+    <CreateUserModal
+        v-if="openModal === true"
+        :user="currentUser"
+        @reset-user="handleResetCurrentUser"
+    />
     <div>
         <h2 class="title mb-4">Usuarios</h2>
+        <div class="btn-row mb-4">
+            <button
+                class="btn-primary-sm"
+                data-toggle="modal" 
+                data-target="#userModal"
+                @click="handleSetCurrentUser(null)"
+            >
+                <i class="fa-solid fa-plus"></i> Agregar usuario
+            </button>
+        </div>
         <Spiner v-if="loading"/>
         <div v-else>
             <CardUser
                 v-for="user in companyStore.users"
                 :user="user"
                 :readonly="false"
+                @set-user="handleSetCurrentUser(user)"
             />
         </div>
     </div>