feat: implement notice board

src/app/app-routing.module.ts

@@ -8,6 +8,8 @@ import { HelpComponent } from "./pages/static/help/help.component";
 import { OrganisationComponent } from "./pages/static/organisation/organisation.component";
 import { ImprintComponent } from "./pages/static/imprint/imprint.component";
 import { PrivacyComponent } from "./pages/static/privacy/privacy.component";
+import { NoticesDetailsComponent } from './pages/notices/notices-details/notices-details.component';
+import { NoticesListComponent } from './pages/notices/notices-list/notices-list.component';
 
 const routes: Routes = [
     {
@@ -26,11 +28,25 @@ const routes: Routes = [
         path: 'admin',
         children: []
     },
-    {path: ':id', canMatch: [canMatchEventId], pathMatch: 'full', component: EventsDetailsComponent},
     {path: 'help', pathMatch: 'full', component: HelpComponent},
     {path: 'organisation', pathMatch: 'full', component: OrganisationComponent},
     {path: 'imprint', pathMatch: 'full', component: ImprintComponent},
+    {
+        path: 'notices',
+        children: [
+            {path: ':id', canMatch: [canMatchEventId], pathMatch: 'full', component: NoticesDetailsComponent},
+            {
+                path: '',
+                pathMatch: 'full',
+                component: NoticesListComponent,
+                data: {
+                    reuseRouteKey: 'notices-list'
+                }
+            },
+        ]
+    },
     {path: 'privacy', pathMatch: 'full', component: PrivacyComponent},
+    {path: ':id', canMatch: [canMatchEventId], pathMatch: 'full', component: EventsDetailsComponent},
     {
         path: '',
         pathMatch: 'full',

src/app/app.component.ts

@@ -10,6 +10,7 @@ import { DeviceDetectorService } from 'ngx-device-detector';
 import {
     PwaInstallInstructionsComponent
 } from './components/pwa-install-instructions/pwa-install-instructions.component';
+import { NavigationService } from './services/navigation.service';
 
 const LOCALSTORAGE_APP_OPEN_TIMES = 'chalender-app-open-times';
 
@@ -32,12 +33,16 @@ export class AppComponent implements OnInit {
         private platform: Platform,
         private detectorService: DeviceDetectorService,
         private modalService: NgbModal,
+        private navigationService: NavigationService,
     ) {
         // this language will be used as a fallback when a translation isn't found in the current language
         translate.setDefaultLang('rm');
 
         // the lang to use, if the lang isn't available, it will use the current loader to get them
         translate.use('rm');
+
+        // instantiate navigation service
+        navigationService.init();
     }
 
     ngOnInit() {

src/app/app.module.ts

@@ -54,6 +54,15 @@ import {
     PwaInstallInstructionsComponent
 } from './components/pwa-install-instructions/pwa-install-instructions.component';
 import { TrackingRtrComponent } from './components/tracking-rtr/tracking-rtr.component';
+import { NoticesListCardsComponent } from './components/notices/notices-list/notices-list-cards/notices-list-cards.component';
+import { NoticesListComponent } from './pages/notices/notices-list/notices-list.component';
+import { NoticesDetailsComponent } from './pages/notices/notices-details/notices-details.component';
+import { NoticesFilterComponent } from './components/notices/notices-filter/notices-filter.component';
+import { NoticeCardComponent } from './components/notices/notice-card/notice-card.component';
+import { NoticesListTableComponent } from './components/notices/notices-list/notices-list-table/notices-list-table.component';
+import { NoticeListItemComponent } from './components/notices/notice-list-item/notice-list-item.component';
+import { NoNoticesComponent } from './components/notices/no-notices/no-notices.component';
+import { NoticeDetailsComponent } from './components/notices/notice-details/notice-details.component';
 
 export function jwtOptionsFactory(authService: AuthenticationService) {
     return {
@@ -115,6 +124,15 @@ export function inIframe() {
         FilterScrollPositionDirective,
         PwaInstallInstructionsComponent,
         TrackingRtrComponent,
+        NoticesListCardsComponent,
+        NoticesListComponent,
+        NoticesDetailsComponent,
+        NoticesFilterComponent,
+        NoticeCardComponent,
+        NoticesListTableComponent,
+        NoticeListItemComponent,
+        NoNoticesComponent,
+        NoticeDetailsComponent,
     ],
     imports: [
         BrowserModule,

src/app/components/events/event-details/event-details.component.html

@@ -144,7 +144,7 @@ <h1>{{ event.title }}</h1>
                 </div>
             </div>
 
-            <div class="docuemnts" *ngIf="event.documents.length > 0">
+            <div class="documents" *ngIf="event.documents.length > 0">
                 <div class="highlight">{{ 'EVENT_DETAILS.DOCUMENTS' | translate }}</div>
                 <div>
                     <ng-container *ngFor="let doc of event.documents">

src/app/components/events/event-filter-modal/event-filter-modal.component.html

@@ -1 +1,4 @@
-<app-event-filter (hideFilterIfNeeded)="activeModal.dismiss('filter applied')"></app-event-filter>
+<app-event-filter (hideFilterIfNeeded)="activeModal.dismiss('filter applied')"
+                  *ngIf="type === 'events'"></app-event-filter>
+<app-notices-filter (hideFilterIfNeeded)="activeModal.dismiss('filter applied')"
+                    *ngIf="type === 'notices'"></app-notices-filter>

src/app/components/events/event-filter-modal/event-filter-modal.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 
 @Component({
@@ -7,6 +7,10 @@ import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
     styleUrls: ['./event-filter-modal.component.scss']
 })
 export class EventFilterModalComponent {
+
+    @Input()
+    public type: 'events' | 'notices' = 'events';
+
     constructor(public activeModal: NgbActiveModal) {
     }
 }

src/app/components/events/view-selection/view-selection.component.ts

@@ -1,5 +1,6 @@
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { EventsFilterService } from '../../../shared/services/events-filter.service';
+import { NoticesFilterService } from '../../../shared/services/notices-filter.service';
 
 @Component({
     selector: 'app-view-selection',
@@ -8,10 +9,20 @@ import { EventsFilterService } from '../../../shared/services/events-filter.serv
 })
 export class ViewSelectionComponent {
 
-    constructor(public eventsFilterService: EventsFilterService) {
+    @Input()
+    public type: 'events' | 'notices' = 'events';
+
+    constructor(
+        public eventsFilterService: EventsFilterService,
+        public noticesFilterService: NoticesFilterService,
+    ) {
     }
 
     selectView(view: 'cards' | 'list') {
-        this.eventsFilterService.setSelectedView(view);
+        if (this.type === 'notices') {
+            this.noticesFilterService.setSelectedView(view);
+        } else {
+            this.eventsFilterService.setSelectedView(view);
+        }
     }
 }

src/app/components/header/header.component.html

@@ -29,6 +29,9 @@
                 <li><a (click)="toggleMenu(menu)"
                        [routerLink]="'/'">{{ 'COMPONENTS.HEADER.MAIN_MENU.EVENTS' | translate }}</a>
                 </li>
+                <li><a (click)="toggleMenu(menu)"
+                       [routerLink]="'/notices'">{{ 'COMPONENTS.HEADER.MAIN_MENU.NOTICES' | translate }}</a>
+                </li>
                 <li><a (click)="toggleMenu(menu)"
                        [routerLink]="'/help'">{{ 'COMPONENTS.HEADER.MAIN_MENU.HELP' | translate }}</a></li>
                 <li><a (click)="toggleMenu(menu)"

src/app/components/notices/no-notices/no-notices.component.html

@@ -0,0 +1,7 @@
+<div class="description">
+    Nagins resultats per questa tschertga.
+</div>
+
+<button class="clndr accent" (click)="resetFilters()">
+    stizzar il filter
+</button>

src/app/components/notices/no-notices/no-notices.component.scss

@@ -0,0 +1,23 @@
+@import 'node_modules/bootstrap/scss/functions';
+@import 'node_modules/bootstrap/scss/variables';
+@import 'node_modules/bootstrap/scss/mixins';
+
+:host {
+    display: flex;
+    padding-top: 80px;
+    flex-direction: column;
+    align-items: center;
+
+    @include media-breakpoint-up(lg) {
+        padding-top: 150px;
+    }
+
+    .description {
+        padding: 0.5rem;
+    }
+
+    button {
+        margin-top: 20px;
+        margin-right: 0;
+    }
+}

src/app/components/notices/no-notices/no-notices.component.spec.ts

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

src/app/components/notices/no-notices/no-notices.component.ts

@@ -0,0 +1,19 @@
+import { Component } from '@angular/core';
+import { NoticesFilterService } from '../../../shared/services/notices-filter.service';
+
+@Component({
+    selector: 'app-no-notices',
+    templateUrl: './no-notices.component.html',
+    styleUrls: ['./no-notices.component.scss']
+})
+export class NoNoticesComponent {
+
+    constructor(
+        private noticesFilterService: NoticesFilterService,
+    ) {
+    }
+
+    resetFilters() {
+        this.noticesFilterService.resetFilters();
+    }
+}

src/app/components/notices/notice-card/notice-card.component.html

@@ -0,0 +1,21 @@
+<a *ngIf="notice" class="evt" [routerLink]="'/notices/' + notice.id" [class.first]="isFirst">
+    <div class="image">
+        <div class="img-holder">
+            <img src="{{ imgUrl }}" alt="{{ notice.title }}" *ngIf="notice.images.length > 0" style="width: 100%">
+        </div>
+    </div>
+    <div class="description">
+        <h3>{{ notice.title }}</h3>
+
+        <div class="details">
+            <div class="arrow">
+                <svg xmlns="http://www.w3.org/2000/svg" width="30" height="16" viewBox="0 0 30 16" fill="none">
+                    <path d="M1 8L29 8" stroke="#3CBFA4" stroke-width="2" stroke-linecap="round"
+                          stroke-linejoin="round"></path>
+                    <path d="M22 1L29 8L22 15" stroke="#3CBFA4" stroke-width="2" stroke-linecap="round"
+                          stroke-linejoin="round"></path>
+                </svg>
+            </div>
+        </div>
+    </div>
+</a>