Skip to content

Commit

Permalink
Simplify code
Browse files Browse the repository at this point in the history 
use this.list instead of getting list from dom
  • Loading branch information
@sukhwinder33445
sukhwinder33445 committed Jun 27, 2024
1 parent eb026c9 commit 7d5e35f
Showing 1 changed file with 67 additions and 83 deletions.
150 changes: 67 additions & 83 deletions asset/js/widget/ActionList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,14 +60,12 @@ define(["../notjQuery"], function (notjQuery) {
}

/**
* Suspend auto refresh for the given item's container
*
* @param {Element} item
* Suspend auto refresh for the list's container
*
* @return {string} The container's id
*/
suspendAutoRefresh(item) {
const container = item.closest('.container');
suspendAutoRefresh() {
const container = this.list.closest('.container');
container.dataset.suspendAutorefresh = '';

return container.id;
Expand All @@ -83,7 +81,6 @@ define(["../notjQuery"], function (notjQuery) {
}

onClick(event) {
let _this = this;//event.data.self;
let target = event.currentTarget;

if (target.matches('a') && (! target.matches('.subject') || event.ctrlKey || event.metaKey)) {
Expand All @@ -95,12 +92,11 @@ define(["../notjQuery"], function (notjQuery) {
event.stopPropagation();

let item = target.closest(LIST_ITEM_IDENTIFIER);
let list = _this.list;//target.closest('.action-list');
let activeItems = _this.getActiveItems(list);
let activeItems = this.getActiveItems();
let toActiveItems = [],
toDeactivateItems = [];

const isBeingMultiSelected = list.matches('[data-icinga-multiselect-url]')
const isBeingMultiSelected = this.list.matches('[data-icinga-multiselect-url]')
&& (event.ctrlKey || event.metaKey || event.shiftKey);

if (isBeingMultiSelected) {
Expand All @@ -113,7 +109,7 @@ define(["../notjQuery"], function (notjQuery) {
} else {
document.getSelection().removeAllRanges();

let allItems = _this.getAllItems(list);
let allItems = this.getAllItems();

let startIndex = allItems.indexOf(item);
if(startIndex < 0) {
Expand All @@ -139,18 +135,18 @@ define(["../notjQuery"], function (notjQuery) {
if (activeItems.length === 1
&& toActiveItems.length === 0
) {
notjQuery(list).trigger('all-deselected', {target: target, actionList: _this});
notjQuery(this.list).trigger('all-deselected', {target: target, actionList: this});

_this.clearSelection(toDeactivateItems);
_this.addSelectionCountToFooter(list);
this.clearSelection(toDeactivateItems);
this.addSelectionCountToFooter();
return;
}

let dashboard = list.closest('.dashboard');
let dashboard = this.list.closest('.dashboard');
if (dashboard) {
dashboard.querySelectorAll('.action-list').forEach(otherList => {
if (otherList !== list) {
toDeactivateItems.push(..._this.getAllItems(otherList));
dashboard.querySelectorAll(LIST_IDENTIFIER).forEach(otherList => {
if (otherList !== this.list) {
toDeactivateItems.push(...this.getAllItems(otherList));
}
})
}
Expand All @@ -164,29 +160,28 @@ define(["../notjQuery"], function (notjQuery) {
: activeItems[activeItems.length - 1].dataset.icingaDetailFilter;
}

_this.clearSelection(toDeactivateItems);
_this.setActive(toActiveItems);
this.clearSelection(toDeactivateItems);
this.setActive(toActiveItems);

if (! dashboard) {
_this.addSelectionCountToFooter(list);
this.addSelectionCountToFooter();
}

_this.setLastActivatedItemUrl(lastActivatedUrl);
_this.loadDetailUrl(list, target.matches('a') ? target.getAttribute('href') : null);
this.setLastActivatedItemUrl(lastActivatedUrl);
this.loadDetailUrl(target.matches('a') ? target.getAttribute('href') : null);
}

/**
* Add the selection count to footer if list allow multi selection
*
* @param list
*/
addSelectionCountToFooter(list) {
if (! list.matches('[data-icinga-multiselect-url]')) {
addSelectionCountToFooter() {
if (! this.list.matches('[data-icinga-multiselect-url]')) {
return;
}

let activeItemCount = this.getActiveItems(list).length;
let footer = list.closest('.container').querySelector('.footer');
let activeItemCount = this.getActiveItems().length;
let footer = this.list.closest('.container').querySelector('.footer');

// For items that do not have a bottom status bar like Downtimes, Comments...
if (footer === null) {
Expand All @@ -196,7 +191,7 @@ define(["../notjQuery"], function (notjQuery) {
'</div>'
)

list.closest('.container').appendChild(footer);
this.list.closest('.container').appendChild(footer);
}

let selectionCount = footer.querySelector('.selection-count');
Expand All @@ -210,8 +205,8 @@ define(["../notjQuery"], function (notjQuery) {

let selectedItems = selectionCount.querySelector('.selected-items');
selectedItems.innerText = activeItemCount
? list.dataset.icingaMultiselectCountLabel.replace('%d', activeItemCount)
: list.dataset.icingaMultiselectHintLabel;
? this.list.dataset.icingaMultiselectCountLabel.replace('%d', activeItemCount)
: this.list.dataset.icingaMultiselectHintLabel;

if (activeItemCount === 0) {
selectedItems.classList.add('hint');
Expand All @@ -221,7 +216,7 @@ define(["../notjQuery"], function (notjQuery) {
}

/**
* Key navigation for .action-list
* Key navigation
*
* - `Shift + ArrowUp|ArrowDown` = Multiselect
* - `ArrowUp|ArrowDown` = Select next/previous
Expand All @@ -230,7 +225,6 @@ define(["../notjQuery"], function (notjQuery) {
* @param event
*/
onKeyDown(event) {
let _this = this;//event.data.self;
let list = null;
let pressedArrowDownKey = event.key === 'ArrowDown';
let pressedArrowUpKey = event.key === 'ArrowUp';
Expand Down Expand Up @@ -271,33 +265,33 @@ define(["../notjQuery"], function (notjQuery) {
}

event.preventDefault();
_this.selectAll(list);
this.selectAll();
return;
}

event.preventDefault();

let allItems = _this.getAllItems(list);
let allItems = this.getAllItems();
let firstListItem = allItems[0];
let lastListItem = allItems[allItems.length -1];
let activeItems = _this.getActiveItems(list);
let activeItems = this.getActiveItems();
let markAsLastActive = null; // initialized only if it is different from toActiveItem
let toActiveItem = null;
let wasAllSelected = activeItems.length === allItems.length;
let lastActivatedItem = list.querySelector(
`[data-icinga-detail-filter="${ _this.lastActivatedItemUrl }"]`
`[data-icinga-detail-filter="${ this.lastActivatedItemUrl }"]`
);

if (! lastActivatedItem && activeItems.length) {
lastActivatedItem = activeItems[activeItems.length - 1];
}

let directionalNextItem = _this.getDirectionalNext(lastActivatedItem, event.key);
let directionalNextItem = this.getDirectionalNext(lastActivatedItem, event.key);

if (activeItems.length === 0) {
toActiveItem = pressedArrowDownKey ? firstListItem : lastListItem;
// reset all on manual page refresh
_this.clearSelection(activeItems);
this.clearSelection(activeItems);
} else if (isMultiSelectableList && event.shiftKey) {
if (activeItems.length === 1) {
toActiveItem = directionalNextItem;
Expand All @@ -313,34 +307,34 @@ define(["../notjQuery"], function (notjQuery) {

} else if (directionalNextItem && directionalNextItem.classList.contains('active')) {
// deactivate last activated by down to up select
_this.clearSelection([lastActivatedItem]);
this.clearSelection([lastActivatedItem]);
if (wasAllSelected) {
_this.scrollItemIntoView(lastActivatedItem, event.key);
this.scrollItemIntoView(lastActivatedItem, event.key);
}

toActiveItem = directionalNextItem;
} else {
[toActiveItem, markAsLastActive] = _this.findToActiveItem(lastActivatedItem, event.key);
[toActiveItem, markAsLastActive] = this.findToActiveItem(lastActivatedItem, event.key);
}
} else {
toActiveItem = directionalNextItem;

if (toActiveItem) {
_this.clearSelection(activeItems);
this.clearSelection(activeItems);
}
}

if (! toActiveItem) {
return;
}

_this.setActive(toActiveItem);
_this.setLastActivatedItemUrl(
this.setActive(toActiveItem);
this.setLastActivatedItemUrl(
markAsLastActive ? markAsLastActive.dataset.icingaDetailFilter : toActiveItem.dataset.icingaDetailFilter
);
_this.scrollItemIntoView(toActiveItem, event.key);
_this.addSelectionCountToFooter(list);
_this.loadDetailUrl(list);
this.scrollItemIntoView(toActiveItem, event.key);
this.addSelectionCountToFooter();
this.loadDetailUrl();
}

/**
Expand Down Expand Up @@ -378,15 +372,10 @@ define(["../notjQuery"], function (notjQuery) {
let toActiveItem;
let markAsLastActive;

toActiveItem = this.getDirectionalNext(lastActivatedItem, eventKey);

while (toActiveItem) {
if (! toActiveItem.classList.contains('active')) {
break;
}

toActiveItem = this.getDirectionalNext(toActiveItem, eventKey);
}
do {
toActiveItem = this.getDirectionalNext(lastActivatedItem, eventKey);
lastActivatedItem = toActiveItem;
} while (toActiveItem && toActiveItem.classList.contains('active'))

markAsLastActive = toActiveItem;
// if the next/previous sibling element is already active,
Expand All @@ -404,16 +393,14 @@ define(["../notjQuery"], function (notjQuery) {

/**
* Select All list items
*
* @param list The action list
*/
selectAll(list) {
let allItems = this.getAllItems(list);
let activeItems = this.getActiveItems(list);
selectAll() {
let allItems = this.getAllItems();
let activeItems = this.getActiveItems();
this.setActive(allItems.filter(item => ! activeItems.includes(item)));
this.setLastActivatedItemUrl(allItems[allItems.length -1].dataset.icingaDetailFilter);
this.addSelectionCountToFooter(list);
this.loadDetailUrl(list);
this.addSelectionCountToFooter();
this.loadDetailUrl();
}

/**
Expand Down Expand Up @@ -452,12 +439,11 @@ define(["../notjQuery"], function (notjQuery) {
/**
* Load the detail url with selected items
*
* @param list The action list
* @param anchorUrl If any anchor is clicked (e.g. host in service list)
*/
loadDetailUrl(list, anchorUrl = null) {
loadDetailUrl(anchorUrl = null) {
let url = anchorUrl;
let activeItems = this.getActiveItems(list);
let activeItems = this.getActiveItems();

if (url === null) {
if (activeItems.length > 1) {
Expand All @@ -472,7 +458,7 @@ define(["../notjQuery"], function (notjQuery) {
return;
}

const suspendedContainer = this.suspendAutoRefresh(list);
const suspendedContainer = this.suspendAutoRefresh();

clearTimeout(this.lastTimeoutId);
this.lastTimeoutId = setTimeout(() => {
Expand Down Expand Up @@ -510,38 +496,36 @@ define(["../notjQuery"], function (notjQuery) {
}

/**
* Get the active items from given list
*
* @param list The action list
* Get the active items
*
* @return array
*/
getActiveItems(list)
getActiveItems()
{
let items;
if (list.tagName.toLowerCase() === 'table') {
items = list.querySelectorAll(`:scope > tbody > ${LIST_ITEM_IDENTIFIER}.active`);

if (this.list.tagName.toLowerCase() === 'table') {
items = this.list.querySelectorAll(`:scope > tbody > ${LIST_ITEM_IDENTIFIER}.active`);
} else {
items = list.querySelectorAll(`:scope > ${LIST_ITEM_IDENTIFIER}.active`);
items = this.list.querySelectorAll(`:scope > ${LIST_ITEM_IDENTIFIER}.active`);
}

return Array.from(items);
}

/**
* Get all available items from given list
*
* @param list The action list
* Get all available items
*
* @return array
*/
getAllItems(list)
getAllItems()
{
let items;
if (list.tagName.toLowerCase() === 'table') {
items = list.querySelectorAll(`:scope > tbody > ${LIST_ITEM_IDENTIFIER}`);

if (this.list.tagName.toLowerCase() === 'table') {
items = this.list.querySelectorAll(`:scope > tbody > ${LIST_ITEM_IDENTIFIER}`);
} else {
items = list.querySelectorAll(`:scope > ${LIST_ITEM_IDENTIFIER}`);
items = this.list.querySelectorAll(`:scope > ${LIST_ITEM_IDENTIFIER}`);
}

return Array.from(items);
Expand Down Expand Up @@ -611,7 +595,7 @@ define(["../notjQuery"], function (notjQuery) {
let _this = event.data.self;

if (event.target.id === 'col2' && sourceId === 'col1') { // only for browser-back (col1 shifted to col2)
_this.clearSelection(event.target.querySelectorAll('.action-list .active'));
_this.clearSelection(event.target.querySelectorAll(`${LIST_IDENTIFIER} .active`));
} else if (event.target.id === 'col1' && sourceId === 'col2') {
for (const requestNo of Object.keys(_this.activeRequests)) {
if (_this.activeRequests[requestNo] === sourceId) {
Expand Down Expand Up @@ -675,7 +659,7 @@ define(["../notjQuery"], function (notjQuery) {
if (isTopLevelContainer) {
let footerList = list ?? container.querySelector(LIST_IDENTIFIER);
if (footerList) {
_this.addSelectionCountToFooter(footerList);
_this.addSelectionCountToFooter();
}
}
}
Expand Down

0 comments on commit 7d5e35f

Please sign in to comment.