From 9e57f4c3dab79654e0f5697e646da419110125b5 Mon Sep 17 00:00:00 2001 From: Jorge Perez Burgos Date: Thu, 17 Oct 2024 21:12:45 +0200 Subject: [PATCH] Add save icon --- src/table.rs | 72 +++++++++++++++++++++++++++++++++------------- src/utils/icons.rs | 18 +++++++----- 2 files changed, 63 insertions(+), 27 deletions(-) diff --git a/src/table.rs b/src/table.rs index cf5e46a..53f2fcf 100644 --- a/src/table.rs +++ b/src/table.rs @@ -1,4 +1,4 @@ -use std::sync::Arc; +use std::{sync::Arc, usize::MAX}; use dominator::{clone, events, html, with_node, Dom}; use futures_signals::{ @@ -11,7 +11,10 @@ use web_sys::HtmlElement; use crate::{ css::TABLE_ROW, data::Aeat720Record, - utils::{icons::{render_svg_delete_square_icon, render_svg_edit_icon}, usize_to_date}, + utils::{ + icons::{render_svg_delete_square_icon, render_svg_edit_icon, render_svg_save_icon}, + usize_to_date, + }, }; pub struct Table { @@ -22,6 +25,8 @@ pub struct Table { impl Table { pub fn new(aeat720_records: MutableVec) -> Arc { + let editable = MutableVec::new_with_values(vec![false; aeat720_records.lock_ref().len()]); + Arc::new(Self { headers: vec![ "Nombre compañía", @@ -84,6 +89,24 @@ impl Table { let date = usize_to_date(record.first_tx_date) .map_or("".to_string(), |d| d.format("%d/%m/%Y").to_string()); + let action_span = html!("span" => HtmlElement, { + .child(render_svg_edit_icon("red", "24")) + .with_node!(_element => { + .event(clone!(this => move |_: events::Click| { + *this.editable.lock_mut() = true; + })) + }) + }); + + let delete_span = html!("span" => HtmlElement, { + .child(render_svg_delete_square_icon("red", "24")) + .with_node!(_element => { + .event(clone!(this => move |_: events::Click| { + this.data.lock_mut().remove(index); + })) + }) + }); + html!("tr", { .class(&*TABLE_ROW) .children(&mut [ @@ -112,14 +135,9 @@ impl Table { .text(&record.percentage.to_string()) .text("%") }), - html!("td" => HtmlElement, { - .child(render_svg_edit_icon("red", "24")) - .child(render_svg_delete_square_icon("red", "24")) - .with_node!(_element => { - .event(clone!(this => move |_: events::Click| { - this.data.lock_mut().remove(index); - })) - }) + html!("td", { + .child(action_span) + .child(delete_span) }), ]) }) @@ -129,6 +147,24 @@ impl Table { let date = usize_to_date(record.first_tx_date) .map_or("".to_string(), |d| d.format("%d/%m/%Y").to_string()); + let action_span = html!("span" => HtmlElement, { + .child(render_svg_save_icon("red", "24")) + .with_node!(_element => { + .event(clone!(this => move |_: events::Click| { + *this.editable.lock_mut() = false; + })) + }) + }); + + let delete_span = html!("span" => HtmlElement, { + .child(render_svg_delete_square_icon("red", "24")) + .with_node!(_element => { + .event(clone!(this => move |_: events::Click| { + this.data.lock_mut().remove(index); + })) + }) + }); + html!("tr", { .class(&*TABLE_ROW) .children(&mut [ @@ -178,13 +214,9 @@ impl Table { })) .text("%") }), - html!("td" => HtmlElement, { - .child(render_svg_delete_square_icon("red", "24")) - .with_node!(_element => { - .event(clone!(this => move |_: events::Click| { - this.data.lock_mut().remove(index); - })) - }) + html!("td", { + .child(action_span) + .child(delete_span) }), ]) }) @@ -194,11 +226,11 @@ impl Table { html!("tbody", { .children_signal_vec(this.data.signal_vec_cloned() .enumerate().map(clone!(this => move |(index, record)| { + let i = index.get().unwrap_or(usize::MAX); if this.editable.get() { - - Table::render_editable_row(&this, index.get().unwrap_or(usize::MAX), &record) + Table::render_editable_row(&this, i, &record) } else { - Table::render_row(&this, index.get().unwrap_or(usize::MAX), &record) + Table::render_row(&this, i, &record) } })) ) diff --git a/src/utils/icons.rs b/src/utils/icons.rs index ae7a68e..0d3c403 100644 --- a/src/utils/icons.rs +++ b/src/utils/icons.rs @@ -2,8 +2,7 @@ use dominator::{svg, Dom, DomBuilder}; use web_sys::SvgElement; fn svg_icon_attrs(icon: DomBuilder) -> DomBuilder { - icon - .attr("viewBox", "0 0 24 24") + icon.attr("viewBox", "0 0 24 24") .attr("fill", "none") .attr("stroke-width", "2") .attr("stroke-linecap", "round") @@ -12,16 +11,21 @@ fn svg_icon_attrs(icon: DomBuilder) -> DomBuilder { pub fn render_svg_save_icon(color: &str, size: &str) -> Dom { svg!("svg", { - .attr("alt", "edit icon") + .attr("alt", "save icon") .attr("width", size) .attr("height", size) .attr("stroke", color) .apply(svg_icon_attrs) .children(&mut[ svg!("path", { - .attr("d", "M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7") - .attr("d", "M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z") - }) + .attr("d", "M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z") + }), + svg!("polyline", { + .attr("points", "17 21 17 13 7 13 7 21") + }), + svg!("polyline", { + .attr("points", "7 3 7 8 15 8") + }), ]) }) } @@ -39,7 +43,7 @@ pub fn render_svg_edit_icon(color: &str, size: &str) -> Dom { }), svg!("path", { .attr("d", "M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z") - }) + }), ]) }) }