coopstarter.js

/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXX FUNCTIONS XXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/

/**
 * Manage classic tabs.
 * @param {string} pageName - Id of the tab content
 * @param {HTMLElement} elmnt - Accordion element
 */
function openTab(pageName, elmnt) {
  // Hide all elements with class="tabcontent" by default */
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  tablinks = document.getElementsByClassName("tablink");

  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
    tablinks[i].classList.remove("active");
  }

  // Show the specific tab content
  document.getElementById(pageName).style.display = "block";
  elmnt.classList.add("active");
}

/**
 * Manage the visual of the fake tabs in entrepreneur dashboard.
 * @param {HTMLElement} elmnt - Active fake tab.
 */
function openFakeTab(elmnt) {
  // Hide all elements with class="tabcontent" by default */
  var i, tablinks;
  tablinks = document.getElementsByClassName("tablink");

  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].classList.remove("active");
  }

  // Show the specific tab content
  elmnt.classList.add("active");
}

/**
 * Set a preview image on load.
 * @param {event} event - On file loading.
 */
function loadFile(event) {
  //Création of the preview
  var elt = document.createElement("img");
  elt.src = URL.createObjectURL(event.target.files[0]);

  //Remove the default useless image.
  var labeltag = event.target.closest("label");
  var file_input = labeltag.querySelectorAll('input')[0];
  
  //If there is already a image previewed, remove it.
  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
  file_input.insertAdjacentElement("afterend", elt);
}

/**
 * Fill datas to a form.
 * @param {HTMLElment} element - Element with the datas to retrieve.
 * @param {string} targetFormName - Id of the form to fill.
 * @param {string} inputName - Name of the input to fill in the form.
 */
function linkDatasetToField(element, targetFormName, inputName) {
  let targetForm = document.getElementById(targetFormName);
  targetForm.addEventListener("populate", event => {
    let resourceField = targetForm.querySelector(`input[name="${inputName}"]`);
    if (resourceField) {
      resourceField.value = JSON.stringify({ "@id": element.dataset.src });
      resourceField.setAttribute(
        "value",
        JSON.stringify({ "@id": element.dataset.src })
      );
    }
  });
}

/**
 * Refresh information after a form submission
 * @param {String} formId - Id of the sumitted form
 * @param {String} listId  - Id of the list to refresh
 */
async function refreshList(formId, listId) {
  let form = document.getElementById(formId);
  form.addEventListener("save", async function() {
    let list = document.getElementById(listId);

    if (list) {
      let listProxy = await list.component.resource;
      
      // Refresh du cache sur la liste
      listProxy.clearCache();
      list.dataset.src = list.dataset.src;
    }
  });
}

/**
 * Refresh user and account information after a form submission
 * @param {String} formId - Id of the sumitted form
 * @param {String} listId  - Id of the user object to refresh
 */
async function refreshUser(formId, listId) {
  let form = document.getElementById(formId);
  
  form.addEventListener("save", async function() {
    var list = document.getElementById(listId);

    if (list) {
      var listProxy = await list.component.resource;
      if (listProxy) {
        var account = await listProxy['account'];
        // Refresh du cache sur le account du user
        if (account) {
          account.clearCache();
        } else {
          console.error('No account on this user', list);
        }

        var profile = await listProxy['entrepreneurProfile'];
        // Refresh du cache sur le profile du user
        if (profile) {
          profile.clearCache();
        } else {
          console.error('No entrepreneurProfile on this user', list);

          profile = await listProxy['mentorProfile'];
          if (profile) {
            profile.clearCache();
          } else {
            console.error('No mentorProfile on this user', list);
          }
        }
        listProxy.clearCache();
      } else {
        console.log('No resource retrieved from the list', list);
        console.error('No resource retrieved from the list', list);
      }

      list.dataset.src = list.dataset.src;
    }
  });
}

/**
 * Remove pagination when there is no resource in a step group.
 */
function refreshPagination() {
  var resources_containers = document.querySelectorAll(
    ".resource_by_step solid-form+div"
  );

  for (let resources_container of resources_containers) {
    if (
      resources_container.nextSibling &&
      (resources_container.childElementCount < 5 ||
        resources_container.nextSibling.querySelector("nav span span+span")
          .textContent == 1)
    ) {
      resources_container.nextSibling.setAttribute("style", "display:none");
    } else if (
      resources_container.nextSibling &&
      resources_container
        .closest(".step")
        .querySelector(".accordion:not(.active)")
    ) {
      resources_container.nextSibling.setAttribute("hidden", "hidden");
      resources_container.nextSibling.setAttribute("style", "display:none");
    } else {
      resources_container.nextSibling.setAttribute("style", "display:flex");
    }
  }
}

/**
 * Manage select hidden to fullfill them with more "more criterias" selection
 * @param {HTMLElement} select_hidden - Hidden select to fullfill.
 * @param {HTMLElement} option_selected - Option selcted to set in hidden select.
 */
function selectHiddenManagement(select_hidden, option_selected) {
  options_hidden = select_hidden.getElementsByTagName("option");
  for (let option_hidden of options_hidden) {
    //Removing the selected attribute from previous selection
    option_hidden.removeAttribute("selected");
    if (option_hidden.value == option_selected.value) {
      option_hidden.setAttribute("selected", "selected");
      select_hidden.setAttribute("value", option_selected.value);
      //Actually selecting the option if it is the good one
      select_hidden.value = option_selected.value;
    }
  }

  //Trigerring a reload of the associated form
  let parent_form = select_hidden.closest("solid-form");
  parent_form.component.inputChange();
  parent_form.dispatchEvent(new CustomEvent('formChange'));
  refreshPagination();
}

/**
 * Manage input hidden field to fullfill them with more "more criterias" selection
 * @param {HTMLElement} field - Hidden field to fullfill.
 * @param {HTMLElement} field_search - Field with the value wanted by the user.
 */
function inputHiddenManagement(field, field_search) {
  field.setAttribute("value", field_search.value);
  let parent_form = field.closest("solid-form");
  parent_form.component.inputChange();
  parent_form.dispatchEvent(new CustomEvent('formChange'));
  refreshPagination();
}

/**
 * Manage select hidden for type to fullfill them with more "more criterias" selection
 * @param {HTMLElement} tab - Selected type tabs.
 * @param {HTMLElement} form - Hidden form to fullfill.
 */
function selectHiddenManagementForType(tab, form) {
  let type_hidden_field = form.querySelectorAll(
    'hidden-widget[name="more_criterias_hidden"] select[name="type"]'
  );

  if (tab.classList.contains("active")) {
    //Fullfill hidden field
    let type_field_search = tab
      .querySelector(`solid-display`)
      .getAttribute("data-src");

    type_hidden_field.forEach(function(select_hidden) {
      options_hidden = select_hidden.getElementsByTagName("option");
      for (let option_hidden of options_hidden) {
        option_hidden.removeAttribute("selected");
        // if (option_hidden.value == type_field_search) {
        if (option_hidden.value == '{"@id": "' + type_field_search + '"}') {
          //Actually selecting the option if it is the good one
          option_hidden.setAttribute("selected", "selected");
          select_hidden.setAttribute("value", option_hidden.value);
          select_hidden.value = option_hidden.value;
        }
      }

      //Trigerring a reload of the associated form
      let parent_form = select_hidden.closest("solid-form");
      if (parent_form) {
        parent_form.component.inputChange();
        parent_form.dispatchEvent(new CustomEvent('formChange'));
        refreshPagination();
      }
    });
  }
}

/**
 * Init type to type 1
 */
function InitManagementForType() {
  var forms = document.querySelectorAll(".resource_by_step");

  forms.forEach(form => {
    form.addEventListener("populate", e => {
      setTimeout(function() {
        let type_hidden_field = form.querySelectorAll('select[name="type"]');
        type_hidden_field.forEach(function(select_hidden) {
          options_hidden = select_hidden.getElementsByTagName("option");
          for (let option_hidden of options_hidden) {
            option_hidden.removeAttribute("selected");
            str = option_hidden.value

            if (str.substr(str.length - 10) == 'types/1/"}') {
              //Actually selecting the option if it is the good one
              option_hidden.setAttribute("selected", "selected");
              select_hidden.setAttribute("value", option_hidden.value);
              select_hidden.value = option_hidden.value;
            }
          }
          
          //Trigerring a reload of the associated form
          let parent_form = select_hidden.closest("solid-form");
          parent_form.component.inputChange();
          parent_form.dispatchEvent(new CustomEvent('formChange'));
          refreshPagination();
        });
      }, 3000);
    });
  });
}

/**
 * Manage the report broken links hidden form
 */
function fillReportBrokenLinkForm(event, userWhoSubmitReport, formBrokenLink) {
  formBrokenLink.querySelector(
    "input[name='resource']"
  ).value = JSON.stringify({ "@id": event.target.dataset.src });

  formBrokenLink.querySelector(
    "input[name='submitter']"
  ).value = JSON.stringify({ "@id": userWhoSubmitReport });
}

/**
 * Manage the accordion for step in entrepreneur dashboard
 */
function manageAccordionByStep(){
  var acc = document.getElementsByClassName("accordion");
  var i;

  for (i = 0; i < acc.length; i++) {
    acc[i].addEventListener("click", function() {

      var panel = this.nextElementSibling.querySelector("sib-form + div");

      if (this.classList.contains("active") == true) {
        this.classList.remove("active");
        panel.style.maxHeight = "0px";
      } else {
        this.classList.add("active");
      }

      this.closest(".step")
        .querySelector("nav")
        .removeAttribute("hidden");
      refreshPagination();

      if (panel.style.maxHeight) {
        panel.style.maxHeight = null;
      } else {
        panel.style.maxHeight = panel.scrollHeight + "px";
      }
    });
  }
}

/**
 * Manage the accordion "more criteria"
 */
function manageAccordionMoreCriteria(){
  var resourceHistory = document.getElementById("resources_history");
  
  resourceHistory.addEventListener("populate", event => {
    var acc = document.getElementsByClassName("accordion-form");
    for (let item of acc) {
      item.addEventListener("click", function() {
        if (this.classList.contains("active") == true) {
          this.classList.remove("active");
        } else {
          this.classList.add("active");
        }
        
        var panelForm = this.nextElementSibling;
        if (!this.classList.contains("active")) {
          panelForm.style.maxHeight = "0px";
        } else {
          panelForm.style.maxHeight = panelForm.scrollHeight + "px";
        }
      });
    }
  });
}

/**
 * Manage the accordion for requested resources in the mentor dashboard
 */
function manageAccordionForRequest() {
  var accRequest = document.getElementById("request_list");

  accRequest.addEventListener("populate", event => {
    let requests = event.target.getElementsByTagName('accordion-request-resource');
    for (let item of requests ) {
      item.addEventListener("click", function() {
        /* Toggle between adding and removing the "active" class,
    to highlight the button that controls the panel */
        if (this.classList.contains("active") == true) {
          this.classList.remove("active");
        } else {
          this.classList.add("active");
        }

        /* Toggle between hiding and showing the active panel */
        var panelRequest = this.nextElementSibling;
        if (!this.classList.contains("active")) {
          panelRequest.style.maxHeight = null;
          refreshPagination();
        } else {
          panelRequest.style.maxHeight = panelRequest.scrollHeight + "px";
        }
      });
    }
  });
}

/**
 * Manage the action of the logout button
 */
function manageLogoutButton() {
  const logoutButtons = document.getElementsByClassName("logout-button");
  for (var i = 0; i < logoutButtons.length; i++) {
    logoutButtons[i].addEventListener("click", function() {
      window.dispatchEvent(
        new CustomEvent("requestNavigation", {
          detail: { route: "splash" }
        })
      );
      document.querySelector("sib-auth").logout();
      setTimeout(function() {
        location.reload();
      }, 1000);
    });
  }
}

/**
 * Manage the select language
 */
async function manageSelectLanguage() {
  const languageSelects = document.getElementsByClassName("languageChoice")
  for (let item of languageSelects) {
    item.addEventListener("change", async function() {
      //We listen the selected option for the language

      //We retrieve element of the url
      var pathAfterThePrefix = window.location.pathname.split('/')[2];
      var baseUrl = location.protocol + '//' + location.host

      //If the selected language is french
      let languagesList = await item.component.resource['ldp:contains'];
      languagesList.forEach(async (resource) => {
        if (item.component.value.languages['@id'] == resource['@id']) {
          var redirect = baseUrl + '/' + (await resource.code).toLowerCase() + '/'+pathAfterThePrefix
          document.location.href = redirect
        } 
      });
    })
  }
}

async function selectProperLanguage() {
  let languageFormSelects = document.getElementsByClassName("languageChoice");
  for (let solidForm of languageFormSelects) {
    solidForm.addEventListener("populate", async function(e) {
      let languageSelect = e.target.querySelector("select[name='languages']");
      var chosenPrefix = window.location.pathname.split('/')[1];
      let languagesList = await solidForm.component.resource['ldp:contains'];
      languagesList.forEach(async (resource) => {
        let resourceCode = await resource['code'];
        let resourceId = await resource['@id'];
        Array.from(languageSelect.options).forEach(function(option_element) {
          if ((resourceCode.toLowerCase() === chosenPrefix) &&
               option_element.value === '{"@id": "' + resourceId + '"}') {
            option_element.selected = true;
          }
        });
      });
    });
  }
}

/**
 * Initialise the custom form file behaviour
 * Todo : we can improve the performance adding param to reduce the loop
 */
function initFileUpload(elementId, inputName, fileUploadLabel) {
  const parentForm = document.getElementById(elementId);
  parentForm.addEventListener("populate", e => {
    var previewImage = e.target.querySelectorAll(
      `solid-form-file input[name='${inputName}']+input`
    );

    var previewlabel = e.target.querySelectorAll("solid-form-file div label");
    for (let item of previewlabel) {
      item.innerHTML = fileUploadLabel;
    }
  
    for (let item of previewImage) {
      item.addEventListener("change", loadFile);
    }
  });
}

/**
 * Manage the like sender hidden form
 * @param {*} event 
 * @param {*} userWhoSubmitLike 
 * @param {*} formSenderLike 
 */
function fillSenderLike(userWhoSubmitLike, formSenderLike, currentResource) {
  formSenderLike.querySelector(
    "input[name='sender']"
  ).value = JSON.stringify({ "@id": userWhoSubmitLike });
  formSenderLike.querySelector(
    "input[name='receiver_object_id']"
  ).value = JSON.stringify({ "@id": currentResource });
  receiver_object_id
}

/**
 * Specific treatments for the request lists refresh
 * @param {String} formId - Id of the sumitted form
 * @param {String} listId  - Id of the list to refresh
 */
async function refreshRequestList(formId, listId) {
  let form = document.getElementById(formId);
  form.addEventListener("save", async function() {
    let list = document.getElementById(listId);
    let listProxy = await list.component.resource
    listProxy.clearCache();
    list.dataset.src = list.dataset.src;
    setTimeout(() => {
      manageAccordionForRequest();
    }, 1000);
  });
}

/**
 * Generic method to add filters events listeners to hidden search forms
 * @param {String} baseElement - Id of the sumitted form
 * @param {Element} filterForm  - Id of the list to refresh
 * @param {String} fieldName  - Id of the list to refresh
 */
function addEventListenersToSearchFormFields(baseElement, filterForm, fieldName) {
  //To retrieve format
  setTimeout(function() {
    let filter_field = filterForm.querySelector(
      `select[name="${fieldName}"]`
    );
    if (filter_field) {
      filter_field.addEventListener('change', function() {
        let option_selected = filter_field.querySelector(
          "option:checked"
        );
        let hidden_fields = baseElement.querySelectorAll(
          `hidden-widget[name="more_criterias_hidden"] select[name="${fieldName}"]`
        );
        
        hidden_fields.forEach(function(select_hidden) {
          selectHiddenManagement(select_hidden, option_selected);
        });
      });
    }
  }, 5000);
}

/**
 * For entrepreneur dashboard only :
 * As we cannot have multiple imbricated filtering with the native solid-display, we manage it manually.
 * @param {String} targetId - Id of the element to update
 */
function addProperFilterToSearchComponents(targetId) {
  var baseElement = document.getElementById(targetId);

  // Adding default type management 
  var forms = baseElement.querySelectorAll(".resource_by_step");
  forms.forEach(form => {
    form.addEventListener("populate", e => {
      let tabs = baseElement.getElementsByClassName("filter_by_type");
      for (let tab of tabs) {
        tab.addEventListener("click", function() {
          selectHiddenManagementForType(tab, form);
        });
      }
    });
  });
  
  //MORE CRITERIAS
  const more_criterias_form = baseElement.querySelectorAll(
    ".more_criterias"
  )[0];
  more_criterias_form.addEventListener("populate", e => {
    //SEARCH BY KEYWORD
    //To retrieve keyword
    //https://git.happy-dev.fr/startinblox/framework/sib-core/issues/379
    //TODO: Wait for a solution to filter with multiple value with "OR" instead of "AND".
    let keyword_form = baseElement.querySelectorAll(".search-by-keyword")[0];
    let keyword_field = keyword_form.querySelector(
      `input[name="name_keyword"]`
    );

    if (keyword_field) {
      let keyword_submit = baseElement.querySelectorAll(" .keyword_submit")[0];
      let keyword_hidden_fields = baseElement.querySelectorAll(
        'hidden-widget[name="search_for_a_resource"] input'
      );

      keyword_submit.addEventListener("click", function() {
        keyword_hidden_fields.forEach(hidden_field => {
          hidden_field.setAttribute("value", keyword_field.value);
          hidden_field.value = keyword_field.value;

          let parent_form = hidden_field.closest("solid-form");
          parent_form.component.inputChange();
          parent_form.dispatchEvent(new CustomEvent('formChange'));
          refreshPagination();
        });
      });
    }

    // https://git.happy-dev.fr/startinblox/framework/sib-core/issues/453
    //Manage fake tabs for type
    addEventListenersToSearchFormFields(baseElement, more_criterias_form, 'format');
    addEventListenersToSearchFormFields(baseElement, more_criterias_form, 'languages');
    addEventListenersToSearchFormFields(baseElement, more_criterias_form, 'fields');
    addEventListenersToSearchFormFields(baseElement, more_criterias_form, 'country');
    
    //To retrieve year of publication
    //WARNING: If the user want to select "20" to get 21century made, he will get no result.
    //I think it is a UX problem.
    let year_field_search = more_criterias_form.querySelector(
      `input[name="publication_year"]`
    );

    if (year_field_search) {
      year_field_search.addEventListener("input", function() {
        let year_hidden_fields = baseElement.querySelectorAll(
          'hidden-widget[name="more_criterias_hidden"] input[name="publication_year"]'
        );

        year_hidden_fields.forEach(field => {
          inputHiddenManagement(field, year_field_search, form);
        });
      });
    }
  });
}

let resourcesFieldsSelector = [
  'input[name="name"]',
  'input[name="uri"]',
  'input[name="resource_author"]',
  'select[name="skills"]',
  'select[name="fields"]',
  'select[name="target"]',
  'select[name="type"]',
  'select[name="steps"]',
  'select[name="format"]',
  'select[name="sharing"]',
  'select[name="country"]',
  'select[name="languages"]',
  'textarea[name="description"]'
]

let mentorFieldsSelector = [
  'input[name="first_name"]',
  'input[name="last_name"]',
  'input[name="mentorProfile.city"]',
  'select[name="mentorProfile.languages"]',
  'select[name="mentorProfile.fields"]',
  'select[name="mentorProfile.country"]'
]

function listenToInputChangeOnResourceCreation(originalForm) {
  let submitInput = originalForm.querySelectorAll('input[type=submit]')[0];
  let isValid = [];
  resourcesFieldsSelector.forEach((fieldSelector) => {
    if (originalForm.querySelector(fieldSelector).value != "" && 
        originalForm.querySelector(fieldSelector).value != null) {
      isValid.push(fieldSelector);
    }
  });
  
  if (isValid.length == resourcesFieldsSelector.length) {
    submitInput.disabled = false;
    submitInput.classList.remove('disabled');
  } else {
    submitInput.disabled = true;
    submitInput.classList.add('disabled');
  }
}

function listenToInputChangeOnMentorAccountCompletion(originalForm) {
  let submitInput = originalForm.querySelectorAll('input[type=submit]')[0];
  let isValid = [];
  mentorFieldsSelector.forEach((fieldSelector) => {
    if (originalForm.querySelector(fieldSelector).value != "" && 
        originalForm.querySelector(fieldSelector).value != null) {
      isValid.push(fieldSelector);
    }
  });

  if (isValid.length == mentorFieldsSelector.length) {
    submitInput.disabled = false;
    submitInput.classList.remove('disabled');
  } else {
    submitInput.disabled = true;
    submitInput.classList.add('disabled');
  }
}

async function refreshDatabase(targetElement) {
  let form = document.getElementById(targetElement);
  form.addEventListener("save", async function() {
    let lists = document.getElementsByClassName('resource_by_step');

    for (let list of lists) {
      if (list) {
        list.dataset.src = list.dataset.src;

        let listProxy = await list.component.resource;
        // Refresh du cache sur la liste
        if (listProxy) {
          listProxy.clearCache();
        }
      }
    }
  });
}

/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXX ON LOAD XXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/

document.addEventListener("DOMContentLoaded", event => {
  Sentry.init({ dsn: 'https://a95ca890079d4602a2096a64ca56c9d3@o383270.ingest.sentry.io/5213278' });

  window.addEventListener('requestNavigation', function(e) {
    setTimeout(function() {
      let loader = document.getElementById('main-loader');
      loader.setAttribute('hidden', true);
    }, 2000);
  });

  const mentorCreationForm = document.getElementById('mentor_profile_creation');
  mentorCreationForm.addEventListener("populate", e => {
    let submitInput = mentorCreationForm.querySelectorAll('input[type=submit]')[0];
    submitInput.disabled = true;
    submitInput.classList.add('disabled');

    mentorFieldsSelector.forEach(function(fieldSelector) {
      let input = mentorCreationForm.querySelector(fieldSelector);
      input.addEventListener('change', (() => {
        listenToInputChangeOnMentorAccountCompletion(mentorCreationForm);
      }));
      input.addEventListener('input', (() => {
        listenToInputChangeOnMentorAccountCompletion(mentorCreationForm);
      }));
    });
  });

  const mentorResourceCreationForm = document.getElementById('resource_creation_form');
  mentorResourceCreationForm.addEventListener("populate", e => {
    let submitInput = mentorResourceCreationForm.querySelectorAll('input[type=submit]')[0];
    submitInput.disabled = true;
    submitInput.classList.add('disabled');

    resourcesFieldsSelector.forEach(function(fieldSelector) {
      let input = mentorResourceCreationForm.querySelector(fieldSelector);
      input.addEventListener('change', (() => {
        listenToInputChangeOnResourceCreation(mentorResourceCreationForm);
      }));
      input.addEventListener('input', (() => {
        listenToInputChangeOnResourceCreation(mentorResourceCreationForm);
      }));
    });

    let urlInput = mentorResourceCreationForm.querySelector('input[name="uri"]');
    urlInput.addEventListener('change', ((event) => {
      if (!event.target.value.startsWith('http://') && !event.target.value.startsWith('https://')) {
        event.target.value = "https://" + event.target.value;
      }
    }));
  });

  const mentorResourceEditionForm = document.getElementById('resource_edition_form');
  mentorResourceEditionForm.addEventListener("populate", e => {
    let submitInput = mentorResourceEditionForm.querySelectorAll('input[type=submit]')[0];
    submitInput.disabled = true;
    submitInput.classList.add('disabled');
    
    resourcesFieldsSelector.forEach(function(fieldSelector) {
      let input = mentorResourceEditionForm.querySelector(fieldSelector);
      listenToInputChangeOnResourceCreation(mentorResourceEditionForm);
      
      input.addEventListener('input', (() => {
        listenToInputChangeOnResourceCreation(mentorResourceEditionForm);
      }));
      input.addEventListener('change', (() => {
        listenToInputChangeOnResourceCreation(mentorResourceEditionForm);
      }));
    });

    let urlInput = mentorResourceCreationForm.querySelector('input[name="uri"]');
    urlInput.addEventListener('change', ((event) => {
      if (!event.target.value.startsWith('http://') && !event.target.value.startsWith('https://')) {
        event.target.value = "https://" + event.target.value;
      }
    }));
  });

  //Set the share links
  $(".twitter-link").on("populate", function (e) {
    var regexContributor = /mentor/g
    var regexSearcher = /entrepreneur/g
    var valUrl = window.location.href.replace(regexContributor, 'public').replace(regexSearcher, 'public')
    $('.twshare').attr("href", "https://twitter.com/intent/tweet?text=Check%20this%20resource%20from%20Coopstarter%20:%20;original_referer=http%3A%2F%2F127.0.0.1%3A3000%2Fevenements&amp;ref_src=twsrc%5Etfw&amp;tw_p=tweetbutton&amp;url=" + valUrl + "&amp;");
  });

  $(".email-link").on("populate", function (e) {
    var regexContributor = /mentor/g
    var regexSearcher = /entrepreneur/g
    var valUrl = window.location.href.replace(regexContributor, 'public').replace(regexSearcher, 'public')
    $('.emshare').attr("href", "mailto:?subject=Coopstarter%20shared%20resource&body=I%20share%20you%20this%20resource%20from%20Coopstarter%20:%20" + valUrl);
  });

  //Refresh pagination
  refreshPagination();

  //init the fitering by step
  InitManagementForType();

  //Manage the accordion in request mentor dashboard.
  manageAccordionForRequest();

  // Get the element with id="defaultOpen" and click on it
  document.getElementById("defaultOpen").click();

  //Retrieve the current user
  let mentorAccountDataSrc = document.getElementById("mentor_account_picture");

  if (mentorAccountDataSrc) {
    //Add the current user as reviewer.
    linkDatasetToField(mentorAccountDataSrc, "validation_form", "reviewer");
    linkDatasetToField(mentorAccountDataSrc, "improvement_dialog_form", "reviewer");
    linkDatasetToField(mentorAccountDataSrc, "refusal_dialog_form", "reviewer");
    linkDatasetToField(mentorAccountDataSrc, "change_status_request", "reviewer");
    // linkDatasetToField(userAccountDataSrc, "add-like", "sender");
    // linkDatasetToField(userAccountDataSrc, "add-dislike", "sender");
  }

  //On form submission, we sometimes have to refresh a list.
  refreshList("resource_creation_form", "resources_history");
  refreshList("resource_edition_form", "resources_history");
  refreshList("validation_form", "pending_resources");
  refreshList("refusal_dialog_form", "pending_resources");
  refreshList("improvement_dialog_form", "pending_resources");
  refreshDatabase("validation_form");
  // refreshUser("entrepreneur_profile_creation", "entrepreneur_info");
  // refreshUser("entrepreneur_profile_creation", "entrepreneur_contact");
  // refreshUser("entrepreneur_profile_creation", "entrepreneur_account_picture");
  // refreshUser("entrepreneur_profile_creation", "entrepreneur_profile_edition");
  // refreshUser("entrepreneur_profile_creation", "entrepreneur_profile_organisation");
  // refreshUser("entrepreneur_profile_creation", "entrepreneur_profile_picture");
  // refreshUser("mentor_profile_creation", "mentor_info");
  // refreshUser("mentor_profile_creation", "mentor_complementary");
  // refreshUser("mentor_profile_creation", "mentor_contact");
  // refreshUser("mentor_profile_creation", "mentor_profile_edition");
  // refreshUser("mentor_profile_creation", "mentor_profile_organisation");
  // refreshUser("entrepreneur_profile_edition", "entrepreneur_info");
  // refreshUser("entrepreneur_profile_edition", "entrepreneur_contact");
  // refreshUser("entrepreneur_profile_organisation", "entrepreneur_info");
  // refreshUser("entrepreneur_profile_organisation", "entrepreneur_contact");
  // refreshUser("entrepreneur_profile_picture", "entrepreneur_account_picture");
  // refreshUser("entrepreneur_profile_picture", "entrepreneur_info");
  // refreshUser("mentor_profile_edition", "mentor_info");
  // refreshUser("mentor_profile_edition", "mentor_complementary");
  // refreshUser("mentor_profile_edition", "mentor_contact");
  // refreshUser("mentor_profile_organisation", "mentor_info");
  // refreshUser("mentor_profile_organisation", "mentor_complementary");
  // refreshUser("mentor_profile_organisation", "mentor_contact");
  // refreshUser("mentor_profile_picture", "mentor_account_picture");
  // refreshUser("mentor_profile_picture", "mentor_info");

  addProperFilterToSearchComponents("entrepreneur-resource-list");
  addProperFilterToSearchComponents("mentor-database");
  addProperFilterToSearchComponents("public-resource-list");

  var header_dropdown = $(".dropdownWrapper"),
    drop_choices = header_dropdown.find(".dropdownLabel");

  if (drop_choices) {
    drop_choices.on("click", function(e) {
      e.stopPropagation();
      var element = $(this).parent();
      element.find(".dropdownPanel").fadeToggle(500);
    });

    $("body").click(function() {
      $(".dropdownPanel").hide(500);
    });
  }

  //Manage the twitter button
  $("#shareByTwitter").on("populate", function (e) {
    var valUrl = window.location.href;
    $('.twshare').attr("href", "https://twitter.com/intent/tweet?original_referer=http%3A%2F%2F127.0.0.1%3A3000%2Fevenements&amp;ref_src=twsrc%5Etfw&amp;tw_p=tweetbutton&amp;url=" + valUrl + "&amp;");
  });
  //Manage the logout action
  manageLogoutButton();

  //Manage the select language
  manageSelectLanguage();

  //Select the current language in the dropdown on load
  selectProperLanguage();
  

  /* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
  XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
  XXXXXXXXXXXXXXXXXXXXXX MENTOR DASHBOARD XXXXXXXXXXXXXXXXXXXX
  XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
  window.setTimeout(() => {
    //Manage the form to report broken link.
    let resourceDetailDialog = document.getElementById("detail-mentor");
    resourceDetailDialog.addEventListener("populate", event => {

      // If there is an improvement to do on a resource, setup the action on the edit button
      if (document.getElementsByClassName("cs-edit-action-improvement")){
        var button_edits = document.getElementsByTagName("cs-edit-action-improvement")
        for (button_edit of button_edits) {
          button_edit.querySelector("div solid-link").onclick = function() { 
            let mentor_resource_detail = document.getElementById(
              "mentor-resource-detail"
            );
            mentor_resource_detail.removeAttribute('open');
          }; 
        }
      }
      var userWhoSubmitReport =  mentorAccountDataSrc.dataset.src
      var formBrokenLink = document.getElementById("report-broken-link-mentor");
      fillReportBrokenLinkForm(event, userWhoSubmitReport, formBrokenLink);

      // Manage closing the detail dialog from the profile link access
      var contributorProfileLinks = resourceDetailDialog.getElementsByTagName('cs-display-mentor-link');
      for (let profileLink of contributorProfileLinks) {
        let links = profileLink.getElementsByTagName('solid-link');
        for (let link of links) {
          link.addEventListener('click', function() {
            let mentor_resource_detail = document.getElementById(
              "mentor-resource-detail"
            );
            mentor_resource_detail.removeAttribute('open');

            let mentor_database_detail = document.getElementById(
              "mentor-database-resource-detail"
            );
            mentor_database_detail.removeAttribute('open');
          });
        };
      };

      // // Fill the hidden like-form
      // document.querySelector('sib-auth').getUser().then(data=> {
      //   let targetFormLike = document.getElementById('add-like');
      //   targetFormLike.addEventListener("populate", event => {
      //     let resourceField = targetFormLike.querySelector(`input[name="sender"]`);
      //     if (resourceField) {
      //       resourceField.value = JSON.stringify(data);
      //       resourceField.setAttribute(
      //         "value",
      //         JSON.stringify(data)
      //       );
      //     }
      //   });
      //   let targetFormDislike = document.getElementById('add-dislike');
      //   targetFormDislike.addEventListener("populate", event => {
      //     let resourceField = targetFormDislike.querySelector(`input[name="sender"]`);
      //     if (resourceField) {
      //       resourceField.value = JSON.stringify(data);
      //       resourceField.setAttribute(
      //         "value",
      //         JSON.stringify(data)
      //       );
      //     }
      //   });
        
      // })
    });

    document.addEventListener("navigate", event => {
      if (["mentor-database-resource-detail", "mentor-resource-detail", "mentor-resource-validate",
           "entrepreneur-resource-detail", "public-resource-detail",].includes(event.detail.route)) {
        window.scrollTo({ top: 0, behavior: 'smooth' });
      }
    });

    let resourceValidationDialog = document.getElementById("resource-to-validate");
    resourceValidationDialog.addEventListener("populate", event => {
      // Manage closing the detail dialog from the profile link access
      var resourceValidationProfileLinks = resourceValidationDialog.getElementsByTagName('cs-display-mentor-link');
      for (let profileLink of resourceValidationProfileLinks) {
        let links = profileLink.getElementsByTagName('solid-link');
        for (let link of links) {
          link.addEventListener('click', function() {
            let mentor_validation_detail = document.getElementById(
              "mentor-resource-validate"
            );