Блог

Мой компонент Svelte настроен на поиск всех пользователей в документе MongoDB и перечисление их в таблице. При нажатии на заголовок столбца коллекция должна сортироваться по этому столбцу / полю, и она должна переключать направление сортировки при последующих щелчках.

Раздел » Мой сценарий»:

   $: sortColumn = 'name';
  $: sortDirection = 'asc';
  $: sortParameters = setSortParams(sortColumn, sortDirection);
  $: contactList = [];

  function getContactList(sortObj) {
    contactList = Contacts.find({
        isBlocked: false,
        isDeleted: { $ne: true }
      },
      {
        sort: sortObj
      }).fetch();
    contactList = contactList;
  }

  onMount(() => {
    getContactList(setSortParams(sortColumn, sortDirection));
  });

  function changeSortDirection() {
    if (sortDirection === 'asc') {
      sortDirection = 'desc';
    } else {
      sortDirection = 'asc';
    }
  }

  function sortByColumn(col) {
    if (col === sortColumn) {
      changeSortDirection();
    } else {
      sortDirection = 'asc';
    }
    sortColumn = col;
    getContactList(setSortParams(sortColumn, sortDirection));
  }

  function setSortParams(sortField, sDirection) {
    let sortParams = [];
    let direction = sDirection || 1;
    let field = sortField || 'name';

    if (direction === 'asc') {
      direction = 1;
    } else {
      direction = -1;
    }

    if (field === 'name') {
      sortParams.push(['firstName', direction]);
      sortParams.push(['lastName', direction]);
    } else {
      sortParams.push([field, direction]);
    }
    
    sortParams = sortParams;
    return sortParams;
  }
 

И соответствующая часть моего стройного файла:

 {#each columns as column}
    <th class="contact-table__column contact-table__column-header"
        on:click={() => sortByColumn(column.type)}>
        <span class="contact-table__title">{column.display} {sortDirection}</span>
    </th>
{/each}
 

Коллекция переупорядочивается, когда я нажимаю на другой заголовок столбца, но она не переупорядочивается, когда я нажимаю на тот же заголовок (она должна переключаться между порядком сортировки ASC и DESC).

Я новичок в Svelte и Meteor, поэтому уверен, что есть несколько вещей, которые я делаю неправильно. Я ценю любую помощь.