update: add administration & circle creation

src/index.pug

@@ -37,6 +37,9 @@ html(lang="en")
 
         #messages(hidden).with-sidebar
           include page-messages.pug
+
+        #admin(hidden).with-sidebar
+          include page-admin.pug
         
         //- #my-profile(hidden).no-sidebar
         //-   include page-user-profile.pug

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(hidden, name='job-offer-create')
+    //- sib-route(name='job-offer-create')
-    //- sib-route(hidden, name='job-offer-edit', use-id)
+    //- sib-route(name='job-offer-edit', use-id)
     //- 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(hidden,name='project', id-prefix=`${endpoints.projects}`, rdf-type='hd:project', use-id='')
+    //-   sib-route(name='project', rdf-type='hd:project', use-id='')
     //-   div.sub-menu.menu-notification
     //-     sib-display(
     //-       data-src=`${endpoints.projects}`
@@ -46,7 +46,7 @@ nav#main__menu
           div.menu-icon.icon-arrow-up
         div.menu-label Circles
         div.menu-icon.icon-folder-alt
-      sib-route(hidden,name='circle', id-prefix=`${endpoints.circles}`, rdf-type='hd:circle', use-id='')
+      sib-route(name='circle', rdf-type='hd:circle', use-id='')
       div.sub-menu.menu-notification
         sib-display(
           data-src=`${endpoints.circles}`
@@ -70,7 +70,7 @@ nav#main__menu
           div.menu-icon.icon-arrow-up
         div.menu-label Chat
         div.menu-icon.icon-envelope-letter
-      sib-route(hidden, name='messages', id-prefix=`${endpoints.users}`, rdf-type='foaf:user', use-id='')
+      sib-route(name='messages', rdf-type='foaf:user', use-id='')
       div.sub-menu.menu-notification
         sib-display(
           data-src=`${endpoints.users}`
@@ -82,6 +82,7 @@ nav#main__menu
           next='messages'
         )
 
+    sib-route(name='admin')
     //- div.divider
     //- sib-route.menu(hidden, name='my-profile', rdf-type='foaf:user', use-id='')
 

src/page-admin-circles-create.pug

@@ -0,0 +1,19 @@
+div.content-box__info
+  sib-link(class="backlink", next='admin-circle-list') Back
+
+  h1 New circle
+
+  p.center Here you can create a new circle according to your interests, what you want to share, etc.
+
+  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'
+
+    widget-description='sib-form-textarea'
+
+    submit-button='Save'
+  )

src/page-admin-circles.pug

@@ -0,0 +1,56 @@
+.content-box.full-width.with-form
+  sib-router(default-route='admin-circle-list')
+    sib-route(name='admin-circle-list')
+    sib-route(name='admin-circle-create')
+
+  div.content-box__header
+    h2 Administration
+
+
+  #admin-circle-list(hidden)
+    sib-widget(name="admin-circle-leave")
+      template
+        sib-ac-checker(
+          permission="acl:Delete"
+          data-src="${value['@id']}"
+        )
+          sib-delete(
+            data-src="${value['@id']}"
+            data-label='Leave'
+          )
+
+    sib-widget(name="admin-circle-join")
+      template
+        sib-form(
+          data-src="${src}" 
+          nested-field='members'
+          fields='user'
+          label-user=''
+          range-user=`${endpoints.users}`
+          widget-user='sib-form-dropdown'
+
+          set-user-id-select="user"
+
+          submit-button='Join'
+        )
+
+
+    div.content-box__info
+      sib-link(class="right-btn", next="admin-circle-create") Create a new circle
+      h3 Circles
+      sib-display.block(
+        data-src=`${endpoints.circles}`
+        fields="name, owner.name, buttons(members, button)"
+        search-fields="name"
+        search-label-name="Search a Circle"
+
+        multiple-groups=""
+        widget-members="admin-circle-leave"
+        multiple-members=""
+        widget-button="admin-circle-join"
+        action-button="button"
+      )
+
+
+  #admin-circle-create(hidden)
+    include page-admin-circles-create.pug

src/page-admin-projects.pug

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

src/page-admin-users.pug

@@ -0,0 +1,18 @@
+.content-box.full-width.with-form
+  sib-router(default-route='admin-users-list')
+    sib-route(name='admin-users-list')
+    sib-route(name='admin-users-create')
+
+  div.content-box__header
+    h2 Administration
+
+  #admin-users-list(hidden)
+    div.content-box__info
+      sib-display.block(
+        data-src=`${endpoints.users}`
+        fields="account.picture, name, username, email, groups"
+        multiple-groups=""
+      )
+
+
+  #admin-users-create(hidden)

src/page-admin.pug

@@ -0,0 +1,21 @@
+.views-container
+  #admin-circles(hidden)
+    include page-admin-circles.pug
+//-   #admin-users(hidden)
+//-     include page-admin-users.pug
+//-   #admin-projects(hidden)
+//-     include page-admin-projects.pug
+nav.jsRightMenu(role='navigation')
+  sib-router(default-route='admin-circles')
+    ul
+      li.jsOffsiteToggle
+        a Fold menu
+      //- sib-route(name='admin-users')
+        li
+          a Users
+      sib-route(name='admin-circles')
+        li
+          a Circles
+      //- sib-route(name='admin-projects')
+        li
+          a Projects

src/page-circle-create.pug

@@ -1,26 +0,0 @@
-.content-box.with-padding.with-form.full-width
-  h1 New group
-  p Here you can create a new group according to your interests, what you want to share, etc.
-
-  sib-form(
-    data-src=`${endpoints.circles}`,
-    range-owner=`${endpoints.users}`, 
-    range-team=`${endpoints.users}`
-    
-    fields='name, description, description-text, owner, owner-text, team, team-text, jabberRoom, foaf:jabberID',
-
-    label-name="Channel's name",
-    label-description='Description',
-    label-owner='Owner of this channel',
-    label-foaf:jabberID='Chatroom id',
-    label-team='Member(s) of this channel',
-
-    value-description-text='You can write a short description like "Here, we are like Pinky and the Brain, we talk about strategy to conquer the world".',
-    value-owner-text='The one who will admin this channel',
-    value-team-text='Add any members as you want.',
-
-
-    widget-description='sib-form-textarea',
-    widget-jabberRoom='sib-form-checkbox',
-  )
-    //- widget-team='sib-form-multiple-dropdown'

src/page-user-panel.pug

@@ -4,6 +4,6 @@ nav(role="user's functionalities menu")
     //-   sib-link(next='my-profile') My profile
     //-li
       sib-link(next='user-settings') Settings
-    //-li
+    li
-      sib-link(name='user-admin') Admin
+      sib-link(next='admin') Admin
   button(role='log out' onclick="document.querySelector('sib-auth').logout();") Log out

src/scripts/index.js

@@ -46,9 +46,9 @@ document.addEventListener('DOMContentLoaded', function (event) {
 
       for(sibForm of document.querySelectorAll('[set-user-id-select]')) {
         sibForm.addEventListener('populate', () => {
-          document.querySelector('sib-form[submit-button="Join Circle"]').style.display = 'none';
+          document.querySelectorAll('sib-form[submit-button^="Join"]').forEach(el=>el.style.display = 'none');
-          if(document.querySelectorAll('sib-ac-checker:not([hidden]) > sib-delete[data-label="Leave circle"]').length == 0) {
+          if(document.querySelectorAll('sib-ac-checker:not([hidden]) > sib-delete[data-label="^Leave"]').length == 0) {
-            document.querySelector('sib-form[submit-button="Join Circle"]').style.display = 'inline-block';
+            document.querySelectorAll('sib-form[submit-button^="Join"]').forEach(el=>el.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')+'"]')) {
@@ -58,6 +58,9 @@ document.addEventListener('DOMContentLoaded', function (event) {
           }
         });
       }
+      for(leaveBtn of document.querySelectorAll('admin-circle-leave > sib-ac-checker:not([hidden])')) {
+        leaveBtn.parentNode.parentNode.parentNode.nextElementSibling.style.display = "none"; // Hide Join button
+      }
     }
   }).catch(error => console.log(error));
 

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

@@ -1,178 +1,173 @@
 #circle-edit {
-
+  .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%;
-  }
-
-  >*:last-of-type {
-    border-left: 1px solid white;
-
-    @media (max-width: 1220px) {
-      display: none;
-    }
-  }
-}
-
-.table-body div team-template-edit {
-  display: flex;
-  justify-content: space-between;
-
-  >* {
-    border-bottom: 1px solid $color-228-25-79;
-    flex: 1;
-    width: 50%;
-  }
-
-  sib-display {
-    border-left: 1px solid $color-228-25-79;
-    border-right: 1px solid $color-228-25-79;
-    padding: 0 2.2rem;
-  }
-
-  sib-ac-checker {
-    align-items: center;
-    border-right: 1px solid $color-228-25-79;
     display: flex;
-    justify-content: flex-end;
+    font-size: 1.6rem;
-    padding: 2.7rem 2.2rem;
+    font-weight: 600;
+    justify-content: space-around;
+    text-align: center;
 
-    @media (max-width: 1220px) {
+    >*{
-      display: none;
+      border-right: 1px solid $color-228-25-79;
-    } 
+      flex: 1;
+      padding: 1rem;
+      width: 50%;
+    }
+
+    >*:last-of-type {
+      border-left: 1px solid white;
+
+      @media (max-width: 1220px) {
+        display: none;
+      }
+    }
   }
 
   .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;
+      justify-content: space-between;
-      justify-content: flex-end;
-      padding: 2.7rem 2.2rem;
-    }
-  }
 
-  .member-select.color {
+      >* {
+        border-bottom: 1px solid $color-228-25-79;
+        flex: 1;
+        width: 50%;
+      }
 
-    .ss-main {
+      sib-display {
-      color: $color-233-18-29;
+        border-left: 1px solid $color-228-25-79;
-    }
+        border-right: 1px solid $color-228-25-79;
-  }
+        padding: 0 2.2rem;
+      }
 
-  sib-multiple[widget='team-template-edit'] {
+      sib-ac-checker {
-
-    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;
+        border-right: 1px solid $color-228-25-79;
-        background-color: $color-213-20-91;
-        border-radius: 50%;
         display: flex;
-        grid-column: 1 / span 1;
+        justify-content: flex-end;
-        grid-row: 1 / span 2;
+        padding: 2.7rem 2.2rem;
-        height: 7vh;
-        justify-content: center;
-        overflow: hidden;
-        position: relative;
-        width: 7vh;
 
-        img {
+        @media (max-width: 1220px) {
-          background-color: white;
+          display: none;
-          height: 100%;
+        } 
-          left: 0;
-          object-fit: cover;
-          position: absolute;
-          top: 0;
-          width: 100%;
-        }
-
-<<<<<<< HEAD:src/styles/layout/circle-profile/circle-edit.scss
-        object {
-          height: 45%;
-          width: 45%;
-        }
-=======
-      [name='name'] {
-        font-weight: 600;
-        margin-right: 1rem;
->>>>>>> 81d885730dd7673ee424a72b6f0c663c7c1cc5b7:src/styles/layout/circle/circle-edit.scss
       }
 
-      >[name='sup'] {
+      .table-body div team-template-edit {
-        align-self: end;
         display: flex;
-<<<<<<< HEAD:src/styles/layout/circle-profile/circle-edit.scss
+        justify-content: space-between;
-        grid-column: 2 / span 1;
-        grid-row: 1 / span 1;
-        margin-bottom: 0.50rem;
-=======
->>>>>>> 81d885730dd7673ee424a72b6f0c663c7c1cc5b7:src/styles/layout/circle/circle-edit.scss
 
-        [name='name'] {
+        >* {
-          font-weight: 600;
+          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;
+          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;
         }
 
-        sib-multiple {
+        >div>team-template-edit>sib-display>div {
-          display: flex;
+          display: grid;
-          margin-left: 1rem;
+          grid-column-gap: 1.6rem;
+          grid-template-columns: 7vh auto;
+          grid-template-rows: repeat(2, 5.2vh);
 
-          [name='groups'] {
+          >[name='account.picture'] {
-            @extend %user-role;
+            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='name'] {
+            font-weight: 600;
+            margin-right: 1rem;
           }
-        }
-      }
 
-      >[name='sub'] {
+          >[name='sup'] {
-        align-self: start;
+            align-self: end;
-        grid-column: 2 / span 1;
+            display: flex;
-        grid-row: 2 / span 1;
+            grid-column: 2 / span 1;
-        margin-top: 0.50rem;
+            grid-row: 1 / span 1;
+            margin-bottom: 0.50rem;
 
-        >[name$='profile.city']:not(:empty) {
+            [name='name'] {
-          @include mdi('atom');
+              font-weight: 600;
-          align-items: center;
+            }
-          display: flex;
 
-          &::before {
+            sib-multiple {
-            color: $color-43-100-50;
+              display: flex;
-            margin-right: 0.50rem;
+              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;
+              }
+            }
           }
         }
       }
     }
   }
-}
+}