squidex/frontend/app/shared/components/assets/asset-dialog.component.html

<form [formGroup]="annotateForm.form" (ngSubmit)="annotateAsset()">
    <sqx-modal-dialog (close)="emitComplete()" size="xl" fullHeight="true" [title]="false" [showFooter]="false">
        <ng-container plainTitle>
            <ul class="nav nav-tabs2">
                <li class="nav-item" *ngFor="let tab of selectableTabs">
                    <a class="nav-link" [class.active]="tab === selectedTab" (click)="selectTab(tab)">{{tab | sqxTranslate}}</a>
                </li>
            </ul>
            
            <ng-container [ngSwitch]="selectedTab">
                <ng-container *ngSwitchCase="'i18n:assets.tabImage'">
                    <button type="button" class="btn btn-primary ml-auto mr-4" (click)="cropImage()" [class.invisible]="!isUploadable" [disabled]="progress > 0">
                        {{ 'common.save' | sqxTranslate }}
                    </button>
                </ng-container>
                <ng-container *ngSwitchCase="'i18n:assets.tabFocusPoint'">
                    <button type="button" class="btn btn-primary ml-auto mr-4" (click)="setFocusPoint()" [class.invisible]="!isEditable">
                        {{ 'common.save' | sqxTranslate }}
                    </button>
                </ng-container>
                <ng-container *ngSwitchCase="'i18n:assets.tabMetadata'">
                    <button type="submit" class="btn btn-primary ml-auto mr-4" [class.invisible]="!isEditable">
                        {{ 'common.save' | sqxTranslate }}
                    </button>
                </ng-container>
            </ng-container>
        </ng-container>

        <ng-container content>
            <ng-container [ngSwitch]="selectedTab">
                <ng-container *ngSwitchCase="'i18n:assets.tabImage'">
                    <div class="image">
                        <sqx-image-editor [imageSource]="asset | sqxAssetPreviewUrl"></sqx-image-editor>
                        
                        <div class="image-progress" *ngIf="progress > 0">
                            <sqx-progress-bar [strokeWidth]="2" [trailColor]="'transparent'" [trailWidth]="0" [value]="progress">
                            </sqx-progress-bar>
                        </div>
                    </div>
                </ng-container>
                <ng-container *ngSwitchCase="'i18n:assets.tabFocusPoint'">
                    <div>
                        <sqx-image-focus-point [imageSource]="asset | sqxAssetPreviewUrl" [focusPoint]="asset.metadata"></sqx-image-focus-point>
                        
                        <div class="image-progress" *ngIf="progress > 0">
                            <sqx-progress-bar [strokeWidth]="2" [trailColor]="'transparent'" [trailWidth]="0" [value]="progress">
                            </sqx-progress-bar>
                        </div>
                    </div>
                </ng-container>
                <ng-container *ngSwitchCase="'i18n:assets.tabMetadata'">
                    <div class="metadata">
                        <sqx-form-error [error]="annotateForm.error | async"></sqx-form-error>

                        <div class="form-group no-gutters">
                            <label for="id">{{ 'common.id' | sqxTranslate }}</label>

                            <div class="row no-gutters">
                                <div class="col">
                                    <input readonly class="form-control" name="id" id="id" value="{{asset.id}}" #inputId>
                                </div>
                                <div class="col-auto">
                                    <button type="button" class="btn btn-text" [sqxCopy]="inputId">
                                        <i class="icon-copy"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
            
                        <div class="form-group">
                            <label for="fileName">{{ 'common.name' | sqxTranslate }}</label>
                            
                            <sqx-control-errors for="fileName"></sqx-control-errors>
                    
                            <input type="text" class="form-control" id="fileName" formControlName="fileName" spellcheck="false">
                        </div>
                    
                        <div class="form-group">
                            <label for="slug">{{ 'common.slug' | sqxTranslate }}</label>
                            
                            <sqx-control-errors for="slug"></sqx-control-errors>
                    
                            <input type="text" class="form-control slug" id="slug" formControlName="slug" sqxTransformInput="Slugify" spellcheck="false">
            
                            <button type="button" class="btn btn-text-secondary btn-sm slug-generate" (click)="generateSlug()">
                                {{ 'common.generate' | sqxTranslate }}
                            </button>
                        </div>
                    
                        <div class="form-group">
                            <label>{{ 'common.tags' | sqxTranslate }}</label>
                            
                            <sqx-control-errors for="tags"></sqx-control-errors>
            
                            <sqx-tag-editor [suggestions]="allTags" [allowDuplicates]="false" [undefinedWhenEmpty]="false" formControlName="tags"></sqx-tag-editor>
                        </div>
            
                        <div class="form-group">
                            <label>{{ 'assets.metadata' | sqxTranslate }}</label>
            
                            <div class="form-group row no-gutters" *ngFor="let form of annotateForm.metadata.controls; let i = index">
                                <div class="col col-name pr-1">
                                    <sqx-control-errors [for]="form.get('name')" fieldName="Name"></sqx-control-errors>
                
                                    <input type="text" class="form-control" maxlength="1000" [formControl]="form.get('name')" placeholder="{{ 'common.name' | sqxTranslate }}" spellcheck="false">
                                </div>
                
                                <div class="col pr-1">
                                    <sqx-control-errors [for]="form.get('value')" fieldName="Value"></sqx-control-errors>
                
                                    <input type="text" class="form-control" maxlength="1000" [formControl]="form.get('value')" placeholder="{{ 'common.value' | sqxTranslate }}">
                                </div>
            
                                <div class="col-auto col-options">
                                    <button type="button" class="btn btn-text-danger" [disabled]="!isEditable"
                                        (sqxConfirmClick)="annotateForm.removeMetadata(i)"
                                        confirmTitle="i18n:assets.deleteMetadataConfirmTitle"
                                        confirmText="i18n:assets.deleteMetadataConfirmText"
                                        confirmRememberKey="removeAssetMetadata">
                                        <i class="icon-bin2"></i>
                                    </button>
                                </div>
                            </div>
            
                            <div class="form-group">
                                <button type="button" class="btn btn-success" (click)="annotateForm.addMetadata()" [disabled]="!isEditable">
                                    {{ 'assets.metadataAdd' | sqxTranslate }}
                                </button>
                            </div>
                        </div>
                    
                        <div class="form-group custom-control custom-checkbox">
                            <input type="checkbox" class="custom-control-input" id="isProtected" formControlName="isProtected">
            
                            <label class="custom-control-label" for="isProtected">{{ 'assets.protected' | sqxTranslate }}</label>
                        </div>
                    </div>
                </ng-container>
                <ng-container *ngSwitchCase="'i18n:assets.tabHistory'">
                    <sqx-asset-history [asset]="asset"></sqx-asset-history>
                </ng-container>
            </ng-container>
        </ng-container>
    </sqx-modal-dialog>
</form>