src/dependencies.pug

-script(type="module" src="https://unpkg.com/@startinblox/oidc@0.6.0")
+script(type="module" src="https://unpkg.com/@startinblox/oidc@0.6")
 script(src="/scripts/index.js")
 
 //- Stylesheets
@@ -13,12 +13,13 @@ link(rel='stylesheet', href='https://fonts.googleapis.com/css?family=Open+Sans:3
 //- script(type="module" src="/lib/sib-notifications/sib-notifications.js")
 //- script(type="module" src="/lib/sib-conversation/sib-conversation.js")
 //- script(type="module" src="/lib/sib-directory/sib-directory.js")
+//- script(type="module" src="/lib/sib-joboffers/sib-joboffers.js")
 
 //- CDN
 script(type="module" src="https://unpkg.com/@startinblox/core@0.7")
-script(type="module" src="https://unpkg.com/@startinblox/router@0.7.2")
-script(type="module" src="https://unpkg.com/@startinblox/component-chat@0.1.10")
-script(type="module" src="https://unpkg.com/@startinblox/component-notifications@0.1.12")
-script(type="module" src="https://unpkg.com/@startinblox/component-conversation@0.2.1")
-script(type="module" src="https://unpkg.com/@startinblox/component-directory@0.1.18")
-
+script(type="module" src="https://unpkg.com/@startinblox/router@0.7")
+script(type="module" src="https://unpkg.com/@startinblox/component-chat@0.1")
+script(type="module" src="https://unpkg.com/@startinblox/component-notifications@0.1")
+script(type="module" src="https://unpkg.com/@startinblox/component-conversation@0.2")
+script(type="module" src="https://unpkg.com/@startinblox/component-directory@0.1")
+script(type="module" src="https://unpkg.com/@startinblox/component-job-board@0.1")

src/menu-left.pug

+sib-widget(name='hd-counter')
+  template
+    sib-badge(data-src="${id}")
 nav#main__menu
   sib-router#navbar-router(default-route='members')
     sib-route.menu(name='members')
@@ -16,12 +19,12 @@ nav#main__menu
         div.menu-label Projects
         div.menu-icon.icon-folder-alt
       sib-route(hidden,name='project', id-prefix=`${sdn}/projects/`, rdf-type='hd:project', use-id='')
-      div.sub-menu
+      div.sub-menu.menu-notification
         sib-display(
-          data-src=`${sdn}/projects/`,
-          data-fields='project',
-          set-project='customer.name, dash, name',
-          value-dash=' - ',
+          data-src=`${sdn}/sources/projects/`
+          data-fields='project'
+          set-project='customer.name, dash, name'
+          value-dash=' - '
           next='project'
         )
     //- div.divider
@@ -34,7 +37,7 @@ nav#main__menu
       //- sib-route(hidden, name='circle', id-prefix=`${sdn}/circles/`, rdf-type='hd:circle')
       //- div.sub-menu
       //-   sib-display(
-      //-     data-src=`${sdn}/circles/`,
+      //-     data-src=`${sdn}/sources/circles/`,
       //-     data-fields='name',
       //-     widget-name='sib-display-div',
       //-     next='circle'
@@ -46,13 +49,15 @@ 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=`${sdn}/members/`, rdf-type='foaf:user', use-id='')
-      div.sub-menu
+      sib-route(hidden, name='messages', id-prefix=`${sdn}/users/`, rdf-type='foaf:user', use-id='')
+      div.sub-menu.menu-notification
         sib-display(
-          data-src=`${sdn}/members/`,
-          data-fields='user.username',
-          widget-user.username='sib-display-div',
+          data-src=`${sdn}/users/`
+          data-fields='username, account.user'
+          widget-username='sib-display-div'
+          widget-account.user='hd-counter'
           next='messages'
         )
+
     div.divider
 

src/page-circle-create.pug

@@ -3,9 +3,9 @@
   p Here you can create a new group according to your interests, what you want to share, etc.
 
   sib-form(
-    data-src=`${sdn}/circles/`,
+    data-src=`${sdn}/sources/circles/`,
     range-owner=`${sdn}/users/`, 
-    range-team=`${sdn}/members/`
+    range-team=`${sdn}/users/`
     
     data-fields='name, description, description-text, owner, owner-text, team, team-text, jabberRoom, foaf:jabberID',
 

src/page-job-offer-create.pug

@@ -11,22 +11,27 @@
       p Be specific and exhaustive to avoid answering too many questions later. Indicate what is the best way to fill the offer, the prerequisites...'
   
   sib-form.block(
-    data-src=`${sdn}/job-offers/`,
-    range-skills=`${sdn}/skills/`,
+    data-src=`${sdn}/sources/job-offers/`
+    range-skills=`${sdn}/skills/`
 
-    data-fields='title, title-text, description, description-text, skills',
+    data-fields='title, title-text, description, description-text, skills'
 
-    label-title='Title*',
+    class-title='field form-label is-light is-expanded'
+    label-title='Title*'
     
-    widget-title-text='title-text',
+    class-title-text='small-margin'
+    widget-title-text='title-text'
     
-    label-description='Description*',
+    class-description='field form-label is-light is-expanded'
+    label-description='Description*'
     
-    widget-description-text='description-text',
+    class-description-text='large-margin'
+    widget-description-text='description-text'
     
-    label-skills='The required skills for this mission:*',
-    multiple-skills='sib-multiple-select',
-    widget-skills='sib-form-auto-completion',
+    class-skills='form-label is-dark'
+    label-skills='The required skills for this mission:*'
+    multiple-skills='sib-multiple-select'
+    widget-skills='sib-form-auto-completion'
     
     next="job-offers"
   )

src/page-job-offers.pug

-div.job-offers__main
+.job-offers__container
+  sib-job-board(
+    data-src=`${sdn}/job-offers/`,
+    range-skills=`${sdn}/skills/`
+  )
 
-  include templates/hd-user-avatar.pug
-  include templates/template-groups.pug
-  include templates/template-skills.pug
-  include templates/template-joboffers-filter.pug
-  
-  sib-widget(name='hd-contact-author')
-    template
-      p ${JSON.stringify(value)}
-      sib-link(next='messages', data-src="${value.profile['@id']}") Send a message
-      
-  div.job-offers__content
-    h1 New offers
-      span Here you can find and post offers
-    sib-display#offers-list(
-      data-src=`${sdn}/job-offers/`,
-      data-fields='user-thumb, creationDate, title, description, skills, author',
-      
-      set-user-thumb='author.account.picture, author.first_name, author.groups',
-      widget-author.account.picture='hd-user-avatar',
-      widget-author.groups='groups-name',
-      multiple-author.groups,
-
-      widget-skills='skills-name',
-      multiple-skills,
-      
-      widget-author='hd-contact-author',
-      
-      search-range-skills=`${sdn}/skills/`,
-      search-fields='content, open, skills',
-      
-      set-content='title, description',
-      
-      search-label-content='Search by keyword',
-      search-label-skills='Search by skills',
-
-      search-widget-content='sib-form-placeholder-text',
-      search-widget-skills='sib-form-placeholder-dropdown',
-      search-widget-open='joboffers-filter'
-    )
-    
   div.job-offers__newoffer
-    template#groups-list-template
-      p ${value}
     sib-link(next="job-offer-create").plus-button
       div.icon-plus
       div Post a new offer
+

src/page-members-directory.pug

 sib-directory(
-  data-src=`${sdn}/members/`,
+  data-src=`${sdn}/users/`,
   range-groups=`${sdn}/groups/`,
   range-skills=`${sdn}/skills/`
 )

src/page-project-create.pug

@@ -3,8 +3,8 @@
   p Here you can create your project, add members and assign them a job.
   
   sib-form.block(
-    data-src=`${sdn}/projects/`,
-    range-members=`${sdn}/members/`,
+    data-src=`${sdn}/sources/projects/`,
+    range-members=`${sdn}/users/`,
     range-team=`${sdn}/users/`,
 
     data-fields='block-project__info, block-project__fee, block-project__customer',

src/page-project-drive.pug

+sib-widget(name='hd-drive')
+    template
+        iframe.drive.chat-view(
+            src='https://drive.google.com/embeddedfolderview?id=${value}'
+        )
+.content-box.full-width.chat-view
+    sib-display(
+        bind-resources=""
+        data-fields="driveID"
+        widget-driveID='hd-drive'
+    )
\ No newline at end of file

src/page-project.pug

@@ -7,6 +7,8 @@
     include page-project-edit.pug
   #project-create
     include page-project-create.pug
+  #project-drive
+    include page-project-drive.pug
 nav.jsRightMenu(role='navigation')
   sib-router(default-route='project-chat')
     ul
@@ -18,6 +20,9 @@ nav.jsRightMenu(role='navigation')
       sib-route(name='project-profile', use-id)
         li 
           a Information
+      sib-route(name='project-drive', use-id)
+        li 
+          a Drive
       sib-route(name='project-edit', use-id)
       //-   li 
       //-     a Edit

src/scripts/index.js

@@ -3,9 +3,9 @@ document.addEventListener('DOMContentLoaded', function (event) {
   const rightMenus = Array.from(document.querySelectorAll('nav.jsRightMenu'));
   const viewsContainer = Array.from(document.querySelectorAll('.views-container'));
 
-  window.addEventListener('navigate', (event) => {
-    //- View change event
-  });
+  //- View change event
+  // window.addEventListener('navigate', (event) => {
+  // });
 
   //- Toggle sub-menus
   menuWrappers.forEach(menuWrapper => {
@@ -25,4 +25,25 @@ 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.setAttribute('data-src', dataSrc);
+      });
+    });
+  });
+
+  //- Header login hide/show
+  if(document.querySelector('sib-auth').getUser() !== null) {
+    document.querySelector('button[role="log in"]').style.display = 'none';
+    //- Token expired, hack for ask relogin
+    if(new Date(document.querySelector('sib-auth').getUser().expires_at*1000) <= new Date()) {
+      document.querySelector('button[role="log in"]').style.display = '';
+      document.querySelector('button[role="log in"]').style.color = 'red';
+      document.querySelector('button[role="log in"]').innerHTML = 'Re-login';
+    }
+  }
+
 });
\ No newline at end of file

src/styles/base/form.scss

@@ -23,13 +23,12 @@
     }
 
     p.center {
-      margin-bottom: 6.8rem;
       text-align: center;
     }
 
     [name$='-text'] {
       font-size: 1.5rem;
-      margin-bottom: 2em;
+      margin-bottom: 2rem;
     }
 
     div[name^='block-'] {
@@ -37,6 +36,124 @@
       flex-direction: column;
     }
 
+    label {
+      display: flex;
+      flex-direction: column;
+  
+      input {
+        -webkit-appearance: none;
+        background-color: $color-222-57-95;
+        border: none;
+        color: $color-233-18-29;
+        flex: 1 1 0;
+        margin-top: 0.8rem;
+        min-width: 0;
+        padding: 1.2rem;
+      }
+    }
+
+    input[type='submit'] {
+      margin-top: 6rem;
+      background-color: $color-233-18-29;
+      border: none;
+      border-radius: 100em;
+      color: $color-0-0-100;
+      float: right;
+      font-size: 1.4rem;
+      font-weight: bold;
+      padding: 0.85rem 2.55rem;
+      text-transform: uppercase;
+    }
+
+    /* CLASSES Peut-être à sortir de .content-box */
+
+    .form-label {
+      font-weight: 600;
+
+      &.is-dark label > div {
+        color: $color-216-4-22;
+      }
+    
+      &.is-light label > div {
+        color: $color-244-10-70;
+        text-transform: uppercase;
+      }
+    }
+
+    .large-margin>p{
+      margin-bottom: 3rem;
+    }
+
+    .small-margin>p {
+      margin-bottom: 2.2rem;
+    }
+
+    /* WIDGETS */
+
+    sib-multiple-select {
+
+      sib-form-auto-completion > label {
+        display: flex;
+        flex-direction: column;
+
+        .ss-main {
+          margin-top: 1.6rem;
+          width: 70%;
+
+          .ss-multi-selected {
+            align-items: center;
+            background-color: $color-222-57-95;
+            border: none;
+            border-radius: 0px;
+            display: flex;
+            justify-content: flex-end;
+            height: 4.2rem;
+
+            .ss-values {
+              background: transparent;
+              position: absolute;
+              top: 6rem;
+              width: 100%;
+            }
+
+            .ss-disabled {
+              color: transparent;
+            }
+
+            .ss-add {
+              @include icon('plus');
+              color: $color-244-73-62;
+              font-size: 1.8rem;
+              margin: 0px 12px 0 38px;
+              position: absolute;
+
+              span.ss-plus {
+                align-self: center;
+                background: transparent;
+
+                &::after {
+                  background: transparent;
+                }
+              }
+            }
+
+            .ss-values {
+              
+              .ss-value {
+                @extend .skill;
+                display: flex;
+
+                .ss-value-delete {
+                  font-weight: normal;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+  /*
     input {
       -webkit-appearance: none;
       align-items: center;
@@ -187,9 +304,9 @@
         box-sizing: border-box;
       }
     }
-
+  */
     /* A REFACTORISER. PAS ENCORE UTILISE SUR L'APPLI */
-
+  /*
     sib-form-multiple-dropdown {
 
       button {
@@ -227,8 +344,9 @@
       font-weight: bold;
       text-transform: uppercase;
     }
+  */
   }
-
+  /*
   .is-horizontal {
     display: flex;
   }
@@ -269,7 +387,9 @@
       }
     }
   }
+  */
 }
+/*
 sib-form {
 
   form > * {
@@ -291,4 +411,5 @@ sib-form {
   input[type='reset'] {
     display: none;
   }
-}
\ No newline at end of file
+}
+*/
\ No newline at end of file

src/styles/base/main.scss

@@ -122,6 +122,11 @@ a {
   }
 }
 
+.drive {
+  width: 100%;
+  border: 0;
+}
+
 .backlink {
   font-size: 1.5rem;
   margin: 2rem 0 0 2rem;

src/styles/base/menu-left.scss

@@ -90,26 +90,68 @@
     }
 
     .sub-menu {
-      padding-left: 2.88rem;
       
-      div {
-        color: $color-244-10-70;
-        cursor: pointer;
-        padding-bottom: 1.12rem;
-  
-        div[name='project'] {
-          display: flex;
+      sib-display>div {
+      
+        &>sib-display {
+          
+          &:last-child>div {
+            margin-bottom: 2.2rem;
+          }
+        
+          >div {
+            color: $color-244-10-70;
+            cursor: pointer;
+            padding: 10px 10px 10px 32px;
+          }         
+    
+          div[name='project'] {
+            display: flex;
 
-          sib-display-value {
-            display: block;
+            sib-display-value {
+              display: block;
+              height: 20px;
+            }
+    
+            sib-display-div[name='dash'] {
+              margin: 0 0.4em;
+            }
           }
-  
-          sib-display-div[name='dash'] {
-            margin: 0 0.4em;
+        }
+
+        &>sib-display[active]>div {
+          background-color: $color-46-100-67;
+          color: $color-233-18-29;
+          font-weight: bold;
+        }
+      }
+
+      &.menu-notification {
+        > sib-display > div > sib-display > div {
+            display: flex;
+            sib-display-div {
+              flex: 3;
+            }
+            hd-counter {
+              height: 20px;
+              width: 20px;
+              margin-right: 1em;
+              div:not(:empty) {
+                text-align: center;
+                display: block;
+                background-color: var(--sib-notifications-theme, gray);
+                border-radius: 50%;
+                font-size: 12px;
+                line-height: 20px;
+                width: 20px;
+                height: 20px;
+                padding-bottom: 0;
+                color: $color-216-4-22;
+              }
+            }
           }
         }
       }
-    }
 
     .divider {
       height: 1px;

src/styles/components/chat.scss

@@ -5,6 +5,7 @@
   padding: 0;
   height: calc(100vh - 84px);
   position: relative;
+  overflow: hidden;
 
   > sib-chat {
     position: absolute;

src/styles/components/filters.scss

@@ -52,7 +52,7 @@
   }
 }
 
-#offers-list, #members-list {
+.job-board, #members-list {
   sib-form {
     @extend %filters;
   }

src/styles/components/sidebar.scss

@@ -92,6 +92,10 @@
           &[name$='profile']>li {
             @include ci('information');
           }
+
+          &[name$='drive']>li {
+            @include ci('file');
+          }
         }
       }
     }

src/styles/components/skills.scss

 sib-multiple[name*='skills'] {
-    display: flex;
-    flex-wrap: wrap;
+  display: flex;
+  flex-wrap: wrap;
 }
 
 .skill {
-    background-color: $color-43-100-50;
-    border: 1px solid $color-43-100-50;
-    border-radius: 2em;
-    color: $color-0-0-100;
-    display: block;
-    font-size: 1.4rem;
-    font-weight: bold;
-    margin: 0.4rem 1rem 0.4rem 0;
-    padding: 0.5rem 2rem;
+  background-color: $color-43-100-50;
+  border: 1px solid $color-43-100-50;
+  border-radius: 2em;
+  color: $color-0-0-100;
+  display: block;
+  font-size: 1.4rem;
+  font-weight: bold;
+  margin: 0.4rem 1rem 0.4rem 0;
+  padding: 0.5rem 2rem;
 }
\ No newline at end of file

src/styles/layout/job-offers/job-offers.scss

-.job-offers__main {
+.job-offers__container {
   @extend %grid-layer;
 }
 
-.job-offers__content {
+sib-job-board {
   @extend %grid-layer-main;
   @extend %containerV;
 }
@@ -34,7 +34,7 @@
     }
   }
 
-  #offers-list {
+  .job-board__list {
     @extend %grid-layer;
 
     >sib-form {
@@ -87,7 +87,7 @@
             }
           }
 
-          hd-user-avatar {
+          author-avatar {
             background-color: $color-0-0-100;
             border-radius: 50%;
             height: 4.25rem;
@@ -131,7 +131,7 @@
           }
         }
 
-        hd-contact-author {
+        author-contact {
           color: $color-244-73-62;
           font-size: 1.3rem;
           float: right;
@@ -170,5 +170,4 @@
       }
     }
   }
-
 }
\ No newline at end of file

src/styles/layout/members/member-profile.scss

@@ -39,7 +39,7 @@
           display: flex;
           grid-area: name;
 
-          >sib-display-value[name^='user.'] {
+          >sib-display-value[name='name'] {
             color: $color-216-4-22;
             font-weight: bold;
             @extend h1;
@@ -51,7 +51,7 @@
           }
         }
 
-        sib-display-value[name='user.username'] {
+        sib-display-value[name='username'] {
           grid-area: pseudo;
 
           &::before {
@@ -59,7 +59,7 @@
           }
         }
 
-        sib-display-value[name='bio'] {
+        sib-display-value[name='profile.bio'] {
           grid-area: bio;
         }
 
@@ -69,7 +69,7 @@
           @extend %member-info;
         }
 
-        member-status[name$='available'] {
+        member-status[name$='profile.available'] {
           align-self: flex-end;
           color: $color-244-73-62;
           grid-area: status;

src/styles/layout/members/members.scss

@@ -14,7 +14,7 @@
     }
   }
   
-  [name$='city'] * {
+  [name$='profile.city'] * {
     @include mdi('atom');
   }
 
@@ -22,11 +22,11 @@
     @include mdi('email-outline');
   }
 
-  [name$='phone'] * {
+  [name$='profile.phone'] * {
     @include mdi('cellphone-iphone');
   }
 
-  [name="foaf:homepage"]:not(:empty) {
+  [name="profile.website"]:not(:empty) {
     @include mdi('link-variant');
   }
 }
@@ -177,7 +177,7 @@ member-info-groups {
             }
           }
 
-          [name='user.name'] {
+          [name='name'] {
             font-weight: bold;
             @extend h1;
           }