From 036d29ecf68214704de77956a88cdb2af228f37b Mon Sep 17 00:00:00 2001
From: Danijel Anđelković <adanijel99@gmail.com>
Date: Sat, 23 Apr 2022 23:16:45 +0200
Subject: Dodao folder komponentu, odradjeni tabovi i selekcija, ulazi i izlazi
 komponente, stil.

---
 .../src/app/_elements/folder/folder.component.css  | 124 +++++++++++++++++++++
 .../src/app/_elements/folder/folder.component.html |  69 +++++++++++-
 .../src/app/_elements/folder/folder.component.ts   |  95 +++++++++++++++-
 3 files changed, 285 insertions(+), 3 deletions(-)

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

diff --git a/frontend/src/app/_elements/folder/folder.component.css b/frontend/src/app/_elements/folder/folder.component.css
index e69de29b..cfb0d087 100644
--- a/frontend/src/app/_elements/folder/folder.component.css
+++ b/frontend/src/app/_elements/folder/folder.component.css
@@ -0,0 +1,124 @@
+#folder {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+#tabs {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-end;
+    height: 4rem;
+}
+
+#tabs>.folder-tab:not(:first-child) {
+    margin-left: -5px;
+}
+
+.folder-tab {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    position: relative;
+    overflow-x: hidden;
+    background-color: var(--ns-bg-dark-100);
+    height: 2.5rem;
+    border-color: var(--ns-primary);
+    border-style: solid;
+    border-width: 1px 1px 0 1px;
+}
+
+.folder-tab:not(:first-child) {
+    margin-block-start: auto;
+    width: 4rem;
+}
+
+.selected-tab {
+    height: 3rem;
+    background-color: var(--ns-primary);
+}
+
+.hover-tab {
+    height: 3.2rem;
+}
+
+.selected-tab,
+.hover-tab {
+    width: fit-content !important;
+}
+
+.tab-link {
+    color: var(--offwhite) !important;
+    text-decoration: none !important;
+    cursor: pointer;
+}
+
+.tab-link:active {
+    color: var(--ns-accent) !important;
+}
+
+.selected-tab {
+    background-color: var(--ns-primary);
+}
+
+#searchbar {
+    height: 2.5rem;
+    background-color: var(--ns-bg-dark-100);
+    border-bottom: 1px solid var(--ns-primary);
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    width: 100%;
+}
+
+.collapse-horizontal {
+    white-space: nowrap;
+    height: 2.5rem;
+    overflow-x: hidden;
+}
+
+#search-options {
+    margin-left: auto;
+    margin-top: 7px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+#selected-content {
+    background-color: var(--ns-bg-dark-50);
+    width: 100%;
+    height: 36rem;
+    backdrop-filter: blur(2px);
+    border-color: var(--ns-primary);
+    border-style: solid;
+    border-width: 1px 1px 1px 1px;
+    border-top-right-radius: 4px;
+}
+
+#footer {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+}
+
+.folder-bottom-button {
+    font-size: large;
+    position: relative;
+    background-color: var(--ns-bg-dark-100);
+    width: 10rem;
+    height: 2.5rem;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    align-items: center;
+    border-color: var(--ns-primary);
+    border-style: solid;
+    border-width: 0px 1px 1px 1px;
+}
+
+.folder-bottom-button:hover {
+    background-color: var(--ns-primary);
+}
\ 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 e4c376a7..455d43cc 100644
--- a/frontend/src/app/_elements/folder/folder.component.html
+++ b/frontend/src/app/_elements/folder/folder.component.html
@@ -1 +1,68 @@
-<p>folder works!</p>
+<div id="folder" style="width: 60rem;">
+    <div id="tabs" class="text-offwhite">
+        <div id="new-file-tab" class="folder-tab p-1 rounded-top" [style]="'z-index:' + newFileZIndex() + ' ;'" [ngClass]="{'selected-tab' : newFileSelected}">
+            <mat-icon class="text-offwhite">add</mat-icon>
+            <a class="stretched-link tab-link" (click)="selectNewFile()">
+                <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}">
+            <a class="m-1 stretched-link tab-link" (click)="selectFile(i)" (mouseenter)="hoverOverFile(i)" (mouseleave)="hoverOverFile(-1)">{{file.name}}</a>
+        </div>
+    </div>
+    <div id="selected-content" class="rounded-bottom text-offwhite">
+        <div id="searchbar">
+            <div id="path" class="ps-2">{{folderName}}
+            </div>
+            <mat-icon>keyboard_arrow_right</mat-icon>
+            <div id="search">
+                <mat-form-field>
+                    <input matNativeControl>
+                </mat-form-field>
+            </div>
+            <div id="search-options">
+                <div id="collapseFilters" class="collapse collapse-horizontal show">
+                    <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>
+                </div>
+                <a class="tab-link p-1" data-bs-toggle="collapse" data-bs-target="#collapseFilters" aria-expanded="true" aria-controls="collapseFilters">
+                    <mat-icon>filter_alt</mat-icon>
+                </a>
+                <div id="collapseSort" class="collapse collapse-horizontal">
+                    [sort options here TODO]
+                </div>
+                <a class="tab-link p-1" data-bs-toggle="collapse" data-bs-target="#collapseSort" aria-expanded="false" aria-controls="collapseSort">
+                    <mat-icon>sort</mat-icon>
+                </a>
+            </div>
+        </div>
+        {{fileToDisplay ? fileToDisplay.name : 'No file selected.'}} {{selectedFileIndex}} {{hoveringOverFileIndex}}
+    </div>
+    <div id="footer">
+        <div class="folder-bottom-button text-offwhite rounded-bottom" *ngIf="newFileSelected">
+            <a class="tab-link stretched-link">Sačuvaj</a>
+            <div>
+                <mat-icon>check</mat-icon>
+            </div>
+        </div>
+        <div class="folder-bottom-button text-offwhite rounded-bottom" *ngIf="!newFileSelected">
+            <a class="tab-link stretched-link">Ok</a>
+            <div class="icon-double">
+                <mat-icon>check</mat-icon>
+                <mat-icon>check</mat-icon>
+            </div>
+        </div>
+    </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 c5ff3c45..34c8db82 100644
--- a/frontend/src/app/_elements/folder/folder.component.ts
+++ b/frontend/src/app/_elements/folder/folder.component.ts
@@ -1,4 +1,6 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import Dataset from 'src/app/_data/Dataset';
+import Model from 'src/app/_data/Model';
 
 @Component({
   selector: 'app-folder',
@@ -7,9 +9,98 @@ import { Component, OnInit } from '@angular/core';
 })
 export class FolderComponent implements OnInit {
 
-  constructor() { }
+  @Input() folderName: string = 'Moji podaci';
+
+  @Input() files!: (Dataset | Model)[]
+
+  newFile!: Dataset | Model;
+
+  @Input() type: FolderType = FolderType.Dataset;
+
+  newFileSelected: boolean = true;
+
+  selectedFileIndex: number = -1;
+  hoveringOverFileIndex: number = -1;
+
+  fileToDisplay?: (Dataset | Model);
+
+  @Output() selectedFileChanged: EventEmitter<(Dataset | Model)> = new EventEmitter();
+
+  constructor() {
+    //PLACEHOLDER
+    this.files = [
+      new Dataset('Titanik'),
+      new Dataset('Dijamanti'),
+      new Dataset('Filmovi'),
+    ]
+  }
 
   ngOnInit(): void {
+    if (this.files.length > 0)
+      this.selectFile(0);
+    else {
+      this.selectNewFile();
+    }
+  }
+
+  hoverOverFile(i: number) {
+    this.hoveringOverFileIndex = i;
+    if (i != -1) {
+      this.fileToDisplay = this.files[i];
+    } else {
+      if (this.newFileSelected) {
+        this.fileToDisplay = this.newFile;
+      } else {
+        this.fileToDisplay = this.files[this.selectedFileIndex];
+      }
+    }
+  }
+
+  selectNewFile() {
+    if (!this.newFile) {
+      this.createNewFile();
+    }
+    this.fileToDisplay = this.newFile;
+    this.selectedFileIndex = -1;
+    this.newFileSelected = true;
+    this.selectedFileChanged.emit(this.newFile);
+  }
+
+  selectFile(index: number) {
+    this.selectedFileIndex = index;
+    this.fileToDisplay = this.files[index];
+    this.newFileSelected = false;
+    this.selectedFileChanged.emit(this.files[index]);
+  }
+
+  createNewFile() {
+    if (this.type == FolderType.Dataset) {
+      this.newFile = new Dataset();
+    } else if (this.type == FolderType.Model) {
+      this.newFile = new Model();
+    }
+  }
+
+  saveNewFile() {
+    // TODO
+  }
+
+  calcZIndex(i: number) {
+    let zIndex = (this.files.length - i - 1)
+    if (this.selectedFileIndex == i)
+      zIndex = this.files.length + 2;
+    if (this.hoveringOverFileIndex == i)
+      zIndex = this.files.length + 3;
+    return zIndex;
+  }
+
+  newFileZIndex() {
+    return (this.files.length + 1);
   }
 
 }
+
+export enum FolderType {
+  Dataset,
+  Model
+} 
-- 
cgit v1.2.3