Persistence and onSelect handler for the multi-select-dropdown

ui/app/components/multi-select-dropdown.js

@@ -0,0 +1,23 @@
+import Component from '@ember/component';
+import { computed } from '@ember/object';
+
+export default Component.extend({
+  classNames: ['dropdown'],
+
+  options: computed(() => []),
+  selection: computed(() => []),
+
+  onSelect() {},
+
+  actions: {
+    toggle({ key }) {
+      const newSelection = this.get('selection').slice();
+      if (newSelection.includes(key)) {
+        newSelection.removeObject(key);
+      } else {
+        newSelection.addObject(key);
+      }
+      this.get('onSelect')(newSelection);
+    },
+  },
+});

ui/app/styles/components/dropdown.scss

@@ -25,6 +25,7 @@
 
 .dropdown-trigger-label {
   margin-left: 8px;
+  margin-right: 8px;
 }
 
 .ember-power-select-selected-item,

ui/app/templates/components/freestyle/sg-multi-select-dropdown.hbs

@@ -2,7 +2,8 @@
   {{multi-select-dropdown
     label="Example Dropdown"
     options=options
-    selection=selection}}
+    selection=selection
+    onSelect=(action (mut selection))}}
 {{/freestyle-usage}}
 {{#freestyle-annotation}}
   A wrapper around basic-dropdown for creating a list of checkboxes and tracking the state thereof.

ui/app/templates/components/multi-select-dropdown.hbs

@@ -1,6 +1,11 @@
 {{#basic-dropdown matchTriggerWidth=true as |dd|}}
   {{#dd.trigger class="dropdown-trigger"}}
-    <span class="dropdown-trigger-label">{{label}}</span>
+    <span class="dropdown-trigger-label">
+      {{label}}
+      {{#if selection.length}}
+        <span class="tag is-light">{{selection.length}}</span>
+      {{/if}}
+    </span>
     <span class="dropdown-trigger-icon ember-power-select-status-icon"></span>
   {{/dd.trigger}}
   {{#dd.content class="dropdown-options"}}
@@ -8,7 +13,10 @@
       {{#each options key="key" as |option|}}
         <li class="dropdown-option">
           <label>
-            <input type="checkbox" checked={{includes option.key selection}} />
+            <input
+              type="checkbox"
+              checked={{includes option.key selection}}
+              onchange={{action "toggle" option}} />
             {{option.label}}
           </label>
         </li>