squidex/frontend/app/features/rules/pages/rule/rule-page.component.html

<sqx-title message="i18n:rules.listPageTitle" [url]="['..']"></sqx-title>
<sqx-title message="i18n:rules.itemPageTitle"></sqx-title>

<form (ngSubmit)="save()">#
    <sqx-layout layout="main" [width]="54">
        <ng-container title>
            <div class="d-flex align-items-center">
                <a class="btn btn-text-secondary" (click)="back()">
                    <i class="icon-angle-left"></i>
                </a>
    
                <h3 class="title">{{ 'common.rule' | sqxTranslate }}</h3>
            </div>
        </ng-container>

        <ng-container menu>
            <button class="btn btn-outline-secondary btn-run" *ngIf="isManual; else notManual" [disabled]="!rule?.canTrigger"
                (sqxConfirmClick)="trigger()"
                confirmTitle="i18n:rules.triggerConfirmTitle"
                confirmText="i18n:rules.triggerConfirmText"
                confirmRememberKey="triggerRule">
                <i class="icon-play-line"></i>
            </button>

            <div class="btn btn-outline-secondary btn-enabled ms-2" *ngIf="rule">
                <span class="me-2" *ngIf="isEnabled">
                    {{ 'common.enabled' | sqxTranslate }}
                </span>
    
                <span class="me-2" *ngIf="!isEnabled">
                    {{ 'common.disabled' | sqxTranslate }}
                </span>
        
                <sqx-toggle [(ngModel)]="isEnabled" [ngModelOptions]="{ standalone: true }" [disabled]="!isEditable"></sqx-toggle>
            </div>

            <button type="button" class="btn btn-primary ms-2" (click)="save()">
                {{ 'common.save' | sqxTranslate }}
            </button>
        </ng-container>
    
        <ng-container>
            <sqx-list-view innerWidth="54rem" *ngIf="supportedActions && supportedTriggers">
                <div class="card mb-2">
                    <div class="card-header">
                        <div class="row align-items-center g-0 summary-row">
                            <div class="col-auto col-syntax">
                                <h3>{{ 'rules.ruleSyntax.if' | sqxTranslate }}</h3>
                            </div>
        
                            <div class="col col-icon" *ngIf="currentTrigger">
                                <sqx-rule-element [type]="currentTrigger.type" [isSmall]="true" [element]="triggerElement" [disabled]="true"></sqx-rule-element>
                            </div>

                            <div class="col text-end" *ngIf="currentTrigger && !rule">
                                <button type="button" class="btn btn-text-danger" (click)="resetTrigger()">
                                    <i class="icon-bin2"></i>
                                </button>
                            </div>
        
                            <div class="col" *ngIf="!currentTrigger">
                                <h3>...</h3>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <ng-container *ngIf="currentTrigger; else triggerSelector">
                            <sqx-form-alert marginTop="0" *ngIf="!rule">
                                {{ 'rules.triggerHint' | sqxTranslate }}
                            </sqx-form-alert>
        
                            <ng-container [ngSwitch]="currentTrigger.type">
                                <ng-container *ngSwitchCase="'AssetChanged'">
                                    <sqx-asset-changed-trigger [triggerForm]="currentTrigger.form"></sqx-asset-changed-trigger>
                                </ng-container>
                                <ng-container *ngSwitchCase="'Comment'">
                                    <sqx-comment-trigger [triggerForm]="currentTrigger.form"></sqx-comment-trigger>
                                </ng-container>
                                <ng-container *ngSwitchCase="'ContentChanged'">
                                    <sqx-content-changed-trigger 
                                        [schemas]="schemasState.schemas | async" 
                                        [trigger]="currentTrigger.values" 
                                        [triggerForm]="currentTrigger.form">
                                    </sqx-content-changed-trigger>
                                </ng-container>
                                <ng-container *ngSwitchCase="'SchemaChanged'">
                                    <sqx-schema-changed-trigger [triggerForm]="currentTrigger.form"></sqx-schema-changed-trigger>
                                </ng-container>
                                <ng-container *ngSwitchCase="'Usage'">
                                    <sqx-usage-trigger [triggerForm]="currentTrigger.form"></sqx-usage-trigger>
                                </ng-container>
                            </ng-container>
                        </ng-container>
        
                        <ng-template #triggerSelector>        
                            <div class="row g-0">
                                <div *ngFor="let triggerType of supportedTriggers | sqxKeys" class="col-12 col-md-6">
                                    <div class="rule-element" (click)="selectTrigger(triggerType)">
                                        <sqx-rule-element [type]="triggerType" [isSmall]="false" [element]="supportedTriggers[triggerType]"></sqx-rule-element>
                                    </div>
                                </div>
                            </div>
                        </ng-template>
                    </div>
                </div>

                <div class="card">
                    <div class="card-header">    
                        <div class="row align-items-center g-0 summary-row">
                            <div class="col-auto col-syntax">
                                <h3>{{ 'rules.ruleSyntax.then' | sqxTranslate }}</h3>
                            </div>

                            <div class="col col-icon" *ngIf="currentAction">
                                <sqx-rule-element [type]="currentAction.type" [isSmall]="true" [element]="actionElement" [disabled]="true"></sqx-rule-element>
                            </div>

                            <div class="col text-end" *ngIf="currentAction && !rule">
                                <button type="button" class="btn btn-text-danger" (click)="resetAction()">
                                    <i class="icon-bin2"></i>
                                </button>
                            </div>

                            <div class="col" *ngIf="!currentAction">
                                <h3>...</h3>
                            </div>
                        </div>
                    </div>

                    <div class="card-body">
                        <ng-container *ngIf="currentAction; else actionSelector">
                            <sqx-form-alert marginTop="0" *ngIf="!rule">
                                {{ 'rules.actionHint' | sqxTranslate }}
                            </sqx-form-alert>
        
                            <sqx-generic-action [actionForm]="currentAction.form"></sqx-generic-action>
                        </ng-container>
                
                        <ng-template #actionSelector>        
                            <div class="row g-0">
                                <div *ngFor="let actionType of supportedActions | sqxKeys" class="col-12 col-md-6">
                                    <div class="rule-element" (click)="selectAction(actionType)">
                                        <sqx-rule-element [type]="actionType" [isSmall]="false" [element]="supportedActions[actionType]"></sqx-rule-element>
                                    </div>
                                </div>
                            </div>
                        </ng-template>
                    </div>
                </div>
            </sqx-list-view>
        </ng-container>

        <ng-container sidebarMenu>
            <div class="panel-nav">
                <ng-container  *ngIf="rule && (rulesState.canReadEvents | async)">
                    <a class="panel-link panel-link-gray" routerLink="events" [queryParams]="{ ruleId: rule.id }" routerLinkActive="active" title="i18n:common.history" titlePosition="left">
                        <i class="icon-time"></i>
                    </a>
    
                    <a class="panel-link panel-link-gray" routerLink="simulator" [queryParams]="{ ruleId: rule.id }" routerLinkActive="active" title="i18n:rules.simulator" titlePosition="left">
                        <i class="icon-play-line"></i>
                    </a>
                </ng-container>
    
                <a class="panel-link" routerLink="help" routerLinkActive="active" queryParamsHandling="preserve" title="i18n:common.help" titlePosition="left" #helpLink>
                    <i class="icon-help2"></i>
                </a>
    
                <sqx-onboarding-tooltip helpId="help" [for]="helpLink" position="left-top" [after]="180000">
                    <span [innerHTML]="'common.helpTour' | sqxTranslate | sqxMarkdownInline"></span>
                </sqx-onboarding-tooltip>
            </div>
        </ng-container>
    </sqx-layout>
</form>

<router-outlet></router-outlet>