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