mirror of https://github.com/Squidex/squidex.git
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
273 lines
14 KiB
273 lines
14 KiB
<form [formGroup]="annotateForm.form" (ngSubmit)="annotateAsset()">
|
|
<sqx-modal-dialog (dialogClose)="dialogClose.emit()" fullHeight="true" hasTabs="true" showFooter="false" size="xl">
|
|
<ng-container title> {{ "assets.edit" | sqxTranslate }}</ng-container>
|
|
<ng-container tabs>
|
|
<div class="row align-items-center">
|
|
<div class="col">
|
|
<ul class="nav nav-tabs2">
|
|
<li class="nav-item">
|
|
<button class="nav-link" [class.active]="selectedTab === 0" (click)="selectTab(0)" type="button">
|
|
{{ "assets.tabMetadata" | sqxTranslate }}
|
|
</button>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
@if (isImage) {
|
|
<button class="nav-link" [class.active]="selectedTab === 1" (click)="selectTab(1)" type="button">
|
|
{{ "assets.tabImage" | sqxTranslate }}
|
|
</button>
|
|
}
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
@if (isImage) {
|
|
<button class="nav-link" [class.active]="selectedTab === 2" (click)="selectTab(2)" type="button">
|
|
{{ "assets.tabFocusPoint" | sqxTranslate }}
|
|
</button>
|
|
}
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
@if (isDocumentLikely) {
|
|
<button class="nav-link" [class.active]="selectedTab === 3" (click)="selectTab(3)" type="button">
|
|
{{ "assets.tabTextEditor" | sqxTranslate }}
|
|
</button>
|
|
}
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
@if (isVideo || (asset | sqxPreviewable)) {
|
|
<button class="nav-link" [class.active]="selectedTab === 4" (click)="selectTab(4)" type="button">
|
|
{{ "assets.tabPreview" | sqxTranslate }}
|
|
</button>
|
|
}
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<button class="nav-link" [class.active]="selectedTab === 5" (click)="selectTab(5)" type="button">
|
|
{{ "assets.tabHistory" | sqxTranslate }}
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="col-auto">
|
|
@switch (selectedTab) {
|
|
@case (0) {
|
|
<button class="btn btn-primary" [class.invisible]="!isEditable" type="submit">
|
|
{{ "common.save" | sqxTranslate }}
|
|
</button>
|
|
}
|
|
|
|
@case (1) {
|
|
<button
|
|
class="btn btn-primary"
|
|
[class.invisible]="!isUploadable"
|
|
(click)="cropImage()"
|
|
[disabled]="progress > 0"
|
|
type="button"
|
|
type="button"
|
|
type="button"
|
|
type="button"
|
|
type="button">
|
|
{{ "common.upload" | sqxTranslate }}
|
|
</button>
|
|
}
|
|
|
|
@case (2) {
|
|
<button class="btn btn-primary" [class.invisible]="!isEditable" (click)="setFocusPoint()" type="button">
|
|
{{ "common.save" | sqxTranslate }}
|
|
</button>
|
|
}
|
|
|
|
@case (3) {
|
|
<button class="btn btn-primary" [class.invisible]="!isUploadable" (click)="saveText()" type="button">
|
|
{{ "common.upload" | sqxTranslate }}
|
|
</button>
|
|
}
|
|
}
|
|
</div>
|
|
</div>
|
|
</ng-container>
|
|
<ng-container content>
|
|
@switch (selectedTab) {
|
|
@case (0) {
|
|
<div class="metadata">
|
|
<sqx-form-error [error]="annotateForm.error | async" />
|
|
|
|
<sqx-form-row for="folder" hideError label="common.folder" vertical>
|
|
<div class="path">
|
|
@if (isMoving) {
|
|
<form [formGroup]="moveForm.form" (ngSubmit)="moveAsset()">
|
|
<div class="row align-items-center g-2">
|
|
<div class="col"><sqx-asset-folder-dropdown formControlName="parentId" /></div>
|
|
|
|
<div class="col-auto">
|
|
<button class="btn btn-primary" type="submit">{{ "assets.move" | sqxTranslate }}</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
} @else {
|
|
<div class="row align-items-center g-2">
|
|
<div class="col">
|
|
<sqx-asset-path all="true" (navigate)="navigate($event.id)" [path]="pathItems | async" />
|
|
</div>
|
|
|
|
@if (isMoveable) {
|
|
<div class="col-auto">
|
|
<button class="btn btn-outline-secondary" (click)="startMoving()" type="button">
|
|
{{ "assets.move" | sqxTranslate }}
|
|
</button>
|
|
</div>
|
|
}
|
|
</div>
|
|
}
|
|
</div>
|
|
</sqx-form-row>
|
|
|
|
<sqx-form-row for="id" hideError label="common.id" vertical>
|
|
<div class="input-group">
|
|
<input class="form-control" id="id" #inputId name="id" readonly value="{{ asset.id }}" />
|
|
<button
|
|
class="btn btn-outline-secondary"
|
|
attr.aria-label="{{ 'common.copy' | sqxTranslate }}"
|
|
[sqxCopy]="inputId"
|
|
type="button">
|
|
<i class="icon-copy"></i>
|
|
</button>
|
|
</div>
|
|
</sqx-form-row>
|
|
|
|
<sqx-form-row for="url" hideError label="common.url" vertical>
|
|
<div class="input-group">
|
|
<input class="form-control" id="url" #inputUrl name="url" readonly value="{{ asset | sqxAssetUrl: asset.version : false }}" />
|
|
<button
|
|
class="btn btn-outline-secondary"
|
|
attr.aria-label="{{ 'common.copy' | sqxTranslate }}"
|
|
[sqxCopy]="inputUrl"
|
|
type="button">
|
|
<i class="icon-copy"></i>
|
|
</button>
|
|
</div>
|
|
</sqx-form-row>
|
|
|
|
<sqx-form-row for="fileName" label="common.name" required vertical>
|
|
<input class="form-control" id="fileName" formControlName="fileName" spellcheck="false" />
|
|
</sqx-form-row>
|
|
|
|
<sqx-form-row for="slug" label="common.slug" required vertical>
|
|
<input class="form-control slug" id="slug" formControlName="slug" spellcheck="false" sqxTransformInput="Slugify" />
|
|
<button class="btn btn-text-secondary btn-sm slug-generate" (click)="generateSlug()" type="button">
|
|
{{ "common.generate" | sqxTranslate }}
|
|
</button>
|
|
</sqx-form-row>
|
|
|
|
@if (annotateTags | async; as tags) {
|
|
<sqx-form-row for="tags" label="common.tags" vertical>
|
|
<sqx-tag-editor id="tags" allowDuplicates="false" formControlName="tags" [itemsSource]="tags" undefinedWhenEmpty="false" />
|
|
</sqx-form-row>
|
|
}
|
|
|
|
<sqx-form-row for="metadata" hideError label="assets.metadata" vertical>
|
|
@for (form of annotateForm.metadataControls; track form; let i = $index) {
|
|
<div class="metadata-row row g-0" [formGroup]="form">
|
|
<div class="col col-name pe-1">
|
|
<sqx-control-errors for="name" />
|
|
<input
|
|
class="form-control"
|
|
formControlName="name"
|
|
maxlength="1000"
|
|
placeholder="{{ 'common.name' | sqxTranslate }}"
|
|
spellcheck="false" />
|
|
</div>
|
|
|
|
<div class="col pe-1">
|
|
<sqx-control-errors for="value" />
|
|
<input class="form-control" formControlName="value" placeholder="{{ 'common.value' | sqxTranslate }}" />
|
|
</div>
|
|
|
|
<div class="col-auto col-options">
|
|
<button
|
|
class="btn btn-text-danger"
|
|
attr.aria-label="{{ 'common.remove' | sqxTranslate }}"
|
|
confirmRememberKey="removeAssetMetadata"
|
|
confirmText="i18n:assets.deleteMetadataConfirmText"
|
|
confirmTitle="i18n:assets.deleteMetadataConfirmTitle"
|
|
[disabled]="!isEditable"
|
|
(sqxConfirmClick)="annotateForm.metadata.removeAt(i)"
|
|
type="button">
|
|
<i class="icon-bin2"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
}
|
|
|
|
<div>
|
|
<button class="btn btn-success" (click)="annotateForm.metadata.add()" [disabled]="!isEditable" type="button">
|
|
{{ "assets.metadataAdd" | sqxTranslate }}
|
|
</button>
|
|
</div>
|
|
</sqx-form-row>
|
|
|
|
<sqx-form-row check for="isProtected" hideError hint="assets.protectedHint" label="assets.protected" vertical>
|
|
<input class="form-check-input" id="isProtected" formControlName="isProtected" type="checkbox" />
|
|
</sqx-form-row>
|
|
|
|
<hr />
|
|
|
|
<div>
|
|
<a [routerLink]="['../content/__references', asset.id]" target="_blank">
|
|
{{ "assets.viewReferences" | sqxTranslate }}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
}
|
|
|
|
@case (1) {
|
|
<div class="editor">
|
|
<sqx-image-editor [imageSource]="asset | sqxAssetPreviewUrl" />
|
|
@if (progress > 0) {
|
|
<div class="editor-progress">
|
|
<sqx-progress-bar strokeWidth="2" trailColor="transparent" trailWidth="0" [value]="progress" />
|
|
</div>
|
|
}
|
|
</div>
|
|
}
|
|
|
|
@case (2) {
|
|
<div>
|
|
<sqx-image-focus-point [focusPoint]="asset.metadata" [imageSource]="asset | sqxAssetPreviewUrl" />
|
|
@if (progress > 0) {
|
|
<div class="editor-progress">
|
|
<sqx-progress-bar strokeWidth="2" trailColor="transparent" trailWidth="0" [value]="progress" />
|
|
</div>
|
|
}
|
|
</div>
|
|
}
|
|
|
|
@case (3) {
|
|
<div class="editor">
|
|
<sqx-asset-text-editor [fileName]="asset.fileName" [fileSource]="asset | sqxAssetPreviewUrl" [mimeType]="asset.mimeType" />
|
|
@if (progress > 0) {
|
|
<div class="editor-progress">
|
|
<sqx-progress-bar strokeWidth="2" trailColor="transparent" trailWidth="0" [value]="progress" />
|
|
</div>
|
|
}
|
|
</div>
|
|
}
|
|
|
|
@case (4) {
|
|
@if (asset | sqxPreviewable) {
|
|
<ngx-doc-viewer [style]="{}" style="width: 100%; height: 50vh" [url]="asset | sqxAssetPreviewUrl" viewer="google"></ngx-doc-viewer>
|
|
} @else {
|
|
<sqx-video-player [mimeType]="asset.mimeType" [source]="asset | sqxAssetPreviewUrl" />
|
|
}
|
|
}
|
|
|
|
@case (5) {
|
|
<sqx-asset-history [asset]="asset" />
|
|
}
|
|
}
|
|
</ng-container>
|
|
</sqx-modal-dialog>
|
|
</form>
|
|
|