WIP: Filtering by type.

src/includes/components/widgets.pug

@@ -125,7 +125,12 @@ sib-widget(name='cs-profile-picture')
       img(name="${name}", src="\${value || '/images/alien.jpg'}", alt="Coopstarter")
 
 
-  sib-widget(name="hidden-widget")
-      template
-          div(data-content style="display:none;")
-      
\ No newline at end of file
+sib-widget(name="hidden-widget")
+    template
+        div(data-content style="display:none;")
+
+sib-widget(name="fake-tabs")
+    template
+      h2.fake-tabs ${value}
+
+    
\ No newline at end of file

src/includes/entrepreneur/resources/list.pug

@@ -78,246 +78,277 @@ container.block_list.flex.flex_espace
     div#resources-loader
         hidden Loading resources, please wait...
 
-    //Step 1
-    sib-display#circles-list(
-        loader-id="resources-loader"
-        data-src=`${endpoints.steps}1/`,
-        fields='name'
-
-        label-name ='Step 1 '
-        label-resources=''
-        
-        widget-name='cs-steps-header'
-    )
-    
-    sib-display.resource_by_step(
-        data-src=`${endpoints.steps}1/resources/`,
-        fields='name, author, format, publication_year, description,  country, language, fields',
-        search-fields='search_for_a_resource(name, description, author), more_criterias_hidden(format, publication_year, country, language, fields)',  
-        search-range-format=`${endpoints.formats}`
-        search-range-language=`${endpoints.languages}`
-        search-range-fields=`${endpoints.fields}`
-
-
-        search-widget-search_for_a_resource="hidden-widget"
-        search-widget-more_criterias_hidden="hidden-widget"
-        search-multiple-format='sib-form-dropdown'
-        search-widget-format='sib-form-auto-completion'
-        search-multiple-language='sib-form-dropdown'
-        search-widget-language='sib-form-auto-completion'
-        search-multiple-fields='sib-form-dropdown'
-        search-widget-fields='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-fields='hidden-widget'
-        widget-language="hidden-widget"
-        widget-author="cs-display-property"
-        widget-format='cs-display-multiple-property'
-        label-format=''
-        multiple-format
-        label-language=''
-        multiple-language
-        label-fields=''
-        multiple-fields
-        
-        paginate-by="5"
-    )
+    //Fake tabs to filter by type.
+    div.tabs.flex_espace
+        div(class='tablink filter_by_type active', onclick="openFakeTab(this)")
+            sib-display#type1(
+                data-src="https://api.coopstarter.happy-dev.fr/types/1/"
+                fields='name'
+                widget-name='fake-tabs'
+            )
 
-     //Step 2
-    sib-display#circles-list(
-        data-src=`${endpoints.steps}2/`,
-        fields='name'
+        div(class='tablink filter_by_type', onclick="openFakeTab(this)")
+            sib-display#type2(
+                data-src="https://api.coopstarter.happy-dev.fr/types/2/"
+                fields='name'
+                widget-name='fake-tabs'
+            )
+
+        div.block_log.block_list
+       
+            //Step 1
+            sib-display#circles-list(
+                loader-id="resources-loader"
+                data-src=`${endpoints.steps}1/`,
+                fields='name'
+
+                label-name ='Step 1 '
+                label-resources=''
+                
+                widget-name='cs-steps-header'
+            )
+            
+            sib-display.resource_by_step(
+                data-src=`${endpoints.steps}1/resources/`,
+                fields='name, author, format, publication_year, description,  country, language, fields',
+                search-fields='search_for_a_resource(name, description, author), more_criterias_hidden(format, publication_year, country, language, fields, type)',  
+                search-range-format=`${endpoints.formats}`
+                search-range-language=`${endpoints.languages}`
+                search-range-fields=`${endpoints.fields}`
+                search-range-type=`${endpoints.types}`
+
+
+                search-widget-search_for_a_resource="hidden-widget"
+                search-multiple-type='sib-form-dropdown'
+                search-widget-type='sib-form-auto-completion'
+                search-multiple-format='sib-form-dropdown'
+                search-widget-format='sib-form-auto-completion'
+                search-multiple-language='sib-form-dropdown'
+                search-widget-language='sib-form-auto-completion'
+                search-multiple-fields='sib-form-dropdown'
+                search-widget-fields='sib-form-auto-completion'
 
-        label-name ='Step 2 '
-        label-resources=''
-        
-        widget-name='cs-steps-header'  
-    )
-
-    sib-display.resource_by_step(
-        data-src=`${endpoints.steps}2/resources/`,
-        fields='name, author, format, publication_year, description,  country, language, fields',
-        search-fields='search_for_a_resource(name, description, author), more_criterias_hidden(format, publication_year, country, language, fields)',  
-        search-range-format=`${endpoints.formats}`
-        search-range-language=`${endpoints.languages}`
-        search-range-fields=`${endpoints.fields}`
-
-
-        search-widget-search_for_a_resource="hidden-widget"
-        search-widget-more_criterias_hidden="hidden-widget"
-        search-multiple-format='sib-form-dropdown'
-        search-widget-format='sib-form-auto-completion'
-        search-multiple-language='sib-form-dropdown'
-        search-widget-language='sib-form-auto-completion'
-        search-multiple-fields='sib-form-dropdown'
-        search-widget-fields='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-fields='hidden-widget'
-        widget-language="hidden-widget"
-        widget-author="cs-display-property"
-        widget-format='cs-display-multiple-property'
-        label-format=''
-        multiple-format
-        label-language=''
-        multiple-language
-        label-fields=''
-        multiple-fields
         
-        paginate-by="5"
-    )
+                widget-name='cs-display-property'
+                widget-country='cs-display-property'
+                widget-publication_year='cs-display-property'
+                widget-description='cs-display-property'
+                widget-fields='hidden-widget'
+                widget-language="hidden-widget"
+                widget-author="cs-display-property"
+                widget-format='cs-display-multiple-property'
+                label-format=''
+                multiple-format
+                label-language=''
+                multiple-language
+                label-fields=''
+                multiple-fields
+                
+                paginate-by="5"
+            )
 
-    //Step 3
-    sib-display#circles-list(
-        data-src=`${endpoints.steps}3/`,
-        fields='name'
+            //Step 2
+            sib-display#circles-list(
+                data-src=`${endpoints.steps}2/`,
+                fields='name'
+
+                label-name ='Step 2 '
+                label-resources=''
+                
+                widget-name='cs-steps-header'  
+            )
+
+            sib-display.resource_by_step(
+                data-src=`${endpoints.steps}2/resources/`,
+                fields='name, author, format, publication_year, description,  country, language, fields',
+                search-fields='search_for_a_resource(name, description, author), more_criterias_hidden(format, publication_year, country, language, fields, type)',  
+                search-range-format=`${endpoints.formats}`
+                search-range-language=`${endpoints.languages}`
+                search-range-fields=`${endpoints.fields}`
+                search-range-type=`${endpoints.types}`
+
+
+                search-widget-search_for_a_resource="hidden-widget"
+                search-widget-more_criterias_hidden="hidden-widget"
+                search-multiple-type='sib-form-dropdown'
+                search-widget-type='sib-form-auto-completion'
+                search-multiple-format='sib-form-dropdown'
+                search-widget-format='sib-form-auto-completion'
+                search-multiple-language='sib-form-dropdown'
+                search-widget-language='sib-form-auto-completion'
+                search-multiple-fields='sib-form-dropdown'
+                search-widget-fields='sib-form-auto-completion'
 
-        label-name ='Step 3 '
-        label-resources=''
         
-        widget-name='cs-steps-header'   
-
-    )
-
-    sib-display.resource_by_step(
-        data-src=`${endpoints.steps}3/resources/`,
-        fields='name, author, format, publication_year, description,  country, language, fields',
-        search-fields='search_for_a_resource(name, description, author), more_criterias_hidden(format, publication_year, country, language, fields)',  
-        search-range-format=`${endpoints.formats}`
-        search-range-language=`${endpoints.languages}`
-        search-range-fields=`${endpoints.fields}`
-
-
-        search-widget-search_for_a_resource="hidden-widget"
-        search-widget-more_criterias_hidden="hidden-widget"
-        search-multiple-format='sib-form-dropdown'
-        search-widget-format='sib-form-auto-completion'
-        search-multiple-language='sib-form-dropdown'
-        search-widget-language='sib-form-auto-completion'
-        search-multiple-fields='sib-form-dropdown'
-        search-widget-fields='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-fields='hidden-widget'
-        widget-language="hidden-widget"
-        widget-author="cs-display-property"
-        widget-format='cs-display-multiple-property'
-        label-format=''
-        multiple-format
-        label-language=''
-        multiple-language
-        label-fields=''
-        multiple-fields
+                widget-name='cs-display-property'
+                widget-country='cs-display-property'
+                widget-publication_year='cs-display-property'
+                widget-description='cs-display-property'
+                widget-fields='hidden-widget'
+                widget-language="hidden-widget"
+                widget-author="cs-display-property"
+                widget-format='cs-display-multiple-property'
+                label-format=''
+                multiple-format
+                label-language=''
+                multiple-language
+                label-fields=''
+                multiple-fields
+                
+                paginate-by="5"
+            )
+
+            //Step 3
+            sib-display#circles-list(
+                data-src=`${endpoints.steps}3/`,
+                fields='name'
+
+                label-name ='Step 3 '
+                label-resources=''
+                
+                widget-name='cs-steps-header'   
+
+            )
+
+            sib-display.resource_by_step(
+                data-src=`${endpoints.steps}3/resources/`,
+                fields='name, author, format, publication_year, description,  country, language, fields',
+                search-fields='search_for_a_resource(name, description, author), more_criterias_hidden(format, publication_year, country, language, fields, type)',  
+                search-range-format=`${endpoints.formats}`
+                search-range-language=`${endpoints.languages}`
+                search-range-fields=`${endpoints.fields}`
+                search-range-type=`${endpoints.types}`
+
+
+                search-widget-search_for_a_resource="hidden-widget"
+                search-widget-more_criterias_hidden="hidden-widget"
+                search-multiple-type='sib-form-dropdown'
+                search-widget-type='sib-form-auto-completion'
+                search-multiple-format='sib-form-dropdown'
+                search-widget-format='sib-form-auto-completion'
+                search-multiple-language='sib-form-dropdown'
+                search-widget-language='sib-form-auto-completion'
+                search-multiple-fields='sib-form-dropdown'
+                search-widget-fields='sib-form-auto-completion'
         
-        paginate-by="5"
-    )
-
-    //Step 4
-    sib-display#circles-list(
-        data-src=`${endpoints.steps}4/`,
-        fields='name'
-
-        label-name ='Step 4 '
-        label-resources=''
-
-        widget-name='cs-steps-header'
-
-    )
-
-    sib-display.resource_by_step(
-        data-src=`${endpoints.steps}4/resources/`,
-        fields='name, author, format, publication_year, description,  country, language, fields',
-        search-fields='search_for_a_resource(name, description, author), more_criterias_hidden(format, publication_year, country, language, fields)',  
-        search-range-format=`${endpoints.formats}`
-        search-range-language=`${endpoints.languages}`
-        search-range-fields=`${endpoints.fields}`
-
-
-        search-widget-search_for_a_resource="hidden-widget"
-        search-widget-more_criterias_hidden="hidden-widget"
-        search-multiple-format='sib-form-dropdown'
-        search-widget-format='sib-form-auto-completion'
-        search-multiple-language='sib-form-dropdown'
-        search-widget-language='sib-form-auto-completion'
-        search-multiple-fields='sib-form-dropdown'
-        search-widget-fields='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-fields='hidden-widget'
-        widget-language="hidden-widget"
-        widget-author="cs-display-property"
-        widget-format='cs-display-multiple-property'
-        label-format=''
-        multiple-format
-        label-language=''
-        multiple-language
-        label-fields=''
-        multiple-fields
+                widget-name='cs-display-property'
+                widget-country='cs-display-property'
+                widget-publication_year='cs-display-property'
+                widget-description='cs-display-property'
+                widget-fields='hidden-widget'
+                widget-language="hidden-widget"
+                widget-author="cs-display-property"
+                widget-format='cs-display-multiple-property'
+                label-format=''
+                multiple-format
+                label-language=''
+                multiple-language
+                label-fields=''
+                multiple-fields
+                
+                paginate-by="5"
+            )
+
+            //Step 4
+            sib-display#circles-list(
+                data-src=`${endpoints.steps}4/`,
+                fields='name'
+
+                label-name ='Step 4 '
+                label-resources=''
+
+                widget-name='cs-steps-header'
+
+            )
+
+            sib-display.resource_by_step(
+                data-src=`${endpoints.steps}4/resources/`,
+                fields='name, author, format, publication_year, description,  country, language, fields',
+                search-fields='search_for_a_resource(name, description, author), more_criterias_hidden(format, publication_year, country, language, fields, type)',  
+                search-range-format=`${endpoints.formats}`
+                search-range-language=`${endpoints.languages}`
+                search-range-fields=`${endpoints.fields}`
+                search-range-type=`${endpoints.types}`
+
+
+                search-widget-search_for_a_resource="hidden-widget"
+                search-widget-more_criterias_hidden="hidden-widget"
+                search-multiple-type='sib-form-dropdown'
+                search-widget-type='sib-form-auto-completion'
+                search-multiple-format='sib-form-dropdown'
+                search-widget-format='sib-form-auto-completion'
+                search-multiple-language='sib-form-dropdown'
+                search-widget-language='sib-form-auto-completion'
+                search-multiple-fields='sib-form-dropdown'
+                search-widget-fields='sib-form-auto-completion'
+
         
-        paginate-by="5"
-    )
-
-    //Step 5
-    sib-display#circles-list(
-        data-src=`${endpoints.steps}5/`,
-        fields='name'
-
-        label-name ='Step 5 '
-        label-resources=''
-
-        widget-name='cs-steps-header'       
-    )
-
-    sib-display.resource_by_step(
-        data-src=`${endpoints.steps}5/resources/`,
-        fields='name, author, format, publication_year, description,  country, language, fields',
-        search-fields='search_for_a_resource(name, description, author), more_criterias_hidden(format, publication_year, country, language, fields)',  
-        search-range-format=`${endpoints.formats}`
-        search-range-language=`${endpoints.languages}`
-        search-range-fields=`${endpoints.fields}`
-
-
-        search-widget-search_for_a_resource="hidden-widget"
-        search-widget-more_criterias_hidden="hidden-widget"
-        search-multiple-format='sib-form-dropdown'
-        search-widget-format='sib-form-auto-completion'
-        search-multiple-language='sib-form-dropdown'
-        search-widget-language='sib-form-auto-completion'
-        search-multiple-fields='sib-form-dropdown'
-        search-widget-fields='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-fields='hidden-widget'
-        widget-language="hidden-widget"
-        widget-author="cs-display-property"
-        widget-format='cs-display-multiple-property'
-        label-format=''
-        multiple-format
-        label-language=''
-        multiple-language
-        label-fields=''
-        multiple-fields
+                widget-name='cs-display-property'
+                widget-country='cs-display-property'
+                widget-publication_year='cs-display-property'
+                widget-description='cs-display-property'
+                widget-fields='hidden-widget'
+                widget-language="hidden-widget"
+                widget-author="cs-display-property"
+                widget-format='cs-display-multiple-property'
+                label-format=''
+                multiple-format
+                label-language=''
+                multiple-language
+                label-fields=''
+                multiple-fields
+                
+                paginate-by="5"
+            )
+
+            //Step 5
+            sib-display#circles-list(
+                data-src=`${endpoints.steps}5/`,
+                fields='name'
+
+                label-name ='Step 5 '
+                label-resources=''
+
+                widget-name='cs-steps-header'       
+            )
+
+            sib-display.resource_by_step(
+                data-src=`${endpoints.steps}5/resources/`,
+                fields='name, author, format, publication_year, description,  country, language, fields',
+                search-fields='search_for_a_resource(name, description, author), more_criterias_hidden(format, publication_year, country, language, fields, type)',  
+                search-range-format=`${endpoints.formats}`
+                search-range-language=`${endpoints.languages}`
+                search-range-fields=`${endpoints.fields}`
+                search-range-type=`${endpoints.types}`
+
+
+                search-widget-search_for_a_resource="hidden-widget"
+                search-widget-more_criterias_hidden="hidden-widget"
+                search-multiple-type='sib-form-dropdown'
+                search-widget-type='sib-form-auto-completion'
+                search-multiple-format='sib-form-dropdown'
+                search-widget-format='sib-form-auto-completion'
+                search-multiple-language='sib-form-dropdown'
+                search-widget-language='sib-form-auto-completion'
+                search-multiple-fields='sib-form-dropdown'
+                search-widget-fields='sib-form-auto-completion'
+
         
-        paginate-by="5"
-    )
-    
+                widget-name='cs-display-property'
+                widget-country='cs-display-property'
+                widget-publication_year='cs-display-property'
+                widget-description='cs-display-property'
+                widget-fields='hidden-widget'
+                widget-language="hidden-widget"
+                widget-author="cs-display-property"
+                widget-format='cs-display-multiple-property'
+                label-format=''
+                multiple-format
+                label-language=''
+                multiple-language
+                label-fields=''
+                multiple-fields
+                
+                paginate-by="5"
+            )
+            

src/scripts/coopstarter.js

@@ -14,6 +14,18 @@ function openTab(pageName, elmnt) {
   elmnt.classList.add("active");
 }
 
+//Manage the visual of the fake tabs in entrepreneur dashboard.
+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");
+  }
+  elmnt.classList.add("active");
+}
+
 function linkDatasetToField(detail, targetFormName, inputName) {
   let targetForm = document.getElementById(targetFormName);
   targetForm.addEventListener("populate", event => {
@@ -38,16 +50,18 @@ function refreshList(formId, listId) {
 
 //Remove pagination when there is no resource in a step group
 function actualizePagination() {
-  console.log("we actu")
   var resources_containers = document.querySelectorAll(
     ".resource_by_step sib-form+div"
   );
   for (let resources_container of resources_containers) {
-    if (resources_container.childElementCount < 5 || resources_container.nextSibling.querySelector("nav span span+span").textContent == 1 ) {
+    if (
+      resources_container.childElementCount < 5 ||
+      resources_container.nextSibling.querySelector("nav span span+span")
+        .textContent == 1
+    ) {
       resources_container.nextSibling.setAttribute("style", "display:none");
     } else {
       resources_container.nextSibling.setAttribute("style", "display:block");
-
     }
   }
 }
@@ -143,13 +157,42 @@ jQuery(document).ready(function($) {
 
       // https://git.happy-dev.fr/startinblox/framework/sib-core/issues/453
       window.setTimeout(() => {
+        //Manage fake tabs
+        let tabs = document.getElementsByClassName("filter_by_type");
+        let type_hidden_field = document.querySelectorAll(
+          'hidden-widget[name="more_criterias_hidden"] select[name="type"]'
+        );
+
+        for (let tab of tabs) {
+          tab.addEventListener("click", function() {
+            if (tab.classList.contains("active")) {
+              
+              //Fullfill hidden field
+              let type_field_search = tab
+                .querySelector(`sib-display`)
+                .getAttribute("data-src");
+
+              type_hidden_field.forEach(function(select_hidden) {
+                options_hidden = select_hidden.getElementsByTagName("option");
+                for (let option_hidden of options_hidden) {
+                  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);
+                  }
+                }
+              });
+            }
+          });
+        }
+
         //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(
+        let format_hidden_field = document.querySelectorAll(
           'hidden-widget[name="more_criterias_hidden"] select[name="format"]'
         );
 
@@ -167,11 +210,11 @@ jQuery(document).ready(function($) {
               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)
+                select_hidden.setAttribute("value", option_selected.value);
               }
 
               //Trigerring a reload of the associated form
-              let parent_form = select_hidden.closest('sib-form');
+              let parent_form = select_hidden.closest("sib-form");
               parent_form.component.inputChange();
             }
             actualizePagination();
@@ -201,12 +244,11 @@ jQuery(document).ready(function($) {
               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)
-
+                select_hidden.setAttribute("value", option_selected.value);
               }
 
               //Trigerring a reload of the associated form
-              let parent_form = select_hidden.closest('sib-form');
+              let parent_form = select_hidden.closest("sib-form");
               parent_form.component.inputChange();
             }
             actualizePagination();
@@ -233,15 +275,14 @@ jQuery(document).ready(function($) {
               //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)
+                select_hidden.setAttribute("value", option_selected.value);
               }
 
               //Trigerring a reload of the associated form
-              let parent_form = select_hidden.closest('sib-form');
+              let parent_form = select_hidden.closest("sib-form");
               parent_form.component.inputChange();
             }
             actualizePagination();
@@ -249,7 +290,6 @@ jQuery(document).ready(function($) {
           });
         };
 
-
         //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.