Experimenting

netbox/extras/urls.py

@@ -136,4 +136,7 @@ urlpatterns = [
 
     # Markdown
     path('render/markdown/', views.RenderMarkdownView.as_view(), name="render_markdown"),
+
+    # Testing
+    path('tom-select/', views.TomSelectView.as_view(), name="tom_select"),
 ]

netbox/extras/views.py

@@ -30,6 +30,13 @@ from .reports import run_report
 from .scripts import run_script
 
 
+class TomSelectView(View):
+
+    def get(self, request):
+        return render(request, 'extras/tom_select.html', {
+        })
+
+
 #
 # Custom fields
 #

netbox/project-static/package-lock.json

@@ -25,6 +25,7 @@
         "query-string": "^7.1.1",
         "sass": "^1.55.0",
         "slim-select": "^1.27.1",
+        "tom-select": "^2.3.1",
         "typeface-inter": "^3.18.1",
         "typeface-roboto-mono": "^1.1.13"
       },
@@ -225,6 +226,19 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@orchidjs/sifter": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@orchidjs/sifter/-/sifter-1.0.3.tgz",
+      "integrity": "sha512-zCZbwKegHytfsPm8Amcfh7v/4vHqTAaOu6xFswBYcn8nznBOuseu6COB2ON7ez0tFV0mKL0nRNnCiZZA+lU9/g==",
+      "dependencies": {
+        "@orchidjs/unicode-variants": "^1.0.4"
+      }
+    },
+    "node_modules/@orchidjs/unicode-variants": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@orchidjs/unicode-variants/-/unicode-variants-1.0.4.tgz",
+      "integrity": "sha512-NvVBRnZNE+dugiXERFsET1JlKZfM5lJDEpSMilKW4bToYJ7pxf0Zne78xyXB2ny2c2aHfJ6WLnz1AaTNHAmQeQ=="
+    },
     "node_modules/@pkgr/utils": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/@pkgr/utils/-/utils-2.3.1.tgz",
@@ -3888,6 +3902,22 @@
       "integrity": "sha1-bkWxJj8gF/oKzH2J14sVuL932jI=",
       "license": "MIT"
     },
+    "node_modules/tom-select": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/tom-select/-/tom-select-2.3.1.tgz",
+      "integrity": "sha512-QS4vnOcB6StNGqX4sGboGXL2fkhBF2gIBB+8Hwv30FZXYPn0CyYO8kkdATRvwfCTThxiR4WcXwKJZ3cOmtI9eg==",
+      "dependencies": {
+        "@orchidjs/sifter": "^1.0.3",
+        "@orchidjs/unicode-variants": "^1.0.4"
+      },
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/tom-select"
+      }
+    },
     "node_modules/tsconfig-paths": {
       "version": "3.14.1",
       "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.14.1.tgz",

netbox/project-static/package.json

@@ -35,6 +35,7 @@
     "query-string": "^7.1.1",
     "sass": "^1.55.0",
     "slim-select": "^1.27.1",
+    "tom-select": "^2.3.1",
     "typeface-inter": "^3.18.1",
     "typeface-roboto-mono": "^1.1.13"
   },

netbox/project-static/styles/netbox.scss

@@ -1,7 +1,8 @@
 @import 'variables';
 
-// Tabler
+// Tabler & vendors
 @import '../node_modules/@tabler/core/src/scss/_core.scss';
+@import '../node_modules/@tabler/core/src/scss/vendor/tom-select';
 
 // Overrides of external libraries
 @import 'overrides/slim-select';

netbox/project-static/yarn.lock

@@ -80,6 +80,18 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
+"@orchidjs/sifter@^1.0.3":
+  version "1.0.3"
+  resolved "https://registry.npmjs.org/@orchidjs/sifter/-/sifter-1.0.3.tgz"
+  integrity sha512-zCZbwKegHytfsPm8Amcfh7v/4vHqTAaOu6xFswBYcn8nznBOuseu6COB2ON7ez0tFV0mKL0nRNnCiZZA+lU9/g==
+  dependencies:
+    "@orchidjs/unicode-variants" "^1.0.4"
+
+"@orchidjs/unicode-variants@^1.0.4":
+  version "1.0.4"
+  resolved "https://registry.npmjs.org/@orchidjs/unicode-variants/-/unicode-variants-1.0.4.tgz"
+  integrity sha512-NvVBRnZNE+dugiXERFsET1JlKZfM5lJDEpSMilKW4bToYJ7pxf0Zne78xyXB2ny2c2aHfJ6WLnz1AaTNHAmQeQ==
+
 "@pkgr/utils@^2.3.1":
   version "2.3.1"
   resolved "https://registry.npmjs.org/@pkgr/utils/-/utils-2.3.1.tgz"
@@ -2004,6 +2016,14 @@ toggle-selection@^1.0.6:
   resolved "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz"
   integrity sha1-bkWxJj8gF/oKzH2J14sVuL932jI=
 
+tom-select@^2.2.2, tom-select@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.npmjs.org/tom-select/-/tom-select-2.3.1.tgz"
+  integrity sha512-QS4vnOcB6StNGqX4sGboGXL2fkhBF2gIBB+8Hwv30FZXYPn0CyYO8kkdATRvwfCTThxiR4WcXwKJZ3cOmtI9eg==
+  dependencies:
+    "@orchidjs/sifter" "^1.0.3"
+    "@orchidjs/unicode-variants" "^1.0.4"
+
 tsconfig-paths@^3.14.1:
   version "3.14.1"
   resolved "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.14.1.tgz"

netbox/templates/extras/tom_select.html

@@ -0,0 +1,59 @@
+{% extends 'base/layout.html' %}
+
+{% block content %}
+  <h3>Tom select</h3>
+
+  <select type="text" class="form-select" id="select-site" placeholder="Select a site..." autocomplete="off">
+  </select>
+
+
+
+  <script src="https://cdn.jsdelivr.net/npm/tom-select/dist/js/tom-select.complete.min.js"></script>
+  <script>
+
+
+new TomSelect('#select-site',{
+		valueField: 'id',
+		labelField: 'name',
+		searchField: 'name',
+    copyClassesToDropdown: false,
+    dropdownParent: 'body',
+    controlInput: '<input>',
+    preload: 'focus',
+		// fetch remote data
+		load: function(query, callback) {
+
+			var url = '/api/dcim/sites/?q=' + encodeURIComponent(query);
+			fetch(url)
+				.then(response => response.json())
+				.then(json => {
+					callback(json.results);
+				}).catch(()=>{
+					callback();
+				});
+
+		},
+		// custom rendering functions for options and items
+		render: {
+			option: function(item, escape) {
+				return `<div class="py-2 d-flex">
+							<div>
+								<div class="mb-1">
+									<span class="h4">${ escape(item.name) }</span>
+                  <span class="text-muted">${ escape(item.tenant.name) }</span>
+								</div>
+						 		<div class="description">${ escape(item.description) }</div>
+							</div>
+						</div>`;
+			},
+			item: function(item, escape) {
+				return `<div>
+                  ${ escape(item.name) }
+						</div>`;
+			}
+		},
+	});
+
+
+  </script>
+{% endblock content %}