mirror of https://github.com/Squidex/squidex.git
Browse Source
* Expert mode. * More improvements to the grid. * Allow wider cards. * Build fixes.pull/542/head
Sebastian Stehle
6 years ago
committed by
GitHub
GitHub
26 changed files with 222 additions and 52 deletions
@ -0,0 +1,9 @@ |
|||||
|
<div class="card card"> |
||||
|
<div class="card-header">{{options?.name}}</div> |
||||
|
<div class="card-body"> |
||||
|
<div class="aggregation"> |
||||
|
<div class="aggregation-label">Number of items</div> |
||||
|
<div class="aggregation-value">{{itemCount}}</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
@ -0,0 +1,58 @@ |
|||||
|
/* |
||||
|
* Squidex Headless CMS |
||||
|
* |
||||
|
* @license |
||||
|
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. |
||||
|
*/ |
||||
|
|
||||
|
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnInit } from '@angular/core'; |
||||
|
import { AppDto, ContentsService, fadeAnimation, Types } from '@app/shared'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'sqx-content-summary-card', |
||||
|
styleUrls: ['./content-summary-card.component.scss'], |
||||
|
templateUrl: './content-summary-card.component.html', |
||||
|
animations: [ |
||||
|
fadeAnimation |
||||
|
], |
||||
|
changeDetection: ChangeDetectionStrategy.OnPush |
||||
|
}) |
||||
|
export class ContentSummaryCardComponent implements OnInit { |
||||
|
@Input() |
||||
|
public app: AppDto; |
||||
|
|
||||
|
@Input() |
||||
|
public options: any; |
||||
|
|
||||
|
public itemCount = 0; |
||||
|
|
||||
|
constructor( |
||||
|
private readonly changeDetector: ChangeDetectorRef, |
||||
|
private readonly contentsService: ContentsService |
||||
|
) { |
||||
|
} |
||||
|
|
||||
|
public ngOnInit() { |
||||
|
if (!Types.isString(this.options?.schema)) { |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
let query = this.options?.query; |
||||
|
|
||||
|
if (!Types.isObject(query)) { |
||||
|
query = {}; |
||||
|
} |
||||
|
|
||||
|
query.take = 0; |
||||
|
|
||||
|
this.contentsService.getContents(this.app.name, this.options.schema, { query }) |
||||
|
.subscribe(dto => { |
||||
|
this.itemCount = dto.total; |
||||
|
|
||||
|
this.changeDetector.detectChanges(); |
||||
|
}, |
||||
|
() => { |
||||
|
this.itemCount = 0; |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,6 @@ |
|||||
|
<div class="card card-lg"> |
||||
|
<div class="card-header">{{options?.name}}</div> |
||||
|
<div class="card-body"> |
||||
|
<iframe #iframe scrolling="no" width="100%" height="100%"></iframe> |
||||
|
</div> |
||||
|
</div> |
||||
@ -0,0 +1,8 @@ |
|||||
|
iframe { |
||||
|
@include absolute(0, 0, 0, 0); |
||||
|
border: 0; |
||||
|
} |
||||
|
|
||||
|
.card-body { |
||||
|
position: relative; |
||||
|
} |
||||
@ -0,0 +1,33 @@ |
|||||
|
/* |
||||
|
* Squidex Headless CMS |
||||
|
* |
||||
|
* @license |
||||
|
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. |
||||
|
*/ |
||||
|
|
||||
|
import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, Input, ViewChild } from '@angular/core'; |
||||
|
import { AppDto, fadeAnimation } from '@app/shared'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'sqx-iframe-card', |
||||
|
styleUrls: ['./iframe-card.component.scss'], |
||||
|
templateUrl: './iframe-card.component.html', |
||||
|
animations: [ |
||||
|
fadeAnimation |
||||
|
], |
||||
|
changeDetection: ChangeDetectionStrategy.OnPush |
||||
|
}) |
||||
|
export class IFrameCardComponent implements AfterViewInit { |
||||
|
@ViewChild('iframe', { static: false }) |
||||
|
public iframe: ElementRef<HTMLIFrameElement>; |
||||
|
|
||||
|
@Input() |
||||
|
public app: AppDto; |
||||
|
|
||||
|
@Input() |
||||
|
public options: any; |
||||
|
|
||||
|
public ngAfterViewInit() { |
||||
|
this.iframe.nativeElement.src = this.options?.src; |
||||
|
} |
||||
|
} |
||||
Loading…
Reference in new issue