IntenseWebs/pgadmin4
3
0
Fork 0
mirror of https://github.com/pgadmin-org/pgadmin4.git synced 2026-08-10 04:58:03 -05:00
Code Issues Packages Projects Releases Wiki Activity

Port preferences dialog to React. Fixes #7149

Browse Source
This commit is contained in:
Nikhil Mohite
2022-03-21 13:29:26 +05:30
committed by Akshay Joshi
parent 3299b0c1b0
commit 74e794b416
65 changed files with 2646 additions and 1006 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/pgadmin/static/js/tree/tree.js
+84 -68
View File
@@ -14,52 +14,68 @@ import pgAdmin from 'sources/pgadmin';
import { FileType } from 'react-aspen';
import { TreeNode } from './tree_nodes';
import {isValidData} from 'sources/utils';
import { isValidData } from 'sources/utils';
function manageTreeEvents(event, eventName, item) {
let d = item ? item._metadata.data: [];
let d = item ? item._metadata.data : [];
let node_metadata = item ? item._metadata : {};
let node;
let obj = pgAdmin.Browser;
if (d && obj.Nodes[d._type]) {
node = obj.Nodes[d._type];
// If the Browser tree is not initialised yet
if (obj.tree === null) return;
if (eventName == 'dragstart') {
obj.tree.handleDraggable(event, item);
}
if (eventName == 'added' || eventName == 'beforeopen' || eventName == 'loaded') {
obj.tree.addNewNode(item.getMetadata('data').id, item.getMetadata('data') ,item, item.parent.path);
}
if (_.isObject(node.callbacks) &&
eventName in node.callbacks &&
typeof node.callbacks[eventName] == 'function' &&
!node.callbacks[eventName].apply(
node, [item, d, obj, [], eventName])) {
return true;
}
/* Raise tree events for the nodes */
// Events for preferences tree.
if (node_metadata.parent && node_metadata.parent.includes('/preferences') && obj.ptree.tree.type == 'preferences') {
try {
node.trigger(
'browser-node.' + eventName, node, item, d
);
obj.Events.trigger(
'pgadmin-browser:tree:' + eventName, item, d, node
'preferences:tree:' + eventName, item, d
);
} catch (e) {
console.warn(e.stack || e);
return false;
}
} else {
// Events for browser tree.
if (d && obj.Nodes[d._type]) {
node = obj.Nodes[d._type];
// If the Browser tree is not initialised yet
if (obj.tree === null) return;
if (eventName == 'dragstart') {
obj.tree.handleDraggable(event, item);
}
if (eventName == 'added' || eventName == 'beforeopen' || eventName == 'loaded') {
obj.tree.addNewNode(item.getMetadata('data').id, item.getMetadata('data'), item, item.parent.path);
}
if (_.isObject(node.callbacks) &&
eventName in node.callbacks &&
typeof node.callbacks[eventName] == 'function' &&
!node.callbacks[eventName].apply(
node, [item, d, obj, [], eventName])) {
return true;
}
/* Raise tree events for the nodes */
try {
node.trigger(
'browser-node.' + eventName, node, item, d
);
obj.Events.trigger(
'pgadmin-browser:tree:' + eventName, item, d, node
);
} catch (e) {
console.warn(e.stack || e);
return false;
}
}
}
return true;
}
export class Tree {
constructor(tree, manageTree, pgBrowser) {
constructor(tree, manageTree, pgBrowser, type) {
this.tree = tree;
this.tree.type = type ? type : 'browser';
this.tree.onTreeEvents(manageTreeEvents);
this.rootNode = manageTree.tempTree;
@@ -102,12 +118,12 @@ export class Tree {
}
next(item) {
if(item) {
if (item) {
let parent = this.parent(item);
if(parent && parent.children.length > 0) {
if (parent && parent.children.length > 0) {
let idx = parent.children.indexOf(item);
if(idx !== -1 && parent.children.length !== idx+1) {
return parent.children[idx+1];
if (idx !== -1 && parent.children.length !== idx + 1) {
return parent.children[idx + 1];
}
}
}
@@ -115,12 +131,12 @@ export class Tree {
}
prev(item) {
if(item) {
if (item) {
let parent = this.parent(item);
if(parent && parent.children.length > 0) {
if (parent && parent.children.length > 0) {
let idx = parent.children.indexOf(item);
if(idx !== -1 && idx !== 0) {
return parent.children[idx-1];
if (idx !== -1 && idx !== 0) {
return parent.children[idx - 1];
}
}
}
@@ -136,7 +152,7 @@ export class Tree {
await item.ensureLoaded();
}
async ensureVisible(item){
async ensureVisible(item) {
await this.tree.ensureVisible(item);
}
@@ -153,11 +169,11 @@ export class Tree {
await this.tree.toggleDirectory(item);
}
async select(item, ensureVisible=false, align='auto') {
async select(item, ensureVisible = false, align = 'auto') {
await this.tree.setActiveFile(item, ensureVisible, align);
}
async selectNode(item, ensureVisible=false, align='auto') {
async selectNode(item, ensureVisible = false, align = 'auto') {
this.tree.setActiveFile(item, ensureVisible, align);
}
@@ -180,18 +196,18 @@ export class Tree {
// TBD
}
async setLabel(item, label) {
if(item) {
if (item) {
await this.tree.setLabel(item, label);
}
}
async setInode(item) {
if(item._children) item._children = null;
if (item._children) item._children = null;
await this.tree.closeDirectory(item);
}
async setId(item, data) {
if(item) {
if (item) {
item.getMetadata('data').id = data.id;
}
}
@@ -269,7 +285,7 @@ export class Tree {
siblings(item) {
if (this.hasParent(item)) {
let _siblings = this.parent(item).children.filter((_item) => _item.path !== item.path);
if (typeof(_siblings) !== 'object') return [_siblings];
if (typeof (_siblings) !== 'object') return [_siblings];
else return _siblings;
}
return [];
@@ -294,7 +310,7 @@ export class Tree {
}
itemData(item) {
return (item !== undefined && item !== null && item.getMetadata('data') !== undefined) ? item._metadata.data : [];
return (item !== undefined && item !== null && item.getMetadata('data') !== undefined) ? item._metadata.data : [];
}
getData(item) {
@@ -323,18 +339,18 @@ export class Tree {
findNodeWithToggle(path) {
let tree = this;
if(path == null || !Array.isArray(path)) {
if (path == null || !Array.isArray(path)) {
return Promise.reject();
}
path = '/browser/' + path.join('/');
let onCorrectPath = function(matchPath) {
let onCorrectPath = function (matchPath) {
return (matchPath !== undefined && path !== undefined
&& (path.startsWith(matchPath) || path === matchPath));
};
return (function findInNode(currentNode) {
return new Promise((resolve, reject)=>{
return new Promise((resolve, reject) => {
if (path === null || path === undefined || path.length === 0) {
resolve(null);
}
@@ -347,18 +363,18 @@ export class Tree {
resolve(currentNode);
} else {
tree.open(currentNode)
.then(()=>{
.then(() => {
let children = currentNode.children;
for (let i = 0, length = children.length; i < length; i++) {
let childNode = children[i];
if(onCorrectPath(childNode.path)) {
if (onCorrectPath(childNode.path)) {
resolve(findInNode(childNode));
return;
}
}
reject(null);
})
.catch(()=>{
.catch(() => {
reject(null);
});
}
@@ -368,7 +384,7 @@ export class Tree {
findNodeByDomElement(domElement) {
const path = domElement.path;
if(!path || !path[0]) {
if (!path || !path[0]) {
return undefined;
}
@@ -390,7 +406,7 @@ export class Tree {
createOrUpdateNode(id, data, parent, domNode) {
let oldNodePath = id;
if(parent !== null && parent !== undefined && parent.path !== undefined && parent.path != '/browser') {
if (parent !== null && parent !== undefined && parent.path !== undefined && parent.path != '/browser') {
oldNodePath = parent.path + '/' + id;
}
const oldNode = this.findNode(oldNodePath);
@@ -456,14 +472,14 @@ export class Tree {
* cur is selection range of text after dropping. If returned as
* string, by default cursor will be set to the end of text
*/
registerDraggableType(typeOrTypeDict, dropDetailsFunc=null) {
if(typeof typeOrTypeDict == 'object') {
Object.keys(typeOrTypeDict).forEach((type)=>{
registerDraggableType(typeOrTypeDict, dropDetailsFunc = null) {
if (typeof typeOrTypeDict == 'object') {
Object.keys(typeOrTypeDict).forEach((type) => {
this.registerDraggableType(type, typeOrTypeDict[type]);
});
} else {
if(dropDetailsFunc != null) {
typeOrTypeDict.replace(/ +/, ' ').split(' ').forEach((type)=>{
if (dropDetailsFunc != null) {
typeOrTypeDict.replace(/ +/, ' ').split(' ').forEach((type) => {
this.draggableTypes[type] = dropDetailsFunc;
});
}
@@ -471,7 +487,7 @@ export class Tree {
}
getDraggable(type) {
if(this.draggableTypes[type]) {
if (this.draggableTypes[type]) {
return this.draggableTypes[type];
} else {
return null;
@@ -482,7 +498,7 @@ export class Tree {
let data = item.getMetadata('data');
let dropDetailsFunc = this.getDraggable(data._type);
if(dropDetailsFunc != null) {
if (dropDetailsFunc != null) {
/* addEventListener is used here because import jquery.drag.event
* overrides the dragstart event set using element.on('dragstart')
@@ -490,20 +506,20 @@ export class Tree {
*/
let dropDetails = dropDetailsFunc(data, item, this.getTreeNodeHierarchy(item));
if(typeof dropDetails == 'string') {
if (typeof dropDetails == 'string') {
dropDetails = {
text:dropDetails,
cur:{
from:dropDetails.length,
text: dropDetails,
cur: {
from: dropDetails.length,
to: dropDetails.length,
},
};
} else {
if(!dropDetails.cur) {
if (!dropDetails.cur) {
dropDetails = {
...dropDetails,
cur:{
from:dropDetails.text.length,
cur: {
from: dropDetails.text.length,
to: dropDetails.text.length,
},
};
@@ -512,14 +528,14 @@ export class Tree {
e.dataTransfer.setData('text', JSON.stringify(dropDetails));
/* Required by Firefox */
if(e.dataTransfer.dropEffect) {
if (e.dataTransfer.dropEffect) {
e.dataTransfer.dropEffect = 'move';
}
/* setDragImage is not supported in IE. We leave it to
* its default look and feel
*/
if(e.dataTransfer.setDragImage) {
if (e.dataTransfer.setDragImage) {
let dragItem = $(`
<div class="drag-tree-node">
<span>${_.escape(dropDetails.text)}</span>
@@ -576,4 +592,4 @@ export function findInTree(rootNode, path) {
let isValidTreeNodeData = isValidData;
export {isValidTreeNodeData};
export { isValidTreeNodeData };