3 files changed, 159 insertions, 0 deletions

diff --git a/public/javascripts/admin_interface.js b/public/javascripts/admin_interface.js
index 3f6a0a9..619933d 100644
--- a/public/javascripts/admin_interface.js
+++ b/public/javascripts/admin_interface.js
@@ -59,6 +59,10 @@ $(document).ready(function () {
     event_search.initialize_search();
   }
 
+  if ($("#related_asset_search_term").length != 0) {
+    related_assets.initialize();
+  }
+
   if ($("#rrule_builder").length != 0) {
     rrule_builder.initialize();
   }
diff --git a/public/javascripts/related_assets.js b/public/javascripts/related_assets.js
new file mode 100644
index 0000000..2955cbf
--- /dev/null
+++ b/public/javascripts/related_assets.js
@@ -0,0 +1,80 @@
+related_assets = {
+  initialize: function() {
+    var container = $("#related_assets");
+    var searchUrl = container.data("search-url");
+    var createUrl = container.data("create-url");
+    var list = $("#related_asset_list");
+
+    initSearchPicker({
+      inputSelector: "#related_asset_search_term",
+      resultsSelector: "#related_asset_search_results",
+      url: searchUrl,
+      loadOnFocus: true,
+      renderResults: function(data, results) {
+        var found = false;
+        data.forEach(function(asset) {
+          var item = $(
+            "<a href='#' class='related_asset_result'>" +
+              "<img src='" + asset.thumb_url + "' alt=''>" +
+              "<span>" + asset.name + "</span>" +
+            "</a>"
+          );
+          item.bind("click", function() {
+            related_assets.attach(asset.id, createUrl, list);
+            return false;
+          });
+          results.append(item);
+          found = true;
+        });
+        return found;
+      }
+    });
+
+    $(document).on("click", function(e) {
+      if (!$(e.target).closest("#related_assets").length) {
+        $("#related_asset_search_results").slideUp().empty();
+      }
+    });
+
+    list.sortable({
+      handle: ".related_asset_handle",
+      update: function(event, ui) {
+        var newPosition = ui.item.index() + 1; // acts_as_list is 1-based; jQuery UI's index() is 0-based
+        $.ajax({
+          type: "PATCH",
+          url: ui.item.data("url"),
+          data: "position=" + newPosition
+        });
+      }
+    });
+
+    list.on("click", ".related_asset_remove", function() {
+      var item = $(this).closest("li");
+      $.ajax({
+        type: "DELETE",
+        url: item.data("url"),
+        success: function() {
+          item.remove();
+        }
+      });
+    });
+  },
+
+  attach: function(assetId, createUrl, list) {
+    $.ajax({
+      type: "POST",
+      url: createUrl,
+      data: "asset_id=" + assetId,
+      dataType: "json",
+      success: function(related) {
+        var item = $($("#related_asset_template").html().trim());
+        item.attr("data-url", related.url);
+        item.find("img").attr("src", related.thumb_url);
+        list.append(item);
+        list.sortable("refresh");
+        $("#related_asset_search_term").val("");
+        $("#related_asset_search_results").slideUp().empty();
+      }
+    });
+  }
+};
diff --git a/public/stylesheets/admin.css b/public/stylesheets/admin.css
index a58a061..c3c0cb4 100644
--- a/public/stylesheets/admin.css
+++ b/public/stylesheets/admin.css
@@ -1210,3 +1210,78 @@ div#image_browser {
 div#image_browser ul li {
   list-style-type: none;
 }
+
+.thumbnail_list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  list-style: none;
+  margin: 0 0 0.75rem;
+  padding: 0;
+}
+
+.thumbnail_list li {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  border: 1px solid #e8e8e8;
+  border-radius: 6px;
+  padding: 4px;
+}
+
+.thumbnail_list img {
+  display: block;
+  width: 60px;
+  height: 60px;
+  object-fit: cover;
+  border-radius: 4px;
+}
+
+.related_asset_handle {
+  display: flex;
+  color: #969696;
+  cursor: grab;
+}
+
+.related_asset_handle svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+.related_asset_remove {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  padding: 2px;
+  cursor: pointer;
+  color: #969696;
+}
+
+.related_asset_remove svg {
+  width: 0.9rem;
+  height: 0.9rem;
+}
+
+.related_asset_remove:hover {
+  color: #cc0000;
+}
+
+.related_asset_result {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 4px;
+  border-bottom: 1px solid #e8e8e8;
+  text-decoration: none;
+}
+
+.related_asset_result img {
+  width: 40px;
+  height: 40px;
+  object-fit: cover;
+  border-radius: 4px;
+}
+