update: making join leave works

src/menu-left.pug

@@ -15,8 +15,8 @@ nav#main__menu
     //- sib-route.menu(name='job-offers', rdf-type='hd:joboffer')
     //-   div.menu-label Job offers
     //-   div.menu-icon.icon-briefcase
-    //- sib-route(name='job-offer-create')
+    //- sib-route(name='job-offer-create', hidden)
-    //- sib-route(name='job-offer-edit', use-id)
+    //- sib-route(name='job-offer-edit', use-id, hidden)
     //- div.divider
     //- div.menu-wrapper
     //-   div.menu
@@ -24,7 +24,7 @@ nav#main__menu
     //-       div.menu-icon.icon-arrow-up
     //-     div.menu-label Projects
     //-     div.menu-icon.icon-folder-alt
-    //-   sib-route(name='project', rdf-type='hd:project', use-id='')
+    //-   sib-route(name='project', rdf-type='hd:project', use-id='', hidden)
     //-   div.sub-menu.menu-notification
     //-     sib-display(
     //-       data-src=`${endpoints.projects}`
@@ -35,7 +35,8 @@ nav#main__menu
     //-       search-fields='team'
     //-       search-widget-team='sib-form-hidden'
     //-       search-value-team='-'
-    //-       set-user-id='search-value-team'
+    //-       hd-inherit-user-id='search-value-team'
+    //-       hd-inherit-widgets
     //-       widget-badge='hd-counter'
     //-       action-badge='badge'
     //-     )
@@ -46,7 +47,7 @@ nav#main__menu
           div.menu-icon.icon-arrow-up
         div.menu-label Circles
         div.menu-icon.icon-folder-alt
-      sib-route(name='circle', rdf-type='hd:circle', use-id='')
+      sib-route(name='circle', rdf-type='hd:circle', use-id='', hidden)
       div.sub-menu.menu-notification
         sib-display(
           data-src=`${endpoints.circles}`
@@ -59,7 +60,8 @@ nav#main__menu
           search-fields='team'
           search-widget-team='sib-form-hidden'
           search-value-team='-'
-          set-user-id='search-value-team'
+          hd-inherit-user-id='search-value-team'
+          hd-inherit-widgets
           order-by='name'
           next='circle'
         )
@@ -70,7 +72,7 @@ nav#main__menu
           div.menu-icon.icon-arrow-up
         div.menu-label Chat
         div.menu-icon.icon-envelope-letter
-      sib-route(name='messages', rdf-type='foaf:user', use-id='')
+      sib-route(name='messages', rdf-type='foaf:user', use-id='', hidden)
       div.sub-menu.menu-notification
         sib-display(
           data-src=`${endpoints.users}`
@@ -82,7 +84,7 @@ nav#main__menu
           next='messages'
         )
 
-    sib-route(name='admin')
+    sib-route(name='admin', hidden)
     //- div.divider
     //- sib-route.menu(hidden, name='my-profile', rdf-type='foaf:user', use-id='')
 

src/page-admin-circles-create.pug

@@ -7,11 +7,13 @@ div.content-box__info
 
   sib-form.block(
     data-src=`${endpoints.circles}`
-    
+
     fields='name, description'
 
     class-name='form-label is-light is-full-width'
     class-description='form-label is-light is-full-width'
 
+    next='admin-circle-list'
+
     submit-button='Save'
   )

src/page-admin-circles.pug

@@ -1,5 +1,5 @@
 .content-box.full-width.with-form
-  sib-router(class='hidden' default-route='admin-circle-list')
+  sib-router(default-route='admin-circle-list', hidden)
     sib-route(name='admin-circle-list')
     sib-route(name='admin-circle-create')
 
@@ -10,32 +10,6 @@
 
   #admin-circle-list(hidden)
 
-    sib-widget(name="circle-admin-leave-button-template")
-      template
-        sib-ac-checker(
-          permission="acl:Delete"
-          data-src="${value['@id']}"
-        )
-          sib-delete(
-            class='button text-bold text-uppercase reversed button-dark bordered with-icon icon-close'
-            data-src="${value['@id']}"
-            data-label='Leave'
-          )
-
-    sib-widget(name="circle-admin-join-button-template")
-      template
-        //- BUG: Populate event trigger before the view is fully loaded! - https://git.happy-dev.fr/startinblox/framework/sib-core/issues/521
-        sib-form.circle-admin-join-button(
-          data-src="${src}" 
-          nested-field='members'
-          fields='user'
-          widget-user='sib-form-dropdown'
-          label-user=''
-          range-user=`${endpoints.users}`
-          submit-button='Join'
-          set-user-id-select="user"
-        )
-
     include templates/hd-user-avatar.pug
 
     sib-widget(name='circle-owner')
@@ -49,7 +23,7 @@
 
 
     div.content-box__info
-      
+
       div.admin-header
 
         div.admin-header__title Circles
@@ -66,36 +40,62 @@
           div Admins
           div Join
 
-        //-fields="name, own(owner.account.picture, owner.name), buttons(members, button)"
+        sib-widget(name='admin-circle-leave-button')
-        //-sib-display.table-body.test(
+          template
-            data-src=`${endpoints.circles}`
+            sib-delete(
-            fields='name, own(owner.account.picture, sup(owner.name), sub(owner.username)), buttons(members, button)'
+              class='button btn-margin-left text-bold text-uppercase reversed button-dark bordered with-icon icon-close'
+              data-src="${src}"
+              data-label='Leave circle'
+            )
 
-            multiple-groups=""
+        sib-widget(name='admin-circle-join-button')
-            widget-members="circle-admin-leave-button-template"
+          template
-            multiple-members=""
+            button.button.btn-margin-left.text-bold.text-uppercase.reversed.button-dark.bordered.with-icon.icon-arrow-right-circle.test
+              sib-form(
+                data-src=''
+                nested-field='members'
 
-            widget-button="circle-admin-join-button-template"
+                fields='user.@id'
-            action-button="button"
+                label-user.@id=''
+                value-user.@id=''
+                widget-user.@id='sib-form-hidden'
 
-            widget-owner.account.picture='hd-user-avatar'
+                hd-inherit-bind-user2input="input[name='user.@id']"
-          )
+                hd-inherit-widgets
+
+                submit-button='Join Circle'
+              )
+
+        sib-widget(name="admin-circle-buttons")
+          template
+            sib-display(
+              data-src='${src}'
+              nested-field='members'
+              fields='relation'
+              action-relation='relation'
+              widget-relation='admin-circle-leave-button'
+              search-fields='user'
+              search-widget-user='sib-form-hidden'
+              search-value-user="-"
+              empty-widget='admin-circle-join-button'
+              hd-inherit-bind-resources='admin-circle-join-button'
+              hd-inherit-user-id="search-value-user"
+              hd-inherit-widgets
+            )
 
         sib-display(
           class='table-body'
 
           data-src=`${endpoints.circles}`
-          fields='name, owner, buttons(members, button)'
+          fields='name, owner, buttons'
 
           class-name='w33 cell border'
           class-owner='w33 cell border'
-          
-          multiple-groups=""
-          widget-members="circle-admin-leave-button-template"
-          multiple-members=""
 
-          widget-button="circle-admin-join-button-template"
+          widget-buttons="admin-circle-buttons"
-          action-button="button"
+          action-buttons="buttons"
+          hd-inherit-widgets
+          hd-inherit-widgets-multiple
 
           widget-owner='circle-owner'
         )

src/page-admin-projects.pug

@@ -1,5 +1,5 @@
 .content-box.full-width.with-form
-  sib-router(default-route='admin-project-list')
+  sib-router(default-route='admin-project-list', hidden)
     sib-route(name='admin-project-list')
     sib-route(name='admin-project-create')
 

src/page-admin-users.pug

@@ -1,5 +1,5 @@
 .content-box.full-width.with-form
-  sib-router(default-route='admin-users-list')
+  sib-router(default-route='admin-users-list', hidden)
     sib-route(name='admin-users-list')
     sib-route(name='admin-users-create')
 

src/page-circle-edit.pug

@@ -17,7 +17,7 @@ div.content-box__info
         multiple-groups=''
         widget-groups='hd-user-groups'
       )
-      
+
       sib-ac-checker(
         class='w50 cell border'
         permission="acl:Delete"
@@ -42,7 +42,7 @@ div.content-box__info
 
   sib-form.block.circle-edit-form(
     bind-resources
-    
+
     fields='block-circle__info(name, owner), description'
     range-owner=`${endpoints.users}`
 
@@ -82,7 +82,7 @@ div.content-box__info
     div.table-header.grey-color
       div Name
       div Access
-      
+
       //-class='table-body'
     sib-display(
       class='table-body'

src/page-circle-profile.pug

@@ -11,8 +11,8 @@ sib-router(default-route='circle-profile', hidden)
         bind-resources
         fields='creationDateSet(title, creationDate)'
 
-        value-title='Creation date:'
+        value-title='Creation date: '
-        
+
         widget-creationDate='sib-display-date'
       )
       sib-ac-checker.testblock.circle-edit-button(permission='acl:Write', bind-resources)
@@ -37,40 +37,48 @@ sib-router(default-route='circle-profile', hidden)
           data-label='Delete Circle'
         )
 
-      sib-widget(name='join-leave-circle-button')
+      sib-widget(name='circle-leave-button')
         template
-          sib-ac-checker(
+          sib-delete(
-            permission="acl:Delete"
+            class='button btn-margin-left text-bold text-uppercase reversed button-dark bordered with-icon icon-close'
-            data-src="${value['@id']}"
+            data-src="${src}"
+            data-label='Leave Circle'
           )
-            sib-delete(
+
-              class='button btn-margin-left text-bold text-uppercase reversed button-dark bordered with-icon icon-close'
+      sib-widget(name='circle-join-button')
-              data-src="${value['@id']}"
+        template
-              data-label='Leave circle'
+          button.button.btn-margin-left.text-bold.text-uppercase.reversed.button-dark.bordered.with-icon.icon-arrow-right-circle.test
+            sib-form(
+              data-src=''
+              nested-field='members'
+
+              fields='user.@id'
+              label-user.@id=''
+              value-user.@id=''
+              widget-user.@id='sib-form-hidden'
+
+              hd-inherit-bind-user2input="input[name='user.@id']"
+              hd-inherit-widgets
+
+              submit-button='Join Circle'
             )
 
       sib-display(
         bind-resources
-        fields='members'
+        nested-field='members'
-
+        fields='relation'
-        multiple-members=''
+        action-relation='relation'
-        widget-members='join-leave-circle-button'
+        widget-relation='circle-leave-button'
+        search-fields='user'
+        search-widget-user='sib-form-hidden'
+        search-value-user=""
+        empty-widget='circle-join-button'
+        hd-inherit-bind-resources='circle-join-button'
+        hd-inherit-user-id="search-value-user"
+        hd-inherit-widgets
       )
 
-      button.button.btn-margin-left.text-bold.text-uppercase.reversed.button-dark.bordered.with-icon.icon-arrow-right-circle.test
-        sib-form(
-          bind-resources 
-          nested-field='members'
-          fields='user'
-          label-user=''
-          range-user=`${endpoints.users}`
-          widget-user='sib-form-dropdown'
 
-          set-user-id-select="user"
-
-          submit-button='Join Circle'
-        )
-    
 
 #circle-edit(hidden)
   include page-circle-edit.pug

src/page-project-profile.pug

@@ -10,7 +10,7 @@
     
     value-const-title1='N°',
     value-const-title2='-',
-    value-entitled='Creation date:'
+    value-entitled='Creation date: '
 
     value-label-description='DESCRIPTION:',
     widget-customer.logo='sib-display-img',

src/scripts/index.js

@@ -1,11 +1,45 @@
-function querySelectorParentChild(el, selector) {
+function recursiveAdaptWidgets(prefix, element, user) {
-  while(el !== document.body) {
+  //- This function is a workaround for the currently unworking populate
-    if(el.querySelector(selector)) {
+  //- Feel free to see examples on page-circles-
-      break;
+
+  element.querySelectorAll('[' + prefix + '-user-id]').forEach((el) => {
+    el.setAttribute(el.getAttribute(prefix + '-user-id'), user['@id']);
+  });
+
+  if (element != document) {
+
+    //- Allow to bind-user on selected attribute
+    if (element.getAttribute(prefix + '-user-id')) {
+      element.setAttribute(element.getAttribute(prefix + '-user-id'), user['@id']);
+    }
+
+    //- Allow to set data-src to a children sib-form
+    if (element.getAttribute(prefix + '-bind-resources')) {
+      let form = element.querySelector(element.getAttribute(prefix + '-bind-resources') + " sib-form");
+      if (form) {
+        form.setAttribute('data-src', element.component.resourceId.replace('members/', ''));
+      }
+    }
+
+    //- Allow to put user on a targetted search field
+    if (element.getAttribute(prefix + '-bind-user2input')) {
+      element.querySelector(element.getAttribute(prefix + '-bind-user2input')).value = user['@id'];
+    }
+
+    //- In case your sib-display use a multiple, you have to target sub-sib-display auto-generated
+    if (element.getAttribute(prefix + '-widgets-multiple') !== null) {
+      element.querySelectorAll('div > sib-display').forEach((el) => {
+        el.setAttribute(prefix + '-widgets', "");
+      });
     }
-    el = el.parentNode;
   }
-  return el.querySelector(selector);
+
+  //- This function is hooked every time a sib-something with prefix+"-widgets" is populated
+  element.querySelectorAll('[' + prefix + '-widgets]').forEach((elementChild) => {
+    elementChild.addEventListener('populate', () => {
+      recursiveAdaptWidgets(prefix, elementChild, user);
+    });
+  });
 }
 
 document.addEventListener('DOMContentLoaded', function (event) {
@@ -35,44 +69,18 @@ document.addEventListener('DOMContentLoaded', function (event) {
     })
   });
 
-  //- Watch every sib-forms & update data-src of linked sib-display
-  document.querySelectorAll('sib-form[data-src], sib-form[bind-resource]').forEach(function(el) {
-    el.addEventListener("save", function() {
-      let dataSrc = el.getAttribute('data-src');
-      document.querySelectorAll('sib-display[data-src="'+dataSrc+'"]').forEach(function(e) {
-        e.resource.clearCache();
-      });
-    });
-  });
-
   document.querySelector('sib-auth').getUser().then(user => {
-    if(user !== null) {
+    if (user !== null) {
       // Hide login button if already logged
       document.querySelector('button[role="log in"]').setAttribute('style', 'display:none !important');
       // Set current user id on set-user-id of sib-display
-      for(sibDisplay of document.querySelectorAll('sib-display[set-user-id]')) {
+      recursiveAdaptWidgets("hd-inherit", document, user);
-        sibDisplay.setAttribute(sibDisplay.getAttribute('set-user-id'), user['@id']);
+      for (leaveBtn of document.querySelectorAll('admin-circle-leave > sib-ac-checker:not([hidden])')) {
-      }
-
-      for(sibForm of document.querySelectorAll('[set-user-id-select]')) {
-        sibForm.addEventListener('populate', () => {
-          // BUG: Populate event trigger before the view is fully loaded! - https://git.happy-dev.fr/startinblox/framework/sib-core/issues/521
-          document.querySelectorAll('sib-ac-checker:not([hidden]) > sib-delete[data-label^="Leave"]').forEach((el)=>{
-            querySelectorParentChild(el, 'sib-form[submit-button^="Join"]').setAttribute('style', 'display:none !important');
-          });
-          for(select of sibForm.querySelectorAll('select[name="'+sibForm.getAttribute('set-user-id-select')+'"]')) {
-            for(option of select.options) {
-              option.selected = (option.getAttribute('value') == '{"@id": "'+user['@id']+'"}');
-            }
-          }
-        });
-      }
-      for(leaveBtn of document.querySelectorAll('admin-circle-leave > sib-ac-checker:not([hidden])')) {
         leaveBtn.parentNode.parentNode.parentNode.nextElementSibling.setAttribute('style', 'display:none !important'); // Hide Join button
       }
     }
   }).catch(error => console.log(error));
 
 
-  
+
 });

src/styles/layout/circle/circle-admin.scss

@@ -6,25 +6,4 @@
   .admin-header__title {
     @extend h3;
   }
-}
+}
-
-.circle-admin-join-button select[name='user'] {
-  display: none;
-}
-
-#admin-circle-list{
-
-  
-
-  /*
-    >sib-set-default[name='buttons'] {
-      display: flex;
-      justify-content: center;
-
-      >sib-multiple {
-        align-items: center;
-        display: flex;
-      }
-    }
-  }*/
-}