sboulahtit/orion
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(loyalty): use search_autocomplete macro for terminal lookup

Browse Source 
Replace custom inline autocomplete HTML with the shared
search_autocomplete macro from inputs.html. Same behavior (debounced
search, dropdown with name + email, loading/no-results states) but
using the established reusable component.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Samir Boulahtit
2026-03-23 21:24:00 +01:00
parent 040cbd1962
commit 5a33f68743
2 changed files with 20 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/modules/loyalty/static/store/js/loyalty-terminal.js
View File

@@ -25,6 +25,7 @@ function storeLoyaltyTerminal() {
selectedCard: null, selectedCard: null,
searchResults: [], searchResults: [],
showSearchDropdown: false, showSearchDropdown: false,
searchingCustomers: false,
_searchTimeout: null, _searchTimeout: null,
// Transaction inputs // Transaction inputs
@@ -161,6 +162,7 @@ function storeLoyaltyTerminal() {
}, },
async searchCustomers() { async searchCustomers() {
this.searchingCustomers = true;
try { try {
const params = new URLSearchParams({ const params = new URLSearchParams({
search: this.searchQuery, search: this.searchQuery,
@@ -176,6 +178,8 @@ function storeLoyaltyTerminal() {
loyaltyTerminalLog.warn('Search failed:', error.message); loyaltyTerminalLog.warn('Search failed:', error.message);
this.searchResults = []; this.searchResults = [];
this.showSearchDropdown = false; this.showSearchDropdown = false;
} finally {
this.searchingCustomers = false;
} }
}, },

58
app/modules/loyalty/templates/loyalty/store/terminal.html
View File

@@ -3,6 +3,7 @@
{% from 'shared/macros/headers.html' import page_header_flex %} {% from 'shared/macros/headers.html' import page_header_flex %}
{% from 'shared/macros/alerts.html' import loading_state, error_state %} {% from 'shared/macros/alerts.html' import loading_state, error_state %}
{% from 'shared/macros/modals.html' import modal_simple %} {% from 'shared/macros/modals.html' import modal_simple %}
{% from 'shared/macros/inputs.html' import search_autocomplete %}
{% block title %}{{ _('loyalty.store.terminal.title') }}{% endblock %} {% block title %}{{ _('loyalty.store.terminal.title') }}{% endblock %}
@@ -64,48 +65,21 @@
</div> </div>
<div class="p-4"> <div class="p-4">
<!-- Search Input with Autocomplete --> <!-- Search Input with Autocomplete -->
<div class="relative mb-4" @click.outside="showSearchDropdown = false"> <div class="mb-4">
<span class="absolute inset-y-0 left-0 flex items-center pl-3 z-10"> {{ search_autocomplete(
<span x-html="$icon('search', 'w-5 h-5 text-gray-400')"></span> search_var='searchQuery',
</span> results_var='searchResults',
<input show_dropdown_var='showSearchDropdown',
type="text" loading_var='searchingCustomers',
x-model="searchQuery" search_action='debouncedSearchCustomers()',
@input="debouncedSearchCustomers()" select_action='selectCustomer(item)',
@keyup.enter="showSearchDropdown = false; lookupCustomer()" display_field='customer_name',
@focus="searchResults.length > 0 && (showSearchDropdown = true)" secondary_field='customer_email',
autocomplete="off" placeholder=_('loyalty.store.terminal.search_placeholder'),
placeholder="{{ _('loyalty.store.terminal.search_placeholder') }}" min_chars=2,
class="w-full pl-10 pr-4 py-3 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300" no_results_text=_('loyalty.store.terminal.customer_not_found'),
> loading_text=_('loyalty.store.terminal.looking_up')
<!-- Autocomplete Dropdown --> ) }}
<div x-show="showSearchDropdown" x-cloak
class="absolute z-50 w-full mt-1 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg shadow-lg max-h-64 overflow-y-auto">
<template x-for="card in searchResults" :key="card.id">
<button type="button"
@click="selectCustomer(card)"
class="w-full px-4 py-3 text-left hover:bg-purple-50 dark:hover:bg-gray-600 border-b border-gray-100 dark:border-gray-600 last:border-0 transition-colors">
<div class="flex items-center justify-between">
<div class="flex items-center min-w-0">
<div class="w-8 h-8 mr-3 rounded-full flex items-center justify-center flex-shrink-0"
:style="'background-color: ' + (program?.card_color || '#4F46E5') + '20'">
<span class="text-xs font-semibold"
:style="'color: ' + (program?.card_color || '#4F46E5')"
x-text="(card.customer_name || '?').charAt(0).toUpperCase()"></span>
</div>
<div class="min-w-0">
<p class="text-sm font-medium text-gray-800 dark:text-gray-200 truncate" x-text="card.customer_name || 'Unknown'"></p>
<p class="text-xs text-gray-500 dark:text-gray-400 truncate" x-text="card.customer_email || ''"></p>
</div>
</div>
<div class="text-right flex-shrink-0 ml-3">
<p class="text-xs font-mono text-gray-500 dark:text-gray-400" x-text="card.card_number"></p>
<p class="text-xs font-semibold text-purple-600 dark:text-purple-400" x-text="(card.points_balance || 0) + ' pts'"></p>
</div>
</div>
</button>
</template>
</div>
</div> </div>
<button <button
@click="lookupCustomer()" @click="lookupCustomer()"