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

Added a stimulus controller for tagsinput.

Browse source
This commit is contained in:
Jan Böhmer 2022-03-06 23:45:45 +01:00
parent f276c436ae
commit f21c339046
3 changed files with 33 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

32
assets/controllers/elements/tagsinput_controller.js Normal file
View file

@ -0,0 +1,32 @@
import {Controller} from "@hotwired/stimulus";
import Bloodhound from "corejs-typeahead/dist/bloodhound";
import 'corejs-typeahead';
import '../../js/lib/tagsinput';
import '../../css/tagsinput.css'
export default class extends Controller {
connect() {
if(this.element.dataset.autocomplete) {
const engine = new Bloodhound({
//@ts-ignore
datumTokenizer: Bloodhound.tokenizers.obj.whitespace(''),
//@ts-ignore
queryTokenizer: Bloodhound.tokenizers.obj.whitespace(''),
remote: {
url: this.element.dataset.autocomplete,
wildcard: 'QUERY'
}
});
$(this.element).tagsinput({
typeaheadjs: {
name: 'tags',
source: engine.ttAdapter()
}
});
} else { // Init tagsinput without typeahead
$(this.element).tagsinput();
}
}
}

42
assets/js/register_events.js
View file

@ -8,10 +8,6 @@ import "bootstrap-fileinput/css/fileinput.css"
import "./lib/jquery.tristate"
import "bootstrap-fileinput";
import 'corejs-typeahead';
const Bloodhound = require('corejs-typeahead/dist/bloodhound.js');
import './lib/tagsinput';
const RegisterEventHelper = class {
@ -25,8 +21,6 @@ const RegisterEventHelper = class {
this.registerSpecialCharInput();
this.registerHoverPics();
this.registerAutocompleteTagsinput();
}
registerLoadHandler(fn) {
@ -96,42 +90,6 @@ const RegisterEventHelper = class {
});
})
}
registerAutocompleteTagsinput() {
this.registerLoadHandler(() => {
$('input.tagsinput').each(function() {
//Use typeahead if an autocomplete url was specified.
if($(this).data('autocomplete')) {
//@ts-ignore
var engine = new Bloodhound({
//@ts-ignore
datumTokenizer: Bloodhound.tokenizers.obj.whitespace(''),
//@ts-ignore
queryTokenizer: Bloodhound.tokenizers.obj.whitespace(''),
remote: {
url: $(this).data('autocomplete'),
wildcard: 'QUERY'
}
});
//@ts-ignore
$(this).tagsinput({
typeaheadjs: {
name: 'tags',
source: engine.ttAdapter()
}
});
} else { //Init tagsinput without typeahead
//@ts-ignore
$(this).tagsinput();
}
})
});
}
registerSpecialCharInput() {
this.registerLoadHandler(() => {

1
src/Form/Part/PartBaseType.php
View file

@ -147,6 +147,7 @@ class PartBaseType extends AbstractType
'empty_data' => '',
'attr' => [
'class' => 'tagsinput',
'data-controller' => 'elements--tagsinput',
'data-autocomplete' => $this->urlGenerator->generate('typeahead_tags', ['query' => 'QUERY']),
],
'disabled' => !$this->security->isGranted('tags.edit', $part),