Rick/cds-web
2
0
Fork 0
Code Issues 6 Pull requests Activity

refactor: rework modal management

Browse source
This commit is contained in:
rick 2022-11-01 20:07:32 +01:00
parent f9259d9d10
commit d4b635a462
Signed by: Rick
GPG key ID: 4A6223D66294EB20
1 changed files with 57 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

73
front/src/components/list_groups.rs
View file

@ -16,7 +16,8 @@ pub struct ListGroups {
nb_show: usize,
selected_group: usize,
quit_group: Option<usize>,
join: bool,
/// Which modal we must show
modal: ModalGroup,
}
#[derive(PartialEq, Properties)]
@ -24,6 +25,19 @@ pub struct PropGroups {
pub id: String,
}
/// Which modal we show
enum ModalGroup {
None,
Create,
Join,
}
impl Default for ModalGroup {
fn default() -> Self {
Self::None
}
}
#[derive(PartialEq)]
pub enum MsgListGroups {
/// Rafraichi la page
@ -39,10 +53,12 @@ pub enum MsgListGroups {
//ConfirmLeave,
/// Afficher plus de groupes
More,
/// Afficher ou cacher la fenetre pour creer des groupes
ToggleCreate,
/// Afficher ou cacher la fenetre pour rejoindre des groupes
ToggleJoin,
/// Annuler la sélection de nouveaux groupes
CancelJoin,
/// Ferme les fenetres modals
CloseModal,
/// Lorsque l'utilisateur clique sur un groupe, on l'enregistre au vu de
/// son ajout futur
SelectGroup(usize),
@ -130,7 +146,8 @@ impl Component for ListGroups {
let more = ctx.link().callback(|_| MsgListGroups::More);
let join = ctx.link().callback(|_| MsgListGroups::ToggleJoin);
let cancel_join = ctx.link().callback(|_| MsgListGroups::CancelJoin);
let create = ctx.link().callback(|_| MsgListGroups::ToggleCreate);
let cancel_join = ctx.link().callback(|_| MsgListGroups::CloseModal);
let finish_join = ctx.link().callback(|_| MsgListGroups::SendJoin);
let groups: Vec<Html> = self.groups[..self.nb_show].iter().enumerate().map(|(id, group)| { html!{
@ -146,12 +163,8 @@ impl Component for ListGroups {
groups_final.push(html! { <Flex> { g.to_vec().into_flex_items() } </Flex> });
}
html! {
<>
<ToastViewer />
<Title>{ "Vos groupes" }</Title>
<Button onclick={join} icon={Some(Icon::PlusCircleIcon)}>{ "Rejoindre un groupe" }</Button>
if self.join {
let modal = match self.modal {
ModalGroup::Join => html! {
<Modal onclose={cancel_join} variant={ ModalVariant::Medium }>
<br />
<Gallery gutter=true>
@ -169,7 +182,19 @@ impl Component for ListGroups {
</Gallery>
<Button variant={Variant::Primary} onclick={finish_join}>{ "Valider" }</Button>
</Modal>
}
},
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 }
if self.groups.len() > 0 {
{
@ -233,11 +258,27 @@ impl Component for ListGroups {
true
}
MsgListGroups::ToggleJoin => {
self.join = !self.join;
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::CancelJoin => {
self.join = false;
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,
}
true
}
MsgListGroups::CloseModal => {
self.modal = ModalGroup::None;
true
}
MsgListGroups::SendJoin => {
@ -289,8 +330,8 @@ impl Component for ListGroups {
}
ctx.link().send_message(MsgListGroups::Info(
String::from(&format!("Vous avez bien quitté le groupe {}", name)),
String::new(),
String::from(&format!("Vous avez bien quitté le groupe {}", name)),
String::new(),
));
true
}