mirror of https://github.com/Squidex/squidex.git
Sebastian
6 years ago
37 changed files with 678 additions and 280 deletions
@ -0,0 +1,100 @@ |
|||||
|
/* |
||||
|
* Squidex Headless CMS |
||||
|
* |
||||
|
* @license |
||||
|
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. |
||||
|
*/ |
||||
|
|
||||
|
import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core'; |
||||
|
|
||||
|
import { |
||||
|
AppLanguageDto, |
||||
|
ContentDto, |
||||
|
getContentValue, |
||||
|
RootFieldDto |
||||
|
} from '@app/shared'; |
||||
|
|
||||
|
/* tslint:disable:component-selector */ |
||||
|
|
||||
|
@Component({ |
||||
|
selector: '[sqxContentSelectorItem]', |
||||
|
template: ` |
||||
|
<tr (click)="toggle()"> |
||||
|
<td class="cell-select"> |
||||
|
<input type="checkbox" class="form-check" |
||||
|
[disabled]="!selectable" |
||||
|
[ngModel]="selected || !selectable" |
||||
|
(ngModelChange)="emitSelectedChange($event)" /> |
||||
|
</td> |
||||
|
|
||||
|
<td class="cell-user"> |
||||
|
<img class="user-picture" title="{{content.lastModifiedBy | sqxUserNameRef}}" [attr.src]="content.lastModifiedBy | sqxUserPictureRef" /> |
||||
|
</td> |
||||
|
|
||||
|
<td class="cell-auto cell-content" *ngFor="let value of values"> |
||||
|
<sqx-content-value [value]="value"></sqx-content-value> |
||||
|
</td> |
||||
|
|
||||
|
<td class="cell-time"> |
||||
|
<sqx-content-status |
||||
|
[status]="content.status" |
||||
|
[statusColor]="content.statusColor" |
||||
|
[scheduledTo]="content.scheduleJob?.status" |
||||
|
[scheduledAt]="content.scheduleJob?.dueTime" |
||||
|
[isPending]="content.isPending"> |
||||
|
</sqx-content-status> |
||||
|
|
||||
|
<small class="item-modified">{{content.lastModified | sqxFromNow}}</small> |
||||
|
</td> |
||||
|
</tr> |
||||
|
<tr class="spacer"></tr> |
||||
|
`,
|
||||
|
changeDetection: ChangeDetectionStrategy.OnPush |
||||
|
}) |
||||
|
export class ContentSelectorItemComponent implements OnChanges { |
||||
|
@Output() |
||||
|
public selectedChange = new EventEmitter<boolean>(); |
||||
|
|
||||
|
@Input() |
||||
|
public selected = false; |
||||
|
|
||||
|
@Input() |
||||
|
public selectable = true; |
||||
|
|
||||
|
@Input() |
||||
|
public language: AppLanguageDto; |
||||
|
|
||||
|
@Input() |
||||
|
public fields: RootFieldDto[]; |
||||
|
|
||||
|
@Input('sqxContentSelectorItem') |
||||
|
public content: ContentDto; |
||||
|
|
||||
|
public values: any[] = []; |
||||
|
|
||||
|
public ngOnChanges(changes: SimpleChanges) { |
||||
|
if (changes['content'] || changes['language']) { |
||||
|
this.updateValues(); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
public toggle() { |
||||
|
if (this.selectable) { |
||||
|
this.emitSelectedChange(!this.selected); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
public emitSelectedChange(isSelected: boolean) { |
||||
|
this.selectedChange.emit(isSelected); |
||||
|
} |
||||
|
|
||||
|
private updateValues() { |
||||
|
this.values = []; |
||||
|
|
||||
|
for (let field of this.fields) { |
||||
|
const { formatted } = getContentValue(this.content, this.language, field); |
||||
|
|
||||
|
this.values.push(formatted); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,24 @@ |
|||||
|
@import '_vars'; |
||||
|
@import '_mixins'; |
||||
|
|
||||
|
.reference-edit { |
||||
|
& { |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
&:hover { |
||||
|
.reference-menu { |
||||
|
display: block; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.reference-menu { |
||||
|
@include absolute(0, -.25rem, auto, auto); |
||||
|
display: none; |
||||
|
padding-left: 2rem; |
||||
|
min-height: 2.4rem; |
||||
|
max-height: 2.4rem; |
||||
|
white-space: nowrap; |
||||
|
background: $color-table-background; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,104 @@ |
|||||
|
/* |
||||
|
* Squidex Headless CMS |
||||
|
* |
||||
|
* @license |
||||
|
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. |
||||
|
*/ |
||||
|
|
||||
|
import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core'; |
||||
|
|
||||
|
import { |
||||
|
AppLanguageDto, |
||||
|
ContentDto, |
||||
|
getContentValue |
||||
|
} from '@app/shared'; |
||||
|
|
||||
|
/* tslint:disable:component-selector */ |
||||
|
|
||||
|
@Component({ |
||||
|
selector: '[sqxReferenceItem]', |
||||
|
styleUrls: ['./reference-item.component.scss'], |
||||
|
template: ` |
||||
|
<tr> |
||||
|
<td class="cell-select"> |
||||
|
<i class="icon-drag2 drag-handle"></i> |
||||
|
</td> |
||||
|
|
||||
|
<td class="cell-user" *ngIf="!isCompact"> |
||||
|
<img class="user-picture" title="{{content.lastModifiedBy | sqxUserNameRef}}" [attr.src]="content.lastModifiedBy | sqxUserPictureRef" /> |
||||
|
</td> |
||||
|
|
||||
|
<td class="cell-auto cell-content" *ngFor="let value of values"> |
||||
|
<sqx-content-value [value]="value"></sqx-content-value> |
||||
|
</td> |
||||
|
|
||||
|
<td class="cell-time" *ngIf="!isCompact"> |
||||
|
<span class="badge badge-pill truncate badge-primary">{{content.schemaDisplayName}}</span> |
||||
|
</td> |
||||
|
|
||||
|
<td class="cell-actions"> |
||||
|
<div class="reference-edit"> |
||||
|
<button type="button" class="btn btn-text-secondary"> |
||||
|
<i class="icon-dots"></i> |
||||
|
</button> |
||||
|
|
||||
|
<div class="reference-menu"> |
||||
|
<a class="btn btn-text-secondary" [routerLink]="['../..', content.schemaName, content.id]"> |
||||
|
<i class="icon-pencil"></i> |
||||
|
</a> |
||||
|
|
||||
|
<button type="button" class="btn btn-text-secondary" (click)="emitDelete()"> |
||||
|
<i class="icon-close"></i> |
||||
|
</button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</td> |
||||
|
</tr> |
||||
|
<tr class="spacer"></tr> |
||||
|
`,
|
||||
|
changeDetection: ChangeDetectionStrategy.OnPush |
||||
|
}) |
||||
|
export class ReferenceItemComponent implements OnChanges { |
||||
|
@Output() |
||||
|
public delete = new EventEmitter(); |
||||
|
|
||||
|
@Input() |
||||
|
public language: AppLanguageDto; |
||||
|
|
||||
|
@Input() |
||||
|
public isCompact = false; |
||||
|
|
||||
|
@Input() |
||||
|
public columnCount = 0; |
||||
|
|
||||
|
@Input('sqxReferenceItem') |
||||
|
public content: ContentDto; |
||||
|
|
||||
|
public values: any[] = []; |
||||
|
|
||||
|
public ngOnChanges(changes: SimpleChanges) { |
||||
|
if (changes['content'] || changes['language']) { |
||||
|
this.updateValues(); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
public emitDelete() { |
||||
|
this.delete.emit(); |
||||
|
} |
||||
|
|
||||
|
private updateValues() { |
||||
|
this.values = []; |
||||
|
|
||||
|
for (let i = 0; i < this.columnCount; i++) { |
||||
|
const field = this.content.referenceFields[i]; |
||||
|
|
||||
|
if (field) { |
||||
|
const { formatted } = getContentValue(this.content, this.language, field); |
||||
|
|
||||
|
this.values.push(formatted); |
||||
|
} else { |
||||
|
this.values.push(''); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
Loading…
Reference in new issue