updated readme notebook more button

soft-eng-practicum · Aug 23, 2024 · 4e568b9 · 4e568b9
1 parent 3161c40
commit 4e568b9
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 18 deletions.
diff --git a/...m.Web/ClientApp/src/app/projects/project-file-explorer/project-file-explorer.component.ts b/...m.Web/ClientApp/src/app/projects/project-file-explorer/project-file-explorer.component.ts
@@ -57,7 +57,7 @@ export class ProjectFileExplorerComponent implements OnInit {
 
   async ngOnInit() {
     this.dataBrowserURL = 'https://observablehq.com/embed/@sfsu/untitled?cell=*&dataset=';
-    this.currentDirectory = this.extractDirectory(this.router.url);
+    this.currentDirectory = this.extractDirectory(this.router.url).slice(5);
     this.setDirectoryFile(this.currentDirectory);
     let directory = this.currentDirectory.endsWith('.csv') ? this.currentDirectory.split('/').slice(0, -1).join('/') : this.currentDirectory;
     directory = directory.endsWith('/') ? directory.slice(0,-1) : directory;

diff --git a/src/Analysim.Web/ClientApp/src/app/projects/project/project.component.html b/src/Analysim.Web/ClientApp/src/app/projects/project/project.component.html
@@ -99,18 +99,18 @@ <h3 class="project-title" *ngIf="(project.route | route:'projectname') as projec
           </div>
         </div>
         <div class="row project-notebook-row" *ngIf='toggleNotebookExpand'>
-          <div [innerHtml]="notebookContent"></div>
+          <div [innerHtml]="notebookContent" [ngClass]="isFull ? 'notebook-readme-full' : 'notebook-readme'"></div>
         </div>
         <div *ngIf='toggleNotebookExpand'>
-          <div class="readme-button" (click)="navigateToNotebook()">More...</div>
+          <div class="readme-button" (click)="toggleNotebook()">{{isFull ? 'Read Less..' : 'Read More..'}}</div>
         </div>
         <div class="row project-option-row">
 
-          <div *ngIf="activeView === 'Content'" class="project-content-footer">
+          <!-- <div *ngIf="activeView === 'Content'" class="project-content-footer">
             <input type="button" value="Go back to Content" 
             [routerLink]='["/project/" +  (project.route | route:"owner") + "/" + (project.route | route:"projectname")]'
             [ngClass]='{"active": toggleView == "File"}' (click)="showFile()">
-          </div>
+          </div> -->
 
           <input type="button" value="Expand Notebook" *ngIf="!toggleNotebookExpand"
             (click)="toggleNotebookExpand = true;">
@@ -122,7 +122,7 @@ <h3 class="project-title" *ngIf="(project.route | route:'projectname') as projec
         <div class="row project-view-option-row">
           <div class="project-view-toggle">
             <input type="button" value="Datasets"
-              [routerLink]='["/project/" +  (project.route | route:"owner") + "/" + (project.route | route:"projectname")]'
+              [routerLink]='["/project/" +  (project.route | route:"owner") + "/" + (project.route | route:"projectname") + "/"  + "file"]'
               [ngClass]='{"active": toggleView == "File"}' (click)="showFile()">
             <input type="button" value="Notebooks"
               [routerLink]='["/project/" +  (project.route | route:"owner") + "/" + (project.route | route:"projectname") + "/"  + "notebook"]'

diff --git a/src/Analysim.Web/ClientApp/src/app/projects/project/project.component.scss b/src/Analysim.Web/ClientApp/src/app/projects/project/project.component.scss
@@ -50,6 +50,10 @@
       -webkit-mask-image: linear-gradient(rgb(0, 0, 0) 70%, transparent);
       mask-image: linear-gradient(rgb(0, 0, 0) 70%, transparent);
     }
+
+    .notebook-readme-full{
+      margin-bottom: 4px;
+    }
 
 .notebook-cell pre code div {
   background: #cfc8c8;

diff --git a/src/Analysim.Web/ClientApp/src/app/projects/project/project.component.ts b/src/Analysim.Web/ClientApp/src/app/projects/project/project.component.ts
@@ -49,6 +49,7 @@ export class ProjectComponent implements OnInit {
   versions: number[] = [];
   latestVersion: number = 1;
   readmeNotebook: any;
+  isFull: boolean = false;
 
   toggleMoreOption: boolean = false
   toggleNotebookExpand: boolean = true
@@ -147,22 +148,20 @@ export class ProjectComponent implements OnInit {
     }
   }
 
-  navigateToNotebook() {
-    // https://localhost:5001/project/uday-bi/testing-readme/notebook/readme?isNotebook=true&notebookId=93&version=0
-    // let url = this.router.url.split('/').slice(0, 4).join('/');
-    // console.log("the url is : ", url);
-    this.router.navigate([this.router.url.split('/').slice(0, 4).join('/') + "/notebook/" + this.readmeNotebook.name], {
-      queryParams: {
-        isNotebook: true,
-        notebookId: this.readmeNotebook.notebookID,
-        version: this.latestVersion,
-      }, queryParamsHandling: 'merge'
-    });
+  toggleNotebook() {
+    // this.router.navigate([this.router.url.split('/').slice(0, 4).join('/') + "/notebook/" + this.readmeNotebook.name], {
+    //   queryParams: {
+    //     isNotebook: true,
+    //     notebookId: this.readmeNotebook.notebookID,
+    //     version: this.latestVersion,
+    //   }, queryParamsHandling: 'merge'
+    // });
+    this.isFull = !this.isFull;
   }
 
   renderNotebook(notebookJson: any): string {
     // Simple rendering of the notebook. Customize as needed.
-    let htmlContent = '<div class="notebook-readme">';
+    let htmlContent = `<div class="notebookClass">`;
     for (const cell of notebookJson.cells) {
       htmlContent += '<div class="notebook-cell">';
       if (cell.cell_type === 'markdown') {