430 lines
18 KiB
Rust
430 lines
18 KiB
Rust
use bounce::helmet::Helmet;
|
|
use cynic::{MutationBuilder, QueryBuilder};
|
|
use std::rc::Rc;
|
|
use web_sys::HtmlInputElement;
|
|
use yew::prelude::*;
|
|
use yewdux::prelude::*;
|
|
|
|
use crate::{
|
|
components,
|
|
graphql::{self, ReqwestExt},
|
|
stores,
|
|
};
|
|
|
|
pub enum Msg {
|
|
Void,
|
|
|
|
UpdateUser(Rc<stores::User>),
|
|
LoadUsers,
|
|
UsersDone(graphql::GraphQLResult<graphql::queries::Users>),
|
|
|
|
OpenNewModal,
|
|
CloseNewModal,
|
|
NewModalSubmit,
|
|
NewModalSubmitDone(graphql::GraphQLResult<graphql::queries::CreateRepository>),
|
|
|
|
OpenEditModal(usize, usize),
|
|
CloseEditModal,
|
|
Delete,
|
|
DeleteDone(graphql::GraphQLResult<graphql::queries::DeleteRepository>),
|
|
}
|
|
|
|
pub struct Index {
|
|
notifications_dispatch: Dispatch<stores::Notifications>,
|
|
user: Rc<stores::User>,
|
|
_user_dispatch: Dispatch<stores::User>,
|
|
loading: bool,
|
|
users: Vec<graphql::queries::User>,
|
|
|
|
new_modal: bool,
|
|
new_modal_save_loading: bool,
|
|
new_modal_user: NodeRef,
|
|
new_modal_repo: NodeRef,
|
|
|
|
delete_modal: Option<(usize, usize)>,
|
|
delete_modal_delete_loading: bool,
|
|
}
|
|
|
|
impl Component for Index {
|
|
type Message = Msg;
|
|
type Properties = ();
|
|
|
|
fn create(ctx: &Context<Self>) -> Self {
|
|
let notifications_dispatch = Dispatch::subscribe(ctx.link().callback(|_| Msg::Void));
|
|
let user_dispatch = Dispatch::subscribe(ctx.link().callback(Msg::UpdateUser));
|
|
|
|
ctx.link().send_message(Msg::LoadUsers);
|
|
|
|
Self {
|
|
notifications_dispatch,
|
|
user: user_dispatch.get(),
|
|
_user_dispatch: user_dispatch,
|
|
loading: false,
|
|
users: vec![],
|
|
|
|
new_modal: false,
|
|
new_modal_save_loading: false,
|
|
new_modal_user: NodeRef::default(),
|
|
new_modal_repo: NodeRef::default(),
|
|
|
|
delete_modal: None,
|
|
delete_modal_delete_loading: false,
|
|
}
|
|
}
|
|
|
|
fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
|
|
match msg {
|
|
Msg::Void => false,
|
|
|
|
Msg::UpdateUser(x) => {
|
|
self.user = x;
|
|
|
|
true
|
|
}
|
|
Msg::LoadUsers => {
|
|
self.loading = true;
|
|
|
|
let client = graphql::client(None);
|
|
let operation = graphql::queries::Users::build(());
|
|
ctx.link().send_future(async move {
|
|
Msg::UsersDone(client.run_graphql(operation).await)
|
|
});
|
|
|
|
true
|
|
}
|
|
Msg::UsersDone(x) => {
|
|
self.loading = false;
|
|
|
|
match x {
|
|
Ok(resp) => {
|
|
if let Some(errors) = resp.errors {
|
|
self.notifications_dispatch.reduce_mut(|notifs| {
|
|
for e in errors {
|
|
notifs.push(stores::Notification::danger(Some(
|
|
components::notification::NotificationMessage::GraphQLError(
|
|
e,
|
|
),
|
|
)));
|
|
}
|
|
});
|
|
|
|
false
|
|
} else {
|
|
let data = resp.data.unwrap();
|
|
self.users = data.users;
|
|
|
|
true
|
|
}
|
|
}
|
|
Err(e) => {
|
|
self.notifications_dispatch.reduce_mut(|notifs| {
|
|
notifs.push(stores::Notification::danger(Some(
|
|
components::notification::NotificationMessage::Text(vec![
|
|
e.to_string()
|
|
]),
|
|
)));
|
|
});
|
|
|
|
false
|
|
}
|
|
}
|
|
}
|
|
|
|
Msg::OpenNewModal => {
|
|
self.new_modal = true;
|
|
|
|
true
|
|
}
|
|
Msg::CloseNewModal => {
|
|
self.new_modal = false;
|
|
self.new_modal_save_loading = false;
|
|
ctx.link().send_message(Msg::LoadUsers);
|
|
|
|
true
|
|
}
|
|
Msg::NewModalSubmit => {
|
|
let user = match self.new_modal_user.cast::<HtmlInputElement>() {
|
|
Some(x) => x.value(),
|
|
None => return false,
|
|
};
|
|
let name = match self.new_modal_repo.cast::<HtmlInputElement>() {
|
|
Some(x) => x.value(),
|
|
None => return false,
|
|
};
|
|
|
|
self.new_modal_save_loading = true;
|
|
let operation = graphql::queries::CreateRepository::build(
|
|
graphql::queries::CreateRepositoryVariables { user, name },
|
|
);
|
|
let client = graphql::client(self.user.0.as_ref());
|
|
ctx.link().send_future(async move {
|
|
Msg::NewModalSubmitDone(client.run_graphql(operation).await)
|
|
});
|
|
|
|
true
|
|
}
|
|
Msg::NewModalSubmitDone(x) => {
|
|
self.new_modal_save_loading = false;
|
|
|
|
match x {
|
|
Ok(resp) => {
|
|
if let Some(errors) = resp.errors {
|
|
self.notifications_dispatch.reduce_mut(|notifs| {
|
|
for e in errors {
|
|
notifs.push(stores::Notification {
|
|
notification_type: components::notification::NotificationType::Danger,
|
|
message: Some(components::notification::NotificationMessage::GraphQLError(e)),
|
|
});
|
|
}
|
|
});
|
|
|
|
true
|
|
} else {
|
|
ctx.link().send_message(Msg::CloseNewModal);
|
|
|
|
true
|
|
}
|
|
}
|
|
Err(e) => {
|
|
self.notifications_dispatch.reduce_mut(|notifs| {
|
|
notifs.push(stores::Notification::danger(Some(
|
|
components::notification::NotificationMessage::Text(vec![
|
|
e.to_string()
|
|
]),
|
|
)));
|
|
});
|
|
|
|
false
|
|
}
|
|
}
|
|
}
|
|
|
|
Msg::OpenEditModal(i, j) => {
|
|
self.delete_modal = Some((i, j));
|
|
|
|
true
|
|
}
|
|
Msg::CloseEditModal => {
|
|
self.delete_modal = None;
|
|
self.delete_modal_delete_loading = false;
|
|
ctx.link().send_message(Msg::LoadUsers);
|
|
|
|
true
|
|
}
|
|
Msg::Delete => {
|
|
let modal = self.delete_modal.unwrap();
|
|
|
|
self.delete_modal_delete_loading = true;
|
|
let operation = graphql::queries::DeleteRepository::build(
|
|
graphql::queries::DeleteRepositoryVariables {
|
|
id: self.users[modal.0].repositories[modal.1].id.to_owned(),
|
|
},
|
|
);
|
|
let client = graphql::client(self.user.0.as_ref());
|
|
ctx.link().send_future(async move {
|
|
Msg::DeleteDone(client.run_graphql(operation).await)
|
|
});
|
|
|
|
true
|
|
}
|
|
Msg::DeleteDone(x) => match x {
|
|
Ok(_) => {
|
|
self.delete_modal = None;
|
|
self.delete_modal_delete_loading = false;
|
|
ctx.link().send_message(Msg::LoadUsers);
|
|
|
|
true
|
|
}
|
|
Err(e) => {
|
|
self.notifications_dispatch.reduce_mut(|notifs| {
|
|
notifs.push(stores::Notification {
|
|
notification_type: components::notification::NotificationType::Danger,
|
|
message: Some(components::notification::NotificationMessage::Text(
|
|
vec![e.to_string()],
|
|
)),
|
|
});
|
|
});
|
|
|
|
false
|
|
}
|
|
},
|
|
}
|
|
}
|
|
|
|
fn view(&self, ctx: &Context<Self>) -> Html {
|
|
html! {
|
|
<>
|
|
<Helmet>
|
|
<title>{ "Home" }</title>
|
|
</Helmet>
|
|
|
|
<div class={classes!("columns", "is-centered")}>
|
|
<div class={classes!("column", "is-half")}>
|
|
<div class={classes!("columns", "is-multiline")}>
|
|
<div class={classes!("column", "is-full")}>
|
|
<button
|
|
class={classes!("button", "is-primary", "is-fullwidth")}
|
|
onclick={ctx.link().callback(|_| Msg::OpenNewModal)}
|
|
>
|
|
<span class={classes!("icon", "is-small")}>
|
|
<i class={classes!("fa-solid", "fa-plus")} />
|
|
</span>
|
|
<span>{ "New" }</span>
|
|
</button>
|
|
</div>
|
|
|
|
if self.loading {
|
|
<div class={classes!("column", "is-full")}>
|
|
<components::Loading />
|
|
</div>
|
|
} else {
|
|
{
|
|
for self.users.iter().enumerate().map(|(i, user)| html! {
|
|
<div class={classes!("column", "is-full")}>
|
|
<components::UserPane
|
|
name={user.name.to_owned()}
|
|
repositories={user.repositories
|
|
.iter()
|
|
.map(|repo| components::user_pane::Repository {
|
|
name: repo.name.to_owned(),
|
|
url: None,
|
|
})
|
|
.collect::<Vec<_>>()
|
|
}
|
|
on_click={ctx.link().callback(move |j| Msg::OpenEditModal(i, j))}
|
|
/>
|
|
</div>
|
|
})
|
|
}
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
if self.new_modal {
|
|
<div class={classes!("modal", "is-active")}>
|
|
<div class={classes!("modal-background")} onclick={ctx.link().callback(|_| Msg::CloseNewModal)} />
|
|
|
|
<div class={classes!("modal-card")}>
|
|
<header class={classes!("modal-card-head")}>
|
|
<p class={classes!("modal-card-title")}>
|
|
{ "Edit" }
|
|
</p>
|
|
<button
|
|
class={classes!("delete")}
|
|
aria-label="close"
|
|
onclick={ctx.link().callback(|_| Msg::CloseNewModal)}
|
|
/>
|
|
</header>
|
|
<section class={classes!("modal-card-body")}>
|
|
<table class={classes!("table", "is-bordered", "is-striped", "is-hoverable", "is-fullwidth")}>
|
|
<tbody>
|
|
<tr>
|
|
<th>{ "User" }</th>
|
|
<td>
|
|
<input
|
|
class={classes!("input")}
|
|
type="text"
|
|
required=true
|
|
placeholder="User"
|
|
ref={self.new_modal_user.clone()}
|
|
/>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th>{ "Repository" }</th>
|
|
<td>
|
|
<input
|
|
class={classes!("input")}
|
|
type="text"
|
|
required=true
|
|
placeholder="Repository"
|
|
ref={self.new_modal_repo.clone()}
|
|
/>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</section>
|
|
<footer class={classes!("modal-card-foot")}>
|
|
<div class={classes!("field", "is-grouped")}>
|
|
<p class={classes!("control")}>
|
|
<button
|
|
class={classes!(
|
|
"button",
|
|
"is-success",
|
|
if self.new_modal_save_loading { Some("is-loading") } else { None }
|
|
)}
|
|
onclick={ctx.link().callback(|_| Msg::NewModalSubmit)}
|
|
>
|
|
<span class={classes!("icon", "is-small")}>
|
|
<i class={classes!("fa-solid", "fa-check")} />
|
|
</span>
|
|
<span>{ "Save" }</span>
|
|
</button>
|
|
</p>
|
|
<p class={classes!("control")}>
|
|
<button class={classes!("button")} onclick={ctx.link().callback(|_| Msg::CloseNewModal)}>
|
|
{ "Cancel" }
|
|
</button>
|
|
</p>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
}
|
|
|
|
if let Some(modal) = &self.delete_modal {
|
|
<div class={classes!("modal", "is-active")}>
|
|
<div class={classes!("modal-background")} onclick={ctx.link().callback(|_| Msg::CloseEditModal)} />
|
|
|
|
<div class={classes!("modal-card")}>
|
|
<header class={classes!("modal-card-head")}>
|
|
<p class={classes!("modal-card-title")}>
|
|
{ "Edit" }
|
|
</p>
|
|
<button
|
|
class={classes!("delete")}
|
|
aria-label="close"
|
|
onclick={ctx.link().callback(|_| Msg::CloseEditModal)}
|
|
/>
|
|
</header>
|
|
<section class={classes!("modal-card-body")}>
|
|
<p>
|
|
{ &self.users[modal.0].name }
|
|
{ "/" }
|
|
{ &self.users[modal.0].repositories[modal.1].name }
|
|
</p>
|
|
</section>
|
|
<footer class={classes!("modal-card-foot")}>
|
|
<div class={classes!("field", "is-grouped")}>
|
|
<p class={classes!("control")}>
|
|
<button
|
|
class={classes!(
|
|
"button",
|
|
"is-danger",
|
|
if self.delete_modal_delete_loading { Some("is-loading") } else { None }
|
|
)}
|
|
onclick={ctx.link().callback(|_| Msg::Delete)}
|
|
>
|
|
<span class={classes!("icon", "is-small")}>
|
|
<i class={classes!("fa-solid", "fa-trash")} />
|
|
</span>
|
|
<span>{ "Delete" }</span>
|
|
</button>
|
|
</p>
|
|
<p class={classes!("control")}>
|
|
<button class={classes!("button")} onclick={ctx.link().callback(|_| Msg::CloseEditModal)}>
|
|
{ "Cancel" }
|
|
</button>
|
|
</p>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
}
|
|
</>
|
|
}
|
|
}
|
|
}
|