mirror of https://github.com/Squidex/squidex.git
Browse Source
* Unify pipe. * Custom views. * Using model for table view. * Custom view. * Better separation. * Refactoring. * Added some tests. * Style and code style improvements. * Names unified.pull/473/head
Sebastian Stehle
6 years ago
committed by
GitHub
GitHub
58 changed files with 640 additions and 222 deletions
@ -0,0 +1,41 @@ |
|||
<div class="container"> |
|||
<div class="header"> |
|||
<button type="button" class="btn btn-secondary btn-sm" (click)="resetDefault()"> |
|||
Reset Default View |
|||
</button> |
|||
</div> |
|||
|
|||
<hr /> |
|||
|
|||
<div |
|||
cdkDropList |
|||
[cdkDropListData]="fieldNames" |
|||
(cdkDropListDropped)="drop($event)"> |
|||
|
|||
<div *ngFor="let field of fieldNames; trackBy: random" cdkDrag> |
|||
<i class="icon-drag2 drag-handle"></i> |
|||
|
|||
<div class="form-check"> |
|||
<input class="form-check-input" type="checkbox" checked (change)="removeField(field)" id="field_{{field}}"> |
|||
<label class="form-check-label" for="field_{{field}}"> |
|||
{{field}} |
|||
</label> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<hr /> |
|||
|
|||
<div> |
|||
<div *ngFor="let field of fieldsNotAdded"> |
|||
<i class="icon-drag2 drag-handle invisible"></i> |
|||
|
|||
<div class="form-check"> |
|||
<input class="form-check-input" type="checkbox" (change)="addField(field)" id="field_{{field}}"> |
|||
<label class="form-check-label" for="field_{{field}}"> |
|||
{{field}} |
|||
</label> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
@ -0,0 +1,23 @@ |
|||
@import '_vars'; |
|||
@import '_mixins'; |
|||
|
|||
.container { |
|||
max-height: 400px; |
|||
overflow-x: hidden; |
|||
overflow-y: auto; |
|||
padding: .5rem 1rem; |
|||
} |
|||
|
|||
.header { |
|||
text-align: right; |
|||
} |
|||
|
|||
.invisible { |
|||
visibility: hidden; |
|||
} |
|||
|
|||
.form-check { |
|||
display: inline-block; |
|||
padding-left: 2rem; |
|||
padding-right: .5rem; |
|||
} |
|||
@ -0,0 +1,60 @@ |
|||
/* |
|||
* Squidex Headless CMS |
|||
* |
|||
* @license |
|||
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. |
|||
*/ |
|||
|
|||
// tslint:disable: readonly-array
|
|||
|
|||
import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop'; |
|||
import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, Output } from '@angular/core'; |
|||
|
|||
@Component({ |
|||
selector: 'sqx-custom-view-editor', |
|||
styleUrls: ['./custom-view-editor.component.scss'], |
|||
templateUrl: './custom-view-editor.component.html', |
|||
changeDetection: ChangeDetectionStrategy.OnPush |
|||
}) |
|||
export class CustomViewEditorComponent implements OnChanges { |
|||
@Input() |
|||
public allFields: ReadonlyArray<string>; |
|||
|
|||
@Input() |
|||
public fieldNames: ReadonlyArray<string>; |
|||
|
|||
@Output() |
|||
public fieldNamesChange = new EventEmitter<ReadonlyArray<string>>(); |
|||
|
|||
public fieldsNotAdded: ReadonlyArray<string>; |
|||
|
|||
public ngOnChanges() { |
|||
this.fieldsNotAdded = this.allFields.filter(n => this.fieldNames.indexOf(n) < 0); |
|||
} |
|||
|
|||
public random() { |
|||
return Math.random(); |
|||
} |
|||
|
|||
public drop(event: CdkDragDrop<string[]>) { |
|||
moveItemInArray(event.container.data, event.previousIndex, event.currentIndex); |
|||
|
|||
this.updateFields(event.container.data); |
|||
} |
|||
|
|||
public updateFields(fieldNames: ReadonlyArray<string>) { |
|||
this.fieldNamesChange.emit(fieldNames); |
|||
} |
|||
|
|||
public resetDefault() { |
|||
this.updateFields([]); |
|||
} |
|||
|
|||
public addField(field: string) { |
|||
this.updateFields([...this.fieldNames, field]); |
|||
} |
|||
|
|||
public removeField(field: string) { |
|||
this.updateFields(this.fieldNames.filter(x => x !== field)); |
|||
} |
|||
} |
|||
@ -0,0 +1,43 @@ |
|||
/* |
|||
* Squidex Headless CMS |
|||
* |
|||
* @license |
|||
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. |
|||
*/ |
|||
|
|||
import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core'; |
|||
|
|||
import { QueryModel } from '@app/shared/internal'; |
|||
|
|||
@Component({ |
|||
selector: 'sqx-query-path', |
|||
template: ` |
|||
<sqx-dropdown [items]="model.fields | sqxKeys" [ngModel]="path" (ngModelChange)="pathChange.emit($event)" [canSearch]="false" separated="true"> |
|||
<ng-template let-field="$implicit"> |
|||
<div class="row"> |
|||
<div class="col-auto"> |
|||
<div class="badge badge-pill badge-primary">{{model.fields[field].displayName}}</div> |
|||
</div> |
|||
<div class="col text-right"> |
|||
<small class="text-muted">{{model.fields[field].description}}</small> |
|||
</div> |
|||
</div> |
|||
</ng-template> |
|||
|
|||
<ng-template let-field="$implicit"> |
|||
{{model.fields[field].displayName}} |
|||
</ng-template> |
|||
</sqx-dropdown> |
|||
`,
|
|||
changeDetection: ChangeDetectionStrategy.OnPush |
|||
}) |
|||
export class QueryPathComponent { |
|||
@Output() |
|||
public pathChange = new EventEmitter<string>(); |
|||
|
|||
@Input() |
|||
public path: string; |
|||
|
|||
@Input() |
|||
public model: QueryModel; |
|||
} |
|||
@ -0,0 +1,123 @@ |
|||
/* |
|||
* Squidex Headless CMS |
|||
* |
|||
* @license |
|||
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. |
|||
*/ |
|||
|
|||
import { of } from 'rxjs'; |
|||
import { IMock, Mock, Times } from 'typemoq'; |
|||
|
|||
import { DateTime, Version } from '@app/framework'; |
|||
|
|||
import { |
|||
createProperties, |
|||
MetaFields, |
|||
RootFieldDto, |
|||
SchemaDetailsDto, |
|||
TableField, |
|||
TableFields, |
|||
UIState |
|||
} from '@app/shared/internal'; |
|||
|
|||
describe('TableFielsd', () => { |
|||
let uiState: IMock<UIState>; |
|||
|
|||
const schema = |
|||
new SchemaDetailsDto({}, '1', 'my-schema', '', {}, |
|||
false, |
|||
false, |
|||
DateTime.now(), 'me', |
|||
DateTime.now(), 'me', |
|||
new Version('1'), |
|||
[ |
|||
new RootFieldDto({}, 1, 'string', createProperties('String'), 'invariant') |
|||
]); |
|||
|
|||
beforeEach(() => { |
|||
uiState = Mock.ofType<UIState>(); |
|||
}); |
|||
|
|||
const INVALID_CONFIGS = [ |
|||
{ case: 'empty', fields: [] }, |
|||
{ case: 'invalid', fields: ['invalid'] } |
|||
]; |
|||
|
|||
INVALID_CONFIGS.forEach(test => { |
|||
it(`should provide default fields if config is ${test.case}`, () => { |
|||
let fields: ReadonlyArray<TableField>; |
|||
let fieldNames: ReadonlyArray<string>; |
|||
|
|||
uiState.setup(x => x.getUser<string[]>('schemas.my-schema.view', [])) |
|||
.returns(() => of(test.fields)); |
|||
|
|||
const tableFields = new TableFields(uiState.object, schema); |
|||
|
|||
tableFields.listFields.subscribe(result => fields = result); |
|||
tableFields.listFieldNames.subscribe(result => fieldNames = result); |
|||
|
|||
expect(fields!).toEqual([ |
|||
MetaFields.lastModifiedByAvatar, |
|||
schema.fields[0], |
|||
MetaFields.statusColor, |
|||
MetaFields.lastModified |
|||
]); |
|||
|
|||
expect(fieldNames!).toEqual([ |
|||
MetaFields.lastModifiedByAvatar, |
|||
schema.fields[0].name, |
|||
MetaFields.statusColor, |
|||
MetaFields.lastModified |
|||
]); |
|||
}); |
|||
}); |
|||
|
|||
INVALID_CONFIGS.forEach(test => { |
|||
it(`should remove ui state if config is ${test.case}`, () => { |
|||
uiState.setup(x => x.getUser<string[]>('schemas.my-schema.view', [])) |
|||
.returns(() => of([])); |
|||
|
|||
const tableFields = new TableFields(uiState.object, schema); |
|||
|
|||
tableFields.updateFields(test.fields, true); |
|||
|
|||
uiState.verify(x => x.removeUser('schemas.my-schema.view'), Times.once()); |
|||
}); |
|||
}); |
|||
|
|||
it('should eliminate invalid fields from the config', () => { |
|||
let fields: ReadonlyArray<TableField>; |
|||
let fieldNames: ReadonlyArray<string>; |
|||
|
|||
const config = ['invalid', MetaFields.version]; |
|||
|
|||
uiState.setup(x => x.getUser<string[]>('schemas.my-schema.view', [])) |
|||
.returns(() => of(config)); |
|||
|
|||
const tableFields = new TableFields(uiState.object, schema); |
|||
|
|||
tableFields.listFields.subscribe(result => fields = result); |
|||
tableFields.listFieldNames.subscribe(result => fieldNames = result); |
|||
|
|||
expect(fields!).toEqual([ |
|||
MetaFields.version |
|||
]); |
|||
|
|||
expect(fieldNames!).toEqual([ |
|||
MetaFields.version |
|||
]); |
|||
}); |
|||
|
|||
it('should update config when fields are saved', () => { |
|||
uiState.setup(x => x.getUser<string[]>('schemas.my-schema.view', [])) |
|||
.returns(() => of([])); |
|||
|
|||
const tableFields = new TableFields(uiState.object, schema); |
|||
|
|||
const config = ['invalid', MetaFields.version]; |
|||
|
|||
tableFields.updateFields(config, true); |
|||
|
|||
uiState.verify(x => x.set('schemas.my-schema.view', [MetaFields.version], true), Times.once()); |
|||
}); |
|||
}); |
|||
@ -0,0 +1,72 @@ |
|||
/* |
|||
* Squidex Headless CMS |
|||
* |
|||
* @license |
|||
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. |
|||
*/ |
|||
|
|||
// tslint:disable: readonly-array
|
|||
|
|||
import { BehaviorSubject, Observable } from 'rxjs'; |
|||
import { take } from 'rxjs/operators'; |
|||
|
|||
import { |
|||
MetaFields, |
|||
SchemaDetailsDto, |
|||
TableField |
|||
} from '../services/schemas.service'; |
|||
|
|||
import { UIState } from './ui.state'; |
|||
|
|||
const META_FIELD_NAMES = Object.values(MetaFields); |
|||
|
|||
export class TableFields { |
|||
private readonly listField$ = new BehaviorSubject<ReadonlyArray<TableField>>([]); |
|||
private readonly listFieldName$ = new BehaviorSubject<ReadonlyArray<string>>([]); |
|||
private readonly settingsKey: string; |
|||
|
|||
public readonly allFields: ReadonlyArray<string>; |
|||
|
|||
public get listFields(): Observable<ReadonlyArray<TableField>> { |
|||
return this.listField$; |
|||
} |
|||
|
|||
public get listFieldNames(): Observable<ReadonlyArray<string>> { |
|||
return this.listFieldName$; |
|||
} |
|||
|
|||
constructor( |
|||
private readonly uiState: UIState, |
|||
private readonly schema: SchemaDetailsDto |
|||
) { |
|||
this.allFields = [...this.schema.contentFields.map(x => x.name), ...META_FIELD_NAMES].sorted(); |
|||
|
|||
this.settingsKey = `schemas.${this.schema.name}.view`; |
|||
|
|||
this.uiState.getUser<string[]>(this.settingsKey, []).pipe(take(1)) |
|||
.subscribe(fieldNames => { |
|||
this.updateFields(fieldNames, false); |
|||
}); |
|||
} |
|||
|
|||
public updateFields(fieldNames: string[], save = true) { |
|||
fieldNames = fieldNames.filter(x => this.allFields.indexOf(x) >= 0); |
|||
|
|||
if (fieldNames.length === 0) { |
|||
fieldNames = this.schema.defaultListFields.map(x => x['name'] || x); |
|||
|
|||
if (save) { |
|||
this.uiState.removeUser(this.settingsKey); |
|||
} |
|||
} else { |
|||
if (save) { |
|||
this.uiState.set(this.settingsKey, fieldNames, true); |
|||
} |
|||
} |
|||
|
|||
const fields: ReadonlyArray<TableField> = fieldNames.map(n => this.schema.fields.find(f => f.name === n) || n); |
|||
|
|||
this.listField$.next(fields); |
|||
this.listFieldName$.next(fieldNames); |
|||
} |
|||
} |
|||
Loading…
Reference in new issue