chore(edit-content): Add docs #30215

dotCMS · Nov 5, 2024 · 473820a · 473820a
1 parent 49da66b
commit 473820a
Show file tree

Hide file tree

Showing 6 changed files with 58 additions and 11 deletions.
diff --git a/...d/components/dot-select-existing-file/components/dot-dataview/dot-dataview.component.html b/...d/components/dot-select-existing-file/components/dot-dataview/dot-dataview.component.html
@@ -3,7 +3,7 @@
     [loading]="$loading()"
     [paginator]="true"
     [rows]="7"
-    styleClass="p-datatable-lg flex flex-column h-full justify-content-between overflow-hidden">
+    styleClass="p-datatable-lg flex flex-column h-full justify-content-between">
     <ng-template pTemplate="caption">
         <div class="flex">
             <p-iconField iconPosition="left">

diff --git a/...eld/components/dot-select-existing-file/components/dot-sidebar/dot-sidebar.component.scss b/...eld/components/dot-select-existing-file/components/dot-sidebar/dot-sidebar.component.scss
@@ -0,0 +1,4 @@
+:host {
+    height: 100%;
+    display: flex;
+}
diff --git a/...field/components/dot-select-existing-file/components/dot-sidebar/dot-sidebar.component.ts b/...field/components/dot-select-existing-file/components/dot-sidebar/dot-sidebar.component.ts
@@ -6,13 +6,12 @@ import {
     inject,
     input,
     output,
-    signal,
-    viewChild
+    signal
 } from '@angular/core';
 
 import { TreeNode } from 'primeng/api';
 import { SkeletonModule } from 'primeng/skeleton';
-import { Tree, TreeModule, TreeNodeExpandEvent } from 'primeng/tree';
+import { TreeModule, TreeNodeExpandEvent } from 'primeng/tree';
 
 import { TruncatePathPipe } from '../../../../../../pipes/truncate-path.pipe';
 
@@ -25,22 +24,60 @@ import { TruncatePathPipe } from '../../../../../../pipes/truncate-path.pipe';
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class DotSideBarComponent {
+    /**
+     * A readonly private field that holds an instance of ChangeDetectorRef.
+     * This is used to detect and respond to changes in the component's data-bound properties.
+     */
+    readonly #cd = inject(ChangeDetectorRef);
+    /**
+     * An observable that emits an array of TreeNode objects representing the folders.
+     *
+     * @type {Observable<TreeNode[]>}
+     * @alias folders
+     */
     $folders = input.required<TreeNode[]>({ alias: 'folders' });
+    /**
+     * A boolean observable that indicates the loading state.
+     *
+     * @type {boolean}
+     */
     $loading = input.required<boolean>({ alias: 'loading' });
 
+    /**
+     * Signal that generates an array of strings representing percentages.
+     * Each percentage is a random value between 75% and 100%.
+     * The array contains 50 elements.
+     *
+     * @returns {string[]} An array of 50 percentage strings.
+     */
     $fakeColumns = signal<string[]>(
         Array.from({ length: 50 }).map((_) => `${this.getRandomRange(75, 100)}%`)
     );
 
+    /**
+     * Event emitter for when a tree node is expanded.
+     *
+     * This event is triggered when a user expands a node in the tree structure.
+     * It emits an event of type `TreeNodeExpandEvent`.
+     */
     onNodeExpand = output<TreeNodeExpandEvent>();
 
-    readonly #cd = inject(ChangeDetectorRef);
-    $tree = viewChild.required(Tree);
-
+    /**
+     * Triggers change detection manually.
+     * This method is used to ensure that the view is updated when the model changes.
+     * It calls the `detectChanges` method on the ChangeDetectorRef instance.
+     */
     detectChanges() {
         this.#cd.detectChanges();
     }
 
+    /**
+     * Generates a random integer within a specified range.
+     *
+     * @param max - The maximum value of the range (inclusive).
+     * @param min - The minimum value of the range (inclusive).
+     * @returns A random integer between min and max (both inclusive).
+     */
     getRandomRange(max: number, min: number) {
         return Math.floor(Math.random() * (max - min + 1) + min);
     }

diff --git a/...tent-file-field/components/dot-select-existing-file/dot-select-existing-file.component.ts b/...tent-file-field/components/dot-select-existing-file/dot-select-existing-file.component.ts
@@ -44,6 +44,12 @@ export class DotSelectExistingFileComponent implements OnInit {
      */
     readonly #dialogRef = inject(DynamicDialogRef);
 
+    /**
+     * Reference to the DotSideBarComponent instance.
+     * This is used to interact with the sidebar component within the template.
+     *
+     * @type {DotSideBarComponent}
+     */
     $sideBarRef = viewChild.required(DotSideBarComponent);
 
     constructor() {

diff --git a/...ontent-file-field/components/dot-select-existing-file/store/select-existing-file.store.ts b/...ontent-file-field/components/dot-select-existing-file/store/select-existing-file.store.ts
@@ -18,7 +18,7 @@ import {
 } from '../../../../../models/dot-edit-content-host-folder-field.interface';
 import { DotEditContentService } from '../../../../../services/dot-edit-content.service';
 
-export const PEER_PAGE_LIMIT = 500;
+export const PEER_PAGE_LIMIT = 1000;
 
 export interface Content {
     id: string;
@@ -98,7 +98,7 @@ export const SelectExisingFileStore = signalStore(
                     ),
                     switchMap(() => {
                         return dotEditContentService
-                            .getSitesTreePath({ perPage: PEER_PAGE_LIMIT, filter: '*', page: 0 })
+                            .getSitesTreePath({ perPage: PEER_PAGE_LIMIT, filter: '*' })
                             .pipe(
                                 tapResponse({
                                     next: (data) =>

diff --git a/core-web/libs/edit-content/src/lib/services/dot-edit-content.service.ts b/core-web/libs/edit-content/src/lib/services/dot-edit-content.service.ts
@@ -77,8 +77,8 @@ export class DotEditContentService {
      */
     getSitesTreePath(data: {
         filter: string;
-        perPage: number;
-        page: number;
+        perPage?: number;
+        page?: number;
     }): Observable<TreeNodeItem[]> {
         const { filter, perPage, page } = data;