Fix/Rework Multi-select removal

* The bitwiseToArray was not firing because the array reference was not getting tickled and it was being completely removed instead of removing one entry.
* Fixed version displayed on splash screen
* Added some tests for select-picker

Fixes #181

Author: jadrake75

README.md

@@ -93,9 +93,9 @@ Webdriver for NodeJS is used for the integration tests. This project has been mo
 The following is a list of test statistics for the project for date
 
 | Date | Commit | Number of Tests | Code Coverage |
-| --- | --- | --- | --- |
-| 2022-01-15 | [8ac447f](https://github.com/stamp-web/stamp-web-aurelia/commit/8ac447f580f29d1f0f8dd23e284c6f25448cf1d7) | 83 | 12% |
-
+| --- | --- | --- |---------------|
+| 2022-01-15 | [8ac447f](https://github.com/stamp-web/stamp-web-aurelia/commit/8ac447f580f29d1f0f8dd23e284c6f25448cf1d7) | 83 | 12.05%        |
+| 2022-01-15 | [081fe3f](https://github.com/stamp-web/stamp-web-aurelia/commit/081fe3f31d5962c10777f4017e2c7a5dbe26e12e) | 86 | 12.20%        |
 
 ## Optimizing for Browsers
 

index.html

@@ -16,7 +16,7 @@
     </div>
     <div class="content">
         <div class="message">Stamp Web</div>
-        <div class="version">Version 6.0.0</div>
+        <div class="version">Version 6.2.0</div>
         <div class="sw-icon-progress splash-spin"></div>
         <div class="build-version"></div>
     </div>

src/resources/elements/ownerships/ownership-cert.scss

@@ -1,6 +1,8 @@
 @import "../../../theme/_semantic.scss";
 
 ownership-cert {
+    z-index: 10;
+
     .sw-icon-ribbon {
         color: $theme-success-color;
     }

src/resources/elements/ownerships/ownership-editor.html

@@ -39,7 +39,7 @@
             <div class="form-group row">
                 <label for="owner-defects" class="col-3 col-form-label">${'editor.defects'|t}</label>
                 <div class="col-9">
-                    <select-picker items.bind="defects" value.two-way="model.defects | bitwiseToArray:defects.length"
+                    <select-picker items.bind="defects" value.bind="model.defects | bitwiseToArray:defects.length"
                                    config.bind="{ id: 'owner-defects', tabIndex: 104, name: 'defects', labelProperty: 'description', valueProperty: 'ordinal', filterSearch: false, multiple: true, caption: 'editor.defects-select' }">
                     </select-picker>
                 </div>
@@ -48,7 +48,7 @@
                 <label for="owner-deceptions" class="col-3 col-form-label">${'editor.deceptions'|t}</label>
                 <div class="col-9">
                     <select-picker items.bind="deceptions"
-                                   value.two-way="model.deception | bitwiseToArray:deceptions.length"
+                                   value.bind="model.deception | bitwiseToArray:deceptions.length"
                                    config.bind="{ id: 'owner-deceptions', tabIndex: 107, name: 'deceptions', labelProperty: 'description', valueProperty: 'ordinal', filterSearch: false, multiple: true, caption: 'editor.deceptions-select' }">
                     </select-picker>
                 </div>

src/resources/elements/ownerships/ownership-notes.scss

@@ -1,6 +1,8 @@
 @import "../../../theme/_semantic.scss";
 
 ownership-notes {
+    z-index: 10;
+
     .sw-icon-info {
         color: $theme-link-color;
     }

src/resources/elements/select-picker/select-picker.js

@@ -24,7 +24,7 @@ import select2 from 'select2'; //eslint-disable-line no-unused-vars
 @customElement('select-picker')
 export class Select2Picker {
 
-    @bindable({defaultBindingMode : bindingMode.twoWay}) value;
+    @bindable({defaultBindingMode: bindingMode.twoWay}) value;
     @bindable valueType = 'Number';
     @bindable valueProperty = 'id';
     @bindable labelProperty = 'name';
@@ -51,37 +51,37 @@ export class Select2Picker {
 
         let options = {
             placeholder: caption,
-            allowClear: true
-         };
+            allowClear:  true
+        };
 
-        if( typeof this.config.filterSearch !== 'undefined' && this.config.filterSearch === false ) {
+        if (typeof this.config.filterSearch !== 'undefined' && this.config.filterSearch === false) {
             options.minimumResultsForSearch = Infinity;
         }
 
-        if( this.config.valueProperty ) {
+        if (this.config.valueProperty) {
             this.valueProperty = this.config.valueProperty;
         }
-        if( this.config.labelProperty ) {
+        if (this.config.labelProperty) {
             this.labelProperty = this.config.labelProperty;
         }
-        if( this.config.valueType ) {
+        if (this.config.valueType) {
             this.valueType = this.config.valueType;
         }
-        if( typeof this.config.allowClear !== 'undefined') {
+        if (typeof this.config.allowClear !== 'undefined') {
             options.allowClear = this.config.allowClear;
         }
 
-        if( typeof this.config.noSearch !== 'undefined') {
+        if (typeof this.config.noSearch !== 'undefined') {
             options.minimumResultsForSearch = Infinity;
         }
 
-        if( this.config.id ) {
+        if (this.config.id) {
             this.id = this.config.id;
         } else {
-            this.id = 'select-' + parseInt(Math.random() * 16384, 10);
+            this.id = `select-${parseInt(Math.random() * 16384, 10)}`;
         }
 
-        if( this.config.multiple === true || this.multiple === 'true' ) {
+        if (_.get(this, 'config.multiple') === true || _.get(this, 'multiple') === 'true') {
             options.multiple = true;
             this.multiple = true;
         }
@@ -96,7 +96,7 @@ export class Select2Picker {
         this.select2 = $select.select2(options);
 
         let tabIndex = this.config.tabIndex;
-        if( typeof tabIndex === 'undefined' ) {
+        if (typeof tabIndex === 'undefined') {
             tabIndex = -1;
         }
 
@@ -109,9 +109,9 @@ export class Select2Picker {
 
     unbind() {
         let select = this.element.firstElementChild;
-        if( select ) {
+        if (select) {
             const $select = $(select);
-            if( $select.data('select2')) { // depending on the destory state need to check whether it still thinks it is a select2
+            if ($select.data('select2')) { // depending on the destroyed state need to check whether it still thinks it is a select2
                 $select.select2('destroy');
             }
         }
@@ -122,28 +122,29 @@ export class Select2Picker {
      * @param e selection event.
      */
     onSelect(e) {
-        if( e.params && e.params.data ) {
-            let data = e.params.data.id;
-            if( this.multiple === true ) {
-                let val = data;
-                data = (this.value) ? _.clone(this.value) : this._getClearedValue();
-                data.push(val);
-                this.value = _.uniq(data); // prevent duplicates
-            } else if ( this.valueType === 'Number') {
-                this.value = data ? Number.parseInt(data) : this._getClearedValue();
+        if (e.params && e.params.data) {
+            let data = _.get(e, 'params.data.id');
+            let originValue = this.value;
+            if (this.multiple === true) {
+                originValue.push(data);
+                this.value = this._getClearedValue();
+            } else if (this.valueType === 'Number') {
+                originValue = data ? Number.parseInt(data) : this._getClearedValue();
             } else {
-                this.value = data;
+                originValue = data;
             }
-            let changeEvent = EventHelper.changeEvent(data);
-            this.element.dispatchEvent(changeEvent);
+            _.defer(() => { // need to tickle the array
+                this.value = originValue;
+                this.element.dispatchEvent(EventHelper.changeEvent(this.value));
+            });
         }
     }
 
     _getClearedValue() {
         let value = '';
-        if( this.multiple === true ) {
+        if (this.multiple === true) {
             value = [];
-        } else if ( this.valueType === 'Number') {
+        } else if (this.valueType === 'Number') {
             value = -1;
         }
         return value;
@@ -157,15 +158,27 @@ export class Select2Picker {
         return item[this.labelProperty];
     }
 
-    onUnselect(e) {
+    onUnselect() {
         _.defer(() => {
             $(this.select2).off('select2:opening');
         });
     }
 
     onUnselecting(e) {
-        this.value = this._getClearedValue();
-        this.element.dispatchEvent(EventHelper.changeEvent(this.value));
+        let removalValue = _.get(e, 'params.args.data');
+        let origValue = this.value;
+        if (removalValue) {
+            if (this.multiple) {
+                this.value = this._getClearedValue();
+                _.pull(origValue, _.get(removalValue, 'id'));
+            } else {
+                origValue = this._getClearedValue();
+            }
+        }
+        _.defer(() => {
+            this.value = origValue;
+            this.element.dispatchEvent(EventHelper.changeEvent(origValue));
+        });
 
         $(this.select2).on('select2:opening', e => {
             e.preventDefault();
@@ -198,11 +211,11 @@ export class Select2Picker {
      * Handle the conversion of the type from the modeled value to the String equivalence of the value used by select2
      */
     _convertToInternal(val) {
-        if( typeof val === 'undefined' || _.isNil(val)) {
+        if (typeof val === 'undefined' || _.isNil(val)) {
             return undefined;
         }
         let retValue = val;
-        switch(this.valueType) {
+        switch (this.valueType) {
             case 'Number':
                 retValue = val.toString();
                 break;
@@ -215,9 +228,9 @@ export class Select2Picker {
      */
     attached() {
         _.debounce(() => {
-           if( this.items && this.items.length > 0 ) { // cached items are loaded
-               this.valueChanged(this.value);
-           }
+            if (this.items && this.items.length > 0) { // cached items are loaded
+                this.valueChanged(this.value);
+            }
         }, 125)();
     }
 
@@ -229,7 +242,7 @@ export class Select2Picker {
      * @param oldValue
      */
     itemsChanged(newValue, oldValue) { //eslint-disable-line no-unused-vars
-        if( newValue && newValue.length > 0 ) {
+        if (newValue && newValue.length > 0) {
             _.defer(() => {
                 this.valueChanged(this.value);
             });

src/resources/elements/select-picker/select-picker.scss

@@ -79,7 +79,7 @@ select-picker {
             .select2-selection__clear {
                 color:  $theme-clear-color;
                 margin-left: $theme-margin-thinner;
-                margin-right: 0;
+                margin-right: $theme-margin-thinner;
                 margin-top: 0;
                 transform: scale(1.5) translateY(0.5rem);
             }