Skip to content

Commit

Permalink
Load items properly after auto/manual page refresh
Browse files Browse the repository at this point in the history 
Remove unused code
  • Loading branch information
@sukhwinder33445
sukhwinder33445 committed Jul 4, 2024
1 parent 458b9dc commit 1a9c89e
Showing 1 changed file with 24 additions and 146 deletions.
170 changes: 24 additions & 146 deletions asset/js/widget/ActionList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,30 +11,24 @@ define(["../notjQuery"], function (notjQuery) {

this.lastActivatedItemUrl = null;
this.lastTimeoutId = null;
this.activeRequests = {};
}

bind() {
notjQuery(this.list).on('click', `${LIST_IDENTIFIER} ${LIST_ITEM_IDENTIFIER}, ${LIST_IDENTIFIER} ${LIST_ITEM_IDENTIFIER} a[href]`, this.onClick, this);
/*this.on('close-column', '#main > #col2', this.onColumnClose, this);
this.on('column-moved', this.onColumnMoved, this);*/

notjQuery(document).on('keydown','body', this.onKeyDown, this);
//notjQuery(this.list).on('rendered', this.onRendered, this);

// this.onRendered(this.list);

return this;
}

refresh(list) {
refresh(list, detailUrl = null) {
if (list === this.list) {
// If the DOM node is still the same, nothing has changed
return;
}

this.list = list;
this.bind();

this.load(detailUrl)
}

destroy() {
Expand All @@ -61,27 +55,6 @@ define(["../notjQuery"], function (notjQuery) {
return identifier.replaceAll(/[\[\]]/g, '');
}

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

return container.id;
}

/**
* Enable auto refresh on the given container
*
* @param {string} containerId
*/
enableAutoRefresh(containerId) {
delete document.getElementById(containerId).dataset.suspendAutorefresh;
}

onClick(event) {
let target = event.currentTarget;

Expand Down Expand Up @@ -460,30 +433,19 @@ define(["../notjQuery"], function (notjQuery) {
return;
}

const suspendedContainer = this.suspendAutoRefresh();

clearTimeout(this.lastTimeoutId);
this.lastTimeoutId = setTimeout(() => {
const requestNo = this.lastTimeoutId;
this.activeRequests[requestNo] = suspendedContainer;
this.lastTimeoutId = null;

// TODO: maybe we need a property to know if a req is in process

notjQuery(this.list).trigger(
'load-selection',
{url: url, getTargetFor: activeItems[0], actionList: this, requestNo: requestNo}
{url: url, firstActiveItem: activeItems[0]}
);
}, 250);
}

requestFinished(requestNo, isAborted = false)
{
if (! isAborted) {
this.enableAutoRefresh(this.activeRequests[requestNo]);
}

delete this.activeRequests[requestNo];
}

/**
* Add .active class to given list item
*
Expand Down Expand Up @@ -556,123 +518,39 @@ define(["../notjQuery"], function (notjQuery) {
return url;
}

onColumnClose(event) {
let _this = event.data.self;
let list = _this.findDetailUrlActionList(document.getElementById('col1'));
if (list && list.matches('[data-icinga-multiselect-url], [data-icinga-detail-url]')) {
_this.clearSelection(_this.getActiveItems(list));
_this.addSelectionCountToFooter(list);
}
}

/**
* Find the action list using the detail url
*
* @param {Element} container
*
* @return Element|null
* Load the selection based on detail url
* @param detailUrl
*/
findDetailUrlActionList(container) {
let detailUrl = this.icinga.utils.parseUrl(
this.icinga.history.getCol2State().replace(/^#!/, '')
);

let detailItem = container.querySelector(
'[data-icinga-detail-filter="'
+ detailUrl.query.replace('?', '') + '"],' +
'[data-icinga-multiselect-filter="'
+ detailUrl.query.split('|', 1).toString().replace('?', '') + '"]'
);

return detailItem ? detailItem.parentElement : null;
}

/**
* Triggers when column is moved to left or right
*
* @param event
* @param sourceId The content is moved from
*/
onColumnMoved(event, sourceId) {
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(`${LIST_IDENTIFIER} .active`));
} else if (event.target.id === 'col1' && sourceId === 'col2') {
for (const requestNo of Object.keys(_this.activeRequests)) {
if (_this.activeRequests[requestNo] === sourceId) {
_this.enableAutoRefresh(_this.activeRequests[requestNo]);
_this.activeRequests[requestNo] = _this.suspendAutoRefresh(event.target);
}
}
}
}

onRendered(event, isAutoRefresh) {
console.log('onRendered');
let _this = event.data.self;
let container = event.target;
let isTopLevelContainer = container.matches('#main > :scope');

let list;
if (event.currentTarget !== container || Object.keys(_this.activeRequests).length) {
// Nested containers are not processed multiple times || still processing selection/navigation request
load(detailUrl = null) {
if (! detailUrl) {
return;
} else if (isTopLevelContainer && container.id !== 'col1') {
if (isAutoRefresh) {
return;
}

// only for browser back/forward navigation
list = _this.findDetailUrlActionList(document.getElementById('col1'));
} else {
list = _this.findDetailUrlActionList(container);
}

if (list && list.matches('[data-icinga-multiselect-url], [data-icinga-detail-url]')) {
let detailUrl = _this.icinga.utils.parseUrl(
_this.icinga.history.getCol2State().replace(/^#!/, '')
);
let toActiveItems = [];
if (list.dataset.icingaMultiselectUrl === detailUrl.path) {
for (const filter of _this.parseSelectionQuery(detailUrl.query.slice(1))) {
let item = list.querySelector(
'[data-icinga-multiselect-filter="' + filter + '"]'
);

if (item) {
toActiveItems.push(item);
}
}
} else if (_this.matchesDetailUrl(list.dataset.icingaDetailUrl, detailUrl.path)) {
let item = list.querySelector(
'[data-icinga-detail-filter="' + detailUrl.query.slice(1) + '"]'
let toActiveItems = [];
if (this.list.dataset.icingaMultiselectUrl === detailUrl.path) {
for (const filter of this.parseSelectionQuery(detailUrl.query.slice(1))) {
let item = this.list.querySelector(
'[data-icinga-multiselect-filter="' + filter + '"]'
);

if (item) {
toActiveItems.push(item);
}
}
} else {
let item = this.list.querySelector(
'[data-icinga-detail-filter="' + detailUrl.query.slice(1) + '"]'
);

_this.clearSelection(_this.getAllItems(list).filter(item => !toActiveItems.includes(item)));
_this.setActive(toActiveItems);
}

if (isTopLevelContainer) {
let footerList = list ?? container.querySelector(LIST_IDENTIFIER);
if (footerList) {
_this.addSelectionCountToFooter();
if (item) {
toActiveItems.push(item);
}
}
}

matchesDetailUrl(itemUrl, detailUrl) {
if (itemUrl === detailUrl) {
return true;
}

// The slash is used to avoid false positives (e.g. icingadb/hostgroup and icingadb/host)
return detailUrl.startsWith(itemUrl + '/');
this.clearSelection(this.getAllItems().filter(item => ! toActiveItems.includes(item)));
this.setActive(toActiveItems);
this.addSelectionCountToFooter();
}
}

Expand Down

0 comments on commit 1a9c89e

Please sign in to comment.