mirror of https://github.com/Squidex/squidex.git
Browse Source
* First implementation. * Tests simplified. * API test and UI fixes * References view. * Improve tests. * Formatting. * Fix formatting.pull/965/head
Sebastian Stehle
4 years ago
committed by
GitHub
GitHub
26 changed files with 572 additions and 335 deletions
@ -0,0 +1,52 @@ |
|||||
|
<sqx-title message="i18n:common.references"></sqx-title> |
||||
|
|
||||
|
<sqx-layout layout="main" titleText="i18n:common.references" titleIcon="contents"> |
||||
|
<ng-container menu> |
||||
|
<div class="row flex-nowrap flex-grow-1 gx-2"> |
||||
|
<div class="col-auto ms-8"> |
||||
|
<button type="button" class="btn btn-text-secondary" (click)="reload()" title="i18n:contents.refreshTooltip" shortcut="CTRL + B"> |
||||
|
<i class="icon-reset"></i> {{ 'common.refresh' | sqxTranslate }} |
||||
|
</button> |
||||
|
</div> |
||||
|
<div class="col-auto" *ngIf="languages.length > 1"> |
||||
|
<sqx-language-selector class="languages-buttons" |
||||
|
(languageChange)="changeLanguage($event)" |
||||
|
[language]="language" |
||||
|
[languages]="languages"> |
||||
|
</sqx-language-selector> |
||||
|
</div> |
||||
|
</div> |
||||
|
</ng-container> |
||||
|
|
||||
|
<ng-container> |
||||
|
<sqx-list-view [isLoading]="contentsState.isLoading | async" [table]="true"> |
||||
|
<ng-container> |
||||
|
<table class="table table-items table-fixed" *ngIf="contentsState.contents | async; let contents"> |
||||
|
<tbody *ngFor="let content of contents; trackBy: trackByContent" |
||||
|
[sqxReferenceItem]="content" |
||||
|
[canRemove]="false" |
||||
|
[columns]="contents | sqxContentsColumns" |
||||
|
[isCompact]="false" |
||||
|
[isDisabled]="false" |
||||
|
[language]="language" |
||||
|
[languages]="languages" |
||||
|
[validations]="(contentsState.validationResults | async)!" |
||||
|
[validityVisible]="true"> |
||||
|
</tbody> |
||||
|
|
||||
|
<tbody *ngIf="(contentsState.isLoaded | async) && contents.length === 0"> |
||||
|
<tr> |
||||
|
<td class="table-items-row-empty"> |
||||
|
{{ 'contents.noReferencing' | sqxTranslate }} |
||||
|
</td> |
||||
|
</tr> |
||||
|
</tbody> |
||||
|
</table> |
||||
|
</ng-container> |
||||
|
|
||||
|
<ng-container footer> |
||||
|
<sqx-pager [paging]="contentsState.paging | async" (pagingChange)="contentsState.page($event)"></sqx-pager> |
||||
|
</ng-container> |
||||
|
</sqx-list-view> |
||||
|
</ng-container> |
||||
|
</sqx-layout> |
||||
@ -0,0 +1,78 @@ |
|||||
|
/* |
||||
|
* Squidex Headless CMS |
||||
|
* |
||||
|
* @license |
||||
|
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. |
||||
|
*/ |
||||
|
|
||||
|
import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core'; |
||||
|
import { ActivatedRoute } from '@angular/router'; |
||||
|
import { distinctUntilChanged, map } from 'rxjs/operators'; |
||||
|
import { AppLanguageDto, ComponentContentsState, ContentDto, LanguagesState, QuerySynchronizer, ResourceOwner, Router2State } from '@app/shared'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'sqx-references-page', |
||||
|
styleUrls: ['./references-page.component.scss'], |
||||
|
templateUrl: './references-page.component.html', |
||||
|
changeDetection: ChangeDetectionStrategy.OnPush, |
||||
|
providers: [ |
||||
|
Router2State, ComponentContentsState, |
||||
|
], |
||||
|
}) |
||||
|
export class ReferencesPageComponent extends ResourceOwner implements OnInit { |
||||
|
public language!: AppLanguageDto; |
||||
|
public languages!: ReadonlyArray<AppLanguageDto>; |
||||
|
|
||||
|
constructor( |
||||
|
public readonly contentsRoute: Router2State, |
||||
|
public readonly contentsState: ComponentContentsState, |
||||
|
public readonly languagesState: LanguagesState, |
||||
|
private readonly route: ActivatedRoute, |
||||
|
) { |
||||
|
super(); |
||||
|
} |
||||
|
|
||||
|
public ngOnInit() { |
||||
|
this.own( |
||||
|
this.languagesState.isoMasterLanguage |
||||
|
.subscribe(language => { |
||||
|
this.language = language; |
||||
|
})); |
||||
|
|
||||
|
this.own( |
||||
|
this.languagesState.isoLanguages |
||||
|
.subscribe(languages => { |
||||
|
this.languages = languages; |
||||
|
})); |
||||
|
|
||||
|
this.own( |
||||
|
getReferenceId(this.route) |
||||
|
.subscribe(referenceId => { |
||||
|
const initial = |
||||
|
this.contentsRoute.mapTo(this.contentsState) |
||||
|
.withPaging('contents', 10) |
||||
|
.withSynchronizer(QuerySynchronizer.INSTANCE) |
||||
|
.getInitial(); |
||||
|
|
||||
|
this.contentsState.schema = { name: null! }; |
||||
|
this.contentsState.loadReferences(referenceId, initial); |
||||
|
this.contentsRoute.listen(); |
||||
|
})); |
||||
|
} |
||||
|
|
||||
|
public reload() { |
||||
|
this.contentsState.load(true); |
||||
|
} |
||||
|
|
||||
|
public changeLanguage(language: AppLanguageDto) { |
||||
|
this.language = language; |
||||
|
} |
||||
|
|
||||
|
public trackByContent(_index: number, content: ContentDto) { |
||||
|
return content.id; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
function getReferenceId(route: ActivatedRoute) { |
||||
|
return route.params.pipe(map(x => x['referenceId'] as string), distinctUntilChanged()); |
||||
|
} |
||||
Loading…
Reference in new issue