Skip to content
Snippets Groups Projects
Commit 6f1f5ee3 authored by Louis-Marie Michelin's avatar Louis-Marie Michelin
Browse files

feat: add & remove users

parent 66a166a3
No related branches found
No related tags found
No related merge requests found
...@@ -31,4 +31,14 @@ router.post("/new", function (req, res) { ...@@ -31,4 +31,14 @@ router.post("/new", function (req, res) {
}); });
}); });
router.delete("/:userId", function (req, res) {
UserModel.deleteOne({ _id: req.params.userId })
.then(function () {
res.status(204).json({ message: "User successfully deleted" });
})
.catch(function () {
res.status(500).json({ message: "Error while deleting the user" });
});
});
module.exports = router; module.exports = router;
...@@ -10,17 +10,37 @@ ...@@ -10,17 +10,37 @@
<td>{{ user.email }}</td> <td>{{ user.email }}</td>
<td>{{ user.firstName }}</td> <td>{{ user.firstName }}</td>
<td>{{ user.lastName }}</td> <td>{{ user.lastName }}</td>
<td>
<button class="delete-button" @click="deleteUser(user._id)">
Delete
</button>
</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</template> </template>
<script> <script>
import axios from "axios";
export default { export default {
name: "UsersTable", name: "UsersTable",
props: { props: {
users: Array, users: Array,
}, },
methods: {
deleteUser: function (userId) {
axios
.delete(`${process.env.VUE_APP_BACKEND_BASE_URL}/users/${userId}`)
.then(() => {
this.$emit("userDeleted");
})
.catch((error) => {
alert("An error occured while deleting the user.");
console.error(error);
});
},
},
}; };
</script> </script>
...@@ -34,4 +54,8 @@ td { ...@@ -34,4 +54,8 @@ td {
border: 1px solid #000000; border: 1px solid #000000;
padding: 10px; padding: 10px;
} }
.delete-button {
cursor: pointer;
}
</style> </style>
<template>
<div class="add-user-title">Add new user:</div>
<div class="add-user-form-container">
<form ref="addUserForm">
<input
class="add-user-input"
v-model="user.email"
type="email"
placeholder="Email"
required
/>
<input
class="add-user-input"
v-model="user.firstName"
placeholder="First name"
/>
<input
class="add-user-input"
v-model="user.lastName"
placeholder="Last name"
/>
</form>
<button class="add-user-button" @click="addUser()">Add user</button>
<div v-if="userCreationError">{{ userCreationError }}</div>
</div>
</template>
<script>
import axios from "axios";
export default {
name: "AddUser",
data: function () {
return {
user: {
email: "",
firstName: "",
lastName: "",
},
userCreationError: "",
};
},
methods: {
addUser: function () {
if (!this.$refs.addUserForm.checkValidity()) {
this.$refs.addUserForm.reportValidity();
return;
}
axios
.post(`${process.env.VUE_APP_BACKEND_BASE_URL}/users/new`, this.user)
.then(() => {
this.$emit("userAdded");
this.user = {
email: "",
firstName: "",
lastName: "",
};
})
.catch((error) => {
this.userCreationError = "An error occured while creating new user.";
console.error(error);
});
},
},
};
</script>
<style scoped>
.add-user-title {
margin-bottom: 10px;
}
.add-user-form-container {
display: flex;
margin-bottom: 20px;
}
.add-user-input {
margin-right: 10px;
padding: 5px;
}
.add-user-button {
cursor: pointer;
padding: 5px;
}
</style>
<template> <template>
<h1>Users</h1> <h1>Users</h1>
<UsersTable v-if="users.length" :users="users" /> <AddUser @userAdded="fetchUsers()" />
<UsersTable v-if="users.length" :users="users" @userDeleted="fetchUsers()" />
<div v-if="usersLoadingError">{{ usersLoadingError }}</div> <div v-if="usersLoadingError">{{ usersLoadingError }}</div>
</template> </template>
...@@ -8,10 +9,12 @@ ...@@ -8,10 +9,12 @@
// @ is an alias to /src // @ is an alias to /src
import UsersTable from "@/components/UsersTable.vue"; import UsersTable from "@/components/UsersTable.vue";
import axios from "axios"; import axios from "axios";
import AddUser from "./AddUser.vue";
export default { export default {
name: "Users", name: "Users",
components: { components: {
AddUser,
UsersTable, UsersTable,
}, },
data: function () { data: function () {
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment