8dc6e65e28
Root causes fixed:
1. branchAngle routing only matched 0° — now uses isExtendAngle()
for all extend angles (0/180/45/315), vertical (90/270) = fork
2. handleForkBranch did nothing at dim 1 — now opens thema form
3. After form submit, Inertia reloaded entire page losing canvas
dimension state — now uses axios + refreshMapData() via API
4. Custom metro node form used dead Inertia useForm refs
Changes:
- All creation flows now use axios POST + refreshMapData() which
fetches /api/map/strategy or /api/map/project/{id} without page
reload, preserving the canvas dimension and zoom state
- New thema creation modal (for ↑↓ fork at dim 1)
- Track creation modal updated to use axios (for ↑↓ fork in dim 2)
- Metro node creation modal updated to use axios
- CommitmentForm @close now triggers refreshMapData()
- CommitmentForm eigenaar_id now has required validation
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
620 lines
19 KiB
Vue
620 lines
19 KiB
Vue
<script setup>
|
|
import { ref, computed } from 'vue'
|
|
import { usePage, router, useForm } from '@inertiajs/vue3'
|
|
import axios from 'axios'
|
|
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
|
|
}
|
|
|
|
// --- Refresh map data without full page reload ---
|
|
const refreshMapData = async () => {
|
|
try {
|
|
const url = currentProjectId.value
|
|
? `/api/map/project/${currentProjectId.value}`
|
|
: '/api/map/strategy'
|
|
const { data } = await axios.get(url)
|
|
// Update the reactive props — Inertia page props are mutable
|
|
Object.assign(props.mapData, data)
|
|
} catch (e) {
|
|
// Fallback: full page reload
|
|
router.reload()
|
|
}
|
|
}
|
|
|
|
// --- Branch handle node creation ---
|
|
const isExtendAngle = (angle) => [0, 180, 45, 315].includes(angle)
|
|
|
|
const handleCreateNode = (event) => {
|
|
if (isExtendAngle(event.branchAngle)) {
|
|
handleExtendLine(event)
|
|
} else {
|
|
// Vertical (90°, 270°) = new track
|
|
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') {
|
|
return // Lifecycle phases advance via transition, not manual creation
|
|
}
|
|
if (lineId.startsWith('commitments-') || lineId === 'commitments') {
|
|
pendingCreateEvent.value = event
|
|
showCommitmentForm.value = true
|
|
return
|
|
}
|
|
if (lineId.startsWith('documents-') || lineId === 'documents') {
|
|
pendingCreateEvent.value = event
|
|
showMetroNodeForm.value = true
|
|
return
|
|
}
|
|
// Custom line
|
|
pendingCreateEvent.value = event
|
|
showMetroNodeForm.value = true
|
|
return
|
|
}
|
|
|
|
// In dim 1 (strategy level): extend = add project
|
|
editingProject.value = null
|
|
showProjectForm.value = true
|
|
}
|
|
|
|
const handleForkBranch = (event) => {
|
|
if (event.depth > 1 && event.parentEntityType === 'project' && event.parentEntityId) {
|
|
// Inside a project → create new metro line
|
|
pendingCreateEvent.value = event
|
|
showTrackForm.value = true
|
|
} else {
|
|
// At dim 1 → create new thema (= new metro line at root)
|
|
pendingCreateEvent.value = event
|
|
showThemaForm.value = true
|
|
}
|
|
}
|
|
|
|
const pendingCreateEvent = ref(null)
|
|
|
|
// --- Track creation form (for fork branches in dim 2) ---
|
|
const showTrackForm = ref(false)
|
|
const trackFormData = ref({ naam: '' })
|
|
const trackFormProcessing = ref(false)
|
|
|
|
const submitTrackForm = async () => {
|
|
trackFormProcessing.value = true
|
|
try {
|
|
await axios.post('/metro-lines', {
|
|
project_id: currentProjectId.value,
|
|
naam: trackFormData.value.naam,
|
|
})
|
|
showTrackForm.value = false
|
|
trackFormData.value.naam = ''
|
|
pendingCreateEvent.value = null
|
|
await refreshMapData()
|
|
} catch (e) {
|
|
console.error('Track creation failed:', e.response?.data || e.message)
|
|
} finally {
|
|
trackFormProcessing.value = false
|
|
}
|
|
}
|
|
|
|
// --- Thema creation form (for fork branches at dim 1) ---
|
|
const showThemaForm = ref(false)
|
|
const themaFormData = ref({ naam: '', beschrijving: '' })
|
|
const themaFormProcessing = ref(false)
|
|
|
|
const submitThemaForm = async () => {
|
|
themaFormProcessing.value = true
|
|
try {
|
|
await axios.post('/themas', {
|
|
naam: themaFormData.value.naam,
|
|
beschrijving: themaFormData.value.beschrijving,
|
|
})
|
|
showThemaForm.value = false
|
|
themaFormData.value = { naam: '', beschrijving: '' }
|
|
pendingCreateEvent.value = null
|
|
await refreshMapData()
|
|
} catch (e) {
|
|
console.error('Thema creation failed:', e.response?.data || e.message)
|
|
} finally {
|
|
themaFormProcessing.value = false
|
|
}
|
|
}
|
|
|
|
// --- Metro node / generic item creation form ---
|
|
const showMetroNodeForm = ref(false)
|
|
const nodeFormData = ref({ naam: '', beschrijving: '' })
|
|
const nodeFormProcessing = ref(false)
|
|
|
|
const submitMetroNodeForm = async () => {
|
|
const event = pendingCreateEvent.value
|
|
if (!event) return
|
|
|
|
nodeFormProcessing.value = true
|
|
try {
|
|
const lineId = event.lineId ?? ''
|
|
const match = lineId.match(/\d+$/)
|
|
|
|
await axios.post('/metro-nodes', {
|
|
metro_line_id: match ? parseInt(match[0]) : null,
|
|
naam: nodeFormData.value.naam,
|
|
beschrijving: nodeFormData.value.beschrijving,
|
|
x: event.x,
|
|
y: event.y,
|
|
})
|
|
showMetroNodeForm.value = false
|
|
nodeFormData.value = { naam: '', beschrijving: '' }
|
|
pendingCreateEvent.value = null
|
|
await refreshMapData()
|
|
} catch (e) {
|
|
console.error('Node creation failed:', e.response?.data || e.message)
|
|
} finally {
|
|
nodeFormProcessing.value = false
|
|
}
|
|
}
|
|
|
|
// --- FAB handlers ---
|
|
const handleCreateTheme = () => {
|
|
showThemaForm.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; pendingCreateEvent = null; refreshMapData()"
|
|
/>
|
|
|
|
<!-- Track creation modal (fork in dim 2) -->
|
|
<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="trackFormData.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="trackFormProcessing">
|
|
{{ trackFormProcessing ? 'Bezig...' : 'Aanmaken' }}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</Transition>
|
|
</Teleport>
|
|
|
|
<!-- Thema creation modal (fork at dim 1) -->
|
|
<Teleport to="body">
|
|
<Transition name="modal-fade">
|
|
<div v-if="showThemaForm" class="modal-backdrop" @click="showThemaForm = false">
|
|
<div class="modal-content" @click.stop>
|
|
<div class="modal-header">NIEUW THEMA</div>
|
|
<form @submit.prevent="submitThemaForm">
|
|
<div class="form-group">
|
|
<label class="form-label">Naam</label>
|
|
<input v-model="themaFormData.naam" type="text" class="form-input"
|
|
placeholder="Naam van het thema..." required autofocus />
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Beschrijving</label>
|
|
<textarea v-model="themaFormData.beschrijving" class="form-input form-textarea"
|
|
placeholder="Omschrijving..." rows="3"></textarea>
|
|
</div>
|
|
<div class="form-actions">
|
|
<button type="button" class="btn-cancel" @click="showThemaForm = false">Annuleren</button>
|
|
<button type="submit" class="btn-submit" :disabled="themaFormProcessing">
|
|
{{ themaFormProcessing ? 'Bezig...' : 'Aanmaken' }}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</Transition>
|
|
</Teleport>
|
|
|
|
<!-- Metro node creation modal (extend on custom/document lines) -->
|
|
<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="nodeFormData.naam" type="text" class="form-input"
|
|
placeholder="Naam..." required autofocus />
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Beschrijving</label>
|
|
<textarea v-model="nodeFormData.beschrijving" class="form-input form-textarea"
|
|
placeholder="Optioneel..." 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="nodeFormProcessing">
|
|
{{ nodeFormProcessing ? '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>
|