diff --git a/src/app/components/search/Search.component.html b/src/app/components/search/Search.component.html
index c60b8be..1fe893f 100644
--- a/src/app/components/search/Search.component.html
+++ b/src/app/components/search/Search.component.html
@@ -7,6 +7,16 @@
class="search-input"
(ionChange)="onSearchChange($event)"
>
+
+
+
+ {{ typeTitles[resultType] }}
+
+
diff --git a/src/app/components/search/Search.component.scss b/src/app/components/search/Search.component.scss
index 40c4eac..d162161 100644
--- a/src/app/components/search/Search.component.scss
+++ b/src/app/components/search/Search.component.scss
@@ -6,6 +6,28 @@
}
}
+.types {
+ display: flex;
+ flex-wrap: wrap;
+
+ .type {
+ padding: 5px 20px;
+
+ &.current-type {
+ border: 1px solid #ccc;
+ border-radius: 30px;
+ }
+
+ &:hover {
+ cursor: pointer;
+ }
+
+ i {
+ margin-right: 5px;
+ }
+ }
+}
+
.search-label {
display: flex;
diff --git a/src/app/components/search/Search.component.ts b/src/app/components/search/Search.component.ts
index e1745eb..679f1de 100644
--- a/src/app/components/search/Search.component.ts
+++ b/src/app/components/search/Search.component.ts
@@ -29,13 +29,36 @@ export class SearchComponent implements OnInit {
@ViewChild('ionInput') ionInput: IonInput;
@Input() query = '';
public results: BehaviorSubject = new BehaviorSubject([]);
+ public allResults: BehaviorSubject = new BehaviorSubject([]);
public loading = false;
public typeIcons = NodeTypeIcons;
+ public allResultTypes = ['all', 'page', 'node', 'db', 'code', 'files'];
+ public resultTypes = ['all'];
+ public typeTitles = {
+ all: 'All',
+ page: 'Pages',
+ node: 'Nodes',
+ db: 'Databases',
+ code: 'Code',
+ files: 'Files',
+ };
+
+ public selectedType = 'all';
protected searchChangeDebounce = debounce(async ($event) => {
const query = $event.detail.value;
- this.results.next(await this.search(query));
+ const results = await this.search(query);
+ this.allResults.next(results);
+
+ if ( !this.allResults.getValue() ) {
+ this.resultTypes = ['all'];
+ } else {
+ const existentTypes = this.allResults.getValue().map(x => this.classifyResult(x));
+ this.resultTypes = this.allResultTypes.filter((x: any) => existentTypes.includes(x) || x === 'all');
+ }
+
+ this.filterView(this.selectedType);
this.loading = false;
}, 1000);
@@ -50,6 +73,31 @@ export class SearchComponent implements OnInit {
await this.ionModalController.dismiss();
}
+ filterView(name: string) {
+ this.selectedType = name;
+ this.results.next((this.allResults.getValue() || []).filter(x => {
+ if ( this.selectedType === 'all' ) {
+ return true;
+ }
+
+ return this.classifyResult(x) === this.selectedType;
+ }));
+ }
+
+ classifyResult(result: SearchResult) {
+ if ( ['page', 'form'].includes(result.type) ) {
+ return 'page';
+ } else if ( ['node', 'markdown'].includes(result.type) ) {
+ return 'node';
+ } else if ( result.type === 'code' ) {
+ return 'code';
+ } else if ( result.type === 'db' ) {
+ return 'db';
+ } else if ( ['file_box', 'files'].includes(result.type) || result.type.startsWith('file_box') ) {
+ return 'files';
+ }
+ }
+
ngOnInit() {
setTimeout(() => {
this.ionInput.setFocus();