upgrade Angular to v17.1

Lessify · Jan 28, 2024 · 3798bda · 3798bda
1 parent 2cc20aa
commit 3798bda
Show file tree

Hide file tree

Showing 12 changed files with 344 additions and 313 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/app/features/assets/assets.component.html b/src/app/features/assets/assets.component.html
@@ -87,7 +87,7 @@
               height="115"
               loading="lazy"
               alt="thumbnail"
-              ngSrc="/api/v1/spaces/{{ spaceId }}/assets/{{ element.id }}" />
+              ngSrc="/api/v1/spaces/{{ spaceId() }}/assets/{{ element.id }}" />
           </ng-template>
         </ng-container>
       </mat-cell>

diff --git a/src/app/features/assets/assets.component.ts b/src/app/features/assets/assets.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, DestroyRef, inject, Input, OnInit, ViewChild } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, DestroyRef, inject, input, OnInit, ViewChild } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { MatTableDataSource } from '@angular/material/table';
 import { MatDialog } from '@angular/material/dialog';
@@ -42,8 +42,8 @@ export class AssetsComponent implements OnInit {
   @ViewChild(MatSort, { static: false }) sort?: MatSort;
   @ViewChild(MatPaginator, { static: false }) paginator?: MatPaginator;
 
-  @Input({ required: true })
-  spaceId!: string;
+  // Input
+  spaceId = input.required<string>();
 
   private destroyRef = inject(DestroyRef);
   dataSource: MatTableDataSource<Asset> = new MatTableDataSource<Asset>([]);
@@ -79,12 +79,12 @@ export class AssetsComponent implements OnInit {
   ) {}
 
   ngOnInit(): void {
-    this.loadData(this.spaceId);
+    this.loadData(this.spaceId());
 
     this.fileUploadQueue$
       .pipe(
         tap(console.log),
-        concatMap(it => this.assetService.createFile(this.spaceId, this.parentPath, it)),
+        concatMap(it => this.assetService.createFile(this.spaceId(), this.parentPath, it)),
         takeUntilDestroyed(this.destroyRef)
       )
       .subscribe({
@@ -155,7 +155,7 @@ export class AssetsComponent implements OnInit {
       .afterClosed()
       .pipe(
         filter(it => it !== undefined),
-        switchMap(it => this.assetService.createFolder(this.spaceId, this.parentPath, it!))
+        switchMap(it => this.assetService.createFolder(this.spaceId(), this.parentPath, it!))
       )
       .subscribe({
         next: () => {
@@ -190,7 +190,7 @@ export class AssetsComponent implements OnInit {
       .afterClosed()
       .pipe(
         filter(it => it !== undefined),
-        switchMap(it => this.assetService.updateFolder(this.spaceId, element.id, it!))
+        switchMap(it => this.assetService.updateFolder(this.spaceId(), element.id, it!))
       )
       .subscribe({
         next: () => {
@@ -219,7 +219,7 @@ export class AssetsComponent implements OnInit {
       .afterClosed()
       .pipe(
         filter(it => it !== undefined),
-        switchMap(it => this.assetService.updateFile(this.spaceId, element.id, it!))
+        switchMap(it => this.assetService.updateFile(this.spaceId(), element.id, it!))
       )
       .subscribe({
         next: () => {
@@ -248,7 +248,7 @@ export class AssetsComponent implements OnInit {
       .afterClosed()
       .pipe(
         filter(it => it || false),
-        switchMap(() => this.assetService.delete(this.spaceId, element.id))
+        switchMap(() => this.assetService.delete(this.spaceId(), element.id))
       )
       .subscribe({
         next: () => {
@@ -335,14 +335,14 @@ export class AssetsComponent implements OnInit {
       .pipe(
         filter(it => it !== undefined),
         tap(console.log),
-        switchMap(it => this.taskService.createAssetImportTask(this.spaceId, it!.file))
+        switchMap(it => this.taskService.createAssetImportTask(this.spaceId(), it!.file))
       )
       .subscribe({
         next: () => {
           this.notificationService.success('Assets Import Task has been created.', [
             {
               label: 'To Tasks',
-              link: `/features/spaces/${this.spaceId}/tasks`,
+              link: `/features/spaces/${this.spaceId()}/tasks`,
             },
           ]);
         },
@@ -357,20 +357,20 @@ export class AssetsComponent implements OnInit {
       .open<ExportDialogComponent, ExportDialogModel, ExportDialogReturn>(ExportDialogComponent, {
         width: '500px',
         data: {
-          spaceId: this.spaceId,
+          spaceId: this.spaceId(),
         },
       })
       .afterClosed()
       .pipe(
         filter(it => it !== undefined),
-        switchMap(it => this.taskService.createAssetExportTask(this.spaceId, it?.path))
+        switchMap(it => this.taskService.createAssetExportTask(this.spaceId(), it?.path))
       )
       .subscribe({
         next: () => {
           this.notificationService.success('Assets Export Task has been created.', [
             {
               label: 'To Tasks',
-              link: `/features/spaces/${this.spaceId}/tasks`,
+              link: `/features/spaces/${this.spaceId()}/tasks`,
             },
           ]);
         },
@@ -385,7 +385,7 @@ export class AssetsComponent implements OnInit {
     // Prevent Default
     event.preventDefault();
     event.stopImmediatePropagation();
-    window.open(`/api/v1/spaces/${this.spaceId}/assets/${element.id}?download`);
+    window.open(`/api/v1/spaces/${this.spaceId()}/assets/${element.id}?download`);
   }
 
   filesDragAndDrop(event: File[]) {

diff --git a/src/app/features/contents/contents.component.ts b/src/app/features/contents/contents.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, DestroyRef, inject, Input, OnInit, ViewChild } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, DestroyRef, inject, input, Input, OnInit, ViewChild } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { MatTableDataSource } from '@angular/material/table';
 import { MatDialog } from '@angular/material/dialog';
@@ -52,8 +52,8 @@ export class ContentsComponent implements OnInit {
   @ViewChild(MatSort, { static: false }) sort?: MatSort;
   @ViewChild(MatPaginator, { static: false }) paginator?: MatPaginator;
 
-  @Input({ required: true })
-  spaceId!: string;
+  // Input
+  spaceId = input.required<string>();
 
   isLoading = true;
   dataSource: MatTableDataSource<Content> = new MatTableDataSource<Content>([]);
@@ -89,7 +89,7 @@ export class ContentsComponent implements OnInit {
   ) {}
 
   ngOnInit(): void {
-    this.loadData(this.spaceId);
+    this.loadData(this.spaceId());
   }
 
   loadData(spaceId: string): void {
@@ -142,7 +142,7 @@ export class ContentsComponent implements OnInit {
       .afterClosed()
       .pipe(
         filter(it => it !== undefined),
-        switchMap(it => this.contentService.createDocument(this.spaceId, this.parentPath, it!))
+        switchMap(it => this.contentService.createDocument(this.spaceId(), this.parentPath, it!))
       )
       .subscribe({
         next: () => {
@@ -166,7 +166,7 @@ export class ContentsComponent implements OnInit {
       .afterClosed()
       .pipe(
         filter(it => it !== undefined),
-        switchMap(it => this.contentService.createFolder(this.spaceId, this.parentPath, it!))
+        switchMap(it => this.contentService.createFolder(this.spaceId(), this.parentPath, it!))
       )
       .subscribe({
         next: () => {
@@ -194,7 +194,7 @@ export class ContentsComponent implements OnInit {
       .afterClosed()
       .pipe(
         filter(it => it !== undefined),
-        switchMap(it => this.contentService.update(this.spaceId, element.id, this.parentPath, it!))
+        switchMap(it => this.contentService.update(this.spaceId(), element.id, this.parentPath, it!))
       )
       .subscribe({
         next: () => {
@@ -222,7 +222,7 @@ export class ContentsComponent implements OnInit {
       .afterClosed()
       .pipe(
         filter(it => it || false),
-        switchMap(() => this.contentService.delete(this.spaceId, element))
+        switchMap(() => this.contentService.delete(this.spaceId(), element))
       )
       .subscribe({
         next: () => {
@@ -251,7 +251,7 @@ export class ContentsComponent implements OnInit {
       .afterClosed()
       .pipe(
         filter(it => it || false),
-        switchMap(() => this.contentService.cloneDocument(this.spaceId, element))
+        switchMap(() => this.contentService.cloneDocument(this.spaceId(), element))
       )
       .subscribe({
         next: () => {
@@ -289,7 +289,7 @@ export class ContentsComponent implements OnInit {
     if (element.kind === ContentKind.DOCUMENT) {
       element.publishedAt;
       if (this.schemasMap.has(element.schema)) {
-        this.router.navigate(['features', 'spaces', this.spaceId, 'contents', element.id]);
+        this.router.navigate(['features', 'spaces', this.spaceId(), 'contents', element.id]);
       } else {
         this.notificationService.warn(`Content Schema can not be found.`);
       }
@@ -317,10 +317,10 @@ export class ContentsComponent implements OnInit {
   }
 
   openLinksInNewTab() {
-    this.tokenService.findFirst(this.spaceId).subscribe({
+    this.tokenService.findFirst(this.spaceId()).subscribe({
       next: tokens => {
         if (tokens.length === 1) {
-          const url = new URL(`${location.origin}/api/v1/spaces/${this.spaceId}/links`);
+          const url = new URL(`${location.origin}/api/v1/spaces/${this.spaceId()}/links`);
           url.searchParams.set('token', tokens[0].id);
           window.open(url, '_blank');
         } else {
@@ -339,14 +339,14 @@ export class ContentsComponent implements OnInit {
       .pipe(
         filter(it => it !== undefined),
         tap(console.log),
-        switchMap(it => this.taskService.createContentImportTask(this.spaceId, it!.file))
+        switchMap(it => this.taskService.createContentImportTask(this.spaceId(), it!.file))
       )
       .subscribe({
         next: () => {
           this.notificationService.success('Content Import Task has been created.', [
             {
               label: 'To Tasks',
-              link: `/features/spaces/${this.spaceId}/tasks`,
+              link: `/features/spaces/${this.spaceId()}/tasks`,
             },
           ]);
         },
@@ -361,20 +361,20 @@ export class ContentsComponent implements OnInit {
       .open<ExportDialogComponent, ExportDialogModel, ExportDialogReturn>(ExportDialogComponent, {
         width: '500px',
         data: {
-          spaceId: this.spaceId,
+          spaceId: this.spaceId(),
         },
       })
       .afterClosed()
       .pipe(
         filter(it => it !== undefined),
-        switchMap(it => this.taskService.createContentExportTask(this.spaceId, it?.path))
+        switchMap(it => this.taskService.createContentExportTask(this.spaceId(), it?.path))
       )
       .subscribe({
         next: () => {
           this.notificationService.success('Content Export Task has been created.', [
             {
               label: 'To Tasks',
-              link: `/features/spaces/${this.spaceId}/tasks`,
+              link: `/features/spaces/${this.spaceId()}/tasks`,
             },
           ]);
         },

diff --git a/src/app/features/contents/edit-document/edit-document.component.html b/src/app/features/contents/edit-document/edit-document.component.html
@@ -238,6 +238,8 @@
                           }
                           @if (item.cData) {
                             content
+                          } @else {
+                            nothing
                           }
                         </p>
                       </div>

diff --git a/src/app/features/contents/edit-document/edit-document.component.ts b/src/app/features/contents/edit-document/edit-document.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, DestroyRef, HostListener, inject, Input, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, DestroyRef, HostListener, inject, input, OnInit } from '@angular/core';
 import { FormBuilder } from '@angular/forms';
 import { Schema, SchemaFieldKind } from '@shared/models/schema.model';
 import { FormErrorHandlerService } from '@core/error-handler/form-error-handler.service';
@@ -34,10 +34,9 @@ import { ContentHistoryService } from '@shared/services/content-history.service'
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class EditDocumentComponent implements OnInit {
-  @Input({ required: true })
-  spaceId!: string;
-  @Input({ required: true })
-  contentId!: string;
+  // Input
+  spaceId = input.required<string>();
+  contentId = input.required<string>();
 
   showHistory = false;
 
@@ -47,7 +46,6 @@ export class EditDocumentComponent implements OnInit {
   iframeUrl?: SafeUrl;
   availableLocales: Locale[] = [];
   availableLocalesMap: Map<string, string> = new Map<string, string>();
-  entityId: string;
   document?: ContentDocument;
   documentData: ContentData = { _id: '', schema: '' };
   selectedDocumentData: ContentData = { _id: '', schema: '' };
@@ -88,13 +86,11 @@ export class EditDocumentComponent implements OnInit {
     private readonly contentHelperService: ContentHelperService,
     private readonly sanitizer: DomSanitizer,
     readonly fe: FormErrorHandlerService
-  ) {
-    this.entityId = this.activatedRoute.snapshot.paramMap.get('contentId') || '';
-  }
+  ) {}
 
   ngOnInit(): void {
-    this.loadData(this.entityId);
-    this.history$ = this.contentHistoryService.findAll(this.spaceId, this.contentId);
+    this.loadData(this.contentId());
+    this.history$ = this.contentHistoryService.findAll(this.spaceId(), this.contentId());
   }
 
   loadData(contentId: string): void {
@@ -160,7 +156,7 @@ export class EditDocumentComponent implements OnInit {
 
   publish(): void {
     this.isPublishLoading = true;
-    this.contentService.publish(this.selectedSpace!.id, this.entityId).subscribe({
+    this.contentService.publish(this.spaceId(), this.contentId()).subscribe({
       next: () => {
         this.notificationService.success('Content has been published.');
       },
@@ -192,15 +188,13 @@ export class EditDocumentComponent implements OnInit {
 
     if (this.contentErrors.length === 0) {
       if (this.document?.editorEnabled !== this.editorEnabledCtr.value) {
-        this.contentService
-          .updateDocumentEditorEnabled(this.selectedSpace!.id, this.entityId, this.editorEnabledCtr.value || false)
-          .subscribe({
-            next: () => {
-              console.log('updateDocumentEditorEnabled updated');
-            },
-          });
+        this.contentService.updateDocumentEditorEnabled(this.spaceId(), this.contentId(), this.editorEnabledCtr.value || false).subscribe({
+          next: () => {
+            console.log('updateDocumentEditorEnabled updated');
+          },
+        });
       }
-      this.contentService.updateDocumentData(this.selectedSpace!.id, this.entityId, this.documentData).subscribe({
+      this.contentService.updateDocumentData(this.spaceId(), this.contentId(), this.documentData).subscribe({
         next: () => {
           this.notificationService.success('Content has been updated.');
         },
@@ -222,14 +216,14 @@ export class EditDocumentComponent implements OnInit {
   }
 
   back(): void {
-    this.router.navigate(['features', 'spaces', this.spaceId, 'contents']);
+    this.router.navigate(['features', 'spaces', this.spaceId(), 'contents']);
   }
 
   openDraftInNewTab(locale: string): void {
-    this.tokenService.findFirst(this.selectedSpace!.id).subscribe({
+    this.tokenService.findFirst(this.spaceId()).subscribe({
       next: tokens => {
         if (tokens.length === 1) {
-          const url = new URL(`${location.origin}/api/v1/spaces/${this.selectedSpace?.id}/contents/${this.entityId}`);
+          const url = new URL(`${location.origin}/api/v1/spaces/${this.spaceId()}/contents/${this.contentId()}`);
           url.searchParams.set('locale', locale);
           url.searchParams.set('version', 'draft');
           url.searchParams.set('token', tokens[0].id);
@@ -242,10 +236,10 @@ export class EditDocumentComponent implements OnInit {
   }
 
   openPublishedInNewTab(locale: string): void {
-    this.tokenService.findFirst(this.selectedSpace!.id).subscribe({
+    this.tokenService.findFirst(this.spaceId()).subscribe({
       next: tokens => {
         if (tokens.length === 1) {
-          const url = new URL(`${location.origin}/api/v1/spaces/${this.selectedSpace?.id}/contents/${this.entityId}`);
+          const url = new URL(`${location.origin}/api/v1/spaces/${this.spaceId()}/contents/${this.contentId()}`);
           url.searchParams.set('locale', locale);
           url.searchParams.set('token', tokens[0].id);
           window.open(url, '_blank');
-Original file line number
+Diff line change
@@ Expand Up / @@ -238,6 +238,8 @@ @@
                               }
                               @if (item.cData) {
                                 content
+                              } @else {
+                                nothing
                               }
                             </p>
                           </div>
@@ Expand Down @@