mcai_workflow/components/
modal.rs

1use crate::Button;
2use css_in_rust_next::Style;
3use yew::{html, Callback, Children, Component, Context, Html, Properties};
4use yew_feather::{chevron_right::ChevronRight, trash_2::Trash2, x::X};
5
6#[derive(PartialEq)]
7pub enum ActionButton {
8  Submit(bool),
9  Update(bool),
10  Delete,
11}
12
13#[derive(PartialEq, Properties)]
14pub struct ModalProperties {
15  pub height: String,
16  pub width: String,
17  #[prop_or_default]
18  pub children: Children,
19  pub event: Callback<ModalMessage>,
20  #[prop_or_default]
21  pub actions: Vec<ActionButton>,
22  pub modal_title: String,
23}
24
25pub enum ModalMessage {
26  Cancel,
27  Submit,
28  Update,
29  Delete,
30}
31
32pub struct Modal {
33  style: Style,
34}
35
36impl Component for Modal {
37  type Message = ModalMessage;
38  type Properties = ModalProperties;
39
40  fn create(_ctx: &Context<Self>) -> Self {
41    let style = Style::create("Component", include_str!("modal.css")).unwrap();
42    Modal { style }
43  }
44
45  fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
46    ctx.props().event.emit(msg);
47    true
48  }
49
50  fn view(&self, ctx: &Context<Self>) -> Html {
51    let buttons: Html = ctx
52      .props()
53      .actions
54      .iter()
55      .map(|action| match action {
56        ActionButton::Submit(enabled) => html!(
57          <Button
58            label="Submit"
59            icon={html!(<ChevronRight/>)}
60            disabled={!*enabled}
61            onclick={ctx.link().callback(|_|ModalMessage::Submit)}
62            />
63        ),
64        ActionButton::Update(enabled) => html!(
65          <Button
66            label="Update"
67            icon={html!(<ChevronRight/>)}
68            disabled={!*enabled}
69            onclick={ctx.link().callback(|_|ModalMessage::Update)}
70            />
71        ),
72        ActionButton::Delete => html!(
73          <Button
74            label="Delete"
75            icon={html!(<Trash2/>)}
76            onclick={ctx.link().callback(|_|ModalMessage::Delete)}
77            />
78        ),
79      })
80      .collect();
81
82    html!(
83      <div class={self.style.clone()}>
84        <div class="inner">
85          <div class="title">
86            <span> {ctx.props().modal_title.clone()} </span>
87            <span class="close" onclick={ctx.link().callback(|_|ModalMessage::Cancel)} > <X/> </span>
88          </div>
89          <div class="modalContent">
90            { for ctx.props().children.iter() }
91          </div>
92          <div class="actions">
93            <Button
94              label="Cancel"
95              icon={html!(<X/>)}
96              onclick={ctx.link().callback(|_|ModalMessage::Cancel)}
97              />
98            {buttons}
99          </div>
100        </div>
101      </div>
102    )
103  }
104}
mcai_workflow/components/modal.rs

mcai_workflow/components/
modal.rs
