2022-10-28 16:57:08 +00:00
|
|
|
use gloo_net::http::Request;
|
|
|
|
use gloo_net::Error;
|
2022-10-30 15:32:27 +00:00
|
|
|
use patternfly_yew::{
|
|
|
|
Button, Card, Flex, FlexModifier, Gallery, Icon, Modal, ModalVariant, Title, ToFlexItems,
|
|
|
|
ToastViewer, Variant, WithBreakpointExt,
|
|
|
|
};
|
|
|
|
use yew::prelude::*;
|
2022-10-28 16:57:08 +00:00
|
|
|
|
|
|
|
use crate::components::{Group, Home, TestMessage, ToastFields, ToastType};
|
|
|
|
|
2022-10-29 11:39:11 +00:00
|
|
|
#[derive(Default)]
|
2022-10-28 16:57:08 +00:00
|
|
|
pub struct ListGroups {
|
|
|
|
idUser: String,
|
|
|
|
groups: Vec<Group>,
|
2022-10-29 11:39:11 +00:00
|
|
|
free_groups: Vec<Group>,
|
2022-10-28 16:57:08 +00:00
|
|
|
nb_show: usize,
|
2022-10-29 11:39:11 +00:00
|
|
|
selected_group: usize,
|
2022-10-29 21:14:51 +00:00
|
|
|
quit_group: Option<usize>,
|
2022-11-01 19:07:32 +00:00
|
|
|
/// Which modal we must show
|
|
|
|
modal: ModalGroup,
|
2022-10-28 16:57:08 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
#[derive(PartialEq, Properties)]
|
|
|
|
pub struct PropGroups {
|
|
|
|
pub id: String,
|
|
|
|
}
|
|
|
|
|
2022-11-01 19:07:32 +00:00
|
|
|
/// Which modal we show
|
|
|
|
enum ModalGroup {
|
|
|
|
None,
|
|
|
|
Create,
|
|
|
|
Join,
|
|
|
|
}
|
|
|
|
|
|
|
|
impl Default for ModalGroup {
|
|
|
|
fn default() -> Self {
|
|
|
|
Self::None
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2022-10-28 16:57:08 +00:00
|
|
|
#[derive(PartialEq)]
|
|
|
|
pub enum MsgListGroups {
|
2022-10-29 21:14:51 +00:00
|
|
|
/// Rafraichi la page
|
|
|
|
Refresh,
|
2022-10-29 11:39:11 +00:00
|
|
|
/// Tous les groupes ont été récupéré
|
2022-10-28 16:57:08 +00:00
|
|
|
Done(Vec<Group>),
|
2022-10-29 11:39:11 +00:00
|
|
|
/// Tous les groupes sans l'utilisateur ont été récupéré
|
|
|
|
DoneFree(Vec<Group>),
|
2022-10-29 21:14:51 +00:00
|
|
|
/// Quitte un groupe
|
|
|
|
Leave(usize),
|
|
|
|
FinishLeave(usize),
|
|
|
|
/// Confirmation du retrait du groupe
|
|
|
|
//ConfirmLeave,
|
2022-10-29 11:39:11 +00:00
|
|
|
/// Afficher plus de groupes
|
|
|
|
More,
|
2022-11-01 19:07:32 +00:00
|
|
|
/// Afficher ou cacher la fenetre pour creer des groupes
|
|
|
|
ToggleCreate,
|
2022-10-29 11:39:11 +00:00
|
|
|
/// Afficher ou cacher la fenetre pour rejoindre des groupes
|
|
|
|
ToggleJoin,
|
2022-11-01 19:07:32 +00:00
|
|
|
/// Ferme les fenetres modals
|
|
|
|
CloseModal,
|
2022-10-29 21:14:51 +00:00
|
|
|
/// Lorsque l'utilisateur clique sur un groupe, on l'enregistre au vu de
|
2022-10-29 11:39:11 +00:00
|
|
|
/// son ajout futur
|
|
|
|
SelectGroup(usize),
|
|
|
|
/// Sélection du nouveau groupe faite, envoie d'un requete en back
|
2022-10-29 21:14:51 +00:00
|
|
|
SendJoin,
|
|
|
|
/// Requete en back fini
|
2022-10-29 11:39:11 +00:00
|
|
|
FinishJoin,
|
|
|
|
/// Popup d'informations
|
2022-10-28 16:57:08 +00:00
|
|
|
Info(String, String),
|
2022-10-29 11:39:11 +00:00
|
|
|
/// Popup d'erreur
|
2022-10-28 16:57:08 +00:00
|
|
|
Error(String, String),
|
|
|
|
}
|
|
|
|
|
|
|
|
impl Component for ListGroups {
|
|
|
|
type Message = MsgListGroups;
|
|
|
|
type Properties = PropGroups;
|
|
|
|
|
|
|
|
fn create(ctx: &Context<Self>) -> Self {
|
|
|
|
Self {
|
|
|
|
idUser: ctx.props().id.clone(),
|
2022-10-29 11:39:11 +00:00
|
|
|
..Default::default()
|
2022-10-28 16:57:08 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
fn view(&self, ctx: &Context<Self>) -> Html {
|
|
|
|
if self.groups.len() == 0 {
|
|
|
|
let id = self.idUser.clone();
|
|
|
|
ctx.link().send_future(async move {
|
|
|
|
match Request::get(&format!("/api/users/{}/groups", id))
|
|
|
|
.send()
|
|
|
|
.await
|
|
|
|
{
|
|
|
|
Ok(resp) => {
|
|
|
|
if resp.ok() {
|
|
|
|
let json: Result<Vec<Group>, Error> = resp.json().await;
|
|
|
|
match json {
|
|
|
|
Ok(mut json) => {
|
|
|
|
for item in json.iter_mut() {
|
|
|
|
item.get_game_name().await;
|
|
|
|
}
|
|
|
|
return MsgListGroups::Done(json);
|
|
|
|
}
|
|
|
|
Err(err) => {
|
|
|
|
log::info!("{}", err.to_string());
|
|
|
|
()
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
Err(_) => (),
|
|
|
|
};
|
|
|
|
MsgListGroups::Info(String::from("Ok"), String::new())
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2022-10-29 11:39:11 +00:00
|
|
|
if self.free_groups.len() == 0 {
|
|
|
|
let id = self.idUser.clone();
|
|
|
|
ctx.link().send_future(async move {
|
|
|
|
match Request::get(&format!("/api/users/{}/not/groups", id))
|
|
|
|
.send()
|
|
|
|
.await
|
|
|
|
{
|
|
|
|
Ok(resp) => {
|
|
|
|
if resp.ok() {
|
|
|
|
let json: Result<Vec<Group>, Error> = resp.json().await;
|
|
|
|
match json {
|
|
|
|
Ok(mut json) => {
|
|
|
|
for item in json.iter_mut() {
|
|
|
|
item.get_game_name().await;
|
|
|
|
}
|
|
|
|
return MsgListGroups::DoneFree(json);
|
|
|
|
}
|
|
|
|
Err(err) => {
|
|
|
|
log::info!("{}", err.to_string());
|
|
|
|
()
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
Err(_) => (),
|
|
|
|
};
|
|
|
|
MsgListGroups::Info(String::from("Ok"), String::new())
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
let more = ctx.link().callback(|_| MsgListGroups::More);
|
|
|
|
let join = ctx.link().callback(|_| MsgListGroups::ToggleJoin);
|
2022-11-01 19:07:32 +00:00
|
|
|
let create = ctx.link().callback(|_| MsgListGroups::ToggleCreate);
|
|
|
|
let cancel_join = ctx.link().callback(|_| MsgListGroups::CloseModal);
|
2022-10-29 21:14:51 +00:00
|
|
|
let finish_join = ctx.link().callback(|_| MsgListGroups::SendJoin);
|
2022-10-29 11:39:11 +00:00
|
|
|
|
2022-10-29 21:14:51 +00:00
|
|
|
let groups: Vec<Html> = self.groups[..self.nb_show].iter().enumerate().map(|(id, group)| { html!{
|
|
|
|
<Card>
|
2022-10-28 23:15:43 +00:00
|
|
|
<h1>{ group.name.clone() }</h1>
|
|
|
|
<h2>{ group.game.clone() }</h2>
|
2022-10-29 21:14:51 +00:00
|
|
|
<Button onclick={ ctx.link().callback(move |_| MsgListGroups::Leave(id)) }variant={Variant::DangerSecondary}>{ "Quitter" }</Button>
|
|
|
|
</Card>
|
2022-10-28 23:15:43 +00:00
|
|
|
}}).collect::<Vec<Html>>();
|
|
|
|
|
|
|
|
let mut groups_final: Vec<Html> = Vec::new();
|
|
|
|
for g in groups.chunks(3) {
|
2022-10-30 15:32:27 +00:00
|
|
|
groups_final.push(html! { <Flex> { g.to_vec().into_flex_items() } </Flex> });
|
2022-10-28 23:15:43 +00:00
|
|
|
}
|
2022-10-28 16:57:08 +00:00
|
|
|
|
2022-11-01 19:07:32 +00:00
|
|
|
let modal = match self.modal {
|
|
|
|
ModalGroup::Join => html! {
|
2022-10-29 11:39:11 +00:00
|
|
|
<Modal onclose={cancel_join} variant={ ModalVariant::Medium }>
|
2022-10-29 21:14:51 +00:00
|
|
|
<br />
|
|
|
|
<Gallery gutter=true>
|
2022-10-29 11:39:11 +00:00
|
|
|
{ self.free_groups.iter().enumerate().map(|(id, group)| {
|
2022-10-29 21:14:51 +00:00
|
|
|
html! {
|
2022-10-29 11:39:11 +00:00
|
|
|
<Card
|
|
|
|
onclick={ctx.link().callback(move |_| MsgListGroups::SelectGroup(id))}
|
|
|
|
selectable=true
|
|
|
|
selected={self.selected_group == id}
|
|
|
|
>
|
|
|
|
{group.name.clone()}
|
|
|
|
</Card>
|
|
|
|
}
|
2022-10-29 21:14:51 +00:00
|
|
|
}).collect::<Vec<Html>>() }
|
|
|
|
</Gallery>
|
|
|
|
<Button variant={Variant::Primary} onclick={finish_join}>{ "Valider" }</Button>
|
2022-10-29 11:39:11 +00:00
|
|
|
</Modal>
|
2022-11-01 19:07:32 +00:00
|
|
|
},
|
|
|
|
ModalGroup::Create => html! {},
|
|
|
|
ModalGroup::None => html! {},
|
|
|
|
};
|
|
|
|
|
|
|
|
html! {
|
|
|
|
<>
|
|
|
|
<ToastViewer />
|
|
|
|
<Title>{ "Vos groupes" }</Title>
|
|
|
|
<Button onclick={create} icon={Some(Icon::PlusCircleIcon)}>{ "Créer un groupe" }</Button>
|
|
|
|
<Button onclick={join} icon={Some(Icon::PlusCircleIcon)}>{ "Rejoindre un groupe" }</Button>
|
|
|
|
|
|
|
|
{ modal }
|
2022-10-29 11:39:11 +00:00
|
|
|
|
2022-10-28 16:57:08 +00:00
|
|
|
if self.groups.len() > 0 {
|
|
|
|
{
|
2022-10-28 23:15:43 +00:00
|
|
|
html!{
|
2022-10-28 16:57:08 +00:00
|
|
|
|
2022-10-28 23:15:43 +00:00
|
|
|
<div>
|
|
|
|
<Flex modifiers={[FlexModifier::Column.all()]}>
|
|
|
|
{ groups_final.into_flex_items() }
|
|
|
|
</Flex>
|
|
|
|
|
|
|
|
if self.nb_show < self.groups.len() {
|
2022-10-29 11:39:11 +00:00
|
|
|
<Button variant={Variant::Primary} onclick={more}>{ "Plus de groupes" }</Button>
|
2022-10-28 23:15:43 +00:00
|
|
|
}
|
|
|
|
</div>
|
|
|
|
}
|
2022-10-28 16:57:08 +00:00
|
|
|
}
|
|
|
|
} else {
|
|
|
|
<p>{ "Vous n'êtes dans aucun groupe." }</p>
|
|
|
|
}
|
|
|
|
</>
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
|
|
|
|
match msg {
|
|
|
|
MsgListGroups::Info(title, body) => {
|
|
|
|
if let Some(parent) = ctx.link().get_parent() {
|
|
|
|
(parent.clone())
|
|
|
|
.downcast::<Home>()
|
|
|
|
.send_message(TestMessage::Toast(ToastType::Info(ToastFields {
|
|
|
|
title,
|
|
|
|
body,
|
|
|
|
})))
|
|
|
|
}
|
2022-10-29 21:14:51 +00:00
|
|
|
|
|
|
|
false
|
2022-10-28 16:57:08 +00:00
|
|
|
}
|
|
|
|
MsgListGroups::Error(title, body) => {
|
|
|
|
if let Some(parent) = ctx.link().get_parent() {
|
|
|
|
(parent.clone())
|
|
|
|
.downcast::<Home>()
|
|
|
|
.send_message(TestMessage::Toast(ToastType::Error(ToastFields {
|
|
|
|
title,
|
|
|
|
body,
|
|
|
|
})))
|
|
|
|
}
|
2022-10-29 21:14:51 +00:00
|
|
|
|
|
|
|
false
|
2022-10-28 16:57:08 +00:00
|
|
|
}
|
|
|
|
MsgListGroups::Done(groups) => {
|
|
|
|
let len = groups.len();
|
|
|
|
self.groups = groups;
|
2022-10-30 15:32:27 +00:00
|
|
|
self.nb_show = if len < 3 { len } else { 3 };
|
2022-10-28 16:57:08 +00:00
|
|
|
|
2022-10-29 21:14:51 +00:00
|
|
|
true
|
2022-10-28 16:57:08 +00:00
|
|
|
}
|
2022-10-29 11:39:11 +00:00
|
|
|
MsgListGroups::DoneFree(groups) => {
|
|
|
|
let len = groups.len();
|
|
|
|
self.free_groups = groups;
|
|
|
|
|
2022-10-29 21:14:51 +00:00
|
|
|
true
|
2022-10-29 11:39:11 +00:00
|
|
|
}
|
|
|
|
MsgListGroups::ToggleJoin => {
|
2022-11-01 19:07:32 +00:00
|
|
|
let modal = &self.modal;
|
|
|
|
match modal {
|
|
|
|
ModalGroup::Join => self.modal = ModalGroup::None,
|
|
|
|
ModalGroup::None => self.modal = ModalGroup::Join,
|
|
|
|
ModalGroup::Create => self.modal = ModalGroup::Join,
|
|
|
|
}
|
|
|
|
|
|
|
|
true
|
|
|
|
}
|
|
|
|
MsgListGroups::ToggleCreate => {
|
|
|
|
let modal = &self.modal;
|
|
|
|
match modal {
|
|
|
|
ModalGroup::Create => self.modal = ModalGroup::None,
|
|
|
|
ModalGroup::None => self.modal = ModalGroup::Create,
|
|
|
|
ModalGroup::Join => self.modal = ModalGroup::Create,
|
|
|
|
}
|
|
|
|
|
2022-10-29 21:14:51 +00:00
|
|
|
true
|
2022-10-29 11:39:11 +00:00
|
|
|
}
|
2022-11-01 19:07:32 +00:00
|
|
|
MsgListGroups::CloseModal => {
|
|
|
|
self.modal = ModalGroup::None;
|
2022-10-29 21:14:51 +00:00
|
|
|
true
|
|
|
|
}
|
|
|
|
MsgListGroups::SendJoin => {
|
|
|
|
if let Some(group) = self.free_groups.get(self.selected_group) {
|
|
|
|
let id = group.id.clone();
|
|
|
|
ctx.link().send_future(async move {
|
2022-10-30 15:32:27 +00:00
|
|
|
match Request::put(&format!("/api/groups/{}/join", id))
|
|
|
|
.send()
|
|
|
|
.await
|
|
|
|
{
|
2022-10-29 21:14:51 +00:00
|
|
|
Ok(resp) => {
|
|
|
|
if resp.ok() {
|
|
|
|
MsgListGroups::FinishJoin
|
|
|
|
} else {
|
|
|
|
MsgListGroups::Error(
|
|
|
|
String::from("Erreur"),
|
2022-10-30 15:32:27 +00:00
|
|
|
String::from("Pas de réponse 200"),
|
2022-10-29 21:14:51 +00:00
|
|
|
)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
Err(_) => {
|
2022-10-30 15:32:27 +00:00
|
|
|
MsgListGroups::Error(String::from("Erreur"), String::from("Bruh"))
|
2022-10-29 21:14:51 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
} else {
|
|
|
|
ctx.link().send_message(MsgListGroups::Error(
|
|
|
|
String::from("Erreur"),
|
2022-10-30 15:32:27 +00:00
|
|
|
String::from("Contactez nous si vous êtes tombés sur cette erreur."),
|
2022-10-29 21:14:51 +00:00
|
|
|
));
|
|
|
|
}
|
|
|
|
|
|
|
|
false
|
2022-10-29 11:39:11 +00:00
|
|
|
}
|
|
|
|
MsgListGroups::FinishJoin => {
|
2022-10-30 15:32:27 +00:00
|
|
|
self.groups
|
|
|
|
.push(self.free_groups.remove(self.selected_group));
|
2022-10-29 21:14:51 +00:00
|
|
|
if self.nb_show < 3 {
|
|
|
|
self.nb_show += 1;
|
|
|
|
}
|
|
|
|
true
|
2022-10-30 15:32:27 +00:00
|
|
|
}
|
|
|
|
MsgListGroups::FinishLeave(id) => {
|
2022-11-01 19:06:36 +00:00
|
|
|
let group = self.groups.remove(id);
|
|
|
|
let name = group.name.clone();
|
|
|
|
self.free_groups.push(group);
|
2022-10-29 21:14:51 +00:00
|
|
|
if self.nb_show > 0 && id <= self.nb_show {
|
|
|
|
self.nb_show -= 1;
|
|
|
|
}
|
2022-11-01 19:06:36 +00:00
|
|
|
|
|
|
|
ctx.link().send_message(MsgListGroups::Info(
|
2022-11-01 19:07:32 +00:00
|
|
|
String::from(&format!("Vous avez bien quitté le groupe {}", name)),
|
|
|
|
String::new(),
|
2022-11-01 19:06:36 +00:00
|
|
|
));
|
2022-10-29 21:14:51 +00:00
|
|
|
true
|
2022-10-29 11:39:11 +00:00
|
|
|
}
|
|
|
|
MsgListGroups::SelectGroup(id) => {
|
|
|
|
self.selected_group = id;
|
2022-10-29 21:14:51 +00:00
|
|
|
true
|
|
|
|
}
|
|
|
|
MsgListGroups::Leave(id_group) => {
|
|
|
|
if let Some(group) = self.groups.get(id_group) {
|
|
|
|
let id = group.id.clone();
|
|
|
|
ctx.link().send_future(async move {
|
2022-10-30 15:32:27 +00:00
|
|
|
match Request::put(&format!("/api/groups/{}/leave", id))
|
|
|
|
.send()
|
|
|
|
.await
|
|
|
|
{
|
2022-10-29 21:14:51 +00:00
|
|
|
Ok(resp) => {
|
|
|
|
if resp.ok() {
|
|
|
|
MsgListGroups::FinishLeave(id_group)
|
|
|
|
} else {
|
|
|
|
MsgListGroups::Error(
|
|
|
|
String::from("Erreur"),
|
2022-10-30 15:32:27 +00:00
|
|
|
String::from("Pas de réponse 200"),
|
2022-10-29 21:14:51 +00:00
|
|
|
)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
Err(_) => {
|
2022-10-30 15:32:27 +00:00
|
|
|
MsgListGroups::Error(String::from("Erreur"), String::from("Bruh"))
|
2022-10-29 21:14:51 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
} else {
|
|
|
|
ctx.link().send_message(MsgListGroups::Error(
|
|
|
|
String::from("Erreur"),
|
2022-10-30 15:32:27 +00:00
|
|
|
String::from("Contactez nous si vous êtes tombés sur cette erreur."),
|
2022-10-29 21:14:51 +00:00
|
|
|
));
|
|
|
|
}
|
|
|
|
false
|
2022-10-29 11:39:11 +00:00
|
|
|
}
|
2022-11-01 19:06:36 +00:00
|
|
|
MsgListGroups::Refresh => true,
|
2022-10-28 16:57:08 +00:00
|
|
|
MsgListGroups::More => {
|
|
|
|
self.nb_show += 3;
|
|
|
|
if self.nb_show > self.groups.len() {
|
|
|
|
self.nb_show -= self.nb_show - self.groups.len();
|
|
|
|
}
|
2022-10-29 21:14:51 +00:00
|
|
|
true
|
2022-10-28 16:57:08 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|