feature: my profile

README.md

@@ -78,7 +78,9 @@ On `config.json`:
   "xmpp": "https://jabber.happy-dev.fr/http-bind/",
   "authority": "http://localhost:8000/",
   "endpoints": {
-    "users": "http://server.url/users/"
+    "skills": "http://server.url/skills/",
+    "users": "http://server.url/users/",
+    "uploads": "http://server.url/upload/"
   }
 }
 ```
@@ -155,6 +157,8 @@ On `config.json`:
   }
 ```
 
+A [sample fixture](https://git.startinblox.com/djangoldp-packages/djangoldp-dashboard/blob/master/djangoldp_dashboard/fixtures/sample.json) can be loaded with `./manage.py loaddata path/to/djangoldp_dashboard/fixtures/sample.json`.
+
 ### Events
 
 Events allow to create and manage instance-level evenement. To activate them, you need:

client.sample.happy-dev.css

@@ -108,6 +108,23 @@
   --color-chat-grey-1: var(--color-grey-4);
   --color-chat-grey-2: var(--color-grey-6);
   --color-chat-grey-3: var(--color-grey-10);
+
+  /* Directory */
+  --color-directory-grey-4: #7A7F85;
+  --color-directory-grey-5: #F0F3F6;
+
+  --color-directory-avatar-background: #E4E8ED;
+  --color-directory-back-link: #36383B;
+  --color-directory-border: #DAE2F3;
+  --color-directory-content-header-border: #DAE2F3;
+  --color-directory-h1: var(--color-complementary-darken);
+  --color-directory-list-icon: var(--color-primary);
+  --color-directory-text: var(--color-directory-grey-4);
+
+  --color-directory-form-input: #EDF1FA;
+  --color-directory-form-input-text: var(--color-directory-grey-4);
+  --color-directory-form-input-active: var(--color-complementary);
+  --color-directory-form-select-icon: var(--color-complementary);
 }
 
 /* Button to edit a channel or a project (in project-profile) */
@@ -174,3 +191,21 @@
 #admin-circle-list>div>div.table>sib-display:nth-child(5)>div>sib-display>div>admin-circle-join-button>sib-form:hover input {
   color: var(--color-complementary);
 }
+
+
+/* Directory - my profile*/
+
+/* Button to update the avatar */
+#sib-picture-browse,
+#sib-picture-remove {
+  background-color: var(--color-white);
+  border: 1px solid var(--color-complementary);
+  color: var(--color-complementary);
+}
+
+#sib-picture-browse:hover,
+#sib-picture-remove:hover {
+  background-color: var(--color-complementary);
+  border: 1px solid var(--color-complementary);
+  color: var(--color-white);
+}

docker/config.json

@@ -2,17 +2,23 @@
   "xmpp": "https://jabber.happy-dev.fr/http-bind/",
   "authority": "$SERVER",
   "authorityName": "djangoldp-server-name",
+  "publicDirectory": true,
   "endpoints": {
     "get": {
       "circles": "$SERVER/circles/",
+      "dashboards": "$SERVER/dashboards/",
       "groups": "$SERVER/groups/",
-      "users": "$SERVER/users/"
+      "users": "$SERVER/users/",
+      "skills": "$SERVER/skills/",
+      "uploads": "$SERVER/upload/"
     },
     "post": {
       "circles": "$SERVER/circles/",
+      "dashboards": "$SERVER/dashboards/",
       "groups": "$SERVER/groups/",
-      "users": "$SERVER/users/"
+      "users": "$SERVER/users/",
+      "skills": "$SERVER/skills/",
+      "uploads": "$SERVER/upload/"
+    }
   }
-  },
-  "analytics": []
 }

src/dependencies.pug

@@ -23,9 +23,9 @@ if endpoints.joboffers || (endpoints.get && endpoints.get.joboffers)
     //- script(type="module" src="/lib/sib-job-board/sib-job-board.js" defer)
     //- script(type="module" src="/lib/sib-conversation/sib-conversation.js" defer)
 
-if publicDirectory && (endpoints.users || (endpoints.get && endpoints.get.users))
+if (endpoints.uploads || (endpoints.get && endpoints.get.uploads)) && (endpoints.skills || (endpoints.get && endpoints.get.skills)) && (endpoints.users || (endpoints.get && endpoints.get.users))
     script(type="module" src="https://unpkg.com/@startinblox/component-directory@0.3" defer)
-//-     script(type="module" src="/lib/sib-directory/sib-directory.js" defer)
+    //- script(type="module" src="/lib/sib-directory/index.js" defer)
 
 if endpoints.dashboards || (endpoints.get && endpoints.get.dashboards)
     script(type="module" src="https://unpkg.com/@startinblox/component-dashboard@0.1" defer)

src/header.pug

@@ -24,11 +24,9 @@ details#user-controls.notLoggedIn
   #user-controls__panel
     nav(role="user's functionalities menu")
       ul
-        if publicDirectory && (endpoints.users || (endpoints.get && endpoints.get.users))
+        if (endpoints.uploads || (endpoints.get && endpoints.get.uploads)) && (endpoints.skills || (endpoints.get && endpoints.get.skills)) && (endpoints.users || (endpoints.get && endpoints.get.users))
           li
-            sib-link(next='my-profile') Mon profil
+            sib-link(next='profile') Mon profil
-        //-li
-          sib-link(next='user-settings') Settings
         li
           sib-link(next='admin') Administration
       button(role='log out' onclick="document.querySelector('sib-auth').logout();") Se déconnecter

src/index.pug

@@ -22,15 +22,15 @@ html(lang="en")
       div#viewport
 
         if endpoints.dashboards || (endpoints.get && endpoints.get.dashboards)
-          #dashboard(hidden).no-sidebar
+          #dashboard(hidden).no-sidebar.with-padding
             include page-dashboard.pug
 
         if publicDirectory && (endpoints.users || (endpoints.get && endpoints.get.users))
-          #members(hidden).no-sidebar
+          #members(hidden).no-sidebar.with-padding
             include page-directory.pug
 
         if endpoints.joboffers || (endpoints.get && endpoints.get.joboffers)
-          #job-offers(hidden).no-sidebar
+          #job-offers(hidden).no-sidebar.with-padding
             include page-job-offers.pug
 
         if endpoints.projects || (endpoints.get && endpoints.get.projects)
@@ -52,6 +52,10 @@ html(lang="en")
         #admin(hidden).with-sidebar
           include page-admin.pug
           
+        if (endpoints.skills || (endpoints.get && endpoints.get.skills)) && (endpoints.uploads || (endpoints.post && endpoints.post.uploads)) && (endpoints.users || (endpoints.post && endpoints.post.users))
+          #profile(hidden).no-sidebar
+            include page-profile.pug
+    
     if analytics
       each provider in analytics
         if provider.type && provider.url && provider.url

src/menu-left.pug

@@ -71,10 +71,10 @@ nav#main__menu.jsLeftMenu
       div.divider
     if endpoints.projects || (endpoints.get && endpoints.get.projects)
       div
+        sib-link(next='admin-project-list')
           div.menu
             div.menu-chevron
-            sib-link(next='admin-project-list')
+              div.menu-icon.icon-arrow-right-circle
-              div.menu-icon.icon-arrow-right
             div.menu-label  Projets
             div.menu-icon.icon-folder-alt
         sib-route(name='project', rdf-type='hd:project', use-id='', hidden)
@@ -84,7 +84,7 @@ nav#main__menu.jsLeftMenu
             nested-field='projects'
             fields='project'
             empty-widget='hubl-create'
-            empty-value='project'
+            empty-value='projet'
             widget-project='hubl-menu-fix-url-project'
             order-by='project.customer.name'
             next='project'
@@ -92,10 +92,10 @@ nav#main__menu.jsLeftMenu
       div.divider
     if endpoints.circles || (endpoints.get && endpoints.get.circles)
       div
+        sib-link(next='admin-circle-list')
           div.menu
             div.menu-chevron
-            sib-link(next='admin-circle-list')
+              div.menu-icon.icon-arrow-right-circle
-              div.menu-icon.icon-arrow-right
             div.menu-label  Canaux
             div.menu-icon.icon-folder-alt
         sib-route(name='circle', rdf-type='hd:circle', use-id='', hidden)
@@ -105,7 +105,7 @@ nav#main__menu.jsLeftMenu
             nested-field='circles'
             fields='circle'
             empty-widget='hubl-create'
-            empty-value='circle'
+            empty-value='cercle'
             widget-circle='hubl-menu-fix-url-circle'
             order-by='circle.name'
             next='circle'
@@ -137,6 +137,4 @@ nav#main__menu.jsLeftMenu
       div.divider
 
     sib-route(name='admin', hidden)
-    //- div.divider
+    sib-route.menu(name='profile', hidden)
-    //- sib-route.menu(hidden, name='my-profile', rdf-type='foaf:user', use-id='')
-

src/page-profile.pug

@@ -0,0 +1,5 @@
+sib-profile(
+  bind-user
+  upload-src=`${endpoints.uploads || endpoints.post.uploads}`
+  range-skills=`${endpoints.skills || endpoints.get.skills}`
+)

src/scripts/reactive-store.js

@@ -3,7 +3,7 @@ function refreshSibDisplays(resourceId, clearCache = true) {
   let cacheCleared = false;
 
   Array.from(document.querySelectorAll("sib-display"))
-    .filter(sibDisplay => sibDisplay.component.resourceId == resourceId) // keep only elements with resource == edited resource
+    .filter(sibDisplay => sibDisplay.component?sibDisplay.component.resourceId == resourceId:false) // keep only elements with resource == edited resource
     .forEach(async (e) => {
       //clear cache if we were unable to before
       if ((clearCache && !cacheCleared) && e.component.resource != null) {
@@ -25,6 +25,13 @@ async function updateSources(resource) {
   refreshSibDisplays(res.join('/'),cacheCleared);
 }
 
+async function resToChildrens(resource) {
+  resource = resource.getResourceData();
+  refreshSibDisplays(resource["http://happy-dev.fr/owl/#user"]["@id"]);
+  refreshSibDisplays(resource["http://happy-dev.fr/owl/#project"]["@id"] + "members/");
+  refreshSibDisplays(resource["http://happy-dev.fr/owl/#circle"]["@id"] + "members/");
+}
+
 //auxiliary function updates displays using a given resource
 //NOTE: this is a temporary workaround and should be replaced by a reactive storage
 //https://git.startinblox.com/framework/sib-core/issues/524
@@ -33,42 +40,9 @@ async function refreshResource(event) {
   // if of the edited resource || id of the container of the created resource
   const resourceId = event.detail.resource["@id"] || event.target.dataset.src;
   updateSources(resourceId, event);
-  let resource;
+  [...new Set(Array.from(document.querySelectorAll('[data-src="' + resourceId + '"]')).map(e=>e.component?e.component.resource:null).filter(e=>e!=null))].forEach(resToChildrens);
-  try {
+  [...new Set(Array.from(document.querySelectorAll('[data-src="' + resourceId.replace('circle-members','circles').split('/').slice(0, 4).join('/') + '/"]')).map(e=>e.component?e.component.resource:null).filter(e=>e!=null))].forEach(resToChildrens);
-    resource = document
+  [...new Set(Array.from(document.querySelectorAll('[nested-field="' + resourceId.split('/').slice(3, 4).join('').replace('circle-members','circles') + '"]')).map(e=>e.component?e.component.resource:null).filter(e=>e!=null))].forEach(resToChildrens);
-      .querySelector('[data-src="' + resourceId + '"]')
-      .component.resource.getResourceData();
-  } catch (e) {
-    try {
-      resource = document
-        .querySelector('[data-src="' + resourceId.replace('circle-members','circles').split('/').slice(0, 4).join('/') + '/"]')
-        .component.resource.getResourceData();
-    } catch (e) {
-      try {
-        resource = document
-        .querySelector('[nested-field="' + resourceId.split('/').slice(3, 4).join('').replace('circle-members','circles') + '"]')
-        .component.resource.getResourceData();
-      } catch (e) {
-        resource = undefined;
-      }
-    }
-  }
-
-  if(resource) {
-    //special case: refresh circles/X/ from circle-members/Y/
-    let partnerId = null;
-    if (resourceId.includes("circle-members")) {
-      partnerId = resource["http://happy-dev.fr/owl/#circle"]["@id"];
-    } else if (resourceId.includes("project-members")) {
-      partnerId = resource["http://happy-dev.fr/owl/#project"]["@id"];
-    }
-    //refresh all resources using the partner ID
-    if (partnerId != null) {
-      refreshSibDisplays(partnerId);
-      refreshSibDisplays(partnerId + "members/");
-    }
-  }
-
 
   //special cases updating users/X/circles for the left-side-menu (leaving or joining circle)
   let user = await document.querySelector('sib-auth').getUser();
@@ -82,6 +56,11 @@ async function refreshResource(event) {
   if(resourceId.includes('users')) {
     refreshSibDisplays(resourceId.split('/').slice(0, 3).join('/') + '/users/');
     refreshSibDisplays(resourceId.split('/').slice(0, 3).join('/') + '/sources/users/');
+    refreshSibDisplays(resourceId + 'profile/');
+    refreshSibDisplays(resourceId + 'account/');
+    refreshSibDisplays(resourceId + 'chatProfile/');
+    refreshSibDisplays(resourceId + 'skills/');
+    refreshSibDisplays(resourceId + 'account/');
   }
 
   //clear cache on this resource

src/styles/base/main.scss

@@ -18,6 +18,7 @@
 
   main {
     display: flex;
+    z-index: 0;
     overflow: hidden;
     height: calc(100vh - 83px); /* 83px = height of the header */
     position: relative;
@@ -153,7 +154,7 @@ h5 {
 }
 
 %padding-main {
-  padding: 5rem;
+  padding: 1.3rem;
 }
 
 %padding-block {

src/styles/base/menu-left.scss

@@ -137,6 +137,7 @@
 
       sib-display.nosub>nav {
         text-align: center;
+        overflow: hidden;
         display: grid;
         grid-template-columns: auto 50% auto;
         grid-template-areas: "left middle right";
@@ -247,14 +248,15 @@
 
   &.jsLeftMenu {
 
-    @include breakpoint(sm) {
     display: none;
+
+    @include breakpoint(lg) {
+      display: block;
     }
   }
 
   &.jsLeftMenu[open] {
 
-    @include breakpoint(sm) {
     display: block;
     bottom: 0;
     box-shadow: 0 2px 8px 0 rgba(65, 69, 73, 0.5);
@@ -265,7 +267,6 @@
     z-index: 1;
   }
 }
-}
 
 // Temporary fix for badges
 sib-fix-badge {

src/styles/components/sidebar.scss

@@ -1,7 +1,10 @@
 .no-sidebar {
   flex: 1;
+
+  &.with-padding {
     @extend %padding-main;
   }
+}
 
 .with-sidebar {
   flex-grow: 1;

src/styles/layout/dashboard/dashboard.scss

@@ -1,3 +1,7 @@
 .dashboard>div {
   margin: 0 2px;
 }
+
+sib-dashboard .icon::before {
+  width: 41px;
+}