feat: add archive feature (#589)

* feat: add routing for archive module

* feat: add js for actions

* feat: add delay to fake service

* feat: archive page design

* feat: implement new archives backend

* fix: not deleting selected archive array after expanding expansion list

* style: format

angular.json

@@ -30,7 +30,7 @@
             ],
             "styles": ["apps/frontend/src/styles.scss"],
             "scripts": [],
-            "aot": true
+            "aot": false
           },
           "configurations": {
             "production": {

apps/frontend/src/app/components/footer/footer.component.html

@@ -11,7 +11,7 @@ <h4>Rólunk</h4>
   <div class="footerblock links">
     <h4>Linkek</h4>
     <ul>
-      <li>Archívum</li>
+      <li><a [routerLink]="'/archive'">Archívum</a></li>
       <li>Impresszum</li>
       <li>Oldaltérkép</li>
       <li><a href="https://verseghy-gimnazium.net/">Vissza a régi oldalra</a></li>
@@ -21,12 +21,12 @@ <h4>Linkek</h4>
     <h4>KRÉTA</h4>
     <ul>
       <li>
-        <a href="https://klik035992001.e-kreta.hu/Adminisztracio/Login" target="_blank">
+        <a href="https://klik035992001.e-kreta.hu/Adminisztracio/Login" target="_blank" rel="noopener noreferrer">
           <img alt="" src="assets/icons/kreta2.png" />
         </a>
       </li>
       <li>
-        <a href="https://eugyintezes.e-kreta.hu/" target="_blank">
+        <a href="https://eugyintezes.e-kreta.hu/" target="_blank" rel="noopener noreferrer">
           <img alt="" src="assets/icons/eugy.png" width="120" />
         </a>
       </li>

apps/frontend/src/app/modules/archive/archive-routing.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core'
+import { Routes, RouterModule } from '@angular/router'
+import { ArchiveScreenComponent } from './archive-screen.component'
+
+const routes: Routes = [
+  {
+    path: '',
+    component: ArchiveScreenComponent,
+  },
+]
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class ArchiveRoutingModule {}

apps/frontend/src/app/modules/archive/archive-screen.component.html

@@ -0,0 +1,19 @@
+<!--{{ loading$ | async }}
+{{ error$ | async }} -->
+<div class="container">
+  <h1>Archívum</h1>
+  <p *ngIf="(error$ | async)" class="error">{{ error$ | async }}</p>
+  <verseghy-loaders [loader]="'ball-scale-ripple-multiple'" *ngIf="(loading$ | async)" [loaderClass]="'ball-loader'"></verseghy-loaders>
+  <mat-accordion>
+    <mat-expansion-panel *ngFor="let month of (archivesList$ | async)" (opened)="archiveExpanded({ year: month.year, month: month.month })">
+      <mat-expansion-panel-header>
+        <mat-panel-title>{{ month.year + '-' + month.month.toString().padStart(2, '0') }}</mat-panel-title>
+      </mat-expansion-panel-header>
+      <a *ngFor="let post of (archives$ | async)" class="row" [routerLink]="['/posts', post.id]">
+        <p class="title">{{ post.title }}</p>
+        <p>{{ post.date }}</p>
+        <p class="description">{{ post.description }}</p>
+      </a>
+    </mat-expansion-panel>
+  </mat-accordion>
+</div>

apps/frontend/src/app/modules/archive/archive-screen.component.scss

@@ -0,0 +1,48 @@
+.container {
+  max-width: 1200px;
+  padding: 50px 20px 0 20px;
+  display: block;
+  margin: 0 auto;
+}
+
+h1 {
+  text-align: center;
+  font-size: 48px;
+  font-weight: 500;
+  margin-bottom: 25px;
+}
+
+mat-expansion-panel-header {
+  -webkit-tap-highlight-color: transparent;
+}
+
+.row {
+  min-height: 36px;
+  border-bottom: 1px solid #ccc;
+  display: block;
+  text-decoration: none;
+  color: #000;
+
+  &:last-child {
+    border: none;
+  }
+
+  .title {
+    font-weight: 700;
+    margin-top: 10px;
+  }
+
+  .description {
+    margin: 10px 0;
+  }
+}
+
+verseghy-loaders {
+  transform: translateX(25px);
+  display: block;
+  margin-bottom: 70px;
+}
+
+.error {
+  text-align: center;
+}

apps/frontend/src/app/modules/archive/archive-screen.component.ts

@@ -0,0 +1,25 @@
+import { Component, OnInit } from '@angular/core'
+import { ArchiveFacade } from './state/archive.facade'
+import { map, tap } from 'rxjs/operators'
+
+@Component({
+  selector: 'verseghy-archive-screen',
+  templateUrl: './archive-screen.component.html',
+  styleUrls: ['./archive-screen.component.scss'],
+})
+export class ArchiveScreenComponent implements OnInit {
+  archives$ = this.archiveFacade.archives$
+  archivesList$ = this.archiveFacade.archivesList$.pipe(map(e => e.filter(i => i.year)))
+  error$ = this.archiveFacade.error$
+  loading$ = this.archiveFacade.loading$
+
+  constructor(private archiveFacade: ArchiveFacade) {}
+
+  ngOnInit() {
+    this.archiveFacade.loadArchives()
+  }
+
+  archiveExpanded({ year, month }: { year: number; month: number }) {
+    this.archiveFacade.loadMonth({ year, month })
+  }
+}

apps/frontend/src/app/modules/archive/archive.module.ts

@@ -0,0 +1,23 @@
+import { NgModule } from '@angular/core'
+import { ArchiveRoutingModule } from './archive-routing.module'
+import { ArchiveScreenComponent } from './archive-screen.component'
+import { MatExpansionModule } from '@angular/material'
+import { StoreModule } from '@ngrx/store'
+import * as fromArchive from './state/archive.reducer'
+import { EffectsModule } from '@ngrx/effects'
+import { ArchiveEffects } from './state/archive.effects'
+import { CommonModule } from '@angular/common'
+import { LoadersModule } from '@verseghy/ui'
+
+@NgModule({
+  declarations: [ArchiveScreenComponent],
+  imports: [
+    CommonModule,
+    ArchiveRoutingModule,
+    MatExpansionModule,
+    StoreModule.forFeature(fromArchive.archiveFeatureKey, fromArchive.reducer),
+    EffectsModule.forFeature([ArchiveEffects]),
+    LoadersModule,
+  ],
+})
+export class ArchiveModule {}

apps/frontend/src/app/modules/archive/archive.service.ts

@@ -0,0 +1,23 @@
+import { Injectable } from '@angular/core'
+import { HttpClient } from '@angular/common/http'
+import { environment } from '../../../environments/environment'
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ArchiveService {
+  getArchives() {
+    return this.http.get(environment.baseURL + '/posts/getCountByMonth')
+  }
+
+  getDetailedArchives({ year, month }: { year: number; month: number }) {
+    return this.http.get(environment.baseURL + '/posts/getPostsByYearMonth', {
+      params: {
+        year: year.toString(10),
+        month: month.toString(10),
+      },
+    })
+  }
+
+  constructor(private http: HttpClient) {}
+}

apps/frontend/src/app/modules/archive/state/archive.actions.ts

@@ -0,0 +1,13 @@
+import { createAction, props } from '@ngrx/store'
+
+export const loadArchives = createAction('[Archive] Load Archives')
+
+export const loadArchivesSuccess = createAction('[Archive] Load Archives Success', props<{ data: any }>())
+
+export const loadArchivesFailure = createAction('[Archive] Load Archives Failure', props<{ error: any }>())
+
+export const loadArchivesDetail = createAction('[Archive] Load Archive Detail', props<{ year: number; month: number }>())
+
+export const loadArchivesDetailSuccess = createAction('[Archive] Load Archive Detail Success', props<{ data: any }>())
+
+export const loadArchivesDetailFailure = createAction('[Archive] Load Archive Detail Failure', props<{ error: any }>())

apps/frontend/src/app/modules/archive/state/archive.effects.ts

@@ -0,0 +1,36 @@
+import { Injectable } from '@angular/core'
+import { Actions, createEffect, ofType } from '@ngrx/effects'
+import { catchError, map, concatMap } from 'rxjs/operators'
+import { EMPTY, of } from 'rxjs'
+
+import * as ArchiveActions from './archive.actions'
+import { ArchiveService } from '../archive.service'
+
+@Injectable()
+export class ArchiveEffects {
+  loadArchives$ = createEffect(() =>
+    this.actions$.pipe(
+      ofType(ArchiveActions.loadArchives),
+      concatMap(() =>
+        this.archiveService.getArchives().pipe(
+          map(data => ArchiveActions.loadArchivesSuccess({ data })),
+          catchError(error => of(ArchiveActions.loadArchivesFailure({ error })))
+        )
+      )
+    )
+  )
+
+  loadArchivesDetailed$ = createEffect(() =>
+    this.actions$.pipe(
+      ofType(ArchiveActions.loadArchivesDetail),
+      concatMap(({ year, month }: { year: number; month: number }) =>
+        this.archiveService.getDetailedArchives({ year, month }).pipe(
+          map(data => ArchiveActions.loadArchivesDetailSuccess({ data })),
+          catchError(error => of(ArchiveActions.loadArchivesDetailFailure({ error })))
+        )
+      )
+    )
+  )
+
+  constructor(private actions$: Actions, private archiveService: ArchiveService) {}
+}

apps/frontend/src/app/modules/archive/state/archive.facade.ts

@@ -0,0 +1,24 @@
+import { Injectable } from '@angular/core'
+import { select, Store } from '@ngrx/store'
+import { loadArchivesDetail, loadArchives } from './archive.actions'
+import { selectArchives, selectArchivesList, selectError, selectLoading } from './archive.selectors'
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ArchiveFacade {
+  archives$ = this.store.pipe(select(selectArchives))
+  archivesList$ = this.store.pipe(select(selectArchivesList))
+  error$ = this.store.pipe(select(selectError))
+  loading$ = this.store.pipe(select(selectLoading))
+
+  loadArchives() {
+    this.store.dispatch(loadArchives())
+  }
+
+  loadMonth({ year, month }: { year: number; month: number }) {
+    this.store.dispatch(loadArchivesDetail({ year, month }))
+  }
+
+  constructor(private store: Store<any>) {}
+}

apps/frontend/src/app/modules/archive/state/archive.reducer.ts

@@ -0,0 +1,32 @@
+import { Action, createReducer, on } from '@ngrx/store'
+import * as ArchiveActions from './archive.actions'
+
+export const archiveFeatureKey = 'archive'
+
+export interface State {
+  archives: { id: number; title: string; description: string; date: string }[]
+  archivesList: { count: number; year: number; month: number }[]
+  error: any
+  loading: boolean
+}
+
+export const initialState: State = {
+  archives: [],
+  archivesList: [],
+  error: null,
+  loading: true,
+}
+
+const archiveReducer = createReducer(
+  initialState,
+
+  on(ArchiveActions.loadArchives, state => state),
+  on(ArchiveActions.loadArchivesSuccess, (state, action) => ({ ...state, archivesList: action.data, loading: false })),
+  on(ArchiveActions.loadArchivesFailure, (state, action) => ({ ...state, error: action.error, loading: false })),
+  on(ArchiveActions.loadArchivesDetail, state => ({ ...state, archives: [] })),
+  on(ArchiveActions.loadArchivesDetailSuccess, (state, action) => ({ ...state, archives: action.data }))
+)
+
+export function reducer(state: State | undefined, action: Action) {
+  return archiveReducer(state, action)
+}

apps/frontend/src/app/modules/archive/state/archive.selectors.ts

@@ -0,0 +1,24 @@
+import { archiveFeatureKey } from './archive.reducer'
+import { createSelector } from '@ngrx/store'
+
+const selectState = state => state[archiveFeatureKey]
+
+export const selectArchives = createSelector(
+  selectState,
+  state => state.archives
+)
+
+export const selectArchivesList = createSelector(
+  selectState,
+  state => state.archivesList
+)
+
+export const selectError = createSelector(
+  selectState,
+  state => state.error
+)
+
+export const selectLoading = createSelector(
+  selectState,
+  state => state.loading
+)

apps/frontend/src/app/modules/misc/misc.module.ts

@@ -7,7 +7,6 @@ import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faGithub, faLinkedin } from '@fortawesome/free-brands-svg-icons'
 import { faEnvelope, faFileAlt } from '@fortawesome/free-solid-svg-icons'
-import { ArchiveComponent } from './components/archive/archive.component'
 import { HistoryComponent } from './components/history/history.component'
 import { ClassesComponent } from './components/classes/classes.component'
 import { ColleaguesComponent } from './components/colleagues/colleagues.component'
@@ -33,10 +32,6 @@ const routes: Routes = [
     path: 'documents',
     component: DocumentsComponent,
   },
-  {
-    path: 'archive',
-    component: ArchiveComponent,
-  },
   {
     path: 'history',
     component: HistoryComponent,
@@ -60,6 +55,6 @@ const routes: Routes = [
     StoreModule.forFeature(COLLEAGUES_FEATURE_KEY, colleaguesReducer, { initialState: colleaguesInitialState }),
     EffectsModule.forFeature([ColleaguesEffects]),
   ],
-  declarations: [AuthorsComponent, DocumentsComponent, ArchiveComponent, HistoryComponent, ClassesComponent, ColleaguesComponent],
+  declarations: [AuthorsComponent, DocumentsComponent, HistoryComponent, ClassesComponent, ColleaguesComponent],
 })
 export class MiscModule {}