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">
                    <a class="nav-link" (click)="selectTab(0)" [class.active]="selectedTab === 0">
                        {{ 'assets.tabMetadata' | sqxTranslate }}
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" (click)="selectTab(1)" [class.active]="selectedTab === 1" *ngIf="isImage">
                        {{ 'assets.tabImage' | sqxTranslate }}
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" (click)="selectTab(2)" [class.active]="selectedTab === 2" *ngIf="isImage">
                        {{ 'assets.tabFocusPoint' | sqxTranslate }}
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" (click)="selectTab(3)" [class.active]="selectedTab === 3" *ngIf="isVideo || (asset | sqxPreviewable)">
                        {{ 'assets.tabPreview' | sqxTranslate }}
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" (click)="selectTab(4)" [class.active]="selectedTab === 4">
                        {{ 'assets.tabHistory' | sqxTranslate }}
                    </a>
                </li>
            </ul>
            
            <ng-container [ngSwitch]="selectedTab">
                <ng-container *ngSwitchCase="0">
                    <button type="submit" class="btn btn-primary ml-auto mr-4" [class.invisible]="!isEditable">
                        {{ 'common.save' | sqxTranslate }}
                    </button>
                </ng-container>
                <ng-container *ngSwitchCase="1">
                    <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="2">
                    <button type="button" class="btn btn-primary ml-auto mr-4" (click)="setFocusPoint()" [class.invisible]="!isEditable">
                        {{ 'common.save' | sqxTranslate }}
                    </button>
                </ng-container>
            </ng-container>
        </ng-container>

        <ng-container content>
            <ng-container [ngSwitch]="selectedTab">
                <ng-container *ngSwitchCase="0">
                    <div class="metadata">
                        <sqx-form-error [error]="annotateForm.error | async"></sqx-form-error>

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

                            <div class="path">
                                <sqx-asset-path [path]="path | async" all="true" (navigate)="navigate($event.id)"></sqx-asset-path>
                            </div>
                        </div>

                        <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 no-gutters">
                            <label for="url">{{ 'common.url' | sqxTranslate }}</label>

                            <div class="row no-gutters">
                                <div class="col">
                                    <input readonly class="form-control" name="url" id="url" value="{{asset | sqxAssetUrl:asset.fileVersion:false}}" #inputUrl>
                                </div>
                                <div class="col-auto">
                                    <button type="button" class="btn btn-text" [sqxCopy]="inputUrl">
                                        <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="1">
                    <div class="image">
                        <sqx-image-editor [imageSource]="asset | sqxAssetPreviewUrl"></sqx-image-editor>
                        
                        <div class="image-progress" *ngIf="progress > 0">
                            <sqx-progress-bar
                                [value]="progress"
                                [strokeWidth]="2" 
                                [trailColor]="'transparent'"
                                [trailWidth]="0">
                            </sqx-progress-bar>
                        </div>
                    </div>
                </ng-container>
                <ng-container *ngSwitchCase="2">
                    <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
                                [value]="progress"
                                [strokeWidth]="2" 
                                [trailColor]="'transparent'"
                                [trailWidth]="0">
                            </sqx-progress-bar>
                        </div>
                    </div>
                </ng-container>
                <ng-container *ngSwitchCase="3">
                    <ng-container *ngIf="asset | sqxPreviewable; else video">
                        <ngx-doc-viewer [url]="asset | sqxAssetPreviewUrl" [style]="{}" viewer="google" style="width:100%;height:50vh;"></ngx-doc-viewer>
                    </ng-container>

                    <ng-template #video>
                        <sqx-video-player [source]="asset | sqxAssetPreviewUrl" [mimeType]="asset.mimeType"></sqx-video-player>
                    </ng-template>
                </ng-container>
                <ng-container *ngSwitchCase="4">
                    <sqx-asset-history [asset]="asset"></sqx-asset-history>
                </ng-container>
            </ng-container>
        </ng-container>
    </sqx-modal-dialog>
</form>