Skip to content

Commit 8c25a79

Browse files
SamuelTalletSamuelTallet
committed
Enhance navigation experience
1 parent ee0aa43 commit 8c25a79

14 files changed

+392
-867
lines changed

‎static/js/mpg.collection.import.js‎

Lines changed: 2 additions & 172 deletions
Original file line numberDiff line numberDiff line change
@@ -1,176 +1,4 @@
11

2-
/**
3-
* MongoDB PHP GUI namespace.
4-
*
5-
* @type {object}
6-
*/
7-
var MPG = {};
8-
9-
/**
10-
* Name of current database.
11-
*
12-
* @type {string}
13-
*/
14-
MPG.databaseName = '';
15-
16-
/**
17-
* Name of current collection.
18-
*
19-
* @type {string}
20-
*/
21-
MPG.collectionName = '';
22-
23-
/**
24-
* Helpers sub-namespace.
25-
*
26-
* @type {object}
27-
*/
28-
MPG.helpers = {};
29-
30-
/**
31-
* Does an ajax request.
32-
*
33-
* @param {string} method
34-
* @param {string} url
35-
* @param {function} successCallback
36-
* @param {?string} body
37-
*
38-
* @returns {void}
39-
*/
40-
MPG.helpers.doAjaxRequest = function(method, url, successCallback, body) {
41-
42-
var xhr = new XMLHttpRequest();
43-
44-
xhr.addEventListener('readystatechange', function() {
45-
46-
if ( this.readyState === 4 ) {
47-
if ( this.status === 200 ) {
48-
successCallback(this.responseText);
49-
} else {
50-
window.alert('Error: ' + JSON.parse(this.responseText).error.message);
51-
}
52-
}
53-
54-
});
55-
56-
xhr.open(method, url);
57-
xhr.send(body);
58-
59-
};
60-
61-
/**
62-
* Reloads collections of a specific database.
63-
*
64-
* @param {string} databaseName
65-
*
66-
* @returns {void}
67-
*/
68-
MPG.reloadCollections = function(databaseName) {
69-
70-
var requestBody = { 'databaseName': databaseName };
71-
72-
MPG.helpers.doAjaxRequest(
73-
'POST', MPG_BASE_URL + '/ajaxDatabaseListCollections', function(response) {
74-
75-
var collectionsList = document.querySelector('#mpg-collections-list');
76-
77-
collectionsList.innerHTML = '';
78-
MPG.collectionName = '';
79-
80-
JSON.parse(response).forEach(function(collectionName) {
81-
82-
collectionsList.innerHTML +=
83-
'<li class="collection-name">'
84-
+ '<i class="fa fa-file-text" aria-hidden="true"></i> '
85-
+ '<a class="mpg-collection-link" '
86-
+ 'data-collection-name="' + collectionName
87-
+ '" href="#' + MPG.databaseName + '/' + collectionName + '">'
88-
+ collectionName
89-
+ '</a>'
90-
+ '</li>';
91-
92-
});
93-
94-
MPG.eventListeners.addCollections();
95-
96-
},
97-
JSON.stringify(requestBody)
98-
);
99-
100-
};
101-
102-
/**
103-
* Event listeners sub-namespace.
104-
*
105-
* @type {object}
106-
*/
107-
MPG.eventListeners = {};
108-
109-
/**
110-
* Adds an event listener on "Menu toggle" button.
111-
*
112-
* @returns {void}
113-
*/
114-
MPG.eventListeners.addMenuToggle = function() {
115-
116-
document.querySelector('#menu-toggle-button').addEventListener('click', function(_event) {
117-
document.querySelector('.navbar').classList.toggle('menu-expanded');
118-
});
119-
120-
};
121-
122-
/**
123-
* Adds an event listener on each database.
124-
*
125-
* @returns {void}
126-
*/
127-
MPG.eventListeners.addDatabases = function() {
128-
129-
document.querySelectorAll('.mpg-database-link').forEach(function(databaseLink) {
130-
131-
databaseLink.addEventListener('click', function(_event) {
132-
133-
MPG.databaseName = databaseLink.dataset.databaseName;
134-
135-
document.querySelectorAll('.mpg-database-link').forEach(function(databaseLink) {
136-
databaseLink.classList.remove('font-weight-bold');
137-
});
138-
139-
databaseLink.classList.add('font-weight-bold');
140-
141-
MPG.reloadCollections(databaseLink.dataset.databaseName);
142-
143-
});
144-
145-
});
146-
147-
};
148-
149-
/**
150-
* Adds an event listener on each collection.
151-
*
152-
* @returns {void}
153-
*/
154-
MPG.eventListeners.addCollections = function() {
155-
156-
document.querySelectorAll('.mpg-collection-link').forEach(function(collectionLink) {
157-
158-
collectionLink.addEventListener('click', function(_event) {
159-
160-
MPG.collectionName = collectionLink.dataset.collectionName;
161-
162-
document.querySelectorAll('.mpg-collection-link').forEach(function(collectionLink) {
163-
collectionLink.classList.remove('font-weight-bold');
164-
});
165-
166-
collectionLink.classList.add('font-weight-bold');
167-
168-
});
169-
170-
});
171-
172-
};
173-
1742
/**
1753
* Adds an event listener on "Import" button.
1764
*
@@ -206,4 +34,6 @@ window.addEventListener('DOMContentLoaded', function(_event) {
20634
MPG.eventListeners.addDatabases();
20735
MPG.eventListeners.addImport();
20836

37+
MPG.helpers.navigateOnSamePage();
38+
20939
});

‎static/js/mpg.collection.indexes.js‎

Lines changed: 22 additions & 141 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,4 @@
11

2-
/**
3-
* MongoDB PHP GUI namespace.
4-
*
5-
* @type {object}
6-
*/
7-
var MPG = {};
8-
9-
/**
10-
* Name of current database.
11-
*
12-
* @type {string}
13-
*/
14-
MPG.databaseName = '';
15-
16-
/**
17-
* Name of current collection.
18-
*
19-
* @type {string}
20-
*/
21-
MPG.collectionName = '';
22-
232
/**
243
* Field names of current collection.
254
*
@@ -34,85 +13,6 @@ MPG.collectionFields = [];
3413
*/
3514
MPG.collectionIndexes = [];
3615

37-
/**
38-
* Helpers sub-namespace.
39-
*
40-
* @type {object}
41-
*/
42-
MPG.helpers = {};
43-
44-
/**
45-
* Does an ajax request.
46-
*
47-
* @param {string} method
48-
* @param {string} url
49-
* @param {function} successCallback
50-
* @param {?string} body
51-
*
52-
* @returns {void}
53-
*/
54-
MPG.helpers.doAjaxRequest = function(method, url, successCallback, body) {
55-
56-
var xhr = new XMLHttpRequest();
57-
58-
xhr.addEventListener('readystatechange', function() {
59-
60-
if ( this.readyState === 4 ) {
61-
if ( this.status === 200 ) {
62-
successCallback(this.responseText);
63-
} else {
64-
window.alert('Error: ' + JSON.parse(this.responseText).error.message);
65-
}
66-
}
67-
68-
});
69-
70-
xhr.open(method, url);
71-
xhr.send(body);
72-
73-
};
74-
75-
/**
76-
* Reloads collections of a specific database.
77-
*
78-
* @param {string} databaseName
79-
*
80-
* @returns {void}
81-
*/
82-
MPG.reloadCollections = function(databaseName) {
83-
84-
var requestBody = { 'databaseName': databaseName };
85-
86-
MPG.helpers.doAjaxRequest(
87-
'POST', MPG_BASE_URL + '/ajaxDatabaseListCollections', function(response) {
88-
89-
var collectionsList = document.querySelector('#mpg-collections-list');
90-
91-
collectionsList.innerHTML = '';
92-
MPG.collectionName = '';
93-
94-
JSON.parse(response).forEach(function(collectionName) {
95-
96-
collectionsList.innerHTML +=
97-
'<li class="collection-name">'
98-
+ '<i class="fa fa-file-text" aria-hidden="true"></i> '
99-
+ '<a class="mpg-collection-link" '
100-
+ 'data-collection-name="' + collectionName
101-
+ '" href="#' + MPG.databaseName + '/' + collectionName + '">'
102-
+ collectionName
103-
+ '</a>'
104-
+ '</li>';
105-
106-
});
107-
108-
MPG.eventListeners.addCollections();
109-
110-
},
111-
JSON.stringify(requestBody)
112-
);
113-
114-
};
115-
11616
/**
11717
* Reloads fields of current collection.
11818
*
@@ -224,26 +124,6 @@ MPG.reloadCollectionIndexes = function() {
224124

225125
};
226126

227-
/**
228-
* Event listeners sub-namespace.
229-
*
230-
* @type {object}
231-
*/
232-
MPG.eventListeners = {};
233-
234-
/**
235-
* Adds an event listener on "Menu toggle" button.
236-
*
237-
* @returns {void}
238-
*/
239-
MPG.eventListeners.addMenuToggle = function() {
240-
241-
document.querySelector('#menu-toggle-button').addEventListener('click', function(_event) {
242-
document.querySelector('.navbar').classList.toggle('menu-expanded');
243-
});
244-
245-
};
246-
247127
/**
248128
* Adds an event listener on each database.
249129
*
@@ -256,6 +136,7 @@ MPG.eventListeners.addDatabases = function() {
256136
databaseLink.addEventListener('click', function(_event) {
257137

258138
MPG.databaseName = databaseLink.dataset.databaseName;
139+
MPG.helpers.completeNavLinks('#' + MPG.databaseName);
259140

260141
document.querySelectorAll('.mpg-database-link').forEach(function(databaseLink) {
261142
databaseLink.classList.remove('font-weight-bold');
@@ -288,6 +169,7 @@ MPG.eventListeners.addCollections = function() {
288169
collectionLink.addEventListener('click', function(_event) {
289170

290171
MPG.collectionName = collectionLink.dataset.collectionName;
172+
MPG.helpers.completeNavLinks('#' + MPG.databaseName + '/' + MPG.collectionName);
291173

292174
document.querySelectorAll('.mpg-collection-link').forEach(function(collectionLink) {
293175
collectionLink.classList.remove('font-weight-bold');
@@ -304,6 +186,24 @@ MPG.eventListeners.addCollections = function() {
304186

305187
});
306188

189+
if ( MPG.toDoList.reselectCollection !== '' ) {
190+
191+
var collectionSelector = '.mpg-collection-link' + '[data-collection-name="'
192+
+ MPG.toDoList.reselectCollection + '"]';
193+
194+
var collection = document.querySelector(collectionSelector);
195+
196+
if ( collection ) {
197+
collection.click();
198+
} else {
199+
window.alert('Error: Collection not found. Select another one.');
200+
window.location.hash = '';
201+
}
202+
203+
MPG.toDoList.reselectCollection = '';
204+
205+
}
206+
307207
};
308208

309209
/**
@@ -403,27 +303,6 @@ MPG.eventListeners.addDropIndex = function() {
403303

404304
};
405305

406-
/**
407-
* Adds an event listener on dismissible alerts.
408-
*
409-
* @returns {void}
410-
*/
411-
MPG.eventListeners.addDismissibleAlerts = function() {
412-
413-
document.querySelectorAll('.alert [data-dismiss="alert"]')
414-
.forEach(function(alertCloseButton) {
415-
416-
alertCloseButton.addEventListener('click', function(event) {
417-
418-
var alert = document.getElementById(event.currentTarget.dataset.alertId);
419-
alert.classList.add('d-none');
420-
421-
});
422-
423-
});
424-
425-
};
426-
427306
// When document is ready:
428307
window.addEventListener('DOMContentLoaded', function(_event) {
429308

@@ -432,4 +311,6 @@ window.addEventListener('DOMContentLoaded', function(_event) {
432311
MPG.eventListeners.addCreateIndex();
433312
MPG.eventListeners.addDismissibleAlerts();
434313

314+
MPG.helpers.navigateOnSamePage();
315+
435316
});

0 commit comments

Comments
 (0)