File view component - documentLibrary

[rsocorro]

I tried this code,

ngOnInit() {         let nodes: any = this.apiService.getInstance().nodes;         nodes.getNodeInfo('-root-', {             includeSource: true,             include: ['path', 'properties'],             relativePath: '/Sites/swsdp/documentLibrary'        })         .then(node => {             console.log(node);             this.currentFolderId = node.id;             this.changeDetector.detectChanges();         });     }

to set my default folder to be the documentLibrary, but nothing happens, I still need to browse sites, then swsdp to access documentLibrary.

[eugenio_romano]

   Hi Roman can you please post your ts and HTML code well formatted for a better help?

[rsocorro]

Hi Eugenio, as joreun mentioned below, I am also trying the "Setting default folder" in the DocumentList Component documentation.

This is my file-view.component.html file which i didn't touch at all

<ng-container *ngIf="nodeId">

    <ng-template let-node="node" #sidebarTemplate>
        <adf-info-drawer [title]="'APP.INFO_DRAWER.TITLE' | translate">
            <adf-info-drawer-tab [label]="'APP.INFO_DRAWER.COMMENTS' | translate">
                <adf-comments [nodeId]="nodeId"></adf-comments>
            </adf-info-drawer-tab>

            <adf-info-drawer-tab [label]="'APP.INFO_DRAWER.PROPERTIES' | translate">
                <adf-content-metadata-card [node]="node"></adf-content-metadata-card>
            </adf-info-drawer-tab>

            <adf-info-drawer-tab [label]="'APP.INFO_DRAWER.VERSIONS' | translate">
                <mat-card>
                    <mat-card-content>
                        <adf-version-manager [node]="node"
                                             (uploadError)="uploadError($event)">
                        </adf-version-manager>
                    </mat-card-content>
                </mat-card>
            </adf-info-drawer-tab>
        </adf-info-drawer>
    </ng-template>

    <adf-viewer [nodeId]="nodeId" [allowSidebar]="true" [sidebarTemplate]="sidebarTemplate">

        <adf-viewer-toolbar-actions>
            <button mat-icon-button>
                <mat-icon>alarm</mat-icon>
            </button>
            <button mat-icon-button>
                <mat-icon>backup</mat-icon>
            </button>
            <button mat-icon-button>
                <mat-icon>bug_report</mat-icon>
            </button>
        </adf-viewer-toolbar-actions>

    </adf-viewer>
</ng-container>

[rsocorro]

and this is my file-view.component.ts default file

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { AlfrescoApiService } from '@alfresco/adf-core';
import { MatSnackBar } from '@angular/material';

@Component({
    selector: 'app-file-view',
    templateUrl: 'file-view.component.html',
    styleUrls: ['file-view.component.scss'],
    encapsulation: ViewEncapsulation.None
})
export class FileViewComponent implements OnInit {

    nodeId: string = null;
    currentFolderId: string = '-my-';

    constructor(private router: Router,
                private route: ActivatedRoute,
                private snackBar: MatSnackBar,
                private apiService: AlfrescoApiService) {
    }

     ngOnInit() {

        this.route.params.subscribe(params => {
            const id = params.nodeId;
            if (id) {
                this.apiService.getInstance().nodes.getNodeInfo(id).then(
                    (node) => {
                        if (node && node.isFile) {
                            this.nodeId = id;
                            return;
                        }
                        this.router.navigate(['/files', id]);
                    },
                    () => this.router.navigate(['/files', id])
                );
            }
        });
    }

    onUploadError(errorMessage: string) {
        this.snackBar.open(errorMessage, '', { duration: 4000 });
    }

and this is my updated file-view.component.ts file that I followed in the documentation

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { AlfrescoApiService } from '@alfresco/adf-core';
import { MatSnackBar } from '@angular/material';
import { ChangeDetectorRef } from '@angular/core';

@Component({
    selector: 'app-file-view',
    templateUrl: 'file-view.component.html',
    styleUrls: ['file-view.component.scss'],
    encapsulation: ViewEncapsulation.None
})
export class FileViewComponent implements OnInit {

    nodeId: string = null;
    currentFolderId: string = '-my-';

    constructor(private router: Router,
                private route: ActivatedRoute,
                private snackBar: MatSnackBar,
                private apiService: AlfrescoApiService,
                private changeDetector: ChangeDetectorRef) {
    }

    ngOnInit() {
        let nodes: any = this.apiService.getInstance().nodes;
        nodes.getNodeInfo('-root-', {
            includeSource: true,
            include: ['path', 'properties'],
            relativePath: '/Sites/swsdp/documentLibrary'
        })
        .then(node => {
            console.log(node);
            this.currentFolderId = node.id;
            this.changeDetector.detectChanges();
        });
    }
    
    onUploadError(errorMessage: string) {
        this.snackBar.open(errorMessage, '', { duration: 4000 });
    }
}

[joreun]

Hi Eugenio,

I encounter the same problem than Roman.

We are trying the sample that is provided at chapter "setting default folder" in the page DocumenList Component 

import { ChangeDetectorRef } from '@angular/core';
import { AlfrescoApiService } from '@alfresco/adf-core';

export class FilesComponent implements OnInit {
    currentFolderId: string = '-my-';
    constructor(private apiService: AlfrescoApiService,
                private changeDetector: ChangeDetectorRef) {
        // ...
    }

    ngOnInit() {
        let nodes: any = this.apiService.getInstance().nodes;
        nodes.getNodeInfo('-root-', {
            includeSource: true,
            include: ['path', 'properties'],
            relativePath: '/Sites/swsdp/documentLibrary'
        })
        .then(node => {
            console.log(node);
            this.currentFolderId = node.id;
            this.changeDetector.detectChanges();
        });
    }
}

I also tried to change the initialisation adding "this.documentList.currentFolderId = node.id;". When debugging the js, the properties are well changed but this has no impact, the root is still displayed. It seems that "this.changeDetector.detectChanges();" has no effect.

Note also that I have used "export class DocumentlistComponent implements OnInit {...}" instead of the proposed sample "export class FilesComponent implements OnInit {...}"
As I am a beginner with Angular, could you indicate what is missing ?

Regards,

Joël

[eugenio_romano]

Sorry guys I don't see on all those files where you use the <adf-document-list> maybe is better if you create an example sandbox in GitHub in order to have a better global vision or your use case

[rsocorro]

Hi Eugenio, the tag <adf-document-list> is in the documentlist.component.html file if you're wondering.

documentlist.component.html file

<adf-toolbar>
  <adf-toolbar-title>
    <adf-breadcrumb
      class="files-breadcrumb"
      root="Personal Files"
      [target]="documentList"
      [folderNode]="documentList.folderNode">
    </adf-breadcrumb>
  </adf-toolbar-title>

  <div class="adf-toolbar--spacer"></div>

  <adf-upload-button
    [rootFolderId]="documentList.currentFolderId || '-root-'"
    [adf-node-permission]="'create'"
    (success)="uploadSuccess($event)">
  </adf-upload-button>

</adf-toolbar>

<adf-document-list
  #documentList
  currentFolderId="-root-"
  (preview)="showPreview($event)"
 
  contextMenuActions="true"
  contentActions="true">
  <!-- Folder actions -->
  <content-actions>
     <content-action
        title="Copy"
        [icon]="'content_copy'"
        [target]="'folder'"
        [handler]="'copy'"
        permission="update"
        (error)="onContentActionError($event)"
        (success)="onContentActionSuccess($event)">
     </content-action>
     <content-action
        title="Move"
        [icon]="'redo'"
        [target]="'folder'"
        [handler]="'move'"
        permission="update"
        (error)="onContentActionError($event)"
        (success)="onContentActionSuccess($event)">
     </content-action>
     <content-action
        title="Delete"
        [icon]="'delete'"
        [target]="'folder'"
        [handler]="'delete'"
        permission="update"
        (execute)="myCustomActionAfterDelete($event)">
     </content-action>
     <!-- File actions -->
     <content-action
        title="Copy"
        [icon]="'content_copy'"
        [target]="'document'"
        [handler]="'copy'"
        permission="update"
        (error)="onContentActionError($event)"
        (success)="onContentActionSuccess($event)">
     </content-action>
     <content-action
        title="Move"
        [icon]="'redo'"
        [target]="'document'"
        [handler]="'move'"
        permission="update"
        (error)="onContentActionError($event)"
        (success)="onContentActionSuccess($event)">
     </content-action>
     <content-action
        title="Delete"
        [icon]="'delete'"
        [target]="'document'"
        [handler]="'delete'"
        permission="delete"
        (execute)="myCustomActionAfterDelete($event)">
     </content-action>
  </content-actions>
</adf-document-list>

<adf-file-uploading-dialog></adf-file-uploading-dialog>

documentlist.component.ts file

import { Component, ViewChild, Input } from '@angular/core';
import { NotificationService } from '@alfresco/adf-core';
import { DocumentListComponent } from '@alfresco/adf-content-services';
import { PreviewService } from '../services/preview.service';

@Component({
  selector: 'app-documentlist',
  templateUrl: './documentlist.component.html',
  styleUrls: ['./documentlist.component.css']
})
export class DocumentlistComponent {

  @Input()
  showViewer: boolean = false;
  nodeId: string = null;

  @ViewChild('documentList')
  documentList: DocumentListComponent;

  constructor(private notificationService: NotificationService, private preview: PreviewService) {

  }

  uploadSuccess(event: any) {
    this.notificationService.openSnackMessage('File uploaded');
    this.documentList.reload();
  }

  showPreview(event) {
    const entry = event.value.entry;
    if (entry && entry.isFile) {
      this.preview.showResource(entry.id);
    }
  }

  onGoBack(event: any) {
    this.showViewer = false;
    this.nodeId = null;
  }
 
  onContentActionError(event){
    this.notificationService.openSnackMessage('The action cannot be completed. A file with the same name already exists.', 2500)
  }
 
  onContentActionSuccess(event){
    this.notificationService.openSnackMessage('The action has been completed.', 2500)
  }
 
  myCustomActionAfterDelete(event){
      let entry = event.value.entry;
      let item = "";
      if (entry.isFile){
          item = "File";
      }else if (entry.isFolder){
          item = "Folder";
      }
      
      this.notificationService.openSnackMessage(`${item} called "${entry.name}" was deleted.`, 2500);
      }
  }

[eugenio_romano]

I hope to understand your probnlem, so as per documentation : 

alfresco-ng2-components/document-list.component.md at master · Alfresco/alfresco-ng2-components · Gi... 

In order to change the Folder that you want to show in the document list, you need to change the input parameter currentFolderId  of the <adf-document-list>.

For example:

<adf-document-list
    [currentFolderId]="'-my-'"
    [display]="'gallery'">
</adf-document-list>‍‍‍‍

You can use as currentFolderId a nodeId or :

Repository aliases

You can use one of the well-known reserved aliases:

• -root-
• -shared-
• -my-

https://github.com/Alfresco/alfresco-ng2-components/blob/master/docs/content-services/document-list....Document List aliases

The Document List component also provides support for the following reserved aliases:

• -trashcan-,
• -sharedlinks-
• -sites-
• -mysites-
• -favorites-
• -recent-

[joreun]

Hi Eugenio,
What you indicate only concerns predefined known aliases.
But what we want to acheive is to access a more dynamic path as the example /Sites/swsdp/documentLibrary that is mentionned in the chapter "setting default folder" of wiki DocumenList Component
We do not succes to make this given example working.

Note that Roman and me are testing in 2 different manners :

My personal method is :
-1- Generate the default application by following creating-your-adf-application (so to use the last ADF version 2.5.0)
-2- Apply the proposed wiki modification to the generated src/app/documentlist/documentlist.component.ts
So, in my case, the ngOnInit function is added on the DocumentlistComponent class and not to the FilesComponent class that is mentionned in the wiki.
I don't know if this could my problem.

Concerning Roman, it seems that he uses a different sample (with different ADF version ?) because he tries to add the ngOnInit function on a default existing FileViewComponent class.

I hope that this will better clarify our problems.

[eugenio_romano · Accepted solution]

I guess you didn't assigned to the document list your new currentFolderId calculated in the init:

<adf-document-list
  #documentList
  [currentFolderId]="currentFolderId">‍‍‍

you have always root as value in the currentFolderId.