File view component - documentLibrary

cancel
Showing results for 
Search instead for 
Did you mean: 
Highlighted
Active Member II

File view component - documentLibrary

Jump to solution

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.

1 Solution

Accepted Solutions
Highlighted
Alfresco Employee

Re: File view component - documentLibrary

Jump to 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.

View solution in original post

12 Replies
Highlighted
Alfresco Employee

Re: File view component - documentLibrary

Jump to solution

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

Highlighted
Active Member

Re: File view component - documentLibrary

Jump to solution

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

Highlighted
Active Member II

Re: File view component - documentLibrary

Jump to solution

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>

Highlighted
Active Member II

Re: File view component - documentLibrary

Jump to solution

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 });
    }
}

Highlighted
Alfresco Employee

Re: File view component - documentLibrary

Jump to solution

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

Highlighted
Active Member II

Re: File view component - documentLibrary

Jump to solution

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);
      }
  }

Highlighted
Alfresco Employee

Re: File view component - documentLibrary

Jump to solution

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-
Highlighted
Active Member

Re: File view component - documentLibrary

Jump to solution

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.

Highlighted
Alfresco Employee

Re: File view component - documentLibrary

Jump to 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.

View solution in original post