mirror of https://github.com/Squidex/squidex.git
Sebastian
4 years ago
18 changed files with 297 additions and 103 deletions
@ -0,0 +1,23 @@ |
|||
<div class="inner-menu"> |
|||
<ul class="nav nav-tabs2" *ngIf="mode | async; let currentMode"> |
|||
<li class="nav-item"> |
|||
<a class="nav-link" [class.active]="currentMode === 'Content'" (click)="setMode('Content')"> |
|||
{{ 'contents.inspectContent' | sqxTranslate }} |
|||
</a> |
|||
</li> |
|||
<li class="nav-item"> |
|||
<a class="nav-link" [class.active]="currentMode === 'Data'" (click)="setMode('Data')"> |
|||
{{ 'contents.inspectData' | sqxTranslate }} |
|||
</a> |
|||
</li> |
|||
<li class="nav-item"> |
|||
<a class="nav-link" [class.active]="currentMode === 'FlatData'" (click)="setMode('FlatData')"> |
|||
{{ 'contents.inspectFlatData' | sqxTranslate }} |
|||
</a> |
|||
</li> |
|||
</ul> |
|||
</div> |
|||
|
|||
<div class="inner-main"> |
|||
<sqx-code-editor [borderless]="true" [ngModel]="actualData | async" valueMode="Json"></sqx-code-editor> |
|||
</div> |
|||
@ -0,0 +1,28 @@ |
|||
|
|||
:host, |
|||
.inner-main { |
|||
display: flex; |
|||
flex-direction: column; |
|||
flex-grow: 1; |
|||
} |
|||
|
|||
:host ::ng-deep { |
|||
.editor { |
|||
@include absolute(0, 0, 0, 0); |
|||
} |
|||
} |
|||
|
|||
.inner-menu, |
|||
.inner-main { |
|||
position: relative; |
|||
} |
|||
|
|||
.inner-menu { |
|||
border-bottom: 1px solid $color-border; |
|||
border-radius: 0; |
|||
height: 4rem; |
|||
} |
|||
|
|||
.nav { |
|||
@include absolute(null, null, 0, 2rem); |
|||
} |
|||
@ -0,0 +1,72 @@ |
|||
/* |
|||
* Squidex Headless CMS |
|||
* |
|||
* @license |
|||
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. |
|||
*/ |
|||
|
|||
import { ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges } from '@angular/core'; |
|||
import { AppLanguageDto, ContentDto, ContentsService } from '@app/shared'; |
|||
import { BehaviorSubject, combineLatest, of } from 'rxjs'; |
|||
import { filter, map, switchMap } from 'rxjs/operators'; |
|||
|
|||
type Mode = 'Content' | 'Data' | 'FlatData'; |
|||
|
|||
@Component({ |
|||
selector: 'sqx-content-inspection[appName][content][language][languages]', |
|||
styleUrls: ['./content-inspection.component.scss'], |
|||
templateUrl: './content-inspection.component.html', |
|||
changeDetection: ChangeDetectionStrategy.OnPush, |
|||
}) |
|||
export class ContentInspectionComponent implements OnChanges { |
|||
private languageChanges$ = new BehaviorSubject<AppLanguageDto | null>(null); |
|||
|
|||
@Input() |
|||
public appName: string; |
|||
|
|||
@Input() |
|||
public language: AppLanguageDto; |
|||
|
|||
@Input() |
|||
public languages: ReadonlyArray<AppLanguageDto>; |
|||
|
|||
@Input() |
|||
public content: ContentDto; |
|||
|
|||
public mode = new BehaviorSubject<Mode>('Content'); |
|||
|
|||
public actualData = |
|||
combineLatest([ |
|||
this.languageChanges$, |
|||
this.mode, |
|||
]).pipe( |
|||
filter(x => !!x[0]), |
|||
switchMap(([language, mode]) => { |
|||
if (mode === 'Content') { |
|||
return of(this.content); |
|||
} else if (mode === 'Data') { |
|||
return of(this.content.data); |
|||
} else { |
|||
return this.contentsService.getContent(this.appName, |
|||
this.content.schemaName, |
|||
this.content.id, |
|||
language?.iso2Code).pipe( |
|||
map(x => x.data)); |
|||
} |
|||
})); |
|||
|
|||
constructor( |
|||
private readonly contentsService: ContentsService, |
|||
) { |
|||
} |
|||
|
|||
public ngOnChanges(changes: SimpleChanges) { |
|||
if (changes['language']) { |
|||
this.languageChanges$.next(this.language); |
|||
} |
|||
} |
|||
|
|||
public setMode(mode: Mode) { |
|||
this.mode.next(mode); |
|||
} |
|||
} |
|||
Loading…
Reference in new issue