Feat/capture starting ending meal for utsav

[pallavisavla]

No description provided.

[gemini-code-assist]

Code Review

This pull request introduces "Starting Meal" and "Ending Meal" selection fields to the Utsav creation and update forms, conditionally displaying them based on the location and dates. The review feedback focuses on improving the user experience and robustness of these conditional fields. Specifically, it suggests avoiding clearing selected options on every keystroke of the location input, conditionally gathering and sending meal selections during form submission, and adding defensive checks to prevent runtime errors if DOM elements are missing or if values are not in the expected format.

[gemini-code-assist]

Instead of always gathering meal selections from the DOM, we should only gather and send them if the location is 'Research Centre' (and for ending meal, if start and end dates are different). This prevents sending stale or incorrect selections if the user accidentally typed in the location field and then corrected it.

    const isRC = formData.get('location')?.trim() === 'Research Centre';
    const start = formData.get('start_date');
    const end = formData.get('end_date');
    const startingMealEl = document.getElementById('starting_meal');
    const endingMealEl = document.getElementById('ending_meal');
    const startingMeal = (isRC && startingMealEl) ? Array.from(startingMealEl.selectedOptions).map(o => o.value) : [];
    const endingMeal = (isRC && start !== end && endingMealEl) ? Array.from(endingMealEl.selectedOptions).map(o => o.value) : [];

[gemini-code-assist]

Clearing the selected options on every keystroke of the location input (via the input event listener) leads to a poor user experience. If a user makes a typo or temporarily changes the location, all their selected meals are instantly wiped out. Instead, we should only toggle the visibility of the fields here, and handle clearing/filtering the data during form submission. Additionally, let's add defensive checks to prevent runtime errors if any DOM elements are missing.

  function toggleMealFields() {
    const locationEl = document.getElementById('location');
    const startingMealEl = document.getElementById('starting_meal');
    const endingMealEl = document.getElementById('ending_meal');
    if (!locationEl || !startingMealEl || !endingMealEl) return;

    const location = locationEl.value.trim();
    const isRC = location === 'Research Centre';
    const startingMealGroup = startingMealEl.closest('.form-group');
    const endingMealGroup = endingMealEl.closest('.form-group');

    if (!startingMealGroup || !endingMealGroup) return;

    if (!isRC) {
      startingMealGroup.style.display = 'none';
      endingMealGroup.style.display = 'none';
      return;
    }

    startingMealGroup.style.display = '';

    const start = document.getElementById('start_date').value;
    const end = document.getElementById('end_date').value;
    if (start && end && start === end) {
      endingMealGroup.style.display = 'none';
    } else {
      endingMealGroup.style.display = '';
    }
  }

[gemini-code-assist]

Let's make prefillSelect more robust by checking if the select element exists and ensuring values is treated as an array to prevent runtime errors.

Suggested change

	const prefillSelect = (id, values) => {
	if (!values) return;
	const select = document.getElementById(id);
	Array.from(select.options).forEach(opt => {
	opt.selected = values.includes(opt.value);
	});
	};
	const prefillSelect = (id, values) => {
	if (!values) return;
	const select = document.getElementById(id);
	if (!select) return;
	const valueArray = Array.isArray(values) ? values : [values];
	Array.from(select.options).forEach(opt => {
	opt.selected = valueArray.includes(opt.value);
	});
	};

[gemini-code-assist]

Similar to createUtsav.js, we should only gather and send the meal selections if the location is 'Research Centre' (and for ending meal, if start and end dates are different) to avoid losing user selections during typing or editing.

    const isRC = utsavForm.get('location')?.trim() === 'Research Centre';
    const start = utsavForm.get('start_date');
    const end = utsavForm.get('end_date');
    const startingMealEl = document.getElementById('starting_meal');
    const endingMealEl = document.getElementById('ending_meal');
    const startingMeal = (isRC && startingMealEl) ? Array.from(startingMealEl.selectedOptions).map(o => o.value) : [];
    const endingMeal = (isRC && start !== end && endingMealEl) ? Array.from(endingMealEl.selectedOptions).map(o => o.value) : [];

[gemini-code-assist]

In toggleMealFields, clearing the selected options on every keystroke of the location input leads to a poor user experience. Let's update this to only toggle the visibility of the fields, and handle clearing/filtering the data during form submission. Also, let's add defensive checks to prevent runtime errors if any DOM elements are missing.

  function toggleMealFields() {
    const locationEl = document.getElementById('location');
    const startingMealEl = document.getElementById('starting_meal');
    const endingMealEl = document.getElementById('ending_meal');
    if (!locationEl || !startingMealEl || !endingMealEl) return;

    const location = locationEl.value.trim();
    const isRC = location === 'Research Centre';
    const startingMealGroup = startingMealEl.closest('.form-group');
    const endingMealGroup = endingMealEl.closest('.form-group');

    if (!startingMealGroup || !endingMealGroup) return;

    if (!isRC) {
      startingMealGroup.style.display = 'none';
      endingMealGroup.style.display = 'none';
      return;
    }

    startingMealGroup.style.display = '';

    const start = document.getElementById('start_date').value;
    const end = document.getElementById('end_date').value;
    if (start && end && start === end) {
      endingMealGroup.style.display = 'none';
    } else {
      endingMealGroup.style.display = '';
    }
  }