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 +
 .../share-dialog/share-dialog.component.css        |  0
 .../share-dialog/share-dialog.component.html       | 14 +++++
 .../share-dialog/share-dialog.component.spec.ts    | 25 ++++++++
 .../_modals/share-dialog/share-dialog.component.ts | 70 ++++++++++++++++++++++
 .../_pages/page-dataset/page-dataset.component.css |  0
 .../page-dataset/page-dataset.component.html       |  4 ++
 .../page-dataset/page-dataset.component.spec.ts    | 25 ++++++++
 .../_pages/page-dataset/page-dataset.component.ts  | 45 ++++++++++++++
 .../app/_pages/page-model/page-model.component.css |  0
 .../_pages/page-model/page-model.component.html    |  4 ++
 .../_pages/page-model/page-model.component.spec.ts | 25 ++++++++
 .../app/_pages/page-model/page-model.component.ts  | 41 +++++++++++++
 frontend/src/app/_services/datasets.service.ts     |  8 +++
 frontend/src/app/_services/models.service.ts       |  8 +++
 frontend/src/app/app-routing.module.ts             |  4 ++
 frontend/src/app/app.module.ts                     |  8 ++-
 frontend/src/styles/layout.css                     | 12 +++-
 24 files changed, 345 insertions(+), 18 deletions(-)
 create mode 100644 frontend/src/app/_modals/share-dialog/share-dialog.component.css
 create mode 100644 frontend/src/app/_modals/share-dialog/share-dialog.component.html
 create mode 100644 frontend/src/app/_modals/share-dialog/share-dialog.component.spec.ts
 create mode 100644 frontend/src/app/_modals/share-dialog/share-dialog.component.ts
 create mode 100644 frontend/src/app/_pages/page-dataset/page-dataset.component.css
 create mode 100644 frontend/src/app/_pages/page-dataset/page-dataset.component.html
 create mode 100644 frontend/src/app/_pages/page-dataset/page-dataset.component.spec.ts
 create mode 100644 frontend/src/app/_pages/page-dataset/page-dataset.component.ts
 create mode 100644 frontend/src/app/_pages/page-model/page-model.component.css
 create mode 100644 frontend/src/app/_pages/page-model/page-model.component.html
 create mode 100644 frontend/src/app/_pages/page-model/page-model.component.spec.ts
 create mode 100644 frontend/src/app/_pages/page-model/page-model.component.ts

(limited to 'frontend')

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>();
diff --git a/frontend/src/app/_modals/share-dialog/share-dialog.component.css b/frontend/src/app/_modals/share-dialog/share-dialog.component.css
new file mode 100644
index 00000000..e69de29b
diff --git a/frontend/src/app/_modals/share-dialog/share-dialog.component.html b/frontend/src/app/_modals/share-dialog/share-dialog.component.html
new file mode 100644
index 00000000..32584197
--- /dev/null
+++ b/frontend/src/app/_modals/share-dialog/share-dialog.component.html
@@ -0,0 +1,14 @@
+<h1 mat-dialog-title class="text-center">Podeli {{data.fileType == 0 ? 'izvor podataka' : 'konfiguraciju neuronske mreže'}}</h1>
+<div mat-dialog-content class="mt-5 mb-3 mx-1">
+    <form>
+        <mat-checkbox class="m-2" [(ngModel)]="data.file.isPublic" [ngModelOptions]="{standalone: true}" (change)="publicChanged()">Svi mogu da vide </mat-checkbox>
+        <mat-checkbox class="m-2" [(ngModel)]="data.file.accessibleByLink" [ngModelOptions]="{standalone: true}" (change)="linkChanged()">Osobe sa linkom mogu da vide</mat-checkbox>
+        <div class="input-group my-3">
+            <input type="text" [value]="link" class="form-control" placeholder="" aria-label="Copy link button addon" aria-describedby="button-copy">
+            <button class="btn btn-outline-primary" type="button" id="button-copy" (click)="copy()" [disabled]="!data.file.accessibleByLink"><div class="mt-1"><mat-icon *ngIf="data.file.accessibleByLink">link</mat-icon><mat-icon *ngIf="!data.file.accessibleByLink">link_off</mat-icon></div></button>
+        </div>
+    </form>
+</div>
+<div mat-dialog-actions class="justify-content-center">
+    <button mat-stroked-button (click)="close()">Gotovo</button>
+</div>
\ No newline at end of file
diff --git a/frontend/src/app/_modals/share-dialog/share-dialog.component.spec.ts b/frontend/src/app/_modals/share-dialog/share-dialog.component.spec.ts
new file mode 100644
index 00000000..51bd4c9a
--- /dev/null
+++ b/frontend/src/app/_modals/share-dialog/share-dialog.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ShareDialogComponent } from './share-dialog.component';
+
+describe('ShareDialogComponent', () => {
+  let component: ShareDialogComponent;
+  let fixture: ComponentFixture<ShareDialogComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ShareDialogComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ShareDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/_modals/share-dialog/share-dialog.component.ts b/frontend/src/app/_modals/share-dialog/share-dialog.component.ts
new file mode 100644
index 00000000..2331cd8b
--- /dev/null
+++ b/frontend/src/app/_modals/share-dialog/share-dialog.component.ts
@@ -0,0 +1,70 @@
+import { Component, Inject, Input, OnInit } from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import Dataset from 'src/app/_data/Dataset';
+import { FolderType } from 'src/app/_data/FolderFile';
+import Model from 'src/app/_data/Model';
+import { DatasetsService } from 'src/app/_services/datasets.service';
+import { ModelsService } from 'src/app/_services/models.service';
+
+interface DialogData {
+  file: (Dataset | Model);
+  fileType: FolderType;
+}
+
+@Component({
+  selector: 'app-share-dialog',
+  templateUrl: './share-dialog.component.html',
+  styleUrls: ['./share-dialog.component.css']
+})
+export class ShareDialogComponent implements OnInit {
+  constructor(public dialogRef: MatDialogRef<ShareDialogComponent>, @Inject(MAT_DIALOG_DATA) public data: DialogData, private modelsService: ModelsService, private datasetsService: DatasetsService) {
+
+  }
+
+  link: string = '';
+
+  ngOnInit(): void {
+    let link = window.location.origin;
+    if (this.data.fileType == FolderType.Dataset) {
+      link += '/dataset/';
+    } else if (this.data.fileType == FolderType.Model) {
+      link += '/model/';
+    }
+    link += this.data.file._id;
+    this.link = link;
+  }
+
+  close() {
+    this.dialogRef.close();
+  }
+
+  copy() {
+    navigator.clipboard.writeText(this.link);
+  }
+
+  publicChanged() {
+    if (this.data.fileType == FolderType.Dataset) {
+      this.datasetsService.updateDatasetIsPublic(this.data.file._id, this.data.file.isPublic).subscribe(() => {
+      });
+    } else if (this.data.fileType == FolderType.Model) {
+      this.modelsService.updateModelIsPublic(this.data.file._id, this.data.file.isPublic).subscribe(() => {
+      });
+    }
+
+    if (this.data.file.isPublic) {
+      this.data.file.accessibleByLink = true;
+    }
+  }
+
+  linkChanged() {
+    if (this.data.fileType == FolderType.Dataset) {
+      this.datasetsService.updateDatasetAccessibleByLink(this.data.file._id, this.data.file.accessibleByLink).subscribe(() => {
+      });
+    } else if (this.data.fileType == FolderType.Model) {
+      this.modelsService.updateModelAccessibleByLink(this.data.file._id, this.data.file.accessibleByLink).subscribe(() => {
+      });
+    }
+  }
+
+  FolderType = FolderType;
+}
diff --git a/frontend/src/app/_pages/page-dataset/page-dataset.component.css b/frontend/src/app/_pages/page-dataset/page-dataset.component.css
new file mode 100644
index 00000000..e69de29b
diff --git a/frontend/src/app/_pages/page-dataset/page-dataset.component.html b/frontend/src/app/_pages/page-dataset/page-dataset.component.html
new file mode 100644
index 00000000..2357a656
--- /dev/null
+++ b/frontend/src/app/_pages/page-dataset/page-dataset.component.html
@@ -0,0 +1,4 @@
+<div class="force-centered" style="color: var(--offwhite);">
+    <app-form-dataset [disableAll]="true"></app-form-dataset>
+    <button mat-raised-button class="m-3 p-2" (click)="import()">Uvezi</button>
+</div>
\ No newline at end of file
diff --git a/frontend/src/app/_pages/page-dataset/page-dataset.component.spec.ts b/frontend/src/app/_pages/page-dataset/page-dataset.component.spec.ts
new file mode 100644
index 00000000..2c961cd5
--- /dev/null
+++ b/frontend/src/app/_pages/page-dataset/page-dataset.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PageDatasetComponent } from './page-dataset.component';
+
+describe('PageDatasetComponent', () => {
+  let component: PageDatasetComponent;
+  let fixture: ComponentFixture<PageDatasetComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ PageDatasetComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PageDatasetComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/_pages/page-dataset/page-dataset.component.ts b/frontend/src/app/_pages/page-dataset/page-dataset.component.ts
new file mode 100644
index 00000000..b6d0c2a4
--- /dev/null
+++ b/frontend/src/app/_pages/page-dataset/page-dataset.component.ts
@@ -0,0 +1,45 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import Shared from 'src/app/Shared';
+import Dataset from 'src/app/_data/Dataset';
+import { FormDatasetComponent } from 'src/app/_elements/form-dataset/form-dataset.component';
+import { DatasetsService } from 'src/app/_services/datasets.service';
+
+@Component({
+  selector: 'app-page-dataset',
+  templateUrl: './page-dataset.component.html',
+  styleUrls: ['./page-dataset.component.css']
+})
+export class PageDatasetComponent implements OnInit {
+
+  @ViewChild(FormDatasetComponent) formDataset!: FormDatasetComponent;
+
+  constructor(private route: ActivatedRoute, private router: Router, private datasetsService: DatasetsService) { }
+
+  ngOnInit(): void {
+    this.route.queryParams.subscribe(params => {
+      let id = this.route.snapshot.paramMap.get("id");
+      if (id) {
+        this.datasetsService.getDatasetById(id).subscribe((dataset) => {
+          this.formDataset.dataset = dataset;
+          this.formDataset.loadExisting();
+        });
+      } else {
+        this.router.navigate(['']);
+      }
+    });
+  }
+
+  import() {
+    this.formDataset.dataset._id = "";
+    this.formDataset.dataset.isPreProcess = true;
+    this.formDataset.dataset.isPublic = false;
+    this.datasetsService.stealDataset(this.formDataset.dataset).subscribe((response) => {
+      Shared.openDialog("Obaveštenje", "Uspešno ste dodali javni izvor podataka u vašu kolekciju.");
+    }, (error: any) => {
+      if (error.error == "Dataset with this name already exists") {
+        Shared.openDialog("Obaveštenje", "Izvor podataka sa ovim imenom postoji u vašoj kolekciji.");
+      }
+    });
+  }
+}
diff --git a/frontend/src/app/_pages/page-model/page-model.component.css b/frontend/src/app/_pages/page-model/page-model.component.css
new file mode 100644
index 00000000..e69de29b
diff --git a/frontend/src/app/_pages/page-model/page-model.component.html b/frontend/src/app/_pages/page-model/page-model.component.html
new file mode 100644
index 00000000..e494542f
--- /dev/null
+++ b/frontend/src/app/_pages/page-model/page-model.component.html
@@ -0,0 +1,4 @@
+<div class="force-centered" style="color: var(--offwhite);">
+    <app-form-model [disableAll]="true"></app-form-model>
+    <button mat-raised-button class="m-3 p-2" (click)="import()">Uvezi</button>
+</div>
\ No newline at end of file
diff --git a/frontend/src/app/_pages/page-model/page-model.component.spec.ts b/frontend/src/app/_pages/page-model/page-model.component.spec.ts
new file mode 100644
index 00000000..e235de5c
--- /dev/null
+++ b/frontend/src/app/_pages/page-model/page-model.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PageModelComponent } from './page-model.component';
+
+describe('PageModelComponent', () => {
+  let component: PageModelComponent;
+  let fixture: ComponentFixture<PageModelComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ PageModelComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PageModelComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/_pages/page-model/page-model.component.ts b/frontend/src/app/_pages/page-model/page-model.component.ts
new file mode 100644
index 00000000..f988ef0d
--- /dev/null
+++ b/frontend/src/app/_pages/page-model/page-model.component.ts
@@ -0,0 +1,41 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import Shared from 'src/app/Shared';
+import Model from 'src/app/_data/Model';
+import { FormModelComponent } from 'src/app/_elements/form-model/form-model.component';
+import { ModelsService } from 'src/app/_services/models.service';
+
+@Component({
+  selector: 'app-page-model',
+  templateUrl: './page-model.component.html',
+  styleUrls: ['./page-model.component.css']
+})
+export class PageModelComponent implements OnInit {
+
+  @ViewChild(FormModelComponent) formModel!: FormModelComponent;
+
+  constructor(private route: ActivatedRoute, private router: Router, private modelsService: ModelsService) { }
+
+  ngOnInit(): void {
+    this.route.queryParams.subscribe(params => {
+      let id = this.route.snapshot.paramMap.get("id");
+      if (id) {
+        this.modelsService.getModelById(id).subscribe((model) => {
+          this.formModel.newModel = model;
+        });
+      } else {
+        this.router.navigate(['']);
+      }
+    });
+  }
+
+  import() {
+    this.formModel.newModel._id = "";
+    this.formModel.newModel.isPublic = false;
+    this.modelsService.stealModel(this.formModel.newModel).subscribe((response) => {
+      Shared.openDialog("Obaveštenje", "Uspešno ste dodali javnu konfiguraciju neuronske mreže u vašu kolekciju.");
+    }, (error: any) => {
+      Shared.openDialog("Obaveštenje", "Konfiguracija neuronske mreže sa ovim imenom postoji u vašoj kolekciji.");
+    });
+  }
+}
diff --git a/frontend/src/app/_services/datasets.service.ts b/frontend/src/app/_services/datasets.service.ts
index 42fa5e55..11838b1d 100644
--- a/frontend/src/app/_services/datasets.service.ts
+++ b/frontend/src/app/_services/datasets.service.ts
@@ -70,4 +70,12 @@ export class DatasetsService {
   downloadFile(id: string): Observable<Blob> {
     return this.http.get(`${Configuration.settings.apiURL}/file/Download?id=` + id, { headers: this.authService.authHeader(), responseType: 'blob' });
   }
+
+  updateDatasetAccessibleByLink(id: string, acessibleByLink: boolean) {
+    return this.http.put(`${Configuration.settings.apiURL}/dataset/updateAccessibleByLink/` + id, acessibleByLink, { headers: this.authService.authHeader(), responseType: 'text' });
+  }
+
+  updateDatasetIsPublic(id: string, isPublic: boolean) {
+    return this.http.put(`${Configuration.settings.apiURL}/dataset/updateIsPublic/` + id, isPublic, { headers: this.authService.authHeader(), responseType: 'text' });
+  }
 }
diff --git a/frontend/src/app/_services/models.service.ts b/frontend/src/app/_services/models.service.ts
index 016fa9bc..398c7813 100644
--- a/frontend/src/app/_services/models.service.ts
+++ b/frontend/src/app/_services/models.service.ts
@@ -51,4 +51,12 @@ export class ModelsService {
     return this.http.get<Model>(`${Configuration.settings.apiURL}/model/byid/${modelId}`, { headers: this.authService.authHeader() });
   }
 
+  updateModelAccessibleByLink(id: string, acessibleByLink: boolean) {
+    return this.http.put(`${Configuration.settings.apiURL}/model/updateAccessibleByLink/` + id, acessibleByLink, { headers: this.authService.authHeader(), responseType: 'text' });
+  }
+
+  updateModelIsPublic(id: string, isPublic: boolean) {
+    return this.http.put(`${Configuration.settings.apiURL}/model/updateIsPublic/` + id, isPublic, { headers: this.authService.authHeader(), responseType: 'text' });
+  }
+
 }
diff --git a/frontend/src/app/app-routing.module.ts b/frontend/src/app/app-routing.module.ts
index 507089a8..fa53d5f0 100644
--- a/frontend/src/app/app-routing.module.ts
+++ b/frontend/src/app/app-routing.module.ts
@@ -9,6 +9,8 @@ import { ExperimentComponent } from './_pages/experiment/experiment.component';
 import { ArchiveComponent } from './_pages/archive/archive.component';
 import { ColumnTableComponent } from './_elements/column-table/column-table.component';
 import { TestComponent } from './_pages/test/test.component';
+import { PageDatasetComponent } from './_pages/page-dataset/page-dataset.component';
+import { PageModelComponent } from './_pages/page-model/page-model.component';
 
 const routes: Routes = [
   { path: '', component: HomeComponent, data: { title: 'Početna strana' } },
@@ -19,6 +21,8 @@ const routes: Routes = [
   { path: 'profile', component: ProfileComponent, canActivate: [AuthGuardService], data: { title: 'Profil' } },
   { path: 'playground', component: PlaygroundComponent, data: { title: 'Zabava' } },
   { path: 'test', component: TestComponent, data: { title: 'Test' } },
+  { path: 'dataset/:id', component: PageDatasetComponent, data: { title: 'Izvor podataka' } },
+  { path: 'model/:id', component: PageModelComponent, data: { title: 'Konfiguracija neuronske mreže' } },
   { path: '**', redirectTo: '' }
 ];
 
diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
index e2823761..21b09318 100644
--- a/frontend/src/app/app.module.ts
+++ b/frontend/src/app/app.module.ts
@@ -54,6 +54,9 @@ import { HeatmapComponent } from './_elements/_charts/heatmap/heatmap.component'
 import { HeatMapAllModule } from '@syncfusion/ej2-angular-heatmap';
 import { MetricViewComponent } from './_elements/metric-view/metric-view.component';
 import { SpinnerComponent } from './_elements/spinner/spinner.component';
+import { PageDatasetComponent } from './_pages/page-dataset/page-dataset.component';
+import { PageModelComponent } from './_pages/page-model/page-model.component';
+import { ShareDialogComponent } from './_modals/share-dialog/share-dialog.component';
 
 export function initializeApp(appConfig: Configuration) {
   return () => appConfig.load();
@@ -95,7 +98,10 @@ export function initializeApp(appConfig: Configuration) {
     LineChartComponent,
     SaveExperimentDialogComponent,
     SpinnerComponent,
-    UpdateExperimentDialogComponent
+    UpdateExperimentDialogComponent,
+    PageDatasetComponent,
+    PageModelComponent,
+    ShareDialogComponent
   ],
   imports: [
     BrowserModule,
diff --git a/frontend/src/styles/layout.css b/frontend/src/styles/layout.css
index 07c0bf34..790d2ca7 100644
--- a/frontend/src/styles/layout.css
+++ b/frontend/src/styles/layout.css
@@ -66,4 +66,14 @@ body {
     .break-2 {
         display: none;
     }
-}*/
\ No newline at end of file
+}*/
+
+.force-centered {
+    width: 80%;
+    height: 80%;
+    margin: auto;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
\ No newline at end of file
-- 
cgit v1.2.3