How to reorder grouped items with ion-reorder

Question

I'm trying to use ion-reorder to reorder some items in a page. These item are organized in groups, so a group has several items. I want to organize these items inside the group, but more importantly I want to be able to change the item from a group to another.

I'm facing 2 problems currently:

I can't update the array, consequently the item orders are not show correctly when changed.
I can't move a item outside it's group, consequently I can't move to another group.

html

   
    
        
            {{group.name}}           
            
                
                
                    {{item.name}}

typescript

interface Item {
    id: number,
    name: string
}
interface Group {
    name: string,
    items: Item[]
}
interface GroupArray extends Array{}

...

private groupArray: GroupArray = [
    {
        name: 'FirstGroup',
        items: [
            {
                id: 1,
                name: 'FirstItem'
            },{
                id: 2,
                name: 'SecondItem'
            },{
                id: 3,
                name: 'ThirdItem'
            }
        ]
    },
    {
        name: 'SecondGroup',
        items: [
            {
                id: 4,
                name: 'FourthItem'
            },{
                id: 5,
                name: 'FifthItem'
            },{
                id: 6,
                name: 'SixthItem'
            }
        ]
    }       
];

/** Reorder */
doReorder(ev: CustomEvent) {
    this.groupArray = ev.detail.complete(this.groupArray);
}

I tried to move the to several positions, but this is the only one I managed to move the correct items. If I move up, above , the whole list becomes draggable and I can't move the item.

I understand that this is happening because the is created 2 times, but I can't think in a way to create only one time and maintain the same aspect, which is exactly like the documentation page that I linked. The difference is that in there they load the items individually, and the groups are just another item that can be drag around.

The other problem I believe is related to how complete() works. Although it expects any[] as a parameter, I don't think it was made to support a complex structure, just a simple array.

How can I solve these two problems?

I'm using Ionic 5 with Angular 10

StackBlitz

user_5613720 · Answer

For the reording issue, you have two things

You are sending the wrong items to the complete function, it should be the rendered items (groupArray[index].items), not the root object itself (groupArray).
The ion-list-header should be above the ion-reorder-group, so Ionic won't treat it as a child of the ion-reorder-group and mess up the reording logic for the array.

Even though the example in the attached link for the ion-reorder is using one big ion-reorder-group and the ion-list-header to add some list headers, but this won't work if you need to update the array using the complete.

You can do something like this to make it work:

doReorder(ev: CustomEvent, groupId: number) {
  let groupToChangeIndex = this.groupArray.findIndex(
    group => group.id === groupId
  );
  this.groupArray[groupToChangeIndex].items = ev.detail.complete(
    this.groupArray[groupToChangeIndex].items
  );
}

HTML:


  
    {{group.name}}
    
      
        
        
          {{item.name}}

At the same time, you can't move an ion-item from one group to another. What I can think of for handling this issue is to have one big ion-reorder-group with the ion-list-header, and do the reording manually. Accessing the target property from the event that was sent to the doReorder function, then you can access the children, filter only the ion-item then reflect the sorting to the array (even though it is a very ugly workaround).

Update

I actually thought of a better solution. You can create a new array that contains all the items flattened. Then when you want to submit you changes, there will be a function that will create the new order for you. You can check the following Stackblitz: https://stackblitz.com/edit/ionic-5-angular-10-start-template-zasssd?file=src/app/tab1/tab1.page.ts

constructor() {
  this.allItemsFlattened = this.groupArray.flatMap((group, index) => [
    { isHeader: true, index: index, name: group.name },
    ...group.items
  ]);
}

/** Reorder objects in array */
doReorder(ev: CustomEvent) {
  this.allItemsFlattened = ev.detail.complete(this.allItemsFlattened);
}

getRightOrder() {
  const rightOrder = this.allItemsFlattened.reduce((accumlator, item) => {
    if (item.isHeader) {
      const { id, name, ...rest } = this.groupArray[item.index];
      accumlator.push({ id, name, items: [] });
    } else {
      accumlator[accumlator.length - 1].items.push(item);
    }
    return accumlator;
  }, []);
  console.log(rightOrder);
}

user_11647108 · Answer

I personally used this approach.

ngOnint(){
this.item.items = result[1]; 

if (this.item?.itemSortOrder != null) {
// converting string to array
let itemSortOrder= this.item.itemSortOrder.split(","); 

this.newIndexArray = itemSortOrder
                           .map((i) => this.item.items.find((j) => j.id === i))
                           .filter(e => e !== undefined && e !== null); 
    }}
    
doReorder(ev: CustomEvent) {
    console.log('Dragged from index', ev.detail.from, 'to', ev.detail.to);
    this.newIndexArray = ev.detail.complete(this.newIndexArray);
  }

saveReorder() {
    let newOrderPosition: string[] = [];
    this.newIndexArray.forEach((x) => {
      newOrderPosition.push(x.id); //adding sorted new item id's to an array
    })

    //array to string
    this.item.itemSortOrder = newOrderPosition.toString();

   //Passing the newArray order of items to the server
    this.newService.updateCatalog(this.item)
      .subscribe((result) => {
        console.log(result);
      });
  }

How to reorder grouped items with ion-reorder

2 Answers

Update