Group options together

Author: abhimediratta

dev/Dev.vue

@@ -4,9 +4,9 @@
       search-input-class="custom-input-class"
       :reduce-display-property="option => option.name"
       :reduce-value-property="option => option.id"
+      :reduceGroupProperty="option => option.group"
       ref="multi"
       highlight-diff
-      hide-search-inputs
       @diff-changed="handleChange" />
   </div>
 </template>
@@ -31,7 +31,7 @@ export default {
     return {
       value: [],
       stringOptions: ['Chicago', 'Wisconsin', 'Houston'],
-      options: [{ name: 'Chicago', id: 'ch' }, { name: 'Wisconsin', id: 'wi' }, { name: 'Houston', id: 'ho' }],
+      options: [{ name: 'Chicago', id: 'ch', group: 'United States' }, { name: 'Wisconsin', id: 'wi', group: 'United States' }, { name: 'Houston', id: 'ho', group: 'India' }],
       showSelectAll: true,
       showWidget: true,
     };

package-lock.json

@@ -38,6 +38,7 @@
     "eslint-plugin-import": "^2.23.4",
     "eslint-plugin-vue": "^6.2.2",
     "html-webpack-plugin": "^3.2.0",
+    "lodash.isfunction": "^3.0.9",
     "mini-css-extract-plugin": "^0.9.0",
     "node-sass": "^4.14.1",
     "postcss-loader": "^3.0.0",

package.json

@@ -17,6 +17,7 @@
       :hide-search-input="hideSearchInputs"
       @onClickOption="onOptionSelect"
       :disabled="disabled"
+      :groupProperty="reduceGroupProperty"
     />
 
     <div class="msl-multi-select__actions" v-if="!readOnly">
@@ -55,6 +56,7 @@
       @onClickOption="onOptionRemove"
       :disabled="disabled"
       :read-only="readOnly"
+      :groupProperty="reduceGroupProperty"
     />
   </div>
 </template>
@@ -165,6 +167,10 @@ export default {
       type: Function,
       default: (value) => value,
     },
+    reduceGroupProperty: {
+      type: Function,
+      default: null
+    },
     noOptionsText: {
       type: String,
       default: '',

src/components/MultiSelect/MultiSelect.vue

@@ -8,8 +8,9 @@
       :placeholder="placeholderText"
     >
     <div class="msl-searchable-list__items"
-    :class="{ 'msl-searchable-list__items--disabled': disabled || readOnly }">
+      :class="{ 'msl-searchable-list__items--disabled': disabled || readOnly }">
       <div
+        v-if="!groupProperty"
         v-for="(option, index) in filteredListItems"
         :key="index"
         class="msl-searchable-list__item"
@@ -19,6 +20,23 @@
         {{ getOptionDisplay(option) }}
       </div>
 
+      <div
+        v-if="groupProperty"
+        v-for="groupKey in sortedGroupKeys"
+        :key="groupKey"
+      >
+        <div class="msl-searchable-list__group">{{ groupKey }}</div>
+
+        <div 
+          v-for="option in groupedItems[groupKey].options"
+          :key="option"
+          class="msl-searchable-list__item msl-searchable-list__item--grouped"
+          :class="{'msl-searchable-list__item--disabled': option.disabled || disabled || readOnly, [highlightClass]: highlightDiff && highlightedItemsMap[getValue(option)] }"
+          @click="clickOption(option)">
+          {{ getOptionDisplay(option) }}
+        </div>
+      </div>
+
       <div
         v-if="noItems"
         class="msl-searchable-list__no-item"
@@ -39,6 +57,7 @@
 <script>
 import debounce from '../../utils/debounce';
 import isEmptyObject from '../../utils/isEmptyObject';
+import isFunction from 'lodash.isfunction';
 
 function getValue(item, valueProperty) {
   return valueProperty(item);
@@ -86,6 +105,12 @@ export default {
       type: Function,
       default: (value) => value,
     },
+
+    groupProperty: {
+      type: Function,
+      default: null,
+    },
+    
     noOptionsText: {
       type: String,
       default: 'No options',
@@ -171,6 +196,26 @@ export default {
       });
     },
 
+    groupedItems() {
+      if (isFunction(this.groupProperty)) {
+        const groupedItems = {}
+
+        this.filteredListItems.forEach(item => {
+          const groupKey = this.groupProperty(item);
+          groupedItems[groupKey] = groupedItems[groupKey] ?? { options: [] };
+          groupedItems[groupKey].options.push(item)
+        });
+
+        return groupedItems;
+      }
+
+      return null;
+    },
+
+    sortedGroupKeys() {
+      return Object.keys(this.groupedItems).sort()
+    },
+
     filteredListItems() {
       if (this.searchText != null && this.searchText !== '') {
         return this.availableItems.filter(function filterItem(item) {

src/components/SearchableList/SearchableList.vue

@@ -49,6 +49,16 @@
   }
 }
 
+.msl-searchable-list__group {
+  padding: 5px 10px;
+  font-size: 1em;
+  font-weight: bold;
+}
+
+.msl-searchable-list__item--grouped {
+  padding-left: 20px;
+}
+
 
 .msl-searchable-list__item--removed {
   background: red;