From 6b217b629ff3c948747d0aece7dc864e514a5bee Mon Sep 17 00:00:00 2001 From: philipp lang Date: Thu, 26 Dec 2024 21:23:12 +0100 Subject: [PATCH] Register memberSearch in app.js --- package-lock.json | 7 +++ package.json | 1 + resources/js/views/contribution/VIndex.vue | 18 ------- resources/livewire-js/app.js | 5 ++ resources/livewire-js/memberSearch.js | 35 +++++++++++++ resources/livewire-js/searchHelper.js | 58 ++++++++++++++++++++++ 6 files changed, 106 insertions(+), 18 deletions(-) create mode 100644 resources/livewire-js/memberSearch.js create mode 100644 resources/livewire-js/searchHelper.js diff --git a/package-lock.json b/package-lock.json index b501ac0e..b40eba2b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -39,6 +39,7 @@ }, "devDependencies": { "accounting": "^0.4.1", + "alpinejs-axios": "^1.0.8", "autoprefixer": "^10.4.17", "axios": "^1.6.6", "dayjs": "^1.11.10", @@ -1156,6 +1157,12 @@ "url": "https://github.com/sponsors/epoberezkin" } }, + "node_modules/alpinejs-axios": { + "version": "1.0.8", + "resolved": "https://registry.npmjs.org/alpinejs-axios/-/alpinejs-axios-1.0.8.tgz", + "integrity": "sha512-6B6oxLiXvEsNUnhXT8/H8q/CPF4CThYp3s9Pw/rI/lCpiBPSBNLBuL0hgLn6VeuhLIUKL9DN3IYYWWsKWXzpKg==", + "dev": true + }, "node_modules/ansi-regex": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", diff --git a/package.json b/package.json index b0e0baaf..50dbe8c1 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ }, "devDependencies": { "accounting": "^0.4.1", + "alpinejs-axios": "^1.0.8", "autoprefixer": "^10.4.17", "axios": "^1.6.6", "dayjs": "^1.11.10", diff --git a/resources/js/views/contribution/VIndex.vue b/resources/js/views/contribution/VIndex.vue index b5cde55c..5bb865b1 100644 --- a/resources/js/views/contribution/VIndex.vue +++ b/resources/js/views/contribution/VIndex.vue @@ -62,22 +62,4 @@ async function submit(compiler) { var payload = btoa(encodeURIComponent(JSON.stringify(values.value))); window.open(`/contribution-generate?payload=${payload}`); } -function onSubmitMemberResult(selected) { - if (values.value.members.find((m) => m === selected.id) !== undefined) { - values.value.members = values.value.members.filter((m) => m !== selected.id); - } else { - values.value.members.push(selected.id); - } - - clearSearch(); - searchInput.value.$el.querySelector('input').focus(); -} -function onSubmitFirstMemberResult() { - if (results.value.hits.length === 0) { - clearSearch(); - return; - } - - onSubmitMemberResult(results.value.hits[0]); -} diff --git a/resources/livewire-js/app.js b/resources/livewire-js/app.js index f48b0dd1..0254e4b5 100644 --- a/resources/livewire-js/app.js +++ b/resources/livewire-js/app.js @@ -1,12 +1,16 @@ import {Livewire, Alpine} from '../../vendor/livewire/livewire/dist/livewire.esm'; import Tooltip from '@ryangjchandler/alpine-tooltip'; +import axios from 'axios'; import '../css/app.css'; import 'tippy.js/dist/tippy.css'; import 'tippy.js/animations/shift-toward.css'; import '../css/tooltip.css'; import {error, success} from './toastify.js'; import editor from './editor.js'; +import memberSearch from './memberSearch.js'; + +window.axios = axios; Alpine.plugin( Tooltip.defaultProps({ @@ -19,6 +23,7 @@ window.addEventListener('success', (event) => success(event.detail[0])); document.addEventListener('alpine:init', () => { Alpine.data('editor', editor); + Alpine.data('memberSearch', memberSearch); }); Livewire.start(); diff --git a/resources/livewire-js/memberSearch.js b/resources/livewire-js/memberSearch.js new file mode 100644 index 00000000..2879f366 --- /dev/null +++ b/resources/livewire-js/memberSearch.js @@ -0,0 +1,35 @@ +import searchHelper from './searchHelper.js'; + +export default () => ({ + members: [], + + searchHelper: searchHelper([], {}), + + onSubmitFirstMemberResult() { + if (this.searchHelper.hasNoHits()) { + this.searchHelper.clear(); + return; + } + + this.onSubmitMemberResult(this.searchHelper.firstHit().id.toString()); + }, + + onSubmitMemberResult(id) { + if (this.members.find((m) => m === id) !== undefined) { + this.members = this.members.filter((m) => m !== id); + } else { + this.members.push(id); + } + + this.searchHelper.clear(); + this.$root.querySelector('input').focus(); + }, + + set searchString(v) { + this.searchHelper.setInput(v); + }, + + get searchString() { + return this.searchHelper.getInput(); + }, +}); diff --git a/resources/livewire-js/searchHelper.js b/resources/livewire-js/searchHelper.js new file mode 100644 index 00000000..86dc3768 --- /dev/null +++ b/resources/livewire-js/searchHelper.js @@ -0,0 +1,58 @@ +export default (params = [], options = {}) => ({ + params: params, + options: options, + results: { + hits: [], + }, + realSearchString: '', + + async search(text, filters = [], options = {}) { + var response = await axios.post( + import.meta.env.MODE === 'development' ? 'http://localhost:7700/indexes/members/search' : '/indexes/members/search', + { + q: text, + filter: filters, + sort: ['lastname:asc', 'firstname:asc'], + ...options, + }, + {headers: {Authorization: 'Bearer ' + document.querySelector('meta[name="meilisearch_key"]').content}} + ); + + return response.data; + }, + + async setInput(v) { + this.realSearchString = v; + + if (!v.length) { + this.results = {hits: []}; + return; + } + + this.results = await this.search(v, this.params, this.options); + }, + + getInput() { + return this.realSearchString; + }, + + clear() { + this.setInput(''); + }, + + getHits() { + return this.results.hits; + }, + + hasHits() { + return this.results.hits.length > 0; + }, + + hasNoHits() { + return !this.hasHits(); + }, + + firstHit() { + return this.results.hits[0]; + }, +});