mirror/pdnsmanager
1
0
Fork 0
mirror of https://github.com/loewexy/pdnsmanager.git synced 2025-01-15 18:52:20 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Added filtering and links to domain page

Browse source
This commit is contained in:
Lukas Metzger 2018-04-09 13:30:04 +02:00
parent 43b911eb60
commit dd35643915
15 changed files with 161 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
frontend/src/app/app-routing.module.ts
View file

@ -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

4
frontend/src/app/app.module.ts
View file

@ -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,

7
frontend/src/app/operations/domains.operations.ts
View file

@ -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);

34
frontend/src/app/pages/domains/domains.component.html
View file

@ -5,11 +5,34 @@
<table class="table table-hover">
<thead>
<tr>
<th class="w-5">ID</th>
<th>Name</th>
<th class="w-25">Type</th>
<th class="w-15">Records</th>
<th *ngIf="gs.isAdmin" class="w-5"></th>
<th class="w-10 align-middle">
<span>ID</span>
<app-sort field="id" [activeFields]="sortField" (sort)="onSortEvent($event)"></app-sort>
</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>

43
frontend/src/app/pages/domains/domains.component.ts
View file

@ -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();
}
}

3
frontend/src/app/pages/edit-auth/edit-auth.component.html Normal file
View file

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

0
frontend/src/app/pages/edit-auth/edit-auth.component.scss Normal file
View file

15
frontend/src/app/pages/edit-auth/edit-auth.component.ts Normal file
View file

@ -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() {
}
}

3
frontend/src/app/pages/edit-slave/edit-slave.component.html Normal file
View file

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

0
frontend/src/app/pages/edit-slave/edit-slave.component.scss Normal file
View file

15
frontend/src/app/pages/edit-slave/edit-slave.component.ts Normal file
View file

@ -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() {
}
}

6
frontend/src/app/partials/sort/sort.component.html
View file

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

18
frontend/src/app/partials/sort/sort.component.ts
View file

@ -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;
}
}
}
}

6
frontend/src/styles.scss
View file

@ -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;
}

13
utils/pre-commit.hook
View file

@ -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 ../..