diff --git a/src/includes/components/widgets.pug b/src/includes/components/widgets.pug index 31655c23b6251f5d69fc426ac64bbff3e8ba89cd..2c88f7a2f90af85ce7ddad455eb98bd4ea579ce7 100644 --- a/src/includes/components/widgets.pug +++ b/src/includes/components/widgets.pug @@ -160,15 +160,13 @@ sib-widget(name="accordion-request-resource") sib-widget(name="cs-form-file-custom") template - label(for="preview_image") - div Picture - sib-form-file(label="" upload-url=`${sdn}upload/` name="preview_image") + label(for="preview_image") + sib-form-file(upload-url=`${sdn}upload/` name="preview_image" ) sib-widget(name="cs-form-profile-picture") template - label(for="account.picture") - div Picture - sib-form-file(label="" upload-url=`${sdn}upload/` name="account.picture") + label(for="account.picture") + sib-form-file(upload-url=`${sdn}upload/` name="account.picture") sib-widget(name="cs-display-twitter-button") template diff --git a/src/includes/entrepreneur/components/header.pug b/src/includes/entrepreneur/components/header.pug index 93ad3117679add84318bdf58b0ac97fdc4267fbf..1a6790b13c22cfa92da7f7114ccc4b424b717d37 100644 --- a/src/includes/entrepreneur/components/header.pug +++ b/src/includes/entrepreneur/components/header.pug @@ -18,7 +18,7 @@ ) .dropdownWrapper - sib-display#entrepreneur-account-picture.dropdownLabel( + sib-display#entrepreneur_account_picture.dropdownLabel( bind-user fields='account.picture', widget-account.picture='cs-account-picture' diff --git a/src/includes/entrepreneur/requests/create.pug b/src/includes/entrepreneur/requests/create.pug index 89bd6fdfbca43a11b2727a7cf543b36ad57aca8b..924e4b948bacaab35e7b90b38e1a6f5c57c91379 100644 --- a/src/includes/entrepreneur/requests/create.pug +++ b/src/includes/entrepreneur/requests/create.pug @@ -3,7 +3,7 @@ .like p.backlink i.fas.fa-times - div#resource-creation-form-loader + div#request-creation-form-loader hidden i.fas.fa-spinner.fa-spin @@ -12,8 +12,8 @@ p.p_entete=`${data.RequestRessourceInfo}` img(src="../images/asid_entre.png" alt="Rechercher des ressources") - sib-form#resource-creation-form( - loader-id="resource-creation-form-loader" + sib-form#request-creation-form( + loader-id="request-creation-form-loader" data-src=`${endpoints.requests}` fields="mandatory_information(header_mandatory, name, description, country, language),\ complementary_information(header_complementary, fields, organisation, skills)" diff --git a/src/includes/mentor/components/header.pug b/src/includes/mentor/components/header.pug index 6159b93594c758cda68367aa4a5cd1352414cc09..33b1b3ef8bf1ed17eed758f89e06c60093a93181 100644 --- a/src/includes/mentor/components/header.pug +++ b/src/includes/mentor/components/header.pug @@ -17,7 +17,7 @@ naked ) .dropdownWrapper - sib-display#user-account-picture.dropdownLabel( + sib-display#user_account_picture.dropdownLabel( bind-user fields='account.picture', widget-account.picture='cs-account-picture' diff --git a/src/includes/mentor/resources/create.pug b/src/includes/mentor/resources/create.pug index 6009217200215f04eb2ad5a21799ca8987cf8aab..17b776078c3a2bcfa704c90e714dc1831a86fcb3 100644 --- a/src/includes/mentor/resources/create.pug +++ b/src/includes/mentor/resources/create.pug @@ -3,7 +3,7 @@ h2.title_lead_avenir=`${data.PostResource}` p.p_entete=`${data.ThankYouEnrichingDatabase}` .block_log.block_creat_count - sib-form#resource-creation-form( + sib-form#resource_creation_form( data-src=`${endpoints.resources}` fields="mandatory_information(header_mandatory, name, country, language, uri,\ format, fields, author, publication_year, skills),\ diff --git a/src/includes/mentor/resources/edit.pug b/src/includes/mentor/resources/edit.pug index e0342a31c71fba638b1d8369a0fafc4bc6fba94e..092f08a5793cf55d27f4d77dba77ea0fcb3f8f60 100644 --- a/src/includes/mentor/resources/edit.pug +++ b/src/includes/mentor/resources/edit.pug @@ -3,7 +3,7 @@ h2.title_lead_avenir=`${data.EditResource}` p.p_entete=`${data.ThankYouEnrichingDatabase}` .block_log.block_creat_count - sib-form( + sib-form#resource_edition_form( bind-resources partial fields="mandatory_information(header_mandatory, name, country, language, uri,\ diff --git a/src/includes/mentor/resources/list.pug b/src/includes/mentor/resources/list.pug index 1b51a80b741697dc48f50d5e5a2a675379c5a9f9..cac962f6d30b30b1285052f5aec552bbaa972f58 100644 --- a/src/includes/mentor/resources/list.pug +++ b/src/includes/mentor/resources/list.pug @@ -43,7 +43,7 @@ div.block_list hidden i.fas.fa-spinner.fa-spin sib-link(class="backlink pull-right", next="resource-validation-process") What is a validation process ? - sib-display#pending-resources( + sib-display#pending_resources( loader-id="loader-review-mentor" data-src=`${endpoints.resources}pending/` fields='content(name, info(author, publication_year)), validate', @@ -68,7 +68,7 @@ div.block_list div p=`${data.RequestIntro}` - sib-display#request-list.request_accordion( + sib-display#request_list.request_accordion( loader-id="loader-requests-mentor" data-src=`${endpoints.requests}` fields='name, content(description, info(fields, language.name, target, submitter.email, status))', @@ -98,7 +98,7 @@ div.block_list div#loader-history-mentor hidden i.fas.fa-spinner.fa-spin - sib-display#resources-history( + sib-display#resources_history( loader-id="loader-history-mentor" bind-user nested-field='resources' diff --git a/src/includes/mentor/resources/validate.pug b/src/includes/mentor/resources/validate.pug index f274e00ba4514d1ea0387e92d6f1a01356d0bca3..3f10952ffea36c37e476f2cf9cc0394840979da5 100644 --- a/src/includes/mentor/resources/validate.pug +++ b/src/includes/mentor/resources/validate.pug @@ -96,7 +96,7 @@ sib-router class-refuse='button_base' ) - sib-form#validation-form.action_button( + sib-form#validation_form.action_button( bind-resources nested-field='review' fields='status, reviewer', @@ -109,7 +109,7 @@ sib-router dialog#refusal-dialog h2.title_lead=`${data.ReportInappropriate}` - sib-form#refusal-dialog-form( + sib-form#refusal_dialog_form( bind-resources nested-field='review' fields='comment, status, reviewer', @@ -125,7 +125,7 @@ sib-router dialog#improvement-dialog h2.title_lead=`${data.SuggestImprovement}` - sib-form#improvement-dialog-form( + sib-form#improvement_dialog_form( bind-resources nested-field='review' fields='comment, status, reviewer', diff --git a/src/scripts/coopstarter.js b/src/scripts/coopstarter.js index 208bf4ff7308909ee79045dfbbd103456d81f647..ead03b955a9a69c1d0d4cc5304214c373d33b282 100644 --- a/src/scripts/coopstarter.js +++ b/src/scripts/coopstarter.js @@ -52,16 +52,22 @@ function loadFile(event) { //Remove the default useless image. var labeltag = event.target.closest("label"); - labeltag.querySelector("input[name='preview_image']").style.display = "none"; - + var file_input = labeltag.querySelectorAll('input')[0]; + //If there is already a image previewed, remove it. - if (labeltag.querySelector("img")) { - var oldImage = labeltag.querySelector("img"); - labeltag.removeChild(oldImage); + var oldImage = file_input.parentNode.querySelector("img"); + if (oldImage) { + if (oldImage.parentNode) { + oldImage.parentNode.removeChild(oldImage); + } } + file_input.style.display = "none"; + + var button = file_input.parentNode.querySelector("button"); + button.style.display = "none"; //Add the previewimage - labeltag.insertAdjacentElement("afterbegin", elt); + file_input.insertAdjacentElement("afterend", elt); } /** @@ -93,7 +99,6 @@ async function refreshList(formId, listId) { let form = document.getElementById(formId); form.addEventListener("save", async function() { let list = document.getElementById(listId); - console.log(list, list.component); let listProxy = await list.component.resource listProxy.clearCache(); list.dataset.src = list.dataset.src; @@ -259,6 +264,7 @@ function manageAccordionByStep(){ acc[i].addEventListener("click", function() { if (this.classList.contains("active") == true) { this.classList.remove("active"); + this.nextElementSibling.querySelector( "sib-form + div" ).style.maxHeight = "0px"; @@ -336,14 +342,14 @@ function manageSelectLanguage() { for (let item of languageSelects) { item.addEventListener("change", function() { //We listen the selected option for the language - uriLanguge = item.querySelector("option:checked").value + uriLanguage = item.querySelector("option:checked").value //We retrieve element of the url var pathAfterThePrefix = window.location.pathname.split('/')[2]; var base_url = location.host //If the selected language is french - if (uriLanguge === '{"@id": "http://localhost:8000/languages/1/"}') { + if (uriLanguage === '{"@id": "http://localhost:8000/languages/1/"}') { //Redirection with the appropriate prefixe. var redirect = "http://"+base_url+'/fr/'+pathAfterThePrefix @@ -360,21 +366,25 @@ function manageSelectLanguage() { } /** - * Initi the custom form file behaviour + * Initialise the custom form file behaviour * Todo : we can improve the performance adding param to reduce the loop */ -function initFileUpload(){ - var previewImage = document.querySelectorAll( - "sib-form-file input[name='preview_image']+input" - ); - var previewlabel = document.querySelectorAll("sib-form-file div"); - for (let item of previewlabel) { - item.innerHTML = "Upload a file"; - } +function initFileUpload(elementId, inputName) { + const parentForm = document.getElementById(elementId); + parentForm.addEventListener("populate", e => { + var previewImage = e.target.querySelectorAll( + `sib-form-file input[name='${inputName}']+input` + ); - for (let item of previewImage) { - item.addEventListener("change", loadFile); - } + var previewlabel = e.target.querySelectorAll("sib-form-file div label"); + for (let item of previewlabel) { + item.innerHTML = "Upload a file"; + } + + for (let item of previewImage) { + item.addEventListener("change", loadFile); + } + }); } /** @@ -599,44 +609,46 @@ jQuery(document).ready(function($) { refreshPagination(); //init the fitering by step - // InitManagementForType(); + InitManagementForType(); // Get the element with id="defaultOpen" and click on it document.getElementById("defaultOpen").click(); //Retrieve the current user - let userAccountDataSrc = document.getElementById("user-account-picture"); + let userAccountDataSrc = document.getElementById("user_account_picture"); if (userAccountDataSrc) { //Add the current user as reviewer. - linkDatasetToField(userAccountDataSrc, "validation-form", "reviewer"); - linkDatasetToField(userAccountDataSrc, "improvement-dialog-form", "reviewer"); - linkDatasetToField(userAccountDataSrc, "refusal-dialog-form", "reviewer"); + linkDatasetToField(userAccountDataSrc, "validation_form", "reviewer"); + linkDatasetToField(userAccountDataSrc, "improvement_dialog_form", "reviewer"); + linkDatasetToField(userAccountDataSrc, "refusal_dialog_form", "reviewer"); linkDatasetToField(userAccountDataSrc, "change_status_request", "reviewer"); // linkDatasetToField(userAccountDataSrc, "add-like", "sender"); // linkDatasetToField(userAccountDataSrc, "add-dislike", "sender"); } //On form submission, we sometime have to refresh a list. - refreshList("resource-creation-form", "resources-history"); - refreshList("validation-form", "pending-resources"); - refreshList("refusal-dialog-form", "pending-resources"); - refreshList("improvement-dialog-form", "pending-resources"); + refreshList("resource_creation_form", "resources_history"); + refreshList("validation_form", "pending_resources"); + refreshList("refusal_dialog_form", "pending_resources"); + refreshList("improvement_dialog_form", "pending_resources"); refreshList("entrepreneur_profile_creation", "entrepreneur_info"); refreshList("entrepreneur_profile_creation", "entrepreneur_contact"); - refreshList("entrepreneur_profile_creation", "entrepreneur-account-picture"); + initFileUpload("entrepreneur_profile_creation", "account.picture"); + refreshList("entrepreneur_profile_creation", "entrepreneur_account_picture"); refreshList("mentor_profile_creation", "mentor_info"); + initFileUpload("mentor_profile_creation", "account.picture"); refreshList("mentor_profile_creation", "mentor_complementary"); refreshList("mentor_profile_creation", "mentor_contact"); - refreshList("mentor_profile_creation", "user-account-picture"); + refreshList("mentor_profile_creation", "user_account_picture"); refreshList("entrepreneur_profile_edition", "entrepreneur_info"); refreshList("entrepreneur_profile_edition", "entrepreneur_contact"); - refreshList("entrepreneur_profile_edition", "entrepreneur-account-picture"); + refreshList("entrepreneur_profile_edition", "entrepreneur_account_picture"); refreshList("mentor_profile_edition", "mentor_info"); refreshList("mentor_profile_edition", "mentor_complementary"); refreshList("mentor_profile_edition", "mentor_contact"); - refreshList("mentor_profile_edition", "user-account-picture"); - refreshList("change_status_request", "request-list"); + refreshList("mentor_profile_edition", "user_account_picture"); + refreshList("change_status_request", "request_list"); addProperFilterToSearchComponents("entrepreneur-resource-list"); addProperFilterToSearchComponents("mentor-database"); @@ -710,7 +722,9 @@ jQuery(document).ready(function($) { }); //Init the form file behaviour - initFileUpload(); + initFileUpload("resource_creation_form", "preview_image"); + initFileUpload("resource_edition_form", "preview_image"); + initFileUpload("mentor_profile_edition", "account.picture"); //Manage the accordion in request mentor dashboard. manageAccordionForRequest(); @@ -719,7 +733,7 @@ jQuery(document).ready(function($) { const deleteButton = document.querySelectorAll("sib-delete"); for (var i = 0; i < deleteButton.length; i++) { deleteButton[i].addEventListener("resourceDeleted", e => { - const historyList = document.getElementById("resources-history"); + const historyList = document.getElementById("resources_history"); historyList.dataset.src = historyList.dataset.src; let confirm_suppress = document.getElementById("confirm_suppress"); @@ -758,7 +772,8 @@ jQuery(document).ready(function($) { manageAccordionByStep(); //Init the form file behaviour - initFileUpload(); + // initFileUpload(); + initFileUpload("entrepreneur_profile_edition", "account.picture"); //Correct the native default of pagination refreshPagination(); diff --git a/src/styles/index.scss b/src/styles/index.scss index 8e478dc9e47a9ed60c8d15d81af5c1753a4550af..19d7d5d02f82e7641538cf529456001f2b954d27 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -126,14 +126,14 @@ img{ display: block; } -.flex, sib-set-default,#resources-history>div div, #entrepreneur-new-account sib-form form{ +.flex, sib-set-default,#resources_history>div div, #entrepreneur-new-account sib-form form{ display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; } -.flex_espace, sib-set-default,#resources-history>div div, #entrepreneur-new-account sib-form form { +.flex_espace, sib-set-default,#resources_history>div div, #entrepreneur-new-account sib-form form { justify-content: space-between; } sib-set-default[name="actions"]{ @@ -1200,7 +1200,7 @@ div .tit_element_list{ color: var(--clr-roll-black); font-size: 1.6rem; } -#resources-history { +#resources_history { sib-set-default{ margin-bottom: 4rem; } @@ -1216,7 +1216,7 @@ div .tit_element_list{ padding-bottom: .5rem; } } -sib-display#pending-resources div{ +sib-display#pending_resources div{ clear: both; } .contenu_list{ @@ -1247,7 +1247,7 @@ sib-display-value,sib-multiple label,cs-resource-status div{ sib-multiple label{ margin-right: 1rem; } -#resources-history cs-resource-status[name="review.status"]{ +#resources_history cs-resource-status[name="review.status"]{ width: 100%; display: block; text-align: right; @@ -1256,7 +1256,7 @@ sib-multiple label{ font-family: "var(--typo-btn)"; } } -#resources-history .fas{ +#resources_history .fas{ color: var(--bg-btn-base); margin-left: 2.5rem; font-size: 1.5rem; @@ -1276,14 +1276,14 @@ sib-multiple label, cs-resource-status[name="review.status"]+*{ border: none; cursor: pointer; } -#pending-resources > div sib-display[label-validate="Check ->"]>div{ +#pending_resources > div sib-display[label-validate="Check ->"]>div{ display:flex; justify-content: space-between; } #reviews .backlink{ margin: 0; } -#pending-resources { +#pending_resources { sib-set-default[name="content"] sib-display-value{ font-size: 1.6rem; color: #444C4D; @@ -1793,7 +1793,7 @@ XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/ @media screen and (max-width: 920px) { /* Partie mentor */ - #resources-history > div div{ + #resources_history > div div{ flex-wrap: nowrap; .button_base.button_pending{ margin-top: 0;