Dropdown element sort

[John-Dunham]

I have a dropdown filter that live filters my dataset. It all functions correctly however the month elements are sorted alphabetically. I need them in month order Jan, Feb, Mar Apr, etc. It is understood that this functionality does not exist yet and the only way to correct is with code and Velo.

I have tried to have AI write the code with no success.

See the dropdown on this page

Events (List) | Thermop OnLine

Any code to solve this problem is appreciated.

Here is what I got from Code With AI: Write Velo Code. It does not work.

const MONTH_ORDER = [
  "jan",
  "feb",
  "mar",
  "apr",
  "may",
  "jun",
  "jul",
  "aug",
  "sep",
  "oct",
  "nov",
  "dec"
];

$w.onReady(() => {
  const dropdown = $w("#monthDropdown");
  const originalOptions = dropdown.options || [];

  const sortedOptions = originalOptions
    .map((option, index) => ({
      option,
      index,
      monthIndex: getMonthIndex(option.label)
    }))
    .sort((first, second) => {
      const firstOrder = first.monthIndex === -1 ? MONTH_ORDER.length : first.monthIndex;
      const secondOrder = second.monthIndex === -1 ? MONTH_ORDER.length : second.monthIndex;

      return firstOrder - secondOrder || first.index - second.index;
    })
    .map(({ option }) => option);

  dropdown.options = sortedOptions;
});

function getMonthIndex(label) {
  const abbreviation = String(label || "")
    .trim()
    .slice(0, 3)
    .toLowerCase();

  return MONTH_ORDER.indexOf(abbreviation);
}

[noahlovell]

Since the dropdown is connected to a dataset, I imagine the code is running before the dataset has populated the dropdown.

Should be as simple a fix as wrapping the code within the $w.onReady(() => {}) with $w("#dataset1").onReady(() => {})

So something like:

const MONTH_ORDER = [
    "jan",
    "feb",
    "mar",
    "apr",
    "may",
    "jun",
    "jul",
    "aug",
    "sep",
    "oct",
    "nov",
    "dec"
];

$w.onReady(() => {
    $w("#dataset1").onReady(() => {

        const dropdown = $w("#monthDropdown");
        const originalOptions = dropdown.options || [];

        const sortedOptions = originalOptions
            .map((option, index) => ({
                option,
                index,
                monthIndex: getMonthIndex(option.label)
            }))
            .sort((first, second) => {
                const firstOrder = first.monthIndex === -1 ? MONTH_ORDER.length : first.monthIndex;
                const secondOrder = second.monthIndex === -1 ? MONTH_ORDER.length : second.monthIndex;

                return firstOrder - secondOrder || first.index - second.index;
            })
            .map(({ option }) => option);

        dropdown.options = sortedOptions;
    })
});

function getMonthIndex(label) {
    const abbreviation = String(label || "")
        .trim()
        .slice(0, 3)
        .toLowerCase();

    return MONTH_ORDER.indexOf(abbreviation);
}

Worth noting that the “All” and “-None-” option will be at the end of the list