added general search modal to generalize app
This commit is contained in:
Luca Haid
@@ -11,6 +11,7 @@
|
||||
import { shippingNoteApi } from '/mobile/modules/lager/shippingnote/ShippingNoteModule.js';
|
||||
import DatePicker from '/mobile/modules/lager/shippingnote/DatePicker.js';
|
||||
import EmployeeSelector from '/mobile/modules/lager/shippingnote/EmployeeSelector.js';
|
||||
import SearchSelectModal from '/mobile/modules/lager/shippingnote/SearchSelectModal.js';
|
||||
|
||||
export default {
|
||||
name: 'ShippingNoteForm',
|
||||
@@ -20,7 +21,8 @@ export default {
|
||||
},
|
||||
components: {
|
||||
DatePicker,
|
||||
EmployeeSelector
|
||||
EmployeeSelector,
|
||||
SearchSelectModal
|
||||
},
|
||||
|
||||
setup(props, { emit }) {
|
||||
@@ -455,8 +457,8 @@ export default {
|
||||
|
||||
const selectCar = (car) => {
|
||||
if (hoursEntries.value[carSelectEntryIndex.value]) {
|
||||
hoursEntries.value[carSelectEntryIndex.value].carId = car.id;
|
||||
hoursEntries.value[carSelectEntryIndex.value].carName = car.name;
|
||||
hoursEntries.value[carSelectEntryIndex.value].carId = car?.id || null;
|
||||
hoursEntries.value[carSelectEntryIndex.value].carName = car?.name || '';
|
||||
}
|
||||
showCarSelect.value = false;
|
||||
navigator.vibrate?.([30]);
|
||||
@@ -951,114 +953,123 @@ export default {
|
||||
/>
|
||||
|
||||
<!-- Customer Search Modal -->
|
||||
<teleport to="body">
|
||||
<transition name="slide-up">
|
||||
<div v-if="showCustomerSearch" class="fixed inset-0 z-50 flex flex-col bg-white dark:bg-slate-900">
|
||||
<div class="flex items-center px-4 py-3 border-b border-slate-200 dark:border-slate-700">
|
||||
<button @click="showCustomerSearch = false" class="p-2 -ml-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-slate-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
<h2 class="ml-2 text-lg font-semibold text-slate-800 dark:text-white">Kunde suchen</h2>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<input type="text" v-model="customerSearchQuery" autofocus class="w-full px-4 py-3 bg-slate-100 dark:bg-slate-800 rounded-xl text-base" placeholder="Name, Firma, Kundennummer..." />
|
||||
</div>
|
||||
<div class="flex-1 overflow-y-auto px-4">
|
||||
<div v-if="customerSearchLoading" class="text-center py-8 text-slate-500">Suche...</div>
|
||||
<div v-else-if="customerSearchResults.length === 0 && customerSearchQuery.length >= 1" class="text-center py-8 text-slate-500">Keine Kunden gefunden</div>
|
||||
<div v-else class="space-y-2">
|
||||
<button v-for="customer in customerSearchResults" :key="customer.id" @click="selectCustomer(customer)" class="w-full text-left p-3 bg-slate-50 dark:bg-slate-800 rounded-xl active:bg-slate-100 dark:active:bg-slate-700">
|
||||
<div class="font-medium text-slate-800 dark:text-white">{{ customer.displayName }}</div>
|
||||
<div v-if="customer.company && customer.company !== customer.displayName" class="text-sm text-primary">{{ customer.company }}</div>
|
||||
<div class="text-sm text-slate-500 dark:text-slate-400">{{ customer.street }}, {{ customer.zip }} {{ customer.city }}</div>
|
||||
<div v-if="customer.customerNumber" class="text-xs text-slate-400 dark:text-slate-500 mt-1">KNr: {{ customer.customerNumber }}</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<SearchSelectModal
|
||||
:show="showCustomerSearch"
|
||||
title="Kunde suchen"
|
||||
:searchable="true"
|
||||
search-placeholder="Name, Firma, Kundennummer..."
|
||||
v-model="customerSearchQuery"
|
||||
:items="customerSearchResults"
|
||||
:loading="customerSearchLoading"
|
||||
empty-text="Keine Kunden gefunden"
|
||||
empty-icon="users"
|
||||
@select="selectCustomer"
|
||||
@close="showCustomerSearch = false"
|
||||
>
|
||||
<template #item="{ item: customer }">
|
||||
<div class="w-10 h-10 bg-primary/10 rounded-full flex items-center justify-center flex-shrink-0">
|
||||
<span class="text-primary font-semibold text-sm">
|
||||
{{ (customer.displayName || customer.company || '?').charAt(0).toUpperCase() }}
|
||||
</span>
|
||||
</div>
|
||||
</transition>
|
||||
</teleport>
|
||||
<div class="ml-3 flex-1 min-w-0">
|
||||
<p class="font-medium text-slate-800 dark:text-white truncate">{{ customer.displayName }}</p>
|
||||
<p v-if="customer.company && customer.company !== customer.displayName" class="text-sm text-primary truncate">{{ customer.company }}</p>
|
||||
<p class="text-sm text-slate-500 dark:text-slate-400 truncate">{{ customer.street }}, {{ customer.zip }} {{ customer.city }}</p>
|
||||
<p v-if="customer.customerNumber" class="text-xs text-slate-400 dark:text-slate-500">KNr: {{ customer.customerNumber }}</p>
|
||||
</div>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-slate-400 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
</template>
|
||||
</SearchSelectModal>
|
||||
|
||||
<!-- Article Search Modal -->
|
||||
<teleport to="body">
|
||||
<transition name="slide-up">
|
||||
<div v-if="showArticleSearch" class="fixed inset-0 z-50 flex flex-col bg-white dark:bg-slate-900">
|
||||
<div class="flex items-center px-4 py-3 border-b border-slate-200 dark:border-slate-700">
|
||||
<button @click="showArticleSearch = false" class="p-2 -ml-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-slate-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
<h2 class="ml-2 text-lg font-semibold text-slate-800 dark:text-white">Artikel suchen</h2>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<input type="text" v-model="articleSearchQuery" autofocus class="w-full px-4 py-3 bg-slate-100 dark:bg-slate-800 rounded-xl text-base" placeholder="Artikelnummer oder Name..." />
|
||||
</div>
|
||||
<div class="flex-1 overflow-y-auto px-4">
|
||||
<div v-if="articleSearchLoading" class="text-center py-8 text-slate-500">Suche...</div>
|
||||
<div v-else-if="articleSearchResults.length === 0 && articleSearchQuery.length >= 1" class="text-center py-8 text-slate-500">Keine Artikel gefunden</div>
|
||||
<div v-else class="space-y-2">
|
||||
<button v-for="article in articleSearchResults" :key="article.id" @click="addArticle(article)" class="w-full text-left p-3 bg-slate-50 dark:bg-slate-800 rounded-xl active:bg-slate-100 dark:active:bg-slate-700">
|
||||
<div class="font-medium text-slate-800 dark:text-white">{{ article.title }}</div>
|
||||
<div class="text-sm text-slate-500 dark:text-slate-400">{{ article.articleNumber }}</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<SearchSelectModal
|
||||
:show="showArticleSearch"
|
||||
title="Artikel suchen"
|
||||
:searchable="true"
|
||||
search-placeholder="Artikelnummer oder Name..."
|
||||
v-model="articleSearchQuery"
|
||||
:items="articleSearchResults"
|
||||
:loading="articleSearchLoading"
|
||||
empty-text="Keine Artikel gefunden"
|
||||
empty-icon="box"
|
||||
@select="addArticle"
|
||||
@close="showArticleSearch = false"
|
||||
>
|
||||
<template #item="{ item: article }">
|
||||
<div class="w-10 h-10 bg-amber-500/10 rounded-full flex items-center justify-center flex-shrink-0">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-amber-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
|
||||
</svg>
|
||||
</div>
|
||||
</transition>
|
||||
</teleport>
|
||||
<div class="ml-3 flex-1 min-w-0">
|
||||
<p class="font-medium text-slate-800 dark:text-white truncate">{{ article.title }}</p>
|
||||
<p class="text-sm text-slate-500 dark:text-slate-400">{{ article.articleNumber }}</p>
|
||||
</div>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
|
||||
</svg>
|
||||
</template>
|
||||
</SearchSelectModal>
|
||||
|
||||
<!-- Car Select Modal -->
|
||||
<teleport to="body">
|
||||
<transition name="slide-up">
|
||||
<div v-if="showCarSelect" class="fixed inset-0 z-50 flex flex-col bg-white dark:bg-slate-900">
|
||||
<div class="flex items-center px-4 py-3 border-b border-slate-200 dark:border-slate-700">
|
||||
<button @click="showCarSelect = false" class="p-2 -ml-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-slate-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
<h2 class="ml-2 text-lg font-semibold text-slate-800 dark:text-white">Fahrzeug wählen</h2>
|
||||
</div>
|
||||
<div class="flex-1 overflow-y-auto p-4 space-y-2">
|
||||
<button v-for="car in allCars" :key="car.id" @click="selectCar(car)"
|
||||
:class="['w-full text-left p-3 rounded-xl', hoursEntries[carSelectEntryIndex]?.carId === car.id ? 'bg-primary/10 border-2 border-primary' : 'bg-slate-50 dark:bg-slate-800']"
|
||||
>
|
||||
<div class="font-medium text-slate-800 dark:text-white">{{ car.name }}</div>
|
||||
<div v-if="car.plate" class="text-sm text-slate-500 dark:text-slate-400">{{ car.plate }}</div>
|
||||
</button>
|
||||
<button @click="selectCar({id: null, name: ''})" class="w-full text-left p-3 bg-slate-50 dark:bg-slate-800 rounded-xl text-slate-500">
|
||||
Kein Fahrzeug
|
||||
</button>
|
||||
</div>
|
||||
<SearchSelectModal
|
||||
:show="showCarSelect"
|
||||
title="Fahrzeug wählen"
|
||||
:searchable="false"
|
||||
:items="allCars"
|
||||
empty-text="Keine Fahrzeuge verfügbar"
|
||||
empty-icon="list"
|
||||
:selected-id="hoursEntries[carSelectEntryIndex]?.carId"
|
||||
:show-none-option="true"
|
||||
none-option-text="Kein Fahrzeug"
|
||||
@select="selectCar"
|
||||
@close="showCarSelect = false"
|
||||
>
|
||||
<template #item="{ item: car, selected }">
|
||||
<div class="w-10 h-10 bg-blue-500/10 rounded-full flex items-center justify-center flex-shrink-0">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h8m-8 4h8m-6 4h4M3 21h18M3 17V7c0-1.1.9-2 2-2h14a2 2 0 012 2v10" />
|
||||
</svg>
|
||||
</div>
|
||||
</transition>
|
||||
</teleport>
|
||||
<div class="ml-3 flex-1 min-w-0">
|
||||
<p class="font-medium text-slate-800 dark:text-white truncate">{{ car.name }}</p>
|
||||
<p v-if="car.plate" class="text-sm text-slate-500 dark:text-slate-400">{{ car.plate }}</p>
|
||||
</div>
|
||||
<svg v-if="selected" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-primary flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
</template>
|
||||
</SearchSelectModal>
|
||||
|
||||
<!-- Hour Type Select Modal -->
|
||||
<teleport to="body">
|
||||
<transition name="slide-up">
|
||||
<div v-if="showHourTypeSelect" class="fixed inset-0 z-50 flex flex-col bg-white dark:bg-slate-900">
|
||||
<div class="flex items-center px-4 py-3 border-b border-slate-200 dark:border-slate-700">
|
||||
<button @click="showHourTypeSelect = false" class="p-2 -ml-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-slate-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
<h2 class="ml-2 text-lg font-semibold text-slate-800 dark:text-white">Stundenart wählen</h2>
|
||||
</div>
|
||||
<div class="flex-1 overflow-y-auto p-4 space-y-2">
|
||||
<button v-for="ht in hourTypes" :key="ht.id" @click="selectHourType(ht)"
|
||||
:class="['w-full text-left p-4 rounded-xl', hoursEntries[hourTypeSelectEntryIndex]?.hourType === ht.id ? 'bg-primary/10 border-2 border-primary' : 'bg-slate-50 dark:bg-slate-800']"
|
||||
>
|
||||
<div class="font-medium text-slate-800 dark:text-white">{{ ht.name }}</div>
|
||||
</button>
|
||||
</div>
|
||||
<SearchSelectModal
|
||||
:show="showHourTypeSelect"
|
||||
title="Stundenart wählen"
|
||||
:searchable="false"
|
||||
:items="hourTypes"
|
||||
empty-text="Keine Stundenarten verfügbar"
|
||||
empty-icon="list"
|
||||
:selected-id="hoursEntries[hourTypeSelectEntryIndex]?.hourType"
|
||||
@select="selectHourType"
|
||||
@close="showHourTypeSelect = false"
|
||||
>
|
||||
<template #item="{ item: ht, selected }">
|
||||
<div class="w-10 h-10 bg-green-500/10 rounded-full flex items-center justify-center flex-shrink-0">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
</transition>
|
||||
</teleport>
|
||||
<div class="ml-3 flex-1 min-w-0">
|
||||
<p class="font-medium text-slate-800 dark:text-white truncate">{{ ht.name }}</p>
|
||||
</div>
|
||||
<svg v-if="selected" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-primary flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
</template>
|
||||
</SearchSelectModal>
|
||||
</div>
|
||||
`
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user