prettier tags in table

src/main.rs

@@ -54,7 +54,7 @@ fn route_index(store: State<RwLock<Store>>, page: Option<usize>) -> Template {
     let mut page = page.unwrap_or_default();
     let n_pages = (rg.data.cards.len() as f64 / PER_PAGE as f64).ceil() as usize;
 
-    if page >= n_pages {
+    if page >= n_pages && page != 0 {
         page = n_pages - 1;
     }
 

src/store/form.rs

@@ -23,6 +23,7 @@ pub struct RenderedField<'a> {
     pub max: String,
     pub all_tags_json: String,
     pub tags_json: String,
+    pub tags: Option<Vec<String>>,
     pub options: Option<Vec<&'a String>>,
     pub value: Cow<'a, str>,
     pub checked: bool,
@@ -118,7 +119,6 @@ impl<'a> RenderedField<'a> {
             FieldKind::Tags { options } => {
                 rendered.kind = "tags";
                 rendered.options = Some(options.iter().collect());
-
                 rendered.all_tags_json = serde_json::to_string(options).unwrap();
             }
             FieldKind::FreeTags { tag_group } => {
@@ -145,12 +145,12 @@ impl<'a> RenderedField<'a> {
             }
             FieldKind::Tags { .. } | FieldKind::FreeTags { .. } => {
                 if let Some(v) = value {
-                    rendered.value = serde_json::from_value::<Vec<String>>(v.clone())
-                        .unwrap()
-                        .join(" ")
-                        .into();
+                    let tags = serde_json::from_value::<Vec<String>>(v.clone()).unwrap();
+                    rendered.value = tags.join(",").into();
+                    rendered.tags = Some(tags);
                     rendered.tags_json = serde_json::to_string(v).unwrap();
                 } else {
+                    rendered.tags = Some(vec![]);
                     rendered.tags_json = "[]".into();
                 }
             }
@@ -274,7 +274,7 @@ pub fn collect_card_form(store: &Store, mut form: MapFromForm) -> IndexMap<Strin
                 }
                 FieldKind::Tags { options } => {
                     let mut tags: Vec<String> = input
-                        .split(' ')
+                        .split(',')
                         .map(ToOwned::to_owned)
                         .filter_map(|tag| {
                             if options.contains(&tag) {
@@ -291,7 +291,7 @@ pub fn collect_card_form(store: &Store, mut form: MapFromForm) -> IndexMap<Strin
                 }
                 FieldKind::FreeTags { .. } => {
                     let mut tags: Vec<String> = input
-                        .split(' ')
+                        .split(',')
                         .map(str::trim)
                         .filter(|s| !s.is_empty())
                         .map(ToOwned::to_owned)

templates/_form_macros.html.tera

@@ -104,7 +104,7 @@
 		let hiden_field = document.querySelector('#field-{{field.key}}');
 
 		let onchange = () => {
-			let values = taggle.tag.values.join(" ");
+			let values = taggle.tag.values.join(",");
 			hiden_field.setAttribute("value", values);
 		};
 

templates/index.html.tera

@@ -28,17 +28,27 @@
 					<a href="/delete/{{card.id}}" onclick="return confirm('Delete card?')">Delete</a>
 				</td>
 			{%- for field in card.fields %}
-				<td>
 				{%- if field.kind == "bool" -%}
+				<td>
 					{% if field.checked %}
 						✔
 					{% else %}
 						✘
 					{% endif %}
+				</td>
+
+				{%- elif field.kind == "tags" or field.kind == "free_tags" -%}
+				<td class="tags">
+					{% for tag in field.tags %}
+						<span class="tag">{{ tag }}</span>
+					{% endfor %}
+				</td>
+
 				{%- else -%}
+				<td>
 					{{ field.value }}
-				{%- endif -%}
 				</td>
+				{%- endif -%}
 			{%- endfor %}
 			</tr>
 		{% endfor %}

templates/static/style.css

@@ -143,6 +143,18 @@ textarea:focus,
 	border-bottom: 2px solid silver;
 }
 
+.cards-table td.tags {
+	padding: .25rem;
+}
+
+.cards-table .tag {
+	background: #E2E1DF;
+	font-size: 90%;
+	padding: 0.25rem .45rem;
+	border-radius: 3px;
+	display: inline-block;
+}
+
 .paginate {
 	margin: 1rem auto;
 	width: 300px;
@@ -182,3 +194,4 @@ textarea:focus,
 	color: gray;
 	background: transparent;
 }
+