widgets-display-shared-files.js

import("./utils.js").then((utils) => {
    import(/* @vite-ignore */utils.coreVersion()).then((core) => {

        core.Sib.register({
            name: "tzcld-shared-files-display",
            use: [core.StoreMixin],
    
            empty() {
            //console.debug();
            this.element.innerHTML = "";
            },
    
            async populate() {
            this.element.innerHTML = `
            <div class="loader">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>`;
            let route_name = this.element.attributes['route-suffix'].value ; 
            let item_width = this.element.attributes['item-width'].value ; 
            //let paginate_by = this.element.attributes['paginate-by'].value ; 
            let tzcldprofile = {
                files: await this.resource["ldp:contains"]
            };
            if("label" in this.element.attributes) {
                for(let ignore of this.element.attributes['label'].value.split(',')) {
                tzcldprofile[ignore.trim()] = null;
                }
            }
            let render = `<div class="segment block margin-top-small margin-bottom-small list-shared-files masonry">`;
            //let i = 0; 
            for(let file of tzcldprofile.files) {
              /*i++;
              if (i > paginate_by) {
                break ;
              }*/
              let icon_content = utils.getSVGFile() ;
              if(await file.document !="") {
                let extention_file = utils.getFileExt(await file.document) ;
                if (extention_file == 'zip') {
                  icon_content = utils.getSVGFolder(); 
                }
              }

              render +=  `<div class="segment ${item_width} card-shared-file">
                            <div class="segment flex bg-color-white shadow border-rounded-xxsmall full text-top whitespace-normal">
                              <div class="segment auto shared-file-icon-wrapper padding-small">
                              ${icon_content}
                              </div>
                              <div class="segment auto shared-file-infos-wrapper padding-top-xxsmall padding-bottom-xxsmall padding-right-small">
              `;

              
                if(await file.name !="") {
                    if(await file.document !="") {
                        render +=  `<h3 class="position text-medium margin-none text-color-heading text-xlarge"><a class="text-color-heading" target="_blank" href="${await file.document}">${await file.name}</a></h3>`;
                    } else {
                        render +=  `<h3 class="position text-medium margin-none text-color-heading text-xlarge">${await file.name}</h3>`;
                    }
                } else {
                    render +=  ``;
                }
                let user = await file.author;
                let date = await file.date;
                let username = 'Anonyme';
                if (await user) {
                  username = await user.name ;
                }
                render +=  `<div class="shared-file-meta-wrapper">${username} <br/>${moment(await date.toString()).locale('fr').format('DD/MM/YYYY')}</div>`;
            
                render +=  `</div>
                          <div class="segment auto shared-file-action-wrapper whitespace-normal">`;
                          if(await file.document !="") {
                            render +=  `<a class="text-color-heading" target="_blank" href="${await file.document}"><span class="icontz-mdi_download-box-outline"></span></a><br/>
                                <solid-ac-checker permission="acl:Write" data-src="${await file['@id']}">
                                  <solid-link data-src="${await file['@id']}" next="${route_name}"><span class="icontz-mdi_pencil-outline text-color-heading"></span></solid-link><br/>
                                  <solid-delete data-src="${await file['@id']}"
                                  confirmation-submit-class="icontz-mdi_trash"
                                  confirmation-submit-text="ttttt"
                                  confirmation-type="confirm"
                                  confirmation-message="Merci de confirmer la suppression du fichier ${await file.name}."
                                  class="icontz-mdi_trash text-color-heading"
                                  ></solid-delete>
                                </solid-ac-checker>`;
                          }
                          render +=  `</div>
                
                  </div>
                </div>`;
            }
            
            render +=  `</div>`;
            
            this.element.innerHTML = render;
            },
        });
    });
});