/* * Squidex Headless CMS * * @license * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. */ import { HttpClient, HttpErrorResponse, HttpEventType, HttpResponse } from '@angular/common/http'; import { Injectable } from '@angular/core'; import { Observable, throwError } from 'rxjs'; import { catchError, filter, map, tap } from 'rxjs/operators'; import { AnalyticsService, ApiUrlConfig, DateTime, ErrorDto, getLinkUrl, hasAnyLink, HTTP, Metadata, pretifyError, Resource, ResourceLinks, ResultSet, StringHelper, Types, Version, Versioned } from '@app/framework'; import { AuthService } from './auth.service'; import { Query, sanitize } from './query'; const SVG_PREVIEW_LIMIT = 10 * 1024; const MIME_TIFF = 'image/tiff'; const MIME_SVG = 'image/svg+xml'; export class AssetsDto extends ResultSet { public get canCreate() { return hasAnyLink(this._links, 'create'); } public get canRenameTag() { return hasAnyLink(this._links, 'tags/rename'); } } export class AssetDto { public readonly _meta: Metadata = {}; public readonly _links: ResourceLinks; public readonly canDelete: boolean; public readonly canPreview: boolean; public readonly canUpdate: boolean; public readonly canUpload: boolean; public readonly canMove: boolean; public get isDuplicate() { return this._meta && this._meta['isDuplicate'] === 'true'; } public get contentUrl() { return getLinkUrl(this, 'content'); } public get fileNameWithoutExtension() { const index = this.fileName.lastIndexOf('.'); if (index > 0) { return this.fileName.substring(0, index); } else { return this.fileName; } } constructor(links: ResourceLinks, meta: Metadata, public readonly id: string, public readonly created: DateTime, public readonly createdBy: string, public readonly lastModified: DateTime, public readonly lastModifiedBy: string, public readonly version: Version, public readonly fileName: string, public readonly fileHash: string, public readonly fileType: string, public readonly fileSize: number, public readonly fileVersion: number, public readonly isProtected: boolean, public readonly parentId: string, public readonly mimeType: string, public readonly type: string, public readonly metadataText: string, public readonly metadata: any, public readonly slug: string, public readonly tags: ReadonlyArray, ) { this.canPreview = (this.mimeType !== MIME_TIFF && this.type === 'Image') || (this.mimeType === MIME_SVG && this.fileSize < SVG_PREVIEW_LIMIT); this._links = links; this.canDelete = hasAnyLink(links, 'delete'); this.canUpdate = hasAnyLink(links, 'update'); this.canUpload = hasAnyLink(links, 'upload'); this.canMove = hasAnyLink(links, 'move'); this._meta = meta; } public fullUrl(apiUrl: ApiUrlConfig, authService?: AuthService) { let url = apiUrl.buildUrl(this.contentUrl); if (this.isProtected && authService && authService.user) { url = StringHelper.appendToUrl(url, 'access_token', authService.user.accessToken); } return url; } } export class AssetFoldersDto extends ResultSet { constructor(total: number, items: ReadonlyArray, public readonly path: ReadonlyArray, links?: ResourceLinks, ) { super(total, items, links); } public get canCreate() { return hasAnyLink(this._links, 'create'); } } export class AssetFolderDto { public readonly _links: ResourceLinks; public readonly canDelete: boolean; public readonly canUpdate: boolean; public readonly canMove: boolean; constructor(links: ResourceLinks, public readonly id: string, public readonly folderName: string, public readonly parentId: string, public readonly version: Version, ) { this._links = links; this.canDelete = hasAnyLink(links, 'delete'); this.canUpdate = hasAnyLink(links, 'update'); this.canMove = hasAnyLink(links, 'move'); } } type Tags = readonly string[]; type AssetFolderScope = 'PathAndItems' | 'Path' | 'Items'; type AssetMetadata = { [key: string]: any }; export type AssetCompletions = ReadonlyArray<{ path: string; description: string; type: string }>; export type AnnotateAssetDto = Readonly<{ fileName?: string; isProtected?: boolean; slug?: string; tags?: Tags; metadata?: AssetMetadata }>; export type CreateAssetFolderDto = Readonly<{ folderName: string } & MoveAssetItemDto>; export type RenameAssetFolderDto = Readonly<{ folderName: string }>; export type RenameAssetTagDto = Readonly<{ tagName: string }>; export type MoveAssetItemDto = Readonly<{ parentId?: string }>; export type AssetsQuery = Readonly<{ noTotal?: boolean; noSlowTotal?: boolean }>; export type AssetsByRef = Readonly<{ ref: string }>; export type AssetsByIds = Readonly<{ ids: ReadonlyArray }>; export type AssetsByQuery = Readonly<{ query?: Query; skip?: number; tags?: Tags; take?: number; parentId?: string }>; @Injectable() export class AssetsService { constructor( private readonly http: HttpClient, private readonly apiUrl: ApiUrlConfig, private readonly analytics: AnalyticsService, ) { } public putTag(appName: string, name: string, dto: RenameAssetTagDto): Observable<{ [name: string]: number }> { const url = this.apiUrl.buildUrl(`api/apps/${appName}/assets/tags/${encodeURIComponent(name)}`); return this.http.put<{ [name: string]: number }>(url, dto).pipe( pretifyError('i18n:assets.renameTagFailed')); } public getTags(appName: string): Observable<{ [name: string]: number }> { const url = this.apiUrl.buildUrl(`api/apps/${appName}/assets/tags`); return this.http.get<{ [name: string]: number }>(url).pipe( pretifyError('i18n:assets.loadTagsFailed')); } public getAssets(appName: string, q?: AssetsQuery & (AssetsByQuery | AssetsByIds | AssetsByRef)): Observable { const body = buildQuery(q as any); const url = this.apiUrl.buildUrl(`api/apps/${appName}/assets/query`); return this.http.post(url, body, buildHeaders(q, q?.['ref'])).pipe( map(body => { return parseAssets(body); }), pretifyError('i18n:assets.loadFailed')); } public getAssetFolders(appName: string, parentId: string, scope: AssetFolderScope): Observable { const url = this.apiUrl.buildUrl(`api/apps/${appName}/assets/folders?parentId=${parentId}&scope=${scope}`); return this.http.get(url).pipe( map(body => { return parseAssetFolders(body); }), pretifyError('i18n:assets.loadFoldersFailed')); } public getAsset(appName: string, id: string): Observable { const url = this.apiUrl.buildUrl(`api/apps/${appName}/assets/${id}`); return HTTP.getVersioned(this.http, url).pipe( map(({ payload }) => { return parseAsset(payload.body); }), pretifyError('i18n:assets.loadFailed')); } public postAssetFile(appName: string, file: Blob, parentId?: string): Observable { let url = this.apiUrl.buildUrl(`api/apps/${appName}/assets`); if (parentId) { url += `?parentId=${parentId}`; } return HTTP.upload(this.http, 'POST', url, file).pipe( filter(event => event.type === HttpEventType.UploadProgress || event.type === HttpEventType.Response), map(event => { if (event.type === HttpEventType.UploadProgress) { const percentDone = event.total ? Math.round(100 * event.loaded / event.total) : 0; return percentDone; } else if (Types.is(event, HttpResponse)) { return parseAsset(event.body); } else { throw new Error('Invalid'); } }), catchError((error: any) => { if (Types.is(error, HttpErrorResponse) && error.status === 413) { return throwError(() => new ErrorDto(413, 'i18n:assets.fileTooBig')); } else { return throwError(() => error); } }), tap(value => { if (!Types.isNumber(value)) { this.analytics.trackEvent('Asset', 'Uploaded', appName); } }), pretifyError('i18n:assets.uploadFailed')); } public putAssetFile(appName: string, resource: Resource, file: Blob, version: Version): Observable { const link = resource._links['upload']; const url = this.apiUrl.buildUrl(link.href); return HTTP.upload(this.http, link.method, url, file, version).pipe( filter(event => event.type === HttpEventType.UploadProgress || event.type === HttpEventType.Response), map(event => { if (event.type === HttpEventType.UploadProgress) { const percentDone = event.total ? Math.round(100 * event.loaded / event.total) : 0; return percentDone; } else if (Types.is(event, HttpResponse)) { return parseAsset(event.body); } else { throw new Error('Invalid'); } }), catchError(error => { if (Types.is(error, HttpErrorResponse) && error.status === 413) { return throwError(() => new ErrorDto(413, 'i18n:assets.fileTooBig')); } else { return throwError(() => error); } }), tap(value => { if (!Types.isNumber(value)) { this.analytics.trackEvent('Asset', 'Replaced', appName); } }), pretifyError('i18n:assets.replaceFailed')); } public postAssetFolder(appName: string, dto: CreateAssetFolderDto): Observable { const url = this.apiUrl.buildUrl(`api/apps/${appName}/assets/folders`); return HTTP.postVersioned(this.http, url, dto).pipe( map(({ payload }) => { return parseAssetFolder(payload.body); }), tap(() => { this.analytics.trackEvent('AssetFolder', 'Updated', appName); }), pretifyError('i18n:assets.createFolderFailed')); } public putAsset(appName: string, resource: Resource, dto: AnnotateAssetDto, version: Version): Observable { const link = resource._links['update']; const url = this.apiUrl.buildUrl(link.href); return HTTP.requestVersioned(this.http, link.method, url, version, dto).pipe( map(({ payload }) => { return parseAsset(payload.body); }), tap(() => { this.analytics.trackEvent('Asset', 'Updated', appName); }), pretifyError('i18n:assets.updateFailed')); } public putAssetFolder(appName: string, resource: Resource, dto: RenameAssetFolderDto, version: Version): Observable { const link = resource._links['update']; const url = this.apiUrl.buildUrl(link.href); return HTTP.requestVersioned(this.http, link.method, url, version, dto).pipe( map(({ payload }) => { return parseAssetFolder(payload.body); }), tap(() => { this.analytics.trackEvent('AssetFolder', 'Updated', appName); }), pretifyError('i18n:assets.updateFolderFailed')); } public putAssetItemParent(appName: string, resource: Resource, dto: MoveAssetItemDto, version: Version): Observable> { const link = resource._links['move']; const url = this.apiUrl.buildUrl(link.href); return HTTP.requestVersioned(this.http, link.method, url, version, dto).pipe( tap(() => { this.analytics.trackEvent('Asset', 'Moved', appName); }), pretifyError('i18n:assets.moveFailed')); } public deleteAssetItem(appName: string, asset: Resource, checkReferrers: boolean, version: Version): Observable> { const link = asset._links['delete']; const url = `${this.apiUrl.buildUrl(link.href)}?checkReferrers=${checkReferrers}`; return HTTP.requestVersioned(this.http, link.method, url, version).pipe( tap(() => { this.analytics.trackEvent('Asset', 'Deleted', appName); }), pretifyError('i18n:assets.deleteFailed')); } public getCompletions(appName: string): Observable { const url = this.apiUrl.buildUrl(`api/apps/${appName}/assets/completion`); return this.http.get(url); } } function buildHeaders(q: AssetsQuery | undefined, noTotal: boolean) { let options = { headers: {}, }; if (q?.noTotal || noTotal) { options.headers['X-NoTotal'] = '1'; } if (q?.noSlowTotal) { options.headers['X-NoSlowTotal'] = '1'; } return options; } function buildQuery(q?: AssetsQuery & AssetsByQuery & AssetsByIds & AssetsByRef) { const { ids, parentId, query, ref, skip, tags, take } = q || {}; const body: any = {}; if (parentId) { body.parentId = parentId; } if (ref) { const queryObj: Query = { filter: { or: [{ path: 'id', op: 'eq', value: ref, }, { path: 'slug', op: 'eq', value: ref, }], }, take: 1, }; body.q = sanitize(queryObj); } else if (Types.isArray(ids)) { body.ids = ids; } else { const queryObj: Query = {}; const filters: any[] = []; if (query && query.fullText && query.fullText.length > 0) { filters.push({ path: 'fileName', op: 'contains', value: query.fullText }); } if (tags) { for (const tag of tags) { if (tag && tag.length > 0) { filters.push({ path: 'tags', op: 'eq', value: tag }); } } } if (filters.length > 0) { queryObj.filter = { and: filters }; } if (take && take > 0) { queryObj.take = take; } if (skip && skip > 0) { queryObj.skip = skip; } body.q = sanitize(queryObj); } return body; } function parseAssets(response: { items: any[]; total: number } & Resource) { const items = response.items.map(parseAsset); return new AssetsDto(response.total, items, response._links); } function parseAsset(response: any) { return new AssetDto(response._links, response._meta, response.id, DateTime.parseISO(response.created), response.createdBy, DateTime.parseISO(response.lastModified), response.lastModifiedBy, new Version(response.version.toString()), response.fileName, response.fileHash, response.fileType, response.fileSize, response.fileVersion, response.isProtected, response.parentId, response.mimeType, response.type, response.metadataText, response.metadata, response.slug, response.tags || []); } function parseAssetFolders(response: { items: any[]; path: any[]; total: number } & Resource) { const assetFolders = response.items.map(parseAssetFolder); const assetPath = response.path.map(parseAssetFolder); return new AssetFoldersDto(response.total, assetFolders, assetPath, response._links); } function parseAssetFolder(response: any) { return new AssetFolderDto(response._links, response.id, response.folderName, response.parentId, new Version(response.version.toString())); }