Skip to content
Snippets Groups Projects
Commit 247a92c6 authored by ddamiron's avatar ddamiron
Browse files

add paginator in pre-report

update table css for report
parent 4b94a864
Branches
Tags
5 merge requests!10New updated datalog,!9add all datalog components and services into angular gui,!8update Datalog research input,!7Datalog research input,!14Version 1.3.0
<div class="columns is-centered is-marginless"> <div class="columns is-centered is-marginless">
<div class="column is-5 has-text-left"> <div class="column is-5 has-text-left">
<br> <br>
<div *ngFor="let oneStepData of allStepsData; let i=index; let odd=odd; let even=even;"> <div *ngFor="let oneStepData of allStepsData; let i=index; let odd=odd; let even=even;">
<div *ngIf="oneStepData" (click)='getLogsSelector(oneStepData._id.step, oneStepData.counts);'> <div *ngIf="oneStepData" (click)='getLogsSelector(oneStepData._id.step, oneStepData.counts);'>
<div class="table entity-list-table"> <div class="table entity-list-table">
<div class="columns is-marginless"> <div class="data columns is-multiline is-vcentered is-marginless" [ngClass]="{ odd: odd, even: even }">
<div class="column is-6 has-text-left"> <div class="column is-6 has-text-left">
<p>Step: {{oneStepData._id.step}}</p> <p>Step: {{oneStepData._id.step}}</p><br>
</div> <p>Durée: {{oneStepData.totalHoursSpent}}h : {{oneStepData.totalMinutesSpent}}m :
</div> {{oneStepData.totalSecondsSpent}}s</p><br>
<div class="columns is-marginless"> <p>Info(s): {{oneStepData.counts.INFO}}</p>
<div class="column is-6 has-text-left"> </div>
<p>Durée: {{oneStepData.totalHoursSpent}}h : {{oneStepData.totalMinutesSpent}}m : <div class="column is-6 has-text-right">
{{oneStepData.totalSecondsSpent}}s</p> <br><br>
</div> <div class="arrows" [ngClass]="{'is-displayed': displayedStep === oneStepData._id.step}">
<div class="column is-6 has-text-right"> <svg xmlns="https://www.w3.org/2000/svg" id="chevron" viewBox="0 0 15 9">
<path
<div class="arrows" [ngClass]="{'is-displayed': displayedStep === oneStepData._id.step}"> d="M7.5 7.5c-.1 0-.3-.1-.4-.1l-6-6C1 1.1 1 .8 1.1.6s.5-.2.7 0l5.6 5.6L13 .6c.2-.2.5-.2.7 0s.2.5 0 .7l-6 6c.1.1-.1.2-.2.2z"
<svg xmlns="https://www.w3.org/2000/svg" id="chevron" viewBox="0 0 15 9"> class="brandcolor" />
<path <path
d="M7.5 7.5c-.1 0-.3-.1-.4-.1l-6-6C1 1.1 1 .8 1.1.6s.5-.2.7 0l5.6 5.6L13 .6c.2-.2.5-.2.7 0s.2.5 0 .7l-6 6c.1.1-.1.2-.2.2z" d="M7.5 7.5c-.1 0-.3-.1-.4-.1l-6-6C1 1.1 1 .8 1.1.6s.5-.2.7 0l5.6 5.6L13 .6c.2-.2.5-.2.7 0s.2.5 0 .7l-6 6c.1.1-.1.2-.2.2z"
class="brandcolor" /> class="brandcolor" />
<path </svg>
d="M7.5 7.5c-.1 0-.3-.1-.4-.1l-6-6C1 1.1 1 .8 1.1.6s.5-.2.7 0l5.6 5.6L13 .6c.2-.2.5-.2.7 0s.2.5 0 .7l-6 6c.1.1-.1.2-.2.2z" </div>
class="brandcolor" /> <p><br> Erreur(s): {{oneStepData.counts.ERROR}}</p>
</svg> </div>
</div> </div>
</div>
</div>
<div class="columns is-marginless">
<div class="column is-6 has-text-left">
<p>Erreur(s): {{oneStepData.counts.ERROR}}</p>
</div>
<div class="column is-6 has-text-left">
<p>Info(s): {{oneStepData.counts.INFO}}</p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
</div>
<div class="column is-7 has-text-left"> <div class="column is-7 has-text-left">
<div class="mini-log-card" *ngIf="allLogs?.lenght==0"> <div class="mini-log-card" *ngIf="allLogs?.lenght==0">
......
...@@ -5,18 +5,16 @@ ...@@ -5,18 +5,16 @@
<div *ngFor="let oneStepData of allStepsData; let i=index; let odd=odd; let even=even;"> <div *ngFor="let oneStepData of allStepsData; let i=index; let odd=odd; let even=even;">
<div *ngIf="oneStepData" (click)='getLogsSelector(oneStepData._id.step, oneStepData.counts);'> <div *ngIf="oneStepData" (click)='getLogsSelector(oneStepData._id.step, oneStepData.counts);'>
<div class="table entity-list-table"> <div class="table entity-list-table">
<div class="data columns is-multiline is-vcentered is-marginless" <div class="data columns is-multiline is-vcentered is-marginless" [ngClass]="{ odd: odd, even: even }">
[ngClass]="{ odd: odd, even: even }"> <div class="column is-6 has-text-left">
<div class=" columns is-marginless" >
<div class="column has-text-left">
<p>Step: {{oneStepData._id.step}}</p><br> <p>Step: {{oneStepData._id.step}}</p><br>
<p>Durée: {{oneStepData.totalHoursSpent}}h : {{oneStepData.totalMinutesSpent}}m : <p>Durée: {{oneStepData.totalHoursSpent}}h : {{oneStepData.totalMinutesSpent}}m :
{{oneStepData.totalSecondsSpent}}s</p><br> {{oneStepData.totalSecondsSpent}}s</p><br>
<p>Info(s): {{oneStepData.counts.INFO}} &nbsp; Erreur(s): {{oneStepData.counts.ERROR}}</p> <p>Info(s): {{oneStepData.counts.INFO}}</p>
</div> </div>
<div class="arrows" [ngClass]="{'is-displayed': displayedStep === oneStepData._id.step}"> <div class="column is-6 has-text-right">
<br><br>
<div class="arrows" [ngClass]="{'is-displayed': displayedStep === oneStepData._id.step}">
<svg xmlns="https://www.w3.org/2000/svg" id="chevron" viewBox="0 0 15 9"> <svg xmlns="https://www.w3.org/2000/svg" id="chevron" viewBox="0 0 15 9">
<path <path
d="M7.5 7.5c-.1 0-.3-.1-.4-.1l-6-6C1 1.1 1 .8 1.1.6s.5-.2.7 0l5.6 5.6L13 .6c.2-.2.5-.2.7 0s.2.5 0 .7l-6 6c.1.1-.1.2-.2.2z" d="M7.5 7.5c-.1 0-.3-.1-.4-.1l-6-6C1 1.1 1 .8 1.1.6s.5-.2.7 0l5.6 5.6L13 .6c.2-.2.5-.2.7 0s.2.5 0 .7l-6 6c.1.1-.1.2-.2.2z"
...@@ -26,28 +24,9 @@ ...@@ -26,28 +24,9 @@
class="brandcolor" /> class="brandcolor" />
</svg> </svg>
</div> </div>
</div> <p><br> Erreur(s): {{oneStepData.counts.ERROR}}</p>
<!-- <div class="columns is-marginless"> -->
<!-- <div class="column is-6 has-text-left">
<p>Durée: {{oneStepData.totalHoursSpent}}h : {{oneStepData.totalMinutesSpent}}m :
{{oneStepData.totalSecondsSpent}}s</p>
</div> -->
<!-- <div class="column is-6 has-text-right">
</div> -->
<!-- </div> -->
<!-- <div class="columns is-marginless">
<div class="column is-6 has-text-left">
<p>Erreur(s): {{oneStepData.counts.ERROR}}</p>
</div> </div>
<div class="column is-6 has-text-left"> </div>
<p>Info(s): {{oneStepData.counts.INFO}}</p>
</div>
</div> -->
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -61,26 +40,23 @@ ...@@ -61,26 +40,23 @@
[pageSizeOptions]="paginator.pageSizeOptions" [pageIndex]="paginator.pageIndex" [pagesToShow]="5" [pageSizeOptions]="paginator.pageSizeOptions" [pageIndex]="paginator.pageIndex" [pagesToShow]="5"
[showFirstLastButtons]="true" (page)="changePagination($event)" (pageSizeChanged)="changePageSize($event)"> [showFirstLastButtons]="true" (page)="changePagination($event)" (pageSizeChanged)="changePageSize($event)">
</app-paginator> </app-paginator>
<!-- <div class="data-list"> --> <div class="table entity-list-table is-marginless"
<div class="table entity-list-table is-marginless" *ngFor="let oneLog of allLogs; let i=index; let odd=odd; let even=even;"> *ngFor="let oneLog of allLogs; let i=index; let odd=odd; let even=even;">
<div class="data columns is-multiline is-vcentered is-marginless" <div class="data columns is-multiline is-vcentered is-marginless" [ngClass]="{ odd: odd, even: even }">
[ngClass]="{ odd: odd, even: even }"> <div class="columns is-marginless">
<div class="columns is-marginless"> <div class="column is-12 has-text-left">
<div class="column is-12 has-text-left"> <p>step: {{oneLog.step}}</p>
<p>step: {{oneLog.step}}</p> <br>
<br> <p>status: {{oneLog.status}}</p>
<p>status: {{oneLog.status}}</p> <br>
<br> <p>info: {{oneLog.info}}</p>
<p>info: {{oneLog.info}}</p> <br>
<br> <p>progress-ratio: {{oneLog.progress_ratio}}</p>
<p>progress-ratio: {{oneLog.progress_ratio}}</p>
</div>
</div> </div>
</div>
</div> </div>
</div> </div>
<div> <div>
</div> </div>
</div> </div>
</div> </div>
\ No newline at end of file
...@@ -32,6 +32,7 @@ export class LogsPreReportComponent implements OnInit { ...@@ -32,6 +32,7 @@ export class LogsPreReportComponent implements OnInit {
// Paginator options // Paginator options
paginator: PaginatorOptions; paginator: PaginatorOptions;
pageSizeOptions = [5, 10, 25, 100]; pageSizeOptions = [5, 10, 25, 100];
pageIndex: number = 1;
oneTempSlugsInfo: any = []; oneTempSlugsInfo: any = [];
...@@ -42,9 +43,9 @@ export class LogsPreReportComponent implements OnInit { ...@@ -42,9 +43,9 @@ export class LogsPreReportComponent implements OnInit {
private _fb: FormBuilder, private _fb: FormBuilder,
) { ) {
this.paginator = { this.paginator = {
pageIndex: this._dataLogsService.pageNumber, pageIndex: 1,
length: 1, length: 1,
limit: this._dataLogsService.limit, limit: 5,
pageSizeOptions: [5, 10, 20], pageSizeOptions: [5, 10, 20],
}; };
} }
...@@ -58,54 +59,38 @@ export class LogsPreReportComponent implements OnInit { ...@@ -58,54 +59,38 @@ export class LogsPreReportComponent implements OnInit {
this.isSession = true; this.isSession = true;
} }
this.getComplementaryInformation(); this.getComplementaryInformation();
this.prereportChangeSub = this._dataLogsService.infoLogChange$.subscribe(
() => {
this.paginator.limit = this._dataLogsService.limit;
this.paginator.pageIndex = this._dataLogsService.pageNumber;
this.paginator.length = this._dataLogsService.length;
this.getComplementaryInformation();
},
);
} }
completeSlugsInfos(slugList) { completeSlugsInfos(slugList) {
this.allSlugsInfoList = []; this.allSlugsInfoList = [];
for (let i = 0; i < slugList.length; i += 1) { for (let i = 0; i < slugList.length; i += 1) {
console.log('slugList[i]', slugList[i]);
this.getAllInfoForOneSlug(slugList[i]); this.getAllInfoForOneSlug(slugList[i]);
} }
} }
getAllInfoForOneSlug(slug) { getAllInfoForOneSlug(slug) {
this._dataLogsService.getAllInfoForOneSlug(slug).subscribe((result) => { this._dataLogsService.getAllInfoForOneSlug(slug).subscribe((result) => {
console.log('result[0]', result[0]);
for (let j = 0; j < result[0].data.length; j += 1) { for (let j = 0; j < result[0].data.length; j += 1) {
result[0].data[j].completionDate.$date = new Date(result[0].data[j].completionDate.$date); result[0].data[j].completionDate.$date = new Date(result[0].data[j].completionDate.$date);
} }
this.allSlugsInfoList.push(result[0]); this.allSlugsInfoList.push(result[0]);
}, },
); );
} }
completeSessionsInfos(sessionList) { completeSessionsInfos(sessionList) {
this.allSessionsInfoList = []; this.allSessionsInfoList = [];
for (let i = 0; i < sessionList.length; i += 1) { for (let i = 0; i < sessionList.length; i += 1) {
console.log('sessionList[i]', sessionList[i]);
this.getAllInfoForOneSession(sessionList[i]); this.getAllInfoForOneSession(sessionList[i]);
} }
} }
getAllInfoForOneSession(sessionId) { getAllInfoForOneSession(sessionId) {
this._dataLogsService.getAllInfoForOneSession(sessionId).subscribe((result) => { this._dataLogsService.getAllInfoForOneSession(sessionId).subscribe((result) => {
console.log('result[0]', result[0]);
for (let j = 0; j < result[0].data.length; j += 1) { for (let j = 0; j < result[0].data.length; j += 1) {
result[0].data[j].completionDate.$date = new Date(result[0].data[j].completionDate.$date); result[0].data[j].completionDate.$date = new Date(result[0].data[j].completionDate.$date);
} }
this.allSessionsInfoList.push(result[0]); this.allSessionsInfoList.push(result[0]);
}, },
); );
} }
getComplementaryInformation() { getComplementaryInformation() {
...@@ -117,25 +102,39 @@ export class LogsPreReportComponent implements OnInit { ...@@ -117,25 +102,39 @@ export class LogsPreReportComponent implements OnInit {
paramMap.get('id')))) paramMap.get('id'))))
.subscribe((response) => { .subscribe((response) => {
// HERE WE HAVE AN ARRAY TO DEAL WITH PAGINATION, NOT WITH AN HTTP GET REQUEST WITH PAGES
this.responseArray = response[0]; this.responseArray = response[0];
if (this.type === 'session') { if (this.type === 'session') {
this.nbObjects = response[0].slug_list.length; this.nbObjects = response[0].slug_list.length;
console.log('response[0]', response[0]); this.paginator.length = response[0].slug_list.length;
this.completeSlugsInfos(response[0].slug_list); this.completeSlugsInfos(response[0].slug_list.slice(0, this.paginator.limit));
} else { } else {
this.nbObjects = response[0].session_id_list.length; this.nbObjects = response[0].session_id_list.length;
console.log('response[0]', response[0]); this.paginator.length = response[0].session_id_list.length;
this.completeSessionsInfos(response[0].session_id_list); this.completeSessionsInfos(response[0].session_id_list.slice(0, this.paginator.limit));
} }
}); });
} }
// When pagination is changed by user, we update datasetList with new pagination options
// When pagination is changed by user, we update with new pagination options
changePagination(pageIndex) { changePagination(pageIndex) {
this._dataLogsService.paginationChanged(this.paginator.limit, pageIndex, this.type); this.paginator.pageIndex = pageIndex;
if (this.type === 'slug') {
this.completeSessionsInfos(this.responseArray.session_id_list.slice(
(this.paginator.pageIndex - 1) * (this.paginator.limit),
(this.paginator.pageIndex - 1) * (this.paginator.limit) + this.paginator.limit,
));
} else {
this.completeSlugsInfos(this.responseArray.slug_list.slice(
(this.paginator.pageIndex - 1) * (this.paginator.limit),
(this.paginator.pageIndex - 1) * (this.paginator.limit) + this.paginator.limit,
));
}
} }
changePageSize(pageSize) { changePageSize(pageSize) {
this._dataLogsService.paginationChanged(pageSize, 1, this.type); this.paginator.pageIndex = 1;
this.paginator.limit = pageSize;
} }
} }
...@@ -21,6 +21,7 @@ export class DataLogsService { ...@@ -21,6 +21,7 @@ export class DataLogsService {
private _errorLogSubject: Subject<any>; private _errorLogSubject: Subject<any>;
private _sessionLogSubject: Subject<any>; private _sessionLogSubject: Subject<any>;
private _slugLogSubject: Subject<any>; private _slugLogSubject: Subject<any>;
private _prereportSubject: Subject<any>;
constructor( constructor(
private _httpClient: HttpClient) { private _httpClient: HttpClient) {
...@@ -29,7 +30,7 @@ export class DataLogsService { ...@@ -29,7 +30,7 @@ export class DataLogsService {
this._errorLogSubject = new Subject<any>(); this._errorLogSubject = new Subject<any>();
this._sessionLogSubject = new Subject<any>(); this._sessionLogSubject = new Subject<any>();
this._slugLogSubject = new Subject<any>(); this._slugLogSubject = new Subject<any>();
this._prereportSubject = new Subject<any>();
this.limit = 6; this.limit = 6;
this.pageNumber = 1; this.pageNumber = 1;
this.length = 1; this.length = 1;
...@@ -224,10 +225,12 @@ export class DataLogsService { ...@@ -224,10 +225,12 @@ export class DataLogsService {
this._infoLogSubject.next(); this._infoLogSubject.next();
}if (logType === 'ERROR') { }if (logType === 'ERROR') {
this._errorLogSubject.next(); this._errorLogSubject.next();
}if (logType === 'SLUG' || logType === 'slug') { }if (logType === 'SLUG') {
this._slugLogSubject.next(); this._slugLogSubject.next();
}if (logType === 'SESSION' || logType === 'session') { }if (logType === 'SESSION') {
this._sessionLogSubject.next(); this._sessionLogSubject.next();
}if (logType === 'PREREPORT') {
this._prereportSubject.next();
} }
} }
...@@ -250,5 +253,8 @@ export class DataLogsService { ...@@ -250,5 +253,8 @@ export class DataLogsService {
get slugLogChange$(): Observable<string> { get slugLogChange$(): Observable<string> {
return this._slugLogSubject.asObservable(); return this._slugLogSubject.asObservable();
} }
get prereportChange$(): Observable<string> {
return this._prereportSubject.asObservable();
}
} }
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment