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
186
resources/js/Components/Forms/CommitmentForm.vue
Normal file
186
resources/js/Components/Forms/CommitmentForm.vue
Normal file
@@ -0,0 +1,186 @@
|
||||
<script setup>
|
||||
import { watch } from 'vue'
|
||||
import { useForm } from '@inertiajs/vue3'
|
||||
import Modal from '../Modal.vue'
|
||||
import FormInput from './FormInput.vue'
|
||||
|
||||
const props = defineProps({
|
||||
commitment: { type: Object, default: null },
|
||||
projectId: { type: [Number, String], required: true },
|
||||
users: { type: Array, default: () => [] },
|
||||
show: { type: Boolean, default: false },
|
||||
})
|
||||
|
||||
const emit = defineEmits(['close'])
|
||||
|
||||
const isEditing = !!props.commitment
|
||||
|
||||
const form = useForm({
|
||||
beschrijving: props.commitment?.beschrijving ?? '',
|
||||
eigenaar_id: props.commitment?.eigenaar_id ?? '',
|
||||
deadline: props.commitment?.deadline ?? '',
|
||||
prioriteit: props.commitment?.prioriteit ?? '',
|
||||
project_id: props.projectId,
|
||||
})
|
||||
|
||||
watch(() => props.show, (val) => {
|
||||
if (val) {
|
||||
form.beschrijving = props.commitment?.beschrijving ?? ''
|
||||
form.eigenaar_id = props.commitment?.eigenaar_id ?? ''
|
||||
form.deadline = props.commitment?.deadline ?? ''
|
||||
form.prioriteit = props.commitment?.prioriteit ?? ''
|
||||
form.project_id = props.projectId
|
||||
form.clearErrors()
|
||||
}
|
||||
})
|
||||
|
||||
const userOptions = props.users.map(u => ({
|
||||
value: u.id,
|
||||
label: u.name ?? u.naam ?? String(u.id),
|
||||
}))
|
||||
|
||||
const prioriteitOptions = [
|
||||
{ value: 'laag', label: 'Laag' },
|
||||
{ value: 'midden', label: 'Midden' },
|
||||
{ value: 'hoog', label: 'Hoog' },
|
||||
]
|
||||
|
||||
const handleSubmit = () => {
|
||||
form.post('/commitments', {
|
||||
onSuccess: () => emit('close'),
|
||||
})
|
||||
}
|
||||
|
||||
const handleClose = () => {
|
||||
form.reset()
|
||||
form.clearErrors()
|
||||
emit('close')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Modal
|
||||
:show="show"
|
||||
:title="isEditing ? 'COMMITMENT BEWERKEN' : 'NIEUW COMMITMENT'"
|
||||
max-width="480px"
|
||||
@close="handleClose"
|
||||
>
|
||||
<form class="commitment-form" @submit.prevent="handleSubmit">
|
||||
<div class="form-grid">
|
||||
<FormInput
|
||||
label="Beschrijving"
|
||||
type="textarea"
|
||||
:model-value="form.beschrijving"
|
||||
:error="form.errors.beschrijving"
|
||||
:required="true"
|
||||
placeholder="Omschrijf het commitment..."
|
||||
@update:model-value="form.beschrijving = $event"
|
||||
/>
|
||||
|
||||
<FormInput
|
||||
label="Eigenaar"
|
||||
type="select"
|
||||
:model-value="form.eigenaar_id"
|
||||
:options="userOptions"
|
||||
:error="form.errors.eigenaar_id"
|
||||
@update:model-value="form.eigenaar_id = $event"
|
||||
/>
|
||||
|
||||
<FormInput
|
||||
label="Deadline"
|
||||
type="date"
|
||||
:model-value="form.deadline"
|
||||
:error="form.errors.deadline"
|
||||
:required="true"
|
||||
@update:model-value="form.deadline = $event"
|
||||
/>
|
||||
|
||||
<FormInput
|
||||
label="Prioriteit"
|
||||
type="select"
|
||||
:model-value="form.prioriteit"
|
||||
:options="prioriteitOptions"
|
||||
:error="form.errors.prioriteit"
|
||||
@update:model-value="form.prioriteit = $event"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-actions">
|
||||
<button type="button" class="btn-cancel" @click="handleClose">
|
||||
[ANNULEER]
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
class="btn-submit"
|
||||
:disabled="form.processing"
|
||||
>
|
||||
<span v-if="form.processing">VERWERKEN...</span>
|
||||
<span v-else>{{ isEditing ? '[OPSLAAN]' : '[AANMAKEN]' }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</Modal>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.commitment-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.form-grid {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
margin-top: 24px;
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid rgba(0, 210, 255, 0.12);
|
||||
}
|
||||
|
||||
.btn-cancel,
|
||||
.btn-submit {
|
||||
font-family: 'VT323', monospace;
|
||||
font-size: 16px;
|
||||
border-radius: 4px;
|
||||
padding: 8px 16px;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.btn-cancel {
|
||||
background: transparent;
|
||||
border: 1px solid rgba(136, 146, 176, 0.4);
|
||||
color: #8892b0;
|
||||
}
|
||||
|
||||
.btn-cancel:hover {
|
||||
border-color: #e94560;
|
||||
color: #e94560;
|
||||
text-shadow: 0 0 8px rgba(233, 69, 96, 0.4);
|
||||
}
|
||||
|
||||
.btn-submit {
|
||||
background: rgba(0, 210, 255, 0.1);
|
||||
border: 1px solid #00d2ff;
|
||||
color: #00d2ff;
|
||||
}
|
||||
|
||||
.btn-submit:hover:not(:disabled) {
|
||||
background: rgba(0, 210, 255, 0.2);
|
||||
box-shadow: 0 0 15px rgba(0, 210, 255, 0.3);
|
||||
text-shadow: 0 0 8px rgba(0, 210, 255, 0.5);
|
||||
}
|
||||
|
||||
.btn-submit:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
</style>
|
||||
160
resources/js/Components/Forms/FormInput.vue
Normal file
160
resources/js/Components/Forms/FormInput.vue
Normal file
@@ -0,0 +1,160 @@
|
||||
<script setup>
|
||||
import { ref, watch } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
label: { type: String, default: '' },
|
||||
modelValue: { type: [String, Number], default: '' },
|
||||
type: { type: String, default: 'text' },
|
||||
error: { type: String, default: '' },
|
||||
options: { type: Array, default: () => [] },
|
||||
required: { type: Boolean, default: false },
|
||||
placeholder: { type: String, default: '' },
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
|
||||
const textareaRef = ref(null)
|
||||
|
||||
const autoResize = () => {
|
||||
if (!textareaRef.value) return
|
||||
textareaRef.value.style.height = 'auto'
|
||||
textareaRef.value.style.height = textareaRef.value.scrollHeight + 'px'
|
||||
}
|
||||
|
||||
watch(() => props.modelValue, () => {
|
||||
if (props.type === 'textarea') {
|
||||
autoResize()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="form-field">
|
||||
<label v-if="label" class="field-label">
|
||||
{{ label }}<span v-if="required" class="required-star"> *</span>
|
||||
</label>
|
||||
|
||||
<textarea
|
||||
v-if="type === 'textarea'"
|
||||
ref="textareaRef"
|
||||
:value="modelValue"
|
||||
:placeholder="placeholder"
|
||||
:required="required"
|
||||
class="field-input field-textarea"
|
||||
:class="{ 'field-error': error }"
|
||||
rows="3"
|
||||
@input="emit('update:modelValue', $event.target.value); autoResize()"
|
||||
/>
|
||||
|
||||
<select
|
||||
v-else-if="type === 'select'"
|
||||
:value="modelValue"
|
||||
:required="required"
|
||||
class="field-input field-select"
|
||||
:class="{ 'field-error': error }"
|
||||
@change="emit('update:modelValue', $event.target.value)"
|
||||
>
|
||||
<option value="">-- selecteer --</option>
|
||||
<option
|
||||
v-for="opt in options"
|
||||
:key="opt.value ?? opt"
|
||||
:value="opt.value ?? opt"
|
||||
>
|
||||
{{ opt.label ?? opt }}
|
||||
</option>
|
||||
</select>
|
||||
|
||||
<input
|
||||
v-else
|
||||
:type="type"
|
||||
:value="modelValue"
|
||||
:placeholder="placeholder"
|
||||
:required="required"
|
||||
class="field-input"
|
||||
:class="{ 'field-error': error }"
|
||||
@input="emit('update:modelValue', $event.target.value)"
|
||||
/>
|
||||
|
||||
<p v-if="error" class="field-error-msg">{{ error }}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.form-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.field-label {
|
||||
font-family: 'VT323', monospace;
|
||||
font-size: 16px;
|
||||
color: #8892b0;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.required-star {
|
||||
color: #e94560;
|
||||
}
|
||||
|
||||
.field-input {
|
||||
background: #0f1b35;
|
||||
border: 1px solid rgba(0, 210, 255, 0.35);
|
||||
border-radius: 4px;
|
||||
color: #e8e8e8;
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-size: 13px;
|
||||
padding: 8px 12px;
|
||||
outline: none;
|
||||
transition: border-color 0.15s, box-shadow 0.15s;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.field-input:focus {
|
||||
border-color: #00d2ff;
|
||||
box-shadow: 0 0 0 2px rgba(0, 210, 255, 0.12), 0 0 12px rgba(0, 210, 255, 0.1);
|
||||
}
|
||||
|
||||
.field-input.field-error {
|
||||
border-color: rgba(233, 69, 96, 0.6);
|
||||
}
|
||||
|
||||
.field-input.field-error:focus {
|
||||
box-shadow: 0 0 0 2px rgba(233, 69, 96, 0.12);
|
||||
}
|
||||
|
||||
.field-textarea {
|
||||
resize: none;
|
||||
overflow: hidden;
|
||||
min-height: 72px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.field-select {
|
||||
appearance: none;
|
||||
cursor: pointer;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2300d2ff' d='M0 0l6 8 6-8z'/%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 12px center;
|
||||
padding-right: 36px;
|
||||
}
|
||||
|
||||
.field-select option {
|
||||
background: #16213e;
|
||||
color: #e8e8e8;
|
||||
}
|
||||
|
||||
/* Date input calendar icon color */
|
||||
.field-input[type='date']::-webkit-calendar-picker-indicator {
|
||||
filter: invert(0.6) sepia(1) saturate(5) hue-rotate(160deg);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.field-error-msg {
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-size: 11px;
|
||||
color: #e94560;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
216
resources/js/Components/Forms/ProjectForm.vue
Normal file
216
resources/js/Components/Forms/ProjectForm.vue
Normal file
@@ -0,0 +1,216 @@
|
||||
<script setup>
|
||||
import { watch } from 'vue'
|
||||
import { useForm } from '@inertiajs/vue3'
|
||||
import Modal from '../Modal.vue'
|
||||
import FormInput from './FormInput.vue'
|
||||
|
||||
const props = defineProps({
|
||||
project: { type: Object, default: null },
|
||||
speerpunten: { type: Array, default: () => [] },
|
||||
show: { type: Boolean, default: false },
|
||||
})
|
||||
|
||||
const emit = defineEmits(['close'])
|
||||
|
||||
const isEditing = !!props.project
|
||||
|
||||
const form = useForm({
|
||||
naam: props.project?.naam ?? '',
|
||||
beschrijving: props.project?.beschrijving ?? '',
|
||||
speerpunt_id: props.project?.speerpunt_id ?? '',
|
||||
prioriteit: props.project?.prioriteit ?? '',
|
||||
startdatum: props.project?.startdatum ?? '',
|
||||
streef_einddatum: props.project?.streef_einddatum ?? '',
|
||||
})
|
||||
|
||||
// Reset form when show changes to true and project changes
|
||||
watch(() => props.show, (val) => {
|
||||
if (val) {
|
||||
form.naam = props.project?.naam ?? ''
|
||||
form.beschrijving = props.project?.beschrijving ?? ''
|
||||
form.speerpunt_id = props.project?.speerpunt_id ?? ''
|
||||
form.prioriteit = props.project?.prioriteit ?? ''
|
||||
form.startdatum = props.project?.startdatum ?? ''
|
||||
form.streef_einddatum = props.project?.streef_einddatum ?? ''
|
||||
form.clearErrors()
|
||||
}
|
||||
})
|
||||
|
||||
const speerpuntOptions = props.speerpunten.map(s => ({
|
||||
value: s.id,
|
||||
label: s.naam ?? s.name ?? s.id,
|
||||
}))
|
||||
|
||||
const prioriteitOptions = [
|
||||
{ value: 'laag', label: 'Laag' },
|
||||
{ value: 'midden', label: 'Midden' },
|
||||
{ value: 'hoog', label: 'Hoog' },
|
||||
]
|
||||
|
||||
const handleSubmit = () => {
|
||||
if (isEditing) {
|
||||
form.put(`/projects/${props.project.id}`, {
|
||||
onSuccess: () => emit('close'),
|
||||
})
|
||||
} else {
|
||||
form.post('/projects', {
|
||||
onSuccess: () => emit('close'),
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const handleClose = () => {
|
||||
form.reset()
|
||||
form.clearErrors()
|
||||
emit('close')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Modal
|
||||
:show="show"
|
||||
:title="isEditing ? 'PROJECT BEWERKEN' : 'NIEUW PROJECT'"
|
||||
max-width="560px"
|
||||
@close="handleClose"
|
||||
>
|
||||
<form class="project-form" @submit.prevent="handleSubmit">
|
||||
<div class="form-grid">
|
||||
<FormInput
|
||||
label="Naam"
|
||||
:model-value="form.naam"
|
||||
:error="form.errors.naam"
|
||||
:required="true"
|
||||
placeholder="Project naam..."
|
||||
@update:model-value="form.naam = $event"
|
||||
/>
|
||||
|
||||
<FormInput
|
||||
label="Beschrijving"
|
||||
type="textarea"
|
||||
:model-value="form.beschrijving"
|
||||
:error="form.errors.beschrijving"
|
||||
placeholder="Omschrijf het project..."
|
||||
@update:model-value="form.beschrijving = $event"
|
||||
/>
|
||||
|
||||
<FormInput
|
||||
label="Speerpunt"
|
||||
type="select"
|
||||
:model-value="form.speerpunt_id"
|
||||
:options="speerpuntOptions"
|
||||
:error="form.errors.speerpunt_id"
|
||||
@update:model-value="form.speerpunt_id = $event"
|
||||
/>
|
||||
|
||||
<FormInput
|
||||
label="Prioriteit"
|
||||
type="select"
|
||||
:model-value="form.prioriteit"
|
||||
:options="prioriteitOptions"
|
||||
:error="form.errors.prioriteit"
|
||||
@update:model-value="form.prioriteit = $event"
|
||||
/>
|
||||
|
||||
<div class="form-row">
|
||||
<FormInput
|
||||
label="Startdatum"
|
||||
type="date"
|
||||
:model-value="form.startdatum"
|
||||
:error="form.errors.startdatum"
|
||||
@update:model-value="form.startdatum = $event"
|
||||
/>
|
||||
<FormInput
|
||||
label="Streef einddatum"
|
||||
type="date"
|
||||
:model-value="form.streef_einddatum"
|
||||
:error="form.errors.streef_einddatum"
|
||||
@update:model-value="form.streef_einddatum = $event"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-actions">
|
||||
<button type="button" class="btn-cancel" @click="handleClose">
|
||||
[ANNULEER]
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
class="btn-submit"
|
||||
:disabled="form.processing"
|
||||
>
|
||||
<span v-if="form.processing">VERWERKEN...</span>
|
||||
<span v-else>{{ isEditing ? '[OPSLAAN]' : '[AANMAKEN]' }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</Modal>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.project-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.form-grid {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
margin-top: 24px;
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid rgba(0, 210, 255, 0.12);
|
||||
}
|
||||
|
||||
.btn-cancel,
|
||||
.btn-submit {
|
||||
font-family: 'VT323', monospace;
|
||||
font-size: 16px;
|
||||
border-radius: 4px;
|
||||
padding: 8px 16px;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.btn-cancel {
|
||||
background: transparent;
|
||||
border: 1px solid rgba(136, 146, 176, 0.4);
|
||||
color: #8892b0;
|
||||
}
|
||||
|
||||
.btn-cancel:hover {
|
||||
border-color: #e94560;
|
||||
color: #e94560;
|
||||
text-shadow: 0 0 8px rgba(233, 69, 96, 0.4);
|
||||
}
|
||||
|
||||
.btn-submit {
|
||||
background: rgba(0, 210, 255, 0.1);
|
||||
border: 1px solid #00d2ff;
|
||||
color: #00d2ff;
|
||||
}
|
||||
|
||||
.btn-submit:hover:not(:disabled) {
|
||||
background: rgba(0, 210, 255, 0.2);
|
||||
box-shadow: 0 0 15px rgba(0, 210, 255, 0.3);
|
||||
text-shadow: 0 0 8px rgba(0, 210, 255, 0.5);
|
||||
}
|
||||
|
||||
.btn-submit:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
</style>
|
||||
161
resources/js/Components/MetroMap/FloatingActions.vue
Normal file
161
resources/js/Components/MetroMap/FloatingActions.vue
Normal file
@@ -0,0 +1,161 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const emit = defineEmits(['create-project', 'create-theme'])
|
||||
|
||||
const menuOpen = ref(false)
|
||||
|
||||
const toggle = () => {
|
||||
menuOpen.value = !menuOpen.value
|
||||
}
|
||||
|
||||
const handleCreateProject = () => {
|
||||
menuOpen.value = false
|
||||
emit('create-project')
|
||||
}
|
||||
|
||||
const handleCreateTheme = () => {
|
||||
menuOpen.value = false
|
||||
emit('create-theme')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="fab-container">
|
||||
<!-- Expanded menu -->
|
||||
<Transition name="fab-menu">
|
||||
<div v-if="menuOpen" class="fab-menu">
|
||||
<button class="fab-menu-item" @click="handleCreateProject">
|
||||
<span class="fab-menu-icon">+</span>
|
||||
<span class="fab-menu-label">Nieuw project</span>
|
||||
</button>
|
||||
<button class="fab-menu-item" @click="handleCreateTheme">
|
||||
<span class="fab-menu-icon">+</span>
|
||||
<span class="fab-menu-label">Nieuw thema</span>
|
||||
</button>
|
||||
</div>
|
||||
</Transition>
|
||||
|
||||
<!-- Main FAB button -->
|
||||
<button
|
||||
class="fab-btn"
|
||||
:class="{ 'fab-btn--open': menuOpen }"
|
||||
:title="menuOpen ? 'Sluiten' : 'Nieuw aanmaken'"
|
||||
@click="toggle"
|
||||
>
|
||||
<span class="fab-icon">{{ menuOpen ? '[X]' : '[+]' }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.fab-container {
|
||||
position: fixed;
|
||||
bottom: 64px; /* above the CLI bar */
|
||||
right: 20px;
|
||||
z-index: 150;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.fab-btn {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 50%;
|
||||
background: #0f3460;
|
||||
border: 2px solid #00d2ff;
|
||||
color: #00d2ff;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow:
|
||||
0 0 12px rgba(0, 210, 255, 0.35),
|
||||
0 0 24px rgba(0, 210, 255, 0.15);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.fab-btn:hover {
|
||||
background: rgba(0, 210, 255, 0.15);
|
||||
box-shadow:
|
||||
0 0 20px rgba(0, 210, 255, 0.5),
|
||||
0 0 40px rgba(0, 210, 255, 0.2);
|
||||
transform: scale(1.08);
|
||||
}
|
||||
|
||||
.fab-btn--open {
|
||||
border-color: #e94560;
|
||||
color: #e94560;
|
||||
box-shadow:
|
||||
0 0 12px rgba(233, 69, 96, 0.35),
|
||||
0 0 24px rgba(233, 69, 96, 0.15);
|
||||
}
|
||||
|
||||
.fab-btn--open:hover {
|
||||
box-shadow:
|
||||
0 0 20px rgba(233, 69, 96, 0.5),
|
||||
0 0 40px rgba(233, 69, 96, 0.2);
|
||||
}
|
||||
|
||||
.fab-icon {
|
||||
font-family: 'VT323', monospace;
|
||||
font-size: 18px;
|
||||
line-height: 1;
|
||||
text-shadow: 0 0 8px currentColor;
|
||||
}
|
||||
|
||||
.fab-menu {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.fab-menu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
background: #16213e;
|
||||
border: 1px solid rgba(0, 210, 255, 0.4);
|
||||
border-radius: 4px;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
transition: all 0.15s;
|
||||
box-shadow: 0 0 10px rgba(0, 210, 255, 0.1);
|
||||
}
|
||||
|
||||
.fab-menu-item:hover {
|
||||
background: rgba(0, 210, 255, 0.1);
|
||||
border-color: #00d2ff;
|
||||
box-shadow: 0 0 16px rgba(0, 210, 255, 0.25);
|
||||
}
|
||||
|
||||
.fab-menu-icon {
|
||||
font-family: 'VT323', monospace;
|
||||
font-size: 16px;
|
||||
color: #00d2ff;
|
||||
text-shadow: 0 0 6px rgba(0, 210, 255, 0.5);
|
||||
}
|
||||
|
||||
.fab-menu-label {
|
||||
font-family: 'VT323', monospace;
|
||||
font-size: 16px;
|
||||
color: #e8e8e8;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
/* Menu transition */
|
||||
.fab-menu-enter-active,
|
||||
.fab-menu-leave-active {
|
||||
transition: opacity 0.15s ease, transform 0.15s ease;
|
||||
}
|
||||
|
||||
.fab-menu-enter-from,
|
||||
.fab-menu-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(8px) scale(0.97);
|
||||
}
|
||||
</style>
|
||||
114
resources/js/Components/Modal.vue
Normal file
114
resources/js/Components/Modal.vue
Normal file
@@ -0,0 +1,114 @@
|
||||
<script setup>
|
||||
defineProps({
|
||||
show: { type: Boolean, default: false },
|
||||
title: { type: String, default: '' },
|
||||
maxWidth: { type: String, default: '500px' },
|
||||
})
|
||||
|
||||
const emit = defineEmits(['close'])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<Transition name="modal">
|
||||
<div v-if="show" class="modal-backdrop" @click.self="emit('close')">
|
||||
<div class="modal-panel" :style="{ maxWidth }">
|
||||
<div class="modal-header">
|
||||
<h2 class="modal-title">{{ title }}</h2>
|
||||
<button class="modal-close" @click="emit('close')">[X]</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.modal-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 200;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(10, 10, 26, 0.85);
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
.modal-panel {
|
||||
width: 100%;
|
||||
margin: 16px;
|
||||
background: #16213e;
|
||||
border: 1px solid #00d2ff;
|
||||
border-radius: 6px;
|
||||
box-shadow:
|
||||
0 0 0 1px rgba(0, 210, 255, 0.15),
|
||||
0 0 30px rgba(0, 210, 255, 0.2),
|
||||
0 0 60px rgba(0, 210, 255, 0.08);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid rgba(0, 210, 255, 0.2);
|
||||
background: rgba(0, 210, 255, 0.04);
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
font-family: 'VT323', monospace;
|
||||
font-size: 24px;
|
||||
color: #00d2ff;
|
||||
margin: 0;
|
||||
text-shadow: 0 0 10px rgba(0, 210, 255, 0.4);
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
font-family: 'VT323', monospace;
|
||||
font-size: 18px;
|
||||
color: #8892b0;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 0 4px;
|
||||
line-height: 1;
|
||||
transition: color 0.15s;
|
||||
}
|
||||
|
||||
.modal-close:hover {
|
||||
color: #e94560;
|
||||
text-shadow: 0 0 8px rgba(233, 69, 96, 0.5);
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
/* Transition */
|
||||
.modal-enter-active,
|
||||
.modal-leave-active {
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.modal-enter-active .modal-panel,
|
||||
.modal-leave-active .modal-panel {
|
||||
transition: opacity 0.2s ease, transform 0.2s ease;
|
||||
}
|
||||
|
||||
.modal-enter-from,
|
||||
.modal-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.modal-enter-from .modal-panel,
|
||||
.modal-leave-to .modal-panel {
|
||||
opacity: 0;
|
||||
transform: scale(0.95);
|
||||
}
|
||||
</style>
|
||||
@@ -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