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
File diff suppressed because it is too large
Load Diff
@@ -39,7 +39,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue'
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import FullCalendar from '@fullcalendar/vue3'
|
||||
import dayGridPlugin from '@fullcalendar/daygrid'
|
||||
import timeGridPlugin from '@fullcalendar/timegrid'
|
||||
@@ -251,6 +251,7 @@ const calendarOptions = computed<CalendarOptions>(() => ({
|
||||
right: 'dayGridMonth,timeGridWeek,timeGridDay'
|
||||
},
|
||||
timeZone: userTimezone.value,
|
||||
firstDay: 1, // Start week on Monday (0=Sunday, 1=Monday)
|
||||
events: events.value,
|
||||
datesSet: handleDatesSet,
|
||||
editable: isEditable.value, // Enable drag/resize for admins
|
||||
@@ -301,6 +302,12 @@ const refresh = () => {
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize calendar on mount
|
||||
onMounted(() => {
|
||||
// Load initial bookings for current month
|
||||
refresh()
|
||||
})
|
||||
|
||||
defineExpose({ refresh })
|
||||
</script>
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -124,56 +124,99 @@
|
||||
<!-- Edit Modal -->
|
||||
<div v-if="showEditModal" class="modal-overlay" @click.self="closeEditModal">
|
||||
<div class="modal-content">
|
||||
<h3>Edit Booking</h3>
|
||||
<h3>Editare rezervare</h3>
|
||||
<form @submit.prevent="saveEdit">
|
||||
<!-- Space (read-only) -->
|
||||
<div class="form-group">
|
||||
<label for="edit-title">Title *</label>
|
||||
<label for="edit-space" class="form-label">Spațiu</label>
|
||||
<input
|
||||
id="edit-space"
|
||||
type="text"
|
||||
:value="editingBooking?.space?.name || 'Unknown Space'"
|
||||
class="form-input"
|
||||
readonly
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="edit-title">Titlu *</label>
|
||||
<input
|
||||
id="edit-title"
|
||||
v-model="editForm.title"
|
||||
type="text"
|
||||
required
|
||||
maxlength="200"
|
||||
placeholder="Meeting title"
|
||||
placeholder="Titlu rezervare"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="edit-description">Description</label>
|
||||
<label for="edit-description">Descriere (opțional)</label>
|
||||
<textarea
|
||||
id="edit-description"
|
||||
v-model="editForm.description"
|
||||
rows="3"
|
||||
placeholder="Optional description"
|
||||
placeholder="Detalii suplimentare..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Start Date & Time -->
|
||||
<div class="form-group">
|
||||
<label for="edit-start">Start Date/Time *</label>
|
||||
<input
|
||||
id="edit-start"
|
||||
v-model="editForm.start_datetime"
|
||||
type="datetime-local"
|
||||
required
|
||||
/>
|
||||
<label class="form-label">Început *</label>
|
||||
<div class="datetime-row">
|
||||
<div class="datetime-field">
|
||||
<label for="edit-start-date" class="form-sublabel">Data</label>
|
||||
<input
|
||||
id="edit-start-date"
|
||||
v-model="editForm.start_date"
|
||||
type="date"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div class="datetime-field">
|
||||
<label for="edit-start-time" class="form-sublabel">Ora</label>
|
||||
<input
|
||||
id="edit-start-time"
|
||||
v-model="editForm.start_time"
|
||||
type="time"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- End Date & Time -->
|
||||
<div class="form-group">
|
||||
<label for="edit-end">End Date/Time *</label>
|
||||
<input
|
||||
id="edit-end"
|
||||
v-model="editForm.end_datetime"
|
||||
type="datetime-local"
|
||||
required
|
||||
/>
|
||||
<label class="form-label">Sfârșit *</label>
|
||||
<div class="datetime-row">
|
||||
<div class="datetime-field">
|
||||
<label for="edit-end-date" class="form-sublabel">Data</label>
|
||||
<input
|
||||
id="edit-end-date"
|
||||
v-model="editForm.end_date"
|
||||
type="date"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div class="datetime-field">
|
||||
<label for="edit-end-time" class="form-sublabel">Ora</label>
|
||||
<input
|
||||
id="edit-end-time"
|
||||
v-model="editForm.end_time"
|
||||
type="time"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="editError" class="error-message">{{ editError }}</div>
|
||||
|
||||
<div class="form-actions">
|
||||
<button type="button" class="btn btn-secondary" @click="closeEditModal">Cancel</button>
|
||||
<button type="button" class="btn btn-secondary" @click="closeEditModal">Anulează</button>
|
||||
<button type="submit" class="btn btn-primary" :disabled="saving">
|
||||
{{ saving ? 'Saving...' : 'Save Changes' }}
|
||||
{{ saving ? 'Se salvează...' : 'Salvează modificările' }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
@@ -209,8 +252,10 @@ const editingBooking = ref<Booking | null>(null)
|
||||
const editForm = ref({
|
||||
title: '',
|
||||
description: '',
|
||||
start_datetime: '',
|
||||
end_datetime: ''
|
||||
start_date: '',
|
||||
start_time: '',
|
||||
end_date: '',
|
||||
end_time: ''
|
||||
})
|
||||
const editError = ref('')
|
||||
const saving = ref(false)
|
||||
@@ -251,12 +296,22 @@ const formatStatus = (status: string): string => {
|
||||
|
||||
const openEditModal = (booking: Booking) => {
|
||||
editingBooking.value = booking
|
||||
// Convert ISO datetime to datetime-local format in user's timezone
|
||||
|
||||
// Extract date and time from ISO datetime
|
||||
const startLocal = isoToLocalDateTime(booking.start_datetime, userTimezone.value)
|
||||
const endLocal = isoToLocalDateTime(booking.end_datetime, userTimezone.value)
|
||||
|
||||
// Split YYYY-MM-DDTHH:mm into date and time parts
|
||||
const [startDate, startTime] = startLocal.split('T')
|
||||
const [endDate, endTime] = endLocal.split('T')
|
||||
|
||||
editForm.value = {
|
||||
title: booking.title,
|
||||
description: booking.description || '',
|
||||
start_datetime: isoToLocalDateTime(booking.start_datetime, userTimezone.value),
|
||||
end_datetime: isoToLocalDateTime(booking.end_datetime, userTimezone.value)
|
||||
start_date: startDate,
|
||||
start_time: startTime,
|
||||
end_date: endDate,
|
||||
end_time: endTime
|
||||
}
|
||||
editError.value = ''
|
||||
showEditModal.value = true
|
||||
@@ -275,12 +330,15 @@ const saveEdit = async () => {
|
||||
editError.value = ''
|
||||
|
||||
try {
|
||||
// Convert datetime-local format to ISO without Z (backend will handle timezone conversion)
|
||||
// Combine date and time, then convert to ISO
|
||||
const startDateTime = `${editForm.value.start_date}T${editForm.value.start_time}`
|
||||
const endDateTime = `${editForm.value.end_date}T${editForm.value.end_time}`
|
||||
|
||||
const updateData = {
|
||||
title: editForm.value.title,
|
||||
description: editForm.value.description,
|
||||
start_datetime: localDateTimeToISO(editForm.value.start_datetime),
|
||||
end_datetime: localDateTimeToISO(editForm.value.end_datetime)
|
||||
start_datetime: localDateTimeToISO(startDateTime),
|
||||
end_datetime: localDateTimeToISO(endDateTime)
|
||||
}
|
||||
|
||||
await bookingsApi.update(editingBooking.value.id, updateData)
|
||||
@@ -558,6 +616,33 @@ onMounted(() => {
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
font-weight: 500;
|
||||
color: #374151;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.form-sublabel {
|
||||
display: block;
|
||||
margin-bottom: 4px;
|
||||
font-weight: 400;
|
||||
color: #6b7280;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.datetime-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.datetime-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.form-group input,
|
||||
.form-group textarea {
|
||||
width: 100%;
|
||||
|
||||
@@ -61,7 +61,7 @@
|
||||
d="M12 6v6m0 0v6m0-6h6m-6 0H6"
|
||||
/>
|
||||
</svg>
|
||||
Reserve Space
|
||||
{{ showBookingForm ? 'Cancel Reservation' : 'Reserve Space' }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -75,7 +75,19 @@
|
||||
<div class="card calendar-card">
|
||||
<h3>Availability Calendar</h3>
|
||||
<p class="calendar-subtitle">View existing bookings and available time slots</p>
|
||||
<SpaceCalendar :space-id="space.id" />
|
||||
<SpaceCalendar ref="calendarRef" :space-id="space.id" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Booking Modal -->
|
||||
<div v-if="showBookingForm && space" class="modal" @click.self="closeBookingModal">
|
||||
<div class="modal-content">
|
||||
<h3>Create Booking</h3>
|
||||
<BookingForm
|
||||
:space-id="space.id"
|
||||
@submit="handleBookingSubmit"
|
||||
@cancel="closeBookingModal"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -83,17 +95,19 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { spacesApi, handleApiError } from '@/services/api'
|
||||
import SpaceCalendar from '@/components/SpaceCalendar.vue'
|
||||
import BookingForm from '@/components/BookingForm.vue'
|
||||
import type { Space } from '@/types'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
|
||||
const space = ref<Space | null>(null)
|
||||
const loading = ref(true)
|
||||
const error = ref('')
|
||||
const showBookingForm = ref(false)
|
||||
const calendarRef = ref<InstanceType<typeof SpaceCalendar> | null>(null)
|
||||
|
||||
// Format space type for display
|
||||
const formatType = (type: string): string => {
|
||||
@@ -136,12 +150,18 @@ const loadSpace = async () => {
|
||||
|
||||
// Handle reserve button click
|
||||
const handleReserve = () => {
|
||||
// Placeholder for US-004d: Redirect to booking creation page
|
||||
// For now, navigate to a placeholder route
|
||||
router.push({
|
||||
path: '/booking/new',
|
||||
query: { space: space.value?.id }
|
||||
})
|
||||
showBookingForm.value = !showBookingForm.value
|
||||
}
|
||||
|
||||
// Close booking modal
|
||||
const closeBookingModal = () => {
|
||||
showBookingForm.value = false
|
||||
}
|
||||
|
||||
// Handle booking form submit
|
||||
const handleBookingSubmit = () => {
|
||||
showBookingForm.value = false
|
||||
calendarRef.value?.refresh()
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
@@ -364,6 +384,11 @@ onMounted(() => {
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* Booking Card */
|
||||
.booking-card h3 {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
/* Calendar Card */
|
||||
.calendar-subtitle {
|
||||
color: #6b7280;
|
||||
@@ -371,6 +396,36 @@ onMounted(() => {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/* Modal */
|
||||
.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;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
.space-header {
|
||||
|
||||
@@ -1,81 +1,10 @@
|
||||
<template>
|
||||
<div class="users">
|
||||
<h2>Admin Dashboard - User Management</h2>
|
||||
|
||||
<!-- Create/Edit Form -->
|
||||
<div class="card">
|
||||
<h3>{{ editingUser ? 'Edit User' : 'Create New User' }}</h3>
|
||||
<form @submit.prevent="handleSubmit" class="user-form">
|
||||
<div class="form-group">
|
||||
<label for="email">Email *</label>
|
||||
<input
|
||||
id="email"
|
||||
v-model="formData.email"
|
||||
type="email"
|
||||
required
|
||||
placeholder="user@example.com"
|
||||
:disabled="!!editingUser"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="full_name">Full Name *</label>
|
||||
<input
|
||||
id="full_name"
|
||||
v-model="formData.full_name"
|
||||
type="text"
|
||||
required
|
||||
placeholder="John Doe"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-group" v-if="!editingUser">
|
||||
<label for="password">Password *</label>
|
||||
<input
|
||||
id="password"
|
||||
v-model="formData.password"
|
||||
type="password"
|
||||
:required="!editingUser"
|
||||
placeholder="Minimum 8 characters"
|
||||
minlength="8"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="role">Role *</label>
|
||||
<select id="role" v-model="formData.role" required>
|
||||
<option value="user">User</option>
|
||||
<option value="admin">Admin</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="organization">Organization</label>
|
||||
<input
|
||||
id="organization"
|
||||
v-model="formData.organization"
|
||||
type="text"
|
||||
placeholder="Optional organization"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="btn btn-primary" :disabled="loading">
|
||||
{{ editingUser ? 'Update' : 'Create' }}
|
||||
</button>
|
||||
<button
|
||||
v-if="editingUser"
|
||||
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 - User Management</h2>
|
||||
<button class="btn btn-primary" @click="openCreateModal">
|
||||
Create New User
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Filters -->
|
||||
@@ -165,6 +94,79 @@
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Create/Edit User Modal -->
|
||||
<div v-if="showFormModal" class="modal" @click.self="closeFormModal">
|
||||
<div class="modal-content">
|
||||
<h3>{{ editingUser ? 'Edit User' : 'Create New User' }}</h3>
|
||||
<form @submit.prevent="handleSubmit" class="user-form">
|
||||
<div class="form-group">
|
||||
<label for="email">Email *</label>
|
||||
<input
|
||||
id="email"
|
||||
v-model="formData.email"
|
||||
type="email"
|
||||
required
|
||||
placeholder="user@example.com"
|
||||
:disabled="!!editingUser"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="full_name">Full Name *</label>
|
||||
<input
|
||||
id="full_name"
|
||||
v-model="formData.full_name"
|
||||
type="text"
|
||||
required
|
||||
placeholder="John Doe"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-group" v-if="!editingUser">
|
||||
<label for="password">Password *</label>
|
||||
<input
|
||||
id="password"
|
||||
v-model="formData.password"
|
||||
type="password"
|
||||
:required="!editingUser"
|
||||
placeholder="Minimum 8 characters"
|
||||
minlength="8"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="role">Role *</label>
|
||||
<select id="role" v-model="formData.role" required>
|
||||
<option value="user">User</option>
|
||||
<option value="admin">Admin</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="organization">Organization</label>
|
||||
<input
|
||||
id="organization"
|
||||
v-model="formData.organization"
|
||||
type="text"
|
||||
placeholder="Optional organization"
|
||||
/>
|
||||
</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">
|
||||
{{ editingUser ? 'Update' : 'Create' }}
|
||||
</button>
|
||||
<button type="button" class="btn btn-secondary" @click="closeFormModal">
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Reset Password Modal -->
|
||||
<div v-if="resetPasswordUser" class="modal" @click.self="closeResetPassword">
|
||||
<div class="modal-content">
|
||||
@@ -206,6 +208,7 @@ const loading = ref(false)
|
||||
const error = ref('')
|
||||
const success = ref('')
|
||||
const editingUser = ref<User | null>(null)
|
||||
const showFormModal = ref(false)
|
||||
const resetPasswordUser = ref<User | null>(null)
|
||||
const newPassword = ref('')
|
||||
const filterRole = ref('')
|
||||
@@ -259,8 +262,8 @@ const handleSubmit = async () => {
|
||||
success.value = 'User created successfully!'
|
||||
}
|
||||
|
||||
resetForm()
|
||||
await loadUsers()
|
||||
closeFormModal()
|
||||
|
||||
// Clear success message after 3 seconds
|
||||
setTimeout(() => {
|
||||
@@ -273,6 +276,11 @@ const handleSubmit = async () => {
|
||||
}
|
||||
}
|
||||
|
||||
const openCreateModal = () => {
|
||||
resetForm()
|
||||
showFormModal.value = true
|
||||
}
|
||||
|
||||
const startEdit = (user: User) => {
|
||||
editingUser.value = user
|
||||
formData.value = {
|
||||
@@ -282,10 +290,11 @@ const startEdit = (user: User) => {
|
||||
role: user.role,
|
||||
organization: user.organization || ''
|
||||
}
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' })
|
||||
showFormModal.value = true
|
||||
}
|
||||
|
||||
const cancelEdit = () => {
|
||||
const closeFormModal = () => {
|
||||
showFormModal.value = false
|
||||
resetForm()
|
||||
}
|
||||
|
||||
@@ -363,6 +372,19 @@ onMounted(() => {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 24px;
|
||||
flex-wrap: wrap;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.page-header h2 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
|
||||
Reference in New Issue
Block a user