From 09a33e72501affb6d07507e396151f02d16daf9a Mon Sep 17 00:00:00 2001
From: Danijel Anđelković <adanijel99@gmail.com>
Date: Mon, 6 Jun 2022 02:45:47 +0200
Subject: Dodao deljenje datasetova i modela, dialog za podesavanje opcija za
 deljenje (isPublic accessibleByLink), sa mogucnoscu kopiranja linka za
 deljenje. Dodao stranice za prikaz javnih datasetova / modela.

---
 .../_charts/line-chart/line-chart.component.css    |  3 +-
 .../_charts/line-chart/line-chart.component.html   | 10 +++---
 .../src/app/_elements/folder/folder.component.html | 10 ++++--
 .../src/app/_elements/folder/folder.component.ts   | 36 ++++++++++++++++++++--
 .../form-dataset/form-dataset.component.html       |  8 ++---
 .../form-dataset/form-dataset.component.ts         |  1 +
 .../_elements/form-model/form-model.component.ts   |  2 ++
 7 files changed, 54 insertions(+), 16 deletions(-)

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

diff --git a/frontend/src/app/_elements/_charts/line-chart/line-chart.component.css b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.css
index 862a86e1..60b341d0 100644
--- a/frontend/src/app/_elements/_charts/line-chart/line-chart.component.css
+++ b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.css
@@ -22,7 +22,8 @@ canvas {
 }
 
 .hide {
-    display: none;
+    display: none !important;
+    background-color: red;
 }
 
 .dl-button {
diff --git a/frontend/src/app/_elements/_charts/line-chart/line-chart.component.html b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.html
index cc1c0121..505dd50b 100644
--- a/frontend/src/app/_elements/_charts/line-chart/line-chart.component.html
+++ b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.html
@@ -1,5 +1,5 @@
 <div #wrapper class="position-relative" style="width:100%;height:95%; border: 1px solid var(--ns-accent); background-color: var(--ns-bg-dark-100); border-radius: 15px;">
-    <div class="d-flex flex-column align-items-stretch" [ngClass]="{'hide':experiment.type != ProblemType.Regression}" style="width: 100%; height: 90%;">
+    <div class="d-flex flex-column align-items-stretch" [ngClass]="{'hide':experiment.type !== ProblemType.Regression}" style="width: 100%; height: 90%;">
         <div class="canvas-container">
             <canvas #myChartmae>   
             </canvas>
@@ -9,18 +9,16 @@
             </canvas>
         </div>
     </div>
-    <div class="ns-row" [ngClass]="{'hide':experiment.type == ProblemType.Regression}">
-        <div class="ns-col">
+    <div class="d-flex flex-column align-items-stretch" [ngClass]="{'hide':experiment.type === ProblemType.Regression}" style="width: 100%; height: 90%;">
+        <div class="canvas-container">
             <canvas #myChartloss>   
             </canvas>
         </div>
-        <div class="ns-col">
+        <div class="canvas-container">
             <canvas #myChartacc>
             </canvas>
         </div>
     </div>
-
-
     <div class="bottom d-flex flex-row" style="justify-content: space-between; align-items: center;">
         <h3 class="mt-5 mx-2"><span *ngIf="modelName.length > 0 && predictor">Model treniran za konfiguraciju: {{modelName}}</span><span *ngIf="modelName.length > 0 && !predictor">Model se trenira za konfiguraciju: {{modelName}}</span></h3>
         <button *ngIf="predictor" class="mt-5 mx-2 btn-clear dl-button d-flex flex-row" (click)="downloadFile();" style="display: inline-block;" matTooltip="Preuzmi H5" matTooltipPosition="above">
diff --git a/frontend/src/app/_elements/folder/folder.component.html b/frontend/src/app/_elements/folder/folder.component.html
index 5d5e7822..e77e05a3 100644
--- a/frontend/src/app/_elements/folder/folder.component.html
+++ b/frontend/src/app/_elements/folder/folder.component.html
@@ -76,6 +76,9 @@
                             {{file.lastUpdated | date}}
                         </div>
                         <div class="mx-2 hover-show" *ngIf="selectedTab !== TabType.PublicDatasets && selectedTab !== TabType.PublicModels">
+                            <button *ngIf="selectedTab==TabType.MyDatasets || selectedTab==TabType.MyModels" class="btn-clear file-button" (click)="shareFile(file,$event)" style="display: inline-block;" matTooltip="Podeli" matTooltipPosition="above">
+                                <mat-icon>share</mat-icon>
+                            </button>
                             <button *ngIf="selectedTab==TabType.MyDatasets" class="btn-clear file-button" (click)="downloadFile(file,$event)" style="display: inline-block;" matTooltip="Preuzmi" matTooltipPosition="above">
                                 <mat-icon>download</mat-icon>
                             </button>
@@ -122,12 +125,15 @@
     <div [ngSwitch]="newFileSelected" *ngIf="!listView">
         <div class="file-bottom-buttons" *ngIf="selectedTab != TabType.NewFile">
             <div class="file-bottom-buttons-helper">
-                <button *ngIf="this.selectedFile && selectedTab == TabType.File && privacy != Privacy.Public" class="btn-clear file-button" (click)="deleteFile(this.selectedFile, $event)" matTooltip="Obriši" matTooltipPosition="above">
+                <button *ngIf="this.selectedFile && selectedTab == TabType.File && privacy != Privacy.Public" class="btn-clear file-button" (click)="deleteFile(selectedFile, $event)" matTooltip="Obriši" matTooltipPosition="above">
                     <mat-icon>delete</mat-icon>
                 </button>
-                <button *ngIf="this.selectedFile && selectedTab==TabType.File && FolderType.Dataset==this.type" class="btn-clear file-button" (click)="downloadFile(this.selectedFile,$event)" style="display: inline-block;" matTooltip="Preuzmi" matTooltipPosition="above">
+                <button *ngIf="this.selectedFile && selectedTab==TabType.File && FolderType.Dataset==this.type" class="btn-clear file-button" (click)="downloadFile(selectedFile,$event)" style="display: inline-block;" matTooltip="Preuzmi" matTooltipPosition="above">
                     <mat-icon>download</mat-icon>
                 </button>
+                <button *ngIf="this.selectedFile && selectedTab == TabType.File" class="btn-clear file-button" (click)="shareFile(selectedFile,$event)" style="display: inline-block;" matTooltip="Podeli" matTooltipPosition="above">
+                    <mat-icon>share</mat-icon>
+                </button>
             </div>
             <!-- <button class="btn-clear file-button">
                 <mat-icon>zoom_out_map</mat-icon>
diff --git a/frontend/src/app/_elements/folder/folder.component.ts b/frontend/src/app/_elements/folder/folder.component.ts
index 60f6857c..418b5a7f 100644
--- a/frontend/src/app/_elements/folder/folder.component.ts
+++ b/frontend/src/app/_elements/folder/folder.component.ts
@@ -15,6 +15,8 @@ import { ActivatedRoute, Router } from '@angular/router';
 import Predictor from 'src/app/_data/Predictor';
 import FileSaver from 'file-saver';
 import isEqual from 'lodash.isequal';
+import { ShareDialogComponent } from 'src/app/_modals/share-dialog/share-dialog.component';
+import { MatDialog } from '@angular/material/dialog';
 
 @Component({
   selector: 'app-folder',
@@ -50,7 +52,7 @@ export class FolderComponent implements AfterViewInit {
 
   searchTerm: string = '';
 
-  constructor(private datasetsService: DatasetsService, private experimentsService: ExperimentsService, private modelsService: ModelsService, private predictorsService: PredictorsService, private signalRService: SignalRService, private router: Router, private route: ActivatedRoute) {
+  constructor(private datasetsService: DatasetsService, private experimentsService: ExperimentsService, private modelsService: ModelsService, private predictorsService: PredictorsService, private signalRService: SignalRService, private router: Router, private route: ActivatedRoute, public dialog: MatDialog) {
     this.tabsToShow.forEach(tab => this.folders[tab] = []);
   }
 
@@ -104,6 +106,18 @@ export class FolderComponent implements AfterViewInit {
   }
 
   selectFile(file?: FolderFile) {
+    if (this.privacy == Privacy.Public) {
+      if (file) {
+        if (this.type == FolderType.Dataset) {
+          this.router.navigate(['dataset', file?._id]);
+        } else if (this.type == FolderType.Model) {
+          this.router.navigate(['model', file?._id]);
+        }
+      }
+
+    }
+
+
     this.formDataset.resetPagging();
     this.selectedFile = file;
     this.updateLastFileData(file);
@@ -154,6 +168,22 @@ export class FolderComponent implements AfterViewInit {
     this.okPressed.emit();
   }
 
+  fileToShare: FolderFile | undefined = undefined;
+
+  shareFile(file: FolderFile, event: Event) {
+    event.stopPropagation();
+
+    this.fileToShare = file;
+
+    const dialogRef = this.dialog.open(ShareDialogComponent, {
+      width: '550px',
+      data: { file: this.fileToShare, fileType: this.type }
+    });
+    dialogRef.afterClosed().subscribe(experiment => {
+      this.refreshFiles();
+    });
+  }
+
   _initialized: boolean = false;
 
   refreshFiles(selectedDatasetId: string | null = null, selectedModelId: string | null = null) {
@@ -547,9 +577,9 @@ export class FolderComponent implements AfterViewInit {
   selectTab(tab: TabType) {
     if (tab == TabType.NewFile) {
       this.selectNewFile();
-    } else if (tab == TabType.File) {
+    } /*else if (tab == TabType.File) {
       this.selectFile(this.selectedFile);
-    }
+    }*/
     this.listView = this.getListView(tab);
     this.type = this.getFolderType(tab);
     this.privacy = this.getPrivacy(tab);
diff --git a/frontend/src/app/_elements/form-dataset/form-dataset.component.html b/frontend/src/app/_elements/form-dataset/form-dataset.component.html
index 2a956128..b518f15c 100644
--- a/frontend/src/app/_elements/form-dataset/form-dataset.component.html
+++ b/frontend/src/app/_elements/form-dataset/form-dataset.component.html
@@ -2,7 +2,7 @@
     <div class="topBar">
         <div class="kolona mb-3">
             <div class="fileButton">
-                <button type="button" mat-raised-button (click)="fileInput.click()" [disabled]="dataset._id != ''" >
+                <button type="button" mat-raised-button (click)="fileInput.click()" [disabled]="dataset._id != '' || disableAll">
                     <span *ngIf="!firstInput && dataset._id == '' ">Dodaj izvor podataka</span>
                     <span *ngIf="firstInput && dataset._id == '' ">{{filename}}</span>
                     <span *ngIf="dataset._id != '' ">Fajl je odabran</span>
@@ -14,7 +14,7 @@
             <div role="group">
                 <mat-form-field class="example-full-width" appearance="fill">
                     <mat-label>Naziv</mat-label>
-                    <input type="text" matInput value="{{dataset?.name}}" [(ngModel)]="dataset.name" (input)="editEvent.emit()">
+                    <input type="text" matInput value="{{dataset?.name}}" [(ngModel)]="dataset.name" (input)="editEvent.emit()" [readonly]="disableAll">
 
 
                     <mat-error *ngIf="nameFormControl.hasError('required')">
@@ -26,7 +26,7 @@
         <div class="kolona">
             <mat-form-field appearance="fill">
                 <mat-label>Delimiter</mat-label>
-                <mat-select id="delimiterOptions" [(ngModel)]="dataset.delimiter" (selectionChange)="update(); editEvent.emit();" value=",">
+                <mat-select id="delimiterOptions" [(ngModel)]="dataset.delimiter" (selectionChange)="update(); editEvent.emit();" value="," [disabled]="disableAll">
                     <mat-option *ngFor="let option of delimiterOptions" [value]="option">
                         {{ option }}
                     </mat-option>
@@ -42,7 +42,7 @@
             <i class="material-icons-outlined icon-display" [ngClass]="{'hidden': tableData.hasInput}">file_upload</i>
 
 
-            <input class="file" id="file-upload" [disabled]="dataset._id != ''" (change)="changeListener($event)" (valueChange)="dataset.isPreProcess = false; editEvent.emit()" #fileInput type="file" accept=".csv">
+            <input class="file" id="file-upload" [disabled]="dataset._id != '' || disableAll" (change)="changeListener($event)" (valueChange)="dataset.isPreProcess = false; editEvent.emit()" #fileInput type="file" accept=".csv">
 
             <div class="datatable">
                 <div [ngClass]="{'hidden': (!existingFlag)}" class="text-center">
diff --git a/frontend/src/app/_elements/form-dataset/form-dataset.component.ts b/frontend/src/app/_elements/form-dataset/form-dataset.component.ts
index 3df76aa5..3eb6fe39 100644
--- a/frontend/src/app/_elements/form-dataset/form-dataset.component.ts
+++ b/frontend/src/app/_elements/form-dataset/form-dataset.component.ts
@@ -13,6 +13,7 @@ import { FormControl, Validators } from '@angular/forms';
   styleUrls: ['./form-dataset.component.css']
 })
 export class FormDatasetComponent {
+  @Input() disableAll: boolean = false;
 
   @ViewChild(DatatableComponent) datatable!: DatatableComponent;
 
diff --git a/frontend/src/app/_elements/form-model/form-model.component.ts b/frontend/src/app/_elements/form-model/form-model.component.ts
index 7c84d2ba..f72ce6de 100644
--- a/frontend/src/app/_elements/form-model/form-model.component.ts
+++ b/frontend/src/app/_elements/form-model/form-model.component.ts
@@ -12,6 +12,8 @@ import { MatSliderChange } from '@angular/material/slider';
   styleUrls: ['./form-model.component.css']
 })
 export class FormModelComponent implements AfterViewInit {
+  @Input() disableAll: boolean = false;
+
   @ViewChild(GraphComponent) graph!: GraphComponent;
   @Input() forExperiment!: Experiment;
   @Output() selectedModelChangeEvent = new EventEmitter<Model>();
-- 
cgit v1.2.3