feat(editable cells): add support for multiple input types in EditableCell component

- Introduced `InputType` enum to support both `Text` and `TextArea` input types.
- Updated `EditableCell` component to accept `input_type` as a parameter.
- Added logic to handle input events for both `Text` and `TextArea` fields.
- Implemented `textarea_ref` to support `<textarea>` elements.
- Used match expressions to dynamically render either `<input>` or `<textarea>` based on the `input_type` provided.

assets/style.css

@@ -149,3 +149,10 @@ th {
 .search-icon i.fas.fa-search {
     margin-left: 5px;
 }
+
+.editable-cell-textarea {
+    width: 100%;
+    height: 100px;
+    resize: vertical;
+    overflow: auto;
+}

src/components/editable_cell.rs

@@ -11,13 +11,18 @@ pub fn EditableCell(
     set_focused_cell: WriteSignal<Option<String>>,
     on_focus: Option<Callback<()>>,
     on_blur: Option<Callback<()>>,
+    input_type: InputType,
 ) -> impl IntoView {
     let input_ref = create_node_ref::<html::Input>();
+    let textarea_ref = create_node_ref::<html::Textarea>();
     let (local_value, set_local_value) = create_signal(value.clone());
-
+    let input_type_clone = input_type.clone();
     // Handle input event
     let handle_input = move |e: web_sys::Event| {
-        let new_value = event_target_value(&e);
+        let new_value = match input_type_clone {
+            InputType::Text => event_target_value(&e),
+            InputType::TextArea => event_target_value(&e),
+        };
         log!("Input event: {}", new_value);
         set_local_value.set(new_value);
     };
@@ -62,6 +67,8 @@ pub fn EditableCell(
 
     view! {
         <div class="editable-cell">
+            {match input_type {
+                InputType::Text => view! {
                     <input
                         type="text"
                         prop:value=move || local_value.get()
@@ -71,6 +78,24 @@ pub fn EditableCell(
                         node_ref=input_ref
                         class="editable-cell-input"
                     />
+                }.into_view(),
+                InputType::TextArea => view! {
+                    <textarea
+                        prop:value=move || local_value.get()
+                        on:input=handle_input
+                        on:focus=handle_focus
+                        on:blur=handle_blur
+                        node_ref=textarea_ref
+                        class="editable-cell-input"
+                    />
+                }.into_view()
+            }}
         </div>
     }
 }
+
+#[derive(Debug, PartialEq, Eq, Clone)]
+pub enum InputType {
+    Text,
+    TextArea,
+}

src/components/items_list.rs

@@ -1,4 +1,5 @@
 use crate::components::editable_cell::EditableCell;
+use crate::components::editable_cell::InputType;
 use crate::components::tag_editor::TagEditor;
 use leptos::*;
 use serde::Deserialize;
@@ -195,6 +196,7 @@ pub fn ItemsList(
                                                                     });
                                                                 });
                                                             }))
+                                                            input_type=InputType::Text
                                                         />
                                                         <button class="search-icon" on:click=move |_| {
                                                             log!("Search icon clicked, showing suggestions");
@@ -271,6 +273,7 @@ pub fn ItemsList(
                                                     on_blur=Some(Callback::new(move |_| {
                                                         log!("Description input blurred");
                                                     }))
+                                                    input_type=InputType::TextArea
                                                 />
                                                 }.into_view(),
                                                 "Tags" => view! {
@@ -319,6 +322,7 @@ pub fn ItemsList(
                                                         on_blur=Some(Callback::new(move |_| {
                                                             log!("Custom property input blurred");
                                                         }))
+                                                        input_type=InputType::TextArea
                                                     />
                                                 </td>
                                             }