mirror of https://github.com/Squidex/squidex.git
Sebastian
9 years ago
29 changed files with 728 additions and 140 deletions
@ -1,16 +0,0 @@ |
|||||
<sqx-title message="{app} | Content" parameter1="app" value1="{{appName() | async}}"></sqx-title> |
|
||||
|
|
||||
<div class="panel panel-light"> |
|
||||
<div class="panel-header"> |
|
||||
<h3 class="panel-title">Content</h3> |
|
||||
|
|
||||
<a class="panel-close" dashboardLink> |
|
||||
<i class="icon-close"></i> |
|
||||
</a> |
|
||||
</div> |
|
||||
|
|
||||
<div class="panel-main"> |
|
||||
<div class="panel-content"> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
@ -1,27 +0,0 @@ |
|||||
/* |
|
||||
* Squidex Headless CMS |
|
||||
* |
|
||||
* @license |
|
||||
* Copyright (c) Sebastian Stehle. All rights reserved |
|
||||
*/ |
|
||||
|
|
||||
import { Component } from '@angular/core'; |
|
||||
|
|
||||
import { |
|
||||
AppComponentBase, |
|
||||
AppsStoreService, |
|
||||
NotificationService, |
|
||||
UsersProviderService |
|
||||
} from 'shared'; |
|
||||
|
|
||||
@Component({ |
|
||||
selector: 'sqx-content-page', |
|
||||
styleUrls: ['./content-page.component.scss'], |
|
||||
templateUrl: './content-page.component.html' |
|
||||
}) |
|
||||
export class ContentPageComponent extends AppComponentBase { |
|
||||
constructor(apps: AppsStoreService, notifications: NotificationService, users: UsersProviderService) { |
|
||||
super(apps, notifications, users); |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
@ -0,0 +1,95 @@ |
|||||
|
<sqx-title message="{app} | Content" parameter1="app" value1="{{appName() | async}}"></sqx-title> |
||||
|
|
||||
|
<form [formGroup]="contentForm" (ngSubmit)="saveSchema()"> |
||||
|
<div class="panel panel-light" > |
||||
|
<div class="panel-header"> |
||||
|
<div class="float-xs-right"> |
||||
|
<button type="submit" class="btn btn-primary"> |
||||
|
Save |
||||
|
</button> |
||||
|
</div> |
||||
|
|
||||
|
<h3 class="panel-title" *ngIf="isNewMode">New {{schema|displayName}}</h3> |
||||
|
|
||||
|
<a class="panel-close" routerLink="../"> |
||||
|
<i class="icon-close"></i> |
||||
|
</a> |
||||
|
</div> |
||||
|
|
||||
|
<div class="panel-main"> |
||||
|
<div class="panel-content"> |
||||
|
<div *ngFor="let field of schema.fields"> |
||||
|
<div class="table-items-row"> |
||||
|
<label>{{field|displayName:'properties.label':'name'}}</label> |
||||
|
|
||||
|
<div> |
||||
|
<div [ngSwitch]="field.properties.fieldType"> |
||||
|
<div *ngSwitchCase="'number'"> |
||||
|
<div [ngSwitch]="field.properties.editor"> |
||||
|
<div *ngSwitchCase="'Input'"> |
||||
|
<input class="form-control" type="number" [formControlName]="field.name"> |
||||
|
</div> |
||||
|
<div *ngSwitchCase="'Dropdown'"> |
||||
|
<select class="form-control" [formControlName]="field.name"> |
||||
|
<option *ngFor="let value of field.properties.allowedValues">{{value}}</option> |
||||
|
</select> |
||||
|
</div> |
||||
|
<div *ngSwitchCase="'Radio'"> |
||||
|
<label *ngFor="let value of field.properties.allowedValues"> |
||||
|
<input type="radio" value="{{value}}" [formControlName]="field.name"> {{value}} |
||||
|
</label> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div *ngSwitchCase="'string'"> |
||||
|
<div [ngSwitch]="field.properties.editor"> |
||||
|
<div *ngSwitchCase="'Input'"> |
||||
|
<input class="form-control" type="number" [formControlName]="field.name"> |
||||
|
</div> |
||||
|
<div *ngSwitchCase="'Dropdown'"> |
||||
|
<select class="form-control" [formControlName]="field.name"> |
||||
|
<option *ngFor="let value of field.properties.allowedValues">{{value}}</option> |
||||
|
</select> |
||||
|
</div> |
||||
|
<div *ngSwitchCase="'TextArea'"> |
||||
|
<textarea class="form-control" [formControlName]="field.name"></textarea> |
||||
|
</div> |
||||
|
<div *ngSwitchCase="'Radio'"> |
||||
|
<label *ngFor="let value of field.properties.allowedValues"> |
||||
|
<input type="radio" value="{{value}}" [formControlName]="field.name"> {{value}} |
||||
|
</label> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div *ngSwitchCase="'boolean'"> |
||||
|
<div [ngSwitch]="field.properties.editor"> |
||||
|
<div *ngSwitchCase="'Checkbox'"> |
||||
|
<div class="form-check"> |
||||
|
<input type="checkbox" [formControlName]="field.name"> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div *ngSwitchCase="'Toggle'"> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="form-hint" *ngIf="field.properties.hints && field.properties.hints.length > 0"> |
||||
|
{{field.properties.hints}} |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="panel-sidebar" *ngIf="!isNewMode"> |
||||
|
<div class="nav nav-pills nav-stacked nav-light"> |
||||
|
<li class="nav-item"> |
||||
|
<a class="nav-link" routerLink="history" routerLinkActive="active"> |
||||
|
<i class="icon-time"></i> |
||||
|
</a> |
||||
|
</li> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</form> |
||||
@ -0,0 +1,62 @@ |
|||||
|
/* |
||||
|
* Squidex Headless CMS |
||||
|
* |
||||
|
* @license |
||||
|
* Copyright (c) Sebastian Stehle. All rights reserved |
||||
|
*/ |
||||
|
|
||||
|
import { Component } from '@angular/core'; |
||||
|
import { AbstractControl, FormControl, FormGroup } from '@angular/forms'; |
||||
|
import { ActivatedRoute } from '@angular/router'; |
||||
|
|
||||
|
import { |
||||
|
AppComponentBase, |
||||
|
AppsStoreService, |
||||
|
NotificationService, |
||||
|
SchemaDetailsDto, |
||||
|
UsersProviderService |
||||
|
} from 'shared'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'sqx-content-page', |
||||
|
styleUrls: ['./content-page.component.scss'], |
||||
|
templateUrl: './content-page.component.html' |
||||
|
}) |
||||
|
export class ContentPageComponent extends AppComponentBase { |
||||
|
public schema: SchemaDetailsDto; |
||||
|
|
||||
|
public contentForm: FormGroup; |
||||
|
|
||||
|
public isNewMode = false; |
||||
|
|
||||
|
constructor(apps: AppsStoreService, notifications: NotificationService, users: UsersProviderService, |
||||
|
private readonly route: ActivatedRoute |
||||
|
) { |
||||
|
super(apps, notifications, users); |
||||
|
} |
||||
|
|
||||
|
public ngOnInit() { |
||||
|
this.route.params.map(p => p['contentId']).subscribe(contentId => { |
||||
|
this.isNewMode = !contentId; |
||||
|
}); |
||||
|
|
||||
|
this.route.data.map(p => p['schema']).subscribe((schema: SchemaDetailsDto) => { |
||||
|
this.schema = schema; |
||||
|
|
||||
|
this.setupForm(schema); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
private setupForm(schema: SchemaDetailsDto) { |
||||
|
const controls: { [key: string]: AbstractControl } = {}; |
||||
|
|
||||
|
for (const field of schema.fields) { |
||||
|
const formControl = new FormControl(); |
||||
|
|
||||
|
controls[field.name] = formControl; |
||||
|
} |
||||
|
|
||||
|
this.contentForm = new FormGroup(controls); |
||||
|
} |
||||
|
} |
||||
|
|
||||
@ -0,0 +1,33 @@ |
|||||
|
<sqx-title message="{app} | Contents" parameter1="app" value1="{{appName() | async}}"></sqx-title> |
||||
|
|
||||
|
<div class="panel panel-light"> |
||||
|
<div class="panel-header"> |
||||
|
<div class="float-xs-right"> |
||||
|
<a class="btn btn-success" [routerLink]="['new']"> |
||||
|
<i class="icon-plus"></i> New |
||||
|
</a> |
||||
|
</div> |
||||
|
|
||||
|
<h3 class="panel-title">{{schema|displayName}} Contents</h3> |
||||
|
|
||||
|
<a class="panel-close" routerLink="../"> |
||||
|
<i class="icon-close"></i> |
||||
|
</a> |
||||
|
</div> |
||||
|
|
||||
|
<div class="panel-main"> |
||||
|
<div class="panel-content"> |
||||
|
</div> |
||||
|
<div class="panel-sidebar"> |
||||
|
<div class="nav nav-pills nav-stacked nav-light"> |
||||
|
<li class="nav-item"> |
||||
|
<a class="nav-link" routerLink="history" routerLinkActive="active"> |
||||
|
<i class="icon-time"></i> |
||||
|
</a> |
||||
|
</li> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<router-outlet></router-outlet> |
||||
@ -0,0 +1,7 @@ |
|||||
|
@import '_vars'; |
||||
|
@import '_mixins'; |
||||
|
|
||||
|
.panel { |
||||
|
min-width: 600px; |
||||
|
max-width: 600px; |
||||
|
} |
||||
@ -0,0 +1,39 @@ |
|||||
|
/* |
||||
|
* Squidex Headless CMS |
||||
|
* |
||||
|
* @license |
||||
|
* Copyright (c) Sebastian Stehle. All rights reserved |
||||
|
*/ |
||||
|
|
||||
|
import { Component, OnInit } from '@angular/core'; |
||||
|
import { ActivatedRoute } from '@angular/router'; |
||||
|
|
||||
|
import { |
||||
|
AppComponentBase, |
||||
|
AppsStoreService, |
||||
|
NotificationService, |
||||
|
SchemaDetailsDto, |
||||
|
UsersProviderService |
||||
|
} from 'shared'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'sqx-contents-page', |
||||
|
styleUrls: ['./contents-page.component.scss'], |
||||
|
templateUrl: './contents-page.component.html' |
||||
|
}) |
||||
|
export class ContentsPageComponent extends AppComponentBase implements OnInit { |
||||
|
public schema: SchemaDetailsDto; |
||||
|
|
||||
|
constructor(apps: AppsStoreService, notifications: NotificationService, users: UsersProviderService, |
||||
|
private readonly route: ActivatedRoute |
||||
|
) { |
||||
|
super(apps, notifications, users); |
||||
|
} |
||||
|
|
||||
|
public ngOnInit() { |
||||
|
this.route.data.map(p => p['schema']).subscribe(schema => { |
||||
|
this.schema = schema; |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
|
||||
@ -0,0 +1,35 @@ |
|||||
|
<sqx-title message="{app} | Schemas" parameter1="app" value1="{{appName() | async}}"></sqx-title> |
||||
|
|
||||
|
<div class="panel panel-dark"> |
||||
|
<div class="panel-header"> |
||||
|
<div> |
||||
|
<h3 class="panel-title">Schemas</h3> |
||||
|
|
||||
|
<a class="panel-close" dashboardLink> |
||||
|
<i class="icon-close"></i> |
||||
|
</a> |
||||
|
</div> |
||||
|
|
||||
|
<div class="subheader"> |
||||
|
<div class="search-form"> |
||||
|
<input class="form-control form-control-dark" [formControl]="schemasFilter" placeholder="Search for schemas..." /> |
||||
|
|
||||
|
<i class="icon-search"></i> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="panel-main"> |
||||
|
<div class="panel-content"> |
||||
|
<div class="schemas"> |
||||
|
<div class="schema" *ngFor="let schema of schemasFiltered | async" [routerLink]="[schema.name]" routerLinkActive="active"> |
||||
|
<div class="schema-inner"> |
||||
|
<span class="schema-name">{{schema|displayName}}</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<router-outlet></router-outlet> |
||||
@ -0,0 +1,83 @@ |
|||||
|
@import '_vars'; |
||||
|
@import '_mixins'; |
||||
|
|
||||
|
.panel { |
||||
|
min-width: 280px; |
||||
|
max-width: 280px; |
||||
|
} |
||||
|
|
||||
|
.panel-header { |
||||
|
min-height: 120px; |
||||
|
max-height: 120px; |
||||
|
} |
||||
|
|
||||
|
.subheader { |
||||
|
@include flex-box; |
||||
|
@include flex-flow(row); |
||||
|
margin-top: 2rem; |
||||
|
margin-right: -40px; |
||||
|
} |
||||
|
|
||||
|
.search-form { |
||||
|
& { |
||||
|
@include flex-grow(1); |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.form-control { |
||||
|
padding-left: 50px; |
||||
|
} |
||||
|
|
||||
|
.icon-search { |
||||
|
@include absolute(10px, auto, auto, 12px); |
||||
|
color: $color-dark-foreground-selected; |
||||
|
font-size: 1.3rem; |
||||
|
font-weight: lighter; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.schemas { |
||||
|
margin-left: -$panel-padding; |
||||
|
margin-right: -$panel-padding; |
||||
|
} |
||||
|
|
||||
|
.schema { |
||||
|
& { |
||||
|
padding-left: $panel-padding; |
||||
|
padding-right: $panel-padding; |
||||
|
} |
||||
|
|
||||
|
&:hover, |
||||
|
&.active { |
||||
|
& { |
||||
|
background: $color-dark-background-selected; |
||||
|
} |
||||
|
|
||||
|
& + .schema > .schema-inner { |
||||
|
border-color: transparent; |
||||
|
} |
||||
|
|
||||
|
.schema-inner { |
||||
|
border-color: transparent; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&-inner { |
||||
|
padding-top: 1rem; |
||||
|
padding-bottom: 1rem; |
||||
|
border-top: 1px solid darken($color-dark-foreground, 10%); |
||||
|
} |
||||
|
|
||||
|
&-name { |
||||
|
@include truncate; |
||||
|
color: $color-dark-foreground-selected; |
||||
|
font-size: 1rem; |
||||
|
font-weight: normal; |
||||
|
} |
||||
|
|
||||
|
&:first-child { |
||||
|
.schema-inner { |
||||
|
border: 0; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,76 @@ |
|||||
|
/* |
||||
|
* Squidex Headless CMS |
||||
|
* |
||||
|
* @license |
||||
|
* Copyright (c) Sebastian Stehle. All rights reserved |
||||
|
*/ |
||||
|
|
||||
|
import { Component, OnInit } from '@angular/core'; |
||||
|
import { FormControl } from '@angular/forms'; |
||||
|
import { BehaviorSubject, Observable } from 'rxjs'; |
||||
|
|
||||
|
import { |
||||
|
AppComponentBase, |
||||
|
AppsStoreService, |
||||
|
ImmutableArray, |
||||
|
NotificationService, |
||||
|
SchemaDto, |
||||
|
SchemasService, |
||||
|
UsersProviderService |
||||
|
} from 'shared'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'sqx-schemas-page', |
||||
|
styleUrls: ['./schemas-page.component.scss'], |
||||
|
templateUrl: './schemas-page.component.html' |
||||
|
}) |
||||
|
export class SchemasPageComponent extends AppComponentBase implements OnInit { |
||||
|
public schemas = new BehaviorSubject(ImmutableArray.empty<SchemaDto>()); |
||||
|
public schemasFilter = new FormControl(); |
||||
|
public schemasFiltered = |
||||
|
Observable.of(null) |
||||
|
.merge(this.schemasFilter.valueChanges.debounceTime(100)) |
||||
|
.combineLatest(this.schemas, |
||||
|
(query, schemas) => { |
||||
|
|
||||
|
schemas = schemas.filter(t => t.isPublished); |
||||
|
|
||||
|
if (query && query.length > 0) { |
||||
|
schemas = schemas.filter(t => t.name.indexOf(query) >= 0); |
||||
|
} |
||||
|
|
||||
|
schemas = |
||||
|
schemas.sort((a, b) => { |
||||
|
if (a.name < b.name) { |
||||
|
return -1; |
||||
|
} |
||||
|
if (a.name > b.name) { |
||||
|
return 1; |
||||
|
} |
||||
|
return 0; |
||||
|
}); |
||||
|
|
||||
|
return schemas; |
||||
|
}); |
||||
|
|
||||
|
constructor(apps: AppsStoreService, notifications: NotificationService, users: UsersProviderService, |
||||
|
private readonly schemasService: SchemasService |
||||
|
) { |
||||
|
super(apps, notifications, users); |
||||
|
} |
||||
|
|
||||
|
public ngOnInit() { |
||||
|
this.load(); |
||||
|
} |
||||
|
|
||||
|
public load() { |
||||
|
this.appName() |
||||
|
.switchMap(app => this.schemasService.getSchemas(app).retry(2)) |
||||
|
.subscribe(dtos => { |
||||
|
this.schemas.next(ImmutableArray.of(dtos)); |
||||
|
}, error => { |
||||
|
this.notifyError(error); |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
|
||||
@ -0,0 +1,55 @@ |
|||||
|
/* |
||||
|
* Squidex Headless CMS |
||||
|
* |
||||
|
* @license |
||||
|
* Copyright (c) Sebastian Stehle. All rights reserved |
||||
|
*/ |
||||
|
|
||||
|
import { Injectable } from '@angular/core'; |
||||
|
import { ActivatedRouteSnapshot, Resolve, Router, RouterStateSnapshot } from '@angular/router'; |
||||
|
|
||||
|
import { SchemaDetailsDto, SchemasService } from './../services/schemas.service'; |
||||
|
|
||||
|
@Injectable() |
||||
|
export class ResolvePublishedSchemaGuard implements Resolve<SchemaDetailsDto> { |
||||
|
constructor( |
||||
|
private readonly schemasService: SchemasService, |
||||
|
private readonly router: Router |
||||
|
) { |
||||
|
} |
||||
|
|
||||
|
public resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<SchemaDetailsDto> { |
||||
|
const appName = this.findParameter(route, 'appName'); |
||||
|
const schemaName = this.findParameter(route, 'schemaName'); |
||||
|
|
||||
|
const result = |
||||
|
this.schemasService.getSchema(appName, schemaName).toPromise() |
||||
|
.then(dto => { |
||||
|
if (!dto || !dto.isPublished) { |
||||
|
this.router.navigate(['/404']); |
||||
|
} |
||||
|
|
||||
|
return dto; |
||||
|
}).catch(() => { |
||||
|
this.router.navigate(['/404']); |
||||
|
}); |
||||
|
|
||||
|
return result; |
||||
|
} |
||||
|
|
||||
|
private findParameter(route: ActivatedRouteSnapshot, name: string) { |
||||
|
let result: string; |
||||
|
|
||||
|
while (route) { |
||||
|
result = route.params[name]; |
||||
|
|
||||
|
if (result) { |
||||
|
break; |
||||
|
} |
||||
|
|
||||
|
route = route.parent; |
||||
|
} |
||||
|
|
||||
|
return result; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,55 @@ |
|||||
|
/* |
||||
|
* Squidex Headless CMS |
||||
|
* |
||||
|
* @license |
||||
|
* Copyright (c) Sebastian Stehle. All rights reserved |
||||
|
*/ |
||||
|
|
||||
|
import { Injectable } from '@angular/core'; |
||||
|
import { ActivatedRouteSnapshot, Resolve, Router, RouterStateSnapshot } from '@angular/router'; |
||||
|
|
||||
|
import { SchemaDetailsDto, SchemasService } from './../services/schemas.service'; |
||||
|
|
||||
|
@Injectable() |
||||
|
export class ResolveSchemaGuard implements Resolve<SchemaDetailsDto> { |
||||
|
constructor( |
||||
|
private readonly schemasService: SchemasService, |
||||
|
private readonly router: Router |
||||
|
) { |
||||
|
} |
||||
|
|
||||
|
public resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<SchemaDetailsDto> { |
||||
|
const appName = this.findParameter(route, 'appName'); |
||||
|
const schemaName = this.findParameter(route, 'schemaName'); |
||||
|
|
||||
|
const result = |
||||
|
this.schemasService.getSchema(appName, schemaName).toPromise() |
||||
|
.then(dto => { |
||||
|
if (!dto) { |
||||
|
this.router.navigate(['/404']); |
||||
|
} |
||||
|
|
||||
|
return dto; |
||||
|
}).catch(() => { |
||||
|
this.router.navigate(['/404']); |
||||
|
}); |
||||
|
|
||||
|
return result; |
||||
|
} |
||||
|
|
||||
|
private findParameter(route: ActivatedRouteSnapshot, name: string) { |
||||
|
let result: string; |
||||
|
|
||||
|
while (route) { |
||||
|
result = route.params[name]; |
||||
|
|
||||
|
if (result) { |
||||
|
break; |
||||
|
} |
||||
|
|
||||
|
route = route.parent; |
||||
|
} |
||||
|
|
||||
|
return result; |
||||
|
} |
||||
|
} |
||||
Loading…
Reference in new issue