add sub-pages of professor-page

package.json

@@ -23,6 +23,7 @@
     "postcss-color-function": "^4.1.0",
     "rxjs": "~6.4.0",
     "tslib": "^1.10.0",
+    "yarn": "^1.21.1",
     "zone.js": "~0.9.1"
   },
   "devDependencies": {

src/app/app-routing.module.ts

@@ -2,11 +2,15 @@ import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 import { MainpageComponent } from 'src/pages/mainpage/mainpage.component';
 import { MainpageModule } from 'src/pages/mainpage/mainpage.module';
-import { ProfessorpageComponent } from 'src/pages/professorpage/professorpage.component';
-import { ProfessorpageModule } from 'src/pages/professorpage/professorpage.module';
 import { SearchpageComponent } from 'src/pages/searchpage/searchpage.component';
 import { ErrorPagesModule } from 'src/pages/error-pages/error-pages.module';
 import { NotFoundPageComponent } from 'src/pages/error-pages/not-found-page/not-found-page.component';
+import {MyArticlePageComponent} from 'src/pages/professorpage/my-article-page/my-article-page.component';
+import {MyConnectionPageComponent} from 'src/pages/professorpage/my-connection-page/my-connection-page.component';
+import {ProfessorPageComponent} from 'src/pages/professorpage/professorpage.component';
+import {ProfessorPageModule} from 'src/pages/professorpage/professorpage.module';
+import {MyArticlePageModule} from 'src/pages/professorpage/my-article-page/my-article-page.module';
+import {MyConnectionPageModule} from 'src/pages/professorpage/my-connection-page/my-connection-page.module';
 
 const routes: Routes = [
   {
@@ -19,7 +23,20 @@ const routes: Routes = [
   },
   {
     path: 'p',
-    component: ProfessorpageComponent,
+    children: [
+      {
+        path: '',
+        component: ProfessorPageComponent,
+      },
+      {
+        path: 'article',
+        component: MyArticlePageComponent,
+      },
+      {
+        path: 'connection',
+        component: MyConnectionPageComponent,
+      },
+    ],
   },
   {
     // 404 page
@@ -29,7 +46,14 @@ const routes: Routes = [
 ];
 
 @NgModule({
-  imports: [RouterModule.forRoot(routes), MainpageModule, ProfessorpageModule, ErrorPagesModule],
+  imports: [
+    RouterModule.forRoot(routes),
+    MainpageModule,
+    ErrorPagesModule,
+    ProfessorPageModule,
+    MyArticlePageModule,
+    MyConnectionPageModule,
+  ],
   exports: [RouterModule],
 })
 export class AppRoutingModule {}

src/app/app.module.ts

@@ -8,7 +8,7 @@ import { MainpageModule } from 'src/pages/mainpage/mainpage.module';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterOutlet } from '@angular/router';
 import { SearchpageModule } from 'src/pages/searchpage/searchpage.module';
-import { ProfessorpageModule } from 'src/pages/professorpage/professorpage.module';
+import { HttpClientModule } from '@angular/common/http';
 
 @NgModule({
   declarations: [AppComponent],
@@ -19,7 +19,7 @@ import { ProfessorpageModule } from 'src/pages/professorpage/professorpage.modul
     MainpageModule,
     BrowserAnimationsModule,
     SearchpageModule,
-    ProfessorpageModule,
+    HttpClientModule,
   ],
   providers: [],
   bootstrap: [AppComponent],

src/articleAbstractList.ts

@@ -0,0 +1,133 @@
+export const articles = [
+  {
+    title: 'Title1',
+    articleType: 'Type',
+    abstract: 'This is Abstract of this article.',
+    authors: ['author1', 'author2', 'author3'],
+    releaseDate : new Date(2019, 12, 12),
+    tags: ['tag1', 'tag2', 'tag3'],
+    refCount: 114,
+    downloadCount: 514,
+    hasFile: true,
+    showFavorite: true,
+  },
+  {
+    title: 'Title2',
+    articleType: 'Type',
+    abstract: 'This is Abstract of this article.',
+    authors: ['author1', 'author2', 'author3'],
+    releaseDate : new Date(2019, 12, 12),
+    tags: ['tag1', 'tag2', 'tag3'],
+    refCount: 114,
+    downloadCount: 514,
+    hasFile: true,
+    showFavorite: true,
+  },
+  {
+    title: 'Title3',
+    articleType: 'Type',
+    abstract: 'This is Abstract of this article.',
+    authors: ['author1', 'author2', 'author3'],
+    releaseDate : new Date(2019, 12, 12),
+    tags: ['tag1', 'tag2', 'tag3'],
+    refCount: 114,
+    downloadCount: 514,
+    hasFile: true,
+    showFavorite: true,
+  },
+  {
+    title: 'Title4',
+    articleType: 'Type',
+    abstract: 'This is Abstract of this article.',
+    authors: ['author1', 'author2', 'author3'],
+    releaseDate : new Date(2019, 12, 12),
+    tags: ['tag1', 'tag2', 'tag3'],
+    refCount: 114,
+    downloadCount: 514,
+    hasFile: true,
+    showFavorite: true,
+  },
+  {
+    title: 'Title5',
+    articleType: 'Type',
+    abstract: 'This is Abstract of this article.',
+    authors: ['author1', 'author2', 'author3'],
+    releaseDate : new Date(2019, 12, 12),
+    tags: ['tag1', 'tag2', 'tag3'],
+    refCount: 114,
+    downloadCount: 514,
+    hasFile: true,
+    showFavorite: true,
+  },
+  {
+    title: 'Title6',
+    articleType: 'Type',
+    abstract: 'This is Abstract of this article.',
+    authors: ['author1', 'author2', 'author3'],
+    releaseDate : new Date(2019, 12, 12),
+    tags: ['tag1', 'tag2', 'tag3'],
+    refCount: 114,
+    downloadCount: 514,
+    hasFile: true,
+    showFavorite: true,
+  },
+  {
+    title: 'Title7',
+    articleType: 'Type',
+    abstract: 'This is Abstract of this article.',
+    authors: ['author1', 'author2', 'author3'],
+    releaseDate : new Date(2019, 12, 12),
+    tags: ['tag1', 'tag2', 'tag3'],
+    refCount: 114,
+    downloadCount: 514,
+    hasFile: true,
+    showFavorite: true,
+  },  {
+    title: 'Title8',
+    articleType: 'Type',
+    abstract: 'This is Abstract of this article.',
+    authors: ['author1', 'author2', 'author3'],
+    releaseDate : new Date(2019, 12, 12),
+    tags: ['tag1', 'tag2', 'tag3'],
+    refCount: 114,
+    downloadCount: 514,
+    hasFile: true,
+    showFavorite: true,
+  },
+  {
+    title: 'Title9',
+    articleType: 'Type',
+    abstract: 'This is Abstract of this article.',
+    authors: ['author1', 'author2', 'author3'],
+    releaseDate : new Date(2019, 12, 12),
+    tags: ['tag1', 'tag2', 'tag3'],
+    refCount: 114,
+    downloadCount: 514,
+    hasFile: true,
+    showFavorite: true,
+  },
+  {
+    title: 'Title10',
+    articleType: 'Type',
+    abstract: 'This is Abstract of this article.',
+    authors: ['author1', 'author2', 'author3'],
+    releaseDate : new Date(2019, 12, 12),
+    tags: ['tag1', 'tag2', 'tag3'],
+    refCount: 114,
+    downloadCount: 514,
+    hasFile: true,
+    showFavorite: true,
+  },
+  {
+    title: 'Title11',
+    articleType: 'Type',
+    abstract: 'This is Abstract of this article.',
+    authors: ['author1', 'author2', 'author3'],
+    releaseDate : new Date(2019, 12, 12),
+    tags: ['tag1', 'tag2', 'tag3'],
+    refCount: 114,
+    downloadCount: 514,
+    hasFile: true,
+    showFavorite: true,
+  },
+];

src/components/base-components/pager/pager.component.html

@@ -0,0 +1,24 @@
+<div>
+  <div *ngFor="let article of returnedArray">
+    <app-article-abstract
+      [title]="article.title"
+      [articleType]="article.articleType"
+      [abstract]="article.abstract"
+      [authors]="article.authors"
+      [releaseDate]="article.releaseDate"
+      [tags]="article.tags"
+      [refCount]="article.refCount"
+      [downloadCount]="article.downloadCount"
+      [hasFile]="article.hasFile"
+      [showFavorite]="article.showFavorite"
+    >
+    </app-article-abstract>
+  </div>
+
+  <app-paginator
+    [totalItems]="articles.length"
+    [itemsPerPage]="5"
+    [showBoundary]="true"
+    (pageChanged)="pageChanged($event)"
+  ></app-paginator>
+</div>

src/components/base-components/pager/pager.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PagerComponent } from './pager.component';
+
+describe('PagerComponent', () => {
+  let component: PagerComponent;
+  let fixture: ComponentFixture<PagerComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PagerComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PagerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/components/base-components/pager/pager.component.ts

@@ -0,0 +1,24 @@
+import { Component, OnInit } from '@angular/core';
+import { articles } from '../../../articleAbstractList';
+import { PageChangedEvent } from '../paginator/paginator.component';
+@Component({
+  selector: 'app-pager',
+  styleUrls: ['pager.component.styl'],
+  templateUrl: './pager.component.html',
+})
+export class PagerComponent implements OnInit {
+  articles = articles;
+  // contentArray = new Array(90).fill('');
+  returnedArray;
+
+  ngOnInit(): void {
+    // this.contentArray = this.contentArray.map((v: string, i: number) => `Content line ${i + 1}`);
+    this.returnedArray = this.articles.slice(0, 5);
+  }
+
+  pageChanged(event: PageChangedEvent): void {
+    const startItem = (event.page - 1) * event.itemsPerPage;
+    const endItem = event.page * event.itemsPerPage;
+    this.returnedArray = this.articles.slice(startItem, endItem);
+  }
+}

src/components/base-components/paginator/paginator.component.html

@@ -0,0 +1,37 @@
+<div class="paginator">
+  <div
+    class="page first-page"
+    (click)="firstPageClick()"
+    *ngIf="hasFirst && showFirst"
+  >
+    {{ 1 }}
+  </div>
+  <div
+    class="page prev-page"
+    (click)="prevPageClick()"
+    *ngIf="prevText && hasFirst"
+  >
+    {{ prevText }}
+  </div>
+  <div
+    [ngClass]="{ page: true, cur: currentPage == page }"
+    *ngFor="let page of showedPages"
+    (click)="numberPageClick(page)"
+  >
+    {{ page }}
+  </div>
+  <div
+    class="page next-page"
+    (click)="nextPageClick()"
+    *ngIf="nextText && hasLast"
+  >
+    {{ nextText }}
+  </div>
+  <div
+    class="page last-page"
+    (click)="lastPageClick()"
+    *ngIf="hasLast && showLast"
+  >
+    {{ totalPages }}
+  </div>
+</div>

src/components/base-components/paginator/paginator.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PaginatorComponent } from './paginator.component';
+
+describe('PaginatorComponent', () => {
+  let component: PaginatorComponent;
+  let fixture: ComponentFixture<PaginatorComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PaginatorComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PaginatorComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});