[HELP] How to format this list in ionic, based on example?

Ionic Framework ionic-v3
1

I need to create a list in the format of the attached example, but I’m having trouble creating the vertical line before the information. I also need to group the data by date, I’m using SQLite because the write of the data will be local. I have difficulty with these two questions.

2

See: https://github.com/ionic-team/ionic-conference-app/blob/master/src/pages/schedule/schedule.html

See: sql - SQLite Order By Date1530019888000 - Stack Overflow

3

Hi @robinyo

I am trying to implement the vertical line, but it is not working, it follows the code:

//** HTML **// 

    <ion-list>
        <ion-item-sliding *ngFor="let l of lancamentos">
          <ion-item nopadding>
			<ion-label [ngClass]="{ 'despesa': l.tipo === 'd','receita':   l.tipo === 'r' }"></ion-label>
            <p>
              <span>{{l.data}}</span><br>
              {{l.descricao}}<br>
              <h6>{{l.conta}}</h6>
            </p>
            <h3 item-end>
              R${{l.valor}}
              Pago{{l.pago}}
            </h3>
          </ion-item>
          <ion-item-options side="right">
              <button ion-button  color="light-white"  (click)="editarLancamento(lanc.id)">
                      <ion-icon color="third" name="create"></ion-icon>
                  </button>
              <button ion-button  color="light-white"  (click)="removeLancamento(lanc)">
                  <ion-icon color="third" name="trash"></ion-icon>
             </button>
        </ion-item-options>
        </ion-item-sliding>
      </ion-list>
	  
//** CSS **//	
	.despesa {
     border-left: 2px solid #8B0000;
     padding-left: 10px;
   }
   	.receita {
     border-left: 2px solid #2E8B57;
     padding-left: 10px;
   }

End as for the grouping, I can not do it either. Today my provider returns an object of type launch, which has the attributes (description, type, date, account, category, payment) but I need to be grouped by date, for example, today has 5 postings and on the date yesterday it has 3. Following the example that I passed I could not understand because it is being grouped by hour, where it uses an ion-item-group (to list the hours) and in the ion-item-sliding is listed the detail of the session, in my case would be listed in the group the date of release, and in the sliding information of the releases. I tried to apply to my project, but I was not successful, because in the example the data is fed with a JSON, where there is an array inside another. But in my project, my data does not come from a JSON, but from a query in the database.
I’m trying to implement this grouping in the code quoted above.