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>
|
||||
Reference in New Issue
Block a user