From cdfecf22863385132701aea4356d5f5aabf3805c Mon Sep 17 00:00:00 2001
From: Danijel Anđelković <adanijel99@gmail.com>
Date: Mon, 25 Apr 2022 03:40:06 +0200
Subject: Osposobio pretragu u folder komponenti. Promenio experiment stranu
 tako da moze da se skroluje od koraka do koraka. Dodao nacin da komponente
 manuelno skroluju pozadinu.

---
 .../src/app/_elements/folder/folder.component.css  | 25 +++++----
 .../src/app/_elements/folder/folder.component.html | 59 +++++++++++-----------
 .../src/app/_elements/folder/folder.component.ts   | 37 ++++++++++++--
 .../reactive-background.component.ts               | 19 ++++++-
 4 files changed, 92 insertions(+), 48 deletions(-)

(limited to 'frontend/src/app/_elements')

diff --git a/frontend/src/app/_elements/folder/folder.component.css b/frontend/src/app/_elements/folder/folder.component.css
index a1c1124a..3e865576 100644
--- a/frontend/src/app/_elements/folder/folder.component.css
+++ b/frontend/src/app/_elements/folder/folder.component.css
@@ -1,7 +1,7 @@
 #folder {
-    position: absolute;
+    /*position: absolute;
     left: 50%;
-    transform: translateX(-50%);
+    transform: translateX(-50%);*/
 }
 
 #tabs {
@@ -22,9 +22,10 @@
     align-items: center;
     position: relative;
     overflow-x: hidden;
-    background-color: var(--ns-bg-dark-100);
     height: 2.5rem;
+    background-color: var(--ns-bg-dark-100);
     border-color: var(--ns-primary);
+    color: var(--ns-primary);
     border-style: solid;
     border-width: 1px 1px 0 1px;
 }
@@ -37,6 +38,7 @@
 .selected-tab {
     height: 3rem;
     background-color: var(--ns-primary);
+    color: var(--offwhite);
 }
 
 .hover-tab {
@@ -91,7 +93,7 @@
     background-color: var(--ns-bg-dark-50);
     width: 100%;
     height: 36rem;
-    backdrop-filter: blur(2px);
+    /*backdrop-filter: blur(2px);*/
     border-color: var(--ns-primary);
     border-style: solid;
     border-width: 1px 1px 1px 1px;
@@ -104,21 +106,18 @@
     justify-content: center;
 }
 
-.folder-bottom-button {
+.bottom-button {
     font-size: large;
     position: relative;
-    background-color: var(--ns-bg-dark-50);
+    background-color: var(--ns-primary);
     width: 10rem;
-    height: 2.5rem;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-around;
-    align-items: center;
+    height: 2.3rem;
     border-color: var(--ns-primary);
     border-style: solid;
     border-width: 0px 1px 1px 1px;
 }
 
-.folder-bottom-button:hover {
-    background-color: var(--ns-primary);
+.rounded-bottom {
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
 }
\ No newline at end of file
diff --git a/frontend/src/app/_elements/folder/folder.component.html b/frontend/src/app/_elements/folder/folder.component.html
index 895ac84e..c3da30fc 100644
--- a/frontend/src/app/_elements/folder/folder.component.html
+++ b/frontend/src/app/_elements/folder/folder.component.html
@@ -1,12 +1,12 @@
 <div id="folder" style="width: 60rem;">
-    <div id="tabs" class="text-offwhite">
+    <div id="tabs">
         <div id="new-file-tab" class="folder-tab p-1 rounded-top" [style]="'z-index:' + newFileZIndex() + ' ;'" [ngClass]="{'selected-tab' : newFileSelected, 'hover-tab' : hoveringOverFileIndex == -2}">
             <mat-icon class="text-offwhite">add</mat-icon>
             <a class="stretched-link tab-link" (click)="selectNewFile()" (mouseenter)="hoverOverFile(-2)" (mouseleave)="hoverOverFile(-1)">
                 <p class="m-1" *ngIf="newFile != undefined">{{newFile.name}}</p>
             </a>
         </div>
-        <div class="folder-tab p-1 rounded-top" *ngFor="let file of files; let i = index" [style]="'z-index:' + calcZIndex(i) + ' ;'" [ngClass]="{'selected-tab' : selectedFileIndex == i, 'hover-tab' : hoveringOverFileIndex == i}">
+        <div class="folder-tab p-1 rounded-top" *ngFor="let file of filteredFiles; let i = index" [style]="'z-index:' + calcZIndex(i) + ' ;'" [ngClass]="{'selected-tab' : selectedFileIndex == i, 'hover-tab' : hoveringOverFileIndex == i}">
             <a class="m-1 stretched-link tab-link" (click)="selectFile(i)" (mouseenter)="hoverOverFile(i)" (mouseleave)="hoverOverFile(-1)">{{file.name}}</a>
         </div>
     </div>
@@ -15,27 +15,22 @@
             <div id="path" class="ps-2">{{folderName}}
             </div>
             <mat-icon>keyboard_arrow_right</mat-icon>
-            <div id="search">
+            <div id="search" class="text-offwhite">
                 <mat-form-field>
-                    <input matNativeControl>
+                    <button matPrefix class="btn-clear input-icon"><mat-icon>search</mat-icon></button>
+                    <input type="search" matInput name="search" [(ngModel)]="searchTerm" (input)="searchTermsChanged()">
+                    <button matSuffix class="btn-clear input-icon" (click)="clearSearchTerm()"><mat-icon>clear</mat-icon></button>
                 </mat-form-field>
             </div>
             <div id="search-options">
                 <div id="collapseFilters" class="collapse collapse-horizontal">
-                    <mat-chip-list aria-label="filter selection">
-                        <mat-chip class="text-offwhite ns-bg-dark-50">
-                            <mat-icon class="text-offwhite">timeline</mat-icon>
-                            Regresioni
-                        </mat-chip>
-                        <mat-chip class="text-offwhite ns-bg-dark-50">
-                            <mat-icon class="text-offwhite">looks_two</mat-icon>
-                            Binarni klasifikacioni
-                        </mat-chip>
-                        <mat-chip class="text-offwhite ns-bg-dark-50">
-                            <mat-icon class="text-offwhite">auto_awesome_motion</mat-icon>
-                            Multiklasifikacioni
-                        </mat-chip>
-                    </mat-chip-list>
+
+                    <mat-icon class="text-offwhite ">timeline</mat-icon>
+                    Regresioni
+                    <mat-icon class="text-offwhite ">looks_two</mat-icon>
+                    Binarni klasifikacioni
+                    <mat-icon class="text-offwhite ">auto_awesome_motion</mat-icon>
+                    Multiklasifikacioni
                 </div>
                 <a class="tab-link p-1" data-bs-toggle="collapse" data-bs-target="#collapseFilters" aria-expanded="false" aria-controls="collapseFilters">
                     <mat-icon>filter_alt</mat-icon>
@@ -50,19 +45,23 @@
         </div>
         {{fileToDisplay ? fileToDisplay.name : 'No file selected.'}} {{selectedFileIndex}} {{hoveringOverFileIndex}}
     </div>
-    <div id="footer">
-        <div class="folder-bottom-button text-offwhite rounded-bottom bubble" *ngIf="newFileSelected">
-            <a class="tab-link stretched-link">Sačuvaj</a>
-            <div>
-                <mat-icon>check</mat-icon>
+    <div id="footer" [ngSwitch]="newFileSelected">
+        <button mat-button (click)="saveNewFile()" class="bottom-button text-offwhite rounded-bottom" *ngSwitchCase="true">
+            <div  class="f-row">
+                <div>Sačuvaj</div>
+                <div class="pt-1">
+                    <mat-icon>check</mat-icon>
+                </div>
             </div>
-        </div>
-        <div class="folder-bottom-button text-offwhite rounded-bottom bubble" *ngIf="!newFileSelected">
-            <a class="tab-link stretched-link">Ok</a>
-            <div class="icon-double">
-                <mat-icon>check</mat-icon>
-                <mat-icon>check</mat-icon>
+        </button>
+        <button mat-button (click)="ok()" class="bottom-button text-offwhite rounded-bottom" *ngSwitchCase="false">
+            <div class="f-row">
+                <div>Ok</div>
+                <div class="icon-double pt-1">
+                    <mat-icon>check</mat-icon>
+                    <mat-icon>check</mat-icon>
+                </div>
             </div>
-        </div>
+        </button>
     </div>
 </div>
\ No newline at end of file
diff --git a/frontend/src/app/_elements/folder/folder.component.ts b/frontend/src/app/_elements/folder/folder.component.ts
index 485a8dd7..91565f3c 100644
--- a/frontend/src/app/_elements/folder/folder.component.ts
+++ b/frontend/src/app/_elements/folder/folder.component.ts
@@ -20,11 +20,15 @@ export class FolderComponent implements OnInit {
   newFileSelected: boolean = true;
 
   selectedFileIndex: number = -1;
+  selectedFile?: (Dataset | Model);
   hoveringOverFileIndex: number = -1;
 
   fileToDisplay?: (Dataset | Model);
 
   @Output() selectedFileChanged: EventEmitter<(Dataset | Model)> = new EventEmitter();
+  @Output() okPressed: EventEmitter<string> = new EventEmitter();
+
+  searchTerm: string = '';
 
   constructor() {
     //PLACEHOLDER
@@ -33,6 +37,9 @@ export class FolderComponent implements OnInit {
       new Dataset('Dijamanti'),
       new Dataset('Filmovi'),
     ]
+
+    this.filteredFiles.length = 0;
+    this.filteredFiles.push(...this.files);
   }
 
   ngOnInit(): void {
@@ -60,17 +67,19 @@ export class FolderComponent implements OnInit {
     if (!this.newFile) {
       this.createNewFile();
     }
-    this.fileToDisplay = this.newFile;
     this.selectedFileIndex = -1;
+    this.fileToDisplay = this.newFile;
+    this.selectedFile = this.newFile;
     this.newFileSelected = true;
     this.selectedFileChanged.emit(this.newFile);
   }
 
   selectFile(index: number) {
     this.selectedFileIndex = index;
-    this.fileToDisplay = this.files[index];
+    this.selectedFile = this.filteredFiles[index];
+    this.fileToDisplay = this.filteredFiles[index];
     this.newFileSelected = false;
-    this.selectedFileChanged.emit(this.files[index]);
+    this.selectedFileChanged.emit(this.selectedFile);
   }
 
   createNewFile() {
@@ -81,6 +90,10 @@ export class FolderComponent implements OnInit {
     }
   }
 
+  ok() {
+    this.okPressed.emit();
+  }
+
   saveNewFile() {
     // TODO
   }
@@ -97,6 +110,24 @@ export class FolderComponent implements OnInit {
   newFileZIndex() {
     return (this.files.length + 1);
   }
+
+  clearSearchTerm() {
+    this.searchTerm = '';
+  }
+
+  filteredFiles: (Dataset | Model)[] = [];
+
+  searchTermsChanged() {
+    this.filteredFiles.length = 0;
+    this.filteredFiles.push(...this.files.filter((file) => file.name.toLowerCase().includes(this.searchTerm.toLowerCase())));
+    if (this.selectedFile) {
+      if (!this.filteredFiles.includes(this.selectedFile)) {
+        this.selectFile(-1);
+      } else {
+        this.selectedFileIndex = this.filteredFiles.indexOf(this.selectedFile);
+      }
+    }
+  }
 }
 
 export enum FolderType {
diff --git a/frontend/src/app/_elements/reactive-background/reactive-background.component.ts b/frontend/src/app/_elements/reactive-background/reactive-background.component.ts
index 97387ac8..1a6157e3 100644
--- a/frontend/src/app/_elements/reactive-background/reactive-background.component.ts
+++ b/frontend/src/app/_elements/reactive-background/reactive-background.component.ts
@@ -1,5 +1,6 @@
 import { AfterViewInit, Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
 import { CookieService } from 'ngx-cookie-service';
+import Shared from 'src/app/Shared';
 
 @Component({
   selector: 'app-reactive-background',
@@ -90,18 +91,32 @@ export class ReactiveBackgroundComponent implements AfterViewInit {
 
       this.drawBackground();
     }, 1000 / 60);
+
+    Shared.bgScroll.subscribe((amount) => {
+      this.scrollBackgroundFromSharedEvent(amount);
+    })
   }
 
   private lastScrollY: number = 0;
 
+  scrollBackgroundFromSharedEvent(amount: number) {
+    const scrolledAmount = amount - this.lastScrollY;
+    this.scrollPoints(scrolledAmount);
+    this.lastScrollY = amount;
+  }
+
   scrollBackground(e: Event) {
     const scrolledAmount = window.scrollY - this.lastScrollY;
+    this.scrollPoints(scrolledAmount);
+    this.lastScrollY = window.scrollY;
+  }
+
+  scrollPoints(amount: number) {
     this.points.forEach((point, index) => {
       if (index > this.numPoints * this.fill) return;
-      point.y = point.y - (scrolledAmount / this.height) * this.scrollSpeed;
+      point.y = point.y - (amount / this.height) * this.scrollSpeed;
       this.keepPointWithinBounds(point);
     })
-    this.lastScrollY = window.scrollY;
   }
 
   drawBackground() {
-- 
cgit v1.2.3