forked from mirror/Part-DB.Part-DB-server
88 lines
2.9 KiB
JavaScript
88 lines
2.9 KiB
JavaScript
|
/*
|
||
|
|
* This file is part of Part-DB (https://github.com/Part-DB/Part-DB-symfony).
|
||
|
|
*
|
||
|
|
* Copyright (C) 2019 - 2023 Jan Böhmer (https://github.com/jbtronics)
|
||
|
|
*
|
||
|
|
* This program is free software: you can redistribute it and/or modify
|
||
|
|
* it under the terms of the GNU Affero General Public License as published
|
||
|
|
* by the Free Software Foundation, either version 3 of the License, or
|
||
|
|
* (at your option) any later version.
|
||
|
|
*
|
||
|
|
* This program is distributed in the hope that it will be useful,
|
||
|
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||
|
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||
|
|
* GNU Affero General Public License for more details.
|
||
|
|
*
|
||
|
|
* You should have received a copy of the GNU Affero General Public License
|
||
|
|
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||
|
|
*/
|
||
|
|
|
||
|
|
import "tom-select/dist/css/tom-select.bootstrap5.css";
|
||
|
|
import '../../css/components/tom-select_extensions.css';
|
||
|
|
import TomSelect from "tom-select";
|
||
|
|
import {Controller} from "@hotwired/stimulus";
|
||
|
|
|
||
|
|
|
||
|
|
export default class extends Controller {
|
||
|
|
_tomSelect;
|
||
|
|
|
||
|
|
connect() {
|
||
|
|
|
||
|
|
let settings = {
|
||
|
|
allowEmptyOption: true,
|
||
|
|
selectOnTab: true,
|
||
|
|
|
||
|
|
searchField: [
|
||
|
|
{field: "text", weight : 2},
|
||
|
|
{field: "parent", weight : 0.5},
|
||
|
|
],
|
||
|
|
|
||
|
|
render: {
|
||
|
|
item: this.renderItem,
|
||
|
|
option: this.renderOption,
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
this._tomSelect = new TomSelect(this.element, settings);
|
||
|
|
}
|
||
|
|
|
||
|
|
renderItem(data, escape) {
|
||
|
|
let name = "";
|
||
|
|
if (data.parent) {
|
||
|
|
name += escape(data.parent) + " → ";
|
||
|
|
}
|
||
|
|
name += "<b>" + escape(data.text) + "</b>";
|
||
|
|
|
||
|
|
return '<div>' + (data.image ? "<img style='max-height: 1.5rem; max-width: 2rem; margin-right: 5px;' ' src='" + data.image + "'/>" : "") + name + '</div>';
|
||
|
|
}
|
||
|
|
|
||
|
|
renderOption(data, escape) {
|
||
|
|
//Render empty option as full row
|
||
|
|
if (data.value === "") {
|
||
|
|
return '<div> </div>';
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
//Indent the option according to the level
|
||
|
|
const level_html = ' '.repeat(data.level);
|
||
|
|
|
||
|
|
let filter_badge = "";
|
||
|
|
if (data.filetype_filter) {
|
||
|
|
filter_badge = '<span class="badge bg-warning float-end"><i class="fa-solid fa-file-circle-exclamation"></i> ' + escape(data.filetype_filter) + '</span>';
|
||
|
|
}
|
||
|
|
|
||
|
|
let parent_badge = "";
|
||
|
|
if (data.parent) {
|
||
|
|
parent_badge = '<span class="ms-3 badge rounded-pill bg-secondary float-end picker-us"><i class="fa-solid fa-folder-tree"></i> ' + escape(data.parent) + '</span>';
|
||
|
|
}
|
||
|
|
|
||
|
|
let image = "";
|
||
|
|
if (data.image) {
|
||
|
|
image = '<img style="max-height: 1.5rem; max-width: 2rem; margin-left: 5px;" src="' + data.image + '"/>';
|
||
|
|
}
|
||
|
|
|
||
|
|
return '<div>' + level_html + escape(data.text) + image + parent_badge + filter_badge + '</div>';
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|