Added filtering and links to domain page

frontend/src/app/app-routing.module.ts

@@ -1,9 +1,11 @@
+import { EditSlaveComponent } from './pages/edit-slave/edit-slave.component';
 import { PasswordComponent } from './pages/password/password.component';
 import { AuthGuard } from './services/auth-guard.service';
 import { DomainsComponent } from './pages/domains/domains.component';
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 import { LoginComponent } from './pages/login/login.component';
+import { EditAuthComponent } from './pages/edit-auth/edit-auth.component';
 
 const routes: Routes = [
     {
@@ -25,6 +27,14 @@ const routes: Routes = [
                 path: 'domains',
                 component: DomainsComponent
             },
+            {
+                path: 'domains/slave/:domainId',
+                component: EditSlaveComponent
+            },
+            {
+                path: 'domains/auth/:domainId',
+                component: EditAuthComponent
+            },
             {
                 path: 'password',
                 component: PasswordComponent

frontend/src/app/app.module.ts

@@ -25,6 +25,7 @@ import { SessionOperation } from './operations/session.operation';
 import { DomainsComponent } from './pages/domains/domains.component';
 import { PasswordComponent } from './pages/password/password.component';
 import { EditSlaveComponent } from './pages/edit-slave/edit-slave.component';
+import { EditAuthComponent } from './pages/edit-auth/edit-auth.component';
 
 @NgModule({
   declarations: [
@@ -42,7 +43,8 @@ import { EditSlaveComponent } from './pages/edit-slave/edit-slave.component';
     PasswordComponent,
     PagingComponent,
     PagesizeComponent,
-    EditSlaveComponent
+    EditSlaveComponent,
+    EditAuthComponent
   ],
   imports: [
     BrowserModule,

frontend/src/app/operations/domains.operations.ts

@@ -10,12 +10,15 @@ export class DomainsOperation {
 
     constructor(private http: HttpService, private gs: StateService) { }
 
-    public async getList(page?: number, pageSize?: number, query?: string, sort?: Array<String>): Promise<ListApitype<DomainApitype>> {
+    public async getList(page?: number, pageSize?: number, query?: string,
+        sort?: Array<String> | string, type?: string): Promise<ListApitype<DomainApitype>> {
         try {
             return new ListApitype<DomainApitype>(await this.http.get('/domains', {
                 page: page,
                 pagesize: pageSize,
-                query: query
+                query: query,
+                sort: sort,
+                type: type
             }));
         } catch (e) {
             console.error(e);

frontend/src/app/pages/domains/domains.component.html

@@ -5,11 +5,34 @@
             <table class="table table-hover">
                 <thead>
                     <tr>
-                        <th class="w-5">ID</th>
+                        <th class="w-10 align-middle">
-                        <th>Name</th>
+                            <span>ID</span>
-                        <th class="w-25">Type</th>
+                            <app-sort field="id" [activeFields]="sortField" (sort)="onSortEvent($event)"></app-sort>
-                        <th class="w-15">Records</th>
+                        </th>
-                        <th *ngIf="gs.isAdmin" class="w-5"></th>
+                        <th class="align-middle">
+                            <div class="form-inline">
+                                <span>Name</span>
+                                <app-sort field="name" [activeFields]="sortField" (sort)="onSortEvent($event)"></app-sort>
+                                <input class="form-control form-control-sm no-shadow" type="text" placeholder="Search" [formControl]="searchInput">
+                            </div>
+                        </th>
+                        <th class="w-20 align-middle">
+                            <div class="form-inline">
+                                <span>Name</span>
+                                <app-sort field="type" [activeFields]="sortField" (sort)="onSortEvent($event)"></app-sort>
+                                <select class="form-control form-control-sm" [formControl]="typeFilter">
+                                    <option value="">No filter...</option>
+                                    <option value="MASTER">MASTER</option>
+                                    <option value="NATIVE">NATIVE</option>
+                                    <option value="SLAVE">SLAVE</option>
+                                </select>
+                            </div>
+                        </th>
+                        <th class="w-15 align-middle">
+                            <span>Records</span>
+                            <app-sort field="records" [activeFields]="sortField" (sort)="onSortEvent($event)"></app-sort>
+                        </th>
+                        <th *ngIf="gs.isAdmin" class="w-5 align-middle"></th>
                     </tr>
                 </thead>
                 <tbody>
@@ -25,6 +48,7 @@
                 </tbody>
             </table>
         </div>
+
     </div>
 </div>
 <app-paging [pagingInfo]="pagingInfo" [pageWidth]="3" (pageChange)="onPageChange($event)"></app-paging>

frontend/src/app/pages/domains/domains.component.ts

@@ -1,3 +1,4 @@
+import { SortEventDatatype } from './../../datatypes/sort-event.datatype';
 import { ModalOptionsDatatype } from './../../datatypes/modal-options.datatype';
 import { ModalService } from './../../services/modal.service';
 import { StateService } from './../../services/state.service';
@@ -5,6 +6,10 @@ import { DomainApitype } from './../../apitypes/Domain.apitype';
 import { PagingApitype } from './../../apitypes/Paging.apitype';
 import { DomainsOperation } from './../../operations/domains.operations';
 import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { FormControl } from '@angular/forms';
+
+import 'rxjs/add/operator/debounceTime';
 
 @Component({
     selector: 'app-domains',
@@ -18,14 +23,30 @@ export class DomainsComponent implements OnInit {
 
     public domainList: DomainApitype[] = [];
 
-    constructor(private domains: DomainsOperation, public gs: StateService, private modal: ModalService) { }
+    public sortField = '';
+    public sortOrder = 'asc';
+
+    public searchInput: FormControl;
+    public typeFilter: FormControl;
+
+    constructor(private domains: DomainsOperation, public gs: StateService, private modal: ModalService, private router: Router) { }
 
     public ngOnInit() {
+        this.searchInput = new FormControl('');
+        this.searchInput.valueChanges.debounceTime(500).subscribe(() => this.loadData());
+
+        this.typeFilter = new FormControl('');
+        this.typeFilter.valueChanges.subscribe(() => this.loadData());
+
         this.loadData();
     }
 
     public async loadData() {
-        const res = await this.domains.getList(this.pageRequested, this.gs.pageSize);
+        const sortStr = this.sortField !== '' ? this.sortField + '-' + this.sortOrder : null;
+        const searchStr = this.searchInput.value !== '' ? this.searchInput.value : null;
+        const typeFilter = this.typeFilter.value !== '' ? this.typeFilter.value : null;
+
+        const res = await this.domains.getList(this.pageRequested, this.gs.pageSize, searchStr, sortStr, typeFilter);
 
         this.pagingInfo = res.paging;
         this.domainList = res.results;
@@ -60,6 +81,22 @@ export class DomainsComponent implements OnInit {
     }
 
     public async onDomainClick(domain: DomainApitype) {
-        alert(domain.id);
+        if (domain.type === 'SLAVE') {
+            this.router.navigate(['/domains/slave/', domain.id.toString()]);
+        } else if (domain.type === 'MASTER' || domain.type === 'NATIVE') {
+            this.router.navigate(['/domains/auth/', domain.id.toString()]);
+        }
+    }
+
+    public async onSortEvent(sortEvent: SortEventDatatype) {
+        if (sortEvent.order === 0) {
+            this.sortField = '';
+            this.sortOrder = 'asc';
+        } else {
+            this.sortField = sortEvent.field;
+            this.sortOrder = sortEvent.order === 1 ? 'asc' : 'desc';
+        }
+
+        await this.loadData();
     }
 }

frontend/src/app/pages/edit-auth/edit-auth.component.html

@@ -0,0 +1,3 @@
+<p>
+    edit-auth works!
+</p>

frontend/src/app/pages/edit-auth/edit-auth.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+    selector: 'app-edit-auth',
+    templateUrl: './edit-auth.component.html',
+    styleUrls: ['./edit-auth.component.scss']
+})
+export class EditAuthComponent implements OnInit {
+
+    constructor() { }
+
+    ngOnInit() {
+    }
+
+}

frontend/src/app/pages/edit-slave/edit-slave.component.html

@@ -0,0 +1,3 @@
+<p>
+    edit-slave works!
+</p>

frontend/src/app/pages/edit-slave/edit-slave.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+    selector: 'app-edit-slave',
+    templateUrl: './edit-slave.component.html',
+    styleUrls: ['./edit-slave.component.scss']
+})
+export class EditSlaveComponent implements OnInit {
+
+    constructor() { }
+
+    ngOnInit() {
+    }
+
+}

frontend/src/app/partials/sort/sort.component.html

@@ -1,3 +1,3 @@
-<app-fa-icon *ngIf="order === 0" icon="sort" fixedWidth (click)="toggle()"></app-fa-icon>
+<app-fa-icon *ngIf="order === 0 || !isActive()" icon="sort" fixedWidth (click)="toggle()"></app-fa-icon>
-<app-fa-icon *ngIf="order === 1" icon="sort-amount-asc" fixedWidth (click)="toggle()"></app-fa-icon>
+<app-fa-icon *ngIf="order === 1 && isActive()" icon="sort-amount-asc" fixedWidth (click)="toggle()"></app-fa-icon>
-<app-fa-icon *ngIf="order === -1" icon="sort-amount-desc" fixedWidth (click)="toggle()"></app-fa-icon>
+<app-fa-icon *ngIf="order === -1 && isActive()" icon="sort-amount-desc" fixedWidth (click)="toggle()"></app-fa-icon>

frontend/src/app/partials/sort/sort.component.ts

@@ -12,6 +12,9 @@ export class SortComponent {
     @Output() sort = new EventEmitter<SortEventDatatype>();
 
     @Input() field: string;
+
+    @Input() activeFields: Array<string> | string = null;
+
     public order = 0;
 
     constructor() { }
@@ -53,4 +56,19 @@ export class SortComponent {
         }));
     }
 
+    /**
+     * Determines if field is active
+     */
+    public isActive() {
+        if (this.activeFields === null) {
+            return false;
+        } else {
+            if (this.activeFields instanceof Array) {
+                return this.activeFields.includes(this.field);
+            } else {
+                return this.activeFields === this.field;
+            }
+        }
+    }
+
 }

frontend/src/styles.scss

@@ -58,3 +58,9 @@ $fa-font-path: "~font-awesome/fonts";
 .cursor-pointer {
     cursor: pointer;
 }
+
+/* Remove glow from inputs */
+.no-shadow { 
+    box-shadow: none!important;
+    border-color: #CCC!important;
+}

utils/pre-commit.hook

@@ -8,11 +8,20 @@ then
 fi
 cd ..
 
+cd frontend
+if ! npm run build
+then
+    echo "Frontend build failed"
+    exit 2
+fi
+rm -rf dist/
+cd ..
+
 cd backend/src
 if ! composer run-script lint
 then
     echo "Backend lint failed"
-    exit 2
+    exit 3
 fi
 cd ../..
 
@@ -20,7 +29,7 @@ cd backend/test
 if ! ./test.sh all
 then
     echo "Backend test failed"
-    exit 3
+    exit 4
 fi
 cd ../..