mirrors
/
lldap
mirror of https://github.com/lldap/lldap.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

app: Add a component to delete a user 

Also adds a way to hook to the bootstrap modals to show or hide them.
This commit is contained in:
Valentin Tolmer 2021-09-24 11:12:50 +02:00 committed by nitnelave
parent e8831f607b
commit 402ef2f83a
7 changed files with 253 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/index.html
View File

@ -11,6 +11,10 @@
integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x"
crossorigin="anonymous"
as="style" />
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ"
crossorigin="anonymous"></script>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css"

5
app/queries/delete_user.graphql Normal file
View File

@ -0,0 +1,5 @@
mutation DeleteUserQuery($user: String!) {
deleteUser(userId: $user) {
ok
}
}

156
app/src/components/delete_user.rs Normal file
View File

@ -0,0 +1,156 @@
use crate::infra::{api::HostService, modal::Modal};
use anyhow::{Error, Result};
use graphql_client::GraphQLQuery;
use yew::prelude::*;
use yew::services::fetch::FetchTask;
use yewtil::NeqAssign;
#[derive(GraphQLQuery)]
#[graphql(
schema_path = "../schema.graphql",
query_path = "queries/delete_user.graphql",
response_derives = "Debug",
custom_scalars_module = "crate::infra::graphql"
)]
pub struct DeleteUserQuery;
pub struct DeleteUser {
link: ComponentLink<Self>,
props: DeleteUserProps,
node_ref: NodeRef,
modal: Option<Modal>,
_task: Option<FetchTask>,
}
#[derive(yew::Properties, Clone, PartialEq, Debug)]
pub struct DeleteUserProps {
pub username: String,
pub on_user_deleted: Callback<String>,
pub on_error: Callback<Error>,
}
pub enum Msg {
ClickedDeleteUser,
ConfirmDeleteUser,
DismissModal,
DeleteUserResponse(Result<delete_user_query::ResponseData>),
}
impl Component for DeleteUser {
type Message = Msg;
type Properties = DeleteUserProps;
fn create(props: Self::Properties, link: ComponentLink<Self>) -> Self {
Self {
link,
props,
node_ref: NodeRef::default(),
modal: None,
_task: None,
}
}
fn rendered(&mut self, first_render: bool) {
if first_render {
self.modal = Some(Modal::new(
self.node_ref
.cast::<web_sys::Element>()
.expect("Modal node is not an element"),
));
}
}
fn update(&mut self, msg: Self::Message) -> ShouldRender {
match msg {
Msg::ClickedDeleteUser => {
self.modal.as_ref().expect("modal not initialized").show();
}
Msg::ConfirmDeleteUser => {
self.update(Msg::DismissModal);
self._task = HostService::graphql_query::<DeleteUserQuery>(
delete_user_query::Variables {
user: self.props.username.clone(),
},
self.link.callback(Msg::DeleteUserResponse),
"Error trying to delete user",
)
.map_err(|e| self.props.on_error.emit(e))
.ok();
}
Msg::DismissModal => {
self.modal.as_ref().expect("modal not initialized").hide();
}
Msg::DeleteUserResponse(response) => {
if let Err(e) = response {
self.props.on_error.emit(e);
} else {
self.props.on_user_deleted.emit(self.props.username.clone());
}
}
}
true
}
fn change(&mut self, props: Self::Properties) -> ShouldRender {
self.props.neq_assign(props)
}
fn view(&self) -> Html {
html! {
<>
<button
class="btn btn-danger"
onclick=self.link.callback(|_| Msg::ClickedDeleteUser)>
<i class="bi-x-circle-fill" aria-label="Delete user" />
</button>
{self.show_modal()}
</>
}
}
}
impl DeleteUser {
fn show_modal(&self) -> Html {
html! {
<div
class="modal fade"
id="exampleModal".to_string() + &self.props.username
tabindex="-1"
//role="dialog"
aria-labelledby="exampleModalLabel"
aria-hidden="true"
ref=self.node_ref.clone()>
<div class="modal-dialog" /*role="document"*/>
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">{"Delete user?"}</h5>
<button
type="button"
class="btn-close"
aria-label="Close"
onclick=self.link.callback(|_| Msg::DismissModal) />
</div>
<div class="modal-body">
<span>
{"Are you sure you want to delete user "}
<b>{&self.props.username}</b>{"?"}
</span>
</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-secondary"
onclick=self.link.callback(|_| Msg::DismissModal)>
{"Cancel"}
</button>
<button
type="button"
onclick=self.link.callback(|_| Msg::ConfirmDeleteUser)
class="btn btn-danger">{"Yes, I'm sure"}</button>
</div>
</div>
</div>
</div>
}
}
}

1
app/src/components/mod.rs
View File

@ -2,6 +2,7 @@ pub mod add_user_to_group;
pub mod app;
pub mod change_password;
pub mod create_user;
pub mod delete_user;
pub mod login;
pub mod logout;
pub mod remove_user_from_group;

94
app/src/components/user_table.rs
View File

@ -1,8 +1,11 @@
use crate::{
components::router::{AppRoute, Link},
components::{
delete_user::DeleteUser,
router::{AppRoute, Link},
},
infra::api::HostService,
};
use anyhow::{anyhow, Result};
use anyhow::{Error, Result};
use graphql_client::GraphQLQuery;
use yew::prelude::*;
use yew::services::{fetch::FetchTask, ConsoleService};
@ -22,13 +25,16 @@ type User = list_users_query::ListUsersQueryUsers;
pub struct UserTable {
link: ComponentLink<Self>,
users: Option<Result<Vec<User>>>,
users: Option<Vec<User>>,
error: Option<Error>,
// Used to keep the request alive long enough.
_task: Option<FetchTask>,
}
pub enum Msg {
ListUsersResponse(Result<ResponseData>),
OnUserDeleted(String),
OnError(Error),
}
impl UserTable {
@ -55,21 +61,21 @@ impl Component for UserTable {
link,
_task: None,
users: None,
error: None,
};
table.get_users(None);
table
}
fn update(&mut self, msg: Self::Message) -> ShouldRender {
match msg {
Msg::ListUsersResponse(Ok(users)) => {
self.users = Some(Ok(users.users.into_iter().collect()));
true
}
Msg::ListUsersResponse(Err(e)) => {
self.users = Some(Err(anyhow!("Error listing users: {}", e)));
self.error = None;
match self.handle_msg(msg) {
Err(e) => {
ConsoleService::error(&e.to_string());
self.error = Some(e);
true
}
Ok(b) => b,
}
}
@ -78,18 +84,32 @@ impl Component for UserTable {
}
fn view(&self) -> Html {
let make_user_row = |user: &User| {
html! {
<tr>
<td><Link route=AppRoute::UserDetails(user.id.clone())>{&user.id}</Link></td>
<td>{&user.email}</td>
<td>{&user.display_name}</td>
<td>{&user.first_name}</td>
<td>{&user.last_name}</td>
<td>{&user.creation_date.with_timezone(&chrono::Local)}</td>
</tr>
html! {
<div>
{self.view_users()}
{self.view_errors()}
</div>
}
}
}
impl UserTable {
fn handle_msg(&mut self, msg: <Self as Component>::Message) -> Result<bool> {
match msg {
Msg::ListUsersResponse(users) => {
self.users = Some(users?.users.into_iter().collect());
Ok(true)
}
};
Msg::OnError(e) => Err(e),
Msg::OnUserDeleted(user_id) => {
debug_assert!(self.users.is_some());
self.users.as_mut().unwrap().retain(|u| u.id != user_id);
Ok(true)
}
}
}
fn view_users(&self) -> Html {
let make_table = |users: &Vec<User>| {
html! {
<div class="table-responsive">
@ -102,10 +122,11 @@ impl Component for UserTable {
<th>{"First name"}</th>
<th>{"Last name"}</th>
<th>{"Creation date"}</th>
<th>{"Delete"}</th>
</tr>
</thead>
<tbody>
{users.iter().map(make_user_row).collect::<Vec<_>>()}
{users.iter().map(|u| self.view_user(u)).collect::<Vec<_>>()}
</tbody>
</table>
</div>
@ -113,8 +134,33 @@ impl Component for UserTable {
};
match &self.users {
None => html! {{"Loading..."}},
Some(Err(e)) => html! {<div>{"Error: "}{e.to_string()}</div>},
Some(Ok(users)) => make_table(users),
Some(users) => make_table(users),
}
}
fn view_user(&self, user: &User) -> Html {
html! {
<tr key=user.id.clone()>
<td><Link route=AppRoute::UserDetails(user.id.clone())>{&user.id}</Link></td>
<td>{&user.email}</td>
<td>{&user.display_name}</td>
<td>{&user.first_name}</td>
<td>{&user.last_name}</td>
<td>{&user.creation_date.with_timezone(&chrono::Local)}</td>
<td>
<DeleteUser
username=user.id.clone()
on_user_deleted=self.link.callback(Msg::OnUserDeleted)
on_error=self.link.callback(Msg::OnError)/>
</td>
</tr>
}
}
fn view_errors(&self) -> Html {
match &self.error {
None => html! {},
Some(e) => html! {<div>{"Error: "}{e.to_string()}</div>},
}
}
}

1
app/src/infra/mod.rs
View File

@ -1,3 +1,4 @@
pub mod api;
pub mod cookies;
pub mod graphql;
pub mod modal;

16
app/src/infra/modal.rs Normal file
View File

@ -0,0 +1,16 @@
use wasm_bindgen::prelude::*;
#[wasm_bindgen(module = "bootstrap")]
extern "C" {
#[wasm_bindgen]
pub type Modal;
#[wasm_bindgen(constructor)]
pub fn new(e: web_sys::Element) -> Modal;
#[wasm_bindgen(method)]
pub fn show(this: &Modal);
#[wasm_bindgen(method)]
pub fn hide(this: &Modal);
}