Merge branch 'cleanup-optimise-perfs' into 'staging'

Cleanup & optimise perfs

Closes #292 and #388

See merge request startinblox/applications/sib-app!115

config.sample.federated.json

@@ -6,6 +6,7 @@
   "clientLogoHeight": "32px",
   "clientCSS": "/path/to/custom.css",
   "authorityName": "djangoldp-server-name",
+  "publicDirectory": false,
   "endpoints": {
     "get": {
       "circles": "http://localhost:8000/circles/",

config.sample.json

@@ -6,6 +6,7 @@
   "clientLogoHeight": "32px",
   "clientCSS": "/path/to/custom.css",
   "authorityName": "djangoldp-server-name",
+  "publicDirectory": false,
   "endpoints": {
     "circles": "http://localhost:8000/circles/",
     "projects": "http://localhost:8000/projects/",

src/dependencies.pug

-script(type="module" src="https://unpkg.com/@startinblox/oidc@0.8")
 script(src="/scripts/index.js")
 
-//- local
-//- script(type="module" src="/lib/sib-router/src/index.js")
-//- script(type="module" src="/lib/sib-chat/sib-chat.js")
-//- script(type="module" src="/lib/sib-notifications/sib-notifications.js")
-//- script(type="module" src="/lib/sib-event/sib-event.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-job-board/sib-job-board.js")
-
-//- CDN
-script(type="module" src="https://unpkg.com/@startinblox/core@0.9")
-script(type="module" src="https://unpkg.com/@startinblox/router@0.7")
-script(type="module" src="https://unpkg.com/@startinblox/component-chat@0.4")
-script(type="module" src="https://unpkg.com/@startinblox/component-notifications@0.3")
-script(type="module" src="https://unpkg.com/@startinblox/component-event@0.1")
-//- script(type="module" src="https://unpkg.com/@startinblox/component-conversation@0.3")
-//- script(type="module" src="https://unpkg.com/@startinblox/component-directory@0.3")
-//- script(type="module" src="https://unpkg.com/@startinblox/component-job-board@0.3")
+//- Scripts - use add `"libLocal" = true` on config.json to use your local `lib` folder
+if libLocal
+    script(type="module" src="/lib/sib-oidc/index.js")
+    script(type="module" src="/lib/sib-router/src/index.js")
+    script(type="module" src="/lib/sib-notifications/index.js")
+    if endpoints.users || (endpoints.get && endpoints.get.users)
+        script(type="module" src="/lib/sib-chat/sib-chat.js")
+    if endpoints.events || (endpoints.get && endpoints.get.events)
+        script(type="module" src="/lib/sib-event/sib-event.js")
+    if endpoints.joboffers || (endpoints.get && endpoints.get.joboffers)
+        script(type="module" src="/lib/sib-job-board/sib-job-board.js")
+        script(type="module" src="/lib/sib-conversation/sib-conversation.js")
+    if publicDirectory && (endpoints.users || (endpoints.get && endpoints.get.users))
+        script(type="module" src="/lib/sib-directory/sib-directory.js")
+else
+    script(type="module" src="https://unpkg.com/@startinblox/oidc@0.8")
+    script(type="module" src="https://unpkg.com/@startinblox/core@0.9")
+    script(type="module" src="https://unpkg.com/@startinblox/router@0.7")
+    script(type="module" src="https://unpkg.com/@startinblox/component-notifications@0.3")
+    if endpoints.users || (endpoints.get && endpoints.get.users)
+        script(type="module" src="https://unpkg.com/@startinblox/component-chat@0.4")
+    if endpoints.events || (endpoints.get && endpoints.get.events)
+        script(type="module" src="https://unpkg.com/@startinblox/component-event@0.1")
+    if endpoints.joboffers || (endpoints.get && endpoints.get.joboffers)
+        script(type="module" src="https://unpkg.com/@startinblox/component-job-board@0.3")
+        script(type="module" src="https://unpkg.com/@startinblox/component-conversation@0.3")
+    if publicDirectory && (endpoints.users || (endpoints.get && endpoints.get.users))
+        script(type="module" src="https://unpkg.com/@startinblox/component-directory@0.3")
 
 //- Stylesheets
 link(rel='stylesheet', href='/styles/index.css')

src/header.pug

@@ -7,7 +7,7 @@
 //-   i#search-icon.icon-magnifier(aria-hidden='true')
 //-   i#close-search-icon.icon-close(aria-hidden='true')
 
-sib-notifications(
+sib-notifications.notLoggedIn(
   nested-field="inbox"
   bind-user
 )
@@ -22,13 +22,22 @@ details#user-controls.notLoggedIn
       bind-user
     )
   #user-controls__panel
-    include page-user-panel.pug
-
-button(role='log in' onclick="document.querySelector('sib-auth').login();") Login
+    nav(role="user's functionalities menu")
+      ul
+        if publicDirectory && (endpoints.users || (endpoints.get && endpoints.get.users))
+          li
+            sib-link(next='my-profile') My profile
+        //-li
+          sib-link(next='user-settings') Settings
+        li
+          sib-link(next='admin') Admin
+      button(role='log out' onclick="document.querySelector('sib-auth').logout();") Log out
+
+button.loggedIn(role='log in' onclick="document.querySelector('sib-auth').login();") Login
 
 button.notLoggedIn.mobile-menu-icon.icon-menu#toggleMainMenu
 
-sib-auth
+sib-auth(style='display:none!important')
   sib-auth-provider(
     data-authority=`${authority}`
     data-id=`${authorityName || "authority"}`

src/index.pug

@@ -13,23 +13,18 @@ html(lang="en")
   body
     header#header(role='banner')
       include header.pug
-    main
+
+    main.notLoggedIn
       include menu-left.pug
       div#viewport
 
-        //- #members(hidden).no-sidebar
-        //-   include page-members-directory.pug
-
-        //- #job-offers(hidden).no-sidebar
-        //-   include page-job-offers.pug
-
-        //- #job-offer-create(hidden).no-sidebar
-        //-   sib-link(class="backlink", next="job-offers") Back
-        //-   include page-job-offer-create.pug
+        if publicDirectory && (endpoints.users || (endpoints.get && endpoints.get.users))
+          #members(hidden).no-sidebar
+            include page-directory.pug
 
-        //- #job-offer-edit(hidden).no-sidebar
-        //-   sib-link(class="backlink", next="job-offers") Back
-        //-   include page-job-offer-edit.pug
+        if endpoints.joboffers || (endpoints.get && endpoints.get.joboffers)
+          #job-offers(hidden).no-sidebar
+            include page-job-offers.pug
 
         if endpoints.projects || (endpoints.get && endpoints.get.projects)
           #project(hidden).with-sidebar
@@ -48,7 +43,4 @@ html(lang="en")
             include page-events.pug
 
         #admin(hidden).with-sidebar
-          include page-admin.pug
-        
-        //- #my-profile(hidden).no-sidebar
-        //-   include page-user-profile.pug
+          include page-admin.pug
\ No newline at end of file

src/menu-left.pug

@@ -7,18 +7,40 @@ sib-widget(name='hd-create')
     p.create You are not part of any ${value} yet. To create a new one, you can go to the 
       sib-link(next='admin') administration panel
 
+sib-widget(name='menu-fix-url-circle')
+  template
+    sib-display(
+      data-src='${value}'
+      fields='name, badge'
+      value-badge='${value}'
+      widget-badge='hd-counter'
+      widget-name='sib-display-div'
+    )
+
+sib-widget(name='menu-fix-url-project')
+  template
+    sib-display(
+      data-src='${value}'
+      fields='project(customer.name, name), badge'
+      class-name='project-name'
+      class-customer.name='project-customer'
+      value-badge='${value}'
+      widget-badge='hd-counter'
+      widget-name='sib-display-div'
+    )
+
 nav#main__menu.jsLeftMenu
   sib-router#navbar-router(default-route='members')
-    //- sib-route.menu(name='members')
-    //-   div.menu-label Members
-    //-   div.menu-icon.icon-people
-    //- div.divider
-    //- 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', hidden)
-    //- sib-route(name='job-offer-edit', use-id, hidden)
-    //- div.divider
+    if publicDirectory && (endpoints.users || (endpoints.get && endpoints.get.users))
+      sib-route.menu(name='members')
+        div.menu-label Members
+        div.menu-icon.icon-people
+      div.divider
+    if endpoints.joboffers || (endpoints.get && endpoints.get.joboffers)
+      sib-route.menu(name='job-offers', rdf-type='hd:joboffer')
+        div.menu-label Job offers
+        div.menu-icon.icon-briefcase
+      div.divider
     if endpoints.events || (endpoints.get && endpoints.get.events)
       sib-route.menu(name='events')
         div.menu-label Events
@@ -35,20 +57,13 @@ nav#main__menu.jsLeftMenu
         sib-route(name='project', rdf-type='hd:project', use-id='', hidden)
         div.sub-menu.menu-notification
           sib-display.project-tab(
-            data-src=`${endpoints.projects || (endpoints.get && endpoints.get.projects)}`
-            fields='project(customer.name, name), badge'
-            class-customer.name='project-customer'
-            class-name='project-name'
+            bind-user
+            nested-field='projects'
+            fields='project'
             empty-widget='hd-create'
             empty-value='project'
-            search-fields='team'
-            search-widget-team='sib-form-hidden'
-            search-value-team='-'
-            hd-inherit-user-id='search-value-team'
-            hd-inherit-widgets
-            widget-badge='hd-counter'
-            action-badge='badge'
-            order-by='customer.name'
+            widget-project='menu-fix-url-project'
+            order-by='project.customer.name'
             next='project'
           )
       div.divider
@@ -62,22 +77,13 @@ nav#main__menu.jsLeftMenu
           div.menu-icon.icon-folder-alt
         sib-route(name='circle', rdf-type='hd:circle', use-id='', hidden)
         div.sub-menu.menu-notification
-          sib-widget(name='menu-circle-fix-url')
-            template
-              sib-display(
-                data-src='${value}'
-                fields='name, badge'
-                value-badge='${value}'
-                widget-badge='hd-counter'
-                widget-name='sib-display-div'
-              )
           sib-display(
             bind-user
             nested-field='circles'
             fields='circle'
             empty-widget='hd-create'
             empty-value='circle'
-            widget-circle='menu-circle-fix-url'
+            widget-circle='menu-fix-url-circle'
             order-by='circle.name'
             next='circle'
           )

src/page-admin.pug

 .views-container.sidebar-is-closed
   if endpoints.circles || (endpoints.get && endpoints.get.circles)
     #admin-circles(hidden)
-      include page-admin-circles.pug
+      include views/admin/page-admin-circles.pug
   if endpoints.projects || (endpoints.get && endpoints.get.projects)
     #admin-projects(hidden)
-      include page-admin-projects.pug
-  //- #admin-users(hidden)
-    include page-admin-users.pug
+      include views/admin/page-admin-projects.pug
+  if publicDirectory && (endpoints.users || (endpoints.get && endpoints.get.users))
+    #admin-users(hidden)
+      include views/admin/page-admin-users.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
+      if publicDirectory && (endpoints.users || (endpoints.get && endpoints.get.users))
+        sib-route(name='admin-users')
+          li
+            a Users
       if endpoints.circles || (endpoints.get && endpoints.get.circles)
         sib-route(name='admin-circles')
           li

src/page-circle.pug

@@ -13,9 +13,9 @@
     div.content-box__info
       sib-ac-checker(permission='acl:Read', bind-resources)
         #circle-chat(hidden)
-          include page-circle-chat.pug
+          include views/circle/page-circle-chat.pug
         #circle-information(hidden)
-          include page-circle-profile.pug
+          include views/circle/page-circle-profile.pug
 
 nav.jsRightMenu(role='navigation')
   sib-router(default-route='circle-chat')

src/page-members-directory.pug → src/page-directory.pug

@@ -3,4 +3,3 @@ sib-directory(
   range-groups=`${endpoints.groups || endpoints.get.groups}`,
   range-skills=`${endpoints.skills || endpoints.get.skills}`
 )
-

src/page-job-offers.pug

-.job-offers__container
-  sib-job-board(
-    data-src=`${endpoints.joboffers || endpoints.get.joboffers}`,
-    range-skills=`${endpoints.skills || endpoints.get.skills}`
-  )
-
-  div.job-offers__newoffer
-    sib-link(next="job-offer-create").plus-button
-      div.icon-plus
-      div Post a new offer
+.content-box.full-width
+  #job-offer-board
+    .job-offers__container
+    sib-job-board(
+      data-src=`${endpoints.joboffers || endpoints.get.joboffers}`,
+      range-skills=`${endpoints.skills || endpoints.get.skills}`
+    )
+
+    div.job-offers__newoffer
+      sib-link(next="job-offer-create").plus-button
+        div.icon-plus
+        div Post a new offer
+
+  #job-offer-create(hidden)
+    sib-link(class="backlink", next="job-offers") Back
+    include views/job-offer/page-job-offer-create.pug
+
+  #job-offer-edit(hidden)
+    sib-link(class="backlink", next="job-offers") Back
+    include views/job-offer/page-job-offer-edit.pug
+
+sib-router(default-route='job-offer-board')
+  sib-route(name='job-offer-board')
+  sib-route(name='job-offer-create')
+  sib-route(name='job-offer-edit')
\ No newline at end of file

src/page-project.pug

@@ -19,9 +19,9 @@
     div.content-box__info
       sib-ac-checker(permission='acl:Read', bind-resources)
         #project-chat(hidden)
-          include page-project-chat.pug
+          include views/project/page-project-chat.pug
         #project-information(hidden)
-          include page-project-profile.pug
+          include views/project/page-project-profile.pug
 
 dialog(id='project-contributions-help').modal
   sib-link(next='project-profile')

src/page-user-panel.pug

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

src/scripts/index.js

-function recursiveAdaptWidgets(prefix, element, user) {
-  //- This function is a workaround for the currently unworking populate
-  //- Feel free to see examples on page-circles-
-
-  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"]
-      );
-    }
+function applyAdapt(prefix, sibDisplay, user) {
+  
+  //- Allow to bind-user on selected attribute
+  if (sibDisplay.getAttribute(prefix + "-user-id")) {
+    sibDisplay.setAttribute(
+      sibDisplay.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"
+  //- Allow to set data-src to a children sib-form
+  if (sibDisplay.getAttribute(prefix + "-bind-resources")) {
+    let form = sibDisplay.querySelector(
+      sibDisplay.getAttribute(prefix + "-bind-resources") + " sib-form"
+    );
+    if (form) {
+      form.setAttribute(
+        "data-src",
+        sibDisplay.component.resourceId.replace("members/", "")
       );
-      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", "");
-      });
-    }
+  //- Allow to put user on a targetted search field
+  if (sibDisplay.getAttribute(prefix + "-bind-user2input")) {
+    sibDisplay.querySelector(
+      sibDisplay.getAttribute(prefix + "-bind-user2input")
+    ).value = user["@id"];
   }
+}
 
-  //- 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);
+function recursiveAdaptWidgets(prefix, element, user) {
+  
+  element.addEventListener("populate", () => {
+    
+    //- This function is a workaround for the currently unworking populate
+    //- Feel free to see examples on page-circles-
+    element.querySelectorAll("[" + prefix + "-user-id]").forEach(el => {
+      el.setAttribute(el.getAttribute(prefix + "-user-id"), user["@id"]);
+    });
+    applyAdapt(prefix, element, user);
+
+    document.querySelectorAll('sib-display, sib-form').forEach(sibDisplay => {
+      applyAdapt(prefix, sibDisplay, user);
     });
   });
 }
@@ -125,6 +120,7 @@ async function refreshResource(event) {
   if(resourceId.includes('circle') && user != null) {
     let userId = user['@id'];
     refreshSibDisplays(userId + "circles/");
+    refreshSibDisplays(resourceId.split('/').slice(0,4).join('/')+'/joinable/');
   }
 
   //clear cache on this resource
@@ -218,10 +214,12 @@ document.addEventListener("DOMContentLoaded", function(event) {
           .forEach(el => (el.style.visibility = "visible"));
         // Hide login button if already logged
         document
-          .querySelector('button[role="log in"]')
+          .querySelector('.loggedIn')
           .setAttribute("style", "display:none !important");
-        // Set current user id on set-user-id of sib-display
-        recursiveAdaptWidgets("hd-inherit", document, user);
+        document.querySelectorAll('sib-display, sib-form').forEach(element => {
+          // Set current user id on set-user-id of sib-display
+          recursiveAdaptWidgets("hd-inherit", element, user);
+        });
         for (leaveBtn of document.querySelectorAll(
           "admin-circle-leave > sib-ac-checker:not([hidden])"
         )) {
@@ -230,6 +228,8 @@ document.addEventListener("DOMContentLoaded", function(event) {
             "display:none !important"
           ); // Hide Join button
         }
+      } else {
+        document.querySelector('sib-auth').login();
       }
     })
     .catch(error => console.log(error));

src/styles/base/header.scss

@@ -56,10 +56,6 @@
     }
   }
 
-  .notLoggedIn {
-    visibility: hidden;
-  }
-
   sib-notifications {
 
     @include breakpoint(sm) {

src/styles/base/main.scss

@@ -35,6 +35,10 @@ $breakpoints: (phone: 480px,
     backface-visibility: hidden;
     /*will-change: overflow;*/
   }
+
+  .notLoggedIn {
+    visibility: hidden;
+  }
 }
 
 /* Add scrollbar to the left and right menu, and to the content */
@@ -471,7 +475,7 @@ a,
       }
     }
 
-    &.test {
+    &.flex {
       display: flex;
     }
 

src/styles/base/menu-left.scss

@@ -29,7 +29,7 @@
       display: flex;
       flex-direction: row-reverse;
       font-weight: bold;
-      padding: 1.6rem;
+      padding: 1.2rem;
   
       &[active] {
         background-color: $color-46-100-67;
@@ -97,10 +97,9 @@
       .project-tab>div>sib-display>div:nth-child(1) {
 
         sib-set-default[name='project'] {
-          padding: 1rem 1rem 1rem 3.2rem;
 
           .project-customer,
-          .project-name {
+          .project-name>div {
             display: block;
             overflow: hidden;
             text-overflow: ellipsis;
@@ -113,6 +112,7 @@
           }
 
           .project-name {
+            display: block;
             padding-left: 14px;
             width: calc(150px - 10px);
             /* 10px = padding of the sib-set-default = better alignment */
@@ -126,7 +126,7 @@
       /* End of specific styles of "Projects" tab */
 
       >sib-display.nosub>div>sib-display>div {
-        padding: 1rem 1rem 1rem 3.2rem;
+        padding: 1rem 1rem 1rem 3rem;
       }
 
       sib-display>div {
@@ -145,8 +145,9 @@
           >div {
             color: $color-244-10-70;
             cursor: pointer;
-            >menu-circle-fix-url>sib-display>div {
-              padding: 1rem 1rem 1rem 3.2rem;
+            >menu-fix-url-circle>sib-display>div,
+            >menu-fix-url-project>sib-display>div {
+              padding: 1rem 1rem 1rem 3rem;
             }
           }
 
@@ -156,7 +157,8 @@
         }
 
         &>sib-display[active]>div,
-        &>sib-display>div>menu-circle-fix-url>sib-display[active]>div {
+        &>sib-display>div>menu-fix-url-circle>sib-display[active]>div,
+        &>sib-display>div>menu-fix-url-project>sib-display[active]>div {
           background-color: $color-46-100-67;
           color: $color-233-18-29;
           font-weight: bold;
@@ -164,11 +166,13 @@
       }
 
       &.menu-notification {
-        > sib-display > div > sib-display > div > menu-circle-fix-url {
+        > sib-display > div > sib-display > div > menu-fix-url-circle,
+        > sib-display > div > sib-display > div > menu-fix-url-project {
           flex: 1;
         }
         > sib-display > div > sib-display > div,
-        > sib-display > div > sib-display > div > menu-circle-fix-url  > sib-display > div {
+        > sib-display > div > sib-display > div > menu-fix-url-circle  > sib-display > div,
+        > sib-display > div > sib-display > div > menu-fix-url-project  > sib-display > div {
             display: flex;
             sib-display-div {
               flex: 3;

src/styles/layout/events/_index.scss

-@import 'events';
\ No newline at end of file
+@import 'events.scss';
\ No newline at end of file

src/styles/layout/events/events.scss

-$color-203-87-19: hsl(203, 87.8%, 19.2%);
-$color-357-67-45: hsl(357,67.5%,45.9%);
-$color-212-4-50: hsl(212.7,4.3%,50%);
-$color-0-0-22: hsl(0,0%,22.7%);
 #events {
     width: 100%;
     font-family: "Facit";

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

@@ -163,6 +163,14 @@
 
       span {
         font-weight: bold;
+
+        &.link-color {
+          color: $color-244-73-62;
+        }
+
+        &.norm-weight {
+          font-weight: normal;
+        }
       }
     }
   }

src/templates/hd-customer.pug

@@ -12,6 +12,6 @@ sib-widget(name='hd-customer')
         ul
           li #[span(class='mdi-account-outline') ${await value.firstName} ${await value.lastName ? await value.lastName : ""}]${await value.role ? `, ${await value.role}` : ""}
           li
-            span(class='mdi-email-outline')
+            span(class='link-color norm-weight mdi-email-outline')
               a(href='mailto:${await value.email}') ${await value.email}
-          span ${await value.phone ? `<li><span class='mdi-cellphone-iphone'>${await value.phone}</span></li>` : ``}
+          span ${await value.phone ? `<li><span class='norm-weight mdi-cellphone-iphone'>${await value.phone}</span></li>` : ``}