From 430cf3e6dfabfdbdd20acd5c02cefbc6349e48b3 Mon Sep 17 00:00:00 2001
From: ryan <ryannganga13325@gmail.com>
Date: Fri, 10 Jan 2025 20:56:25 +0300
Subject: [PATCH] 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                |  7 +++++
 src/components/editable_cell.rs | 47 +++++++++++++++++++++++++--------
 src/components/items_list.rs    |  4 +++
 3 files changed, 47 insertions(+), 11 deletions(-)

diff --git a/assets/style.css b/assets/style.css
index 5fee32f..e6da611 100644
--- a/assets/style.css
+++ b/assets/style.css
@@ -148,4 +148,11 @@ th {
 
 .search-icon i.fas.fa-search {
     margin-left: 5px;
+}
+
+.editable-cell-textarea {
+    width: 100%;
+    height: 100px;
+    resize: vertical;
+    overflow: auto;
 }
\ No newline at end of file
diff --git a/src/components/editable_cell.rs b/src/components/editable_cell.rs
index 45e75e0..8d269a7 100644
--- a/src/components/editable_cell.rs
+++ b/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,15 +67,35 @@ pub fn EditableCell(
 
     view! {
         <div class="editable-cell">
-            <input
-                type="text"
-                prop:value=move || local_value.get()
-                on:input=handle_input
-                on:focus=handle_focus
-                on:blur=handle_blur
-                node_ref=input_ref
-                class="editable-cell-input"
-            />
+            {match input_type {
+                InputType::Text => view! {
+                    <input
+                        type="text"
+                        prop:value=move || local_value.get()
+                        on:input=handle_input
+                        on:focus=handle_focus
+                        on:blur=handle_blur
+                        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,
+}
\ No newline at end of file
diff --git a/src/components/items_list.rs b/src/components/items_list.rs
index e518ee7..d0c17d5 100644
--- a/src/components/items_list.rs
+++ b/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>
                                             }