1374 lines
78 KiB
JavaScript
1374 lines
78 KiB
JavaScript
/**
|
||
* Workorder Module (Aufträge)
|
||
*
|
||
* Main module for workorder management in MobileApp.
|
||
* Provides list view and full-screen detail view with collapsible cards.
|
||
*/
|
||
|
||
export default {
|
||
name: 'WorkorderModule',
|
||
emits: ['navigate', 'toast'],
|
||
props: {
|
||
user: Object,
|
||
submodule: String
|
||
},
|
||
|
||
setup(props, { emit }) {
|
||
const { ref, computed, watch, onMounted, nextTick } = Vue;
|
||
|
||
// =====================
|
||
// STATE
|
||
// =====================
|
||
const isLoading = ref(true);
|
||
const workorders = ref([]);
|
||
const searchTerm = ref('');
|
||
const selectedFcp = ref('all');
|
||
const showFcpFilter = ref(false);
|
||
|
||
// Detail view state
|
||
const selectedWorkorder = ref(null);
|
||
const isDetailLoading = ref(false);
|
||
const documentation = ref({ docs: [], journals: [] });
|
||
const tenantConfig = ref(null);
|
||
const checklist = ref([]);
|
||
|
||
// Expanded cards state
|
||
const expandedCards = ref({
|
||
customer: true,
|
||
checklist: true,
|
||
documentation: false,
|
||
notes: false,
|
||
journal: false,
|
||
cableData: false
|
||
});
|
||
|
||
// Edit states
|
||
const isEditingNotes = ref(false);
|
||
const tempNotes = ref('');
|
||
const newJournalText = ref('');
|
||
const cableDataForm = ref({ cableLength: '', cableType: '' });
|
||
|
||
// Bottom sheets
|
||
const showDocUploadSheet = ref(false);
|
||
const showProblemSheet = ref(false);
|
||
const showCompleteSheet = ref(false);
|
||
|
||
// Upload state
|
||
const uploadDocType = ref('');
|
||
const isUploading = ref(false);
|
||
const fileInputRef = ref(null);
|
||
const pendingChecklistUpload = ref(null); // For auto-advance camera
|
||
|
||
// Problem form
|
||
const problemType = ref('');
|
||
const problemComment = ref('');
|
||
|
||
// Swipe state for list cards
|
||
const swipeStartX = ref(0);
|
||
const swipeCardId = ref(null);
|
||
const swipeOffset = ref({}); // { [workorderId]: offsetX }
|
||
|
||
// =====================
|
||
// COMPUTED
|
||
// =====================
|
||
const fcpOptions = computed(() => {
|
||
if (!workorders.value.length) return [{ value: 'all', text: 'Alle FCPs' }];
|
||
const fcps = [...new Set(workorders.value.map(wo => wo.fcpName).filter(Boolean))].sort();
|
||
return [{ value: 'all', text: 'Alle FCPs' }, ...fcps.map(fcp => ({ value: fcp, text: fcp }))];
|
||
});
|
||
|
||
const filteredWorkorders = computed(() => {
|
||
let filtered = workorders.value;
|
||
|
||
// FCP filter
|
||
if (selectedFcp.value !== 'all') {
|
||
filtered = filtered.filter(wo => wo.fcpName === selectedFcp.value);
|
||
}
|
||
|
||
// Search filter
|
||
if (searchTerm.value.length > 2) {
|
||
const term = searchTerm.value.toLowerCase();
|
||
filtered = filtered.filter(wo =>
|
||
wo.id.toString().includes(term) ||
|
||
(wo.oaid && wo.oaid.toLowerCase().includes(term)) ||
|
||
(wo.fcpName && wo.fcpName.toLowerCase().includes(term)) ||
|
||
(wo.customerName && wo.customerName.toLowerCase().includes(term)) ||
|
||
(wo.customerAddress && wo.customerAddress.toLowerCase().includes(term))
|
||
);
|
||
}
|
||
|
||
// Sort by status priority
|
||
const getStatusRank = (status) => {
|
||
switch (status) {
|
||
case 'scheduled':
|
||
case 'civil_engineering_completed': return 0;
|
||
case 'assigned':
|
||
case 'new':
|
||
case 'problem_solved': return 1;
|
||
case 'in_progress': return 2;
|
||
case 'intervention_required':
|
||
case 'correction_requested': return 3;
|
||
case 'documented':
|
||
case 'completed': return 4;
|
||
default: return 99;
|
||
}
|
||
};
|
||
|
||
return filtered.sort((a, b) => {
|
||
const rankA = getStatusRank(a.status);
|
||
const rankB = getStatusRank(b.status);
|
||
if (rankA !== rankB) return rankA - rankB;
|
||
return (a.appointmentDate || Infinity) - (b.appointmentDate || Infinity);
|
||
});
|
||
});
|
||
|
||
const checklistProgress = computed(() => {
|
||
if (!checklist.value.length) return { completed: 0, total: 0, text: '0/0' };
|
||
const completed = checklist.value.filter(c => c.completed).length;
|
||
const total = checklist.value.length;
|
||
return { completed, total, text: `${completed}/${total}` };
|
||
});
|
||
|
||
const isChecklistComplete = computed(() => {
|
||
// Check required items are completed (if any are marked as required)
|
||
const requiredItems = checklist.value.filter(c => c.required);
|
||
if (requiredItems.length > 0) {
|
||
const allRequiredComplete = requiredItems.every(c => c.completed);
|
||
if (!allRequiredComplete) return false;
|
||
} else if (checklist.value.length > 0) {
|
||
// If no items are marked as required, check if at least some items are completed
|
||
const hasAnyCompleted = checklist.value.some(c => c.completed);
|
||
if (!hasAnyCompleted) return false;
|
||
}
|
||
|
||
// Check cable data if required
|
||
if (tenantConfig.value?.requireCableLength && !cableDataForm.value.cableLength?.trim()) {
|
||
return false;
|
||
}
|
||
if (tenantConfig.value?.requireCableType && !cableDataForm.value.cableType?.trim()) {
|
||
return false;
|
||
}
|
||
|
||
return true;
|
||
});
|
||
|
||
const incompleteItems = computed(() => {
|
||
const items = [];
|
||
checklist.value.filter(c => !c.completed).forEach(c => {
|
||
items.push(c.text);
|
||
});
|
||
if (tenantConfig.value?.requireCableLength && !cableDataForm.value.cableLength?.trim()) {
|
||
items.push('Kabellänge');
|
||
}
|
||
if (tenantConfig.value?.requireCableType && !cableDataForm.value.cableType?.trim()) {
|
||
items.push('Kabeltyp');
|
||
}
|
||
return items;
|
||
});
|
||
|
||
const googleMapsLink = computed(() => {
|
||
if (!selectedWorkorder.value?.customer) return '#';
|
||
const c = selectedWorkorder.value.customer;
|
||
const address = encodeURIComponent(`${c.street}, ${c.zip} ${c.city}`);
|
||
return `https://maps.google.com/maps?q=${address}`;
|
||
});
|
||
|
||
// =====================
|
||
// METHODS
|
||
// =====================
|
||
const fetchWorkorders = async () => {
|
||
isLoading.value = true;
|
||
try {
|
||
const response = await fetch('/MobileApp/Workorder/Workorder/get', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
credentials: 'include',
|
||
body: JSON.stringify({ pagination: { page: 1, per_page: 500 } })
|
||
});
|
||
const data = await response.json();
|
||
if (data.success) {
|
||
workorders.value = data.workorders;
|
||
}
|
||
} catch (error) {
|
||
console.error('Error fetching workorders:', error);
|
||
emit('toast', 'Fehler beim Laden der Aufträge', 'error');
|
||
} finally {
|
||
isLoading.value = false;
|
||
}
|
||
};
|
||
|
||
const openDetail = async (workorder) => {
|
||
selectedWorkorder.value = workorder;
|
||
isDetailLoading.value = true;
|
||
expandedCards.value = { customer: true, checklist: true, documentation: false, notes: false, journal: false, cableData: false };
|
||
|
||
try {
|
||
// Fetch all workorder details in a single request
|
||
const response = await fetch(`/MobileApp/Workorder/Workorder/getWorkorderDetail?id=${workorder.id}`, { credentials: 'include' });
|
||
const data = await response.json();
|
||
|
||
if (data.success) {
|
||
selectedWorkorder.value = data.workorder;
|
||
cableDataForm.value = {
|
||
cableLength: data.workorder.cableLength || '',
|
||
cableType: data.workorder.cableType || ''
|
||
};
|
||
documentation.value = { docs: data.docs, journals: data.journals };
|
||
tenantConfig.value = data.tenantConfig;
|
||
checklist.value = data.checklist;
|
||
} else {
|
||
emit('toast', data.message || 'Fehler beim Laden', 'error');
|
||
}
|
||
} catch (error) {
|
||
console.error('Error loading detail:', error);
|
||
emit('toast', 'Fehler beim Laden der Details', 'error');
|
||
} finally {
|
||
isDetailLoading.value = false;
|
||
}
|
||
};
|
||
|
||
const closeDetail = () => {
|
||
selectedWorkorder.value = null;
|
||
documentation.value = { docs: [], journals: [] };
|
||
tenantConfig.value = null;
|
||
checklist.value = [];
|
||
isEditingNotes.value = false;
|
||
};
|
||
|
||
const toggleCard = (cardId) => {
|
||
expandedCards.value[cardId] = !expandedCards.value[cardId];
|
||
};
|
||
|
||
// Notes editing
|
||
const startEditNotes = () => {
|
||
tempNotes.value = selectedWorkorder.value.additionalInfo || '';
|
||
isEditingNotes.value = true;
|
||
};
|
||
|
||
const cancelEditNotes = () => {
|
||
isEditingNotes.value = false;
|
||
tempNotes.value = '';
|
||
};
|
||
|
||
const saveNotes = async () => {
|
||
try {
|
||
const response = await fetch('/MobileApp/Workorder/Workorder/updateAdditionalInfo', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
credentials: 'include',
|
||
body: JSON.stringify({
|
||
workorderId: selectedWorkorder.value.id,
|
||
additionalInfo: tempNotes.value
|
||
})
|
||
});
|
||
const data = await response.json();
|
||
if (data.success) {
|
||
selectedWorkorder.value.additionalInfo = data.newInfo;
|
||
isEditingNotes.value = false;
|
||
emit('toast', 'Notiz gespeichert', 'success');
|
||
// Refresh journals
|
||
const docRes = await fetch(`/MobileApp/Workorder/Workorder/getDocumentation?workorderId=${selectedWorkorder.value.id}`, { credentials: 'include' });
|
||
const docData = await docRes.json();
|
||
if (docData.success) documentation.value.journals = docData.journals;
|
||
}
|
||
} catch (error) {
|
||
emit('toast', 'Fehler beim Speichern', 'error');
|
||
}
|
||
};
|
||
|
||
// Journal
|
||
const addJournalEntry = async () => {
|
||
if (!newJournalText.value.trim()) return;
|
||
try {
|
||
const response = await fetch('/MobileApp/Workorder/Workorder/addJournal', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
credentials: 'include',
|
||
body: JSON.stringify({
|
||
workorderId: selectedWorkorder.value.id,
|
||
text: newJournalText.value
|
||
})
|
||
});
|
||
const data = await response.json();
|
||
if (data.success) {
|
||
documentation.value.journals = data.journals;
|
||
newJournalText.value = '';
|
||
emit('toast', 'Eintrag hinzugefügt', 'success');
|
||
}
|
||
} catch (error) {
|
||
emit('toast', 'Fehler beim Hinzufügen', 'error');
|
||
}
|
||
};
|
||
|
||
// Cable data
|
||
const saveCableData = async () => {
|
||
try {
|
||
const response = await fetch('/MobileApp/Workorder/Workorder/updateWorkorderData', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
credentials: 'include',
|
||
body: JSON.stringify({
|
||
workorderId: selectedWorkorder.value.id,
|
||
cableLength: cableDataForm.value.cableLength,
|
||
cableType: cableDataForm.value.cableType
|
||
})
|
||
});
|
||
const data = await response.json();
|
||
if (data.success) {
|
||
emit('toast', 'Daten gespeichert', 'success');
|
||
}
|
||
} catch (error) {
|
||
emit('toast', 'Fehler beim Speichern', 'error');
|
||
}
|
||
};
|
||
|
||
// Documentation upload
|
||
const openDocUpload = () => {
|
||
if (tenantConfig.value?.documentationTypes?.length) {
|
||
uploadDocType.value = tenantConfig.value.documentationTypes[0].value;
|
||
}
|
||
showDocUploadSheet.value = true;
|
||
};
|
||
|
||
const triggerFileInput = () => {
|
||
if (fileInputRef.value) {
|
||
fileInputRef.value.click();
|
||
}
|
||
};
|
||
|
||
const handleFileSelect = async (event) => {
|
||
const files = event.target.files;
|
||
if (!files || !files.length) return;
|
||
|
||
isUploading.value = true;
|
||
const wasFromChecklist = pendingChecklistUpload.value !== null;
|
||
const formData = new FormData();
|
||
formData.append('workorderId', selectedWorkorder.value.id);
|
||
formData.append('documentType', uploadDocType.value);
|
||
|
||
for (let i = 0; i < files.length; i++) {
|
||
formData.append('files[]', files[i]);
|
||
}
|
||
|
||
try {
|
||
const response = await fetch('/MobileApp/Workorder/Workorder/uploadDocumentation', {
|
||
method: 'POST',
|
||
credentials: 'include',
|
||
body: formData
|
||
});
|
||
const data = await response.json();
|
||
if (data.success) {
|
||
triggerHaptic('light');
|
||
emit('toast', 'Dokument hochgeladen', 'success');
|
||
showDocUploadSheet.value = false;
|
||
|
||
// Refresh documentation and checklist
|
||
const [docRes, checkRes] = await Promise.all([
|
||
fetch(`/MobileApp/Workorder/Workorder/getDocumentation?workorderId=${selectedWorkorder.value.id}`, { credentials: 'include' }),
|
||
fetch(`/MobileApp/Workorder/Workorder/getChecklist?workorderId=${selectedWorkorder.value.id}`, { credentials: 'include' })
|
||
]);
|
||
const docData = await docRes.json();
|
||
const checkData = await checkRes.json();
|
||
if (docData.success) documentation.value = { docs: docData.docs, journals: docData.journals };
|
||
if (checkData.success) checklist.value = checkData.checklist;
|
||
|
||
// Auto-advance: If upload was from checklist, open camera for next item
|
||
if (wasFromChecklist) {
|
||
pendingChecklistUpload.value = null;
|
||
await nextTick();
|
||
const nextItem = getNextUncompletedItem();
|
||
if (nextItem) {
|
||
// Short delay so user sees the check mark
|
||
setTimeout(() => {
|
||
quickUploadForItem(nextItem);
|
||
}, 500);
|
||
}
|
||
}
|
||
}
|
||
} catch (error) {
|
||
emit('toast', 'Upload fehlgeschlagen', 'error');
|
||
} finally {
|
||
isUploading.value = false;
|
||
if (fileInputRef.value) fileInputRef.value.value = '';
|
||
}
|
||
};
|
||
|
||
// Problem reporting
|
||
const openProblemSheet = () => {
|
||
problemType.value = tenantConfig.value?.interventionTypes?.[0]?.value || '';
|
||
problemComment.value = '';
|
||
showProblemSheet.value = true;
|
||
};
|
||
|
||
const submitProblem = async () => {
|
||
if (!problemType.value && !problemComment.value) {
|
||
emit('toast', 'Bitte Grund angeben', 'error');
|
||
return;
|
||
}
|
||
|
||
const typeText = tenantConfig.value?.interventionTypes?.find(t => t.value === problemType.value)?.text || problemType.value;
|
||
|
||
try {
|
||
const response = await fetch('/MobileApp/Workorder/Workorder/requestIntervention', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
credentials: 'include',
|
||
body: JSON.stringify({
|
||
workorderId: selectedWorkorder.value.id,
|
||
interventionType: typeText,
|
||
journalText: problemComment.value || typeText
|
||
})
|
||
});
|
||
const data = await response.json();
|
||
if (data.success) {
|
||
emit('toast', 'Problem gemeldet', 'success');
|
||
showProblemSheet.value = false;
|
||
closeDetail();
|
||
fetchWorkorders();
|
||
} else {
|
||
emit('toast', data.message || 'Fehler', 'error');
|
||
}
|
||
} catch (error) {
|
||
emit('toast', 'Fehler beim Melden', 'error');
|
||
}
|
||
};
|
||
|
||
// Complete workorder
|
||
const openCompleteSheet = () => {
|
||
showCompleteSheet.value = true;
|
||
};
|
||
|
||
const submitComplete = async () => {
|
||
try {
|
||
const response = await fetch('/MobileApp/Workorder/Workorder/completeWorkorder', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
credentials: 'include',
|
||
body: JSON.stringify({
|
||
workorderId: selectedWorkorder.value.id
|
||
})
|
||
});
|
||
const data = await response.json();
|
||
if (data.success) {
|
||
triggerHaptic('success');
|
||
emit('toast', 'Auftrag abgeschlossen', 'success');
|
||
showCompleteSheet.value = false;
|
||
closeDetail();
|
||
fetchWorkorders();
|
||
} else {
|
||
emit('toast', data.message || 'Fehler', 'error');
|
||
}
|
||
} catch (error) {
|
||
emit('toast', 'Fehler beim Abschließen', 'error');
|
||
}
|
||
};
|
||
|
||
const formatDate = (timestamp, format = 'date') => {
|
||
if (!timestamp) return '–';
|
||
const date = new Date(timestamp * 1000);
|
||
if (format === 'datetime') {
|
||
return date.toLocaleDateString('de-DE') + ' ' + date.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' });
|
||
}
|
||
return date.toLocaleDateString('de-DE');
|
||
};
|
||
|
||
const getStatusColor = (color) => {
|
||
const colors = {
|
||
primary: 'bg-blue-500',
|
||
info: 'bg-sky-500',
|
||
warning: 'bg-amber-500',
|
||
danger: 'bg-red-500',
|
||
success: 'bg-green-500',
|
||
secondary: 'bg-slate-500',
|
||
orange: 'bg-orange-500',
|
||
purple: 'bg-purple-500',
|
||
muted: 'bg-gray-400'
|
||
};
|
||
return colors[color] || 'bg-gray-500';
|
||
};
|
||
|
||
// Get left border color for status indicator on cards
|
||
const getStatusBorderColor = (status) => {
|
||
const borderColors = {
|
||
'new': 'border-l-blue-500',
|
||
'assigned': 'border-l-sky-500',
|
||
'scheduled': 'border-l-amber-500',
|
||
'in_progress': 'border-l-amber-500',
|
||
'correction_requested': 'border-l-red-500',
|
||
'intervention_required': 'border-l-red-500',
|
||
'civil_engineering_required': 'border-l-orange-500',
|
||
'civil_engineering_completed': 'border-l-green-500',
|
||
'problem_solved': 'border-l-green-500',
|
||
'documented': 'border-l-green-500',
|
||
'completed': 'border-l-slate-500',
|
||
'charged': 'border-l-purple-500',
|
||
'cancelled': 'border-l-red-500',
|
||
'archived': 'border-l-gray-400'
|
||
};
|
||
return borderColors[status] || 'border-l-gray-400';
|
||
};
|
||
|
||
// Quick camera upload for checklist item
|
||
const quickUploadForItem = (item) => {
|
||
uploadDocType.value = item.type;
|
||
pendingChecklistUpload.value = item.type;
|
||
nextTick(() => {
|
||
if (fileInputRef.value) {
|
||
fileInputRef.value.click();
|
||
}
|
||
});
|
||
};
|
||
|
||
// Get next uncompleted checklist item
|
||
const getNextUncompletedItem = () => {
|
||
return checklist.value.find(item => !item.completed);
|
||
};
|
||
|
||
// Haptic feedback
|
||
const triggerHaptic = (type = 'success') => {
|
||
if ('vibrate' in navigator) {
|
||
if (type === 'success') {
|
||
navigator.vibrate([50, 50, 100]);
|
||
} else {
|
||
navigator.vibrate(50);
|
||
}
|
||
}
|
||
};
|
||
|
||
// Swipe handlers for list cards
|
||
const handleTouchStart = (e, wo) => {
|
||
swipeStartX.value = e.touches[0].clientX;
|
||
swipeCardId.value = wo.id;
|
||
};
|
||
|
||
const handleTouchMove = (e, wo) => {
|
||
if (swipeCardId.value !== wo.id) return;
|
||
const currentX = e.touches[0].clientX;
|
||
const diff = swipeStartX.value - currentX;
|
||
|
||
// Only allow left swipe, max 100px
|
||
if (diff > 0) {
|
||
swipeOffset.value = { ...swipeOffset.value, [wo.id]: Math.min(diff, 100) };
|
||
} else {
|
||
swipeOffset.value = { ...swipeOffset.value, [wo.id]: 0 };
|
||
}
|
||
};
|
||
|
||
const handleTouchEnd = (e, wo) => {
|
||
if (swipeCardId.value !== wo.id) return;
|
||
const offset = swipeOffset.value[wo.id] || 0;
|
||
|
||
// If swiped more than 60px, trigger navigation
|
||
if (offset > 60 && wo.customerAddress) {
|
||
triggerHaptic('light');
|
||
const address = encodeURIComponent(wo.customerAddress);
|
||
window.open(`https://maps.google.com/maps?q=${address}`, '_blank');
|
||
}
|
||
|
||
// Reset with animation
|
||
swipeOffset.value = { ...swipeOffset.value, [wo.id]: 0 };
|
||
swipeCardId.value = null;
|
||
};
|
||
|
||
const getSwipeStyle = (woId) => {
|
||
const offset = swipeOffset.value[woId] || 0;
|
||
return {
|
||
transform: `translateX(-${offset}px)`,
|
||
transition: swipeCardId.value === woId ? 'none' : 'transform 0.3s ease-out'
|
||
};
|
||
};
|
||
|
||
// Open navigation directly
|
||
const openNavigation = () => {
|
||
if (selectedWorkorder.value?.customer) {
|
||
const c = selectedWorkorder.value.customer;
|
||
const address = encodeURIComponent(`${c.street}, ${c.zip} ${c.city}`);
|
||
window.open(`https://maps.google.com/maps?q=${address}`, '_blank');
|
||
}
|
||
};
|
||
|
||
// Call customer directly
|
||
const callCustomer = () => {
|
||
if (selectedWorkorder.value?.customer?.phone) {
|
||
window.location.href = `tel:${selectedWorkorder.value.customer.phone}`;
|
||
}
|
||
};
|
||
|
||
// Smart complete - show confirmation sheet
|
||
const handleComplete = () => {
|
||
if (isChecklistComplete.value) {
|
||
showCompleteSheet.value = true;
|
||
}
|
||
// Button is disabled when not complete, so this won't be called
|
||
};
|
||
|
||
// Initialize
|
||
onMounted(() => {
|
||
fetchWorkorders();
|
||
});
|
||
|
||
return {
|
||
// State
|
||
isLoading,
|
||
workorders,
|
||
searchTerm,
|
||
selectedFcp,
|
||
showFcpFilter,
|
||
fcpOptions,
|
||
filteredWorkorders,
|
||
selectedWorkorder,
|
||
isDetailLoading,
|
||
documentation,
|
||
tenantConfig,
|
||
checklist,
|
||
expandedCards,
|
||
isEditingNotes,
|
||
tempNotes,
|
||
newJournalText,
|
||
cableDataForm,
|
||
showDocUploadSheet,
|
||
showProblemSheet,
|
||
showCompleteSheet,
|
||
uploadDocType,
|
||
isUploading,
|
||
fileInputRef,
|
||
problemType,
|
||
problemComment,
|
||
checklistProgress,
|
||
isChecklistComplete,
|
||
incompleteItems,
|
||
googleMapsLink,
|
||
|
||
// Methods
|
||
fetchWorkorders,
|
||
openDetail,
|
||
closeDetail,
|
||
toggleCard,
|
||
startEditNotes,
|
||
cancelEditNotes,
|
||
saveNotes,
|
||
addJournalEntry,
|
||
saveCableData,
|
||
openDocUpload,
|
||
triggerFileInput,
|
||
handleFileSelect,
|
||
openProblemSheet,
|
||
submitProblem,
|
||
openCompleteSheet,
|
||
submitComplete,
|
||
formatDate,
|
||
getStatusColor,
|
||
getStatusBorderColor,
|
||
quickUploadForItem,
|
||
openNavigation,
|
||
callCustomer,
|
||
handleComplete,
|
||
handleTouchStart,
|
||
handleTouchMove,
|
||
handleTouchEnd,
|
||
getSwipeStyle,
|
||
swipeOffset
|
||
};
|
||
},
|
||
|
||
template: `
|
||
<div class="h-full flex flex-col">
|
||
<!-- LIST VIEW -->
|
||
<template v-if="!selectedWorkorder">
|
||
<!-- Search & Filter Bar -->
|
||
<div class="p-3 space-y-2 flex-shrink-0">
|
||
<div class="flex gap-2">
|
||
<!-- Search Input -->
|
||
<div class="flex-1 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="searchTerm"
|
||
type="text"
|
||
placeholder="Suchen..."
|
||
class="w-full pl-10 pr-4 py-2.5 bg-white dark:bg-slate-800 rounded-xl text-slate-800 dark:text-white placeholder-slate-400 border border-slate-200 dark:border-slate-700 focus:outline-none focus:ring-2 focus:ring-primary"
|
||
>
|
||
</div>
|
||
<!-- FCP Filter Button -->
|
||
<button
|
||
@click="showFcpFilter = !showFcpFilter"
|
||
class="px-4 py-2.5 bg-white dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 text-slate-700 dark:text-slate-300 flex items-center"
|
||
>
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
|
||
</svg>
|
||
<span class="hidden sm:inline">FCP</span>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- FCP Dropdown -->
|
||
<div v-if="showFcpFilter" class="bg-white dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 p-2 max-h-48 overflow-y-auto">
|
||
<button
|
||
v-for="opt in fcpOptions"
|
||
:key="opt.value"
|
||
@click="selectedFcp = opt.value; showFcpFilter = false"
|
||
:class="[
|
||
'w-full text-left px-3 py-2 rounded-lg transition',
|
||
selectedFcp === opt.value
|
||
? 'bg-primary/10 text-primary font-medium'
|
||
: 'text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-700'
|
||
]"
|
||
>
|
||
{{ opt.text }}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Workorder List -->
|
||
<div class="flex-1 overflow-y-auto px-3 pb-3">
|
||
<!-- Loading -->
|
||
<div v-if="isLoading" class="space-y-3">
|
||
<div v-for="i in 4" :key="i" class="bg-white dark:bg-slate-800 p-4 rounded-xl animate-pulse">
|
||
<div class="flex justify-between">
|
||
<div class="flex-1">
|
||
<div class="h-5 bg-slate-200 dark:bg-slate-700 rounded w-3/4 mb-2"></div>
|
||
<div class="h-4 bg-slate-200 dark:bg-slate-700 rounded w-full mb-2"></div>
|
||
<div class="h-3 bg-slate-200 dark:bg-slate-700 rounded w-1/2"></div>
|
||
</div>
|
||
<div class="ml-3 text-right">
|
||
<div class="h-5 w-20 bg-slate-200 dark:bg-slate-700 rounded-full mb-2"></div>
|
||
<div class="h-4 w-16 bg-slate-200 dark:bg-slate-700 rounded"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Empty State -->
|
||
<div v-else-if="filteredWorkorders.length === 0" class="text-center py-12">
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 mx-auto text-slate-300 dark:text-slate-600 mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
|
||
</svg>
|
||
<p class="text-slate-500 dark:text-slate-400">Keine Aufträge gefunden</p>
|
||
</div>
|
||
|
||
<!-- Workorder Cards -->
|
||
<div v-else class="space-y-3">
|
||
<div
|
||
v-for="wo in filteredWorkorders"
|
||
:key="wo.id"
|
||
class="relative overflow-hidden rounded-xl"
|
||
>
|
||
<!-- Background action (revealed on swipe) -->
|
||
<div class="absolute inset-y-0 right-0 w-24 bg-primary flex items-center justify-center rounded-r-xl">
|
||
<div class="text-white text-center">
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mx-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
|
||
</svg>
|
||
<span class="text-xs font-medium mt-1">Navigation</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Card content (slides on swipe) -->
|
||
<div
|
||
@click="openDetail(wo)"
|
||
@touchstart="handleTouchStart($event, wo)"
|
||
@touchmove="handleTouchMove($event, wo)"
|
||
@touchend="handleTouchEnd($event, wo)"
|
||
:style="getSwipeStyle(wo.id)"
|
||
:class="[
|
||
'relative w-full bg-white dark:bg-slate-800 p-4 rounded-xl shadow-sm text-left cursor-pointer',
|
||
'border-l-4',
|
||
getStatusBorderColor(wo.status)
|
||
]"
|
||
>
|
||
<div class="flex justify-between items-start">
|
||
<div class="flex-1 min-w-0 pr-3">
|
||
<div class="flex items-center gap-2 mb-1">
|
||
<span v-if="wo.oaid" class="font-bold text-primary dark:text-sky-400">{{ wo.oaid }}</span>
|
||
<span v-else class="font-bold text-primary dark:text-sky-400">#{{ wo.id }}</span>
|
||
<span v-if="wo.fcpName" class="text-xs bg-slate-100 dark:bg-slate-700 px-1.5 py-0.5 rounded text-slate-600 dark:text-slate-400">{{ wo.fcpName }}</span>
|
||
</div>
|
||
<p class="font-medium text-slate-800 dark:text-white truncate">{{ wo.customerName || 'Unbekannt' }}</p>
|
||
<p class="text-sm text-slate-500 dark:text-slate-400 truncate">{{ wo.customerAddress }}</p>
|
||
</div>
|
||
<div class="text-right flex-shrink-0">
|
||
<span :class="[getStatusColor(wo.statusColor), 'inline-block px-2 py-0.5 rounded-full text-xs font-medium text-white']">
|
||
{{ wo.statusText }}
|
||
</span>
|
||
<p v-if="wo.appointmentFormatted" class="text-sm font-medium text-slate-600 dark:text-slate-300 mt-1">
|
||
{{ wo.appointmentFormatted }}
|
||
</p>
|
||
<p v-if="wo.deadlineFormatted" class="text-xs text-red-500 mt-0.5">
|
||
Frist: {{ wo.deadlineFormatted }}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<!-- DETAIL VIEW -->
|
||
<template v-else>
|
||
<!-- Header -->
|
||
<div class="flex items-center justify-between px-4 py-3 bg-white dark:bg-slate-800 border-b border-slate-100 dark:border-slate-700 flex-shrink-0">
|
||
<button @click="closeDetail" class="flex items-center text-slate-600 dark:text-slate-300">
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
|
||
</svg>
|
||
Zurück
|
||
</button>
|
||
<div class="flex items-center gap-2">
|
||
<span v-if="selectedWorkorder.oaid" class="font-bold text-primary dark:text-sky-400">{{ selectedWorkorder.oaid }}</span>
|
||
<span v-else class="font-bold text-primary dark:text-sky-400">#{{ selectedWorkorder.id }}</span>
|
||
<span v-if="selectedWorkorder.fcpName" class="text-xs bg-slate-100 dark:bg-slate-700 px-1.5 py-0.5 rounded text-slate-600 dark:text-slate-400">{{ selectedWorkorder.fcpName }}</span>
|
||
</div>
|
||
<span :class="[getStatusColor(selectedWorkorder.statusColor), 'px-2 py-0.5 rounded-full text-xs font-medium text-white']">
|
||
{{ selectedWorkorder.statusText }}
|
||
</span>
|
||
</div>
|
||
|
||
<!-- Detail Content -->
|
||
<div class="flex-1 overflow-y-auto p-3 pb-24 space-y-3">
|
||
<!-- Loading -->
|
||
<div v-if="isDetailLoading" class="space-y-3 animate-pulse">
|
||
<div class="bg-white dark:bg-slate-800 p-4 rounded-xl">
|
||
<div class="h-5 bg-slate-200 dark:bg-slate-700 rounded w-1/2 mb-3"></div>
|
||
<div class="h-4 bg-slate-200 dark:bg-slate-700 rounded w-full mb-2"></div>
|
||
<div class="h-4 bg-slate-200 dark:bg-slate-700 rounded w-3/4"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<template v-else>
|
||
<!-- Customer Card (Expanded by default) -->
|
||
<div class="bg-white dark:bg-slate-800 rounded-xl overflow-hidden">
|
||
<button
|
||
@click="toggleCard('customer')"
|
||
class="w-full flex items-center justify-between p-4 text-left"
|
||
>
|
||
<div class="flex items-center">
|
||
<div class="w-8 h-8 bg-primary/10 rounded-lg flex items-center justify-center mr-3">
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
|
||
</svg>
|
||
</div>
|
||
<span class="font-semibold text-slate-800 dark:text-white">Kunde</span>
|
||
</div>
|
||
<svg xmlns="http://www.w3.org/2000/svg" :class="['h-5 w-5 text-slate-400 transition-transform', expandedCards.customer ? 'rotate-180' : '']" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
|
||
</svg>
|
||
</button>
|
||
<div v-if="expandedCards.customer && selectedWorkorder.customer" class="px-4 pb-4 space-y-3">
|
||
<p class="font-medium text-slate-800 dark:text-white text-lg">{{ selectedWorkorder.customer.name }}</p>
|
||
<p class="text-slate-600 dark:text-slate-400">
|
||
{{ selectedWorkorder.customer.street }}, {{ selectedWorkorder.customer.zip }} {{ selectedWorkorder.customer.city }}
|
||
</p>
|
||
|
||
<!-- Prominent Action Buttons -->
|
||
<div class="flex gap-3 pt-2">
|
||
<button
|
||
@click="openNavigation"
|
||
class="flex-1 py-3 bg-primary text-white rounded-xl font-medium flex items-center justify-center gap-2 active:scale-95 transition"
|
||
>
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
|
||
</svg>
|
||
Navigation
|
||
</button>
|
||
<button
|
||
v-if="selectedWorkorder.customer.phone"
|
||
@click="callCustomer"
|
||
class="flex-1 py-3 bg-green-500 text-white rounded-xl font-medium flex items-center justify-center gap-2 active:scale-95 transition"
|
||
>
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
|
||
</svg>
|
||
Anrufen
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Email (smaller, secondary) -->
|
||
<div v-if="selectedWorkorder.customer.email" class="flex items-center pt-1">
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
||
</svg>
|
||
<a :href="'mailto:' + selectedWorkorder.customer.email" class="text-sm text-primary dark:text-sky-400 truncate">{{ selectedWorkorder.customer.email }}</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Checklist Card -->
|
||
<div class="bg-white dark:bg-slate-800 rounded-xl overflow-hidden">
|
||
<button
|
||
@click="toggleCard('checklist')"
|
||
class="w-full flex items-center justify-between p-4 text-left"
|
||
>
|
||
<div class="flex items-center">
|
||
<div class="w-8 h-8 bg-amber-500/10 rounded-lg flex items-center justify-center mr-3">
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-amber-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4" />
|
||
</svg>
|
||
</div>
|
||
<span class="font-semibold text-slate-800 dark:text-white">Checkliste</span>
|
||
<span :class="[
|
||
'ml-2 px-2 py-0.5 rounded-full text-xs',
|
||
checklistProgress.completed === checklistProgress.total && checklistProgress.total > 0
|
||
? 'bg-green-100 dark:bg-green-900/30 text-green-600 dark:text-green-400'
|
||
: 'bg-slate-100 dark:bg-slate-700 text-slate-600 dark:text-slate-300'
|
||
]">
|
||
{{ checklistProgress.text }}
|
||
</span>
|
||
</div>
|
||
<svg xmlns="http://www.w3.org/2000/svg" :class="['h-5 w-5 text-slate-400 transition-transform', expandedCards.checklist ? 'rotate-180' : '']" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
|
||
</svg>
|
||
</button>
|
||
<div v-if="expandedCards.checklist" class="px-4 pb-4">
|
||
<div v-if="checklist.length === 0" class="text-center py-4 text-slate-500 dark:text-slate-400">
|
||
Keine Checkliste vorhanden
|
||
</div>
|
||
<ul v-else class="space-y-2">
|
||
<li v-for="item in checklist" :key="item.type" class="flex items-center justify-between">
|
||
<div class="flex items-center flex-1 min-w-0">
|
||
<svg v-if="item.completed" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-500 mr-2 flex-shrink-0" viewBox="0 0 20 20" fill="currentColor">
|
||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
|
||
</svg>
|
||
<svg v-else xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-slate-400 mr-2 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<circle cx="12" cy="12" r="10" stroke-width="2" />
|
||
</svg>
|
||
<span :class="[item.completed ? 'text-slate-500 dark:text-slate-400 line-through' : 'text-slate-800 dark:text-white', 'truncate']">
|
||
{{ item.text }}
|
||
</span>
|
||
</div>
|
||
<!-- Quick Camera Button for uncompleted items -->
|
||
<button
|
||
v-if="!item.completed"
|
||
@click="quickUploadForItem(item)"
|
||
class="ml-2 p-2 bg-primary/10 hover:bg-primary/20 rounded-lg text-primary active:scale-95 transition flex-shrink-0"
|
||
:disabled="isUploading"
|
||
>
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
|
||
</svg>
|
||
</button>
|
||
<!-- Check mark for completed items -->
|
||
<div v-else class="ml-2 p-2 text-green-500 flex-shrink-0">
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
|
||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
|
||
</svg>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Documentation Card -->
|
||
<div class="bg-white dark:bg-slate-800 rounded-xl overflow-hidden">
|
||
<button
|
||
@click="toggleCard('documentation')"
|
||
class="w-full flex items-center justify-between p-4 text-left"
|
||
>
|
||
<div class="flex items-center">
|
||
<div class="w-8 h-8 bg-green-500/10 rounded-lg flex items-center justify-center mr-3">
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||
</svg>
|
||
</div>
|
||
<span class="font-semibold text-slate-800 dark:text-white">Dokumentation</span>
|
||
<span class="ml-2 px-2 py-0.5 bg-slate-100 dark:bg-slate-700 rounded-full text-xs text-slate-600 dark:text-slate-300">
|
||
{{ documentation.docs.length }}
|
||
</span>
|
||
</div>
|
||
<div class="flex items-center">
|
||
<button
|
||
@click.stop="openDocUpload"
|
||
class="mr-2 p-1.5 bg-primary/10 rounded-lg text-primary"
|
||
>
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" 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>
|
||
<svg xmlns="http://www.w3.org/2000/svg" :class="['h-5 w-5 text-slate-400 transition-transform', expandedCards.documentation ? 'rotate-180' : '']" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
|
||
</svg>
|
||
</div>
|
||
</button>
|
||
<div v-if="expandedCards.documentation" class="px-4 pb-4">
|
||
<div v-if="documentation.docs.length === 0" class="text-center py-4 text-slate-500 dark:text-slate-400">
|
||
Keine Dokumente vorhanden
|
||
</div>
|
||
<div v-else class="space-y-2">
|
||
<a
|
||
v-for="doc in documentation.docs"
|
||
:key="doc.id"
|
||
:href="doc.previewUrl"
|
||
target="_blank"
|
||
class="flex items-center p-2 bg-slate-50 dark:bg-slate-700/50 rounded-lg"
|
||
>
|
||
<div class="w-10 h-10 bg-slate-200 dark:bg-slate-600 rounded-lg flex items-center justify-center mr-3">
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-slate-500 dark:text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
|
||
</svg>
|
||
</div>
|
||
<div class="flex-1 min-w-0">
|
||
<p class="text-sm font-medium text-slate-800 dark:text-white truncate">{{ doc.fileName }}</p>
|
||
<p class="text-xs text-slate-500 dark:text-slate-400">{{ doc.createFormatted }} - {{ doc.userName }}</p>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Notes Card -->
|
||
<div class="bg-white dark:bg-slate-800 rounded-xl overflow-hidden">
|
||
<button
|
||
@click="toggleCard('notes')"
|
||
class="w-full flex items-center justify-between p-4 text-left"
|
||
>
|
||
<div class="flex items-center">
|
||
<div class="w-8 h-8 bg-purple-500/10 rounded-lg flex items-center justify-center mr-3">
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-purple-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
|
||
</svg>
|
||
</div>
|
||
<span class="font-semibold text-slate-800 dark:text-white">Notizen</span>
|
||
</div>
|
||
<svg xmlns="http://www.w3.org/2000/svg" :class="['h-5 w-5 text-slate-400 transition-transform', expandedCards.notes ? 'rotate-180' : '']" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
|
||
</svg>
|
||
</button>
|
||
<div v-if="expandedCards.notes" class="px-4 pb-4">
|
||
<div v-if="isEditingNotes">
|
||
<textarea
|
||
v-model="tempNotes"
|
||
rows="4"
|
||
class="w-full p-3 bg-slate-50 dark:bg-slate-700 rounded-lg text-slate-800 dark:text-white border-0 focus:ring-2 focus:ring-primary"
|
||
placeholder="Notiz eingeben..."
|
||
></textarea>
|
||
<div class="flex justify-end gap-2 mt-2">
|
||
<button @click="cancelEditNotes" class="px-4 py-2 text-sm text-slate-600 dark:text-slate-300">
|
||
Abbrechen
|
||
</button>
|
||
<button @click="saveNotes" class="px-4 py-2 bg-primary text-white text-sm rounded-lg">
|
||
Speichern
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div v-else>
|
||
<p class="text-slate-700 dark:text-slate-300 whitespace-pre-wrap">{{ selectedWorkorder.additionalInfo || 'Keine Notiz vorhanden.' }}</p>
|
||
<button @click="startEditNotes" class="mt-3 text-sm text-primary dark:text-sky-400 flex items-center">
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
|
||
</svg>
|
||
Bearbeiten
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Journal Card -->
|
||
<div class="bg-white dark:bg-slate-800 rounded-xl overflow-hidden">
|
||
<button
|
||
@click="toggleCard('journal')"
|
||
class="w-full flex items-center justify-between p-4 text-left"
|
||
>
|
||
<div class="flex items-center">
|
||
<div class="w-8 h-8 bg-sky-500/10 rounded-lg flex items-center justify-center mr-3">
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-sky-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>
|
||
<span class="font-semibold text-slate-800 dark:text-white">Journal</span>
|
||
<span class="ml-2 px-2 py-0.5 bg-slate-100 dark:bg-slate-700 rounded-full text-xs text-slate-600 dark:text-slate-300">
|
||
{{ documentation.journals.length }}
|
||
</span>
|
||
</div>
|
||
<svg xmlns="http://www.w3.org/2000/svg" :class="['h-5 w-5 text-slate-400 transition-transform', expandedCards.journal ? 'rotate-180' : '']" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
|
||
</svg>
|
||
</button>
|
||
<div v-if="expandedCards.journal" class="px-4 pb-4 space-y-3">
|
||
<!-- Add Entry -->
|
||
<div class="flex gap-2">
|
||
<input
|
||
v-model="newJournalText"
|
||
type="text"
|
||
placeholder="Neuer Eintrag..."
|
||
class="flex-1 px-3 py-2 bg-slate-50 dark:bg-slate-700 rounded-lg text-slate-800 dark:text-white border-0"
|
||
@keyup.enter="addJournalEntry"
|
||
>
|
||
<button @click="addJournalEntry" class="px-4 py-2 bg-primary text-white rounded-lg">
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" 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>
|
||
<!-- Entries -->
|
||
<div v-if="documentation.journals.length === 0" class="text-center py-2 text-slate-500 dark:text-slate-400 text-sm">
|
||
Keine Einträge
|
||
</div>
|
||
<div v-else class="space-y-2 max-h-48 overflow-y-auto">
|
||
<div v-for="entry in documentation.journals" :key="entry.id" class="p-2 bg-slate-50 dark:bg-slate-700/50 rounded-lg">
|
||
<p class="text-sm text-slate-800 dark:text-white whitespace-pre-wrap">{{ entry.text }}</p>
|
||
<p class="text-xs text-slate-500 dark:text-slate-400 mt-1">{{ entry.createFormatted }} - {{ entry.createByName }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Cable Data Card (only if required) -->
|
||
<div v-if="tenantConfig && (tenantConfig.requireCableLength || tenantConfig.requireCableType)" class="bg-white dark:bg-slate-800 rounded-xl overflow-hidden">
|
||
<button
|
||
@click="toggleCard('cableData')"
|
||
class="w-full flex items-center justify-between p-4 text-left"
|
||
>
|
||
<div class="flex items-center">
|
||
<div class="w-8 h-8 bg-orange-500/10 rounded-lg flex items-center justify-center mr-3">
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-orange-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
|
||
</svg>
|
||
</div>
|
||
<span class="font-semibold text-slate-800 dark:text-white">Kabeldaten</span>
|
||
</div>
|
||
<svg xmlns="http://www.w3.org/2000/svg" :class="['h-5 w-5 text-slate-400 transition-transform', expandedCards.cableData ? 'rotate-180' : '']" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
|
||
</svg>
|
||
</button>
|
||
<div v-if="expandedCards.cableData" class="px-4 pb-4 space-y-3">
|
||
<div v-if="tenantConfig.requireCableLength">
|
||
<label class="text-sm text-slate-600 dark:text-slate-400 mb-1 block">Kabellänge (m)</label>
|
||
<input
|
||
v-model="cableDataForm.cableLength"
|
||
type="text"
|
||
placeholder="z.B. 20"
|
||
class="w-full px-3 py-2 bg-slate-50 dark:bg-slate-700 rounded-lg text-slate-800 dark:text-white border-0"
|
||
>
|
||
</div>
|
||
<div v-if="tenantConfig.requireCableType">
|
||
<label class="text-sm text-slate-600 dark:text-slate-400 mb-1 block">Kabeltyp</label>
|
||
<input
|
||
v-model="cableDataForm.cableType"
|
||
type="text"
|
||
placeholder="z.B. LWL 4F"
|
||
class="w-full px-3 py-2 bg-slate-50 dark:bg-slate-700 rounded-lg text-slate-800 dark:text-white border-0"
|
||
>
|
||
</div>
|
||
<button @click="saveCableData" class="w-full py-2 bg-primary text-white rounded-lg text-sm font-medium">
|
||
Speichern
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
|
||
<!-- Bottom Action Bar -->
|
||
<div class="absolute bottom-0 left-0 right-0 p-3 bg-white dark:bg-slate-800 border-t border-slate-100 dark:border-slate-700 flex gap-3">
|
||
<button
|
||
@click="openProblemSheet"
|
||
class="flex-1 py-3 bg-amber-500 text-white rounded-xl font-medium flex items-center justify-center active:scale-95 transition"
|
||
>
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
|
||
</svg>
|
||
Problem
|
||
</button>
|
||
<button
|
||
@click="handleComplete"
|
||
:disabled="!isChecklistComplete"
|
||
:class="[
|
||
'flex-1 py-3 rounded-xl font-medium flex items-center justify-center active:scale-95 transition',
|
||
isChecklistComplete
|
||
? 'bg-green-500 text-white'
|
||
: 'bg-slate-300 dark:bg-slate-600 text-slate-500 dark:text-slate-400 cursor-not-allowed'
|
||
]"
|
||
>
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" 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>
|
||
<span v-if="checklist.length > 0">
|
||
Abschließen ({{ checklistProgress.text }})
|
||
</span>
|
||
<span v-else>Abschließen</span>
|
||
</button>
|
||
</div>
|
||
</template>
|
||
|
||
<!-- BOTTOM SHEETS -->
|
||
|
||
<!-- Doc Upload Sheet -->
|
||
<teleport to="body">
|
||
<transition name="fade">
|
||
<div v-if="showDocUploadSheet" class="fixed inset-0 z-50">
|
||
<div class="absolute inset-0 bg-black/50" @click="showDocUploadSheet = false"></div>
|
||
<transition name="slide-up-sheet">
|
||
<div v-if="showDocUploadSheet" class="absolute bottom-0 left-0 right-0 bg-white dark:bg-slate-800 rounded-t-2xl shadow-xl max-h-[70vh] overflow-hidden">
|
||
<div class="flex justify-center pt-2 pb-1">
|
||
<div class="w-10 h-1 bg-slate-300 dark:bg-slate-600 rounded-full"></div>
|
||
</div>
|
||
<div class="px-4 pb-3 border-b border-slate-100 dark:border-slate-700">
|
||
<h3 class="text-lg font-semibold text-slate-800 dark:text-white text-center">Dokumentation hochladen</h3>
|
||
</div>
|
||
<div class="p-4 space-y-4">
|
||
<!-- Doc Type Selection -->
|
||
<div v-if="tenantConfig?.documentationTypes?.length">
|
||
<label class="text-sm text-slate-600 dark:text-slate-400 mb-2 block">Dokumenttyp</label>
|
||
<div class="space-y-2">
|
||
<button
|
||
v-for="type in tenantConfig.documentationTypes"
|
||
:key="type.value"
|
||
@click="uploadDocType = type.value"
|
||
:class="[
|
||
'w-full p-3 rounded-lg text-left transition',
|
||
uploadDocType === type.value
|
||
? 'bg-primary/10 border-2 border-primary text-primary'
|
||
: 'bg-slate-50 dark:bg-slate-700 text-slate-700 dark:text-slate-300'
|
||
]"
|
||
>
|
||
{{ type.text }}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<!-- Upload Buttons -->
|
||
<div class="space-y-2">
|
||
<input
|
||
ref="fileInputRef"
|
||
type="file"
|
||
accept="image/*,application/pdf"
|
||
multiple
|
||
class="hidden"
|
||
@change="handleFileSelect"
|
||
capture="environment"
|
||
>
|
||
<button
|
||
@click="triggerFileInput"
|
||
:disabled="isUploading"
|
||
class="w-full py-3 bg-primary text-white rounded-xl font-medium flex items-center justify-center disabled:opacity-50"
|
||
>
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
|
||
</svg>
|
||
{{ isUploading ? 'Wird hochgeladen...' : 'Foto aufnehmen / auswählen' }}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="h-6"></div>
|
||
</div>
|
||
</transition>
|
||
</div>
|
||
</transition>
|
||
</teleport>
|
||
|
||
<!-- Problem Sheet -->
|
||
<teleport to="body">
|
||
<transition name="fade">
|
||
<div v-if="showProblemSheet" class="fixed inset-0 z-50">
|
||
<div class="absolute inset-0 bg-black/50" @click="showProblemSheet = false"></div>
|
||
<transition name="slide-up-sheet">
|
||
<div v-if="showProblemSheet" class="absolute bottom-0 left-0 right-0 bg-white dark:bg-slate-800 rounded-t-2xl shadow-xl max-h-[80vh] overflow-hidden flex flex-col">
|
||
<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>
|
||
<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">Problem melden</h3>
|
||
</div>
|
||
<div class="p-4 space-y-4 overflow-y-auto flex-1">
|
||
<!-- Problem Type Selection -->
|
||
<div v-if="tenantConfig?.interventionTypes?.length">
|
||
<label class="text-sm text-slate-600 dark:text-slate-400 mb-2 block">Grund</label>
|
||
<div class="space-y-2">
|
||
<button
|
||
v-for="type in tenantConfig.interventionTypes"
|
||
:key="type.value"
|
||
@click="problemType = type.value"
|
||
:class="[
|
||
'w-full p-3 rounded-lg text-left transition',
|
||
problemType === type.value
|
||
? 'bg-amber-500/10 border-2 border-amber-500 text-amber-600 dark:text-amber-400'
|
||
: 'bg-slate-50 dark:bg-slate-700 text-slate-700 dark:text-slate-300'
|
||
]"
|
||
>
|
||
{{ type.text }}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<!-- Comment -->
|
||
<div>
|
||
<label class="text-sm text-slate-600 dark:text-slate-400 mb-2 block">Kommentar (optional)</label>
|
||
<textarea
|
||
v-model="problemComment"
|
||
rows="3"
|
||
placeholder="Weitere Details..."
|
||
class="w-full px-3 py-2 bg-slate-50 dark:bg-slate-700 rounded-lg text-slate-800 dark:text-white border-0"
|
||
></textarea>
|
||
</div>
|
||
<!-- Submit -->
|
||
<button
|
||
@click="submitProblem"
|
||
class="w-full py-3 bg-amber-500 text-white rounded-xl font-medium"
|
||
>
|
||
Problem melden
|
||
</button>
|
||
</div>
|
||
<div class="h-6 flex-shrink-0"></div>
|
||
</div>
|
||
</transition>
|
||
</div>
|
||
</transition>
|
||
</teleport>
|
||
|
||
<!-- Complete Sheet (only shown when complete - for confirmation) -->
|
||
<teleport to="body">
|
||
<transition name="fade">
|
||
<div v-if="showCompleteSheet" class="fixed inset-0 z-50">
|
||
<div class="absolute inset-0 bg-black/50" @click="showCompleteSheet = false"></div>
|
||
<transition name="slide-up-sheet">
|
||
<div v-if="showCompleteSheet" class="absolute bottom-0 left-0 right-0 bg-white dark:bg-slate-800 rounded-t-2xl shadow-xl max-h-[70vh] overflow-hidden">
|
||
<div class="flex justify-center pt-2 pb-1">
|
||
<div class="w-10 h-1 bg-slate-300 dark:bg-slate-600 rounded-full"></div>
|
||
</div>
|
||
<div class="px-4 pb-3 border-b border-slate-100 dark:border-slate-700">
|
||
<h3 class="text-lg font-semibold text-slate-800 dark:text-white text-center">Auftrag abschließen</h3>
|
||
</div>
|
||
<div class="p-4 space-y-4">
|
||
<!-- Success message -->
|
||
<div class="p-4 bg-green-50 dark:bg-green-900/20 rounded-xl">
|
||
<div class="flex items-center justify-center mb-3">
|
||
<div class="w-12 h-12 bg-green-100 dark:bg-green-900/50 rounded-full flex items-center justify-center">
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-green-500" 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>
|
||
</div>
|
||
</div>
|
||
<p class="text-center text-green-700 dark:text-green-400 font-medium">Alle Anforderungen erfüllt!</p>
|
||
<p class="text-center text-green-600 dark:text-green-500 text-sm mt-1">Der Auftrag kann abgeschlossen werden.</p>
|
||
</div>
|
||
<!-- Buttons -->
|
||
<div class="flex gap-3">
|
||
<button
|
||
@click="showCompleteSheet = false"
|
||
class="flex-1 py-3 bg-slate-100 dark:bg-slate-700 text-slate-700 dark:text-slate-300 rounded-xl font-medium"
|
||
>
|
||
Abbrechen
|
||
</button>
|
||
<button
|
||
@click="submitComplete"
|
||
class="flex-1 py-3 bg-green-500 text-white rounded-xl font-medium flex items-center justify-center gap-2"
|
||
>
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" 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>
|
||
Abschließen
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="h-6"></div>
|
||
</div>
|
||
</transition>
|
||
</div>
|
||
</transition>
|
||
</teleport>
|
||
</div>
|
||
`
|
||
};
|