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