f4ec49254a
FIXES (from comprehensive audit): - NodePreview: complete rewrite — 380px left panel with document summaries, commitment list, phase track visualization, scrollable. Fixed children count bug (was showing [object Object]). Slides in from left (not right) to not overlap branch handles. - CommitmentForm: added required validation on eigenaar_id field - MetroMap: wired custom metro node creation with form + POST /metro-nodes - MetroMap: removed dead handleCliCommand console.log - MetroMap: added metro node creation modal (naam + beschrijving) NEW — AI Service integration: - ai-service/main.py: real Anthropic API integration via httpx - Reads ANTHROPIC_API_KEY from env, uses claude-haiku-4-5-20251001 - /api/chat fetches project context from PostgreSQL (docs, commitments) - /api/summarize sends content to Claude for summarization - /api/search does basic text search on documents + kennis_artikelen - AiController.php: Laravel proxy for /api/ai/chat → ai-service - CliBar.vue: complete rewrite with async API calls, processing state, error handling, conversation history, auto-scroll - Receives projectId prop for context-scoped AI queries - Shows "denken..." animation while waiting for response - docker-compose.yml: passes ANTHROPIC_API_KEY to ai-service container - config/services.php: ai service URL configuration To activate AI: set ANTHROPIC_API_KEY in .env and rebuild ai-service. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
567 lines
16 KiB
Vue
567 lines
16 KiB
Vue
<script setup>
|
|
import { ref, computed } from 'vue'
|
|
import { usePage, router, useForm } from '@inertiajs/vue3'
|
|
import MetroCanvas from '@/Components/MetroMap/MetroCanvas.vue'
|
|
import Breadcrumb from '@/Components/MetroMap/Breadcrumb.vue'
|
|
import NodePreview from '@/Components/MetroMap/NodePreview.vue'
|
|
import FloatingActions from '@/Components/MetroMap/FloatingActions.vue'
|
|
import ProjectForm from '@/Components/Forms/ProjectForm.vue'
|
|
import CommitmentForm from '@/Components/Forms/CommitmentForm.vue'
|
|
import CliBar from '@/Components/Cli/CliBar.vue'
|
|
|
|
const page = usePage()
|
|
|
|
const props = defineProps({
|
|
mapData: { type: Object, default: () => ({ lines: [], nodes: [], connections: [], level: 1 }) },
|
|
users: { type: Array, default: () => [] },
|
|
speerpunten: { type: Array, default: () => [] },
|
|
})
|
|
|
|
// Canvas ref
|
|
const canvasRef = ref(null)
|
|
|
|
// Navigation state
|
|
const selectedNode = ref(null)
|
|
const showPreview = ref(false)
|
|
|
|
// Dimension tracking (synced from canvas zoom transitions)
|
|
const canvasDepth = ref(1)
|
|
const canvasDimension = ref(null)
|
|
|
|
// Reactive breadcrumb
|
|
const breadcrumbPath = computed(() => {
|
|
const pageLevel = props.mapData.level ?? 1
|
|
const project = props.mapData.project ?? null
|
|
const path = [{ label: 'Strategie', level: 1, data: null }]
|
|
|
|
if (pageLevel === 2 && project) {
|
|
path.push({ label: project.naam ?? project.name ?? 'Project', level: 2, data: project })
|
|
} else if (canvasDepth.value > 1 && canvasDimension.value) {
|
|
path.push({
|
|
label: canvasDimension.value.parentName ?? 'Detail',
|
|
level: 2,
|
|
data: canvasDimension.value,
|
|
})
|
|
}
|
|
return path
|
|
})
|
|
|
|
// Dimension-aware project ID
|
|
const currentProjectId = computed(() => {
|
|
if (props.mapData.project?.id) return props.mapData.project.id
|
|
if (canvasDimension.value?.parentEntityType === 'project') {
|
|
return canvasDimension.value.parentEntityId
|
|
}
|
|
return null
|
|
})
|
|
|
|
const currentParentEntityType = computed(() => {
|
|
if (props.mapData.level === 2) return 'project'
|
|
return canvasDimension.value?.parentEntityType ?? null
|
|
})
|
|
|
|
// --- Node click / hover ---
|
|
const handleNodeClick = (node) => {
|
|
selectedNode.value = node
|
|
showPreview.value = true
|
|
}
|
|
|
|
const handleZoomIn = (node) => {
|
|
showPreview.value = false
|
|
if (node.entityType === 'project') {
|
|
router.visit(`/map/project/${node.entityId}`)
|
|
}
|
|
}
|
|
|
|
const handleBreadcrumbNavigate = (item, index) => {
|
|
showPreview.value = false
|
|
selectedNode.value = null
|
|
if (index === 0) {
|
|
router.visit('/map')
|
|
}
|
|
}
|
|
|
|
const handleDimensionChange = (event) => {
|
|
canvasDepth.value = event.depth
|
|
canvasDimension.value = event.dimension ?? null
|
|
showPreview.value = false
|
|
selectedNode.value = null
|
|
}
|
|
|
|
// --- Branch handle node creation ---
|
|
const handleCreateNode = (event) => {
|
|
if (event.branchAngle === 0) {
|
|
// Extend existing line — determine entity type from lineId
|
|
handleExtendLine(event)
|
|
} else {
|
|
// Fork — create a new track + first node
|
|
handleForkBranch(event)
|
|
}
|
|
}
|
|
|
|
const handleExtendLine = (event) => {
|
|
const lineId = event.lineId ?? ''
|
|
|
|
// In dim 2 (project level): determine what type of entity to create
|
|
if (event.depth > 1 && event.parentEntityType === 'project') {
|
|
if (lineId.startsWith('lifecycle-') || lineId === 'lifecycle') {
|
|
// Can't manually add lifecycle phases — they advance via transition
|
|
return
|
|
}
|
|
if (lineId.startsWith('commitments-') || lineId === 'commitments') {
|
|
pendingCreatePosition.value = { x: event.x, y: event.y }
|
|
showCommitmentForm.value = true
|
|
return
|
|
}
|
|
if (lineId.startsWith('documents-') || lineId === 'documents') {
|
|
// Future: document upload
|
|
console.log('Document creation at', event.x, event.y)
|
|
return
|
|
}
|
|
// Custom line — create a metro node
|
|
createMetroNode(event)
|
|
return
|
|
}
|
|
|
|
// In dim 1 (strategy level): extend = add project to theme
|
|
editingProject.value = null
|
|
showProjectForm.value = true
|
|
}
|
|
|
|
const handleForkBranch = (event) => {
|
|
// Fork creates a new track (metro line), then the first node on it
|
|
if (event.parentEntityType === 'project' && event.parentEntityId) {
|
|
pendingForkEvent.value = event
|
|
showTrackForm.value = true
|
|
}
|
|
}
|
|
|
|
const pendingCreatePosition = ref(null)
|
|
const pendingForkEvent = ref(null)
|
|
|
|
// --- Track creation form (for fork branches) ---
|
|
const showTrackForm = ref(false)
|
|
const trackForm = useForm({
|
|
project_id: null,
|
|
naam: '',
|
|
})
|
|
|
|
const submitTrackForm = () => {
|
|
trackForm.project_id = currentProjectId.value
|
|
trackForm.post('/metro-lines', {
|
|
onSuccess: () => {
|
|
showTrackForm.value = false
|
|
trackForm.reset()
|
|
pendingForkEvent.value = null
|
|
},
|
|
})
|
|
}
|
|
|
|
// --- Metro node creation form (for custom line extend) ---
|
|
const showMetroNodeForm = ref(false)
|
|
const pendingMetroNodeEvent = ref(null)
|
|
const metroNodeForm = useForm({
|
|
metro_line_id: '',
|
|
naam: '',
|
|
beschrijving: '',
|
|
x: 0,
|
|
y: 0,
|
|
})
|
|
|
|
const createMetroNode = (event) => {
|
|
pendingMetroNodeEvent.value = event
|
|
// Extract metro_line_id from lineId (format: "custom-{id}" or similar)
|
|
metroNodeForm.x = event.x
|
|
metroNodeForm.y = event.y
|
|
metroNodeForm.naam = ''
|
|
metroNodeForm.beschrijving = ''
|
|
showMetroNodeForm.value = true
|
|
}
|
|
|
|
const submitMetroNodeForm = () => {
|
|
const event = pendingMetroNodeEvent.value
|
|
// The lineId from the canvas might be something like "custom-5" — extract the DB id
|
|
// For now, try to find the metro_line by matching
|
|
const lineId = event?.lineId ?? ''
|
|
const match = lineId.match(/\d+$/)
|
|
metroNodeForm.metro_line_id = match ? match[0] : ''
|
|
|
|
metroNodeForm.post('/metro-nodes', {
|
|
onSuccess: () => {
|
|
showMetroNodeForm.value = false
|
|
metroNodeForm.reset()
|
|
pendingMetroNodeEvent.value = null
|
|
},
|
|
})
|
|
}
|
|
|
|
// --- FAB handlers ---
|
|
const handleCreateTheme = () => {
|
|
// Future: thema creation form
|
|
editingProject.value = null
|
|
showProjectForm.value = true
|
|
}
|
|
|
|
const handleCreateTrack = () => {
|
|
showTrackForm.value = true
|
|
}
|
|
|
|
const handleFabItemHover = (item) => {
|
|
// Highlight the relevant line on canvas
|
|
// (only meaningful in dim 2 where lines are visible)
|
|
if (item.lineId) {
|
|
canvasRef.value?.setHighlightedLine(item.lineId)
|
|
}
|
|
}
|
|
|
|
const handleFabItemLeave = () => {
|
|
canvasRef.value?.setHighlightedLine(null)
|
|
}
|
|
|
|
const logout = () => {
|
|
router.post('/logout')
|
|
}
|
|
|
|
const user = computed(() => page.props.auth?.user)
|
|
const hasNodes = computed(() => props.mapData.nodes && props.mapData.nodes.length > 0)
|
|
|
|
// Modal state
|
|
const showProjectForm = ref(false)
|
|
const showCommitmentForm = ref(false)
|
|
const editingProject = ref(null)
|
|
</script>
|
|
|
|
<template>
|
|
<div class="metro-map-page">
|
|
<!-- Top bar -->
|
|
<div class="top-bar">
|
|
<Breadcrumb
|
|
:path="breadcrumbPath"
|
|
@navigate="handleBreadcrumbNavigate"
|
|
/>
|
|
<div class="user-controls">
|
|
<span v-if="user" class="user-name">{{ user.name }}</span>
|
|
<button @click="logout" class="logout-btn">[LOGOUT]</button>
|
|
</div>
|
|
</div>
|
|
|
|
<template v-if="hasNodes">
|
|
<MetroCanvas
|
|
ref="canvasRef"
|
|
:nodes="props.mapData.nodes"
|
|
:lines="props.mapData.lines"
|
|
:connections="props.mapData.connections"
|
|
:current-level="props.mapData.level ?? 1"
|
|
@node-click="handleNodeClick"
|
|
@node-hover="() => {}"
|
|
@node-leave="() => {}"
|
|
@dimension-change="handleDimensionChange"
|
|
@create-node="handleCreateNode"
|
|
/>
|
|
|
|
<NodePreview
|
|
:node="selectedNode"
|
|
:visible="showPreview"
|
|
@close="showPreview = false"
|
|
@zoom-in="handleZoomIn"
|
|
/>
|
|
</template>
|
|
|
|
<div v-else class="empty-state">
|
|
<span class="empty-message">Nog geen projecten. Gebruik het + icoon om een thema toe te voegen.</span>
|
|
</div>
|
|
|
|
<FloatingActions
|
|
:depth="canvasDepth"
|
|
:parent-entity-type="currentParentEntityType"
|
|
:parent-project-id="currentProjectId"
|
|
@create-theme="handleCreateTheme"
|
|
@create-track="handleCreateTrack"
|
|
@item-hover="handleFabItemHover"
|
|
@item-leave="handleFabItemLeave"
|
|
/>
|
|
|
|
<ProjectForm
|
|
:show="showProjectForm"
|
|
:project="editingProject"
|
|
:speerpunten="speerpunten"
|
|
@close="showProjectForm = false"
|
|
/>
|
|
|
|
<CommitmentForm
|
|
v-if="currentProjectId"
|
|
:show="showCommitmentForm"
|
|
:project-id="currentProjectId"
|
|
:users="users"
|
|
@close="showCommitmentForm = false; pendingCreatePosition = null"
|
|
/>
|
|
|
|
<!-- Track creation modal (for fork branches and FAB) -->
|
|
<Teleport to="body">
|
|
<Transition name="modal-fade">
|
|
<div v-if="showTrackForm" class="modal-backdrop" @click="showTrackForm = false">
|
|
<div class="modal-content" @click.stop>
|
|
<div class="modal-header">NIEUWE LIJN</div>
|
|
<form @submit.prevent="submitTrackForm">
|
|
<div class="form-group">
|
|
<label class="form-label">Naam</label>
|
|
<input
|
|
v-model="trackForm.naam"
|
|
type="text"
|
|
class="form-input"
|
|
placeholder="bijv. Risico's, Acties..."
|
|
required
|
|
autofocus
|
|
/>
|
|
</div>
|
|
<div class="form-actions">
|
|
<button type="button" class="btn-cancel" @click="showTrackForm = false">Annuleren</button>
|
|
<button type="submit" class="btn-submit" :disabled="trackForm.processing">
|
|
{{ trackForm.processing ? 'Bezig...' : 'Aanmaken' }}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</Transition>
|
|
</Teleport>
|
|
|
|
<!-- Metro node creation modal (for custom line extend) -->
|
|
<Teleport to="body">
|
|
<Transition name="modal-fade">
|
|
<div v-if="showMetroNodeForm" class="modal-backdrop" @click="showMetroNodeForm = false">
|
|
<div class="modal-content" @click.stop>
|
|
<div class="modal-header">NIEUW PUNT</div>
|
|
<form @submit.prevent="submitMetroNodeForm">
|
|
<div class="form-group">
|
|
<label class="form-label">Naam</label>
|
|
<input
|
|
v-model="metroNodeForm.naam"
|
|
type="text"
|
|
class="form-input"
|
|
placeholder="Naam van het punt..."
|
|
required
|
|
autofocus
|
|
/>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Beschrijving</label>
|
|
<textarea
|
|
v-model="metroNodeForm.beschrijving"
|
|
class="form-input form-textarea"
|
|
placeholder="Optionele beschrijving..."
|
|
rows="3"
|
|
></textarea>
|
|
</div>
|
|
<div class="form-actions">
|
|
<button type="button" class="btn-cancel" @click="showMetroNodeForm = false">Annuleren</button>
|
|
<button type="submit" class="btn-submit" :disabled="metroNodeForm.processing">
|
|
{{ metroNodeForm.processing ? 'Bezig...' : 'Aanmaken' }}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</Transition>
|
|
</Teleport>
|
|
|
|
<CliBar :project-id="currentProjectId" />
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.metro-map-page {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
position: relative;
|
|
background: #1a1a2e;
|
|
}
|
|
|
|
.top-bar {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 50;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 8px 16px;
|
|
background: rgba(26, 26, 46, 0.85);
|
|
border-bottom: 1px solid rgba(0, 210, 255, 0.15);
|
|
backdrop-filter: blur(8px);
|
|
}
|
|
|
|
.user-controls {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.user-name {
|
|
font-family: 'VT323', monospace;
|
|
font-size: 16px;
|
|
color: #8892b0;
|
|
}
|
|
|
|
.logout-btn {
|
|
font-family: 'VT323', monospace;
|
|
font-size: 14px;
|
|
color: #e94560;
|
|
background: none;
|
|
border: 1px solid rgba(233, 69, 96, 0.3);
|
|
padding: 4px 10px;
|
|
border-radius: 3px;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.logout-btn:hover {
|
|
background: rgba(233, 69, 96, 0.15);
|
|
border-color: #e94560;
|
|
box-shadow: 0 0 10px rgba(233, 69, 96, 0.2);
|
|
}
|
|
|
|
.empty-state {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100%;
|
|
padding-top: 48px;
|
|
}
|
|
|
|
.empty-message {
|
|
font-family: 'VT323', monospace;
|
|
font-size: 20px;
|
|
color: #8892b0;
|
|
text-align: center;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
/* Track creation modal */
|
|
.modal-backdrop {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 300;
|
|
background: rgba(0, 0, 0, 0.6);
|
|
backdrop-filter: blur(4px);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.modal-content {
|
|
background: #0d1b2a;
|
|
border: 1px solid #00d2ff;
|
|
border-radius: 6px;
|
|
padding: 24px;
|
|
min-width: 340px;
|
|
box-shadow: 0 0 30px rgba(0, 210, 255, 0.2);
|
|
}
|
|
|
|
.modal-header {
|
|
font-family: 'Press Start 2P', monospace;
|
|
font-size: 12px;
|
|
color: #00d2ff;
|
|
margin-bottom: 20px;
|
|
letter-spacing: 0.1em;
|
|
}
|
|
|
|
.form-group {
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.form-label {
|
|
display: block;
|
|
font-family: 'VT323', monospace;
|
|
font-size: 14px;
|
|
color: #8892b0;
|
|
margin-bottom: 6px;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.form-input {
|
|
width: 100%;
|
|
padding: 8px 12px;
|
|
background: #16213e;
|
|
border: 1px solid rgba(0, 210, 255, 0.3);
|
|
border-radius: 3px;
|
|
color: #e8e8e8;
|
|
font-family: 'IBM Plex Mono', monospace;
|
|
font-size: 14px;
|
|
outline: none;
|
|
transition: border-color 0.2s;
|
|
}
|
|
|
|
.form-input:focus {
|
|
border-color: #00d2ff;
|
|
box-shadow: 0 0 8px rgba(0, 210, 255, 0.2);
|
|
}
|
|
|
|
.form-textarea {
|
|
resize: vertical;
|
|
min-height: 60px;
|
|
}
|
|
|
|
.form-actions {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 10px;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.btn-cancel {
|
|
font-family: 'VT323', monospace;
|
|
font-size: 15px;
|
|
color: #8892b0;
|
|
background: none;
|
|
border: 1px solid rgba(136, 146, 176, 0.3);
|
|
padding: 6px 16px;
|
|
border-radius: 3px;
|
|
cursor: pointer;
|
|
transition: all 0.15s;
|
|
}
|
|
|
|
.btn-cancel:hover {
|
|
color: #e8e8e8;
|
|
border-color: #8892b0;
|
|
}
|
|
|
|
.btn-submit {
|
|
font-family: 'VT323', monospace;
|
|
font-size: 15px;
|
|
color: #00d2ff;
|
|
background: rgba(0, 210, 255, 0.1);
|
|
border: 1px solid #00d2ff;
|
|
padding: 6px 16px;
|
|
border-radius: 3px;
|
|
cursor: pointer;
|
|
transition: all 0.15s;
|
|
}
|
|
|
|
.btn-submit:hover {
|
|
background: rgba(0, 210, 255, 0.2);
|
|
box-shadow: 0 0 12px rgba(0, 210, 255, 0.3);
|
|
}
|
|
|
|
.btn-submit:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* Modal transitions */
|
|
.modal-fade-enter-active {
|
|
transition: opacity 0.15s ease;
|
|
}
|
|
|
|
.modal-fade-leave-active {
|
|
transition: opacity 0.1s ease;
|
|
}
|
|
|
|
.modal-fade-enter-from,
|
|
.modal-fade-leave-to {
|
|
opacity: 0;
|
|
}
|
|
</style>
|