diff --git a/public/static/css/rvr.css b/public/static/css/rvr.css index 89982ea..b98f310 100644 --- a/public/static/css/rvr.css +++ b/public/static/css/rvr.css @@ -528,10 +528,6 @@ p.paginateContainer > *:not(:last-child) { border-right: solid #869ab9 1px; } -.choices__inner { - box-sizing: border-box; -} - @media screen and (max-width: 424px) { div.gridContainer { grid-template-columns: auto; diff --git a/public/static/js/communities/community_members.js b/public/static/js/communities/community_members.js index 35506a9..fe9e478 100644 --- a/public/static/js/communities/community_members.js +++ b/public/static/js/communities/community_members.js @@ -1,17 +1,31 @@ (function () { const element = document.getElementById('newMember').elements['user_id']; - const choices = new Choices(element, { - noResultsText: 'No users found', - noChoicesText: 'Start typing to search users' + const select = new TomSelect(element, { + placeholder: 'User', + valueField: 'value', + labelField: 'label', + searchField: 'label', + loadThrottle: 300, + load: function (query, callback) { + var self = this; + RVR.httpRequest('GET', searchUserUrl.replace('QUERY', encodeURIComponent(query)), function () { + self.clearOptions(); + callback(this.response.results); + }); + }, }); - element.addEventListener('search', RVR.debounce(async function (e) { - RVR.httpRequest('GET', searchUserUrl.replace('QUERY', encodeURIComponent(e.detail.value)), function () { - choices.setChoices(this.response.results, 'value', 'label', true); - }); - })); + select.on('change', function (value) { + this.clearOptions(); + }); - element.addEventListener('choice', function () { - choices.setChoices([], 'value', 'label', true); + select.on('blur', function (value) { + this.clearOptions(); + }); + + select.on('type', function (value) { + if (value === '') { + this.clearOptions(); + } }); })(); diff --git a/public/static/js/rvr.js b/public/static/js/rvr.js index b0da778..b895c0e 100644 --- a/public/static/js/rvr.js +++ b/public/static/js/rvr.js @@ -196,7 +196,7 @@ var RVR = { } } - form.elements.submit.disabled = !anyChanged; + form.elements['submit_button'].disabled = !anyChanged; }, observeInputsInForm: function (form, observedInputs) { @@ -219,7 +219,7 @@ var RVR = { } form.onreset = function () { - form.elements.submit.disabled = true; + form.elements['submit_button'].disabled = true; } }, diff --git a/public/static/package-lock.json b/public/static/package-lock.json index f1ac542..2612c22 100644 --- a/public/static/package-lock.json +++ b/public/static/package-lock.json @@ -2,33 +2,18 @@ "requires": true, "lockfileVersion": 1, "dependencies": { - "@babel/runtime": { - "version": "7.21.0", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.21.0.tgz", - "integrity": "sha512-xwII0//EObnq89Ji5AKYQaRYiW/nZ3llSv29d49IuxPhKbtJoLP+9QUUZ4nVragQVtaVGeZrpB+ZtG/Pdy/POw==", + "@orchidjs/sifter": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@orchidjs/sifter/-/sifter-1.0.3.tgz", + "integrity": "sha512-zCZbwKegHytfsPm8Amcfh7v/4vHqTAaOu6xFswBYcn8nznBOuseu6COB2ON7ez0tFV0mKL0nRNnCiZZA+lU9/g==", "requires": { - "regenerator-runtime": "^0.13.11" + "@orchidjs/unicode-variants": "^1.0.4" } }, - "choices.js": { - "version": "10.2.0", - "resolved": "https://registry.npmjs.org/choices.js/-/choices.js-10.2.0.tgz", - "integrity": "sha512-8PKy6wq7BMjNwDTZwr3+Zry6G2+opJaAJDDA/j3yxvqSCnvkKe7ZIFfIyOhoc7htIWFhsfzF9tJpGUATcpUtPg==", - "requires": { - "deepmerge": "^4.2.2", - "fuse.js": "^6.6.2", - "redux": "^4.2.0" - } - }, - "deepmerge": { - "version": "4.3.1", - "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz", - "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==" - }, - "fuse.js": { - "version": "6.6.2", - "resolved": "https://registry.npmjs.org/fuse.js/-/fuse.js-6.6.2.tgz", - "integrity": "sha512-cJaJkxCCxC8qIIcPBF9yGxY0W/tVZS3uEISDxhYIdtk8OL93pe+6Zj7LjCqVV4dzbqcriOZ+kQ/NE4RXZHsIGA==" + "@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==" }, "leaflet": { "version": "1.9.3", @@ -40,18 +25,14 @@ "resolved": "https://registry.npmjs.org/leaflet.markercluster/-/leaflet.markercluster-1.5.3.tgz", "integrity": "sha512-vPTw/Bndq7eQHjLBVlWpnGeLa3t+3zGiuM7fJwCkiMFq+nmRuG3RI3f7f4N4TDX7T4NpbAXpR2+NTRSEGfCSeA==" }, - "redux": { - "version": "4.2.1", - "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz", - "integrity": "sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==", + "tom-select": { + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/tom-select/-/tom-select-2.2.2.tgz", + "integrity": "sha512-igGah1yY6yhrnN2h/Ky8I5muw/nE/YQxIsEZoYu5qaA4bsRibvKto3s8QZZosKpOd0uO8fNYhRfAwgHB4IAYew==", "requires": { - "@babel/runtime": "^7.9.2" + "@orchidjs/sifter": "^1.0.3", + "@orchidjs/unicode-variants": "^1.0.4" } - }, - "regenerator-runtime": { - "version": "0.13.11", - "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz", - "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==" } } } diff --git a/public/static/package.json b/public/static/package.json index 135f4d6..d2b0d01 100644 --- a/public/static/package.json +++ b/public/static/package.json @@ -2,6 +2,6 @@ "dependencies": { "leaflet": "^1.6.0", "leaflet.markercluster": "^1.4.1", - "choices.js": "^10.2.0" + "tom-select": "^2.2.2" } } diff --git a/views/communities/community_members.php b/views/communities/community_members.php index 214a72b..139e015 100644 --- a/views/communities/community_members.php +++ b/views/communities/community_members.php @@ -1,5 +1,5 @@ -@css(node_modules/choices.js/public/assets/styles/choices.min.css) -@js(node_modules/choices.js/public/assets/scripts/choices.js) +@css(/static/node_modules/tom-select/dist/css/tom-select.min.css) +@js(/static/node_modules/tom-select/dist/js/tom-select.base.min.js) @js(js/communities/community_members.js) @extends(templates/layout_normal)