Xinon mobile/improve
This commit is contained in:
Luca Haid
@@ -0,0 +1,189 @@
|
||||
/**
|
||||
* EmployeeSelector Component
|
||||
*
|
||||
* Bottom sheet modal for searching and selecting employees.
|
||||
* Supports lazy word search (e.g., "fab her" matches "Fabian Herbst").
|
||||
*/
|
||||
|
||||
export default {
|
||||
name: 'EmployeeSelector',
|
||||
emits: ['select', 'close'],
|
||||
props: {
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
excludeIds: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
|
||||
setup(props, { emit }) {
|
||||
const { ref, computed, watch } = Vue;
|
||||
|
||||
const searchQuery = ref('');
|
||||
const employees = ref([]);
|
||||
const isLoading = ref(false);
|
||||
const searchTimeout = ref(null);
|
||||
|
||||
// Filter out already selected employees
|
||||
const filteredEmployees = computed(() => {
|
||||
return employees.value.filter(emp => !props.excludeIds.includes(emp.id));
|
||||
});
|
||||
|
||||
// Search employees when query changes
|
||||
watch(searchQuery, (newVal) => {
|
||||
if (searchTimeout.value) {
|
||||
clearTimeout(searchTimeout.value);
|
||||
}
|
||||
|
||||
// Debounce search
|
||||
searchTimeout.value = setTimeout(() => {
|
||||
searchEmployees(newVal);
|
||||
}, 300);
|
||||
});
|
||||
|
||||
// Load employees when modal opens
|
||||
watch(() => props.show, (newVal) => {
|
||||
if (newVal) {
|
||||
searchQuery.value = '';
|
||||
searchEmployees('');
|
||||
}
|
||||
});
|
||||
|
||||
const searchEmployees = async (query) => {
|
||||
isLoading.value = true;
|
||||
try {
|
||||
const params = new URLSearchParams();
|
||||
if (query) params.append('query', query);
|
||||
|
||||
const response = await fetch(`/MobileApp/Lager/ShippingNote/searchEmployees?${params}`, {
|
||||
credentials: 'include'
|
||||
});
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
employees.value = data.employees;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error searching employees:', error);
|
||||
} finally {
|
||||
isLoading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const selectEmployee = (employee) => {
|
||||
emit('select', employee);
|
||||
emit('close');
|
||||
};
|
||||
|
||||
const close = () => {
|
||||
emit('close');
|
||||
};
|
||||
|
||||
return {
|
||||
searchQuery,
|
||||
filteredEmployees,
|
||||
isLoading,
|
||||
selectEmployee,
|
||||
close
|
||||
};
|
||||
},
|
||||
|
||||
template: `
|
||||
<!-- Bottom Sheet Modal -->
|
||||
<teleport to="body">
|
||||
<transition name="fade">
|
||||
<div v-if="show" class="fixed inset-0 z-50">
|
||||
<!-- Backdrop -->
|
||||
<div class="absolute inset-0 bg-black/50" @click="close"></div>
|
||||
|
||||
<!-- Sheet -->
|
||||
<transition name="slide-up-sheet">
|
||||
<div v-if="show" class="absolute bottom-0 left-0 right-0 bg-white dark:bg-slate-800 rounded-t-2xl shadow-xl max-h-[85vh] flex flex-col">
|
||||
<!-- Handle -->
|
||||
<div class="flex justify-center pt-2 pb-1 flex-shrink-0">
|
||||
<div class="w-10 h-1 bg-slate-300 dark:bg-slate-600 rounded-full"></div>
|
||||
</div>
|
||||
|
||||
<!-- Header -->
|
||||
<div class="px-4 pb-3 border-b border-slate-100 dark:border-slate-700 flex-shrink-0">
|
||||
<h3 class="text-lg font-semibold text-slate-800 dark:text-white text-center">
|
||||
Mitarbeiter auswählen
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<!-- Search Input -->
|
||||
<div class="px-4 py-3 flex-shrink-0">
|
||||
<div class="relative">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
||||
</svg>
|
||||
<input
|
||||
v-model="searchQuery"
|
||||
type="text"
|
||||
placeholder="Name suchen..."
|
||||
class="w-full pl-10 pr-4 py-3 bg-slate-100 dark:bg-slate-700 rounded-xl text-slate-800 dark:text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-primary"
|
||||
autofocus
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Results List -->
|
||||
<div class="flex-1 overflow-y-auto px-4 pb-6">
|
||||
<!-- Loading -->
|
||||
<div v-if="isLoading" class="py-8 text-center">
|
||||
<div class="animate-spin w-8 h-8 border-3 border-primary border-t-transparent rounded-full mx-auto"></div>
|
||||
</div>
|
||||
|
||||
<!-- Empty State -->
|
||||
<div v-else-if="filteredEmployees.length === 0" class="py-8 text-center text-slate-500 dark:text-slate-400">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 mx-auto mb-3 text-slate-300 dark:text-slate-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
|
||||
</svg>
|
||||
<p>Keine Mitarbeiter gefunden</p>
|
||||
</div>
|
||||
|
||||
<!-- Employee List -->
|
||||
<div v-else class="space-y-2">
|
||||
<button
|
||||
v-for="emp in filteredEmployees"
|
||||
:key="emp.id"
|
||||
@click="selectEmployee(emp)"
|
||||
class="w-full flex items-center p-3 bg-slate-50 dark:bg-slate-700/50 rounded-xl hover:bg-slate-100 dark:hover:bg-slate-700 transition text-left"
|
||||
>
|
||||
<!-- Avatar -->
|
||||
<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">
|
||||
{{ emp.name.charAt(0).toUpperCase() }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Info -->
|
||||
<div class="ml-3 flex-1 min-w-0">
|
||||
<p class="font-medium text-slate-800 dark:text-white truncate">
|
||||
{{ emp.name }}
|
||||
</p>
|
||||
<p v-if="emp.email" class="text-sm text-slate-500 dark:text-slate-400 truncate">
|
||||
{{ emp.email }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Select Icon -->
|
||||
<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="M12 4v16m8-8H4" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Safe area padding for iOS -->
|
||||
<div class="h-6 flex-shrink-0"></div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</transition>
|
||||
</teleport>
|
||||
`
|
||||
};
|
||||
Reference in New Issue
Block a user