Sprint 2: Live data, CRUD modals, commitments, document upload
Frontend: - Connect MetroMap to live Inertia props (replace hardcoded demo data) - Drill-down navigation via router.visit for project-level maps - Reactive breadcrumb based on map level - Empty state when no projects exist - Reusable Modal component with retro styling - ProjectForm and CommitmentForm with Inertia useForm - FormInput reusable component (text, date, textarea, select) - FloatingActions FAB button for creating projects/themes Backend: - CommitmentService + CommitmentController (CRUD, mark complete, overdue) - DocumentService + DocumentController (upload, download, delete) - MapController now passes users and speerpunten to frontend - 7 new routes (4 commitment, 3 document) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
znetsixe
@@ -4,51 +4,33 @@ import { usePage, router } 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: () => [] },
|
||||
})
|
||||
|
||||
// Navigation state
|
||||
const currentLevel = ref(1)
|
||||
const breadcrumbPath = ref([{ label: 'Strategie', level: 1, data: null }])
|
||||
const selectedNode = ref(null)
|
||||
const showPreview = ref(false)
|
||||
|
||||
// Demo data for Level 1: Strategy map
|
||||
// Each theme is a metro line, projects are stations
|
||||
const demoLines = ref([
|
||||
{ id: 'water-quality', name: 'Waterkwaliteit', color: '#00d2ff' },
|
||||
{ id: 'smart-infra', name: 'Slimme Infrastructuur', color: '#e94560' },
|
||||
{ id: 'data-driven', name: 'Data-gedreven Beheer', color: '#00ff88' },
|
||||
{ id: 'sustainability', name: 'Duurzaamheid', color: '#7b68ee' },
|
||||
])
|
||||
|
||||
const demoNodes = ref([
|
||||
// Water Quality line — y spacing of 160px between lines for label clearance
|
||||
{ id: 'wq1', name: 'Smart Sensors', lineId: 'water-quality', x: -200, y: -240, order: 1, status: 'actief', description: 'Slimme sensoren voor waterkwaliteitsmonitoring', owner: 'Jan Visser', children: 5, badge: 'Experiment' },
|
||||
{ id: 'wq2', name: 'Biomonitoring', lineId: 'water-quality', x: 50, y: -240, order: 2, status: 'concept', description: 'Biologische monitoring methoden', owner: 'Sara Jansen', children: 3, badge: 'Concept' },
|
||||
{ id: 'wq3', name: 'Voorspelmodel', lineId: 'water-quality', x: 300, y: -240, order: 3, status: 'signaal', description: 'Predictief model waterkwaliteit', badge: 'Signaal' },
|
||||
|
||||
// Smart Infrastructure line
|
||||
{ id: 'si1', name: 'Edge Computing', lineId: 'smart-infra', x: -200, y: -80, order: 1, status: 'actief', description: 'Edge-layer evolutie voor OT-omgevingen', owner: 'Rene de Ren', children: 8, badge: 'Pilot' },
|
||||
{ id: 'si2', name: 'Digital Twin', lineId: 'smart-infra', x: 50, y: -80, order: 2, status: 'verkenning', description: 'Digitale tweeling van zuiveringsinstallaties', children: 2, badge: 'Verkenning' },
|
||||
{ id: 'si3', name: 'Predictive Maint.', lineId: 'smart-infra', x: 300, y: -80, order: 3, status: 'concept', description: 'Voorspellend onderhoud op basis van sensordata', badge: 'Concept' },
|
||||
|
||||
// Data-driven line
|
||||
{ id: 'dd1', name: 'Data Platform', lineId: 'data-driven', x: -200, y: 80, order: 1, status: 'afgerond', description: 'Centraal dataplatform voor operationele data', owner: 'Lisa de Boer', badge: 'Afgerond' },
|
||||
{ id: 'dd2', name: 'ML Pipeline', lineId: 'data-driven', x: 50, y: 80, order: 2, status: 'actief', description: 'Machine learning pipeline voor anomalie-detectie', owner: 'Tom Bakker', children: 4, badge: 'Experiment' },
|
||||
{ id: 'dd3', name: 'Dashboard Suite', lineId: 'data-driven', x: 300, y: 80, order: 3, status: 'overdracht_bouwen', description: 'Operationele dashboards voor beheerders', badge: 'Overdracht' },
|
||||
|
||||
// Sustainability line
|
||||
{ id: 'su1', name: 'Energietransitie', lineId: 'sustainability', x: -200, y: 240, order: 1, status: 'pilot', description: 'Energieneutraal zuiveren', owner: 'Mark de Vries', children: 6, badge: 'Pilot' },
|
||||
{ id: 'su2', name: 'Circulair Water', lineId: 'sustainability', x: 50, y: 240, order: 2, status: 'verkenning', description: 'Circulaire waterbehandeling', badge: 'Verkenning' },
|
||||
])
|
||||
|
||||
const demoConnections = ref([
|
||||
{ from: 'wq1', to: 'dd2' }, // Smart sensors feeds ML Pipeline
|
||||
{ from: 'si1', to: 'dd1' }, // Edge computing depends on data platform
|
||||
{ from: 'dd2', to: 'si3' }, // ML pipeline enables predictive maintenance
|
||||
])
|
||||
// Reactive breadcrumb based on mapData level and project
|
||||
const breadcrumbPath = computed(() => {
|
||||
const level = props.mapData.level ?? 1
|
||||
const project = props.mapData.project ?? null
|
||||
const path = [{ label: 'Strategie', level: 1, data: null }]
|
||||
if (level === 2 && project) {
|
||||
path.push({ label: project.name ?? project, level: 2, data: project })
|
||||
}
|
||||
return path
|
||||
})
|
||||
|
||||
// Handlers
|
||||
const handleNodeClick = (node) => {
|
||||
@@ -66,20 +48,17 @@ const handleNodeLeave = () => {
|
||||
|
||||
const handleZoomIn = (node) => {
|
||||
showPreview.value = false
|
||||
currentLevel.value++
|
||||
breadcrumbPath.value.push({
|
||||
label: node.name,
|
||||
level: currentLevel.value,
|
||||
data: node,
|
||||
})
|
||||
// In real app: load child nodes for this project
|
||||
if (node.entityType === 'project') {
|
||||
router.visit(`/map/project/${node.entityId}`)
|
||||
}
|
||||
}
|
||||
|
||||
const handleBreadcrumbNavigate = (item, index) => {
|
||||
breadcrumbPath.value = breadcrumbPath.value.slice(0, index + 1)
|
||||
currentLevel.value = item.level
|
||||
showPreview.value = false
|
||||
selectedNode.value = null
|
||||
if (index === 0) {
|
||||
router.visit('/map')
|
||||
}
|
||||
}
|
||||
|
||||
const handleCliCommand = (command) => {
|
||||
@@ -92,6 +71,25 @@ const 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)
|
||||
|
||||
const handleCreateProject = () => {
|
||||
editingProject.value = null
|
||||
showProjectForm.value = true
|
||||
}
|
||||
|
||||
const handleCreateCommitment = () => {
|
||||
showCommitmentForm.value = true
|
||||
}
|
||||
|
||||
// Get current project ID when at level 2
|
||||
const currentProjectId = computed(() => props.mapData.project?.id ?? null)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -108,21 +106,47 @@ const user = computed(() => page.props.auth?.user)
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<MetroCanvas
|
||||
:nodes="demoNodes"
|
||||
:lines="demoLines"
|
||||
:connections="demoConnections"
|
||||
:current-level="currentLevel"
|
||||
@node-click="handleNodeClick"
|
||||
@node-hover="handleNodeHover"
|
||||
@node-leave="handleNodeLeave"
|
||||
<template v-if="hasNodes">
|
||||
<MetroCanvas
|
||||
:nodes="props.mapData.nodes"
|
||||
:lines="props.mapData.lines"
|
||||
:connections="props.mapData.connections"
|
||||
:current-level="props.mapData.level ?? 1"
|
||||
@node-click="handleNodeClick"
|
||||
@node-hover="handleNodeHover"
|
||||
@node-leave="handleNodeLeave"
|
||||
/>
|
||||
|
||||
<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
|
||||
@create-project="handleCreateProject"
|
||||
@create-theme="handleCreateProject"
|
||||
/>
|
||||
|
||||
<NodePreview
|
||||
:node="selectedNode"
|
||||
:visible="showPreview"
|
||||
@close="showPreview = false"
|
||||
@zoom-in="handleZoomIn"
|
||||
<ProjectForm
|
||||
:show="showProjectForm"
|
||||
:project="editingProject"
|
||||
:speerpunten="speerpunten"
|
||||
@close="showProjectForm = false"
|
||||
/>
|
||||
|
||||
<CommitmentForm
|
||||
v-if="currentProjectId"
|
||||
:show="showCommitmentForm"
|
||||
:project-id="currentProjectId"
|
||||
:users="users"
|
||||
@close="showCommitmentForm = false"
|
||||
/>
|
||||
|
||||
<CliBar @command="handleCliCommand" />
|
||||
@@ -182,4 +206,20 @@ const user = computed(() => page.props.auth?.user)
|
||||
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; /* account for top-bar */
|
||||
}
|
||||
|
||||
.empty-message {
|
||||
font-family: 'VT323', monospace;
|
||||
font-size: 20px;
|
||||
color: #8892b0;
|
||||
text-align: center;
|
||||
opacity: 0.7;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user