mirror of https://github.com/Squidex/squidex.git
Sebastian Stehle
8 years ago
51 changed files with 688 additions and 789 deletions
@ -1,70 +1,62 @@ |
|||
<sqx-title message="{app} | Assets" parameter1="app" [value1]="ctx.appName"></sqx-title> |
|||
|
|||
<sqx-panel desiredWidth="60rem"> |
|||
<div class="panel-header"> |
|||
<div class="panel-title-row"> |
|||
<div class="float-right"> |
|||
<button class="btn btn-link btn-secondary" (click)="load(true)" title="Refresh Assets (CTRL + SHIFT + R)"> |
|||
<i class="icon-reset"></i> Refresh |
|||
</button> |
|||
|
|||
<sqx-shortcut keys="ctrl+shift+r" (trigger)="load(true)"></sqx-shortcut> |
|||
<sqx-shortcut keys="ctrl+shift+f" (trigger)="inputFind.focus()"></sqx-shortcut> |
|||
|
|||
<form class="form-inline" (ngSubmit)="search()"> |
|||
<input class="form-control" #inputFind [formControl]="assetsFilter" placeholder="Search for assets" /> |
|||
</form> |
|||
<ng-container title> |
|||
Assets |
|||
</ng-container> |
|||
|
|||
<ng-container header> |
|||
<button class="btn btn-link btn-secondary" (click)="load(true)" title="Refresh Assets (CTRL + SHIFT + R)"> |
|||
<i class="icon-reset"></i> Refresh |
|||
</button> |
|||
|
|||
<sqx-shortcut keys="ctrl+shift+r" (trigger)="load(true)"></sqx-shortcut> |
|||
<sqx-shortcut keys="ctrl+shift+f" (trigger)="inputFind.focus()"></sqx-shortcut> |
|||
|
|||
<form class="form-inline" (ngSubmit)="search()"> |
|||
<input class="form-control" #inputFind [formControl]="assetsFilter" placeholder="Search for assets" /> |
|||
</form> |
|||
</ng-container> |
|||
|
|||
<ng-container content> |
|||
<div class="file-drop" (sqxFileDrop)="addFiles($event)"> |
|||
<h3 class="file-drop-header">Drop files here to upload</h3> |
|||
|
|||
<div class="file-drop-or">or</div> |
|||
|
|||
<div class="file-drop-button"> |
|||
<span class="btn btn-success" (click)="fileInput.click()"> |
|||
<span>Select File(s)</span> |
|||
|
|||
<input class="file-drop-button-input" type="file" (change)="addFiles($event.target.files)" #fileInput multiple /> |
|||
</span> |
|||
</div> |
|||
|
|||
<h3 class="panel-title">Assets</h3> |
|||
<div class="file-drop-info">Drop file on existing item to replace the asset with a newer version.</div> |
|||
</div> |
|||
|
|||
<a class="panel-close" sqxParentLink isLazyLoaded="true"> |
|||
<i class="icon-close"></i> |
|||
</a> |
|||
</div> |
|||
|
|||
<div class="panel-main"> |
|||
<div class="panel-content panel-content-scroll"> |
|||
<div class="file-drop" (sqxFileDrop)="addFiles($event)"> |
|||
<h3 class="file-drop-header">Drop files here to upload</h3> |
|||
|
|||
<div class="file-drop-or">or</div> |
|||
|
|||
<div class="file-drop-button"> |
|||
<span class="btn btn-success" (click)="fileInput.click()"> |
|||
<span>Select File(s)</span> |
|||
|
|||
<input class="file-drop-button-input" type="file" (change)="addFiles($event.target.files)" #fileInput multiple /> |
|||
</span> |
|||
</div> |
|||
|
|||
<div class="file-drop-info">Drop file on existing item to replace the asset with a newer version.</div> |
|||
</div> |
|||
|
|||
<div class="row"> |
|||
<sqx-asset class="col-3" *ngFor="let file of newFiles" [initFile]="file" |
|||
(failed)="onAssetFailed(file)" |
|||
(loaded)="onAssetLoaded(file, $event)"> |
|||
</sqx-asset> |
|||
<sqx-asset class="col-3" *ngFor="let asset of assetsItems" [asset]="asset" |
|||
(deleting)="onAssetDeleting($event)" |
|||
(updated)="onAssetUpdated($event)"> |
|||
</sqx-asset> |
|||
</div> |
|||
<div class="row"> |
|||
<sqx-asset class="col-3" *ngFor="let file of newFiles" [initFile]="file" |
|||
(failed)="onAssetFailed(file)" |
|||
(loaded)="onAssetLoaded(file, $event)"> |
|||
</sqx-asset> |
|||
<sqx-asset class="col-3" *ngFor="let asset of assetsItems" [asset]="asset" |
|||
(deleting)="onAssetDeleting($event)" |
|||
(updated)="onAssetUpdated($event)"> |
|||
</sqx-asset> |
|||
</div> |
|||
|
|||
<div class="clearfix" *ngIf="assetsPager.numberOfItems > 0"> |
|||
<div class="float-right pagination"> |
|||
<span class="pagination-text">{{assetsPager.itemFirst}}-{{assetsPager.itemLast}} of {{assetsPager.numberOfItems}}</span> |
|||
<div class="clearfix" *ngIf="assetsPager.numberOfItems > 0"> |
|||
<div class="float-right pagination"> |
|||
<span class="pagination-text">{{assetsPager.itemFirst}}-{{assetsPager.itemLast}} of {{assetsPager.numberOfItems}}</span> |
|||
|
|||
<button class="btn btn-link btn-secondary pagination-button" [disabled]="!assetsPager.canGoPrev" (click)="goPrev()"> |
|||
<i class="icon-angle-left"></i> |
|||
</button> |
|||
<button class="btn btn-link btn-secondary pagination-button" [disabled]="!assetsPager.canGoNext" (click)="goNext()"> |
|||
<i class="icon-angle-right"></i> |
|||
</button> |
|||
</div> |
|||
<button class="btn btn-link btn-secondary pagination-button" [disabled]="!assetsPager.canGoPrev" (click)="goPrev()"> |
|||
<i class="icon-angle-left"></i> |
|||
</button> |
|||
<button class="btn btn-link btn-secondary pagination-button" [disabled]="!assetsPager.canGoNext" (click)="goNext()"> |
|||
<i class="icon-angle-right"></i> |
|||
</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</ng-container> |
|||
</sqx-panel> |
|||
|
|||
@ -1,29 +1,21 @@ |
|||
<sqx-panel desiredWidth="16rem"> |
|||
<div class="panel-header"> |
|||
<div class="panel-title-row"> |
|||
<h3 class="panel-title">Activity</h3> |
|||
</div> |
|||
|
|||
<a class="panel-close" sqxParentLink> |
|||
<i class="icon-close"></i> |
|||
</a> |
|||
</div> |
|||
<sqx-panel desiredWidth="16rem" isBlank="true"> |
|||
<ng-container title> |
|||
Activity |
|||
</ng-container> |
|||
|
|||
<div class="panel-main"> |
|||
<div class="panel-content panel-content-blank"> |
|||
<div *ngFor="let event of events | async" class="event"> |
|||
<div class="event-left"> |
|||
<img class="user-picture" [attr.title]="event.actor | sqxUserNameRef:null" [attr.src]="event.actor | sqxUserPictureRef" /> |
|||
<ng-container content> |
|||
<div *ngFor="let event of events | async" class="event"> |
|||
<div class="event-left"> |
|||
<img class="user-picture" [attr.title]="event.actor | sqxUserNameRef:null" [attr.src]="event.actor | sqxUserPictureRef" /> |
|||
</div> |
|||
<div class="event-main"> |
|||
<div class="event-message"> |
|||
<span class="event-actor user-ref">{{event.actor | sqxUserNameRef:null}}</span> <span [innerHTML]="format(event.message) | async"></span> |
|||
</div> |
|||
<div class="event-main"> |
|||
<div class="event-message"> |
|||
<span class="event-actor user-ref">{{event.actor | sqxUserNameRef:null}}</span> <span [innerHTML]="format(event.message) | async"></span> |
|||
</div> |
|||
<div class="event-created">{{event.created | sqxFromNow}}</div> |
|||
<div class="event-created">{{event.created | sqxFromNow}}</div> |
|||
|
|||
<a class="event-load" (click)="loadVersion(event.version)">Load this Version</a> |
|||
</div> |
|||
</div> |
|||
<a class="event-load" (click)="loadVersion(event.version)">Load this Version</a> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</ng-container> |
|||
</sqx-panel> |
|||
@ -1,35 +1,27 @@ |
|||
<sqx-title message="{app} | Schemas" parameter1="app" [value1]="ctx.appName"></sqx-title> |
|||
|
|||
<sqx-panel theme="dark" desiredWidth="16rem"> |
|||
<div class="panel-header"> |
|||
<div class="panel-title-row"> |
|||
<h3 class="panel-title">Schemas</h3> |
|||
</div> |
|||
|
|||
<a class="panel-close" sqxParentLink isLazyLoaded="true"> |
|||
<i class="icon-close"></i> |
|||
</a> |
|||
<sqx-panel theme="dark" desiredWidth="16rem" showSecondHeader="true"> |
|||
<ng-container title> |
|||
Schemas |
|||
</ng-container> |
|||
|
|||
<div class="panel-header-row"> |
|||
<sqx-shortcut keys="ctrl+shift+f" (trigger)="inputFind.focus()"></sqx-shortcut> |
|||
<ng-container secondHeader> |
|||
<sqx-shortcut keys="ctrl+shift+f" (trigger)="inputFind.focus()"></sqx-shortcut> |
|||
|
|||
<div class="search-form"> |
|||
<input class="form-control form-control-dark" #inputFind [formControl]="schemasFilter" placeholder="Search for schemas" /> |
|||
<div class="search-form"> |
|||
<input class="form-control form-control-dark" #inputFind [formControl]="schemasFilter" placeholder="Search for schemas" /> |
|||
|
|||
<i class="icon-search"></i> |
|||
</div> |
|||
<i class="icon-search"></i> |
|||
</div> |
|||
</div> |
|||
</ng-container> |
|||
|
|||
<div class="panel-main"> |
|||
<div class="panel-content"> |
|||
<ul class="nav nav-panel nav-dark nav-dark-bordered flex-column"> |
|||
<li class="nav-item" *ngFor="let schema of schemasFiltered | async"> |
|||
<a class="nav-link" [routerLink]="schema.name" routerLinkActive="active">{{schema.displayName}} <i class="icon-angle-right"></i></a> |
|||
</li> |
|||
</ul> |
|||
</div> |
|||
</div> |
|||
<ng-container content> |
|||
<ul class="nav nav-panel nav-dark nav-dark-bordered flex-column"> |
|||
<li class="nav-item" *ngFor="let schema of schemasFiltered | async"> |
|||
<a class="nav-link" [routerLink]="schema.name" routerLinkActive="active">{{schema.displayName}} <i class="icon-angle-right"></i></a> |
|||
</li> |
|||
</ul> |
|||
</ng-container> |
|||
</sqx-panel> |
|||
|
|||
<router-outlet></router-outlet> |
|||
@ -1,116 +1,108 @@ |
|||
<sqx-title message="{app} | Rules Events" parameter1="app" [value1]="ctx.appName"></sqx-title> |
|||
|
|||
<sqx-panel desiredWidth="63rem"> |
|||
<div class="panel-header"> |
|||
<div class="panel-title-row"> |
|||
<div class="float-right"> |
|||
<button class="btn btn-link btn-secondary" (click)="load(true)" title="Refresh Events (CTRL + SHIFT + R)"> |
|||
<i class="icon-reset"></i> Refresh |
|||
</button> |
|||
<ng-container title> |
|||
Events |
|||
</ng-container> |
|||
|
|||
<ng-container header> |
|||
<button class="btn btn-link btn-secondary" (click)="load(true)" title="Refresh Events (CTRL + SHIFT + R)"> |
|||
<i class="icon-reset"></i> Refresh |
|||
</button> |
|||
|
|||
<sqx-shortcut keys="ctrl+shift+r" (trigger)="load(true)"></sqx-shortcut> |
|||
</div> |
|||
|
|||
<h3 class="panel-title">Events</h3> |
|||
</div> |
|||
<sqx-shortcut keys="ctrl+shift+r" (trigger)="load(true)"></sqx-shortcut> |
|||
</ng-container> |
|||
|
|||
<ng-container content> |
|||
<table class="table table-items table-fixed"> |
|||
<thead> |
|||
<tr> |
|||
<th class="cell-label"> |
|||
Status |
|||
</th> |
|||
<th class="cell-40"> |
|||
Event |
|||
</th> |
|||
<th class="cell-60"> |
|||
Description |
|||
</th> |
|||
<th class="cell-time"> |
|||
Created |
|||
</th> |
|||
<th class="cell-actions"> |
|||
|
|||
<a class="panel-close" sqxParentLink isLazyLoaded="true"> |
|||
<i class="icon-close"></i> |
|||
</a> |
|||
</div> |
|||
</th> |
|||
</tr> |
|||
</thead> |
|||
|
|||
<div class="panel-main"> |
|||
<div class="panel-content panel-content-scroll"> |
|||
<table class="table table-items table-fixed"> |
|||
<thead> |
|||
<tr> |
|||
<th class="cell-label"> |
|||
Status |
|||
</th> |
|||
<th class="cell-40"> |
|||
Event |
|||
</th> |
|||
<th class="cell-60"> |
|||
Description |
|||
</th> |
|||
<th class="cell-time"> |
|||
Created |
|||
</th> |
|||
<th class="cell-actions"> |
|||
|
|||
</th> |
|||
<tbody> |
|||
<ng-template ngFor let-event [ngForOf]="eventsItems"> |
|||
<tr [class.expanded]="selectedEventId === event.id"> |
|||
<td class="cell-label"> |
|||
<span class="badge badge-pill badge-{{getBadgeClass(event.jobResult)}}">{{event.jobResult}}</span> |
|||
</td> |
|||
<td class="cell-40"> |
|||
<span class="truncate">{{event.eventName}}</span> |
|||
</td> |
|||
<td class="cell-60"> |
|||
<span class="truncate">{{event.description}}</span> |
|||
</td> |
|||
<td class="cell-time"> |
|||
<small class="item-modified">{{event.created | sqxFromNow}}</small> |
|||
</td> |
|||
<td class="cell-actions"> |
|||
<button type="button" class="btn btn-secondary table-items-edit-button" [class.active]="selectedEventId === event.id" (click)="selectEvent(event.id)"> |
|||
<i class="icon-settings"></i> |
|||
</button> |
|||
</td> |
|||
</tr> |
|||
</thead> |
|||
|
|||
<tbody> |
|||
<ng-template ngFor let-event [ngForOf]="eventsItems"> |
|||
<tr [class.expanded]="selectedEventId === event.id"> |
|||
<td class="cell-label"> |
|||
<span class="badge badge-pill badge-{{getBadgeClass(event.jobResult)}}">{{event.jobResult}}</span> |
|||
</td> |
|||
<td class="cell-40"> |
|||
<span class="truncate">{{event.eventName}}</span> |
|||
</td> |
|||
<td class="cell-60"> |
|||
<span class="truncate">{{event.description}}</span> |
|||
</td> |
|||
<td class="cell-time"> |
|||
<small class="item-modified">{{event.created | sqxFromNow}}</small> |
|||
</td> |
|||
<td class="cell-actions"> |
|||
<button type="button" class="btn btn-secondary table-items-edit-button" [class.active]="selectedEventId === event.id" (click)="selectEvent(event.id)"> |
|||
<i class="icon-settings"></i> |
|||
</button> |
|||
</td> |
|||
</tr> |
|||
<tr *ngIf="selectedEventId === event.id"> |
|||
<td colspan="5"> |
|||
<div class="event-header"> |
|||
<h3>Last Invocation</h3> |
|||
<tr *ngIf="selectedEventId === event.id"> |
|||
<td colspan="5"> |
|||
<div class="event-header"> |
|||
<h3>Last Invocation</h3> |
|||
</div> |
|||
|
|||
<div class="row event-stats"> |
|||
<div class="col-3"> |
|||
<span class="badge badge-pill badge-{{getBadgeClass(event.result)}}">{{event.result}}</span> |
|||
</div> |
|||
|
|||
<div class="row event-stats"> |
|||
<div class="col-3"> |
|||
<span class="badge badge-pill badge-{{getBadgeClass(event.result)}}">{{event.result}}</span> |
|||
</div> |
|||
<div class="col-3"> |
|||
Attempts: {{event.numCalls}} |
|||
</div> |
|||
<div class="col-3"> |
|||
Next: <span *ngIf="event.nextAttempt">{{event.nextAttempt | sqxFromNow}}</span> |
|||
</div> |
|||
<div class="col-3 text-right"> |
|||
<button class="btn btn-success btn-sm" (click)="enqueueEvent(event)"> |
|||
Enqueue |
|||
</button> |
|||
</div> |
|||
<div class="col-3"> |
|||
Attempts: {{event.numCalls}} |
|||
</div> |
|||
<div class="row"> |
|||
<div class="col-12"> |
|||
<textarea class="event-dump form-control" readonly>{{event.lastDump}}</textarea> |
|||
</div> |
|||
<div class="col-3"> |
|||
Next: <ng-container *ngIf="event.nextAttempt">{{event.nextAttempt | sqxFromNow}}</ng-container> |
|||
</div> |
|||
</td> |
|||
</tr> |
|||
<tr class="spacer"></tr> |
|||
</ng-template> |
|||
</tbody> |
|||
</table> |
|||
<div class="col-3 text-right"> |
|||
<button class="btn btn-success btn-sm" (click)="enqueueEvent(event)"> |
|||
Enqueue |
|||
</button> |
|||
</div> |
|||
</div> |
|||
<div class="row"> |
|||
<div class="col-12"> |
|||
<textarea class="event-dump form-control" readonly>{{event.lastDump}}</textarea> |
|||
</div> |
|||
</div> |
|||
</td> |
|||
</tr> |
|||
<tr class="spacer"></tr> |
|||
</ng-template> |
|||
</tbody> |
|||
</table> |
|||
|
|||
<div class="clearfix" *ngIf="eventsPager.numberOfItems > 0"> |
|||
<div class="float-right pagination"> |
|||
<span class="pagination-text">{{eventsPager.itemFirst}}-{{eventsPager.itemLast}} of {{eventsPager.numberOfItems}}</span> |
|||
<div class="clearfix" *ngIf="eventsPager.numberOfItems > 0"> |
|||
<div class="float-right pagination"> |
|||
<span class="pagination-text">{{eventsPager.itemFirst}}-{{eventsPager.itemLast}} of {{eventsPager.numberOfItems}}</span> |
|||
|
|||
<button class="btn btn-link btn-secondary pagination-button" [disabled]="!eventsPager.canGoPrev" (click)="goPrev()"> |
|||
<i class="icon-angle-left"></i> |
|||
</button> |
|||
<button class="btn btn-link btn-secondary pagination-button" [disabled]="!eventsPager.canGoNext" (click)="goNext()"> |
|||
<i class="icon-angle-right"></i> |
|||
</button> |
|||
</div> |
|||
<button class="btn btn-link btn-secondary pagination-button" [disabled]="!eventsPager.canGoPrev" (click)="goPrev()"> |
|||
<i class="icon-angle-left"></i> |
|||
</button> |
|||
<button class="btn btn-link btn-secondary pagination-button" [disabled]="!eventsPager.canGoNext" (click)="goNext()"> |
|||
<i class="icon-angle-right"></i> |
|||
</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</ng-container> |
|||
</sqx-panel> |
|||
|
|||
<router-outlet></router-outlet> |
|||
@ -1,127 +1,122 @@ |
|||
<div class="modal-dialog modal-lg"> |
|||
<div class="modal-content"> |
|||
<div class="modal-header"> |
|||
<h4 class="modal-title" *ngIf="mode === 'EditTrigger'"> |
|||
Edit Trigger |
|||
</h4> |
|||
<h4 class="modal-title" *ngIf="mode === 'EditAction'"> |
|||
Edit Action |
|||
</h4> |
|||
<h4 class="modal-title" *ngIf="mode === 'Wizard' && step === 1"> |
|||
Step 1 of 4: Select Trigger |
|||
</h4> |
|||
<h4 class="modal-title" *ngIf="mode === 'Wizard' && step === 2"> |
|||
Step 2 of 4: Configure Trigger |
|||
</h4> |
|||
<h4 class="modal-title" *ngIf="mode === 'Wizard' && step === 3"> |
|||
Step 3 of 4: Select Action |
|||
</h4> |
|||
<h4 class="modal-title" *ngIf="mode === 'Wizard' && step === 4"> |
|||
Step 4 of 4: Configure Action |
|||
</h4> |
|||
|
|||
<button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="cancel()"> |
|||
<span aria-hidden="true">×</span> |
|||
</button> |
|||
</div> |
|||
<sqx-modal-dialog large="true" (close)="cancel()"> |
|||
<ng-container title> |
|||
<ng-container *ngIf="mode === 'EditTrigger'"> |
|||
Edit Trigger |
|||
</ng-container> |
|||
<ng-container *ngIf="mode === 'EditAction'"> |
|||
Edit Action |
|||
</ng-container> |
|||
<ng-container *ngIf="mode === 'Wizard' && step === 1"> |
|||
Step 1 of 4: Select Trigger |
|||
</ng-container> |
|||
<ng-container *ngIf="mode === 'Wizard' && step === 2"> |
|||
Step 2 of 4: Configure Trigger |
|||
</ng-container> |
|||
<ng-container *ngIf="mode === 'Wizard' && step === 3"> |
|||
Step 3 of 4: Select Action |
|||
</ng-container> |
|||
<ng-container *ngIf="mode === 'Wizard' && step === 4"> |
|||
Step 4 of 4: Configure Action |
|||
</ng-container> |
|||
</ng-container> |
|||
|
|||
<div class="modal-body"> |
|||
<div *ngIf="step === 1"> |
|||
<span *ngFor="let trigger of ruleTriggers | sqxKeys" class="rule-element rule-element-{{trigger}}" (click)="selectTriggerType(trigger)"> |
|||
<span class="rule-element-icon"> |
|||
<i class="icon-trigger-{{trigger}}"></i> |
|||
</span> |
|||
<span class="rule-element-text"> |
|||
{{ruleTriggers[trigger].name}} |
|||
</span> |
|||
<ng-container content> |
|||
<ng-container *ngIf="step === 1"> |
|||
<span *ngFor="let trigger of ruleTriggers | sqxKeys" class="rule-element rule-element-{{trigger}}" (click)="selectTriggerType(trigger)"> |
|||
<span class="rule-element-icon"> |
|||
<i class="icon-trigger-{{trigger}}"></i> |
|||
</span> |
|||
</div> |
|||
|
|||
<div *ngIf="step === 2 && schemas" class="modal-form"> |
|||
<div [ngSwitch]="triggerType"> |
|||
<div *ngSwitchCase="'AssetChanged'"> |
|||
<sqx-asset-changed-trigger #triggerControl |
|||
[trigger]="trigger" |
|||
(triggerChanged)="selectTrigger($event)"> |
|||
</sqx-asset-changed-trigger> |
|||
</div> |
|||
<div *ngSwitchCase="'ContentChanged'"> |
|||
<sqx-content-changed-trigger #triggerControl |
|||
[schemas]="schemas" |
|||
[trigger]="trigger" |
|||
(triggerChanged)="selectTrigger($event)"> |
|||
</sqx-content-changed-trigger> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<span class="rule-element-text"> |
|||
{{ruleTriggers[trigger].name}} |
|||
</span> |
|||
</span> |
|||
</ng-container> |
|||
|
|||
<div *ngIf="step === 3"> |
|||
<span *ngFor="let action of ruleActions | sqxKeys" class="rule-element rule-element-{{action}}" (click)="selectActionType(action)"> |
|||
<span class="rule-element-icon"> |
|||
<i class="icon-action-{{action}}"></i> |
|||
</span> |
|||
<span class="rule-element-text"> |
|||
{{ruleActions[action].name}} |
|||
</span> |
|||
<ng-container *ngIf="step === 2 && schemas"> |
|||
<ng-container [ngSwitch]="triggerType"> |
|||
<ng-container *ngSwitchCase="'AssetChanged'"> |
|||
<sqx-asset-changed-trigger #triggerControl |
|||
[trigger]="trigger" |
|||
(triggerChanged)="selectTrigger($event)"> |
|||
</sqx-asset-changed-trigger> |
|||
</ng-container> |
|||
<ng-container *ngSwitchCase="'ContentChanged'"> |
|||
<sqx-content-changed-trigger #triggerControl |
|||
[schemas]="schemas" |
|||
[trigger]="trigger" |
|||
(triggerChanged)="selectTrigger($event)"> |
|||
</sqx-content-changed-trigger> |
|||
</ng-container> |
|||
</ng-container> |
|||
</ng-container> |
|||
|
|||
<ng-container *ngIf="step === 3"> |
|||
<span *ngFor="let action of ruleActions | sqxKeys" class="rule-element rule-element-{{action}}" (click)="selectActionType(action)"> |
|||
<span class="rule-element-icon"> |
|||
<i class="icon-action-{{action}}"></i> |
|||
</span> |
|||
<span class="rule-element-text"> |
|||
{{ruleActions[action].name}} |
|||
</span> |
|||
</div> |
|||
</span> |
|||
</ng-container> |
|||
|
|||
<ng-container *ngIf="step === 4"> |
|||
<ng-container [ngSwitch]="actionType"> |
|||
<ng-container *ngSwitchCase="'Algolia'"> |
|||
<sqx-algolia-action #actionControl |
|||
[action]="action" |
|||
(actionChanged)="selectAction($event)"> |
|||
</sqx-algolia-action> |
|||
</ng-container> |
|||
<ng-container *ngSwitchCase="'AzureQueue'"> |
|||
<sqx-azure-queue-action #actionControl |
|||
[action]="action" |
|||
(actionChanged)="selectAction($event)"> |
|||
</sqx-azure-queue-action> |
|||
</ng-container> |
|||
<ng-container *ngSwitchCase="'ElasticSearch'"> |
|||
<sqx-elastic-search-action #actionControl |
|||
[action]="action" |
|||
(actionChanged)="selectAction($event)"> |
|||
</sqx-elastic-search-action> |
|||
</ng-container> |
|||
<ng-container *ngSwitchCase="'Fastly'"> |
|||
<sqx-fastly-action #actionControl |
|||
[action]="action" |
|||
(actionChanged)="selectAction($event)"> |
|||
</sqx-fastly-action> |
|||
</ng-container> |
|||
<ng-container *ngSwitchCase="'Slack'"> |
|||
<sqx-slack-action #actionControl |
|||
[action]="action" |
|||
(actionChanged)="selectAction($event)"> |
|||
</sqx-slack-action> |
|||
</ng-container> |
|||
<ng-container *ngSwitchCase="'Webhook'"> |
|||
<sqx-webhook-action #actionControl |
|||
[action]="action" |
|||
(actionChanged)="selectAction($event)"> |
|||
</sqx-webhook-action> |
|||
</ng-container> |
|||
</ng-container> |
|||
</ng-container> |
|||
</ng-container> |
|||
|
|||
<ng-container footer> |
|||
<ng-container *ngIf="mode === 'Wizard' && step === 2"> |
|||
<button type="reset" class="float-left btn btn-secondary" (click)="cancel()">Cancel</button> |
|||
<button type="submit" class="float-right btn btn-primary" (click)="triggerControl.save()">Next</button> |
|||
</ng-container> |
|||
|
|||
<div *ngIf="step === 4" class="modal-form"> |
|||
<div [ngSwitch]="actionType"> |
|||
<div *ngSwitchCase="'Algolia'"> |
|||
<sqx-algolia-action #actionControl |
|||
[action]="action" |
|||
(actionChanged)="selectAction($event)"> |
|||
</sqx-algolia-action> |
|||
</div> |
|||
<div *ngSwitchCase="'AzureQueue'"> |
|||
<sqx-azure-queue-action #actionControl |
|||
[action]="action" |
|||
(actionChanged)="selectAction($event)"> |
|||
</sqx-azure-queue-action> |
|||
</div> |
|||
<div *ngSwitchCase="'ElasticSearch'"> |
|||
<sqx-elastic-search-action #actionControl |
|||
[action]="action" |
|||
(actionChanged)="selectAction($event)"> |
|||
</sqx-elastic-search-action> |
|||
</div> |
|||
<div *ngSwitchCase="'Fastly'"> |
|||
<sqx-fastly-action #actionControl |
|||
[action]="action" |
|||
(actionChanged)="selectAction($event)"> |
|||
</sqx-fastly-action> |
|||
</div> |
|||
<div *ngSwitchCase="'Slack'"> |
|||
<sqx-slack-action #actionControl |
|||
[action]="action" |
|||
(actionChanged)="selectAction($event)"> |
|||
</sqx-slack-action> |
|||
</div> |
|||
<div *ngSwitchCase="'Webhook'"> |
|||
<sqx-webhook-action #actionControl |
|||
[action]="action" |
|||
(actionChanged)="selectAction($event)"> |
|||
</sqx-webhook-action> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="modal-footer" *ngIf="step === 2 || step === 4"> |
|||
<div class="clearfix" *ngIf="mode === 'Wizard' && step === 2"> |
|||
<button type="reset" class="float-left btn btn-secondary" (click)="cancel()">Cancel</button> |
|||
<button type="submit" class="float-right btn btn-primary" (click)="triggerControl.save()">Next</button> |
|||
</div> |
|||
|
|||
<div class="clearfix" *ngIf="mode !== 'Wizard' && step === 2"> |
|||
<button type="reset" class="float-left btn btn-secondary" (click)="cancel()">Cancel</button> |
|||
<button type="submit" class="float-right btn btn-primary" (click)="triggerControl.save()">Save</button> |
|||
</div> |
|||
<ng-container *ngIf="mode !== 'Wizard' && step === 2"> |
|||
<button type="reset" class="float-left btn btn-secondary" (click)="cancel()">Cancel</button> |
|||
<button type="submit" class="float-right btn btn-primary" (click)="triggerControl.save()">Save</button> |
|||
</ng-container> |
|||
|
|||
<div class="clearfix" *ngIf="step === 4"> |
|||
<button type="reset" class="float-left btn btn-secondary" (click)="cancel()">Cancel</button> |
|||
<button type="submit" class="float-right btn btn-primary" (click)="actionControl.save()">Save</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<ng-container *ngIf="step === 4"> |
|||
<button type="reset" class="float-left btn btn-secondary" (click)="cancel()">Cancel</button> |
|||
<button type="submit" class="float-right btn btn-primary" (click)="actionControl.save()">Save</button> |
|||
</ng-container> |
|||
</ng-container> |
|||
</sqx-modal-dialog> |
|||
@ -1,107 +1,97 @@ |
|||
<sqx-title message="{app} | Rules" parameter1="app" [value1]="ctx.appName"></sqx-title> |
|||
|
|||
<sqx-panel desiredWidth="54rem"> |
|||
<div class="panel-header"> |
|||
<div class="panel-title-row"> |
|||
<div class="float-right"> |
|||
<button class="btn btn-link btn-secondary" (click)="load(true)" title="Refresh Assets (CTRL + SHIFT + R)"> |
|||
<i class="icon-reset"></i> Refresh |
|||
</button> |
|||
<ng-container title> |
|||
Rules |
|||
</ng-container> |
|||
|
|||
<sqx-shortcut keys="ctrl+shift+r" (trigger)="load(true)"></sqx-shortcut> |
|||
<sqx-shortcut keys="ctrl+shift+g" (trigger)="buttonNew.click()"></sqx-shortcut> |
|||
|
|||
<button class="btn btn-success" #buttonNew (click)="createNew()" title="New Rule (CTRL + M)"> |
|||
<i class="icon-plus"></i> New |
|||
</button> |
|||
</div> |
|||
<ng-container header> |
|||
<button class="btn btn-link btn-secondary" (click)="load(true)" title="Refresh Assets (CTRL + SHIFT + R)"> |
|||
<i class="icon-reset"></i> Refresh |
|||
</button> |
|||
|
|||
<h3 class="panel-title"><i class="icon-rules"></i> Rules</h3> |
|||
</div> |
|||
<sqx-shortcut keys="ctrl+shift+r" (trigger)="load(true)"></sqx-shortcut> |
|||
<sqx-shortcut keys="ctrl+shift+g" (trigger)="buttonNew.click()"></sqx-shortcut> |
|||
|
|||
<a class="panel-close" sqxParentLink isLazyLoaded="true"> |
|||
<i class="icon-close"></i> |
|||
</a> |
|||
</div> |
|||
<button class="btn btn-success" #buttonNew (click)="createNew()" title="New Rule (CTRL + M)"> |
|||
<i class="icon-plus"></i> New |
|||
</button> |
|||
</ng-container> |
|||
|
|||
<div class="panel-main"> |
|||
<div class="panel-content panel-content-scroll"> |
|||
<div class="table-items-row table-items-row-empty" *ngIf="rules && rules.length === 0"> |
|||
No Rule created yet. |
|||
</div> |
|||
<ng-container content> |
|||
<div class="table-items-row table-items-row-empty" *ngIf="rules && rules.length === 0"> |
|||
No Rule created yet. |
|||
</div> |
|||
|
|||
<table class="table table-items table-fixed" *ngIf="rules && rules.length > 0"> |
|||
<tbody> |
|||
<ng-template ngFor let-rule [ngForOf]="rules"> |
|||
<tr> |
|||
<td class="cell-separator"> |
|||
<h3>If</h3> |
|||
</td> |
|||
<td class="cell-auto"> |
|||
<span class="rule-element rule-element-{{rule.triggerType}}" (click)="editTrigger(rule)"> |
|||
<span class="rule-element-icon"> |
|||
<i class="icon-trigger-{{rule.triggerType}}"></i> |
|||
</span> |
|||
<span class="rule-element-text"> |
|||
{{ruleTriggers[rule.triggerType].name}} |
|||
</span> |
|||
<table class="table table-items table-fixed" *ngIf="rules && rules.length > 0"> |
|||
<tbody> |
|||
<ng-template ngFor let-rule [ngForOf]="rules"> |
|||
<tr> |
|||
<td class="cell-separator"> |
|||
<h3>If</h3> |
|||
</td> |
|||
<td class="cell-auto"> |
|||
<span class="rule-element rule-element-{{rule.triggerType}}" (click)="editTrigger(rule)"> |
|||
<span class="rule-element-icon"> |
|||
<i class="icon-trigger-{{rule.triggerType}}"></i> |
|||
</span> |
|||
</td> |
|||
<td class="cell-separator"> |
|||
<h3>then</h3> |
|||
</td> |
|||
<td class="cell-auto"> |
|||
<span class="rule-element rule-element-{{rule.actionType}}" (click)="editAction(rule)"> |
|||
<span class="rule-element-icon"> |
|||
<i class="icon-action-{{rule.actionType}}"></i> |
|||
</span> |
|||
<span class="rule-element-text"> |
|||
{{ruleActions[rule.actionType].name}} |
|||
</span> |
|||
<span class="rule-element-text"> |
|||
{{ruleTriggers[rule.triggerType].name}} |
|||
</span> |
|||
</td> |
|||
<td class="cell-actions"> |
|||
<sqx-toggle [ngModel]="rule.isEnabled" (ngModelChange)="toggleRule(rule)"></sqx-toggle> |
|||
</td> |
|||
<td class="cell-actions"> |
|||
<button type="button" class="btn btn-link btn-danger" |
|||
(sqxConfirmClick)="deleteRule(rule)" |
|||
confirmTitle="Delete rule" |
|||
confirmText="Do you really want to delete the rule?"> |
|||
<i class="icon-bin2"></i> |
|||
</button> |
|||
</td> |
|||
</tr> |
|||
<tr class="spacer"></tr> |
|||
</ng-template> |
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
</span> |
|||
</td> |
|||
<td class="cell-separator"> |
|||
<h3>then</h3> |
|||
</td> |
|||
<td class="cell-auto"> |
|||
<span class="rule-element rule-element-{{rule.actionType}}" (click)="editAction(rule)"> |
|||
<span class="rule-element-icon"> |
|||
<i class="icon-action-{{rule.actionType}}"></i> |
|||
</span> |
|||
<span class="rule-element-text"> |
|||
{{ruleActions[rule.actionType].name}} |
|||
</span> |
|||
</span> |
|||
</td> |
|||
<td class="cell-actions"> |
|||
<sqx-toggle [ngModel]="rule.isEnabled" (ngModelChange)="toggleRule(rule)"></sqx-toggle> |
|||
</td> |
|||
<td class="cell-actions"> |
|||
<button type="button" class="btn btn-link btn-danger" |
|||
(sqxConfirmClick)="deleteRule(rule)" |
|||
confirmTitle="Delete rule" |
|||
confirmText="Do you really want to delete the rule?"> |
|||
<i class="icon-bin2"></i> |
|||
</button> |
|||
</td> |
|||
</tr> |
|||
<tr class="spacer"></tr> |
|||
</ng-template> |
|||
</tbody> |
|||
</table> |
|||
</ng-container> |
|||
|
|||
<div class="panel-sidebar"> |
|||
<a class="panel-link" routerLink="events" routerLinkActive="active" #linkHistory> |
|||
<i class="icon-time"></i> |
|||
</a> |
|||
|
|||
<a class="panel-link" routerLink="help" routerLinkActive="active" #linkHelp> |
|||
<i class="icon-help"></i> |
|||
</a> |
|||
|
|||
<sqx-onboarding-tooltip id="help" [for]="linkHelp" position="leftTop" after="180000"> |
|||
Click the help icon to show a context specific help page. Go to <a href="https://docs.squidex.io" target="_blank">https://docs.squidex.io</a> for the full documentation. |
|||
</sqx-onboarding-tooltip> |
|||
</div> |
|||
</div> |
|||
<ng-container sidebar> |
|||
<a class="panel-link" routerLink="events" routerLinkActive="active" #linkHistory> |
|||
<i class="icon-time"></i> |
|||
</a> |
|||
|
|||
<a class="panel-link" routerLink="help" routerLinkActive="active" #linkHelp> |
|||
<i class="icon-help"></i> |
|||
</a> |
|||
|
|||
<sqx-onboarding-tooltip id="help" [for]="linkHelp" position="leftTop" after="180000"> |
|||
Click the help icon to show a context specific help page. Go to <a href="https://docs.squidex.io" target="_blank">https://docs.squidex.io</a> for the full documentation. |
|||
</sqx-onboarding-tooltip> |
|||
</ng-container> |
|||
</sqx-panel> |
|||
|
|||
<div class="modal" *sqxModalView="addRuleDialog;onRoot:true;closeAuto:false" @fade> |
|||
<div class="modal-backdrop"></div> |
|||
|
|||
<ng-container *sqxModalView="addRuleDialog;onRoot:true;closeAuto:false"> |
|||
<sqx-rule-wizard [schemas]="schemas" [rule]="wizardRule" [mode]="wizardMode" |
|||
(updated)="onRuleUpdated($event)" |
|||
(cancelled)="addRuleDialog.hide()" |
|||
(created)="onRuleCreated($event)"> |
|||
</sqx-rule-wizard> |
|||
</div> |
|||
</ng-container> |
|||
|
|||
<router-outlet></router-outlet> |
|||
@ -0,0 +1,3 @@ |
|||
<ng-container *ngIf="error"> |
|||
<div class="form-alert form-alert-error" [innerHTML]="error" @fade></div> |
|||
</ng-container> |
|||
@ -0,0 +1,2 @@ |
|||
@import '_mixins'; |
|||
@import '_vars'; |
|||
@ -0,0 +1,24 @@ |
|||
/* |
|||
* Squidex Headless CMS |
|||
* |
|||
* @license |
|||
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. |
|||
*/ |
|||
|
|||
import { ChangeDetectionStrategy, Component, Input } from '@angular/core'; |
|||
|
|||
import { fadeAnimation } from './../animations'; |
|||
|
|||
@Component({ |
|||
selector: 'sqx-form-error', |
|||
styleUrls: ['./form-error.component.scss'], |
|||
templateUrl: './form-error.component.html', |
|||
animations: [ |
|||
fadeAnimation |
|||
], |
|||
changeDetection: ChangeDetectionStrategy.OnPush |
|||
}) |
|||
export class FormErrorComponent { |
|||
@Input() |
|||
public error: string; |
|||
} |
|||
@ -1,17 +1,9 @@ |
|||
<sqx-panel desiredWidth="16rem"> |
|||
<div class="panel-header"> |
|||
<div class="panel-title-row"> |
|||
<h3 class="panel-title">Help</h3> |
|||
</div> |
|||
<sqx-panel desiredWidth="16rem" isBlank="true"> |
|||
<ng-container title> |
|||
Help |
|||
</ng-container> |
|||
|
|||
<a class="panel-close" sqxParentLink> |
|||
<i class="icon-close"></i> |
|||
</a> |
|||
</div> |
|||
|
|||
<div class="panel-main"> |
|||
<div class="panel-content panel-content-blank"> |
|||
<p *ngFor="let section of helpSections | async" [innerHTML]="section"></p> |
|||
</div> |
|||
</div> |
|||
<ng-container content> |
|||
<p *ngFor="let section of helpSections | async" [innerHTML]="section"></p> |
|||
</ng-container> |
|||
</sqx-panel> |
|||
@ -1,27 +1,19 @@ |
|||
<sqx-panel desiredWidth="16rem"> |
|||
<div class="panel-header"> |
|||
<div class="panel-title-row"> |
|||
<h3 class="panel-title">Activity</h3> |
|||
</div> |
|||
|
|||
<a class="panel-close" sqxParentLink> |
|||
<i class="icon-close"></i> |
|||
</a> |
|||
</div> |
|||
<sqx-panel desiredWidth="16rem" isBlank="true"> |
|||
<ng-container title> |
|||
Activity |
|||
</ng-container> |
|||
|
|||
<div class="panel-main"> |
|||
<div class="panel-content panel-content-blank"> |
|||
<div *ngFor="let event of events | async" class="event"> |
|||
<div class="event-left"> |
|||
<img class="user-picture" [attr.title]="event.actor | sqxUserNameRef:null" [attr.src]="event.actor | sqxUserPictureRef" /> |
|||
</div> |
|||
<div class="event-main"> |
|||
<div class="event-message"> |
|||
<span class="event-actor user-ref">{{event.actor | sqxUserNameRef:null}}</span> <span [innerHTML]="format(event.message) | async"></span> |
|||
</div> |
|||
<div class="event-created">{{event.created | sqxFromNow}}</div> |
|||
<ng-container content> |
|||
<div *ngFor="let event of events | async" class="event"> |
|||
<div class="event-left"> |
|||
<img class="user-picture" [attr.title]="event.actor | sqxUserNameRef:null" [attr.src]="event.actor | sqxUserPictureRef" /> |
|||
</div> |
|||
<div class="event-main"> |
|||
<div class="event-message"> |
|||
<span class="event-actor user-ref">{{event.actor | sqxUserNameRef:null}}</span> <span [innerHTML]="format(event.message) | async"></span> |
|||
</div> |
|||
</div> |
|||
<div class="event-created">{{event.created | sqxFromNow}}</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</ng-container> |
|||
</sqx-panel> |
|||
Loading…
Reference in new issue