mcai_workflow/components/edit_parameter/
edit_bool.rs

1use crate::{ActionButton, Button, Modal, ModalMessage};
2use css_in_rust_next::Style;
3use yew::{html, Callback, Component, Context, Html, Properties};
4use yew_feather::{plus::Plus, trash_2::Trash2};
5
6#[derive(PartialEq, Properties)]
7pub struct EditBoolProperties {
8  pub title: String,
9  pub field_name: String,
10  pub event: Callback<EditBoolMessage>,
11  pub value: Option<bool>,
12  pub required: bool,
13}
14
15pub enum EditBoolMessage {
16  Submit(Option<bool>),
17  Cancel,
18}
19
20pub enum InternalMessage {
21  Toggle,
22  Modal(ModalMessage),
23  AddValue,
24  RemoveValue,
25}
26
27pub struct EditBool {
28  style: Style,
29  value: Option<bool>,
30}
31
32impl Component for EditBool {
33  type Message = InternalMessage;
34  type Properties = EditBoolProperties;
35
36  fn create(ctx: &Context<Self>) -> Self {
37    let style = Style::create(
38      "Component",
39      concat!(
40        include_str!("edit_style.css"),
41        include_str!("edit_bool.css")
42      ),
43    )
44    .unwrap();
45
46    let value = ctx.props().value;
47    EditBool { style, value }
48  }
49
50  fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
51    match msg {
52      InternalMessage::Toggle => {
53        if let Some(value) = &mut self.value {
54          *value = !*value;
55        } else {
56          self.value = Some(true);
57        }
58        true
59      }
60      InternalMessage::Modal(message) => {
61        let event = match message {
62          ModalMessage::Submit | ModalMessage::Update => Some(EditBoolMessage::Submit(self.value)),
63          ModalMessage::Cancel => Some(EditBoolMessage::Cancel),
64          ModalMessage::Delete => None,
65        };
66
67        if let Some(event) = event {
68          ctx.props().event.emit(event)
69        }
70        false
71      }
72      InternalMessage::AddValue => {
73        self.value = Some(true);
74        true
75      }
76      InternalMessage::RemoveValue => {
77        self.value = None;
78        true
79      }
80    }
81  }
82
83  fn view(&self, ctx: &Context<Self>) -> Html {
84    let input_bool_callback = ctx.link().callback(|_| InternalMessage::Toggle);
85
86    let action_buttons = vec![ActionButton::Submit(true)];
87
88    let inner_modal: Html = if ctx.props().required {
89      html! (<input type="checkbox" checked={self.value.unwrap_or_default()} onchange={input_bool_callback} />)
90    } else if let Some(value) = self.value {
91      html!(
92        <>
93        <div>
94          <input type="checkbox" checked={value} onchange={input_bool_callback} />
95        </div>
96        <Button
97          label="Remove value"
98          icon={html!(<Trash2 />)}
99          onclick={ctx.link().callback(|_|InternalMessage::RemoveValue)}
100          />
101        </>
102      )
103    } else {
104      html!(
105        <Button
106          label="Add value"
107          icon={html!(<Plus />)}
108          onclick={ctx.link().callback(|_|InternalMessage::AddValue)}
109          />
110      )
111    };
112
113    html!(
114      <Modal
115        event={ctx.link().callback(InternalMessage::Modal)}
116        height="50vh" width="19vw"
117        modal_title={ctx.props().title.clone()}
118        actions={action_buttons}>
119        <div class={self.style.clone()}>
120          <div class="editInput">
121            {inner_modal}
122          </div>
123        </div>
124      </Modal>
125    )
126  }
127}