implemented multi selection with simple switch key press but without highlighting
This commit is contained in:
parent
ca01177e7f
commit
c12968fac2
2 changed files with 59 additions and 10 deletions
|
@ -263,6 +263,9 @@ const Logic = {
|
||||||
}
|
}
|
||||||
return identity;
|
return identity;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// reset selected container for deletion
|
||||||
|
this._currentSelectedIdentities = [];
|
||||||
},
|
},
|
||||||
|
|
||||||
getPanelSelector(panel) {
|
getPanelSelector(panel) {
|
||||||
|
@ -341,6 +344,21 @@ const Logic = {
|
||||||
return this._currentSelectedIdentities;
|
return this._currentSelectedIdentities;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
addSelectedIdentiry(identity) {
|
||||||
|
const index = this._currentSelectedIdentities.indexOf(identity);
|
||||||
|
if (index === -1) {
|
||||||
|
this._currentSelectedIdentities.push(identity);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
removeSelectedIdentity(identity) {
|
||||||
|
const index = this._currentSelectedIdentities.indexOf(identity);
|
||||||
|
|
||||||
|
if (index !== -1) {
|
||||||
|
this._currentSelectedIdentities.splice(index, 1);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
currentUserContextId() {
|
currentUserContextId() {
|
||||||
const identity = Logic.currentIdentity();
|
const identity = Logic.currentIdentity();
|
||||||
return Logic.userContextId(identity.cookieStoreId);
|
return Logic.userContextId(identity.cookieStoreId);
|
||||||
|
@ -970,6 +988,8 @@ Logic.registerPanel(P_CONTAINER_INFO, {
|
||||||
|
|
||||||
Logic.registerPanel(P_CONTAINERS_EDIT, {
|
Logic.registerPanel(P_CONTAINERS_EDIT, {
|
||||||
panelSelector: "#edit-containers-panel",
|
panelSelector: "#edit-containers-panel",
|
||||||
|
selectedHistory: [],
|
||||||
|
switchOn: 0,
|
||||||
|
|
||||||
// This method is called when the object is registered.
|
// This method is called when the object is registered.
|
||||||
initialize() {
|
initialize() {
|
||||||
|
@ -986,13 +1006,18 @@ Logic.registerPanel(P_CONTAINERS_EDIT, {
|
||||||
await Logic.showPanel(P_CONTAINER_DELETE, null, selectedIdentities);
|
await Logic.showPanel(P_CONTAINER_DELETE, null, selectedIdentities);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
|
||||||
|
|
||||||
// showing delete button if there is any selected containers
|
document.addEventListener("keydown", e => {
|
||||||
showDeleteSelectedButton(selectedContainers) {
|
if (e.keyCode === 16) {
|
||||||
const assignmentPanel = document.getElementById("edit-sites-assigned");
|
this.switchOn = 1;
|
||||||
const assignmentKeys = Object.keys(selectedContainers);
|
}
|
||||||
assignmentPanel.hidden = !(assignmentKeys.length > 0);
|
});
|
||||||
|
|
||||||
|
document.addEventListener("keyup", e => {
|
||||||
|
if (e.keyCode === 16) {
|
||||||
|
this.switchOn = 0;
|
||||||
|
}
|
||||||
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
// This method is called when the panel is shown.
|
// This method is called when the panel is shown.
|
||||||
|
@ -1003,7 +1028,7 @@ Logic.registerPanel(P_CONTAINERS_EDIT, {
|
||||||
fragment.appendChild(tr);
|
fragment.appendChild(tr);
|
||||||
tr.classList.add("container-panel-row");
|
tr.classList.add("container-panel-row");
|
||||||
tr.innerHTML = escaped`
|
tr.innerHTML = escaped`
|
||||||
<td class="userContext-wrapper">
|
<td class="userContext-wrapper select-container">
|
||||||
<div class="userContext-icon-wrapper">
|
<div class="userContext-icon-wrapper">
|
||||||
<div class="usercontext-icon"
|
<div class="usercontext-icon"
|
||||||
data-identity-icon="${identity.icon}"
|
data-identity-icon="${identity.icon}"
|
||||||
|
@ -1032,9 +1057,33 @@ Logic.registerPanel(P_CONTAINERS_EDIT, {
|
||||||
if (e.target.matches(".edit-container-icon") || e.target.parentNode.matches(".edit-container-icon")) {
|
if (e.target.matches(".edit-container-icon") || e.target.parentNode.matches(".edit-container-icon")) {
|
||||||
Logic.showPanel(P_CONTAINER_EDIT, identity);
|
Logic.showPanel(P_CONTAINER_EDIT, identity);
|
||||||
} else if (e.target.matches(".delete-container-icon") || e.target.parentNode.matches(".delete-container-icon")) {
|
} else if (e.target.matches(".delete-container-icon") || e.target.parentNode.matches(".delete-container-icon")) {
|
||||||
|
|
||||||
// TODO Add logic here to hold for event selector
|
|
||||||
Logic.showPanel(P_CONTAINER_DELETE, identity);
|
Logic.showPanel(P_CONTAINER_DELETE, identity);
|
||||||
|
} else if (e.target.matches(".select-container") || e.target.parentNode.matches(".select-container")) {
|
||||||
|
console.log(this.switchOn);
|
||||||
|
const index = this.selectedHistory.indexOf(identity);
|
||||||
|
|
||||||
|
if (this.switchOn === 1) {
|
||||||
|
const identities = Logic.identities();
|
||||||
|
let start = identities.indexOf(this.selectedHistory[this.selectedHistory.length-1]);
|
||||||
|
let end = identities.indexOf(identity);
|
||||||
|
if (start > end) {
|
||||||
|
const tmp = start;
|
||||||
|
end = start;
|
||||||
|
start = tmp;
|
||||||
|
}
|
||||||
|
|
||||||
|
for (let i = start; i <= end; i++) {
|
||||||
|
Logic.addSelectedIdentiry(identities[i]);
|
||||||
|
}
|
||||||
|
|
||||||
|
} else if (index === -1) {
|
||||||
|
this.selectedHistory.push(identity);
|
||||||
|
Logic.addSelectedIdentiry(identity);
|
||||||
|
} else if (this.switchOn === 0){
|
||||||
|
this.selectedHistory.splice(index, 1);
|
||||||
|
Logic.removeSelectedIdentity(identity);
|
||||||
|
}
|
||||||
|
console.log(Logic.currentSelectedIdentities());
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
|
@ -179,7 +179,7 @@
|
||||||
<tbody id="edit-identities-list"></tbody>
|
<tbody id="edit-identities-list"></tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
<div class="panel-footer panel-footer-secondary" hidden>
|
<div class="panel-footer panel-footer-secondary">
|
||||||
<a href="#" id="delete-link" class="edit-container-delete-button">Delete</a>
|
<a href="#" id="delete-link" class="edit-container-delete-button">Delete</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="panel-footer edit-containers-panel-footer">
|
<div class="panel-footer edit-containers-panel-footer">
|
||||||
|
|
Loading…
Add table
Reference in a new issue