From 076ba6f7fd8ced848facc9062fe80aeaba586fe0 Mon Sep 17 00:00:00 2001
From: Tim Cowlishaw <tim@timcowlishaw.co.uk>
Date: Fri, 20 Dec 2024 18:16:02 +0100
Subject: [PATCH] device edit form: tags, map, postprocessing

---
 app/assets/stylesheets/global.scss       | 3 +++
 app/controllers/ui/devices_controller.rb | 4 ++--
 app/javascript/application.js            | 4 ++++
 app/views/ui/devices/edit.html.erb       | 4 ++--
 config/locales/views/devices/en.yml      | 3 ++-
 package.json                             | 1 +
 yarn.lock                                | 5 +++++
 7 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/app/assets/stylesheets/global.scss b/app/assets/stylesheets/global.scss
index d0d0ee05..84e11093 100644
--- a/app/assets/stylesheets/global.scss
+++ b/app/assets/stylesheets/global.scss
@@ -91,6 +91,9 @@ body > .container {
     box-shadow: none;
     border: 3px solid $black;
   }
+  &.dropdown {
+    padding: 0.75rem 1.5rem 0.75rem 0.75rem;
+  }
 }
 
 .form-check {
diff --git a/app/controllers/ui/devices_controller.rb b/app/controllers/ui/devices_controller.rb
index 7943adf7..0731c0a8 100644
--- a/app/controllers/ui/devices_controller.rb
+++ b/app/controllers/ui/devices_controller.rb
@@ -46,10 +46,10 @@ def device_params
         :is_private,
         :precise_location,
         :enable_forwarding,
-        :tags,
         :notify_low_battery,
         :notify_stopped_publishing,
-        {  :postprocessing => :hardware_url }
+        { :tag_ids => [] },
+        { :postprocessing_attributes => :hardware_url },
       )
     end
 
diff --git a/app/javascript/application.js b/app/javascript/application.js
index 2918fdf0..cb4f5265 100644
--- a/app/javascript/application.js
+++ b/app/javascript/application.js
@@ -1,4 +1,5 @@
 import * as $ from "jquery";
+import Tags from "bootstrap5-tags";
 import {setupCopyableInputs} from "components/copyable_input";
 import {setupDeviceMaps} from "components/device_map";
 import {setupMapLocationPickers} from "components/map_location_picker";
@@ -8,5 +9,8 @@ export default function setupApplication() {
     setupCopyableInputs();
     setupDeviceMaps();
     setupMapLocationPickers();
+    Tags.init(".tag-select", {
+      baseClass: "tags-badge badge bg-light border text-dark text-truncate p-2 rounded-4"
+    });
   });
 }
diff --git a/app/views/ui/devices/edit.html.erb b/app/views/ui/devices/edit.html.erb
index 69e7a193..b435d776 100644
--- a/app/views/ui/devices/edit.html.erb
+++ b/app/views/ui/devices/edit.html.erb
@@ -30,13 +30,13 @@
   <div class="mt-5">
     <h2 class="mb-0"><%= t(:edit_device_tags_subhead) %></h2>
     <p class="mb-3"> <%= t(:edit_device_tags_blurb) %></p>
-    <p style="color: red;"><strong>TODO</strong> implement tags</p>
+    <%= f.select :tag_ids, options_from_collection_for_select(Tag.all, :id, :name, { selected: @device.tag_ids }), { label: t(:edit_device_tags_label)},  { multiple: true, class: "tag-select" } %>
   </div>
   <div class="mt-5">
     <h2 class="mb-0"><%= t(:edit_device_postprocessing_subhead) %></h2>
     <p class="mb-3"> <%= t(:edit_device_postprocessing_blurb) %></p>
     <%= f.fields_for :postprocessing, @device.postprocessing || Postprocessing.new do |fp| %>
-      <%= fp.text_field :hardware_url %>
+      <%= fp.text_field :hardware_url, label: t(:edit_device_hardware_url_label) %>
     <% end %>
   </div>
   <div class="mt-5">
diff --git a/config/locales/views/devices/en.yml b/config/locales/views/devices/en.yml
index 7631d3fb..f6e426b9 100644
--- a/config/locales/views/devices/en.yml
+++ b/config/locales/views/devices/en.yml
@@ -17,6 +17,7 @@ en:
   edit_device_notify_stopped_publishing_label: "Kit stops publishing"
   edit_device_tags_subhead: "Tags"
   edit_device_tags_blurb: "Kits can be grouped by tags. Choose from the available tags or submit a tag request on the Forum."
+  edit_device_tags_label: "Tags"
   edit_device_postprocessing_subhead: "Postprocessing information"
   edit_device_postprocessing_blurb: "Follow the instructions here to generate a valid JSON containing the postprocessing information for your device. This is an advanced feature and it's not required for standard Smart Citizen Kits!"
-
+  edit_device_hardware_url_label: "Hardware URL"
diff --git a/package.json b/package.json
index 2522560a..cbffa351 100644
--- a/package.json
+++ b/package.json
@@ -5,6 +5,7 @@
     "@rails/ujs": "^7.1.3-4",
     "@rails/webpacker": "5.4.4",
     "bootstrap": "^5.3.3",
+    "bootstrap5-tags": "^1.7.6",
     "jquery": "^3.7.1",
     "leaflet": "^1.9.4",
     "leaflet-defaulticon-compatibility": "^0.1.2",
diff --git a/yarn.lock b/yarn.lock
index 3b449a84..defabda9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1648,6 +1648,11 @@ boolbase@^1.0.0, boolbase@~1.0.0:
   resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
   integrity sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==
 
+bootstrap5-tags@^1.7.6:
+  version "1.7.6"
+  resolved "https://registry.yarnpkg.com/bootstrap5-tags/-/bootstrap5-tags-1.7.6.tgz#0d9908f5e7f9c5bb82c379e4dc789e8fad2ff2c2"
+  integrity sha512-5bUMUN4I11n/MtrfmYOF41ebkMmy2s4AZZfp6C1oWm2dXZS3UUZqb7J9Qj9OJ1r053hix0pKtg3mNJcQvqa1EQ==
+
 bootstrap@^5.3.3:
   version "5.3.3"
   resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-5.3.3.tgz#de35e1a765c897ac940021900fcbb831602bac38"