From 3d4facd1c9b2de0938140da715c73d30ab781341 Mon Sep 17 00:00:00 2001
From: ddamiron <ddamiron@sii.fr>
Date: Tue, 23 Jul 2019 14:04:43 +0200
Subject: [PATCH] add arrows for step selector in report
---
.../logs-home/logs-home.component.html | 63 +++++++++----------
.../report/logs-data/logs-data.component.html | 43 +++++++++----
.../report/logs-data/logs-data.component.scss | 19 +++++-
.../report/logs-data/logs-data.component.ts | 2 +
4 files changed, 83 insertions(+), 44 deletions(-)
diff --git a/src/app/components/logs-dashboard/logs-home/logs-home.component.html b/src/app/components/logs-dashboard/logs-home/logs-home.component.html
index 2c78c1d..2fbe18f 100644
--- a/src/app/components/logs-dashboard/logs-home/logs-home.component.html
+++ b/src/app/components/logs-dashboard/logs-home/logs-home.component.html
@@ -11,53 +11,52 @@
<label> Session Id </label>
</div>
<div class="column is-2 has-text-left">
-
</div>
</div>
<div class="data-list">
- <div class="data columns is-multiline is-vcentered is-marginless" >
- <div class="column is-5 has-text-left">
- <input type="text" size="45" name="slug" [(ngModel)]="slug">
- </div>
- <div class="column is-5 has-text-left">
- <input type="text" size="45" name="sessionId" [(ngModel)]="sessionId">
- </div>
- <div class="column is-2 has-text-left">
- <a class="button button-gl " [routerLink]="['report', slug, sessionId, 'home']">
- <i class="fas fa-search"></i>
- </a>
+ <div class="data columns is-multiline is-vcentered is-marginless">
+ <div class="column is-5 has-text-left">
+ <input class="input" type="text" size="45" name="slug" [(ngModel)]="slug">
+ </div>
+ <div class="column is-5 has-text-left">
+ <input class="input" type="text" size="45" name="sessionId" [(ngModel)]="sessionId">
+ </div>
+ <div class="column is-2 has-text-left">
+ <a class="button button-gl " [routerLink]="['report', slug, sessionId, 'home']">
+ <i class="fas fa-search"></i>
+ </a>
+ </div>
</div>
</div>
</div>
- </div>
- </form>
- <br>
+ </form>
+ <br>
- <!-- Tabs -->
- <ul class="tabs-container">
- <li *ngFor="let tab of tabs" (click)="tabsToggler(tab.name)" [ngClass]="{'is-active':tab.isActive}">
- <!-- [routerLink]="tab.fullRouterLinkPath" routerLinkActive="is-active" -->
- <span class="tab-label">{{ tab.name }}</span>
- </li>
- </ul>
+ <!-- Tabs -->
+ <ul class="tabs-container">
+ <li *ngFor="let tab of tabs" (click)="tabsToggler(tab.name)" [ngClass]="{'is-active':tab.isActive}">
+ <!-- [routerLink]="tab.fullRouterLinkPath" routerLinkActive="is-active" -->
+ <span class="tab-label">{{ tab.name }}</span>
+ </li>
+ </ul>
- <!-- <a class="button button-gl is-centered" (click)="tabsToggler(true)">
+ <!-- <a class="button button-gl is-centered" (click)="tabsToggler(true)">
Slugs
</a>
<a class="button button-gl is-centered" (click)="tabsToggler(false)">
Sessions
</a> -->
+ </div>
</div>
-</div>
-<div class="columns is-centered is-marginless">
- <div class="column has-text-centered is-marginless">
- <app-logs-sessions [hidden]="isToggled" [childSessionId]="sessionId" [childNbSessions]="nbSessionId">
- </app-logs-sessions>
- <app-logs-slugs [hidden]="!isToggled" [childSlugsList]="allFields.slug_list" [childNbSlugs]="nbSlug"
- [childNbUuids]="nbUuid"></app-logs-slugs>
- </div>
-</div>
\ No newline at end of file
+ <div class="columns is-centered is-marginless">
+ <div class="column has-text-centered is-marginless">
+ <app-logs-sessions [hidden]="isToggled" [childSessionId]="sessionId" [childNbSessions]="nbSessionId">
+ </app-logs-sessions>
+ <app-logs-slugs [hidden]="!isToggled" [childSlugsList]="allFields.slug_list" [childNbSlugs]="nbSlug"
+ [childNbUuids]="nbUuid"></app-logs-slugs>
+ </div>
+ </div>
\ No newline at end of file
diff --git a/src/app/components/logs-dashboard/report/logs-data/logs-data.component.html b/src/app/components/logs-dashboard/report/logs-data/logs-data.component.html
index 7d51059..536cdec 100644
--- a/src/app/components/logs-dashboard/report/logs-data/logs-data.component.html
+++ b/src/app/components/logs-dashboard/report/logs-data/logs-data.component.html
@@ -5,22 +5,43 @@
</div>
<div class="section">
<div class="columns is-centered is-marginless">
+
+
<div class="column has-text-left">
<div *ngFor="let oneStepData of allStepsData">
<div class="mini-info-card" *ngIf="oneStepData" (click)='getLogsSelector(oneStepData._id.step);'>
- <span>
- <!-- <p>slug: {{oneStepData._id.slug}} </p>
- <p>uuid: {{oneStepData._id.uuid}} </p>
- <p>sessionId: {{oneStepData._id.session_id}} </p> -->
- <h3>
- <p>step: {{oneStepData._id.step}}</p>
- <p>total-time: {{oneStepData.totalHoursSpent}}h : {{oneStepData.totalMinutesSpent}}m :
- {{oneStepData.totalSecondsSpent}}s </p>
- </h3>
- </span>
+ <div class="table">
+ <div class="columns is-marginless">
+ <div class="column is-5 has-text-left">
+ <span>
+ <h3>
+ <p>step: {{oneStepData._id.step}}</p>
+ <p>total-time: {{oneStepData.totalHoursSpent}}h : {{oneStepData.totalMinutesSpent}}m :
+ {{oneStepData.totalSecondsSpent}}s </p>
+ </h3>
+
+ </span>
+ </div>
+ <div class="column is-5 has-text-left"></div>
+ <div class="column is-2 has-text-right">
+ <br>
+ <span>
+ <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">
+ <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"
+ class="brandcolor" />
+ <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"
+ class="brandcolor" />
+ </svg>
+ </div>
+ </span>
+ </div>
+ </div>
+ </div>
</div>
</div>
-
</div>
<div class="column has-text-left">
diff --git a/src/app/components/logs-dashboard/report/logs-data/logs-data.component.scss b/src/app/components/logs-dashboard/report/logs-data/logs-data.component.scss
index 0d609c8..faa87dd 100644
--- a/src/app/components/logs-dashboard/report/logs-data/logs-data.component.scss
+++ b/src/app/components/logs-dashboard/report/logs-data/logs-data.component.scss
@@ -1,3 +1,6 @@
+@import "../../../../../scss/variables.scss";
+@import "../../../../../../node_modules/bulma/sass/utilities/_all.sass";
+
figure {
text-align: center;
}
@@ -37,4 +40,18 @@ figure {
.hidden {
display: none;
- }
\ No newline at end of file
+ }
+
+ .arrows {
+ svg {
+ width: 16px;
+ fill: $grey-dark-color;
+ transform: rotate(0deg);
+ }
+ }
+
+ .arrows.is-displayed svg {
+ transform: rotate(-90deg);
+ }
+
+
diff --git a/src/app/components/logs-dashboard/report/logs-data/logs-data.component.ts b/src/app/components/logs-dashboard/report/logs-data/logs-data.component.ts
index 923ea27..1287ec9 100644
--- a/src/app/components/logs-dashboard/report/logs-data/logs-data.component.ts
+++ b/src/app/components/logs-dashboard/report/logs-data/logs-data.component.ts
@@ -14,6 +14,7 @@ export class LogsDataComponent implements OnChanges {
@Input() childUuid: string = '';
@Input() childSessionId: string = '';
@Input() childSlug: string;
+ displayedStep: string = 'none';
logTypes: any = [
{
name : 'erreurs',
@@ -69,6 +70,7 @@ export class LogsDataComponent implements OnChanges {
this.tempStep = step;
this.allErrorLogs = [];
this.allLogs = [];
+ this.displayedStep = step;
if (this.logTypes[0].selected === true) {
this.getErrorStepsLogs(step);
}
--
GitLab