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
committed by
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