diff --git a/src/index.js b/src/index.js index 253d942817853ce79fae7ffd81ebab13a9c9ace1..400e160aefd6cd13541e63cbf93a370197c5a47d 100644 --- a/src/index.js +++ b/src/index.js @@ -20,6 +20,7 @@ core.Helpers.importCSS(utils.path() + '/styles/tzcld-icons.css?min'); core.Helpers.importCSS(utils.path() + '/styles/margins.css?min'); core.Helpers.importCSS(utils.path() + '/styles/paddings.css?min'); + core.Helpers.importCSS(utils.path() + '/styles/shared-files.css?min'); core.Helpers.importJS( "https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js" @@ -33,6 +34,7 @@ await import("./widjets-display-evaluation-tzcld.js"); await import("./widjets-display-follow-tzcld.js"); await import("./widjets-display-breadcrum.js"); + await import("./widjets-display-shared-files.js"); await import("./widjets-display-evaluation-indicators-tzcld.js"); diff --git a/src/styles/shared-files.scss b/src/styles/shared-files.scss new file mode 100644 index 0000000000000000000000000000000000000000..6cdfc123efcc9ba188f2e0b745b245fd8b73f5d2 --- /dev/null +++ b/src/styles/shared-files.scss @@ -0,0 +1,66 @@ + +.list-files-bordered { + border-radius: 10px; + border: 1px solid var(--color-primary) ;; +} +.list-shared-files{ + &.masonry { + flex-wrap: wrap; + display: flex!important; + margin-left: -16px; + &>div { + display: flex; + padding-left: 16px; + margin-bottom: 16px; + } + } + solid-delete { + text-indent: -999em; + display: inline-block; + width: 24px; + position: relative; + &::before { + position: absolute; + top: 5px; + right: 5px; + text-indent: 0; + } + } + +} +.card-shared-file { + &>div { + display: flex; + align-items: center; + } + .shared-file-icon-wrapper { + vertical-align: middle; + svg { + width: 40px; + height: 40px; + } + } + .shared-file-infos-wrapper { + flex: 1;min-width: 0; + color: var(--color-bold-grey) ; + font-size: 12px; + max-width: 100; + h3 a { + display: block; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + } + .shared-file-action-wrapper { + vertical-align: middle; + padding: 5px 15px; + a, solid-link, solid-delete { + padding: 5px; + &::before { + font-size: 16px; + } + } + + } +} \ No newline at end of file diff --git a/src/utils.js b/src/utils.js index 3068c571ba02de79b34b4a8644d582103379912e..67c0b4ec9fc257eb416d06767ddd02960e2f5a54 100644 --- a/src/utils.js +++ b/src/utils.js @@ -22,6 +22,14 @@ export const TZCLD_URLS = { my_territory_ref_exchange_space: 'tzcld-echnage-space-ref', my_territory_ref_exchange: 'tzcld-echnage-ref', my_territory_ref_edit_exchange: 'tzcld-edit-echnage-ref', + my_territory_shared_files_all: 'tzcld-tous-les-fichiers', + my_territory_shared_file_add: 'tzcld-add-fichier', + my_territory_shared_files_space: 'tzcld-fichier-space', + my_territory_shared_files_edit: 'tzcld-edit-fichier', + my_territory_grappe_shared_files_all: 'tzcld-tous-les-fichiers-grappe', + my_territory_grappe_shared_file_add: 'tzcld-add-fichier-grappe', + my_territory_grappe_shared_files_space: 'tzcld-fichier-space-grappe', + my_territory_grappe_shared_files_edit: 'tzcld-edit-fichier-grappe', } export function path() { @@ -89,6 +97,39 @@ export function getIntId(url) { return parts.at(-2); } +export function getFileExt(url) { + let part = url.substring(url.lastIndexOf('.') + 1); + return part ; +} + + +export function getSVGFolder(url) { + let part = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> + <g clip-path="url(#clip0_336_36945)"> + <path fill-rule="evenodd" clip-rule="evenodd" d="M22.5037 4.875H11.2537L9.00374 2.625H1.50374C0.675363 2.625 0.00373755 3.29662 0.00373755 4.125V7.875H-0.00338745V9.375H0.00373755V19.875C0.00373755 20.7034 0.675363 21.375 1.50374 21.375H11V19.875H1.50336V9.375H22.5034V14H24.0037V6.375C24.0037 5.54662 23.3321 4.875 22.5037 4.875ZM8.31784 4.125H1.50339L1.50374 7.875H22.5037V6.375H10.632L10.1606 5.9355L8.31784 4.125Z" fill="#1A2C5F"/> + <path d="M16.8731 21.25H13V20.6823L15.729 16.9511H13.0741V16.25H16.7991V16.8246L14.059 20.5489H16.8731V21.25Z" fill="#1A2C5F"/> + <path d="M17.9649 21.25V16.25H18.8499V21.25H17.9649Z" fill="#1A2C5F"/> + <path d="M24 17.7616C24 18.2837 23.8149 18.6839 23.4446 18.962C23.0743 19.2402 22.5473 19.3793 21.8635 19.3793H21.3007V21.25H20.4157V16.25H21.9746C22.651 16.25 23.157 16.3777 23.4927 16.633C23.8309 16.8884 24 17.2646 24 17.7616ZM21.3007 18.6919H21.7709C22.2251 18.6919 22.5584 18.6189 22.7707 18.473C22.983 18.3271 23.0891 18.0991 23.0891 17.789C23.0891 17.5017 22.9941 17.2874 22.804 17.146C22.6139 17.0047 22.3177 16.934 21.9153 16.934H21.3007V18.6919Z" fill="#1A2C5F"/> + </g> + <defs> + <clipPath id="clip0_336_36945"> + <rect width="24" height="24" fill="white"/> + </clipPath> + </defs> + </svg>`; + return part ; +} + +export function getSVGFile(url) { + let part = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> + <path d="M13.125 0H4.875C4.04662 0 3.375 0.671625 3.375 1.5V22.5C3.375 23.3284 4.04662 24 4.875 24H19.125C19.9534 24 20.625 23.3284 20.625 22.5V7.50037L13.125 0ZM19.125 8.12175V8.25H12.375V1.5H12.504L19.125 8.12175ZM4.875 22.5V1.5H10.875V9.75H19.125V22.5H4.875Z" fill="#1A2C5F"/> + </svg>`; + return part ; +} + + + + export function live (eventType, elementQuerySelector, cb) { document.addEventListener(eventType, function (event) { diff --git a/src/views-terrytories.js b/src/views-terrytories.js index c9fa899f3926065271a9ba5d8873009ecaa08baa..52100bb7d7a044d22efac80347b747976463a7a2 100644 --- a/src/views-terrytories.js +++ b/src/views-terrytories.js @@ -30,6 +30,7 @@ import("./utils.js").then((utils) => { teamUserStates: "team-user-states", apiUrl: "api-url", rangeUser: "range-user", + uploads: "uploads" }; } @@ -63,14 +64,14 @@ import("./utils.js").then((utils) => { <a data-trans="territory.menuRight.presentation">Présentation</a> </li> </solid-route> - <!--<solid-ac-checker permission="acl:Write" nested-field="tzcld_profile_identity" bind-resources> + <solid-ac-checker permission="acl:Write" nested-field="tzcld_profile_identity" bind-resources> <solid-route class="segment full" name="${utils.TZCLD_URLS.my_territory_exchanges}" use-id="" > <li class="segment full padding-medium"> <span class="icon ci-chat icon-xlarge margin-right-medium"></span> <a data-trans="territory.menuRight.echanges">Échanges avec mes référent-es</a> </li> </solid-route> - </solid-ac-checker>--> + </solid-ac-checker> <solid-ac-checker permission="acl:Write" nested-field="tzcld_profile_identity" bind-resources> <solid-route class="segment full" name="${utils.TZCLD_URLS.my_territory_auto_eval}" use-id="" > <li class="segment full padding-medium"> @@ -96,6 +97,12 @@ import("./utils.js").then((utils) => { <solid-route name="${utils.TZCLD_URLS.my_territory_follow_request_space}" use-id></solid-route> <solid-route name="${utils.TZCLD_URLS.my_territory_follow_requests_all}" use-id></solid-route> <solid-route name="${utils.TZCLD_URLS.my_territory_follow_request_add}" use-id></solid-route> + <solid-route name="${utils.TZCLD_URLS.my_territory_shared_files_space}" use-id></solid-route> + <solid-route name="${utils.TZCLD_URLS.my_territory_shared_files_all}" use-id></solid-route> + <solid-route name="${utils.TZCLD_URLS.my_territory_shared_file_add}" use-id></solid-route> + <solid-route name="${utils.TZCLD_URLS.my_territory_grappe_shared_files_space}" use-id></solid-route> + <solid-route name="${utils.TZCLD_URLS.my_territory_grappe_shared_files_all}" use-id></solid-route> + <solid-route name="${utils.TZCLD_URLS.my_territory_grappe_shared_file_add}" use-id></solid-route> </ul> </solid-router> </nav>`; @@ -255,7 +262,7 @@ import("./utils.js").then((utils) => { <h2 class="text-color-heading text-bold text-xxxlarge text-letter-spacing-large margin-top-none padding-left-xsmall">Échanges avec mes référent-es</h2> <div class="segment block margin-right-xxsmall margin-left-xxsmall sm-margin-none padding-top-none sm-padding-xsmall"> <div class="segment two-third padding-xsmall whitespace-normal last-note"> - <h2 class="tzcld-h2">Notes partagées</h2> + <h2 class="tzcld-h2">Notes partagées</h2> <div class="loader" id="loader-${this.route}-tzcld-exchanges"> <div></div> <div></div> @@ -312,10 +319,56 @@ import("./utils.js").then((utils) => { > </solid-display> </div> - `; - + </div>`; + /* Shared files */ render += ` - </div>`; + <div class="segment block margin-right-xxsmall margin-left-xxsmall sm-margin-none padding-top-none sm-padding-xsmall"> + <div class="segment two-third padding-xsmall whitespace-normal last-note"> + <h2 class="tzcld-h2">Fichiers de suivi</h2> + <div class="loader" id="loader-${this.route}-tzcld-exchanges-files"> + <div></div> + <div></div> + <div></div> + <div></div> + </div> + <tzcld-shared-files-display + bind-resources="" + nested-field="tzcld_profile_identity.tzcld_admins_community_shared_files" + solid-resource="" + order-desc="date" + paginate-by="8" + loader-id="loader-${this.route}-tzcld-exchanges-files" + route-suffix="${utils.TZCLD_URLS.my_territory_shared_files_edit}" + item-width="half" + > + </tzcld-shared-files-display> + <p class="text-right padding-right-xxlarge"><solid-link class="segment margin-top-xxlarge sm-full button text-xsmall text-bold text-uppercase text-center reversed color-secondary bordered button-icon icon icon-square-edit icon-margin-right-xsmall" bind-resources next="${utils.TZCLD_URLS.my_territory_shared_file_add}">Ajouter un fichier ou un dossier</solid-link></p> + </div> + <div class="segment third padding-xsmall whitespace-normal list-files-bordered"> + <h2 class="tzcld-h2">Partagés avec la grappe</h2> + <div class="loader" id="loader-${this.route}-tzcld-exchanges-ref-files"> + <div></div> + <div></div> + <div></div> + <div></div> + </div> + <tzcld-shared-files-display + bind-resources="" + nested-field="tzcld_community_synthesis_followed.tzcld_referents_community_shared_files" + solid-resource="" + order-desc="date" + paginate-by="4" + loader-id="loader-${this.route}-tzcld-exchanges-ref-files" + route-suffix="${utils.TZCLD_URLS.my_territory_grappe_shared_files_edit}" + item-width="full" + > + </tzcld-shared-files-display> + <p class="text-right padding-right-xxlarge"><solid-link class="segment margin-top-xxlarge sm-full button text-xsmall text-bold text-uppercase text-center reversed color-secondary bordered button-icon icon icon-square-edit icon-margin-right-xsmall" bind-resources next="${utils.TZCLD_URLS.my_territory_grappe_shared_file_add}">Ajouter un fichier ou un dossier</solid-link></p> + </div> + </div> + + + `; return render; } @@ -535,7 +588,7 @@ import("./utils.js").then((utils) => { > </solid-display> </div> - <div class="segment block padding-xsmall sm-padding-xsmall sm-padding-top-normal whitespace-normal bg-color-grey wrapper-resource-comments"> + <!-- <div class="segment block padding-xsmall sm-padding-xsmall sm-padding-top-normal whitespace-normal bg-color-grey wrapper-resource-comments"> <div class="segment full sm-full"> <div class="loader" id="loader-${this.route}-tzcld-exchange-conversations-feed${suffixe}"> @@ -554,7 +607,7 @@ import("./utils.js").then((utils) => { > </solid-display> </div> - </div> + </div> --> `; render += ` @@ -859,7 +912,7 @@ import("./utils.js").then((utils) => { let render = ` <h2 class="margin-left-xsmall margin-none sm-margin-none sm-margin-right-xsmall sm-margin-bottom-small sm-margin-left-xsmall text-color-heading text-bold text-xxxlarge text-letter-spacing-largee">Suivi interne</h2> - <!-- <div class="padding-bottom-none community-exchanges home"> + <div class="padding-bottom-none community-exchanges home"> <h2 class="tzcld-h2">Notes partagées</h2> <div class="loader" id="loader-${this.route}-tzcld-exchanges-ref"> <div></div> @@ -906,7 +959,7 @@ import("./utils.js").then((utils) => { </solid-display> <p class="text-right"><solid-link class="segment margin-top-xxlarge sm-full button text-xsmall text-bold text-uppercase text-center reversed color-secondary bordered button-icon icon icon-square-edit icon-margin-right-xsmall" bind-resources next="${utils.TZCLD_URLS.my_territory_ref_all_exchanges}">Voir toutes les notes</solid-link> <solid-link class="segment margin-top-xxlarge margin-left-xxlarge margin-right-xxlarge sm-full button text-xsmall text-bold text-uppercase text-center color-secondary bordered button-icon icon icon-square-edit icon-margin-right-xsmall" bind-resources next="${utils.TZCLD_URLS.my_territory_ref_add_exchange}">Ajouter une note</solid-link></p> - </div> --> + </div> <div class="padding-bottom-none"> @@ -1214,6 +1267,135 @@ import("./utils.js").then((utils) => { return render; } + + viewCommunitySharedFileEdit(nested = false) { + let nested_value = 'tzcld_profile_identity.tzcld_admins_community_shared_files' ; + if (nested) { + nested_value = nested ; + } + let render = ` + <div class="segment block margin-right-xxsmall margin-left-xxsmall sm-margin-none padding-top-none sm-padding-xsmall"> + <div class="segment block sm-hidden text-left"> + <a class="backlink text-xlarge line-xlarge margin-right-xxsmall" href="javascript:history.back();">Retour</a> + </div> + + <div class="segment full padding-xsmall whitespace-normal"> + <div class="loader" id="loader-${this.route}-${utils.TZCLD_URLS.my_territory_shared_files_edit}-${nested}"> + <div></div> + <div></div> + <div></div> + <div></div> + </div> + <solid-form + fields="segment1(segment2(title(title_prefix), segment3(name, document), segment4(author)))" + class="segment block whitespace-normal form" + class-visible="hidden" + value-visible="admins" + class-segment1="segment bg-color-white shadow border-rounded-xxsmall full text-top whitespace-normal" + class-segment2="segment block padding-xlarge text-left" + class-segment3="segment block" + class-segment4="segment block" + + class-date="segment margin-bottom-medium half sm-full padding-right-small sm-padding-none text-small text-semibold text-color-heading whitespace-normal text-xlarge" + class-document="segment margin-bottom-medium half sm-full padding-right-small sm-padding-none text-xlarge text-semibold text-color-heading" + class-author="segment margin-bottom-medium half sm-full padding-right-small sm-padding-none text-xlarge text-semibold text-color-heading text-top" + class-name="segment margin-bottom-medium half sm-full padding-right-small sm-padding-none text-small text-semibold text-color-heading whitespace-normal text-xlarge" + + widget-title="h2" + class-title="margin-bottom-large margin-top-none margin-left-none text-xlarge text-xbold text-color-heading text-color-dark-blue" + widget-title_prefix="span" + value-title_prefix="Editer le document" + upload-url-document="${this.uploads}" + widget-document="solid-form-file-label" + + + label-name="Titre" + label-document="Docmuent" + label-author="Autheur" + + widget-date="solid-form-date-label" + widget-subject="solid-form-textarea-label" + widget-author="solid-form-dropdown-autocompletion-label" + order-asc-author="username" + range-author="${this.rangeUser}" + loader-id="loader-${this.route}-${utils.TZCLD_URLS.my_territory_shared_files_edit}-${nested}" + bind-resources="" + solid-resource="" + patrtial + submit-button="Enregistrer" + submit-widget="button" + class-submit-button="submit-button segment sm-full margin-top-xsmall text-xsmall children-link-button children-link-text-bold children-link-text-uppercase children-link-reversed color-secondary bordered children-button-icon children-icon-rocket children-icon-small children-icon-margin-right-xsmall" + > + </solid-form> + </div> + `; + + render += ` + </div>`; + + return render; + } + + + viewCommunitySharedFileAdd(nested = false) { + let nested_value = 'tzcld_profile_identity.tzcld_admins_community_shared_files' ; + if (nested) { + nested_value = nested ; + } + let render = ` + <div class="segment block margin-right-xxsmall margin-left-xxsmall sm-margin-none padding-top-none sm-padding-xsmall"> + <div class="segment block sm-hidden text-left"> + <a class="backlink text-xlarge line-xlarge margin-right-xxsmall" href="javascript:history.back();">Retour</a> + </div> + + <div class="segment full padding-xsmall whitespace-normal"> + <div class="loader" id="loader-${this.route}-${utils.TZCLD_URLS.my_territory_shared_file_add}-${nested}"> + <div></div> + <div></div> + <div></div> + <div></div> + </div> + <solid-form + fields="segment1(segment2(title(title_prefix), segment3(name, document)))" + class="segment block whitespace-normal form" + class-segment1="segment bg-color-white shadow border-rounded-xxsmall full text-top whitespace-normal" + class-segment2="segment block padding-xlarge text-left" + class-segment3="segment block" + + class-date="segment margin-bottom-medium half sm-full padding-right-small sm-padding-none text-small text-semibold text-color-heading whitespace-normal text-xlarge" + class-document="segment margin-bottom-medium half sm-full padding-right-small sm-padding-none text-xlarge text-semibold text-color-heading" + class-author="segment margin-bottom-medium half sm-full padding-right-small sm-padding-none text-xlarge text-semibold text-color-heading text-top" + class-name="segment margin-bottom-medium half sm-full padding-right-small sm-padding-none text-small text-semibold text-color-heading whitespace-normal text-xlarge" + + widget-title="h2" + class-title="margin-bottom-large margin-top-none margin-left-none text-xlarge text-xbold text-color-heading text-color-dark-blue" + widget-title_prefix="span" + value-title_prefix="Nouveau docmuent" + + upload-url-document="${this.uploads}" + widget-document="solid-form-file-label" + + label-document="Document" + label-name="Titre du edocument" + + loader-id="loader-${this.route}-${utils.TZCLD_URLS.my_territory_shared_file_add}-${nested}" + bind-resources="" + nested-field="${nested_value}" + solid-resource="" + patrtial + submit-button="Enregistrer" + submit-widget="button" + class-submit-button="submit-button segment sm-full margin-top-xsmall text-xsmall children-link-button children-link-text-bold children-link-text-uppercase children-link-reversed color-secondary bordered children-button-icon children-icon-rocket children-icon-small children-icon-margin-right-xsmall" + > + </solid-form> + </div> + `; + + render += ` + </div>`; + + return render; + } tzcldBreadcrum(subNext= false, subText= false, nested= false) { @@ -1257,10 +1439,13 @@ import("./utils.js").then((utils) => { this.teamUserStates = props.teamUserStates ; this.apiUrl = props.apiUrl ; this.rangeUser = props.rangeUser ; + this.uploads = props.uploads ; //console.table(props); this.route = this.getRoute(this.uniq); + + let nested_shared_ref_value = 'tzcld_community_synthesis_followed.tzcld_referents_community_shared_files' ; let render = ` ${this.routeurs()} @@ -1270,7 +1455,6 @@ import("./utils.js").then((utils) => { <div class="with-sidebar whitespace-normal jsMobileContentSidebarControl"> <div class="scrollbar-content views-container padding-top-xlarge padding-right-small sidebar-is-closed"> - <div id="${utils.TZCLD_URLS.my_territory_infos}" data-view="${utils.TZCLD_URLS.my_territory_infos}" class="community-my-community community-profile" hidden> ${this.tzcldBreadcrum()} ${this.viewMyCommunity()} @@ -1368,11 +1552,53 @@ import("./utils.js").then((utils) => { ${this.tzcldBreadcrum(utils.TZCLD_URLS.my_territory_follow, 'Suivi interne')} ${this.viewCommunityFollowRequestAdd()} </div> + + <div id="${utils.TZCLD_URLS.my_territory_shared_files_space}" data-view="${utils.TZCLD_URLS.my_territory_shared_files_space}" class="community-files one" hidden> + <solid-router default-route="my_territory_shared_file_empty" route-prefix=""> + <solid-route name="my_territory_shared_file_empty" use-id></solid-route> + <solid-route name="${utils.TZCLD_URLS.my_territory_shared_files_edit}" use-id></solid-route> + </solid-router> + <div id="my_territory_shared_file_empty" data-view="my_territory_shared_file_empty" class="files one" hidden> + + </div> + <div id="${utils.TZCLD_URLS.my_territory_shared_files_edit}" data-view="${utils.TZCLD_URLS.my_territory_shared_files_edit}" class="community-files-edit one" hidden> + ${this.viewCommunitySharedFileEdit()} + </div> + </div> + + <div id="${utils.TZCLD_URLS.my_territory_shared_files_all}" data-view="${utils.TZCLD_URLS.my_territory_shared_files_all}" class="community-files" hidden> + </div> + + <div id="${utils.TZCLD_URLS.my_territory_shared_file_add}" data-view="${utils.TZCLD_URLS.my_territory_shared_file_add}" class="community-files" hidden> + ${this.viewCommunitySharedFileAdd()} + </div> + + <div id="${utils.TZCLD_URLS.my_territory_grappe_shared_files_space}" data-view="${utils.TZCLD_URLS.my_territory_grappe_shared_files_space}" class="community-files one" hidden> + <solid-router default-route="my_territory_shared_file_empty" route-prefix=""> + <solid-route name="my_territory_grappe_shared_file_empty" use-id></solid-route> + <solid-route name="${utils.TZCLD_URLS.my_territory_grappe_shared_files_edit}" use-id></solid-route> + </solid-router> + <div id="my_territory_grappe_shared_file_empty" data-view="my_territory_grappe_shared_file_empty" class="files one" hidden> + + </div> + <div id="${utils.TZCLD_URLS.my_territory_grappe_shared_files_edit}" data-view="${utils.TZCLD_URLS.my_territory_grappe_shared_files_edit}" class="community-files-edit one" hidden> + ${this.viewCommunitySharedFileEdit(nested_shared_ref_value)} + </div> + </div> + + <div id="${utils.TZCLD_URLS.my_territory_grappe_shared_files_all}" data-view="${utils.TZCLD_URLS.my_territory_grappe_shared_files_all}" class="community-files" hidden> + </div> + + <div id="${utils.TZCLD_URLS.my_territory_grappe_shared_file_add}" data-view="${utils.TZCLD_URLS.my_territory_grappe_shared_file_add}" class="community-files" hidden> + ${this.viewCommunitySharedFileAdd(nested_shared_ref_value)} + </div> + </div> + - ${this.viewRightMenu()} + ${this.viewRightMenu()} - </div>`; + </div>`; utils.live('click', '.child-accordion h2', function(e){ e.target.classList.toggle("open") ; e.target.nextElementSibling.classList.toggle("hidden") ; diff --git a/src/widjets-display-shared-files.js b/src/widjets-display-shared-files.js new file mode 100644 index 0000000000000000000000000000000000000000..05e75f95309d5e53e03677a96a1487482c580995 --- /dev/null +++ b/src/widjets-display-shared-files.js @@ -0,0 +1,96 @@ +import("./utils.js").then((utils) => { + import(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 ; + render += `<div class="shared-file-meta-wrapper">${await user.name} <br/>${moment(await date.toString()).locale('fr').format('Do/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; + }, + }); + }); +}); \ No newline at end of file