mirror of https://github.com/Squidex/squidex.git
Sebastian Stehle
7 years ago
21 changed files with 247 additions and 107 deletions
@ -0,0 +1,38 @@ |
|||||
|
<sqx-panel desiredWidth="20rem" isBlank="true" [isLazyLoaded]="false"> |
||||
|
<ng-container title> |
||||
|
Filters |
||||
|
</ng-container> |
||||
|
|
||||
|
<ng-container content> |
||||
|
<h3>Tags</h3> |
||||
|
|
||||
|
<a class="sidebar-item" (click)="resetTags()" [class.active]="assetsState.isTagSelectionEmpty()"> |
||||
|
<div class="row"> |
||||
|
<div class="col"> |
||||
|
All tags |
||||
|
</div> |
||||
|
</div> |
||||
|
</a> |
||||
|
|
||||
|
<a class="sidebar-item" *ngFor="let tag of assetsState.tags | async" (click)="toggleTag(tag.name)" [class.active]="assetsState.isTagSelected(tag.name)"> |
||||
|
<div class="row"> |
||||
|
<div class="col"> |
||||
|
{{tag.name}} |
||||
|
</div> |
||||
|
<div class="col-auto"> |
||||
|
{{tag.count}} |
||||
|
</div> |
||||
|
</div> |
||||
|
</a> |
||||
|
|
||||
|
<hr /> |
||||
|
|
||||
|
<h3>Saved queries</h3> |
||||
|
|
||||
|
<a class="sidebar-item" *ngFor="let query of queries.queries | async" (click)="search(query.filter)" [class.active]="isSelectedQuery(query.filter)"> |
||||
|
<a class="sidebar-item-remove float-right" (click)="queries.remove(query.name)"> |
||||
|
<i class="icon-close"></i> |
||||
|
</a> |
||||
|
</a> |
||||
|
</ng-container> |
||||
|
</sqx-panel> |
||||
@ -0,0 +1,2 @@ |
|||||
|
@import '_vars'; |
||||
|
@import '_mixins'; |
||||
@ -0,0 +1,50 @@ |
|||||
|
/* |
||||
|
* Squidex Headless CMS |
||||
|
* |
||||
|
* @license |
||||
|
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. |
||||
|
*/ |
||||
|
|
||||
|
import { Component } from '@angular/core'; |
||||
|
import { onErrorResumeNext } from 'rxjs/operators'; |
||||
|
|
||||
|
import { |
||||
|
AssetsState, |
||||
|
Queries, |
||||
|
UIState |
||||
|
} from '@app/shared'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'sqx-assets-filters-page', |
||||
|
styleUrls: ['./assets-filters-page.component.scss'], |
||||
|
templateUrl: './assets-filters-page.component.html' |
||||
|
}) |
||||
|
export class AssetsFiltersPageComponent { |
||||
|
public queries = new Queries(this.uiState, 'assets'); |
||||
|
|
||||
|
constructor( |
||||
|
public readonly assetsState: AssetsState, |
||||
|
private readonly uiState: UIState |
||||
|
) { |
||||
|
} |
||||
|
|
||||
|
public search(query: string) { |
||||
|
this.assetsState.search(query).pipe(onErrorResumeNext()).subscribe(); |
||||
|
} |
||||
|
|
||||
|
public selectTags(tags: string[]) { |
||||
|
this.assetsState.selectTags(tags).pipe(onErrorResumeNext()).subscribe(); |
||||
|
} |
||||
|
|
||||
|
public toggleTag(tag: string) { |
||||
|
this.assetsState.toggleTag(tag).pipe(onErrorResumeNext()).subscribe(); |
||||
|
} |
||||
|
|
||||
|
public resetTags() { |
||||
|
this.assetsState.resetTags().pipe(onErrorResumeNext()).subscribe(); |
||||
|
} |
||||
|
|
||||
|
public isSelectedQuery(query: string) { |
||||
|
return query === this.assetsState.snapshot.assetsQuery || (!query && !this.assetsState.assetsQuery); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,25 @@ |
|||||
|
<sqx-panel desiredWidth="20rem" isBlank="true" [isLazyLoaded]="false"> |
||||
|
<ng-container title> |
||||
|
Filters |
||||
|
</ng-container> |
||||
|
|
||||
|
<ng-container content> |
||||
|
<a class="sidebar-item" *ngFor="let query of schemaQueries.defaultQueries" (click)="search(query.filter)" [class.active]="isSelectedQuery(query.filter)"> |
||||
|
{{query.name}} |
||||
|
</a> |
||||
|
|
||||
|
<hr /> |
||||
|
|
||||
|
<div class="sidebar-section"> |
||||
|
<h3>Saved queries</h3> |
||||
|
|
||||
|
<a class="sidebar-item" *ngFor="let query of schemaQueries.queries | async" (click)="search(query.filter)" [class.active]="isSelectedQuery(query.filter)"> |
||||
|
{{query.name}} |
||||
|
|
||||
|
<a class="sidebar-item-remove float-right" (click)="schemaQueries.remove(query.name)"> |
||||
|
<i class="icon-close"></i> |
||||
|
</a> |
||||
|
</a> |
||||
|
</div> |
||||
|
</ng-container> |
||||
|
</sqx-panel> |
||||
@ -0,0 +1,2 @@ |
|||||
|
@import '_vars'; |
||||
|
@import '_mixins'; |
||||
@ -0,0 +1,62 @@ |
|||||
|
/* |
||||
|
* Squidex Headless CMS |
||||
|
* |
||||
|
* @license |
||||
|
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. |
||||
|
*/ |
||||
|
|
||||
|
import { Component, OnDestroy, OnInit } from '@angular/core'; |
||||
|
import { Router } from '@angular/router'; |
||||
|
import { Subscription } from 'rxjs'; |
||||
|
import { filter, onErrorResumeNext, takeUntil } from 'rxjs/operators'; |
||||
|
|
||||
|
import { |
||||
|
ContentsState, |
||||
|
navigatedToOtherComponent, |
||||
|
Queries, |
||||
|
SchemasState, |
||||
|
UIState |
||||
|
} from '@app/shared'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'sqx-contents-filters-page', |
||||
|
styleUrls: ['./contents-filters-page.component.scss'], |
||||
|
templateUrl: './contents-filters-page.component.html' |
||||
|
}) |
||||
|
export class ContentsFiltersPageComponent implements OnDestroy, OnInit { |
||||
|
private selectedSchemaSubscription: Subscription; |
||||
|
|
||||
|
public schemaQueries: Queries; |
||||
|
|
||||
|
constructor( |
||||
|
private readonly contentsState: ContentsState, |
||||
|
private readonly schemasState: SchemasState, |
||||
|
private readonly router: Router, |
||||
|
private readonly uiState: UIState |
||||
|
) { |
||||
|
} |
||||
|
|
||||
|
public ngOnDestroy() { |
||||
|
this.selectedSchemaSubscription.unsubscribe(); |
||||
|
} |
||||
|
|
||||
|
public ngOnInit() { |
||||
|
const routeChanged = this.router.events.pipe(filter(navigatedToOtherComponent(this.router))); |
||||
|
|
||||
|
this.selectedSchemaSubscription = |
||||
|
this.schemasState.selectedSchema.pipe(takeUntil(routeChanged)) |
||||
|
.subscribe(schema => { |
||||
|
if (schema) { |
||||
|
this.schemaQueries = new Queries(this.uiState, `schemas.${schema.name}`); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
public search(query: string) { |
||||
|
this.contentsState.search(query).pipe(onErrorResumeNext()).subscribe(); |
||||
|
} |
||||
|
|
||||
|
public isSelectedQuery(query: string) { |
||||
|
return query === this.contentsState.snapshot.contentsQuery || (!query && !this.contentsState.snapshot.contentsQuery); |
||||
|
} |
||||
|
} |
||||
Loading…
Reference in new issue