add invites

src/app/pages/services/services.component.ts

@@ -1,5 +1,7 @@
-import { Component, OnInit, Input } from '@angular/core';
-import { ServiceService } from '../../services/service.service';
+import {Component, OnInit} from '@angular/core';
+import {Sort} from '@angular/material/sort';
+import {ServiceService} from '../../services/service.service';
+import {I18nService} from '../../services/i18n.service';
 
 @Component({
   selector: 'app-services',
@@ -9,13 +11,34 @@ import { ServiceService } from '../../services/service.service';
 export class ServicesComponent implements OnInit {
 
   services = [];
+  serviceColumns = ["icon", "name", "text"];
 
-  constructor(private serviceService: ServiceService) { }
+  constructor(private serviceService: ServiceService, private i18n: I18nService) {}
 
   ngOnInit(): void {
     this.serviceService.services().subscribe((data: any) => {
       this.services = data;
+      this.sortData({"active": "name", "direction": "desc"});
     })
   }
 
+  sortData(sort: Sort) {
+    const data = this.services.slice();
+    if(!sort.active || sort.direction === '') {
+      this.services = data;
+      return;
+    }
+
+    this.services = data.sort((a, b) => {
+      const isAsc = sort.direction === 'asc';
+      switch(sort.active) {
+        case 'name': return this.compare(this.i18n.get('services.' + a.name + '.title', []), this.i18n.get('services.' + b.name + '.title', []), isAsc);
+        default: return 0;
+      }
+    });
+  }
+
+  compare(a: number | string | String, b: number | string | String, isAsc: boolean) {
+    return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
+  }
 }