datta-register / documents-wp

A documents webpart example.
2 stars 0 forks source link

Bug - Component fails to reload via upload and delete #1

Closed ReconFlux closed 2 years ago

ReconFlux commented 2 years ago

Uncaught (in promise) TypeError: Cannot set properties of undefined (setting '_DT_CellIndex'). When uploading or deleting an attachment item to a list.

Installation:

let Docs = new Documents({ el: _elDoc, listName: strings.Lists.docs, itemId: this._itemID, });

Steps to reproduce:

  1. Upload or Delete a file.

image image

gunjandatta commented 2 years ago

Can you ensure you are using the latest version. I tested the upload and delete in SPO and it's working as designed. Any other information will be helpful to troubleshoot. Are there other earlier console errors?

ReconFlux commented 2 years ago

I updated the dependencies to the latest versions. When the "TEST" button is clicked, that is when the error in the console appears. The Document component does function however its the loading dialog does not close. This is the code that is on the main application inside the last column of a datatable: { // 6 - Documents name: "DocumentsTEST", title: "DocumentsTEST", onRenderCell: (el, column, item: IItem) => { // Render the document column Components.Button({ el, type: Components.ButtonTypes.Primary, text: "TEST", onClick: () => { new DocModal(el, item); } }); } }, The code below is the DocModal component:

import { Modal, Documents } from "dattatable"; import { Components } from "gd-sprest-bs"; import { DataSource, IItem } from "./ds"; import strings from "./strings";

//Templates Modal

// Export export class DocModal { private _el: HTMLElement = null; private _docs: Documents = null; private _eventItem: IItem = null; private _itemID: number;

// Constructor
constructor(el: HTMLElement, item) {
    this._el = el;
    //this._eventItem = item;
    this._itemID = item.Id;
    // Render the modal
    this.render(el);
}

// Render method private render(el: HTMLElement) {

    // Create the Modal Header
   let _elHead = document.createElement("div");
    _elHead.id = "modalHeader";
    _elHead.innerHTML = "Item Documents Folder";
    Modal.setHeader(_elHead);

    let _elDoc = document.createElement("div");
    let Docs = new Documents({
        el: _elDoc,
        listName: strings.Lists.BREvents,
        itemId: this._itemID,

    });
    Modal.setBody(_elDoc);
    // Modal Props
    Modal.setScrollable(true);
    Modal.setType(Components.ModalTypes.XLarge);
    // Show
    Modal.show();
}

}

Hope this helps, I'll continue to provide you more information.

gunjandatta commented 2 years ago

I think there is a little confusion about the properties. Still needing to update the documentation, so no fault on your end.

The documents webpart can target a list item's attachment files, document set folder or document library.

itemId -> Generic List Item's Attachment Files docSetId -> Document Set Folder default -> Document Library

Hope this helps

ReconFlux commented 2 years ago

For this class, it is targeting the item's attachment files.

let Docs = new Documents({ el: _elDoc, listName: strings.Lists.BREvents, itemId: this._itemID,});

I have another class that targets a document library, that class works with no issues.

gunjandatta commented 2 years ago

what type of list is the BREvents list? Is it possible for me to fork this example?

gunjandatta commented 2 years ago

Fixed the issue. It was due to the column def default sort.