Changing Repeater Order with Input Buttons

Ask the community
,
1

Hello,

This is my first time posting on the form! Hopefully I’m not on the wrong track here with how I’m going about this.

I want my employees to be able to change the order of “jobs” (repeater items) in a repeater, which is connected to a dataset. They are currently sorted by the field “sorting” where I have placed a number from 1 to 10.

I would like the employee to be able to press an arrow up button or arrow down button to change the order of the jobs. This needs to be saved for other employees to see.

So far I have this:

import wixData from 'wix-data';

$w.onReady(function () {
 $w("#buttonUp").onClick( (event) => {

    let $item = $w.at(event.context);
    console.log($w("#dataset1").getCurrentItem())
    $w("#dataset1").setFieldValue("sorting", "1");
    $w("#dataset1").save();
    console.log($w("#dataset1").getCurrentItem())   
  } );

});

And this is what the test site looks like:

954×772 17.5 KB

Currently, if I click the “up” arrow, it changes the value of my “sorting” field to 1. This is as far as I got before I decided I would need help.

When the buttonUp is clicked, I would like the value of the “sorting” to subtract 2. Additionally, I would like to add 1 to all “sorting” fields.

When the buttonDown is clicked, I would like the value of the “sorting” to add 2. Additionally, I would like to subtract 1 from all “sorting” fields.

How can I do this? Thank you very much for any and all help.

2

If you wish to switch the sorting values between the current and previous items, you can try something like:

import wixData from 'wix-data';
let data;
$w.onReady(() => {
$w("#dataset1").onReady(() => $w("#dataset1").getItems(0, 1000).then(r => data = r.items));
$w('#buttonUp').onClick(event => {
const index = data.findIndex(e => e._id === event.context.itemId );
if(index === 0){return;}//i.e. do nothing if it's the first item
const [previousItem, currentItem] = [data[index - 1], data[index]];
[currentItem.sorting, previousItem.sorting] = [previousItem.sorting, currentItem.sorting];
data[index - 1] = currentItem;
data[index] = previousItem;
$('#repeater').data = [];
$('#repeater').data = data;
wixData.bulkUpdate('CollectionName', [previousItem, currentItem]);
})
})

(But maybe you’d like to add a ‘Save’ button to avoid too many save events on every single click.)

3

Wow!!! Thanks so much, this works. I’ll be working on reverse-engineering this so I can make the down arrow work as well.

Thanks so much for your response, if you have time or energy to help me with the down arrow, I would appreciate it, though you’ve already helped so much. Thanks again!

4

I figured it out! This is code for the down arrow in case anyone else needs it.

$w('#buttonDown').onClick(event => {
const index = data.findIndex(e => e._id === event.context.itemId );
if(index === 10){return;}//i.e. do nothing if it's the last item
const [previousItem, currentItem] = [data[index + 1], data[index]];
[currentItem.sorting, previousItem.sorting] = [previousItem.sorting, currentItem.sorting];
data[index + 1] = currentItem;
data[index] = previousItem;
$w('#repeater5').data = [];
$w('#repeater5').data = data;
wixData.bulkUpdate('StoneJobs', [previousItem, currentItem]);
})
5

@melissa48265 yes. but in line 3:

if(index === data.length - 1){return;}

So you won’t have to change the code if you decide to show more or less than 10 items.

Also in this case, it will make more sense if you name the variable “nextItem” and not “previousItem” (as it is the next item).

6

Oh, you’re right! Made those changes, thank you again!