topic Re: File view component - documentLibrary in Alfresco Forum

File view component - documentLibrary

rsocorro — Tue, 21 Aug 2018 22:39:43 GMT

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 =>

Re: File view component - documentLibrary

eugenio_romano — Thu, 30 Aug 2018 11:18:37 GMT

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

Re: File view component - documentLibrary

joreun — Sun, 02 Sep 2018 03:04:56 GMT

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

Re: File view component - documentLibrary

rsocorro — Sun, 02 Sep 2018 22:44:34 GMT

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>

Re: File view component - documentLibrary

rsocorro — Sun, 02 Sep 2018 22:45:25 GMT

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

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

Re: File view component - documentLibrary

eugenio_romano — Mon, 03 Sep 2018 13:56:27 GMT

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

Re: File view component - documentLibrary

rsocorro — Mon, 03 Sep 2018 22:41:10 GMT

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">

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

Re: File view component - documentLibrary

eugenio_romano — Tue, 04 Sep 2018 09:57:09 GMT

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

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

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.component.md#document-list-aliasesDocument List aliases

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

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

Re: File view component - documentLibrary

joreun — Tue, 04 Sep 2018 13:23:49 GMT

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.

Re: File view component - documentLibrary

eugenio_romano — Tue, 04 Sep 2018 13:46:52 GMT

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.

Re: File view component - documentLibrary

joreun — Tue, 04 Sep 2018 15:07:20 GMT

You are right Eugenio, changing default code [currentFolderId]="'-my-'" with [currentFolderId]="currentFolderId" has been the solution.

Thank you very much.

Best regards,

Joël

Re: File view component - documentLibrary

rsocorro — Tue, 30 Oct 2018 03:50:21 GMT

Have you solved your problem regarding this one? because I'm getting an "ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: '-root-'. Current value: '-my-'." error with that, or is it because we're using different adf version?

Re: File view component - documentLibrary

rsocorro — Tue, 30 Oct 2018 03:53:17 GMT

never mind got it working now.