Added tags

app/assets/javascripts/sitewide/dropdown_selector.js

@@ -1,6 +1,7 @@
 var dropdownSelector = (function() {
   function generateDropdown(selector){
     var selectElement = $(selector)
+    var optionContainer;
     var dropdownContainer = selectElement.after('<div class="dropdown-selector-container"></div>').next()
     $(`
       <div class="input-field"></div>
@@ -11,7 +12,11 @@ var dropdownSelector = (function() {
     ps = new PerfectScrollbar(dropdownContainer.find('.dropdown-container')[0])
     activePSB.push(ps)
 
+    optionContainer = dropdownContainer.find('.dropdown-container')
+
     dropdownContainer.find('.input-field').click(() => {
+      optionContainer.find('.dropdown-group, .dropdown-option').remove()
+      optionContainer.scrollTo(0)
       dropdownContainer.toggleClass("open")
       if (dropdownContainer.hasClass("open")) {
         loadData(selectElement , dropdownContainer)
@@ -22,10 +27,6 @@ var dropdownSelector = (function() {
       updateDropdownDirection(dropdownContainer)
     })
 
-    dropdownContainer.blur(function() {
-      console.log(1)
-    })
-
     $(window).click(() => {
       dropdownContainer.removeClass("open")
     });
@@ -52,53 +53,55 @@ var dropdownSelector = (function() {
 
   function loadData(selector, container) {
 
-    container.find('.dropdown-container .dropdown-group').remove()
+    function drawOption(option) {
-    container.find('.dropdown-container .dropdown-option').remove()
+      return $(`
+        <div class="dropdown-option checkbox-icon"
+          data-label="${option.innerHTML}"
+          data-value="${option.value}">
+          ${option.innerHTML}
+        </div>"
+      `)
+    }
+
+    function drawGroup(group) {
+      return $(`
+        <div class="dropdown-group">
+          <div class="group-name checkbox-icon">${group.label}</div>
+        </div>
+      `)
+    }
+
+    function clickOption() {
+      $(this).toggleClass('select')
+      saveData(selector, container)
+    }
+    
 
     if (selector.data('select-by-group')){
       var groups = selector.find('optgroup')
       $.each(groups, function(gi, group) {
-        var groupElement = $(`
+        var groupElement = drawGroup(group)
-          <div class="dropdown-group">
-            <div class="group-name checkbox-icon">`+ group.label + `</div>
-          </div>
-        `)
         $.each($(group).find('option'), function(oi, option) {
-          optionElement = $(`
+          optionElement = drawOption(option)
-            <div class="dropdown-option checkbox-icon" data-value="` + option.value + `">
+          optionElement.click(clickOption)
-              ` + option.innerHTML + `
-            </div>"
-          `)
-          optionElement.click(function() {
-            $(this).toggleClass('select')
-            saveData(container)
-          })
           optionElement.appendTo(groupElement)
         })
         groupElement.find('.group-name').click(function() {
             var groupContainer = $(this).parent()
-            groupContainer.toggleClass('select')
+            if (groupContainer.toggleClass('select').hasClass('select')) {
-            if (groupContainer.hasClass('select')) {
               groupContainer.find('.dropdown-option').addClass('select')
             }else{
               groupContainer.find('.dropdown-option').removeClass('select')
             }
-            saveData(container)
+            saveData(selector, container)
           })
         groupElement.appendTo(container.find('.dropdown-container'))
       })
     } else {
       options = selector.find('option')
       $.each(options, function(oi, option) {
-        optionElement = $(`
+        optionElement = drawOption(option)
-          <div class="dropdown-option checkbox-icon" data-value="` + option.value + `">
+        optionElement.click(clickOption)
-            ` + option.innerHTML + `
-          </div>"
-        `)
-        optionElement.click(function() {
-          $(this).toggleClass('select')
-          saveData(container)
-        })
         optionElement.appendTo(container.find('.dropdown-container'))
       })
     }
@@ -106,7 +109,7 @@ var dropdownSelector = (function() {
     PerfectSb().update_all()
 
     $.each(JSON.parse(container.find('.data-field').val()), function(i, selectedOption) {
-      container.find('.dropdown-container .dropdown-option[data-value="' + selectedOption + '"]').addClass('select')
+      container.find('.dropdown-container .dropdown-option[data-value="' + selectedOption.value + '"]').addClass('select')
     })
     if (selector.data('select-by-group')){
       $.each(container.find('.dropdown-group'), function(gi, group) {
@@ -117,14 +120,69 @@ var dropdownSelector = (function() {
     }
   }
 
-  function saveData(container) {
+  function saveData(selector, container) {
-    var selectArray = []
+    var oldSelect = JSON.parse(container.find('.data-field').val())
+    var newSelect = []
     $.each(container.find('.dropdown-container .dropdown-option.select'), function(oi ,option){
-      selectArray.push(option.dataset.value)
+      newSelect.push({
+        label: option.dataset.label,
+        value: option.dataset.value
+      })
     })
+
+    $.each(oldSelect, function(oldValue){
+      
+    })
+
     container.find('.data-field').val(JSON.stringify(selectArray))
+
+    updateTags(selector, container)
   }
 
+  function updateTags(selector, container) {
+    selectedOptions = JSON.parse(container.find('.data-field').val())
+
+    function drawTag(label, tagId) {
+      var tag = $(`<div class="ds-tags" >
+                  <div class="tag-label" data-ds-tag-id=${tagId}>${label}</div>
+                  <i class="fas fa-times"></i>
+                </div>`).appendTo(container.find('.input-field'))
+
+      tag.click((e) => {e.stopPropagation()});
+      tag.find('.fa-times').click(function(e) {
+        var label = $(this).closest('.tag-label')
+        e.stopPropagation()
+        if (selector.data('combine-tags')) {
+          container.find('.data-field').val('[]')
+          $(this).parent().remove()
+        } else {
+
+        }
+        updateDropdownDirection($(selector).next())
+      });
+
+      updateDropdownDirection($(selector).next())
+    }
+
+
+    if (selector.data('combine-tags')){
+      container.find('.ds-tags').remove()
+      if (selectedOptions.length === 1) {
+        drawTag(selectedOptions[0].label, selectedOptions[0].value)
+      } else if (allOptionsSelected(selector, container)) {
+        drawTag(selector.data('select-multiple-all-selected'), 0)
+      } else if (selectedOptions.length > 1) {
+        drawTag(selectedOptions.length + ' ' + selector.data('select-multiple-name'), 0)
+      }
+    } else {
+
+    }
+  }
+
+
+  function allOptionsSelected(selector, container){
+    return container.find('.data-field').val().length === selector.find('option').length && !(selector.data('ajax-data'))
+  }
 
 
   return {

app/assets/stylesheets/shared/dropdown_selector.scss

@@ -2,18 +2,44 @@
 
 .dropdown-selector-container {
   display: inline-block;
+  float: left;
   position: relative;
   width: 100%;
 
   .input-field {
+    align-items: center;
     background: $color-white;
     border: 1px solid $color-alto;
     border-radius: 4px;
-    min-height: 32px;
+    display: flex;
+    flex-wrap: wrap;
+    min-height: 36px;
+    padding: 3px;
     position: relative;
     transition: .2s;
     width: 100%;
     z-index: 12;
+
+    .ds-tags {
+      align-items: center;
+      background: $color-concrete;
+      border-radius: 12px;
+      box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
+      display: flex;
+      line-height: 14px;
+      margin: 2px 3px;
+      padding: 5px 7px;
+
+      .tag-label {
+        margin-right: 5px
+      }
+
+      .fas {
+        cursor: pointer;
+        font-size: 14px;
+        opacity: 0.7;
+      }
+    }
   }
 
   .dropdown-container {

app/views/global_activities/_side_filters.html.erb

@@ -49,8 +49,8 @@
       'data-select-all': 'true',
       'data-select-multiple-name': t('global_activities.index.l_activities'),
       'data-select-multiple-all-selected': t('global_activities.index.all_activities'),
-      'data-dropdown-position': 'left',
       'data-select-by-group': 'true',
+      'data-combine-tags': 'true',
       'data-placeholder': t('global_activities.index.select_activity_types')
     } %>
   </div>