parent
a276a37d3d
commit
7737fce36a
@ -0,0 +1,37 @@
|
|||||||
|
<h1 mat-dialog-title>Sort Entries</h1>
|
||||||
|
<div mat-dialog-content>
|
||||||
|
<div class="sort-input-list">
|
||||||
|
<div class="sort-input-row" *ngFor="let sortKey of sortEntries">
|
||||||
|
<mat-form-field>
|
||||||
|
<mat-label>Key</mat-label>
|
||||||
|
<mat-select required [(value)]="sortKey.sortType">
|
||||||
|
<mat-option value="Namespace">Namespace</mat-option>
|
||||||
|
<mat-option value="FileName">File Name</mat-option>
|
||||||
|
<mat-option value="FileSize">File Size</mat-option>
|
||||||
|
<mat-option value="FileImportedTime">Time Imported</mat-option>
|
||||||
|
<mat-option value="FileCreatedTime">Time Created</mat-option>
|
||||||
|
<mat-option value="FileChangeTime">Time Changed</mat-option>
|
||||||
|
<mat-option value="FileType">File Type</mat-option>
|
||||||
|
<mat-option value="NumTags">Number of Tags</mat-option>
|
||||||
|
</mat-select>
|
||||||
|
</mat-form-field>
|
||||||
|
<mat-form-field *ngIf="sortKey.sortType === 'Namespace'">
|
||||||
|
<mat-label>Namespace Name</mat-label>
|
||||||
|
<input #namespaceInput matInput required [value]="sortKey.namespaceName ?? ''" (change)="sortKey.namespaceName = namespaceInput.value">
|
||||||
|
</mat-form-field>
|
||||||
|
<div class="filler" *ngIf="sortKey.sortType !== 'Namespace'"></div>
|
||||||
|
<mat-form-field>
|
||||||
|
<mat-label>Direction</mat-label>
|
||||||
|
<mat-select [(value)]="sortKey.sortDirection" required>
|
||||||
|
<mat-option value="Ascending">Ascending</mat-option>
|
||||||
|
<mat-option value="Descending">Descending</mat-option>
|
||||||
|
</mat-select>
|
||||||
|
</mat-form-field>
|
||||||
|
<button *ngIf="sortEntries.indexOf(sortKey) === sortEntries.length -1" mat-flat-button (click)="addNewSortKey()"><mat-icon>add</mat-icon></button>
|
||||||
|
<button *ngIf="sortEntries.indexOf(sortKey) !== sortEntries.length -1" mat-flat-button (click)="removeSortKey(sortKey)"><mat-icon>remove</mat-icon></button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="dialog-actions" mat-dialog-actions>
|
||||||
|
<button mat-flat-button color="primary" (click)="confirmSort()">Sort</button>
|
||||||
|
</div>
|
||||||
@ -0,0 +1,24 @@
|
|||||||
|
mat-dialog-content {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sort-input-list {
|
||||||
|
display: table;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sort-input-row {
|
||||||
|
display: table-row;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
mat-form-field, .filler {
|
||||||
|
display: table-cell;
|
||||||
|
padding: 0 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-actions {
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
@ -0,0 +1,25 @@
|
|||||||
|
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { FilterDialogComponent } from './filter-dialog.component';
|
||||||
|
|
||||||
|
describe('FilterDialogComponent', () => {
|
||||||
|
let component: FilterDialogComponent;
|
||||||
|
let fixture: ComponentFixture<FilterDialogComponent>;
|
||||||
|
|
||||||
|
beforeEach(async () => {
|
||||||
|
await TestBed.configureTestingModule({
|
||||||
|
declarations: [ FilterDialogComponent ]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
});
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
fixture = TestBed.createComponent(FilterDialogComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
||||||
@ -0,0 +1,31 @@
|
|||||||
|
import {Component, Inject} from '@angular/core';
|
||||||
|
import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
|
||||||
|
import {SortKey} from "../../../models/SortKey";
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-filter-dialog',
|
||||||
|
templateUrl: './filter-dialog.component.html',
|
||||||
|
styleUrls: ['./filter-dialog.component.scss']
|
||||||
|
})
|
||||||
|
export class FilterDialogComponent {
|
||||||
|
|
||||||
|
public sortEntries: SortKey[] = []
|
||||||
|
|
||||||
|
constructor(public dialogRef: MatDialogRef<FilterDialogComponent>, @Inject(MAT_DIALOG_DATA) data: any) {
|
||||||
|
this.sortEntries = data.sortEntries;
|
||||||
|
}
|
||||||
|
|
||||||
|
addNewSortKey() {
|
||||||
|
const sortKey = new SortKey("FileName", "Ascending", undefined);
|
||||||
|
this.sortEntries.push(sortKey)
|
||||||
|
}
|
||||||
|
|
||||||
|
public removeSortKey(sortKey: SortKey): void {
|
||||||
|
const index = this.sortEntries.indexOf(sortKey);
|
||||||
|
this.sortEntries.splice(index, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
public confirmSort(): void {
|
||||||
|
this.dialogRef.close(this.sortEntries);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,29 @@
|
|||||||
|
export class SortKey {
|
||||||
|
|
||||||
|
|
||||||
|
constructor(
|
||||||
|
public sortType: "Namespace" | "FileName" | "FileSize" | "FileImportedTime" | "FileCreatedTime" | "FileChangeTime" | "FileType" | "NumTags",
|
||||||
|
public sortDirection: "Ascending" | "Descending",
|
||||||
|
public namespaceName: string | undefined
|
||||||
|
) {}
|
||||||
|
|
||||||
|
public toString(): string {
|
||||||
|
if (this.sortType == "Namespace") {
|
||||||
|
return `${this.sortType} '${this.namespaceName}' ${this.sortDirection}`
|
||||||
|
} else {
|
||||||
|
return `${this.sortType} ${this.sortDirection}`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
public toBackendType(): any {
|
||||||
|
|
||||||
|
if (this.sortType == "Namespace") {
|
||||||
|
return {"Namespace": {direction: this.sortDirection, tag: this.namespaceName}}
|
||||||
|
} else {
|
||||||
|
let returnObj: any = {};
|
||||||
|
returnObj[this.sortType] = this.sortDirection;
|
||||||
|
|
||||||
|
return returnObj;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue