mirror of https://github.com/Squidex/squidex.git
Sebastian Stehle
8 years ago
19 changed files with 344 additions and 61 deletions
@ -0,0 +1,45 @@ |
|||
<div class="table-items-row" [class.table-items-footer]="!pattern"> |
|||
<form [formGroup]="editForm" (ngSubmit)="save()" class="row no-gutters"> |
|||
<div class="col col-name"> |
|||
<sqx-control-errors for="name" [submitted]="editFormSubmitted"></sqx-control-errors> |
|||
|
|||
<input type="text" class="form-control" id="pattern-name" maxlength="100" formControlName="name" placeholder="Name" /> |
|||
|
|||
</div> |
|||
|
|||
<div class="col pl-2 pr-2"> |
|||
<sqx-control-errors for="pattern" [submitted]="editFormSubmitted"></sqx-control-errors> |
|||
|
|||
<input type="text" class="form-control" id="pattern-pattern" maxlength="1000" formControlName="pattern" placeholder="Pattern" /> |
|||
</div> |
|||
|
|||
<div class="col col-message"> |
|||
<sqx-control-errors for="message" [submitted]="editFormSubmitted"></sqx-control-errors> |
|||
|
|||
<input type="text" class="form-control" id="pattern-message" maxlength="1000" formControlName="message" placeholder="Message" /> |
|||
</div> |
|||
|
|||
<div class="col col-auto pl-2 col-options" *ngIf="pattern"> |
|||
<button type="submit" class="btn btn-primary" [class.disabled]="!editForm.touched"> |
|||
<i class="icon-checkmark"></i> |
|||
</button> |
|||
|
|||
<button type="button" class="btn btn-link btn-danger" |
|||
(sqxConfirmClick)="removing.emit(pattern)" |
|||
confirmTitle="Remove pattern" |
|||
confirmText="Do you really want to remove this pattern?"> |
|||
<i class="icon-bin2"></i> |
|||
</button> |
|||
</div> |
|||
|
|||
<div class="col col-auto pl-2 col-options" *ngIf="!pattern"> |
|||
<button type="submit" class="btn btn-success"> |
|||
<i class="icon-add"></i> |
|||
</button> |
|||
|
|||
<button type="reset" class="btn btn-link btn-decent" (click)="cancel()"> |
|||
<i class="icon-close"></i> |
|||
</button> |
|||
</div> |
|||
</form> |
|||
</div> |
|||
@ -0,0 +1,13 @@ |
|||
@import '_vars'; |
|||
@import '_mixins'; |
|||
|
|||
.col-options { |
|||
min-width: 7.5rem; |
|||
max-width: 7.5rem; |
|||
} |
|||
|
|||
.col-name, |
|||
.col-message { |
|||
min-width: 10rem; |
|||
max-width: 10rem; |
|||
} |
|||
@ -0,0 +1,95 @@ |
|||
/* |
|||
* Squidex Headless CMS |
|||
* |
|||
* @license |
|||
* Copyright (c) Sebastian Stehle. All rights reserved |
|||
*/ |
|||
|
|||
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; |
|||
import { FormBuilder, Validators } from '@angular/forms'; |
|||
|
|||
import { |
|||
AppPatternDto, |
|||
fadeAnimation, |
|||
ValidatorsEx, |
|||
UpdatePatternDto |
|||
} from 'shared'; |
|||
|
|||
@Component({ |
|||
selector: 'sqx-pattern', |
|||
styleUrls: ['./pattern.component.scss'], |
|||
templateUrl: './pattern.component.html', |
|||
animations: [ |
|||
fadeAnimation |
|||
] |
|||
}) |
|||
export class PatternComponent implements OnInit { |
|||
@Input() |
|||
public isNew = false; |
|||
|
|||
@Input() |
|||
public pattern: AppPatternDto; |
|||
|
|||
@Output() |
|||
public removing = new EventEmitter<any>(); |
|||
|
|||
@Output() |
|||
public updating = new EventEmitter<UpdatePatternDto>(); |
|||
|
|||
public editFormSubmitted = false; |
|||
public editForm = |
|||
this.formBuilder.group({ |
|||
name: [ |
|||
'', |
|||
[ |
|||
Validators.required, |
|||
Validators.maxLength(100), |
|||
ValidatorsEx.pattern('[A-z0-9]+[A-z0-9\- ]*[A-z0-9]', 'Name can only contain letters, numbers, dashes and spaces.') |
|||
] |
|||
], |
|||
pattern: [ |
|||
'', |
|||
[ |
|||
Validators.required |
|||
] |
|||
], |
|||
message: [ |
|||
'', |
|||
[ |
|||
Validators.maxLength(1000) |
|||
] |
|||
] |
|||
}); |
|||
|
|||
constructor( |
|||
private readonly formBuilder: FormBuilder |
|||
) { |
|||
} |
|||
|
|||
public ngOnInit() { |
|||
const pattern = this.pattern; |
|||
|
|||
if (pattern) { |
|||
this.editForm.setValue({ name: pattern.name, pattern: pattern.pattern, message: pattern.message || '' }); |
|||
} |
|||
} |
|||
|
|||
public cancel() { |
|||
this.editFormSubmitted = false; |
|||
this.editForm.reset(); |
|||
} |
|||
|
|||
public save() { |
|||
this.editFormSubmitted = true; |
|||
|
|||
if (this.editForm.valid) { |
|||
const requestDto = new UpdatePatternDto( |
|||
this.editForm.controls['name'].value, |
|||
this.editForm.controls['pattern'].value, |
|||
this.editForm.controls['message'].value); |
|||
|
|||
this.updating.emit(requestDto); |
|||
} |
|||
} |
|||
} |
|||
|
|||
@ -0,0 +1,41 @@ |
|||
<sqx-title message="{app} | Patterns | Settings" parameter1="app" [value1]="ctx.appName"></sqx-title> |
|||
|
|||
<sqx-panel desiredWidth="60rem"> |
|||
<div class="panel-header"> |
|||
<div class="panel-title-row"> |
|||
<h3 class="panel-title">Patterns</h3> |
|||
</div> |
|||
|
|||
<a class="panel-close" sqxParentLink> |
|||
<i class="icon-close"></i> |
|||
</a> |
|||
</div> |
|||
|
|||
<div class="panel-main"> |
|||
<div class="panel-content panel-content-scroll"> |
|||
<div *ngIf="appPatterns"> |
|||
<div *ngFor="let pattern of appPatterns.patterns"> |
|||
<sqx-pattern [pattern]="pattern" |
|||
(removing)="removePattern(pattern)" |
|||
(updating)="updatePattern(pattern, $event)"> |
|||
</sqx-pattern> |
|||
</div> |
|||
<sqx-pattern [isNew]="true" |
|||
(updating)="addPattern($event)"> |
|||
</sqx-pattern> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<div class="panel-sidebar"> |
|||
<a class="panel-link" routerLink="history" routerLinkActive="active"> |
|||
<i class="icon-time"></i> |
|||
</a> |
|||
<a class="panel-link" routerLink="help" routerLinkActive="active"> |
|||
<i class="icon-help"></i> |
|||
</a> |
|||
</div> |
|||
</div> |
|||
</sqx-panel> |
|||
|
|||
<router-outlet></router-outlet> |
|||
@ -0,0 +1,2 @@ |
|||
@import '_vars'; |
|||
@import '_mixins'; |
|||
@ -0,0 +1,87 @@ |
|||
/* |
|||
* Squidex Headless CMS |
|||
* |
|||
* @license |
|||
* Copyright (c) Sebastian Stehle. All rights reserved |
|||
*/ |
|||
|
|||
import { Component, OnInit } from '@angular/core'; |
|||
|
|||
import { |
|||
AppContext, |
|||
AppPatternDto, |
|||
AppPatternsDto, |
|||
AppPatternsService, |
|||
HistoryChannelUpdated, |
|||
UpdatePatternDto |
|||
} from 'shared'; |
|||
|
|||
@Component({ |
|||
selector: 'sqx-patterns-page', |
|||
styleUrls: ['./patterns-page.component.scss'], |
|||
templateUrl: './patterns-page.component.html', |
|||
providers: [ |
|||
AppContext |
|||
] |
|||
}) |
|||
export class PatternsPageComponent implements OnInit { |
|||
public appPatterns: AppPatternsDto; |
|||
|
|||
constructor(public readonly ctx: AppContext, |
|||
private readonly appPatternsService: AppPatternsService |
|||
) { |
|||
} |
|||
|
|||
public ngOnInit() { |
|||
this.load(); |
|||
} |
|||
|
|||
public load() { |
|||
this.appPatternsService.getPatterns(this.ctx.appName).retry(2) |
|||
.subscribe(dtos => { |
|||
this.updatePatterns(dtos); |
|||
}, error => { |
|||
this.ctx.notifyError(error); |
|||
}); |
|||
} |
|||
|
|||
public addPattern(pattern: AppPatternDto) { |
|||
const requestDto = new UpdatePatternDto(pattern.name, pattern.pattern, pattern.message); |
|||
|
|||
this.appPatternsService.postPattern(this.ctx.appName, requestDto, this.appPatterns.version) |
|||
.subscribe(dto => { |
|||
this.updatePatterns(this.appPatterns.addPattern(dto.payload, dto.version)); |
|||
}, error => { |
|||
this.ctx.notifyError(error); |
|||
}); |
|||
} |
|||
|
|||
public updatePattern(pattern: AppPatternDto, update: UpdatePatternDto) { |
|||
this.appPatternsService.putPattern(this.ctx.appName, pattern.patternId, update, this.appPatterns.version) |
|||
.subscribe(dto => { |
|||
this.updatePatterns(this.appPatterns.updatePattern(pattern.update(update), dto.version)); |
|||
}, error => { |
|||
this.ctx.notifyError(error); |
|||
}); |
|||
} |
|||
|
|||
public removePattern(pattern: AppPatternDto) { |
|||
this.appPatternsService.deletePattern(this.ctx.appName, pattern.patternId, this.appPatterns.version) |
|||
.subscribe(dto => { |
|||
this.updatePatterns(this.appPatterns.deletePattern(pattern, dto.version)); |
|||
}, error => { |
|||
this.ctx.notifyError(error); |
|||
}); |
|||
} |
|||
|
|||
private updatePatterns(patterns: AppPatternsDto) { |
|||
this.appPatterns = |
|||
new AppPatternsDto( |
|||
patterns.patterns.sort((a, b) => { |
|||
return a.name.localeCompare(b.name); |
|||
}), |
|||
patterns.version); |
|||
|
|||
this.ctx.bus.emit(new HistoryChannelUpdated()); |
|||
} |
|||
} |
|||
Loading…
Reference in new issue