diff --git a/src/Squidex/app/features/assets/declarations.ts b/src/Squidex/app/features/assets/declarations.ts index 993edc289..317f83e41 100644 --- a/src/Squidex/app/features/assets/declarations.ts +++ b/src/Squidex/app/features/assets/declarations.ts @@ -5,4 +5,5 @@ * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. */ +export * from './pages/assets-filters-page.component'; export * from './pages/assets-page.component'; \ No newline at end of file diff --git a/src/Squidex/app/features/assets/module.ts b/src/Squidex/app/features/assets/module.ts index 1eb2e67d7..755987200 100644 --- a/src/Squidex/app/features/assets/module.ts +++ b/src/Squidex/app/features/assets/module.ts @@ -11,13 +11,20 @@ import { RouterModule, Routes } from '@angular/router'; import { SqxFrameworkModule, SqxSharedModule } from '@app/shared'; import { + AssetsFiltersPageComponent, AssetsPageComponent } from './declarations'; const routes: Routes = [ { path: '', - component: AssetsPageComponent + component: AssetsPageComponent, + children: [ + { + path: 'filters', + component: AssetsFiltersPageComponent + } + ] } ]; @@ -28,6 +35,7 @@ const routes: Routes = [ RouterModule.forChild(routes) ], declarations: [ + AssetsFiltersPageComponent, AssetsPageComponent ] }) diff --git a/src/Squidex/app/features/assets/pages/assets-filters-page.component.html b/src/Squidex/app/features/assets/pages/assets-filters-page.component.html new file mode 100644 index 000000000..9453bc868 --- /dev/null +++ b/src/Squidex/app/features/assets/pages/assets-filters-page.component.html @@ -0,0 +1,38 @@ + + + Filters + + + +

Tags

+ + +
+
+ All tags +
+
+
+ + +
+
+ {{tag.name}} +
+
+ {{tag.count}} +
+
+
+ +
+ +

Saved queries

+ + + + + + +
+
\ No newline at end of file diff --git a/src/Squidex/app/features/assets/pages/assets-filters-page.component.scss b/src/Squidex/app/features/assets/pages/assets-filters-page.component.scss new file mode 100644 index 000000000..fbb752506 --- /dev/null +++ b/src/Squidex/app/features/assets/pages/assets-filters-page.component.scss @@ -0,0 +1,2 @@ +@import '_vars'; +@import '_mixins'; \ No newline at end of file diff --git a/src/Squidex/app/features/assets/pages/assets-filters-page.component.ts b/src/Squidex/app/features/assets/pages/assets-filters-page.component.ts new file mode 100644 index 000000000..87cbae194 --- /dev/null +++ b/src/Squidex/app/features/assets/pages/assets-filters-page.component.ts @@ -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); + } +} \ No newline at end of file diff --git a/src/Squidex/app/features/assets/pages/assets-page.component.html b/src/Squidex/app/features/assets/pages/assets-page.component.html index 7a8c4bfd5..ebe1665b1 100644 --- a/src/Squidex/app/features/assets/pages/assets-page.component.html +++ b/src/Squidex/app/features/assets/pages/assets-page.component.html @@ -1,6 +1,6 @@ - + Assets @@ -51,45 +51,13 @@ - - - - + + + + + diff --git a/src/Squidex/app/features/assets/pages/assets-page.component.ts b/src/Squidex/app/features/assets/pages/assets-page.component.ts index 7a2a9f521..aa0e805ce 100644 --- a/src/Squidex/app/features/assets/pages/assets-page.component.ts +++ b/src/Squidex/app/features/assets/pages/assets-page.component.ts @@ -52,16 +52,12 @@ export class AssetsPageComponent implements OnInit { this.assetsState.search(query).pipe(onErrorResumeNext()).subscribe(); } - public toggleTag(tag: string) { - this.assetsState.toggleTag(tag).pipe(onErrorResumeNext()).subscribe(); - } - public selectTags(tags: string[]) { this.assetsState.selectTags(tags).pipe(onErrorResumeNext()).subscribe(); } - public resetTags() { - this.assetsState.resetTags().pipe(onErrorResumeNext()).subscribe(); + public toggleTag(tag: string) { + this.assetsState.toggleTag(tag).pipe(onErrorResumeNext()).subscribe(); } public goNext() { @@ -72,10 +68,6 @@ export class AssetsPageComponent implements OnInit { this.assetsState.goPrev().pipe(onErrorResumeNext()).subscribe(); } - public isSelectedQuery(query: string) { - return query === this.assetsState.snapshot.assetsQuery || (!query && !this.assetsState.assetsQuery); - } - public changeView(isListView: boolean) { this.isListView = isListView; diff --git a/src/Squidex/app/features/content/declarations.ts b/src/Squidex/app/features/content/declarations.ts index 035e3d59a..f94dfd517 100644 --- a/src/Squidex/app/features/content/declarations.ts +++ b/src/Squidex/app/features/content/declarations.ts @@ -7,8 +7,9 @@ export * from './pages/comments/comments-page.component'; export * from './pages/content/content-field.component'; -export * from './pages/content/content-history.component'; +export * from './pages/content/content-history-page.component'; export * from './pages/content/content-page.component'; +export * from './pages/contents/contents-filters-page.component'; export * from './pages/contents/contents-page.component'; export * from './pages/schemas/schemas-page.component'; diff --git a/src/Squidex/app/features/content/module.ts b/src/Squidex/app/features/content/module.ts index 546bd3f57..1f9af170a 100644 --- a/src/Squidex/app/features/content/module.ts +++ b/src/Squidex/app/features/content/module.ts @@ -27,9 +27,10 @@ import { AssetsEditorComponent, CommentsPageComponent, ContentFieldComponent, - ContentHistoryComponent, + ContentHistoryPageComponent, ContentItemComponent, ContentPageComponent, + ContentsFiltersPageComponent, ContentsPageComponent, ContentsSelectorComponent, ContentStatusComponent, @@ -57,7 +58,13 @@ const routes: Routes = [ path: '', component: ContentsPageComponent, canActivate: [SchemaMustNotBeSingletonGuard], - canDeactivate: [CanDeactivateGuard] + canDeactivate: [CanDeactivateGuard], + children: [ + { + path: 'filters', + component: ContentsFiltersPageComponent + } + ] }, { path: 'new', @@ -73,7 +80,7 @@ const routes: Routes = [ children: [ { path: 'history', - component: ContentHistoryComponent, + component: ContentHistoryPageComponent, data: { channel: 'contents.{contentId}' } @@ -103,9 +110,10 @@ const routes: Routes = [ AssetsEditorComponent, CommentsPageComponent, ContentFieldComponent, - ContentHistoryComponent, + ContentHistoryPageComponent, ContentItemComponent, ContentPageComponent, + ContentsFiltersPageComponent, ContentStatusComponent, ContentsPageComponent, ContentsSelectorComponent, diff --git a/src/Squidex/app/features/content/pages/content/content-history.component.html b/src/Squidex/app/features/content/pages/content/content-history-page.component.html similarity index 100% rename from src/Squidex/app/features/content/pages/content/content-history.component.html rename to src/Squidex/app/features/content/pages/content/content-history-page.component.html diff --git a/src/Squidex/app/features/content/pages/content/content-history.component.scss b/src/Squidex/app/features/content/pages/content/content-history-page.component.scss similarity index 100% rename from src/Squidex/app/features/content/pages/content/content-history.component.scss rename to src/Squidex/app/features/content/pages/content/content-history-page.component.scss diff --git a/src/Squidex/app/features/content/pages/content/content-history.component.ts b/src/Squidex/app/features/content/pages/content/content-history-page.component.ts similarity index 92% rename from src/Squidex/app/features/content/pages/content/content-history.component.ts rename to src/Squidex/app/features/content/pages/content/content-history-page.component.ts index 8bc250a91..0c79d722f 100644 --- a/src/Squidex/app/features/content/pages/content/content-history.component.ts +++ b/src/Squidex/app/features/content/pages/content/content-history-page.component.ts @@ -24,10 +24,10 @@ import { ContentVersionSelected } from './../messages'; @Component({ selector: 'sqx-history', - styleUrls: ['./content-history.component.scss'], - templateUrl: './content-history.component.html' + styleUrls: ['./content-history-page.component.scss'], + templateUrl: './content-history-page.component.html' }) -export class ContentHistoryComponent { +export class ContentHistoryPageComponent { public get channel(): string { let channelPath = this.route.snapshot.data['channel']; diff --git a/src/Squidex/app/features/content/pages/contents/contents-filters-page.component.html b/src/Squidex/app/features/content/pages/contents/contents-filters-page.component.html new file mode 100644 index 000000000..abee1df85 --- /dev/null +++ b/src/Squidex/app/features/content/pages/contents/contents-filters-page.component.html @@ -0,0 +1,25 @@ + + + Filters + + + + + {{query.name}} + + +
+ + +
+
\ No newline at end of file diff --git a/src/Squidex/app/features/content/pages/contents/contents-filters-page.component.scss b/src/Squidex/app/features/content/pages/contents/contents-filters-page.component.scss new file mode 100644 index 000000000..fbb752506 --- /dev/null +++ b/src/Squidex/app/features/content/pages/contents/contents-filters-page.component.scss @@ -0,0 +1,2 @@ +@import '_vars'; +@import '_mixins'; \ No newline at end of file diff --git a/src/Squidex/app/features/content/pages/contents/contents-filters-page.component.ts b/src/Squidex/app/features/content/pages/contents/contents-filters-page.component.ts new file mode 100644 index 000000000..3f6263c7c --- /dev/null +++ b/src/Squidex/app/features/content/pages/contents/contents-filters-page.component.ts @@ -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); + } +} \ No newline at end of file diff --git a/src/Squidex/app/features/content/pages/contents/contents-page.component.html b/src/Squidex/app/features/content/pages/contents/contents-page.component.html index 18ee36c31..afd7dbe55 100644 --- a/src/Squidex/app/features/content/pages/contents/contents-page.component.html +++ b/src/Squidex/app/features/content/pages/contents/contents-page.component.html @@ -1,6 +1,6 @@ - + Archive @@ -125,29 +125,14 @@ - - - + + + + + \ No newline at end of file diff --git a/src/Squidex/app/features/content/pages/contents/contents-page.component.ts b/src/Squidex/app/features/content/pages/contents/contents-page.component.ts index be82c3a40..3dfc72f53 100644 --- a/src/Squidex/app/features/content/pages/contents/contents-page.component.ts +++ b/src/Squidex/app/features/content/pages/contents/contents-page.component.ts @@ -148,10 +148,6 @@ export class ContentsPageComponent implements OnDestroy, OnInit { this.contentsState.create(content.dataDraft, false).pipe(onErrorResumeNext()).subscribe(); } - public isSelectedQuery(query: string) { - return query === this.contentsState.snapshot.contentsQuery || (!query && !this.contentsState.snapshot.contentsQuery); - } - private changeContentItems(contents: ContentDto[], action: string) { if (contents.length === 0) { return; @@ -167,26 +163,18 @@ export class ContentsPageComponent implements OnDestroy, OnInit { } public goArchive(isArchive: boolean) { - this.resetSelection(); - this.contentsState.goArchive(isArchive).pipe(onErrorResumeNext()).subscribe(); } public goPrev() { - this.resetSelection(); - this.contentsState.goPrev().pipe(onErrorResumeNext()).subscribe(); } public goNext() { - this.resetSelection(); - this.contentsState.goNext().pipe(onErrorResumeNext()).subscribe(); } public search(query: string) { - this.resetSelection(); - this.contentsState.search(query).pipe(onErrorResumeNext()).subscribe(); } diff --git a/src/Squidex/app/features/content/pages/schemas/schemas-page.component.html b/src/Squidex/app/features/content/pages/schemas/schemas-page.component.html index a270463cd..c1ecd5c9a 100644 --- a/src/Squidex/app/features/content/pages/schemas/schemas-page.component.html +++ b/src/Squidex/app/features/content/pages/schemas/schemas-page.component.html @@ -17,7 +17,7 @@ - ; + @Input() + public suffix: string; + public displayName: string; public schemasFiltered: ImmutableArray; @@ -75,9 +78,13 @@ export class SchemaCategoryComponent implements OnInit, OnChanges { public ngOnChanges(changes: SimpleChanges): void { if (changes['schemas'] || changes['schemasFilter']) { + const isSameCategory = (schema: SchemaDto) => { + return (!this.name && !schema.category) || schema.category === this.name; + }; + const query = this.schemasFilter; - this.schemasForCategory = this.schemas.filter(x => this.isSameCategory(x)); + this.schemasForCategory = this.schemas.filter(x => isSameCategory(x)); this.schemasFiltered = this.schemasForCategory.filter(x => !query || x.name.indexOf(query) >= 0); if (query) { @@ -96,6 +103,16 @@ export class SchemaCategoryComponent implements OnInit, OnChanges { } } + public schemaRoute(schema: SchemaDto) { + if (schema.isSingleton && this.routeSingletonToContent) { + return [schema.name, schema.id]; + } else if (this.suffix) { + return [schema.name, this.suffix]; + } else { + return [schema.name]; + } + } + private isSameCategory(schema: SchemaDto): boolean { return (!this.name && !schema.category) || schema.category === this.name; } @@ -108,10 +125,6 @@ export class SchemaCategoryComponent implements OnInit, OnChanges { return `?squidex.apps.{app}.schemas.${schema.name}.*;squidex.apps.{app}.contents.${schema.name}.*`; } - public schemaRoute(schema: SchemaDto) { - return schema.isSingleton && this.routeSingletonToContent ? [schema.name, schema.id] : [schema.name]; - } - public trackBySchema(index: number, schema: SchemaDto) { return schema.id; } diff --git a/src/Squidex/app/shell/pages/app/left-menu.component.html b/src/Squidex/app/shell/pages/app/left-menu.component.html index 9936bd574..96a44de7d 100644 --- a/src/Squidex/app/shell/pages/app/left-menu.component.html +++ b/src/Squidex/app/shell/pages/app/left-menu.component.html @@ -10,7 +10,7 @@ diff --git a/src/Squidex/app/theme/_panels.scss b/src/Squidex/app/theme/_panels.scss index 646b566b8..37e60a7b9 100644 --- a/src/Squidex/app/theme/_panels.scss +++ b/src/Squidex/app/theme/_panels.scss @@ -292,17 +292,14 @@ } } - &-section { - border-top: 1px solid $color-border; - padding: 15px; - padding-bottom: 30px; - } - &-item { & { - padding: .25rem 0; + @include border-radius; + padding: .25rem 1rem; + display: block; font-size: .9rem; font-weight: normal; + margin-bottom: .25rem; } &-remove {