Register memberSearch in app.js

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",

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",

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]);
-}
 </script>

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();

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();
+    },
+});

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];
+    },
+});