mcai_workflow/components/edit_parameter/
edit_bool.rs1use 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}