Skip to content

Commit

Permalink
Fix/Rework Multi-select removal
Browse files Browse the repository at this point in the history 
* 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
  • Loading branch information
@jadrake75
jadrake75 committed Jan 15, 2022
1 parent 081fe3f commit 38899a3
Show file tree
Hide file tree
Showing 8 changed files with 214 additions and 45 deletions.
6 changes: 3 additions & 3 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 2 additions & 0 deletions src/resources/elements/ownerships/ownership-cert.scss
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
@import "../../../theme/_semantic.scss";

ownership-cert {
z-index: 10;

.sw-icon-ribbon {
color: $theme-success-color;
}
Expand Down
4 changes: 2 additions & 2 deletions src/resources/elements/ownerships/ownership-editor.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down
2 changes: 2 additions & 0 deletions src/resources/elements/ownerships/ownership-notes.scss
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
@import "../../../theme/_semantic.scss";

ownership-notes {
z-index: 10;

.sw-icon-info {
color: $theme-link-color;
}
Expand Down
89 changes: 51 additions & 38 deletions src/resources/elements/select-picker/select-picker.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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;
}
Expand All @@ -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;
}

Expand All @@ -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');
}
}
Expand All @@ -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;
Expand All @@ -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();
Expand Down Expand Up @@ -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;
Expand All @@ -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)();
}

Expand All @@ -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);
});
Expand Down
2 changes: 1 addition & 1 deletion src/resources/elements/select-picker/select-picker.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
Expand Down
Loading

0 comments on commit 38899a3

Please sign in to comment.