Skip to main content

​
Form Module

The Form module handles all form-related functionality for creating and editing reviews. It manages form submission, data collection, validation, and coordinates with other modules to persist review data.

​
Overview

The Form module is responsible for:
  • Capturing form submission events
  • Collecting review data from form inputs
  • Managing loading states during submission
  • Coordinating with StarRating module for rating values
  • Saving or updating reviews through DataStore
  • Error handling and user feedback
Source: src/js/modules/form.js

​
Public Methods

​
init()

Initializes the form module by attaching event listeners to the review form.
​
none
void
This method takes no parameters
Returns: void Usage: 
// From src/js/app.js
Form.init();
Behavior:
  • Finds the reviewForm element by ID
  • Attaches a submit event listener that calls handleSubmit()
  • Called during application initialization

​
handleSubmit(e)

Handles the form submission event, collects review data, and saves it to the database.
​
e
Event
required
The form submission event object
Returns: Promise<void> Usage: 
// Internal usage - called automatically on form submit
// From src/js/modules/form.js:12
async handleSubmit(e) {
  e.preventDefault();
  // ... form handling logic
}
Process Flow:
  1. Prevent Default: Prevents the default form submission behavior
  2. Loading State: Disables submit button and shows loading spinner
  3. Data Collection: Gathers data from all form inputs
  4. Reviewer Selection: Only includes data for active reviewers (checked checkboxes)
  5. Date Handling: Uses current date if visit date is not specified
  6. Save/Update: Creates new review or updates existing one based on editId
  7. Close Modal: Closes the add/edit modal on success
  8. Error Handling: Shows alert on error and logs to console
  9. Restore State: Re-enables submit button regardless of outcome

​
Form Data Structure

The form collects the following data structure: 
// Review data object created by handleSubmit
{
  restaurant: "Restaurant Name",        // String (required)
  dish: "Dish Name",                   // String (required)
  photo: "https://image-url.com/...",  // String URL (required)
  date: "05/03/2026",                  // String in DD/MM/YYYY format
  reviewers: {
    gian: {                            // Optional - only if gianActive checkbox is checked
      rating: 9,                       // Number 0-10
      review: "Review text"            // String
    },
    yami: {                            // Optional - only if yamiActive checkbox is checked
      rating: 8,                       // Number 0-10
      review: "Review text"            // String
    }
  }
}

​
Form Fields

​
Basic Information

​
restaurant
string
required
Name of the restaurant (input with autocomplete dropdown)
​
dish
string
required
Name of the dish being reviewed
​
photo
string (URL)
required
URL to the dish photo
​
visitDate
string (date)
Date of visit in YYYY-MM-DD format. If empty, current date is used.

​
Reviewer Data

​
gianActive
boolean
Checkbox to include/exclude Gian’s review. Default: checked
​
gianRating
number
Gian’s rating (1-10), managed by StarRating module
​
gianReview
string
Gian’s review text
​
yamiActive
boolean
Checkbox to include/exclude Yami’s review. Default: checked
​
yamiRating
number
Yami’s rating (1-10), managed by StarRating module
​
yamiReview
string
Yami’s review text

​
Edit Mode

The form supports editing existing reviews through a special data attribute: 
// Set by Modal.openEditModal()
form.dataset.editId = "review-id-123";
When form.dataset.editId is present:
  • Form calls DataStore.updateReview(id, data) instead of addReview()
  • Existing review data is pre-populated in form fields
  • Submit button text may change to “Update” instead of “Save”

​
Dependencies

The Form module depends on:
  • StarRating: To get rating values (StarRating.ratings.gian, StarRating.ratings.yami)
  • DataStore: To save/update reviews (DataStore.addReview(), DataStore.updateReview())
  • Utils: For date formatting (Utils.formatDate())
  • Modal: To close the form modal after submission (Modal.toggleAddModal())

​
Loading States

During form submission: 
// Before submission
submitBtn.disabled = true;
submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Guardando...';

// After completion (success or error)
submitBtn.disabled = false;
submitBtn.innerHTML = originalText; // Restored to "Guardar Reseña" or "Update"

​
Error Handling

The module handles errors gracefully: 
try {
  // Submit review
} catch (error) {
  console.error('Error guardando reseña:', error);
  alert('Error al guardar la reseña. Por favor, intenta de nuevo.');
} finally {
  // Always restore button state
  submitBtn.disabled = false;
  submitBtn.innerHTML = originalText;
}
Errors are currently displayed using browser alert(). In production, consider using a more user-friendly notification system.

​
Validation

Current validation is handled by HTML5 form validation:
  • Restaurant, dish, and photo fields are marked as required
  • Photo field has type="url" for URL validation
  • Visit date uses type="date" for date picker
Additional client-side validation can be added before the try block in handleSubmit() to check for valid ratings or review text.

​
Usage Example

// Initialize the form module
import { Form } from './modules/form.js';

// In your app initialization
Form.init();

// Form now handles submissions automatically
// Users can fill the form and click "Guardar Reseña"
// The form will collect data, save to Firebase, and close the modal

Build docs developers (and LLMs) love

Get started for freeTalk to us