apply sorting in apex repeat tag

Question

I'm new in Salesforce. I've created a custom field (type text (10) ) in accounts. I want to group accounts by text (level 1, level 2, level 3) and add drag and drop to move account in groups. Thank you.

This is my code:

<apex:page controller="TheController" action="{!load}">
<apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"/>
<apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"/>

<apex:stylesheet value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css"/>

<script>
    $(document).ready(function(){
        implementSortable();
        });

    function implementSortable(){
        $( "#sortable" ).sortable();
        $( "#sortable" ).disableSelection();
    }
</script>

    <apex:repeat value="{!levels}" var="level">
        <apex:pageBlock title="{!level}">

                <ul id="sortable">

                <apex:repeat value="{!accounts}" var="account">
                    <apex:outputPanel id="sortable" rendered="{!IF(level=account.level__c,true,false)}">
                        <li>{!account.Name} - {!account.level__c}<br/></li>         
                    </apex:outputPanel>                                                                      
                </apex:repeat>
            </ul>
        </apex:pageBlock>
    </apex:repeat>   

public with sharing class TheController {

public List<Account> accounts {get;set;}
public String[] levels {get;set;}

public void load(){
    accounts = [SELECT Id, Name, level__c FROM Account WHERE level__c IN ('level 1', 'level 2', 'level 3')];

    Set<String> levelSet = new Set<String>();
    for (Account a : accounts)
        levelSet.add(a.level__c);

    levels = new String[levelSet.size()];
    Integer i = 0;
    for (String level : levelSet){
        levels[i] = level;
        i++;
    }
    }
}

Update: I'm still stuck:

I tried this :

    public with sharing class TheController {
    public List<Account> accounts {get;set;}

    Map<String, List<Account>> levelToAccountsMap = new Map <String, List<Account>>();

    public void load(){
        accounts = [Select Id, Name, level__c from Account];
        for (Account a: accounts){
            levelToAccountsMap.put(a.level__c, a.Name);
        }
        return levelToAccountsMap;
    }
}

But I get "Incompatible value type String for Map>. level__c is a String. I don't understand.

Answer 1

There are 2 things that you need to do

1. Displaying accounts level wise - to do that you need to have a map in controller:

Map<String, List<Account>> levelToAccountsMap = new Map <String, List<Account>>();

In VF page use this code

<apex:repeat value="{!levelToAccountsMap }" var="level">
    <apex:repeat value="{!levelToAccountsMap[level]}" var="acc">
        <apex:outputPanel  class="acc_sort" >
            <li>{!acc.Name} - {!acc.level__c}<br/></li>         
        </apex:outputPanel>     
    </apex:repeat>                                                                 
</apex:repeat>

2. For drop you need to write a handler which will call an action function to update the dropped account with new level

$( ".acc_sort" ).droppable({
    drop: function( event, ui ) {
        // call your apex function here
    }
});

Answer 2

Repeat tag does not have ability to soft the data. Ref: https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_compref_repeat.htm

So the best thing to do is sort data in apex controller and then pass is to VF.

For ex:

public void load(){
    accounts = [SELECT Id, Name, level__c FROM Account WHERE level__c IN ('level 1', 'level 2', 'level 3')];

    Set<String> levelSet = new Set<String>();
    for (Account a : accounts)
        levelSet.add(a.level__c);

    levels = new String[levelSet.size()];
    Integer i = 0; 
    for (String level : levelSet){
        levels[i] = level;
        i++;
    }
    levels.sort(); //Sort the list 
    }
}

PS: optimization is kept out of scope intentionally