mirror of https://github.com/Squidex/squidex.git
Sebastian Stehle
6 years ago
committed by
GitHub
GitHub
33 changed files with 833 additions and 295 deletions
@ -0,0 +1,46 @@ |
|||||
|
// ==========================================================================
|
||||
|
// Squidex Headless CMS
|
||||
|
// ==========================================================================
|
||||
|
// Copyright (c) Squidex UG (haftungsbeschraenkt)
|
||||
|
// All rights reserved. Licensed under the MIT license.
|
||||
|
// ==========================================================================
|
||||
|
|
||||
|
using System.Collections.Generic; |
||||
|
using System.Reflection; |
||||
|
|
||||
|
namespace Squidex.Domain.Apps.Core.Schemas |
||||
|
{ |
||||
|
public static class MetaFields |
||||
|
{ |
||||
|
private static readonly HashSet<string> AllList = new HashSet<string>(); |
||||
|
|
||||
|
public static ISet<string> All |
||||
|
{ |
||||
|
get { return AllList; } |
||||
|
} |
||||
|
|
||||
|
public static readonly string Id = "meta.id"; |
||||
|
public static readonly string Created = "meta.created"; |
||||
|
public static readonly string CreatedByAvatar = "meta.createdBy.avatar"; |
||||
|
public static readonly string CreatedByName = "meta.createdBy.name"; |
||||
|
public static readonly string LastModified = "meta.lastModified"; |
||||
|
public static readonly string LastModifiedByAvatar = "meta.lastModifiedBy.avatar"; |
||||
|
public static readonly string LastModifiedByName = "meta.lastModifiedBy.name"; |
||||
|
public static readonly string Status = "meta.status"; |
||||
|
public static readonly string StatusColor = "meta.status.color"; |
||||
|
public static readonly string Version = "meta.version"; |
||||
|
|
||||
|
static MetaFields() |
||||
|
{ |
||||
|
foreach (var field in typeof(MetaFields).GetFields(BindingFlags.Public | BindingFlags.Static)) |
||||
|
{ |
||||
|
if (field.FieldType == typeof(string)) |
||||
|
{ |
||||
|
var value = field.GetValue(null) as string; |
||||
|
|
||||
|
AllList.Add(value!); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,109 @@ |
|||||
|
/* |
||||
|
* Squidex Headless CMS |
||||
|
* |
||||
|
* @license |
||||
|
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. |
||||
|
*/ |
||||
|
|
||||
|
import { Directive, ElementRef, Input, OnChanges, Pipe, PipeTransform, Renderer2 } from '@angular/core'; |
||||
|
|
||||
|
import { |
||||
|
MetaFields, |
||||
|
RootFieldDto, |
||||
|
SchemaDetailsDto, |
||||
|
TableField, |
||||
|
Types |
||||
|
} from '@app/shared'; |
||||
|
|
||||
|
export function getTableWidth(fields: ReadonlyArray<TableField>) { |
||||
|
let result = 0; |
||||
|
|
||||
|
for (let field of fields) { |
||||
|
result += getCellWidth(field); |
||||
|
} |
||||
|
|
||||
|
return result; |
||||
|
} |
||||
|
|
||||
|
export function getCellWidth(field: TableField) { |
||||
|
if (Types.is(field, RootFieldDto)) { |
||||
|
return 220; |
||||
|
} else { |
||||
|
switch (field) { |
||||
|
case MetaFields.id: |
||||
|
return 280; |
||||
|
case MetaFields.created: |
||||
|
return 150; |
||||
|
case MetaFields.createdByAvatar: |
||||
|
return 55; |
||||
|
case MetaFields.createdByName: |
||||
|
return 150; |
||||
|
case MetaFields.lastModified: |
||||
|
return 150; |
||||
|
case MetaFields.lastModifiedByAvatar: |
||||
|
return 55; |
||||
|
case MetaFields.lastModifiedByName: |
||||
|
return 150; |
||||
|
case MetaFields.status: |
||||
|
return 160; |
||||
|
case MetaFields.statusColor: |
||||
|
return 50; |
||||
|
case MetaFields.version: |
||||
|
return 80; |
||||
|
} |
||||
|
|
||||
|
return 0; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@Pipe({ |
||||
|
name: 'sqxContentListWidth', |
||||
|
pure: true |
||||
|
}) |
||||
|
export class ContentListWidthPipe implements PipeTransform { |
||||
|
public transform(value: SchemaDetailsDto) { |
||||
|
if (!value) { |
||||
|
return 0; |
||||
|
} |
||||
|
|
||||
|
return `${getTableWidth(value.referenceFields) + 100}px`; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@Pipe({ |
||||
|
name: 'sqxContentReferencesWidth', |
||||
|
pure: true |
||||
|
}) |
||||
|
export class ContentReferencesWidthPipe implements PipeTransform { |
||||
|
public transform(value: SchemaDetailsDto) { |
||||
|
if (!value) { |
||||
|
return 0; |
||||
|
} |
||||
|
|
||||
|
return `${getTableWidth(value.referenceFields) + 300}px`; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@Directive({ |
||||
|
selector: '[sqxContentListCell]' |
||||
|
}) |
||||
|
export class ContentListCellDirective implements OnChanges { |
||||
|
@Input('sqxContentListCell') |
||||
|
public field: TableField; |
||||
|
|
||||
|
constructor( |
||||
|
private readonly element: ElementRef, |
||||
|
private readonly renderer: Renderer2 |
||||
|
) { |
||||
|
} |
||||
|
|
||||
|
public ngOnChanges() { |
||||
|
if (Types.isString(this.field) && this.field) { |
||||
|
const width = `${getCellWidth(this.field)}px`; |
||||
|
|
||||
|
this.renderer.setStyle(this.element.nativeElement, 'min-width', width); |
||||
|
this.renderer.setStyle(this.element.nativeElement, 'max-width', width); |
||||
|
this.renderer.setStyle(this.element.nativeElement, 'width', width); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,132 @@ |
|||||
|
/* |
||||
|
* Squidex Headless CMS |
||||
|
* |
||||
|
* @license |
||||
|
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. |
||||
|
*/ |
||||
|
|
||||
|
import { ChangeDetectionStrategy, Component, Input, OnChanges } from '@angular/core'; |
||||
|
import { FormGroup } from '@angular/forms'; |
||||
|
|
||||
|
import { |
||||
|
ContentDto, |
||||
|
getContentValue, |
||||
|
LanguageDto, |
||||
|
MetaFields, |
||||
|
RootFieldDto, |
||||
|
TableField, |
||||
|
Types |
||||
|
} from '@app/shared'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'sqx-content-list-field', |
||||
|
template: ` |
||||
|
<ng-container [ngSwitch]="fieldName"> |
||||
|
<ng-container *ngSwitchCase="metaFields.id"> |
||||
|
<small class="truncate">{{content.id}}</small> |
||||
|
</ng-container> |
||||
|
<ng-container *ngSwitchCase="metaFields.created"> |
||||
|
<small class="truncate">{{content.created | sqxFromNow}}</small> |
||||
|
</ng-container> |
||||
|
<ng-container *ngSwitchCase="metaFields.createdByAvatar"> |
||||
|
<img class="user-picture" title="{{content.createdBy | sqxUserNameRef}}" [attr.src]="content.createdBy | sqxUserPictureRef" /> |
||||
|
</ng-container> |
||||
|
<ng-container *ngSwitchCase="metaFields.createdByName"> |
||||
|
<small class="truncate">{{content.createdBy | sqxUserNameRef}}</small> |
||||
|
</ng-container> |
||||
|
<ng-container *ngSwitchCase="metaFields.lastModified"> |
||||
|
<small class="truncate">{{content.lastModified | sqxFromNow}}</small> |
||||
|
</ng-container> |
||||
|
<ng-container *ngSwitchCase="metaFields.lastModifiedByAvatar"> |
||||
|
<img class="user-picture" title="{{content.lastModifiedBy | sqxUserNameRef}}" [attr.src]="content.lastModifiedBy | sqxUserPictureRef" /> |
||||
|
</ng-container> |
||||
|
<ng-container *ngSwitchCase="metaFields.lastModifiedByName"> |
||||
|
<small class="truncate">{{content.lastModifiedBy | sqxUserNameRef}}</small> |
||||
|
</ng-container> |
||||
|
<ng-container *ngSwitchCase="metaFields.status"> |
||||
|
<span class="truncate"> |
||||
|
<sqx-content-status |
||||
|
[status]="content.status" |
||||
|
[statusColor]="content.statusColor" |
||||
|
[scheduledTo]="content.scheduleJob?.status" |
||||
|
[scheduledAt]="content.scheduleJob?.dueTime" |
||||
|
[isPending]="content.isPending"> |
||||
|
</sqx-content-status> |
||||
|
|
||||
|
{{content.status}} |
||||
|
</span> |
||||
|
</ng-container> |
||||
|
<ng-container *ngSwitchCase="metaFields.statusColor"> |
||||
|
<sqx-content-status |
||||
|
[status]="content.status" |
||||
|
[statusColor]="content.statusColor" |
||||
|
[scheduledTo]="content.scheduleJob?.status" |
||||
|
[scheduledAt]="content.scheduleJob?.dueTime" |
||||
|
[isPending]="content.isPending"> |
||||
|
</sqx-content-status> |
||||
|
</ng-container> |
||||
|
<ng-container *ngSwitchCase="metaFields.version"> |
||||
|
<small class="truncate">{{content.version.value}}</small> |
||||
|
</ng-container> |
||||
|
<ng-container *ngSwitchDefault> |
||||
|
<ng-container *ngIf="isInlineEditable && patchAllowed; else displayTemplate"> |
||||
|
<sqx-content-value-editor [form]="patchForm" [field]="field"></sqx-content-value-editor> |
||||
|
</ng-container> |
||||
|
|
||||
|
<ng-template #displayTemplate> |
||||
|
<sqx-content-value [value]="value"></sqx-content-value> |
||||
|
</ng-template> |
||||
|
</ng-container> |
||||
|
</ng-container>`, |
||||
|
changeDetection: ChangeDetectionStrategy.OnPush |
||||
|
}) |
||||
|
export class ContentListFieldComponent implements OnChanges { |
||||
|
@Input() |
||||
|
public field: TableField; |
||||
|
|
||||
|
@Input() |
||||
|
public content: ContentDto; |
||||
|
|
||||
|
@Input() |
||||
|
public patchAllowed: boolean; |
||||
|
|
||||
|
@Input() |
||||
|
public patchForm: FormGroup; |
||||
|
|
||||
|
@Input() |
||||
|
public language: LanguageDto; |
||||
|
|
||||
|
public value: any; |
||||
|
|
||||
|
public ngOnChanges() { |
||||
|
this.reset(); |
||||
|
} |
||||
|
|
||||
|
public reset() { |
||||
|
if (Types.is(this.field, RootFieldDto)) { |
||||
|
const { value, formatted } = getContentValue(this.content, this.language, this.field); |
||||
|
|
||||
|
if (this.patchForm) { |
||||
|
const formControl = this.patchForm.controls[this.field.name]; |
||||
|
|
||||
|
if (formControl) { |
||||
|
formControl.setValue(value); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
this.value = formatted; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
public get metaFields() { |
||||
|
return MetaFields; |
||||
|
} |
||||
|
|
||||
|
public get isInlineEditable() { |
||||
|
return Types.is(this.field, RootFieldDto) ? this.field.isInlineEditable : false; |
||||
|
} |
||||
|
|
||||
|
public get fieldName() { |
||||
|
return Types.is(this.field, RootFieldDto) ? this.field.name : this.field; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,115 @@ |
|||||
|
/* |
||||
|
* Squidex Headless CMS |
||||
|
* |
||||
|
* @license |
||||
|
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. |
||||
|
*/ |
||||
|
|
||||
|
import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core'; |
||||
|
|
||||
|
import { |
||||
|
LanguageDto, |
||||
|
MetaFields, |
||||
|
Query, |
||||
|
RootFieldDto, |
||||
|
TableField, |
||||
|
Types |
||||
|
} from '@app/shared'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'sqx-content-list-header', |
||||
|
template: ` |
||||
|
<ng-container [ngSwitch]="fieldName"> |
||||
|
<ng-container *ngSwitchCase="metaFields.id"> |
||||
|
<sqx-table-header text="Id"></sqx-table-header> |
||||
|
</ng-container> |
||||
|
<ng-container *ngSwitchCase="metaFields.created"> |
||||
|
<sqx-table-header text="Created" |
||||
|
[sortable]="true" |
||||
|
[fieldPath]="'created'" |
||||
|
[query]="query" |
||||
|
(queryChange)="queryChange.emit($event)" |
||||
|
[language]="language"> |
||||
|
</sqx-table-header> |
||||
|
</ng-container> |
||||
|
<ng-container *ngSwitchCase="metaFields.createdByAvatar"> |
||||
|
<sqx-table-header text="By"></sqx-table-header> |
||||
|
</ng-container> |
||||
|
<ng-container *ngSwitchCase="metaFields.createdByName"> |
||||
|
<sqx-table-header text="Created By"></sqx-table-header> |
||||
|
</ng-container> |
||||
|
<ng-container *ngSwitchCase="metaFields.lastModified"> |
||||
|
<sqx-table-header text="Updated" |
||||
|
[sortable]="true" |
||||
|
[fieldPath]="'lastModified'" |
||||
|
[query]="query" |
||||
|
(queryChange)="queryChange.emit($event)" |
||||
|
[language]="language"> |
||||
|
</sqx-table-header> |
||||
|
</ng-container> |
||||
|
<ng-container *ngSwitchCase="metaFields.lastModifiedByAvatar"> |
||||
|
<sqx-table-header text="By"></sqx-table-header> |
||||
|
</ng-container> |
||||
|
<ng-container *ngSwitchCase="metaFields.lastModifiedByName"> |
||||
|
<sqx-table-header text="Modified By"></sqx-table-header> |
||||
|
</ng-container> |
||||
|
<ng-container *ngSwitchCase="metaFields.status"> |
||||
|
<sqx-table-header text="Status"></sqx-table-header> |
||||
|
</ng-container> |
||||
|
<ng-container *ngSwitchCase="metaFields.statusColor"> |
||||
|
<sqx-table-header text="Status"></sqx-table-header> |
||||
|
</ng-container> |
||||
|
<ng-container *ngSwitchCase="metaFields.version"> |
||||
|
<sqx-table-header text="Version"></sqx-table-header> |
||||
|
</ng-container> |
||||
|
<ng-container *ngSwitchDefault> |
||||
|
<sqx-table-header [text]="fieldDisplayName" |
||||
|
[sortable]="isSortable" |
||||
|
[fieldPath]="fieldPath" |
||||
|
[query]="query" |
||||
|
(queryChange)="queryChange.emit($event)" |
||||
|
[language]="language"> |
||||
|
</sqx-table-header> |
||||
|
</ng-container> |
||||
|
</ng-container>`, |
||||
|
changeDetection: ChangeDetectionStrategy.OnPush |
||||
|
}) |
||||
|
export class ContentListHeaderComponent { |
||||
|
@Input() |
||||
|
public field: TableField; |
||||
|
|
||||
|
@Output() |
||||
|
public queryChange = new EventEmitter<Query>(); |
||||
|
|
||||
|
@Input() |
||||
|
public query: Query; |
||||
|
|
||||
|
@Input() |
||||
|
public language: LanguageDto; |
||||
|
|
||||
|
public get metaFields() { |
||||
|
return MetaFields; |
||||
|
} |
||||
|
|
||||
|
public get isSortable() { |
||||
|
return Types.is(this.field, RootFieldDto) ? this.field.properties.isSortable : false; |
||||
|
} |
||||
|
|
||||
|
public get fieldName() { |
||||
|
return Types.is(this.field, RootFieldDto) ? this.field.name : this.field; |
||||
|
} |
||||
|
|
||||
|
public get fieldDisplayName() { |
||||
|
return Types.is(this.field, RootFieldDto) ? this.field.displayName : ''; |
||||
|
} |
||||
|
|
||||
|
public get fieldPath() { |
||||
|
if (Types.isString(this.field)) { |
||||
|
return this.field; |
||||
|
} else if (this.field.isLocalizable && this.language) { |
||||
|
return `data.${this.field.name}.${this.language.iso2Code}`; |
||||
|
} else { |
||||
|
return `data.${this.field.name}.iv`; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -1,2 +1,19 @@ |
|||||
@import '_vars'; |
@import '_vars'; |
||||
@import '_mixins'; |
@import '_mixins'; |
||||
|
|
||||
|
.inline-edit { |
||||
|
& { |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.edit-menu { |
||||
|
@include absolute(.75rem, auto, auto, .25rem); |
||||
|
border-right: 1px solid $color-border; |
||||
|
min-height: 2.4rem; |
||||
|
max-height: 2.4rem; |
||||
|
padding-right: 1rem; |
||||
|
white-space: nowrap; |
||||
|
background: $color-table-background; |
||||
|
z-index: 100; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,64 @@ |
|||||
|
/* |
||||
|
* Squidex Headless CMS |
||||
|
* |
||||
|
* @license |
||||
|
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. |
||||
|
*/ |
||||
|
|
||||
|
describe('ArrayExtensions', () => { |
||||
|
it('should return same array when replaying by property with null value', () => { |
||||
|
const array_0 = [{ id: 1 }, { id: 2 }]; |
||||
|
const array_1 = array_0.replaceBy('id', null!); |
||||
|
|
||||
|
expect(array_1).toBe(array_0); |
||||
|
}); |
||||
|
|
||||
|
it('should return new array when replaying by property', () => { |
||||
|
const array_0 = [{ id: 1, v: 10 }, { id: 2, v: 20 }]; |
||||
|
const array_1 = array_0.replaceBy('id', { id: 1, v: 30 }); |
||||
|
|
||||
|
expect(array_1).toEqual([{ id: 1, v: 30 }, { id: 2, v: 20 }]); |
||||
|
}); |
||||
|
|
||||
|
it('should return same array when removing by property with null value', () => { |
||||
|
const array_0 = [{ id: 1 }, { id: 2 }]; |
||||
|
const array_1 = array_0.removeBy('id', null!); |
||||
|
|
||||
|
expect(array_1).toBe(array_0); |
||||
|
}); |
||||
|
|
||||
|
it('should return new array when removing by property', () => { |
||||
|
const array_0 = [{ id: 1 }, { id: 2 }]; |
||||
|
const array_1 = array_0.removeBy('id', { id: 1 }); |
||||
|
|
||||
|
expect(array_1).toEqual([{ id: 2 }]); |
||||
|
}); |
||||
|
|
||||
|
it('should return same array when removing with null value', () => { |
||||
|
const array_0 = [1, 2, 3]; |
||||
|
const array_1 = array_0.removed(null!); |
||||
|
|
||||
|
expect(array_1).toBe(array_0); |
||||
|
}); |
||||
|
|
||||
|
it('should return new array when removing', () => { |
||||
|
const array_0 = [1, 2, 3]; |
||||
|
const array_1 = array_0.removed(2); |
||||
|
|
||||
|
expect(array_1).toEqual([1, 3]); |
||||
|
}); |
||||
|
|
||||
|
it('should sort by value', () => { |
||||
|
const array_0 = [3, 1, 2]; |
||||
|
const array_1 = array_0.sorted(); |
||||
|
|
||||
|
expect(array_1).toEqual([1, 2, 3]); |
||||
|
}); |
||||
|
|
||||
|
it('should sort by property', () => { |
||||
|
const array_0 = [{ id: 'C' }, { id: 'b' }, { id: 'A' }]; |
||||
|
const array_1 = array_0.sortedByString(x => x.id); |
||||
|
|
||||
|
expect(array_1).toEqual([{ id: 'A' }, { id: 'b' }, { id: 'C' }]); |
||||
|
}); |
||||
|
}); |
||||
@ -0,0 +1,73 @@ |
|||||
|
|
||||
|
/* |
||||
|
* Squidex Headless CMS |
||||
|
* |
||||
|
* @license |
||||
|
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. |
||||
|
*/ |
||||
|
|
||||
|
// tslint:disable: readonly-array
|
||||
|
|
||||
|
interface ReadonlyArray<T> { |
||||
|
replaceBy(field: string, value: T): ReadonlyArray<T>; |
||||
|
|
||||
|
removeBy(field: string, value: T): ReadonlyArray<T>; |
||||
|
|
||||
|
removed(value?: T): ReadonlyArray<T>; |
||||
|
|
||||
|
sorted(): ReadonlyArray<T>; |
||||
|
|
||||
|
sortedByString(selector: (value: T) => string): ReadonlyArray<T>; |
||||
|
} |
||||
|
|
||||
|
interface Array<T> { |
||||
|
replaceBy(field: string, value: T): Array<T>; |
||||
|
|
||||
|
removeBy(field: string, value: T): Array<T>; |
||||
|
|
||||
|
removed(value?: T): Array<T>; |
||||
|
|
||||
|
sorted(): Array<T>; |
||||
|
|
||||
|
sortedByString(selector: (value: T) => string): Array<T>; |
||||
|
} |
||||
|
|
||||
|
Array.prototype.replaceBy = function<T>(field: string, value: T) { |
||||
|
if (!value) { |
||||
|
return this; |
||||
|
} |
||||
|
|
||||
|
return this.map((v: T) => v[field] === value[field] ? value : v); |
||||
|
}; |
||||
|
|
||||
|
Array.prototype.removeBy = function<T>(field: string, value: T) { |
||||
|
if (!value) { |
||||
|
return this; |
||||
|
} |
||||
|
|
||||
|
return this.filter((v: T) => v[field] !== value[field]); |
||||
|
}; |
||||
|
|
||||
|
Array.prototype.removed = function<T>(value?: T) { |
||||
|
if (!value) { |
||||
|
return this; |
||||
|
} |
||||
|
|
||||
|
return this.filter((v: T) => v !== value); |
||||
|
}; |
||||
|
|
||||
|
Array.prototype.sorted = function() { |
||||
|
const copy = [...this]; |
||||
|
|
||||
|
copy.sort(); |
||||
|
|
||||
|
return copy; |
||||
|
}; |
||||
|
|
||||
|
Array.prototype.sortedByString = function<T>(selector: (value: T) => string) { |
||||
|
const copy = [...this]; |
||||
|
|
||||
|
copy.sort((a, b) => selector(a).localeCompare(selector(b), undefined, { sensitivity: 'base' })); |
||||
|
|
||||
|
return copy; |
||||
|
}; |
||||
@ -0,0 +1,10 @@ |
|||||
|
/* |
||||
|
* Squidex Headless CMS |
||||
|
* |
||||
|
* @license |
||||
|
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. |
||||
|
*/ |
||||
|
|
||||
|
export function compareStrings(a: string, b: string) { |
||||
|
return a.localeCompare(b, undefined, { sensitivity: 'base' }); |
||||
|
} |
||||
Loading…
Reference in new issue