Github by meet

frontend/sitcomm/src/app/app.module.ts

@@ -25,7 +25,7 @@ import { ProjectComponent } from './project/project.component';
 import { MatTab, MatTabsModule } from '@angular/material/tabs';
 import { MatStepperModule } from '@angular/material/stepper';
 import { MatListModule } from '@angular/material/list';
-
+import {MatExpansionModule} from '@angular/material/expansion';
 
 @NgModule({
   declarations: [
@@ -55,7 +55,8 @@ import { MatListModule } from '@angular/material/list';
     MatCardModule,
     MatTabsModule,
     MatStepperModule,
-    MatListModule
+    MatListModule,
+    MatExpansionModule
   ],
   providers: [CookieService],
   bootstrap: [AppComponent]

frontend/sitcomm/src/app/confluence/confluence.component.html

-<p>confluence works!</p>
+<div [innerHTML]="file"></div>
\ No newline at end of file

frontend/sitcomm/src/app/confluence/confluence.component.ts

@@ -14,5 +14,11 @@ export class ConfluenceComponent implements OnInit {
   ngOnInit(): void {
     this.projectId = this.fetcherService.getCurrentProjectId();
   }
+  file = this.fetchData(this.projectId);
 
+  fetchData(id: number) {
+    //return dummy data of type entry
+    const file = "<h1>Test file</h1>";
+    return file;
+  }
 }

frontend/sitcomm/src/app/github/github.component.css

+.mat-mdc-list-item-icon {
+  color: rgba(0, 0, 0, 0.54);
+}
+.form-field-css{
+    width: 100%;
+    height: auto;
+}
\ No newline at end of file

frontend/sitcomm/src/app/github/github.component.html

-
+<!--<mat-list>
+  <div mat-subheader>Folders</div>
+  <mat-list-item *ngFor="let folder of files">
+    <mat-icon matListItemIcon>insert_drive_file</mat-icon>
+    <div matListItemTitle>{{folder.name}}</div>
+    <span matListItemLine>{{folder.commitDate | date}}</span>
+  </mat-list-item>
+</mat-list>
+-->
+<mat-accordion>
+    <div mat-subheader>Files</div>
+    <mat-list-item *ngFor="let file of files">
+        <mat-expansion-panel hideToggle>
+            <mat-expansion-panel-header>
+                <mat-panel-title>
+                    {{file.name}}
+                </mat-panel-title>
+            </mat-expansion-panel-header>
+            <div>
+            <mat-form-field class="form-field-css">
+                <textarea matInput id="file-text" type="text" readonly="True" [rows]="file.url.split('\n').length" [(ngModel)]="file.url"></textarea>
+            </mat-form-field>
+            <button mat-raised-button color="primary" style="margin-right: 10px;" (click)="allowEditFile()">Edit</button>
+            <button mat-raised-button color="primary" (click)="submitFile(file.id,file.url)">Save</button>
+            </div>
+        </mat-expansion-panel>
+    </mat-list-item>
+</mat-accordion>

frontend/sitcomm/src/app/github/github.component.ts

@@ -7,11 +7,18 @@ export interface entry{
   id: number;
   name: string;
   commitMessage: string;
-  commitDate: string;
+  commitDate: Date;
   type: string;
   url: string;
 }
 
+export interface Section {
+  id: number;
+  name: string;
+  commitDate: Date;
+  url: string;
+}
+
 @Component({
   selector: 'app-github',
   templateUrl: './github.component.html',
@@ -19,23 +26,35 @@ export interface entry{
 })
 export class GithubComponent implements OnInit {
   projectId = NaN;
-  constructor(private fetcherService: FetcherService) { 
+  constructor(private fetcherService: FetcherService) {
   }
   fetchData(id: number) {
     //return dummy data of type entry
-    return [
-      {id: 1, name: "test", commitMessage: "test", commitDate: "test", type: "folder", url: "test"},
-      {id: 2, name: "test", commitMessage: "test", commitDate: "test", type: "folder", url: "test"},
-      {id: 3, name: "test", commitMessage: "test", commitDate: "test", type: "folder", url: "test"},
-      {id: 4, name: "test", commitMessage: "test", commitDate: "test", type: "folder", url: "test"},
-      {id: 5, name: "test", commitMessage: "test", commitDate: "test", type: "folder", url: "test"},
-      {id: 1, name: "test", commitMessage: "test", commitDate: "test", type: "file", url: "test"},
-      {id: 2, name: "test", commitMessage: "test", commitDate: "test", type: "file", url: "test"},
-      {id: 3, name: "test", commitMessage: "test", commitDate: "test", type: "file", url: "test"},
-      {id: 4, name: "test", commitMessage: "test", commitDate: "test", type: "file", url: "test"},
-      {id: 5, name: "test", commitMessage: "test", commitDate: "test", type: "file", url: "test"},
+    var files:entry[] = [
+      {id: 1, name: "test", commitMessage: "test", commitDate: new Date('1/27/2022'), type: "folder", url: "test\n".repeat(10)},
+      {id: 2, name: "test", commitMessage: "test", commitDate: new Date('1/1/2022'), type: "folder", url: "test"},
+      {id: 3, name: "test", commitMessage: "test", commitDate: new Date('1/1/2022'), type: "folder", url: "test"},
+      {id: 4, name: "test", commitMessage: "test", commitDate: new Date('1/1/2022'), type: "folder", url: "test"},
+      {id: 5, name: "test", commitMessage: "test", commitDate: new Date('1/1/2022'), type: "folder", url: "test"},
+      {id: 6, name: "test", commitMessage: "test", commitDate: new Date('1/1/2022'), type: "file", url: "test"},
+      {id: 7, name: "test", commitMessage: "test", commitDate: new Date('1/1/2022'), type: "file", url: "test"},
+      {id: 8, name: "test", commitMessage: "test", commitDate: new Date('1/1/2022'), type: "file", url: "test"},
+      {id: 9, name: "test", commitMessage: "test", commitDate: new Date('1/1/2022'), type: "file", url: "test"},
+      {id: 10, name: "test", commitMessage: "test", commitDate: new Date('1/1/2022'), type: "file", url: "test"},
     ]
+    return files;
+  }
+  submitFile(id: number,data: string) {
+    //submit data to server
+    console.log("submitting file");
+    console.log(data);
+    console.log(data.split("\n").length);
+    document.getElementById("file-text")?.setAttribute("readonly", "true");
+  }
+  allowEditFile(){
+    document.getElementById("file-text")?.removeAttribute("readonly");
   }
+  files: entry[] = this.fetchData(this.projectId);
 
   ngOnInit(): void {
     this.projectId = this.fetcherService.getCurrentProjectId();