First version of multicheck selection
gitea/salix/pipeline/head There was a failure building this commit
Details
gitea/salix/pipeline/head There was a failure building this commit
Details
This commit is contained in:
parent
ecb98dfac5
commit
6a065091de
|
@ -1,5 +1,5 @@
|
||||||
<vn-check
|
<vn-check
|
||||||
ng-model="$ctrl.checked"
|
ng-model="$ctrl.checked"
|
||||||
intermediate="$ctrl.isIntermediate"
|
indeterminate="$ctrl.isIndeterminate"
|
||||||
translate-attr="{title: 'Check all'}">
|
translate-attr="{title: 'Check all'}">
|
||||||
</vn-check>
|
</vn-check>
|
|
@ -15,6 +15,19 @@ export default class MultiCheck extends FormInput {
|
||||||
this._checked = false;
|
this._checked = false;
|
||||||
this.checkField = 'checked';
|
this.checkField = 'checked';
|
||||||
this.isIntermediate = false;
|
this.isIntermediate = false;
|
||||||
|
this.mayusEnabled = false;
|
||||||
|
this.window.addEventListener('keydown', event => {
|
||||||
|
if (event.key === 'Shift')
|
||||||
|
this.mayusEnabled = true;
|
||||||
|
});
|
||||||
|
this.window.addEventListener('keyup', event => {
|
||||||
|
if (event.key === 'Shift')
|
||||||
|
this.mayusEnabled = false;
|
||||||
|
});
|
||||||
|
this.window.addEventListener('selectstart', event => {
|
||||||
|
if (this.mayusEnabled)
|
||||||
|
event.preventDefault();
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -28,7 +41,7 @@ export default class MultiCheck extends FormInput {
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Sets the array model instance
|
* Sets the array model instance
|
||||||
* Changes intermediate property for
|
* Changes indeterminate property for
|
||||||
* the check component
|
* the check component
|
||||||
*
|
*
|
||||||
* @param {ArrayModel} value - Array model instance
|
* @param {ArrayModel} value - Array model instance
|
||||||
|
@ -37,8 +50,17 @@ export default class MultiCheck extends FormInput {
|
||||||
this._model = value;
|
this._model = value;
|
||||||
|
|
||||||
if (value) {
|
if (value) {
|
||||||
value.on('rowChange', () => {
|
value.on('rowChange', row => {
|
||||||
this.isIntermediate = !this.areAllUnchecked() && !this.areAllChecked();
|
this.isIndeterminate = !this.areAllUnchecked() && !this.areAllChecked();
|
||||||
|
|
||||||
|
if (this.mayusEnabled) {
|
||||||
|
this.currentSelection = row.obj.$orgIndex;
|
||||||
|
|
||||||
|
if (this.lastSelection != undefined && this.currentSelection != undefined)
|
||||||
|
this.setSelection(row.value, this.lastSelection, this.currentSelection);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.lastSelection = row.obj.$orgIndex;
|
||||||
|
|
||||||
if (this.areAllChecked())
|
if (this.areAllChecked())
|
||||||
this._checked = true;
|
this._checked = true;
|
||||||
|
@ -52,6 +74,20 @@ export default class MultiCheck extends FormInput {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
setSelection(value, from, to) {
|
||||||
|
let start = from;
|
||||||
|
let end = to;
|
||||||
|
|
||||||
|
if (from > to) {
|
||||||
|
start = to;
|
||||||
|
end = from;
|
||||||
|
}
|
||||||
|
|
||||||
|
const data = this.model.data;
|
||||||
|
for (let i = start; i <= end; i++)
|
||||||
|
data[i].checked = value;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Gets current check state
|
* Gets current check state
|
||||||
*/
|
*/
|
||||||
|
|
Loading…
Reference in New Issue