mirror/Part-DB.Part-DB-server
1
0
Fork 1
mirror of https://github.com/Part-DB/Part-DB-server.git synced 2025-06-21 01:25:55 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Use @jbtronics/bs-treeview instead of patternfy-bootstrap-treeview

Browse source
This commit is contained in:
Jan Böhmer 2022-08-13 00:28:03 +02:00
parent 461de131c6
commit 007df80b1c
3 changed files with 115 additions and 135 deletions
Download patch file Download diff file Expand all files Collapse all files

52
assets/controllers/elements/tree_controller.js
View file

@ -1,9 +1,7 @@
import {Controller} from "@hotwired/stimulus";
import "../../js/lib/bootstrap-treeview/src/css/bootstrap-treeview.css"
//import "../../js/lib/bootstrap-treeview/src/js/bootstrap-treeview.js"
import {BSTreeView} from "@jbtronics/bs-treeview";
import {BSTreeView, BS5Theme, FAIconTheme, EVENT_INITIALIZED} from "@jbtronics/bs-treeview";
import "@jbtronics/bs-treeview/styles/bs-treeview.css";
export default class extends Controller {
static targets = [ "tree" ];
@ -11,6 +9,10 @@ export default class extends Controller {
_url = null;
_data = null;
/**
* @type {BSTreeView}
* @private
*/
_tree = null;
connect() {
@ -31,9 +33,9 @@ export default class extends Controller {
//Fetch data and initialize tree
this._getData()
.then(this._fillTree.bind(this))
/*.catch((err) => {
.catch((err) => {
console.error("Could not load the tree data: " + err);
});*/
});
}
setData(data) {
@ -47,23 +49,22 @@ export default class extends Controller {
}
_fillTree(data) {
//Get primary color from css variable
const primary_color = getComputedStyle(document.documentElement).getPropertyValue('--bs-warning');
if(this._tree) {
this._tree.remove();
}
this._tree = new BSTreeView(this.treeTarget, {
levels: 1,
//showTags: true,
data: data,
enableLinks: true,
showIcon: false,
showBorder: true,
searchResultBackColor: primary_color,
searchResultColor: '#000',
onNodeSelected: function (event) {
const data = event.detail.data;
if (data.href) {
const node = event.detail.node;
if (node.href) {
//Simulate a click so we just change the inner frame
let a = document.createElement('a');
a.setAttribute('href', data.href);
a.setAttribute('href', node.href);
a.innerHTML = "";
document.body.appendChild(a);
a.click();
@ -71,16 +72,14 @@ export default class extends Controller {
}
},
//onNodeContextmenu: contextmenu_handler,
expandIcon: "fas fa-plus fa-fw fa-treeview",
collapseIcon: "fas fa-minus fa-fw fa-treeview"
})
/*.on('initialized', function () {
//Collapse all nodes after init
$(this).treeview('collapseAll', {silent: true});
}, [BS5Theme, FAIconTheme]);
this.treeTarget.addEventListener(EVENT_INITIALIZED, (event) => {
const treeView = event.detail.treeView;
treeView.revealNode(treeView.getSelected());
});
//Reveal the selected ones
$(this).treeview('revealNode', [$(this).treeview('getSelected')]);
});*/
}
collapseAll() {
@ -97,7 +96,10 @@ export default class extends Controller {
const tree = this.treeTarget;
this._tree.collapseAll({silent: true});
this._tree.search([data]);
this._tree.search(data);
//Rereveal the selected node again
this._tree.revealNode(this._tree.getSelected());
}
/**