Manage class partial

client/src/app/app.module.ts

@@ -20,8 +20,10 @@ import { ExpandableListModule } from 'angular2-expandable-list';
 import { AttendanceListComponent } from './pages/attendance-list/attendance-list.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { MaterialModule } from './material.module';
-import { NgxSpinnerModule } from 'ngx-spinner';
 
+import { NgxSpinnerModule } from 'ngx-spinner';
+import { MatDialogModule } from '@angular/material/dialog';
+import { Dialog } from './components/dialog/dialog';
 
 @NgModule({
   declarations: [
@@ -37,7 +39,8 @@ import { NgxSpinnerModule } from 'ngx-spinner';
     TeacherAttendancePageComponent,
     ManageClassesComponent,
     AttendanceListComponent,
-    AddStudentSingleClassComponent
+    AddStudentSingleClassComponent,
+    Dialog,
   ],
   imports: [
     BrowserModule,
@@ -47,8 +50,14 @@ import { NgxSpinnerModule } from 'ngx-spinner';
     BrowserAnimationsModule,
     MaterialModule,
     NgxSpinnerModule,
+    MatDialogModule,
+  ],
+  entryComponents: [
+    Dialog
+  ],
+  providers: [
+    // {provide: MAT_DIALOG_DEFAULT_OPTIONS, useValue: {hasBackdrop: false}}
   ],
-  providers: [],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

client/src/app/components/dialog/dialog.html

@@ -0,0 +1,11 @@
+<h1 mat-dialog-title> Escolha os alunos para adicionar</h1>
+<div>
+  <mat-selection-list #students (selectionChange)="onSelection($event, students.selectedOptions.selected)">
+      <mat-list-option *ngFor="let student of data.students" [value] ="student">
+        {{student.Name}}
+      </mat-list-option>
+   </mat-selection-list>
+<div mat-dialog-actions>
+  <button mat-button (click)="cancelClicked()">Cancelar</button>
+  <button mat-button (click)="addClicked(students.selectedOptions.selected)">Adicionar {{students.selectedOptions.selected.length}} alunos</button>
+</div>

client/src/app/components/dialog/dialog.ts

@@ -0,0 +1,40 @@
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
+import { Component, Inject } from '@angular/core';
+import { AuthService} from '../../services/auth.service';
+
+@Component({
+  selector: 'dialog-overview-example-dialog',
+  templateUrl: './dialog.html',
+})
+export class Dialog {
+
+  toAddList = {};
+
+  constructor(
+    public dialogRef: MatDialogRef<Dialog>,
+    private service: AuthService,
+    @Inject(MAT_DIALOG_DATA) public data: any) { }
+
+  cancelClicked(): void {
+    this.dialogRef.close();
+  }
+
+  addClicked() {
+    this.dialogRef.close();
+    const keys = Object.keys(this.toAddList);
+    keys.forEach(key => {
+      if (this.toAddList[key].selected) {
+        const request = {
+          turma: this.data.turmaId,
+          pessoa: key,
+        };
+        this.service.postNewAlunoInTurma(request).subscribe(() => console.log(`${key} sent`));
+      }
+    });
+  }
+
+  onSelection(selected) {
+    this.toAddList[selected.option.value.id] = { selected: selected.option.selected, id: selected.option.value.id };
+    console.log('list: ', this.toAddList);
+  }
+}

client/src/app/pages/manage-classes-page/manage-classes-page.component.css

@@ -52,69 +52,16 @@
   font-size: 20px;
 }
 
+.delete-button {
+  color: gray;
+  background-color: transparent;
+  border: none;
+  margin-left: 40px;
+}
 
-/* header {}
-    h2 {
-      text-align: center;
-      margin: 0;
-      padding: 0;
-      display: block;
-      color: #ffffff;
-      background-color: rgb(57, 86, 148);
-
-    }
-
-    h4 {
-      text-align: center;
-      margin: 0;
-      padding: 0;
-      display: block;
-      color: black;
-      background: rgb(225, 226, 227);
-
-    }
-
-    button {
-      margin: 4px auto;
-      font-family: Arial;
-      background-color: #e1e2e3;
-      border: none;
-      padding: auto;
-      border-radius: 0;
-      cursor: pointer;
-      cursor: hand;
-      float: left;
-      font-size: medium;
-    }
-
-    button:hover {
-      background-color: #cfd8dc;
-    }
-
-
-  body {}
-
-    ul {
-      margin: 0 auto;
-      padding: 0;
-      padding: 5px 5px 0 5px;
-      border-left: none;
-      border-right: none;
-      border: 1px solid rgba(0, 0, 0, 0.1);
-    }
-      button.card {
-        border: 1px solid #CCC;
-        box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.5);
-        margin-bottom: 5px;
-        width: 100%;
-        box-sizing: border-box;
-        cursor: pointer;
-        border-radius: 3px;
-
-      }
-
-      span.data {
-        position: relative;
-      }
-
-   */
+.add-button {
+  color: gray;
+  background-color: transparent;
+  border: none;
+  margin-right: 40px;
+}

client/src/app/pages/manage-classes-page/manage-classes-page.component.html

@@ -1,9 +1,3 @@
-<!-- <header>
-  <h2> Turmas </h2>
-  <h4> <a routerLink="/home/true"><button>Voltar</button></a>
-    Turmas Realizadas </h4>
-</header> -->
-
 <nav class="nav">
   <button class="btn btn-primary" routerLink="/home/true">Voltar</button>
   <h2 class="tit">Turmas</h2>
@@ -14,18 +8,32 @@ <h3> Turmas Realizadas </h3>
 </div>
 
 <body>
-  <div class="header" *ngFor="let c of listaCurso">
-    <span class="title"><b>{{c.Name}}</b></span>
-    <div *ngFor="let lista of listaCurso">
-      <div *ngIf="c.id === lista.id">
-        <a routerLink="/detailClasse/{{lista.idAula}}">
-          <button class="card">
-            <span><b>Aula </b></span>
-            <span class="data">{{lista.StartDate | date}}</span>
-            <span class="data">{{lista.EndDate | date}}</span>
-          </button>
-        </a>
-      </div>
+  <div>
+    <div *ngFor="let turma of courseList">
+      <mat-accordion (click)="populateStudents(turma.Turma)">
+        <mat-expansion-panel [expanded]="expandCollapse(turma.Turma.id)">
+          <mat-expansion-panel-header>
+            <mat-panel-title>
+              Turma {{turma.Turma.Name}}
+            </mat-panel-title>
+            <button class="add-button" (click)="showAddStudent(turma.Turma.id)">
+                <mat-icon aria-hidden="false" aria-label="Example home icon">add_circle_outline</mat-icon>
+            </button>
+          </mat-expansion-panel-header>
+          <mat-list>
+            <mat-list-item *ngFor="let student of studentList">
+              <div>
+                <b>
+                  {{student.Name}}
+                </b>
+              </div>
+              <button class="delete-button" (click)="removeStudent(student, turma.Turma)">
+                  <mat-icon aria-hidden="false" aria-label="Example home icon">delete_outline</mat-icon>
+              </button>
+            </mat-list-item>
+          </mat-list>
+        </mat-expansion-panel>
+      </mat-accordion>
     </div>
   </div>
 </body>

client/src/app/pages/manage-classes-page/manage-classes-page.component.ts

@@ -1,5 +1,8 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Inject } from '@angular/core';
 import { AuthService} from '../../services/auth.service';
+import { NgxSpinnerService } from 'ngx-spinner';
+import { MatDialog } from '@angular/material/dialog';
+import { Dialog } from '../../components/dialog/dialog';
 
 @Component({
   selector: 'app-manage-classes',
@@ -8,20 +11,74 @@ import { AuthService} from '../../services/auth.service';
 })
 export class ManageClassesComponent implements OnInit {
 
-  listaCurso: Array<any> = [];
+  courseList: Array<any> = [];
+  studentList: Array<any> = [];
   TEACHER_ID = 6; // should get user ID from service singleton
-  constructor(private service: AuthService) { }
+  expansionAux = -1;
+  constructor(private service: AuthService, private spinner: NgxSpinnerService, public dialog: MatDialog) { }
 
   ngOnInit() {
-    // load spinner
+    this.spinner.show(undefined,
+      {
+        type: 'line-scale-party',
+        size: 'medium',
+        bdColor: 'transparent',
+        color: 'yellow',
+        fullScreen: false
+      }
+    );
     this.getCursos();
   }
 
   // Calls service to get "cursos"
   getCursos(): void {
-    this.service.getTurmasDoColaborador(this.TEACHER_ID).subscribe((cursos) => {
-      this.listaCurso = cursos;
-      console.log('Cursos: ', cursos);
+    this.service.getTurmasDoColaborador(this.TEACHER_ID).subscribe((courses) => {
+      this.courseList = courses;
+      console.log('Cursos: ', this.courseList)
+      this.spinner.hide();
+    });
+  }
+
+  expandCollapse(courseId: number) {
+    return courseId === this.expansionAux;
+    }
+
+  populateStudents(turma) {
+    this.expansionAux = turma.id;
+    Object.assign(this.studentList, turma.Alunos, {});
+  }
+
+  removeStudent(student, turma) {
+    this.service.removeAlunoFromTurma(turma.id, student.id).subscribe((res) => {
+      const {status } = res;
+      if (status === 200 ) {
+        this.studentList = this.studentList.filter((value) => value.id !== student.id);
+      }
+    });
+  }
+
+  showAddStudent(classId: number) {
+    this.spinner.show();
+    this.service.getAllAlunos().subscribe((alunos) => {
+      const allStudents = alunos;
+      console.log('All Students: ', allStudents);
+      this.studentList.map((student, index) => allStudents.splice(index, 1));
+      this.spinner.hide();
+
+      const dialogRef = this.dialog.open(Dialog, {
+        maxWidth: '290px',
+        height: '500px',
+        data: {
+          students: allStudents,
+          turmaId: classId,
+        },
+      });
+      dialogRef.afterClosed().subscribe(result => {
+        console.log('The dialog was closed');
+        console.log('This All Students: ', allStudents);
+        this.getCursos();
+        this.expansionAux = -1;
+      });
     });
   }
 }

client/src/app/pages/manage-classes-page/teste.json

@@ -0,0 +1,42 @@
+{
+    "turma": {
+        "id": 1,
+        "Name": "Turma Teste 1",
+        "Place": "Campinas",
+        "Description": "Primeira turma pra teste",
+        "WeekDay": 4,
+        "StartTime": "20:56:43",
+        "EndTime": "00:00:00",
+        "Cursos": 1,
+        "Alunos": [
+            2,
+            3,
+            4
+        ],
+        "Aulas": [
+            1,
+            2,
+            3,
+            4,
+            5,
+            6,
+            7,
+            8,
+            9,
+            11,
+            12,
+            13
+        ]
+    },
+    "aluno": {
+        "Ativo": true,
+        "Email": "rotiv@gmail.com",
+        "EndDate": "2019-06-13",
+        "Name": "Rotiv",
+        "Password": "abc123",
+        "Phone": "1932622407",
+        "StartDate": "2019-06-10",
+        "UserType": 0,
+        "id": 9
+    }
+}

client/src/app/services/auth.service.ts

@@ -60,13 +60,12 @@ export class AuthService {
 
   getAllTurmasDoColaborador() {
     return this.http.get(`${this.url}/colaboradorTurma`);
-
   }
 
-  getAllTurmas(): Observable<any>{
+  getAllTurmas(): Observable<any> {
     return this.http.get(`${this.url}/turma`);
   }
-  
+
   getAllAulas(): Observable<any>{
     return this.http.get(`${this.url}/aulas`);
   }
@@ -98,4 +97,13 @@ export class AuthService {
   postNewAlunoInAula(bodyObj){
     return this.http.post(`${this.url}/pessoaAula/`, bodyObj, this.httpOptions);
   }
-} 
+
+  removeAlunoFromTurma(turmaId, alunoId) {
+    return this.http.delete(`${this.url}/pessoaTurma/${alunoId}/${turmaId}`, {...this.httpOptions, observe: 'response' });
+  }
+
+  postNewAlunoInTurma(bodyObj) {
+    return this.http.post(`${this.url}/pessoaTurma2/`, bodyObj, this.httpOptions);
+  }
+
+}