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
3 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