diff --git a/package.json b/package.json index 1fea6aeb227d2eaa2d2f3d6e73b4f774732c173c..c51b7fa784310d065108bb535517386f307f0351 100644 --- a/package.json +++ b/package.json @@ -10,8 +10,8 @@ "copy-js": "cp ./src/scripts/*.js ./www/scripts/", "copy-fonts": "cp -R ./src/fonts ./www", "copy-images": "cp -R ./src/images ./www", - "watch-js": "onchange -i -k './src/scrips/*.js' -- npm run", - "watch": "run-p scss pug copy-fonts copy-images copy-js watch-js", + "watch-js": "onchange 'src/scripts/*.js' -- run-s copy-js", + "watch": "run-p scss pug watch-js copy-fonts copy-images", "serve": "node server.js" }, "devDependencies": { diff --git a/src/includes/entrepreneur/profile/create.pug b/src/includes/entrepreneur/profile/create.pug index 8eb14484cb31bbd26206253af3e000870482f81b..ce0cb42cab5e95efc21fe711136035d21d78934a 100644 --- a/src/includes/entrepreneur/profile/create.pug +++ b/src/includes/entrepreneur/profile/create.pug @@ -10,7 +10,7 @@ figure.logo.img_log h2.title_create Complete your entrepreneur account -sib-form.block_log.block_creat_count( +sib-form#entrepreneur_profile_creation.block_log.block_creat_count( bind-user fields="last_name, first_name, entrepreneur_profile.organisation, username" diff --git a/src/includes/entrepreneur/profile/detail.pug b/src/includes/entrepreneur/profile/detail.pug index 722ed9a88d2c4ef8bd9b5a7237dd98aaae2a9b12..66884ff88bad4fd049c19e110e1625cefa60755a 100644 --- a/src/includes/entrepreneur/profile/detail.pug +++ b/src/includes/entrepreneur/profile/detail.pug @@ -23,7 +23,7 @@ div.block_list.flex sib-link(next='entrepreneur-account-edit') button.button_edit <i class="fas fa-pen" aria-hidden="true"></i> - sib-display( + sib-display#entrepreneur_info( bind-user fields='name, entrepreneur_profile.organisation.name, registered_on' widget-name='cs-display-property' @@ -31,7 +31,7 @@ div.block_list.flex widget-entrepreneur_profile.registered_on='cs-display-property' ) - sib-display( + sib-display#entrepreneur_contact( bind-user fields='email' label-email='Email:' diff --git a/src/includes/entrepreneur/resources/list.pug b/src/includes/entrepreneur/resources/list.pug index 872e9ef355944df44b2ea33964bd175d55ba87ac..a91cde0256ae36102c01f4d530b585397b2bdce0 100644 --- a/src/includes/entrepreneur/resources/list.pug +++ b/src/includes/entrepreneur/resources/list.pug @@ -5,18 +5,12 @@ div.container_min h2.title_lead.fd_bleu International index of resources for cooperative mentors and entrepreneurs button.button_dark.pull-right Watch the presentation -//-Question : -//In my opinion, "multiple ressource" solution is closer to the wanted result than the "group-by" solution - -//Maybe we sould think from now how we gonna manage the type filter - -//What's the best way to retrieve the name of the format? By the resource we get a number. Sould we manage this with a 'switch/case' in js? - -//It seems that we don't have likes and dislikes data : sould i ignore them for the moment? +//-About : +//It will be great to have autocompletion on country +//I'm waiting for a confirmation to suppress step field container.block_list.flex.flex_espace - div.w_75.block-g-entre div h2.title_form Search for a resource @@ -30,51 +24,49 @@ container.block_list.flex.flex_espace widget-name_keyword='cs-display-property' widget-author='cs-display-property' - submit-button='Search' + naked ) - sib-form( + div#keyword_submit.button__actions + div.button_base.ico_gauche Search + + sib-form#instance_database_only( data-src=`${endpoints.resources}`, fields='instance_database_only' - widget-instance_database_only='cs-display-checkbox' - class-instance_database_only = 'ss-list checkbox' + naked ) - sib-form( - data-src=`${endpoints.resources}`, - fields='header_criterias, format, publication_year, country, language.name, fields, steps' - - label-header_criterias='More criterias' - label-format='Format:' - label-publication_year='Year of publication' - label-country='Country of publication' - label-language.name='Language' - label-fields='Field' - label-steps='Step of : Staring up a cooperative business' - widget-header_criterias='cs-section_header' - - range-language.name=`${endpoints.languages}` - range-fields=`${endpoints.fields}` - range-steps=`${endpoints.steps}` - range-format=`${endpoints.formats}` - - multiple-language.name='sib-multiple-select' - widget-language.name='sib-form-auto-completion' - - multiple-format='sib-multiple-select' - widget-format='sib-form-auto-completion' - - multiple-fields='sib-multiple-select' - widget-fields='sib-form-auto-completion' + sib-form#more_criterias( + data-src=`${endpoints.resources}`, + fields='header_criterias, format, publication_year, country, language.name, fields' + + label-header_criterias='More criterias' + label-format='Format:' + label-publication_year='Year of publication' + label-country='Country of publication' + label-language.name='Language' + label-fields='Field' + widget-header_criterias='cs-section_header' + + range-language.name=`${endpoints.languages}` + range-fields=`${endpoints.fields}` + range-format=`${endpoints.formats}` + + multiple-language.name='sib-multiple-select' + widget-language.name='sib-form-auto-completion' + + multiple-format='sib-form-dropdown' + widget-format='sib-form-auto-completion' + + multiple-fields='sib-multiple-select' + widget-fields='sib-form-auto-completion' + + naked + ) - multiple-steps='sib-multiple-select' - widget-steps='sib-form-auto-completion' - - naked - ) div.w_25 div.block_aside_entre img(src="../images/asid_entre.png" alt="rechercher de ressources") @@ -97,24 +89,21 @@ container.block_list.flex.flex_espace sib-display#step1.resource_by_step( data-src=`${endpoints.steps}1/resources/`, - fields='name, format, publication_year, description, country, language.name, field, steps', - search-fields='search_for_a_resource(name, description, author), format, publication_year, country, language.name, field, steps', + fields='name, author, format, publication_year, description, country, language.name, field', + search-fields='search_for_a_resource(name, description, author), more_criterias_hidden(format, publication_year, country, language.name, field)', + search-range-format=`${endpoints.formats}` search-widget-search_for_a_resource="hidden-widget" - search-widget-format="hidden-widget" - search-widget-publication_year="hidden-widget" - search-widget-country="hidden-widget" - search-widget-language.name="hidden-widget" - search-widget-field="hidden-widget" - search-widget-steps="hidden-widget" + search-widget-more_criterias_hidden="hidden-widget" + search-widget-format='sib-form-dropdown' - widget-name='cs-display-property' + widget-country='cs-display-property' widget-publication_year='cs-display-property' widget-description='cs-display-property' + widget-field='cs-display-property' widget-language.name="hidden-widget" - widget-author="hidden-widget" - widget-steps="hidden-widget" + widget-author="cs-display-property" widget-format='cs-display-multiple-property' label-format='' multiple-format @@ -134,24 +123,23 @@ container.block_list.flex.flex_espace sib-display.resource_by_step( data-src=`${endpoints.steps}2/resources/`, - fields='name, format, publication_year, description, country, language.name, field, steps', - search-fields='search_for_a_resource(name, description, author), format, publication_year, country, language.name, field, steps', + fields='name, author, format, publication_year, description, country, language.name, field', + search-fields='search_for_a_resource(name, description, author), more_criterias_hidden(format, publication_year, country, language.name, field)', + + search-range-format=`${endpoints.formats}` search-widget-search_for_a_resource="hidden-widget" - search-widget-format="hidden-widget" - search-widget-publication_year="hidden-widget" - search-widget-country="hidden-widget" - search-widget-language.name="hidden-widget" - search-widget-field="hidden-widget" - search-widget-steps="hidden-widget" - + search-widget-more_criterias_hidden="hidden-widget" + search-multiple-format='sib-form-dropdown' + search-widget-format='sib-form-auto-completion' widget-name='cs-display-property' + widget-country='cs-display-property' widget-publication_year='cs-display-property' widget-description='cs-display-property' + widget-field='cs-display-property' widget-language.name="hidden-widget" - widget-author="hidden-widget" - widget-steps="hidden-widget" + widget-author="cs-display-property" widget-format='cs-display-multiple-property' label-format='' multiple-format @@ -172,24 +160,23 @@ container.block_list.flex.flex_espace sib-display.resource_by_step( data-src=`${endpoints.steps}3/resources/`, - fields='name, format, publication_year, description, country, language.name, field, steps', - search-fields='search_for_a_resource(name, description, author), format, publication_year, country, language.name, field, steps', + fields='name, author, format, publication_year, description, country, language.name, field', + search-fields='search_for_a_resource(name, description, author), more_criterias_hidden(format, publication_year, country, language.name, field)', + + search-range-format=`${endpoints.formats}` search-widget-search_for_a_resource="hidden-widget" - search-widget-format="hidden-widget" - search-widget-publication_year="hidden-widget" - search-widget-country="hidden-widget" - search-widget-language.name="hidden-widget" - search-widget-field="hidden-widget" - search-widget-steps="hidden-widget" - + search-widget-more_criterias_hidden="hidden-widget" + search-multiple-format='sib-form-dropdown' + search-widget-format='sib-form-auto-completion' widget-name='cs-display-property' + widget-country='cs-display-property' widget-publication_year='cs-display-property' widget-description='cs-display-property' + widget-field='cs-display-property' widget-language.name="hidden-widget" - widget-author="hidden-widget" - widget-steps="hidden-widget" + widget-author="cs-display-property" widget-format='cs-display-multiple-property' label-format='' multiple-format @@ -210,24 +197,23 @@ container.block_list.flex.flex_espace sib-display.resource_by_step( data-src=`${endpoints.steps}4/resources/`, - fields='name, format, publication_year, description, country, language.name, field, steps', - search-fields='search_for_a_resource(name, description, author), format, publication_year, country, language.name, field, steps', + fields='name, author, format, publication_year, description, country, language.name, field', + search-fields='search_for_a_resource(name, description, author), more_criterias_hidden(format, publication_year, country, language.name, field)', + + search-range-format=`${endpoints.formats}` search-widget-search_for_a_resource="hidden-widget" - search-widget-format="hidden-widget" - search-widget-publication_year="hidden-widget" - search-widget-country="hidden-widget" - search-widget-language.name="hidden-widget" - search-widget-field="hidden-widget" - search-widget-steps="hidden-widget" - + search-widget-more_criterias_hidden="hidden-widget" + search-multiple-format='sib-form-dropdown' + search-widget-format='sib-form-auto-completion' widget-name='cs-display-property' + widget-country='cs-display-property' widget-publication_year='cs-display-property' widget-description='cs-display-property' + widget-field='cs-display-property' widget-language.name="hidden-widget" - widget-author="hidden-widget" - widget-steps="hidden-widget" + widget-author="cs-display-property" widget-format='cs-display-multiple-property' label-format='' multiple-format @@ -247,24 +233,23 @@ container.block_list.flex.flex_espace sib-display.resource_by_step( data-src=`${endpoints.steps}5/resources/`, - fields='name, format, publication_year, description, country, language.name, field, steps', - search-fields='search_for_a_resource(name, description, author), format, publication_year, country, language.name, field, steps', + fields='name, author, format, publication_year, description, country, language.name, field', + search-fields='search_for_a_resource(name, description, author), more_criterias_hidden(format, publication_year, country, language.name, field)', + + search-range-format=`${endpoints.formats}` search-widget-search_for_a_resource="hidden-widget" - search-widget-format="hidden-widget" - search-widget-publication_year="hidden-widget" - search-widget-country="hidden-widget" - search-widget-language.name="hidden-widget" - search-widget-field="hidden-widget" - search-widget-steps="hidden-widget" - + search-widget-more_criterias_hidden="hidden-widget" + search-multiple-format='sib-form-dropdown' + search-widget-format='sib-form-auto-completion' widget-name='cs-display-property' + widget-country='cs-display-property' widget-publication_year='cs-display-property' widget-description='cs-display-property' + widget-field='cs-display-property' widget-language.name="hidden-widget" - widget-author="hidden-widget" - widget-steps="hidden-widget" + widget-author="cs-display-property" widget-format='cs-display-multiple-property' label-format='' multiple-format diff --git a/src/includes/mentor/profile/create.pug b/src/includes/mentor/profile/create.pug index 96049e4fcfaca9a2e2f3df66908c8c3b54860b43..17f7c8f75f9c65492c761857cf429925ed7b42b0 100644 --- a/src/includes/mentor/profile/create.pug +++ b/src/includes/mentor/profile/create.pug @@ -10,7 +10,7 @@ figure.logo.img_log h2.title_create Complete your mentor account -sib-form.block_log.block_creat_count( +sib-form#mentor_profile_creation.block_log.block_creat_count( bind-user fields="account_information(last_name, first_name, mentor_profile.organisation,\ mentor_profile.phone, mentor_profile.languages, mentor_profile.fields),\ diff --git a/src/includes/mentor/profile/detail.pug b/src/includes/mentor/profile/detail.pug index f6d61e1250068849f8f1d6257e628371b5b837d5..20d6f09f84cadcd15d3c7f2d321d88f9821a2f53 100644 --- a/src/includes/mentor/profile/detail.pug +++ b/src/includes/mentor/profile/detail.pug @@ -27,7 +27,7 @@ div.block_list.flex sib-link(next='mentor-account-edit') button.button_edit <i class="fas fa-pen" aria-hidden="true"></i> - sib-display( + sib-display#mentor_info( bind-user fields='account.picture, name, mentor_profile.headline, mentor_profile.city, mentor_profile.country, registered_on' widget-account.picture='cs-profile-picture' @@ -45,7 +45,7 @@ div.block_list.flex bind-user ) - sib-display( + sib-display#mentor_complementary( bind-user fields='biography_label, mentor_profile.biography, skills_label, mentor_profile.skills' widget-biography_label='cs-display-label' @@ -56,7 +56,7 @@ div.block_list.flex widget-mentor_profile.biography='cs-display-property' ) - sib-display( + sib-display#mentor_contact( bind-user fields='email, mentor_profile.phone, mentor_profile.linkedin, mentor_profile.twitter' label-email='Email:' diff --git a/src/scripts/coopstarter.js b/src/scripts/coopstarter.js index 6111b607817222644091ca09154f7d41082aaed2..aef0b5ff23f1005613ff3ed0c522da8fb870ab5d 100644 --- a/src/scripts/coopstarter.js +++ b/src/scripts/coopstarter.js @@ -36,68 +36,173 @@ function refreshList(formId, listId) { }); } -jQuery(document).ready(function($) { - // Get the element with id="defaultOpen" and click on it - document.getElementById("defaultOpen").click(); - - let userAccountDataSrc = document.getElementById("user-account-picture"); - linkDatasetToField(userAccountDataSrc, 'validation-form', 'reviewer'); - linkDatasetToField(userAccountDataSrc, 'improvement-dialog-form', 'reviewer'); - linkDatasetToField(userAccountDataSrc, 'refusal-dialog-form', 'reviewer'); - - refreshList("resource-creation-form", "resources-history"); - refreshList("validation-form", "pending-resources"); - refreshList("refusal-dialog-form", "pending-resources"); - refreshList("improvement-dialog-form", "pending-resources"); - - 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-index" } - }) - ); - document.querySelector("sib-auth").logout(); - setTimeout(function() { - location.reload(); - }, 1000); +jQuery(document).ready(function($) { + // Get the element with id="defaultOpen" and click on it + document.getElementById("defaultOpen").click(); + + let userAccountDataSrc = document.getElementById("user-account-picture"); + linkDatasetToField(userAccountDataSrc, "validation-form", "reviewer"); + linkDatasetToField(userAccountDataSrc, "improvement-dialog-form", "reviewer"); + linkDatasetToField(userAccountDataSrc, "refusal-dialog-form", "reviewer"); + + 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("mentor_profile_creation", "mentor_info"); + refreshList("mentor_profile_creation", "mentor_complementary"); + refreshList("mentor_profile_creation", "mentor_contact"); + + 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-index" } + }) + ); + document.querySelector("sib-auth").logout(); + setTimeout(function() { + location.reload(); + }, 1000); + }); + } + + //ENTREPRENEUR DASHBOARD************************************************************* + //In the entrepreneur dashboard, we set data from the display form to the hidden ones. + var forms = document.querySelectorAll(".resource_by_step"); + + forms.forEach(form => { + 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 = document.getElementById("search-by-keyword"); + let keyword_field = keyword_form.querySelector(`input[name="keyword"]`); + + let keyword_submit = document.getElementById(`keyword_submit`); + let keyword_hidden_fields = document.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); + form.querySelector("sib-form").component.inputChange(); + }); }); - } + //SEARCH IN DATABASE INSTANCE ONLY + let instance_only = document.getElementById("instance_database_only"); + let checkbox_instance_only = instance_only.querySelector("input"); + + checkbox_instance_only.onclick = function() { + if (this.checked) { + //We have to retrieve all data-scr needed to make them pointed only on the instance. + //How to? + } + }; + + //MORE CRITERIAS + //TODO: Refactor this section ? + const more_criterias_form = document.getElementById("more_criterias"); + + // https://git.happy-dev.fr/startinblox/framework/sib-core/issues/453 + window.setTimeout(() => { + //To retrieve format + //TODO: How we should filled the hidden field with multiple value? + //TODO: The hidden search field set with one value doesn't work + let format_field_search = more_criterias_form.querySelector( + `select[name="format"]` + ); + format_hidden_field = document.querySelectorAll( + 'hidden-widget[name="more_criterias_hidden"] select[name="format"]' + ); + + + //TODO: Every time the format field in the search form changes + //Iterate through all 5 filters form associated with the sib-displays + //Iterate through their inputs to get the format one + //Change the value and the selected option of this field + //Reload the component to trigger the filter + format_field_search.onchange = function() { + let option_selected = format_field_search.querySelector( + "option:checked" + ); + + format_hidden_field.forEach(function(select_hidden) { + 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) { + //Actually selecting the option if it is the good one + option_hidden.setAttribute("selected", "selected"); + select_hidden.setAttribute('value', option_selected.value) + } + + //Trigerring a reload of the associated form + let parent_form = select_hidden.closest('sib-form'); + parent_form.component.inputChange(); + } + }); + }; + + //To retrieve language + //TODO: How we should filled the hidden field? + let language_field_search = more_criterias_form.querySelector( + `select[name="language.name"]` + ); + language_hidden_fields = document.querySelectorAll( + 'hidden-widget[name="more_criterias_hidden"] input[name="language.name"]' + ); + + language_field_search.onchange = function() { + language_hidden_fields.forEach(language_field => { + language_field.setAttribute( + "value", + language_field_search.options[language_field_search.selectedIndex] + .text + ); + form.querySelector("sib-form").component.inputChange(); + }); + }; - //In the entrepreneur dashboard, we set data from the display form to the hidden ones. - let keyword_form = document.getElementById('search-by-keyword'); - keyword_form.addEventListener("populate", event => { - let keyword_field = keyword_form.querySelector(`input[name="keyword"]`); - - console.log(keyword_field) - let displays = document.querySelectorAll('.resource_by_step'); - displays.forEach(display => { - console.log('display', display); - display.addEventListener('populate', event => { - let hidden_fields= display.querySelectorAll('hidden-widget[name="search_for_a_resource"] input') - console.log('Hiddent fields of display:', hidden_fields); - keyword_field.addEventListener("input", function(){ - hidden_fields.forEach(hidden_field => { - hidden_field.setAttribute("value", keyword_field.value) - console.log(hidden_fields) - console.log("element.value", hidden_field.value) - console.log("keyword_field.value", keyword_field.value) - }); - }); - }); - - let hidden_fields= display.querySelectorAll('hidden-widget[name="search_for_a_resource"] input') - console.log('Hiddent fields of display:', hidden_fields); - keyword_field.addEventListener("input", function(){ - hidden_fields.forEach(hidden_field => { - hidden_field.setAttribute("value", keyword_field.value) - console.log(hidden_fields) - console.log("element.value", hidden_field.value) - console.log("keyword_field.value", keyword_field.value) - }); - }); - }); + //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"]` + ); + let year_hidden_fields = document.querySelectorAll( + 'hidden-widget[name="more_criterias_hidden"] input[name="publication_year"]' + ); + + year_field_search.addEventListener("input", function() { + year_hidden_fields.forEach(year_field => { + year_field.setAttribute("value", year_field_search.value); + form.querySelector("sib-form").component.inputChange(); + }); + }); + + //To retrieve the country + let country_field_search = more_criterias_form.querySelector( + `input[name="country"]` + ); + let country_hidden_fields = document.querySelectorAll( + 'hidden-widget[name="more_criterias_hidden"] input[name="country"]' + ); + + country_field_search.addEventListener("input", function() { + country_hidden_fields.forEach(country_field => { + country_field.setAttribute("value", country_field_search.value); + form.querySelector("sib-form").component.inputChange(); + }); + }); + }, 4000); }); - }); + }); +}); diff --git a/src/styles/index.scss b/src/styles/index.scss index 5fc9ebf9b9fe366ee22289e7c4d9ee8b151c96ca..93df0a0aba6652c75e05f0c64aa1216bf29f980f 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -727,9 +727,10 @@ XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/ float: left; width: 80%; } - input[type="submit"]{ + #keyword_submit{ float: right; margin-top: 0; + width: 20%; } } /* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX