device edit form: tags, map, postprocessing

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 {

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
 

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"
+    });
   });
 }

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">

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"

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",

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"