mirror of https://github.com/Squidex/squidex.git
Sebastian
6 years ago
15 changed files with 264 additions and 43 deletions
@ -0,0 +1,56 @@ |
|||
<sqx-modal-dialog (close)="emitComplete()" size="lg" [showFooter]="false"> |
|||
<ng-container title> |
|||
<div class="row"> |
|||
<div class="col-selector"> |
|||
<select class="form-control form-control-dark" |
|||
[ngModel]="schema?.id" |
|||
(ngModelChange)="selectSchema($event)"> |
|||
<option *ngFor="let schema of schemas" [ngValue]="schema.id"> |
|||
Select {{schema.displayName}} |
|||
</option> |
|||
</select> |
|||
</div> |
|||
</div> |
|||
</ng-container> |
|||
|
|||
<ng-container tabs> |
|||
<div class="row no-gutters"> |
|||
<div class="col-auto"> |
|||
<div *ngIf="schema && languages.length > 1"> |
|||
<sqx-language-selector class="languages-buttons" |
|||
(selectedLanguageChange)="selectLanguage($event)" [languages]="languages"> |
|||
</sqx-language-selector> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="col text-right"> |
|||
<button type="button" class="btn btn-outline-success" (click)="save()"> |
|||
Create |
|||
</button> |
|||
|
|||
<button type="button" class="btn btn-success ml-1" (click)="saveAndPublish()" *ngIf="schema?.canContentsCreateAndPublish"> |
|||
Create and Publish |
|||
</button> |
|||
|
|||
<sqx-form-error bubble="true" closeable="true" [error]="contentForm?.error | async"></sqx-form-error> |
|||
</div> |
|||
</div> |
|||
</ng-container> |
|||
|
|||
<ng-container content> |
|||
<ng-container *ngIf="schema && contentForm"> |
|||
<form [formGroup]="contentForm.form" (ngSubmit)="saveAndPublish()"> |
|||
<sqx-content-field *ngFor="let field of schema.fields" |
|||
(languageChange)="selectLanguage($event)" |
|||
[field]="field" |
|||
[fieldForm]="contentForm.form.get(field.name)" |
|||
[form]="contentForm" |
|||
[formContext]="contentFormContext" |
|||
[language]="language" |
|||
[languages]="languages" |
|||
[schema]="schema"> |
|||
</sqx-content-field> |
|||
</form> |
|||
</ng-container> |
|||
</ng-container> |
|||
</sqx-modal-dialog> |
|||
@ -0,0 +1,11 @@ |
|||
:host ::ng-deep { |
|||
.modal-tabs { |
|||
background: $color-white; |
|||
padding-left: 1.75rem; |
|||
padding-right: 1.75rem; |
|||
} |
|||
|
|||
.modal-content { |
|||
background: $color-background; |
|||
} |
|||
} |
|||
@ -0,0 +1,141 @@ |
|||
/* |
|||
* Squidex Headless CMS |
|||
* |
|||
* @license |
|||
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. |
|||
*/ |
|||
|
|||
import { ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; |
|||
|
|||
import { |
|||
ApiUrlConfig, |
|||
AppLanguageDto, |
|||
AppsState, |
|||
AuthService, |
|||
ContentDto, |
|||
EditContentForm, |
|||
LanguageDto, |
|||
ManualContentsState, |
|||
ResourceOwner, |
|||
SchemaDetailsDto, |
|||
SchemaDto, |
|||
SchemasState, |
|||
Types |
|||
} from '@app/shared'; |
|||
|
|||
@Component({ |
|||
selector: 'sqx-content-creator', |
|||
styleUrls: ['./content-creator.component.scss'], |
|||
templateUrl: './content-creator.component.html', |
|||
providers: [ |
|||
ManualContentsState |
|||
] |
|||
}) |
|||
export class ContentCreatorComponent extends ResourceOwner implements OnInit { |
|||
@Output() |
|||
public select = new EventEmitter<ReadonlyArray<ContentDto>>(); |
|||
|
|||
@Input() |
|||
public schemaIds: ReadonlyArray<string>; |
|||
|
|||
@Input() |
|||
public language: LanguageDto; |
|||
|
|||
@Input() |
|||
public languages: ReadonlyArray<AppLanguageDto>; |
|||
|
|||
public schema: SchemaDetailsDto; |
|||
public schemas: ReadonlyArray<SchemaDto> = []; |
|||
|
|||
public contentFormContext: any; |
|||
public contentForm: EditContentForm; |
|||
|
|||
constructor(authService: AuthService, |
|||
public readonly appsState: AppsState, |
|||
public readonly apiUrl: ApiUrlConfig, |
|||
public readonly contentsState: ManualContentsState, |
|||
public readonly schemasState: SchemasState, |
|||
private readonly changeDetector: ChangeDetectorRef |
|||
) { |
|||
super(); |
|||
|
|||
this.contentFormContext = { user: authService.user, apiUrl: apiUrl.buildUrl('api') }; |
|||
} |
|||
|
|||
public ngOnInit() { |
|||
this.schemas = this.schemasState.snapshot.schemas.filter(x => x.canContentsCreate); |
|||
|
|||
if (this.schemaIds && this.schemaIds.length > 0) { |
|||
this.schemas = this.schemas.filter(x => this.schemaIds.indexOf(x.id) >= 0); |
|||
} |
|||
|
|||
this.selectSchema(this.schemas[0]); |
|||
} |
|||
|
|||
public selectSchema(selected: string | SchemaDto) { |
|||
if (Types.is(selected, SchemaDto)) { |
|||
selected = selected.id; |
|||
} |
|||
|
|||
this.schemasState.loadSchema(selected, true) |
|||
.subscribe(schema => { |
|||
if (schema) { |
|||
this.schema = schema; |
|||
|
|||
this.contentsState.schema = schema; |
|||
this.contentForm = new EditContentForm(this.languages, this.schema); |
|||
|
|||
this.changeDetector.markForCheck(); |
|||
} |
|||
}); |
|||
} |
|||
|
|||
public saveAndPublish() { |
|||
this.saveContent(true); |
|||
} |
|||
|
|||
public save() { |
|||
this.saveContent(false); |
|||
} |
|||
|
|||
private saveContent(publish: boolean) { |
|||
const value = this.contentForm.submit(); |
|||
|
|||
if (value) { |
|||
if (!this.canCreate(publish)) { |
|||
return; |
|||
} |
|||
|
|||
this.contentsState.create(value, publish) |
|||
.subscribe(content => { |
|||
this.contentForm.submitCompleted({ noReset: true }); |
|||
|
|||
this.emitSelect(content); |
|||
}, error => { |
|||
this.contentForm.submitFailed(error); |
|||
}); |
|||
} else { |
|||
this.contentForm.submitFailed('Content element not valid, please check the field with the red bar on the left in all languages (if localizable).'); |
|||
} |
|||
} |
|||
|
|||
private canCreate(publish: boolean) { |
|||
if (publish) { |
|||
return this.schema.canContentsCreateAndPublish; |
|||
} else { |
|||
return this.schema.canContentsCreateAndPublish; |
|||
} |
|||
} |
|||
|
|||
public emitComplete() { |
|||
this.select.emit([]); |
|||
} |
|||
|
|||
public emitSelect(content: ContentDto) { |
|||
this.select.emit([content]); |
|||
} |
|||
|
|||
public selectLanguage(language: LanguageDto) { |
|||
this.language = language; |
|||
} |
|||
} |
|||
Loading…
Reference in new issue