add slug search tool in pre-report

src/app/components/logs-dashboard/logs-slugs/logs-slugs.component.html

 <div class="input-field is-centered">
-  <!-- <form>
-      <div class="columns is-vcentered">
-        <div class="column is-2 has-text-left">
-          <label class="label"> Search by slug: </label>
-          <input class="input" type="text" name="searchSlug" [(ngModel)]="searchSlug">
-        </div>
-      </div>
-    </form> -->
-  <div class="columns is-3 is-vcentered">
-    <div class="column is-2 has-text-left">
+  <div class="columns is-5 is-vcentered">
+    <div class="column is-5 has-text-left">
       <label class="label"> Search by slug: </label>
       <input class="input" type="text" [(ngModel)]="foundSlug" (keyup)="getAllInfoForOneSlug($event)" id="foundSlug" list="slugsList" />
       <datalist id="slugsList">

src/app/components/logs-dashboard/report/logs-pre-report/logs-pre-report.component.html

@@ -136,6 +136,17 @@
 
   <div [ngClass]="{'hidden': !isSession}">
     <div class="section">
+        <div class="input-field is-centered">
+            <div class="columns is-5 is-vcentered">
+              <div class="column is-5 has-text-left">
+                <label class="label"> Search by slug: </label>
+                <input class="input" type="text" [(ngModel)]="foundSlug" (keyup)="getAllInfoForOneSlug($event)" id="foundSlug" list="slugsList" />
+                <datalist id="slugsList">
+                  <option *ngFor="let slug of completeSlugsList" [value]="slug"> {{slug}}</option>
+                </datalist>
+              </div>
+            </div>
+          </div>
       <div class="columns is-left is-marginless">
         <div class="column has-text-left">
           <div class="columns is-centered is-marginless">

src/app/components/logs-dashboard/report/logs-pre-report/logs-pre-report.component.ts

@@ -24,6 +24,8 @@ export class LogsPreReportComponent implements OnInit {
   title: string;
   type: string;
   id: string;
+  foundSlug: string = '';
+  completeSlugsList: any = [];
   serviceName: string;
   nbObjects: number = 0;
   isSession: boolean = false;
@@ -61,7 +63,7 @@ export class LogsPreReportComponent implements OnInit {
   }
 
   completeSlugsInfos(slugList, sessionId) {
-    console.log('slugList', slugList, 'sessionId', sessionId);
+    // console.log('slugList', slugList, 'sessionId', sessionId);
     this.allSlugSessionInfoList = [];
     for (let i = 0; i < slugList.length; i += 1) {
       this.getAllInfoForOneSlugSession(slugList[i], sessionId, 'slug');
@@ -69,7 +71,7 @@ export class LogsPreReportComponent implements OnInit {
   }
 
   completeSessionsInfos(slug, sessionList) {
-    console.log('slug', slug, 'sessionList', sessionList);
+    // console.log('slug', slug, 'sessionList', sessionList);
     this.allSlugSessionInfoList = [];
     for (let i = 0; i < sessionList.length; i += 1) {
       this.getAllInfoForOneSlugSession(slug, sessionList[i], 'session');
@@ -87,21 +89,22 @@ export class LogsPreReportComponent implements OnInit {
         sessionData = res1[0];
         sessionData['_id']['slug_list'] = res2[0]['all'];
         this.allSlugSessionInfoList.push(sessionData);
-        console.log('allSlugSessionInfoList', this.allSlugSessionInfoList);
-
       });
     } else {
       forkJoin(
         this._dataLogsService.getAllInfoForSlugSession(slug, sessionId),
         this._dataLogsService.getAllInfoForOneSlug(slug),
+        this._dataLogsService.getSlugFromSessionId(sessionId),
       )
-      .subscribe(([res1, res2]) => {
+      .subscribe(([res1, res2, res3]) => {
         let sessionData = {};
         res1[0]._id.completionDate.$date = new Date(res1[0]._id.completionDate.$date);
         sessionData = res1[0];
         sessionData['_id']['session_list'] = res2[0]['all'];
         this.allSlugSessionInfoList.push(sessionData);
-        console.log('allSlugSessionInfoList', this.allSlugSessionInfoList);
+        // console.log('allSlugSessionInfoList', this.allSlugSessionInfoList);
+        this.completeSlugsList = res3[0]['slug_list'];
+        // console.log('allSlugList', this.completeSlugsList);
       });
     }
   }
@@ -148,9 +151,37 @@ export class LogsPreReportComponent implements OnInit {
     }
   }
 
+  getAllInfoForOneSlug() {
+    if (this.foundSlug === '') {
+      this.getComplementaryInformation();
+    } else {
+    // const foundSlug = (<HTMLInputElement>document.getElementById('foundSlug')).value;
+      this._dataLogsService.getAllInfoForOneSlug(this.foundSlug).subscribe((results) => {
+        this.allSlugSessionInfoList = [];
+        // console.log('results: ', results);
+
+        for (const result of results[0]['all']) {
+          if (result['session_id'] === this.id) {
+            this.allSlugSessionInfoList[0] = { _id : result };
+            this.allSlugSessionInfoList[0]['_id']['slug'] = results[0]['_id']['slug'];
+            this.allSlugSessionInfoList[0]['_id']['uuid'] = results[0]['_id']['uuid'];
+            this.allSlugSessionInfoList[0]['_id']['session_list'] = [this.id];
+
+            console.log('this.allSlugSessionInfoList[0]: ', this.allSlugSessionInfoList[0]);
+          }
+        }
+        // this.slugInOnePage = result.length;
+        this.paginator.limit = this._dataLogsService.limit;
+        this.paginator.pageIndex = this._dataLogsService.pageNumber;
+        // this.paginator.length = this.childNbSlugs;
+        // this.formatDate();
+      },
+    );
+    }
+  }
   getUuidFromSlug(slug) {
     this._dataLogsService.getUuidFromSlug(slug).subscribe((result) => {
-      console.log('uuid result:', result[0]['uuid_list'][0]);
+      // console.log('uuid result:', result[0]['uuid_list'][0]);
       this.uuid = result[0]['uuid_list'][0];
     },
     );