Promenio folder tako da pokazuje razlicite kategorije kao tabove.

3 files changed, 116 insertions, 22 deletions

diff --git a/frontend/src/app/_elements/folder/folder.component.css b/frontend/src/app/_elements/folder/folder.component.css
index 458e6b4f..137a9643 100644
--- a/frontend/src/app/_elements/folder/folder.component.css
+++ b/frontend/src/app/_elements/folder/folder.component.css
@@ -21,7 +21,6 @@
     justify-content: space-between;
     align-items: center;
     position: relative;
-    overflow-x: hidden;
     height: 2.5rem;
     background-color: var(--ns-bg-dark-100);
     border-color: var(--ns-primary);
@@ -32,7 +31,6 @@
 
 .folder-tab:not(:first-child) {
     margin-block-start: auto;
-    width: 4rem;
 }
 
 .selected-tab {
@@ -54,6 +52,7 @@
     color: var(--offwhite) !important;
     text-decoration: none !important;
     cursor: pointer;
+    padding: 0.5rem;
 }
 
 .tab-link:active {
diff --git a/frontend/src/app/_elements/folder/folder.component.html b/frontend/src/app/_elements/folder/folder.component.html
index 763a82a1..3497611e 100644
--- a/frontend/src/app/_elements/folder/folder.component.html
+++ b/frontend/src/app/_elements/folder/folder.component.html
@@ -1,21 +1,24 @@
 <div id="folder">
     <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}">
+        <div id="new-file-tab" class="folder-tab p-1 rounded-top" [style]="'z-index:' + (selectedTab == TabType.NewFile ? 11 : 10) + ' ;'" [ngClass]="{'selected-tab' : selectedTab == TabType.NewFile, 'hover-tab' : hoverTab == TabType.NewFile}">
             <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 class="stretched-link tab-link" (click)="selectTab(TabType.NewFile)" (mouseenter)="hoverOverTab(TabType.NewFile)" (mouseleave)="hoverOverTab(TabType.None)">
+                {{tabTitles[TabType.NewFile]}}
             </a>
         </div>
-        <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}">
+        <!--<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 class="folder-tab p-1 rounded-top" *ngFor="let tab of tabsToShow; let i = index" [style]="'z-index:' + (selectedTab == tab ? 11 : (tabsToShow.length - i)) + ' ;'" [ngClass]="{'selected-tab' : selectedTab == tab, 'hover-tab' : hoverTab == tab}">
+            <a class="m-1 stretched-link tab-link" (click)="selectTab(tab)" (mouseenter)="hoverOverTab(tab)" (mouseleave)="hoverOverTab(TabType.None)">{{tabTitles[tab]}}</a>
         </div>
     </div>
     <div id="selected-content" class="rounded-bottom text-offwhite">
-        <div id="searchbar">
-            <div id="path" class="ps-2">{{folderName}}
+        <div id="searchbar" *ngIf="listView">
+            <!-- <div id="path" class="ps-2">{{folderName}}
             </div>
-            <mat-icon>keyboard_arrow_right</mat-icon>
-            <div id="search" class="text-offwhite">
+            <mat-icon>keyboard_arrow_right</mat-icon> -->
+            <div id="search" class="text-offwhite mx-1">
                 <mat-form-field>
                     <button matPrefix class="btn-clear input-icon"><mat-icon>search</mat-icon></button>
                     <input type="search" matInput name="search" [(ngModel)]="searchTerm" (input)="searchTermsChanged()">
@@ -40,9 +43,9 @@
                 <button class="btn-clear icon-toggle" data-bs-toggle="collapse" data-bs-target="#collapseSort" aria-expanded="false" aria-controls="collapseSort">
                     <mat-icon>sort</mat-icon>
                 </button>
-                <button class="btn-clear icon-toggle separator" [ngClass]="{'icon-toggle-on': listView}" (click)="toggleListView()">
+                <!-- <button class="btn-clear icon-toggle separator" [ngClass]="{'icon-toggle-on': listView}" (click)="toggleListView()">
                     <mat-icon>view_list</mat-icon>
-                </button>
+                </button> -->
             </div>
         </div>
         <!--{{fileToDisplay ? fileToDisplay.name : 'No file selected.'}} {{selectedFileIndex}} {{hoveringOverFileIndex}}-->
diff --git a/frontend/src/app/_elements/folder/folder.component.ts b/frontend/src/app/_elements/folder/folder.component.ts
index eb1b9b98..ecf26355 100644
--- a/frontend/src/app/_elements/folder/folder.component.ts
+++ b/frontend/src/app/_elements/folder/folder.component.ts
@@ -4,6 +4,9 @@ import Experiment from 'src/app/_data/Experiment';
 import { FolderFile, FolderType } from 'src/app/_data/FolderFile';
 import Model from 'src/app/_data/Model';
 import { DatasetsService } from 'src/app/_services/datasets.service';
+import { ExperimentsService } from 'src/app/_services/experiments.service';
+import { ModelsService } from 'src/app/_services/models.service';
+import { PredictorsService } from 'src/app/_services/predictors.service';
 
 @Component({
   selector: 'app-folder',
@@ -35,19 +38,36 @@ export class FolderComponent implements OnInit {
 
   searchTerm: string = '';
 
-  myDatasets: Dataset[] = [];
-
-  constructor(private datasets: DatasetsService) {
+  constructor(private datasetsService: DatasetsService, private experimentsService: ExperimentsService, private modelsService: ModelsService, private predictorsService: PredictorsService) {
     //PLACEHOLDER
     this.forExperiment = new Experiment();
     this.forExperiment.inputColumns = ['kolona1', 'kol2', '???', 'test'];
 
-    this.datasets.getMyDatasets().subscribe((datasets) => {
-      this.myDatasets = datasets;
+    this.folders[TabType.File] = [];
+    this.folders[TabType.NewFile] = [];
+
+    this.datasetsService.getMyDatasets().subscribe((datasets) => {
+      this.folders[TabType.MyDatasets] = datasets;
+    });
+
+    this.datasetsService.getPublicDatasets().subscribe((datasets) => {
+      this.folders[TabType.PublicDatasets] = datasets;
     });
 
-    this.files = this.myDatasets;
+    this.modelsService.getMyModels().subscribe((models) => {
+      this.folders[TabType.MyModels] = models;
+    });
+
+    /*this.modelsService.getMyModels().subscribe((models) => {
+      this.folders[TabType.PublicModels] = models;
+    });*/
+    this.folders[TabType.PublicModels] = [];
+
+    this.experimentsService.getMyExperiments().subscribe((experiments) => {
+      this.folders[TabType.MyExperiments] = experiments;
+    });
 
+    this.files = [];
 
     this.filteredFiles.length = 0;
     this.filteredFiles.push(...this.files);
@@ -78,7 +98,6 @@ export class FolderComponent implements OnInit {
     if (!this.newFile) {
       this.createNewFile();
     }
-    this.selectedFileIndex = -1;
     this.fileToDisplay = this.newFile;
     this.selectedFile = this.newFile;
     this.newFileSelected = true;
@@ -87,7 +106,6 @@ export class FolderComponent implements OnInit {
   }
 
   selectFile(index: number) {
-    this.selectedFileIndex = index;
     this.selectedFile = this.filteredFiles[index];
     this.fileToDisplay = this.filteredFiles[index];
     this.newFileSelected = false;
@@ -111,7 +129,7 @@ export class FolderComponent implements OnInit {
     // TODO
   }
 
-  calcZIndex(i: number) {
+  /*calcZIndex(i: number) {
     let zIndex = (this.files.length - i - 1)
     if (this.selectedFileIndex == i)
       zIndex = this.files.length + 2;
@@ -122,7 +140,7 @@ export class FolderComponent implements OnInit {
 
   newFileZIndex() {
     return (this.files.length + 1);
-  }
+  }*/
 
   clearSearchTerm() {
     this.searchTerm = '';
@@ -153,10 +171,84 @@ export class FolderComponent implements OnInit {
     console.log('delete');
   }
 
+  folders: { [tab: number]: FolderFile[] } = {};
+
+  tabTitles: { [tab: number]: string } = {
+    [TabType.File]: 'Fajl',
+    [TabType.NewFile]: 'Novi fajl',
+    [TabType.MyDatasets]: 'Moji izvori podataka',
+    [TabType.PublicDatasets]: 'Javni izvori podataka',
+    [TabType.MyModels]: 'Moje konfiguracije neuronske mreže',
+    [TabType.PublicModels]: 'Javne konfiguracije neuronske mreže',
+    [TabType.MyExperiments]: 'Eksperimenti',
+  };
+
   FolderType = FolderType;
+
+  TabType = TabType;
+
+  @Input() tabsToShow: TabType[] = [
+    TabType.MyDatasets,
+    TabType.PublicDatasets,
+    TabType.MyModels,
+    TabType.PublicModels,
+    TabType.MyExperiments,
+    TabType.File
+  ]
+
+  @Input() selectedTab: TabType = TabType.NewFile;
+  hoverTab: TabType = TabType.None;
+
+  selectTab(tab: TabType) {
+    this.checkListView(tab);
+    this.selectedTab = tab;
+    this.files = this.folders[tab];
+
+    this.searchTermsChanged();
+  }
+
+  checkListView(tab: TabType) {
+    switch (tab) {
+      case TabType.File:
+      case TabType.NewFile:
+      case TabType.None:
+        this.listView = false;
+        break;
+      case TabType.MyExperiments:
+      case TabType.MyDatasets:
+      case TabType.MyModels:
+      case TabType.PublicDatasets:
+      case TabType.PublicModels:
+        this.listView = true;
+        break;
+    }
+  }
+
+  hoverOverTab(tab: TabType) {
+    this.checkListView(tab);
+    this.hoverTab = tab;
+    if (tab == TabType.None) {
+      this.checkListView(this.selectedTab);
+      this.files = this.folders[this.selectedTab];
+    } else {
+      this.files = this.folders[tab];
+    }
+    this.searchTermsChanged();
+  }
 }
 
 export enum Privacy {
   Private,
   Public
+}
+
+export enum TabType {
+  NewFile,
+  File,
+  MyDatasets,
+  PublicDatasets,
+  MyModels,
+  PublicModels,
+  MyExperiments,
+  None
 }
\ No newline at end of file