update: Cleanup circle information

src/page-circle-edit.pug

@@ -3,7 +3,7 @@ div.content-box__info
   include templates/hd-user-avatar.pug
 
   sib-widget(name='hd-user-groups')
-    template ${await value.name}
+    template ${value.name}
 
   sib-widget(name='team-template-edit')
     template
@@ -19,17 +19,17 @@ div.content-box__info
       
       sib-ac-checker(
         permission="acl:Delete"
-        data-src="${await value['@id']}"
+        data-src="${value['@id']}"
       )
         sib-delete(
-          data-src="${await value['@id']}"
+          data-src="${value['@id']}"
           data-label='Leave the circle'
         )
 
       //- Only to show the table grid
       sib-ac-checker(
         no-permission="acl:Delete"
-        data-src="${await value['@id']}"
+        data-src="${value['@id']}"
       )
 
   sib-link(class="backlink", bind-resources, next='circle-profile') Back

src/page-circle-profile.pug

@@ -7,49 +7,96 @@
     include templates/hd-circle-team.pug
     
     div.content-box__header.with-edit
-      sib-display(
+      sib-ac-checker(permission='acl:Read', bind-resources)
-        bind-resources
+        sib-display(
-        fields='name'
+          bind-resources
+          fields='name'
 
-        class-name='name'
+          class-name='name'
-      )
+        )
-
-      sib-link(class="editlink", next="circle-edit" bind-resources)
 
     div.content-box__info
 
-      sib-display.block(
+      sib-ac-checker(permission='acl:Read', bind-resources)
-        bind-resources
+        sib-ac-checker(permission='acl:Write', bind-resources)
-        fields='label-description, description, entitled(title, creationDate)'
+          sib-link(class="right-btn", next="circle-edit", bind-resources) Edit and add Members
 
-        value-label-description='Description: '
+        sib-display.block(
+          bind-resources
+          fields='creationDateSet(title, creationDate), label-description, description'
 
-        default-description='No description available.'
+          value-label-description='Description: '
 
-        value-title='Creation date:'
+          default-description='No description available.'
-      )
 
-      sib-ac-checker(permission='acl:Write' bind-resources, nested-field='team')
+          value-title='Creation date:'
+        )
+
+      
+        h2(name="label-team") Members:
+
+        //- TODO: sib-ac-checker unworking - https://git.happy-dev.fr/startinblox/framework/sib-core/issues/517
+        //- sib-ac-checker(permission='acl:Write', bind-resources, nested-field='team')
         sib-form.block.team-form(
           bind-resources 
-          fields='team'
+          nested-field='members'
-          range-team=`${endpoints.users}`
+          fields='user'
-          partial=''
+          range-user=`${endpoints.users}`
 
-          class-team='team form-label is-dark'
+          class-user='team form-label is-dark'
-          label-team='Members:'
+          label-user=''
-          widget-team='sib-form-auto-completion'
+          widget-user='sib-form-auto-completion'
 
           submit-button='Add a member'
         )
 
-      sib-display.block(
+        sib-display.block(
-        bind-resources
+          bind-resources
-        fields='team'
+          fields='team'
+
+          multiple-team=''
+          widget-team='circle-team-template'
+        )
+
+        sib-ac-checker(permission='acl:Delete', bind-resources)
+          sib-delete(
+            bind-resources
+            data-label='Delete Circle'
+            class='right-btn reversed-btn'
+          )
+
+        sib-widget(name='join-leave-circle-button')
+          template
+            sib-ac-checker(
+              permission="acl:Delete"
+              data-src="${value['@id']}"
+            )
+              sib-delete(
+                data-src="${value['@id']}"
+                data-label='Leave circle'
+              )
+
+        sib-display(
+          bind-resources
+          fields='members'
+
+          multiple-members=''
+          widget-members='join-leave-circle-button'
+        )
+
+        sib-form.block.team-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'
+        )
       
-        multiple-team=''
-        widget-team='team-template'
-      )
 
   #circle-edit(hidden)
     include page-circle-edit.pug

src/page-project-profile.pug

@@ -25,7 +25,7 @@
     widget-captain='captain-template',
 
     value-label-team='TEAM:',
-    widget-members='team-template',
+    widget-members='project-team-template',
     multiple-members,
 
     bind-resources

src/scripts/index.js

@@ -43,7 +43,24 @@ document.addEventListener('DOMContentLoaded', function (event) {
       for(sibDisplay of document.querySelectorAll('sib-display[set-user-id]')) {
         sibDisplay.setAttribute(sibDisplay.getAttribute('set-user-id'), user['@id']);
       }
+
+      for(sibForm of document.querySelectorAll('[set-user-id-select]')) {
+        sibForm.addEventListener('populate', () => {
+          document.querySelector('sib-form[submit-button="Join Circle"]').style.display = 'none';
+          if(document.querySelectorAll('sib-ac-checker:not([hidden]) > sib-delete[data-label="Leave circle"]').length == 0) {
+            document.querySelector('sib-form[submit-button="Join Circle"]').style.display = 'inline-block';
+          }
+          // BUG: Populate event trigger before the view is fully loaded! - https://git.happy-dev.fr/startinblox/framework/sib-core/issues/521
+          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']+'"}');
+            }
+          }
+        });
+      }
     }
   }).catch(error => console.log(error));
 
+
+  
 });

src/styles/base/form.scss

@@ -86,7 +86,7 @@
       }
     }
 
-    input[type='submit'] {
+    input[type='submit'], .right-btn, sib-delete.right-btn button {
       background-color: $color-233-18-29;
       border: none;
       border-radius: 100em;
@@ -100,6 +100,31 @@
       text-transform: uppercase;
     }
 
+    .reversed-btn, sib-delete.reversed-btn button {
+      background-color: transparent;
+      border: 1px solid #6157e5;
+      color: #6157e5;
+    }
+    
+    sib-delete.right-btn {
+      border: none;
+      border-radius: 0;
+      margin: 0;
+      padding: 0;
+    }
+
+    sib-form[set-user-id-select] {
+
+      input[type="submit"] {
+        margin-left: 0;
+        margin-top: 0;
+      }
+
+      select {
+        display: none;
+      }
+    }
+
     /* CLASSES Peut-être à sortir de .content-box */
 
     .block.team-form>form { /* circle-profile */

src/styles/layout/circle-profile/circle-edit.scss

@@ -1,138 +1,135 @@
-h2 {
+#circle-edit {
-  font-size: 1.7rem;
-  font-weight: bold;
-  text-transform: uppercase;
-}
 
-.table-header {
+  .table-header {
-  background: $color-228-25-79;
+    background: $color-228-25-79;
-  color: white;
+    color: white;
-  display: flex;
-  font-size: 1.6rem;
-  font-weight: 600;
-  justify-content: space-around;
-  text-align: center;
-
-  >*{
-    border-right: 1px solid $color-228-25-79;
-    flex: 1;
-    padding: 1rem;
-    width: 50%;
-  }
-
-  >*:first-of-type {
-    border-right: 1px solid white;
-  }
-}
-
-.table-body div team-template-edit {
-  display: flex;
-  justify-content: space-between;
-
-  >* {
-    border-bottom: 1px solid $color-228-25-79;
-    flex: 1;
-    width: 50%;
-  }
-  
-  >*:nth-child(odd) {
-    border-left: 1px solid $color-228-25-79;
-    border-right: 1px solid $color-228-25-79;
-    padding: 0 2.2rem;
-  }
-  
-  >*:nth-child(even) {
     display: flex;
-    border-right: 1px solid $color-228-25-79;
+    font-size: 1.6rem;
-    justify-content: flex-end;
+    font-weight: 600;
-    padding: 2.7rem 2.2rem;
+    justify-content: space-around;
-  }
+    text-align: center;
-}
 
-.member-select.color {
+    >*{
-
+      border-right: 1px solid $color-228-25-79;
-  .ss-main {
+      flex: 1;
-    color: $color-233-18-29;
+      padding: 1rem;
-  }
+      width: 50%;
-}
-
-sib-multiple[widget='team-template-edit'] {
-
-  label {
-    display: none;
-  }
-
-  >div>team-template-edit>sib-display>div {
-    display: grid;
-    grid-column-gap: 1.6rem;
-    grid-template-columns: 7vh auto;
-    grid-template-rows: repeat(2, 5.2vh);
-
-    >[name='account.picture'] {
-      align-items: center;
-      align-self: center;
-      background-color: $color-213-20-91;
-      border-radius: 50%;
-      display: flex;
-      grid-column: 1 / span 1;
-      grid-row: 1 / span 2;
-      height: 7vh;
-      justify-content: center;
-      overflow: hidden;
-      position: relative;
-      width: 7vh;
-
-      img {
-        background-color: white;
-        height: 100%;
-        left: 0;
-        object-fit: cover;
-        position: absolute;
-        top: 0;
-        width: 100%;
-      }
-
-      object {
-        height: 45%;
-        width: 45%;
-      }
     }
 
-    >[name='sup'] {
+    >*:first-of-type {
-      align-self: end;
+      border-right: 1px solid white;
-      display: flex;
+    }
-      grid-column: 2 / span 1;
+  }
-      grid-row: 1 / span 1;
-      margin-bottom: 0.50rem;
 
-      [name='name'] {
+  .table-body div team-template-edit {
-        font-weight: 600;
+    display: flex;
-      }
+    justify-content: space-between;
 
-      sib-multiple {
+    >* {
-        display: flex;
+      border-bottom: 1px solid $color-228-25-79;
-        margin-left: 1rem;
+      flex: 1;
-
+      width: 50%;
-        [name='groups'] {
-          @extend %user-role;
-        }
-      }
     }
     
-    >[name='sub'] {
+    >*:nth-child(odd) {
-      align-self: start;
+      border-left: 1px solid $color-228-25-79;
-      grid-column: 2 / span 1;
+      border-right: 1px solid $color-228-25-79;
-      grid-row: 2 / span 1;
+      padding: 0 2.2rem;
-      margin-top: 0.50rem;
+    }
     
-      >[name$='profile.city']:not(:empty) {
+    >*:nth-child(even) {
-        @include mdi('atom');
+      display: flex;
+      border-right: 1px solid $color-228-25-79;
+      justify-content: flex-end;
+      padding: 2.7rem 2.2rem;
+    }
+  }
+
+  .member-select.color {
+
+    .ss-main {
+      color: $color-233-18-29;
+    }
+  }
+
+  sib-multiple[widget='team-template-edit'] {
+
+    label {
+      display: none;
+    }
+
+    >div>team-template-edit>sib-display>div {
+      display: grid;
+      grid-column-gap: 1.6rem;
+      grid-template-columns: 7vh auto;
+      grid-template-rows: repeat(2, 5.2vh);
+
+      >[name='account.picture'] {
         align-items: center;
+        align-self: center;
+        background-color: $color-213-20-91;
+        border-radius: 50%;
         display: flex;
+        grid-column: 1 / span 1;
+        grid-row: 1 / span 2;
+        height: 7vh;
+        justify-content: center;
+        overflow: hidden;
+        position: relative;
+        width: 7vh;
 
-        &::before {
+        img {
-          color: $color-43-100-50;
+          background-color: white;
-          margin-right: 0.50rem;
+          height: 100%;
+          left: 0;
+          object-fit: cover;
+          position: absolute;
+          top: 0;
+          width: 100%;
+        }
+
+        object {
+          height: 45%;
+          width: 45%;
+        }
+      }
+
+      >[name='sup'] {
+        align-self: end;
+        display: flex;
+        grid-column: 2 / span 1;
+        grid-row: 1 / span 1;
+        margin-bottom: 0.50rem;
+
+        [name='name'] {
+          font-weight: 600;
+        }
+
+        sib-multiple {
+          display: flex;
+          margin-left: 1rem;
+
+          [name='groups'] {
+            @extend %user-role;
+          }
+        }
+      }
+
+      >[name='sub'] {
+        align-self: start;
+        grid-column: 2 / span 1;
+        grid-row: 2 / span 1;
+        margin-top: 0.50rem;
+
+        >[name$='profile.city']:not(:empty) {
+          @include mdi('atom');
+          align-items: center;
+          display: flex;
+
+          &::before {
+            color: $color-43-100-50;
+            margin-right: 0.50rem;
+          }
         }
       }
     }

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

@@ -1,5 +1,11 @@
 #circle-information, #circle-edit {
 
+  h2 {
+    font-size: 1.7rem;
+    font-weight: bold;
+    text-transform: uppercase;
+  }
+
   .content-box__info {
     @extend %padding-block;
 
@@ -58,7 +64,7 @@
           display: none;
         }
 
-        >div>team-template[name='team']>sib-display>div {
+        >div>circle-team-template[name='team']>sib-display>div {
           display: grid;
           grid-column-gap: 1.6rem;
           grid-template-columns: 7vh auto;

src/styles/layout/project-profile/project-profile.scss

@@ -193,7 +193,7 @@
       }
     }
 
-    team-template[name='members'], captain-template[name='captain'] {
+    project-team-template[name='members'], captain-template[name='captain'] {
       display: grid;
       grid-column-gap: 1.6rem;
       grid-template-columns: 7vh auto;

src/templates/hd-circle-team.pug

@@ -1,6 +1,6 @@
 include hd-user-avatar.pug
 
-sib-widget(name='team-template')
+sib-widget(name='circle-team-template')
   template
     sib-display(
       data-src="${await value}"

src/templates/template-team.pug

@@ -1,6 +1,6 @@
 include hd-user-avatar.pug
 
-sib-widget(name='team-template')
+sib-widget(name='project-team-template')
   template
     sib-display.project-profile-user-avatar(
       data-src="${value.user ? value.user['@id'] : ''}"