refactor(frontend): simplify booking forms and convert to modals
- Simplify BookingForm: remove recurring bookings, templates, and attachments - Replace datetime-local with separate date/time inputs for better UX - Convert inline forms to modals (Admin spaces, Users, SpaceDetail) - Unify Create and Edit booking forms with identical styling and structure - Add Space field to Edit modal (read-only) - Fix calendar initial load and set week start to Monday - Translate all form labels and messages to Romanian Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
Claude Agent
@@ -1,69 +1,10 @@
|
||||
<template>
|
||||
<div class="admin">
|
||||
<h2>Admin Dashboard - Space Management</h2>
|
||||
|
||||
<!-- Create/Edit Form -->
|
||||
<div class="card">
|
||||
<h3>{{ editingSpace ? 'Edit Space' : 'Create New Space' }}</h3>
|
||||
<form @submit.prevent="handleSubmit" class="space-form">
|
||||
<div class="form-group">
|
||||
<label for="name">Name *</label>
|
||||
<input
|
||||
id="name"
|
||||
v-model="formData.name"
|
||||
type="text"
|
||||
required
|
||||
placeholder="Conference Room A"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="type">Type *</label>
|
||||
<select id="type" v-model="formData.type" required>
|
||||
<option value="sala">Sala</option>
|
||||
<option value="birou">Birou</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="capacity">Capacity *</label>
|
||||
<input
|
||||
id="capacity"
|
||||
v-model.number="formData.capacity"
|
||||
type="number"
|
||||
required
|
||||
min="1"
|
||||
placeholder="10"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="description">Description</label>
|
||||
<textarea
|
||||
id="description"
|
||||
v-model="formData.description"
|
||||
rows="3"
|
||||
placeholder="Optional description..."
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="btn btn-primary" :disabled="loading">
|
||||
{{ editingSpace ? 'Update' : 'Create' }}
|
||||
</button>
|
||||
<button
|
||||
v-if="editingSpace"
|
||||
type="button"
|
||||
class="btn btn-secondary"
|
||||
@click="cancelEdit"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div v-if="error" class="error">{{ error }}</div>
|
||||
<div v-if="success" class="success">{{ success }}</div>
|
||||
<div class="page-header">
|
||||
<h2>Admin Dashboard - Space Management</h2>
|
||||
<button class="btn btn-primary" @click="openCreateModal">
|
||||
Create New Space
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Spaces List -->
|
||||
@@ -113,6 +54,125 @@
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Create/Edit Space Modal -->
|
||||
<div v-if="showModal" class="modal" @click.self="closeModal">
|
||||
<div class="modal-content">
|
||||
<h3>{{ editingSpace ? 'Edit Space' : 'Create New Space' }}</h3>
|
||||
<form @submit.prevent="handleSubmit" class="space-form">
|
||||
<div class="form-group">
|
||||
<label for="name">Name *</label>
|
||||
<input
|
||||
id="name"
|
||||
v-model="formData.name"
|
||||
type="text"
|
||||
required
|
||||
placeholder="Conference Room A"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="type">Type *</label>
|
||||
<select id="type" v-model="formData.type" required>
|
||||
<option value="sala">Sala</option>
|
||||
<option value="birou">Birou</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="capacity">Capacity *</label>
|
||||
<input
|
||||
id="capacity"
|
||||
v-model.number="formData.capacity"
|
||||
type="number"
|
||||
required
|
||||
min="1"
|
||||
placeholder="10"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="description">Description</label>
|
||||
<textarea
|
||||
id="description"
|
||||
v-model="formData.description"
|
||||
rows="3"
|
||||
placeholder="Optional description..."
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<!-- Per-Space Scheduling Settings -->
|
||||
<div class="form-section-header">
|
||||
<h4>Per-Space Scheduling Settings</h4>
|
||||
<p class="help-text">Leave blank to use global defaults</p>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="working_hours_start">Working Hours Start (hour)</label>
|
||||
<input
|
||||
id="working_hours_start"
|
||||
v-model.number="formData.working_hours_start"
|
||||
type="number"
|
||||
min="0"
|
||||
max="23"
|
||||
placeholder="e.g., 8 (leave blank for global)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="working_hours_end">Working Hours End (hour)</label>
|
||||
<input
|
||||
id="working_hours_end"
|
||||
v-model.number="formData.working_hours_end"
|
||||
type="number"
|
||||
min="0"
|
||||
max="23"
|
||||
placeholder="e.g., 20 (leave blank for global)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="min_duration_minutes">Min Duration (minutes)</label>
|
||||
<input
|
||||
id="min_duration_minutes"
|
||||
v-model.number="formData.min_duration_minutes"
|
||||
type="number"
|
||||
min="15"
|
||||
step="15"
|
||||
placeholder="e.g., 30 (leave blank for global)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="max_duration_minutes">Max Duration (minutes)</label>
|
||||
<input
|
||||
id="max_duration_minutes"
|
||||
v-model.number="formData.max_duration_minutes"
|
||||
type="number"
|
||||
min="15"
|
||||
step="15"
|
||||
placeholder="e.g., 480 (leave blank for global)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="error" class="error">{{ error }}</div>
|
||||
<div v-if="success" class="success">{{ success }}</div>
|
||||
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="btn btn-primary" :disabled="loading">
|
||||
{{ editingSpace ? 'Update' : 'Create' }}
|
||||
</button>
|
||||
<button type="button" class="btn btn-secondary" @click="closeModal">
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -127,12 +187,17 @@ const loading = ref(false)
|
||||
const error = ref('')
|
||||
const success = ref('')
|
||||
const editingSpace = ref<Space | null>(null)
|
||||
const showModal = ref(false)
|
||||
|
||||
const formData = ref({
|
||||
name: '',
|
||||
type: 'sala',
|
||||
capacity: 1,
|
||||
description: ''
|
||||
description: '',
|
||||
working_hours_start: null as number | null,
|
||||
working_hours_end: null as number | null,
|
||||
min_duration_minutes: null as number | null,
|
||||
max_duration_minutes: null as number | null
|
||||
})
|
||||
|
||||
const loadSpaces = async () => {
|
||||
@@ -161,8 +226,8 @@ const handleSubmit = async () => {
|
||||
success.value = 'Space created successfully!'
|
||||
}
|
||||
|
||||
resetForm()
|
||||
await loadSpaces()
|
||||
closeModal()
|
||||
|
||||
// Clear success message after 3 seconds
|
||||
setTimeout(() => {
|
||||
@@ -175,18 +240,28 @@ const handleSubmit = async () => {
|
||||
}
|
||||
}
|
||||
|
||||
const openCreateModal = () => {
|
||||
resetForm()
|
||||
showModal.value = true
|
||||
}
|
||||
|
||||
const startEdit = (space: Space) => {
|
||||
editingSpace.value = space
|
||||
formData.value = {
|
||||
name: space.name,
|
||||
type: space.type,
|
||||
capacity: space.capacity,
|
||||
description: space.description || ''
|
||||
description: space.description || '',
|
||||
working_hours_start: space.working_hours_start ?? null,
|
||||
working_hours_end: space.working_hours_end ?? null,
|
||||
min_duration_minutes: space.min_duration_minutes ?? null,
|
||||
max_duration_minutes: space.max_duration_minutes ?? null
|
||||
}
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' })
|
||||
showModal.value = true
|
||||
}
|
||||
|
||||
const cancelEdit = () => {
|
||||
const closeModal = () => {
|
||||
showModal.value = false
|
||||
resetForm()
|
||||
}
|
||||
|
||||
@@ -196,7 +271,11 @@ const resetForm = () => {
|
||||
name: '',
|
||||
type: 'sala',
|
||||
capacity: 1,
|
||||
description: ''
|
||||
description: '',
|
||||
working_hours_start: null,
|
||||
working_hours_end: null,
|
||||
min_duration_minutes: null,
|
||||
max_duration_minutes: null
|
||||
}
|
||||
}
|
||||
|
||||
@@ -245,6 +324,38 @@ onMounted(() => {
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.form-section-header {
|
||||
margin-top: 16px;
|
||||
margin-bottom: 8px;
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.form-section-header h4 {
|
||||
margin: 0 0 4px 0;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.help-text {
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.form-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -254,6 +365,7 @@ onMounted(() => {
|
||||
.form-group label {
|
||||
font-weight: 500;
|
||||
color: #374151;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.form-group input,
|
||||
@@ -408,4 +520,46 @@ onMounted(() => {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 24px;
|
||||
flex-wrap: wrap;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.page-header h2 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.modal {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
padding: 24px;
|
||||
max-width: 600px;
|
||||
width: 90%;
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.modal-content h3 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user