Pretius APEX Nested Reports

var 
  icon              = this.data.triggeringElement.find('.fa'),
  iconUp            = 'fa-arrow-up',
  iconDown          = 'fa-arrow-down';

if ( this.data.isExpanding == true ) {  
  icon.data('initClass', icon.attr('class'));
  icon.removeAttr('class');
  icon.addClass('fa '+iconDown+' animated');  
}
else if ( this.data.isExpanded == true ) {  
  icon.removeAttr('class');  
  icon.addClass('fa '+iconUp);
}
else if ( this.data.isCollapsing == true ) {  
  icon.removeAttr('class');  
  icon.addClass('fa '+iconUp+' animated');
}
else if ( this.data.isCollapsed == true ) {  
  icon.removeAttr('class');
  icon.addClass( icon.data('initClass') );
}
else {   
  null;
}

select 
  case
    when count(EMPNO)-1 = 0 then '-'
    else '<a href="javascript: void(0)"'||
         'class="levelsGetInferiors"><span class="fa fa-sitemap"></span></a>'||
         '<span class="EMPNO hidden">'||EMPNO||'</span>'
  end             as derivied01_fa_sitemap,
  EMPNO           as "Empno",
  ENAME           as "Name",
  JOB             as "Job",
  SAL             as "Salary",
  NVL(COMM, 0)    as "Commission",
  count(EMPNO)-1  as "Inferiors"
from 
  emp
where
  mgr = '#EMPNO#'
connect by prior 
  mgr = empno
group by
  EMPNO,
  ENAME,
  JOB,
  SAL,
  COMM

<p>
  <a href="javascript: void(0)" title="Expand all personal data" class="nestedreport--expandAll t-Button t-Button--small t-Button--simple" selector=".showPersonal">
    Expand all <span class="fa fa-chevron-down"></span>
  </a> 
  <a href="javascript: void(0)" title="Collapse all expanded" class="nestedreport--slideupAll t-Button t-Button--small t-Button--simple" selector=".showPersonal">
    Collapse all <span class="fa fa-chevron-up"></span>
  </a>
  <a href="javascript: void(0)" title="Collapse all expanded" class="nestedreport--refresh t-Button t-Button--small t-Button--simple" selector=".showPersonal">
    Refresh <span class="fa fa-refresh"></span>
  </a>
</p>
#DEFAULT_TEMPLATE#

<div class="personal--container">
  {{#data}}
  <p>
    <a href="javascript: void(0)" onclick="{{EDIT_URL}}" class="personalDataDialog t-Button t-Button--small t-Button--simple">
      <span class="fa fa-edit"></span> Edit 
    </a><a href="javascript: void(0)" title="Collapse all expanded" class="nestedreport--slideup t-Button t-Button--small t-Button--simple">
      Collapse <span class="fa fa-chevron-up"></span>
    </a><a href="javascript: void(0)" title="Collapse all expanded" class="nestedreport--slideup t-Button t-Button--small t-Button--simple" duration="1500">
      Collapse (1500ms) <span class="fa fa-chevron-up"></span>
    </a>
    <a href="javascript: void(0)" title="Collapse all expanded" class="nestedreport--refresh t-Button t-Button--small t-Button--simple" selector=".showPersonal">
      Refresh <span class="fa fa-refresh"></span>
    </a>
  </p>  
  
  <table cellpadding="0" cellspacing="0" class="personalData">
    <tr>
      <td class="label">Employee name</td>
      <td class="value">{{{ENAME}}}</td>
      <td class="label">Employee ID</td>
      <td class="value">{{EMPNO}}</td>
    </tr>
    <tr>
      <td class="label">Phone number</td>
      <td class="value">{{{PHONE}}}</td>
      <td class="label">Employee e-mail</td>
      <td class="value">{{{EMAIL}}}</td>
    </tr>
    <tr>
      <td class="label">City</td>
      <td class="value">{{{CITY}}}</td>
      <td class="label">Hire date</td>
      <td class="value">{{HIREDATE}}</td>
    </tr>
    <tr>
      <td class="label">Address</td>
      <td class="value">{{{ADDRESS}}}</td>
      <td class="label"></td>
      <td class="value"></td>
    </tr>
    <tr>
      <td class="label">Postal code</td>
      <td class="value">{{{POSTAL_CODE}}}</td>
      <td class="label"></td>
      <td class="value"></td>
    </tr>
  </table>
  {{/data}}
</div>