Add an easier way for users to select their own topics

app/assets/javascripts/autocompleters.js

@@ -107,11 +107,12 @@ var Autocompleters = {
                     if (opts.singleton) {
                         inputElement.hide();
                     }
+
+                    const event = new CustomEvent('autocompleters:added', {  bubbles: true, detail: { object: obj } });
+                    listElement[0].dispatchEvent(event);
                 }
 
                 $(this).val('').focus();
-                const event = new CustomEvent('autocompleters:added', {  bubbles: true, detail: { object: obj } });
-                listElement[0].dispatchEvent(event);
             },
             onSearchStart: function (query) {
                 inputElement.addClass("loading");

app/assets/javascripts/learning_paths.js

@@ -13,5 +13,35 @@ var LearningPaths = {
                 $('.learning-path-topic-title', topic).click();
             }
         }
+
+        $("[data-role='user-lp-topics-select']").change(LearningPaths.selectTopic);
+    },
+
+    selectTopic: function () {
+        const element = $(this);
+        const option = $(this).find('option:selected');
+        const id = parseInt(option.val());
+        if (!id) {
+            return true;
+        }
+        const title = option.text();
+        const listElement = $("[data-role='collection-items-group']").find('.collection-items');
+        if (!$("[data-id='Topic-" + id + "']", listElement).length) {
+            const obj = { item: {
+                    id: null,
+                    title: title,
+                    url: option.data('url'),
+                    resource_id: id,
+                    resource_type: 'Topic'
+                },
+                prefix: 'learning_path[topic_links_attributes]'
+            };
+
+            listElement.append(HandlebarsTemplates['autocompleter/learning_path_topic'](obj));
+            const event = new CustomEvent('autocompleters:added', {  bubbles: true, detail: { object: obj } });
+            listElement[0].dispatchEvent(event);
+        }
+
+        element.val('').focus();
     }
 }

app/views/collections/_collection_items_form.erb

@@ -25,9 +25,7 @@
 <div class="form-group">
   <%= f.label field_name %>
 
-  <p class="help-block">
-    Re-order items by clicking and dragging the icon on the left-hand side.
-  </p>
+  <p class="help-block"><%= t('collections.hints.reorder') %></p>
 
   <%= content_tag(:div, data: data) do %>
       <%= content_tag :script, json.html_safe, type: 'application/json', data: { role: 'autocompleter-existing' } %>

app/views/collections/_form.html.erb

@@ -10,8 +10,7 @@
       <%= render partial: 'common/image_form', locals: { form: f } %>
     </div>
 
-  <%= f.input :public,
-              hint: "Un-ticking this box will hide this collection from anyone who isn't the creator or a collaborator." %>
+  <%= f.input :public, hint: t('collections.hints.public') %>
 
     <%= f.multi_input :keywords %>
 

app/views/learning_paths/_form.html.erb

@@ -89,15 +89,13 @@
         prefix: form_field_name }
     end.to_json
 
-    placeholder_text = "Add a new topic"
+    placeholder_text = t('learning_paths.form.search_for_topics')
   %>
 
   <div class="form-group">
-    <%= f.label 'Topics' %>
+    <%= f.label t('features.learning_path_topics.long') %>
 
-    <p class="help-block">
-      Re-order items by clicking and dragging the icon on the left-hand side.
-    </p>
+    <p class="help-block"><%= t('collections.hints.reorder') %></p>
 
     <%= content_tag(:div, data: data) do %>
       <%= content_tag :script, json.html_safe, type: 'application/json', data: { role: 'autocompleter-existing' } %>
@@ -106,15 +104,23 @@
         <%# Populated via javascript from the JSON above %>
       </ul>
 
+      <% user_topics = current_user.learning_path_topics.order(title: :asc) %>
+      <% if user_topics.any? %>
+        <h6><%= t('learning_paths.form.my_topics') %></h6>
+        <%= select_tag(nil, options_for_select(user_topics.map { |t| [t.title, t.id, 'data-url': learning_path_topic_url(t)] }),
+                       prompt: t('learning_paths.form.select_topic'), 'data-role': 'user-lp-topics-select', class: 'form-control') %>
+
+        <h6><%= t('learning_paths.form.all_topics') %></h6>
+      <% end %>
+
       <input type="text" data-role="autocompleter-input" autocomplete="off" class="form-control"
              placeholder="<%= placeholder_text %>">
     <% end %>
   </div>
 
   <hr>
 
-  <%= f.input :public,
-              hint: "Un-ticking this box will hide this learning path from anyone who isn't the creator or a collaborator." %>
+  <%= f.input :public, hint: t('learning_paths.hints.public') %>
 
   <!-- Form Buttons -->
   <div class="form-group">

app/views/workflows/_form.html.erb

@@ -44,11 +44,9 @@
         <%= f.multi_input :contributors, suggestions_url: people_autocomplete_suggestions_path %>
       <% end %>
 
-      <%= f.input :hide_child_nodes,
-                  hint: 'Ticking this box will hide child nodes from the diagram until their parent node is clicked.' %>
+      <%= f.input :hide_child_nodes, hint: t('workflows.hints.hide_child_nodes') %>
 
-      <%= f.input :public,
-                  hint: "Un-ticking this box will hide this workflow from anyone who isn't the creator or a collaborator." %>
+      <%= f.input :public, hint: t('workflows.hints.public') %>
     </div>
   </div>
   <div class="row">

config/locales/en.yml

@@ -670,9 +670,15 @@ en:
       resource_type: 'Select the type of resource that best matches the learning path. '
       url: 'Preferred URL to direct people to your learning path landing page.'
       version: 'Indicate the current version of the learning path.'
+      public: Un-ticking this box will hide this learning path from anyone who isn't the creator or a collaborator.
     next_topic: Next topic
     next_item: Next
     end_of: End of learning path
+    form:
+      my_topics: My topics
+      all_topics: All topics
+      select_topic: Select a topic...
+      search_for_topics: Search for topics...
   profile:
     user:
       disclaimer: >
@@ -810,3 +816,10 @@ en:
     show:
       curate_materials: "Curate materials"
       curate_events: "Curate events"
+    hints:
+      reorder: Re-order items by clicking and dragging the icon on the left-hand side.
+      public: Un-ticking this box will hide this collection from anyone who isn't the creator or a collaborator.
+  workflows:
+    hints:
+      hide_child_nodes: Ticking this box will hide child nodes from the diagram until their parent node is clicked.
+      public: Un-ticking this box will hide this workflow from anyone who isn't the creator or a collaborator.