Added classes, posts and comments

package.json

@@ -26,6 +26,7 @@
     "bootstrap": "^4.5.0",
     "bootswatch": "^4.5.0",
     "font-awesome": "^4.7.0",
+    "ng2-file-upload": "^1.4.0",
     "rxjs": "~6.5.4",
     "tslib": "^1.10.0",
     "zone.js": "~0.10.2"

src/app/Models/attachment.ts

@@ -0,0 +1,4 @@
+export class Attachment {
+  attachmentId: number;
+  path: string;
+}

src/app/Models/class.ts

@@ -1,10 +1,12 @@
 import { User } from './user';
 
 export interface Class {
-  ClassId: number;
-  Name: string;
-  Branch: string;
-  Grade: string;
-  InvitationCode: string;
-  Owner: User;
+  classId?: number;
+  name: string;
+  branch: string;
+  grade: string;
+  invitationCode?: string;
+  owner?: User;
+  members?: Array<User>;
+  pending?: Array<User>;
 }

src/app/Models/comment.ts

@@ -0,0 +1,10 @@
+import { User } from './user';
+import { Publication } from './publication';
+
+export class Commentt {
+  commentId?: number;
+  PublicationId?: number;
+  owner?: User;
+  content: string;
+  dateComment?: Date;
+}

src/app/Models/publication.ts

@@ -0,0 +1,15 @@
+import { User } from './user';
+import { Class } from './class';
+import { Attachment } from './attachment';
+import { Commentt } from './comment';
+
+export class Publication {
+  publicationId?: number;
+  content: string;
+  attachements?: Array<Attachment>;
+  comments?: Array<Commentt>;
+  datePublication?: Date;
+  owner?: User;
+  class?: Class;
+  showComments?: boolean;
+}

src/app/Models/user.ts

@@ -1,5 +1,6 @@
 export interface User {
   id: number;
+  userName: string;
   lName: string;
   fName: string;
   status: string;

src/app/add-class/add-class.component.html

@@ -0,0 +1,43 @@
+<form #registerForm="ngForm" (ngSubmit)="create()">
+  <h1 class="h3 mb-3 font-weight-normal text-center">Create new class</h1>
+  <div class="form-group mb-2">
+    <input
+      type="text"
+      class="form-control"
+      placeholder="Name"
+      name="Name"
+      [(ngModel)]="model.Name"
+      required
+      autofocus
+    />
+  </div>
+  <div class="form-group mb-2">
+    <input
+      type="text"
+      class="form-control"
+      placeholder="Branch"
+      name="Branch"
+      [(ngModel)]="model.Branch"
+      required
+    />
+  </div>
+  <div class="form-group mb-2">
+    <input
+      type="text"
+      class="form-control"
+      placeholder="Grade"
+      name="Grade"
+      [(ngModel)]="model.Grade"
+      required
+      autofocus
+    />
+  </div>
+  <div class="form-group text-center">
+    <button class="btn btn-success mr-2" type="submit">
+      Create
+    </button>
+    <button class="btn btn-info" (click)="cancel()" type="button">
+      Cancel
+    </button>
+  </div>
+</form>

src/app/classes-list/classes-list.component.spec.ts → src/app/add-class/add-class.component.spec.ts

@@ -1,20 +1,20 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { ClassesListComponent } from './classes-list.component';
+import { AddClassComponent } from './add-class.component';
 
-describe('ClassesListComponent', () => {
-  let component: ClassesListComponent;
-  let fixture: ComponentFixture<ClassesListComponent>;
+describe('AddClassComponent', () => {
+  let component: AddClassComponent;
+  let fixture: ComponentFixture<AddClassComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ ClassesListComponent ]
+      declarations: [ AddClassComponent ]
     })
     .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(ClassesListComponent);
+    fixture = TestBed.createComponent(AddClassComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

src/app/add-class/add-class.component.ts

@@ -0,0 +1,38 @@
+import { Component, OnInit, Output, EventEmitter } from '@angular/core';
+import { ClassService } from '../service/class.service';
+import { AlertifyService } from '../service/alertify.service';
+
+@Component({
+  selector: 'app-add-class',
+  templateUrl: './add-class.component.html',
+  styleUrls: ['./add-class.component.css'],
+})
+export class AddClassComponent implements OnInit {
+  @Output() cancelAddClass = new EventEmitter();
+  @Output() isCreated = new EventEmitter();
+  model: any = {};
+
+  constructor(
+    private classService: ClassService,
+    private alertify: AlertifyService
+  ) {}
+
+  ngOnInit(): void {}
+
+  create() {
+    this.classService.createClass(this.model).subscribe(
+      (resp) => {
+        this.alertify.success(resp);
+        this.isCreated.emit(true);
+        this.cancel();
+      },
+      (error) => {
+        this.alertify.error(error);
+      }
+    );
+  }
+
+  cancel() {
+    this.cancelAddClass.emit(false);
+  }
+}

src/app/app-routing.module.ts

@@ -3,7 +3,7 @@ import { Routes, RouterModule } from '@angular/router';
 import { NotfoundComponent } from './notfound/notfound.component';
 import { HomeComponent } from './home/home.component';
 import { UsersListComponent } from './users-list/users-list.component';
-import { ClassesListComponent } from './classes-list/classes-list.component';
+import { ClassesListComponent } from './classes-cards/classes-cards.component';
 import { AuthGuard } from './guards/auth.guard';
 
 const routes: Routes = [

src/app/app.module.ts

@@ -15,7 +15,12 @@ import { HomeComponent } from './home/home.component';
 import { ErrorInterceptorProvider } from './service/error.interceptor';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { UsersListComponent } from './users-list/users-list.component';
-import { ClassesListComponent } from './classes-list/classes-list.component';
+import { ClassesListComponent } from './classes-cards/classes-cards.component';
+import { AddClassComponent } from './add-class/add-class.component';
+import { ClassWallComponent } from './class-wall/class-wall.component';
+import { FileUploadComponent } from './file-upload/file-upload.component';
+import { FileUploadModule } from 'ng2-file-upload';
+import { PublicationListComponent } from './publication-list/publication-list.component';
 
 export function TokenGetter() {
   return localStorage.getItem('token');
@@ -30,6 +35,10 @@ export function TokenGetter() {
     NotfoundComponent,
     UsersListComponent,
     ClassesListComponent,
+    AddClassComponent,
+    ClassWallComponent,
+    FileUploadComponent,
+    PublicationListComponent,
   ],
   imports: [
     CommonModule,
@@ -38,6 +47,7 @@ export function TokenGetter() {
     AppRoutingModule,
     HttpClientModule,
     NgbModule,
+    FileUploadModule,
     JwtModule.forRoot({
       config: {
         tokenGetter: TokenGetter,

src/app/class-wall/class-wall.component.css

@@ -0,0 +1,95 @@
+.container {
+  display: flex;
+  /*height: 100vh;
+  background: lightblue; */
+}
+
+.left {
+  flex: 0.25;
+  background-color: lightgray;
+}
+
+.right {
+  flex: 5;
+  background-color: gray;
+  position: relative;
+}
+
+.chat-wrapper {
+  display: flex;
+  flex-flow: row wrap;
+  flex-direction: column;
+  background: #2b3e50;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+.chat-header {
+  flex: 0.7;
+  background-color: #506070;
+}
+
+.chat-body {
+  flex: 6;
+  border: 1px solid #4e5d6c !important;
+  background-color: #2b3e50;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.chat-footer {
+  flex: 1;
+  background-color: #2b3e50;
+  width: 90%;
+  margin: 0 auto;
+}
+
+.shadow-textarea textarea.form-control::placeholder {
+  font-weight: 300;
+}
+.shadow-textarea textarea.form-control {
+  padding-left: 0.8rem;
+}
+
+textarea {
+  resize: none;
+  height: 50px;
+  padding: 10px;
+  border: none;
+
+  background-color: #4e5d6c !important;
+}
+.roundedleft {
+  border-radius: 1em 0 0 1em !important;
+}
+.roundedright {
+  border-radius: 0 1em 1em 0 !important;
+}
+
+.newpost {
+  background-color: #4e5d6c !important;
+}
+
+/*
+ *  STYLE 1 ScrollBar
+ */
+
+#style-1::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+  border-radius: 10px;
+  background-color: #f5f5f5;
+}
+
+#style-1::-webkit-scrollbar {
+  width: 12px;
+  background-color: #f5f5f5;
+}
+
+#style-1::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+  background-color: #4e5d6c;
+}