SKE-49 filter competitions front-end

SystemKonkursow/4.2.1/angular/package-lock.json

@@ -123,6 +123,14 @@
         "tslib": "1.9.2"
       }
     },
+    "@angular/cdk": {
+      "version": "6.4.7",
+      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-6.4.7.tgz",
+      "integrity": "sha512-18x0U66fLD5kGQWZ9n3nb75xQouXlWs7kUDaTd8HTrHpT1s2QIAqlLd1KxfrYiVhsEC2jPQaoiae7VnBlcvkBg==",
+      "requires": {
+        "tslib": "1.9.2"
+      }
+    },
     "@angular/cli": {
       "version": "6.0.8",
       "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-6.0.8.tgz",
@@ -354,6 +362,23 @@
         "tslib": "1.9.2"
       }
     },
+    "@angular/material": {
+      "version": "6.4.7",
+      "resolved": "https://registry.npmjs.org/@angular/material/-/material-6.4.7.tgz",
+      "integrity": "sha512-SdNx7Xovi24Kw9eU6lkLhY/7f2M7L9F+/uh6XuPr4jbGgCUVVpeeVI5ztZhsZRbj1sN+/r1p5w8u62apWWl5Ww==",
+      "requires": {
+        "parse5": "5.1.0",
+        "tslib": "1.9.2"
+      },
+      "dependencies": {
+        "parse5": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.0.tgz",
+          "integrity": "sha512-fxNG2sQjHvlVAYmzBZS9YlDp6PTSSDwa98vkD4QgVDDCAo84z5X1t5XyJQ62ImdLXx5NdIIfihey6xpum9/gRQ==",
+          "optional": true
+        }
+      }
+    },
     "@angular/platform-browser": {
       "version": "6.0.5",
       "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-6.0.5.tgz",

SystemKonkursow/4.2.1/angular/package.json

@@ -14,11 +14,13 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "^6.0.5",
+    "@angular/cdk": "^6.4.7",
     "@angular/common": "^6.0.5",
     "@angular/compiler": "^6.0.5",
     "@angular/core": "^6.0.5",
     "@angular/forms": "^6.0.5",
     "@angular/http": "^6.0.5",
+    "@angular/material": "^6.4.7",
     "@angular/platform-browser": "^6.0.5",
     "@angular/platform-browser-dynamic": "^6.0.5",
     "@angular/router": "^6.0.5",

SystemKonkursow/4.2.1/angular/src/app/app.module.ts

@@ -38,6 +38,12 @@ import { CompetitionDetailComponent } from '@app/competition-detail/competition-
 
 import { FilterClassesPipe } from '@app/pipe/filter-classes.pipe';
 
+import {
+    MatSelectModule,
+    MatOptionModule,
+    MatFormFieldModule
+} from '@angular/material';
+
 @NgModule({
     declarations: [
         AppComponent,
@@ -74,7 +80,10 @@ import { FilterClassesPipe } from '@app/pipe/filter-classes.pipe';
         AppRoutingModule,
         ServiceProxyModule,
         SharedModule,
-        NgxPaginationModule
+        NgxPaginationModule,
+        MatSelectModule,
+        MatOptionModule,
+        MatFormFieldModule,
     ],
     providers: [
 

SystemKonkursow/4.2.1/angular/src/app/categories-list/categories-list.component.html

@@ -1,5 +1,7 @@
-<div class="flex-container" id="categories-list-area">
+<div id="categories-list-area">
-    <div class="flex-item" *ngFor="let category of categoriesList" (click)="goToCompetitions(category)">
+    <div class="flex-container">
-        {{ category.name }}
+        <div class="flex-item" *ngFor="let category of categoriesList" (click)="goToCompetitions(category)">
+            {{ category.name }}
+        </div>
     </div>
 </div>

SystemKonkursow/4.2.1/angular/src/app/competitions-list/competitions-list.component.css

@@ -16,7 +16,7 @@
     border: 1px solid gray;
     border-left: 10px #739CB9 solid;
     color: darkblue;
-    text-shadow: 2px 2px 6px #ab93ab;
+    text-shadow: 0px 0px 1px #ab93ab;
     font-weight: bold;
     cursor: pointer;
 }

SystemKonkursow/4.2.1/angular/src/app/competitions-list/competitions-list.component.html

@@ -1,11 +1,36 @@
-<div class="flex-container" id="competitions-list-area">
+<div id="competitions-list-area">
-    <div class="flex-item" (click)="goToDetail(competition)" *ngFor="let competition of (competitionsList | filterClasses : [1, 8])">
+    <div class="row">
-        <p><u>{{ competition.name }}</u></p>
+        <div class="col-md-3 col-md-offset-3 col-sm-3 col-sm-offset-3">
-        <div class="organizer">Organizowany przez: {{ competition.creatorName }}</div>
+            <mat-form-field>
-    
+                <mat-select placeholder="Filtr - minimalna klasa" [(ngModel)]="minClassValue">
-        <div class="bottom-flex">
+                    <mat-option *ngFor="let possibleClass of possibleClasses" [value]="possibleClass.value">
-            <p>Czas trwania: {{ competition.startDate | date:"dd/MM/yyyy" }} - {{ competition.endDate | date:"dd/MM/yyyy" }}</p>
+                        {{possibleClass.viewValue}}
-            <p>Przedział klasowy: {{ competition.minClass }}-{{ competition.maxClass }}</p>
+                    </mat-option>
+                </mat-select>
+            </mat-form-field>
+        </div>
+        <div class="col-md-3 col-sm-3">
+            <mat-form-field>
+                <mat-select placeholder="Filtr - maksymalna klasa" [(ngModel)]="maxClassValue">
+                    <mat-option *ngFor="let possibleClass of possibleClasses" [value]="possibleClass.value">
+                        {{possibleClass.viewValue}}
+                    </mat-option>
+                </mat-select>
+            </mat-form-field>
         </div>
     </div>
+    <div class="flex-container">
+        <div class="flex-item" (click)="goToDetail(competition)" *ngFor="let competition of (competitionsList | filterClasses : [minClassValue, maxClassValue])">
+            <p><u>{{ competition.name }}</u></p>
+            <div class="organizer">Organizowany przez: {{ competition.creatorName }}</div>
+    
+            <div class="bottom-flex">
+                <p>Czas trwania: {{ competition.startDate | date:"dd/MM/yyyy" }} - {{ competition.endDate | date:"dd/MM/yyyy" }}</p>
+                <p>Przedział klasowy: {{ competition.minClass }}-{{ competition.maxClass }}</p>
+            </div>
+        </div>
+    </div>
+    <div *ngIf="(competitionsList | filterClasses : [minClassValue, maxClassValue])?.length === 0">
+        Brak konkursów
+    </div>
 </div>

SystemKonkursow/4.2.1/angular/src/app/competitions-list/competitions-list.component.ts

@@ -23,6 +23,20 @@ export class CompetitionsListComponent extends AppComponentBase implements OnIni
 
     public categoryId: number;
 
+    public minClassValue: number = 1;
+    public maxClassValue: number = 8;
+
+    public possibleClasses = [
+        {value: 1, viewValue: 'Klasa 1'},
+        {value: 2, viewValue: 'Klasa 2'},
+        {value: 3, viewValue: 'Klasa 3'},
+        {value: 4, viewValue: 'Klasa 4'},
+        {value: 5, viewValue: 'Klasa 5'},
+        {value: 6, viewValue: 'Klasa 6'},
+        {value: 7, viewValue: 'Klasa 7'},
+        {value: 8, viewValue: 'Klasa 8'}
+    ];
+
     constructor(
         injector: Injector,
         private _competitionCategoryService: CompetitionCategoryServiceProxy,

SystemKonkursow/4.2.1/angular/src/shared/core.less

@@ -1,4 +1,6 @@
 /* General */
+@import "../../node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css";
+
 
 .clickable-item {
     cursor: pointer;