Jira Page

frontend/sitcomm/angular.json

@@ -99,5 +99,8 @@
         }
       }
     }
+  },
+  "cli": {
+    "analytics": false
   }
 }

frontend/sitcomm/package-lock.json

@@ -14,7 +14,7 @@
         "@angular/compiler": "^14.2.0",
         "@angular/core": "^14.2.0",
         "@angular/forms": "^14.2.0",
-        "@angular/material": "^14.2.4",
+        "@angular/material": "^14.2.7",
         "@angular/platform-browser": "^14.2.0",
         "@angular/platform-browser-dynamic": "^14.2.0",
         "@angular/router": "^14.2.0",
@@ -347,9 +347,9 @@
       }
     },
     "node_modules/@angular/cdk": {
-      "version": "14.2.4",
-      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-14.2.4.tgz",
-      "integrity": "sha512-5jngZcOyC2n9pRYec/D0iCw72QSnCkGYjtfgIlOK/FZYGhpOa34GMGObPuv4F0u7J2TEtbO6xIFsCFaK0FLIWQ==",
+      "version": "14.2.7",
+      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-14.2.7.tgz",
+      "integrity": "sha512-/tEsYaUbDSnfEmKVvAMramIptmhI67O+9STjOV0i+74XR2NospeK0fkbywIANu1n3w6AHGMotvRWJrjmbCElFg==",
       "dependencies": {
         "tslib": "^2.3.0"
       },
@@ -501,15 +501,15 @@
       }
     },
     "node_modules/@angular/material": {
-      "version": "14.2.4",
-      "resolved": "https://registry.npmjs.org/@angular/material/-/material-14.2.4.tgz",
-      "integrity": "sha512-vS7dyrnr2YpZPjFFmnSZ9W0dFpBQ5cWf4CH5AI0/KfbCGC+2ybkFZ61oMNBf1xXdoyf4Ob16Dm3xerKWFwJ4sQ==",
+      "version": "14.2.7",
+      "resolved": "https://registry.npmjs.org/@angular/material/-/material-14.2.7.tgz",
+      "integrity": "sha512-WXHh8pEStpgkXZJmYOg2cI8BSHkV82ET4XTJCNPdveumaCn1UYnaNzsXD13kw5z+zmy8CufhFEzdXTrv/yt7KQ==",
       "dependencies": {
         "tslib": "^2.3.0"
       },
       "peerDependencies": {
         "@angular/animations": "^14.0.0 || ^15.0.0",
-        "@angular/cdk": "14.2.4",
+        "@angular/cdk": "14.2.7",
         "@angular/common": "^14.0.0 || ^15.0.0",
         "@angular/core": "^14.0.0 || ^15.0.0",
         "@angular/forms": "^14.0.0 || ^15.0.0",
@@ -12125,9 +12125,9 @@
       }
     },
     "@angular/cdk": {
-      "version": "14.2.4",
-      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-14.2.4.tgz",
-      "integrity": "sha512-5jngZcOyC2n9pRYec/D0iCw72QSnCkGYjtfgIlOK/FZYGhpOa34GMGObPuv4F0u7J2TEtbO6xIFsCFaK0FLIWQ==",
+      "version": "14.2.7",
+      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-14.2.7.tgz",
+      "integrity": "sha512-/tEsYaUbDSnfEmKVvAMramIptmhI67O+9STjOV0i+74XR2NospeK0fkbywIANu1n3w6AHGMotvRWJrjmbCElFg==",
       "requires": {
         "parse5": "^5.0.0",
         "tslib": "^2.3.0"
@@ -12220,9 +12220,9 @@
       }
     },
     "@angular/material": {
-      "version": "14.2.4",
-      "resolved": "https://registry.npmjs.org/@angular/material/-/material-14.2.4.tgz",
-      "integrity": "sha512-vS7dyrnr2YpZPjFFmnSZ9W0dFpBQ5cWf4CH5AI0/KfbCGC+2ybkFZ61oMNBf1xXdoyf4Ob16Dm3xerKWFwJ4sQ==",
+      "version": "14.2.7",
+      "resolved": "https://registry.npmjs.org/@angular/material/-/material-14.2.7.tgz",
+      "integrity": "sha512-WXHh8pEStpgkXZJmYOg2cI8BSHkV82ET4XTJCNPdveumaCn1UYnaNzsXD13kw5z+zmy8CufhFEzdXTrv/yt7KQ==",
       "requires": {
         "tslib": "^2.3.0"
       }

frontend/sitcomm/package.json

@@ -16,7 +16,7 @@
     "@angular/compiler": "^14.2.0",
     "@angular/core": "^14.2.0",
     "@angular/forms": "^14.2.0",
-    "@angular/material": "^14.2.4",
+    "@angular/material": "^14.2.7",
     "@angular/platform-browser": "^14.2.0",
     "@angular/platform-browser-dynamic": "^14.2.0",
     "@angular/router": "^14.2.0",
@@ -38,4 +38,4 @@
     "karma-jasmine-html-reporter": "~2.0.0",
     "typescript": "~4.7.2"
   }
-}
+}
\ No newline at end of file

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

@@ -15,6 +15,7 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import { MatGridListModule } from '@angular/material/grid-list';
+import { MatMenuModule } from '@angular/material/menu';
 import { MatCardModule } from '@angular/material/card';
 import { ProfileComponent } from './profile/profile.component';
 import { GithubComponent } from './github/github.component';
@@ -53,6 +54,7 @@ import {MatExpansionModule} from '@angular/material/expansion';
     MatSidenavModule,
     MatGridListModule,
     MatCardModule,
+    MatMenuModule,
     MatTabsModule,
     MatStepperModule,
     MatListModule,

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

+.mat-colname-css{
+    width: 80%;
+    height: 95%;
+    background-color: ghostwhite;
+}
+.mat-issuename-css{
+    width: 90%;
+    height: 90%;
+    background-color: white;
+}
+
+.menu-button-css {
+    text-align: left;
+    padding: 0px 0px;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 20px;
+  }
\ No newline at end of file

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

-<p>jira works!</p>
+<mat-grid-list cols="4" rowHeight={{calRowHeight()}} [gutterSize]="'15px'" style="padding: 20px;">
+    <mat-grid-tile
+        [colspan]=1
+        [rowspan]=1>
+        <mat-card class="mat-colname-css">
+            <mat-card-title>
+                TO DO
+            </mat-card-title>
+            <mat-card-content>
+                <mat-grid-list cols='1' rowHeight="3:1" [gutterSize]="'10px'" style="padding: 5px;">
+                    <mat-grid-tile
+                        *ngFor="let tile of to_do"
+                        [colspan]=1
+                        [rowspan]=1>
+                        <mat-card class="mat-issuename-css">
+                            <mat-card-title>
+                                <button mat-button [matMenuTriggerFor]="menu" class="menu-button-css">{{tile.name}}</button>
+                                <mat-menu #menu="matMenu">
+                                  <button mat-menu-item (click)="moveToInProgress(tile.tid)">Move to in progress</button>
+                                  <button mat-menu-item (click)="moveToDone(tile.tid)">Mark as done</button>
+                                </mat-menu>                                                                            
+                            </mat-card-title>
+                            <mat-card-content>
+                                <p>{{tile.tid}}</p>
+                                <p>{{tile.content}}</p>
+                            </mat-card-content>
+                        </mat-card>
+                    </mat-grid-tile>
+                </mat-grid-list> 
+            </mat-card-content>
+        </mat-card>
+    </mat-grid-tile>
+
+    <mat-grid-tile
+        [colspan]=1
+        [rowspan]=1>
+        <mat-card class="mat-colname-css">
+            <mat-card-title>IN PROGRESS</mat-card-title>
+            <mat-card-content>
+                <mat-grid-list cols='1' rowHeight="3:1" [gutterSize]="'10px'" style="padding: 5px;">
+                    <mat-grid-tile
+                        *ngFor="let tile of in_prog"
+                        [colspan]=1
+                        [rowspan]=1>
+                        <mat-card class="mat-issuename-css">
+                            <mat-card-title>
+                                <button mat-button [matMenuTriggerFor]="menu" class="menu-button-css">{{tile.name}}</button>
+                                <mat-menu #menu="matMenu">
+                                  <button mat-menu-item (click)="moveToToDo(tile.tid)">Move to To Do</button>
+                                  <button mat-menu-item (click)="moveToDone(tile.tid)">Mark as done</button>
+                                </mat-menu>                                                                            
+                            </mat-card-title>
+                            <mat-card-content>
+                                <p>{{tile.tid}}</p>
+                                <p>{{tile.content}}</p>
+                            </mat-card-content>
+                        </mat-card>
+                    </mat-grid-tile>
+                </mat-grid-list> 
+            </mat-card-content>
+        </mat-card>
+    </mat-grid-tile>
+
+    <mat-grid-tile
+        [colspan]=1
+        [rowspan]=1>
+        <mat-card class="mat-colname-css">
+            <mat-card-title>DONE</mat-card-title>
+            <mat-card-content>
+                <mat-grid-list cols='1' rowHeight="3:1" [gutterSize]="'10px'" style="padding: 5px;">
+                    <mat-grid-tile
+                        *ngFor="let tile of done"
+                        [colspan]=1
+                        [rowspan]=1>
+                        <mat-card class="mat-issuename-css">
+                            <mat-card-title>
+                                <button mat-button [matMenuTriggerFor]="menu" class="menu-button-css">{{tile.name}}</button>
+                                <mat-menu #menu="matMenu">
+                                  <button mat-menu-item (click)="moveToToDo(tile.tid)">Move to To Do</button>
+                                  <button mat-menu-item (click)="moveToInProgress(tile.tid)">Move to In Progress</button>
+                                </mat-menu>                                                                            
+                            </mat-card-title>
+                            <mat-card-content>
+                                <p>{{tile.tid}}</p>
+                                <p>{{tile.content}}</p>
+                            </mat-card-content>
+                        </mat-card>
+                    </mat-grid-tile>
+                </mat-grid-list> 
+            </mat-card-content>
+        </mat-card>
+    </mat-grid-tile>
+
+    <mat-grid-tile
+        [colspan]=1
+        [rowspan]=1>
+        <mat-card class="mat-colname-css">
+            <mat-card-title>BACKLOG</mat-card-title>
+            <mat-card-content>
+                <mat-grid-list cols='1' rowHeight="3:1" [gutterSize]="'10px'" style="padding: 5px;">
+                    <mat-grid-tile
+                        *ngFor="let tile of backlog"
+                        [colspan]=1
+                        [rowspan]=1>
+                        <mat-card class="mat-issuename-css">
+                            <mat-card-title>
+                                <button mat-button [matMenuTriggerFor]="menu" class="menu-button-css">{{tile.name}}</button>
+                                <mat-menu #menu="matMenu">
+                                  <button mat-menu-item (click)="moveToToDo(tile.tid)">Move to To Do</button>
+                                  <button mat-menu-item (click)="moveToInProgress(tile.tid)">Move to In Progress</button>
+                                  <button mat-menu-item (click)="moveToDone(tile.tid)">Mark as Done</button>
+                                </mat-menu>                                                                            
+                            </mat-card-title>
+                            <mat-card-content>
+                                <p>{{tile.tid}}</p>
+                                <p>{{tile.content}}</p>
+                            </mat-card-content>
+                        </mat-card>
+                    </mat-grid-tile>
+                </mat-grid-list> 
+            </mat-card-content>
+        </mat-card>
+    </mat-grid-tile>
+
+</mat-grid-list> 

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

@@ -8,11 +8,116 @@ import { FetcherService } from '../fetcher.service';
   styleUrls: ['./jira.component.css']
 })
 export class JiraComponent implements OnInit {
-  projectId = NaN;
-  constructor(private fetcherService: FetcherService) { }
+  id: number;
+  name: string;
+  /*
+  to_do: { tid: number; name: string; content: string; }[];
+  in_prog: { tid: number; name: string; content: string; }[];
+  done: { tid: number; name: string; content: string; }[];
+  backlog: { tid: number; name: string; content: string; }[];
+  */
+  constructor(private fetcherService: FetcherService) {
+    console.log(window.history.state);
+    this.id = window.history.state.id;
+    this.name = window.history.state.name;
+    /*
+    this.to_do = TO_DO;
+    this.in_prog = IN_PROGRESS;
+    this.done = DONE;
+    this.backlog = BACKLOG;
+    */
+  }
+  calColCount(){
+    console.log(window.innerWidth);
+    if(window.innerWidth > 1000){
+      return 4;
+    }else if(window.innerWidth > 600){
+      return 2;
+    }else{
+      return 1;
+    }
+  }
+
+  calRowHeight(){
+    let max_issue = Math.max(this.to_do.length,this.in_prog.length,this.done.length,this.backlog.length)
+    let str = '';
+    str = '1:'+(max_issue/3);
+    /*
+    console.log(max_issue);
+    console.log(str);
+    */
+    return str;
+  }
+
+  fetchList(id: number) {
+    //return dummy data of type entry
+    if(id == 1){
+      return TO_DO;
+    }
+    else if(id == 2){
+      return IN_PROGRESS;
+    }
+    else if(id == 3){
+      return DONE;
+    }
+    else{
+      return BACKLOG;
+    } 
+  }
 
+  moveToInProgress(tid: number){
+    console.log(tid);
+    console.log('Move to In Progress');
+  }
+  
+  moveToDone(tid: number){
+    console.log(tid);
+    console.log('Move to Done');
+  }
+
+  moveToToDo(tid: number){
+    console.log(tid);
+    console.log('Move to ToDo');
+  }
   ngOnInit(): void {
-    this.projectId = this.fetcherService.getCurrentProjectId();
+    this.fetcherService.setCurrentProjectId(this.id);
   }
+  col_name = GRID_NAME;
+  to_do = TO_DO;
+  in_prog = IN_PROGRESS;
+  done = DONE;
+  backlog = BACKLOG;
 
 }
+
+export const GRID_NAME = [
+  {name: 'TO DO ISSUES', content: 'BLAH BLAH BLAH'},
+  {name: 'IN PROGRESS', content: 'BLAH BLAH BLAH'},
+  {name: 'DONE', content: 'BLAH BLAH BLAH'},
+  {name: 'BACKLOG', content: 'BLAH BLAH BLAH'},
+]
+
+export const TO_DO = [
+  {tid: 1, name: 'A', content: 'BLAH BLAH BLAH'},
+  {tid: 2, name: 'B', content: 'BLAH BLAH BLAH'},
+  {tid: 3, name: 'C', content: 'BLAH BLAH BLAH'},
+  {tid: 4, name: 'D', content: 'BLAH BLAH BLAH'},
+]
+export const IN_PROGRESS = [
+  {tid: 5, name: 'E', content: 'BLAH BLAH BLAH'},
+  {tid: 6, name: 'F', content: 'BLAH BLAH BLAH'},
+  {tid: 7, name: 'G', content: 'BLAH BLAH BLAH'},
+  {tid: 8, name: 'H', content: 'BLAH BLAH BLAH'},
+  {tid: 9, name: 'I', content: 'BLAH BLAH BLAH'},
+  {tid: 10, name: 'J', content: 'BLAH BLAH BLAH'},
+]
+export const DONE = [
+  {tid: 11, name: 'K', content: 'BLAH BLAH BLAH'},
+  {tid: 12, name: 'L', content: 'BLAH BLAH BLAH'},
+  {tid: 13, name: 'M', content: 'BLAH BLAH BLAH'},
+]
+export const BACKLOG = [
+  {tid: 14, name: 'N', content: 'BLAH BLAH BLAH'},
+  {tid: 15, name: 'O', content: 'BLAH BLAH BLAH'},
+  {tid: 16, name: 'P', content: 'BLAH BLAH BLAH'},
+]
\ No newline at end of file