autonomic-cooperative
/
hubl
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feature: my profile

This commit is contained in:
Jean-Baptiste Pasquier 2020-05-27 06:44:54 +00:00 committed by Rachel
parent 567c7304ed
commit 4e2fccdb60
14 changed files with 126 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
README.md
View File

@ -78,7 +78,9 @@ On `config.json`:
"xmpp": "https://jabber.happy-dev.fr/http-bind/", "xmpp": "https://jabber.happy-dev.fr/http-bind/",
"authority": "http://localhost:8000/", "authority": "http://localhost:8000/",
"endpoints": { "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
Events allow to create and manage instance-level evenement. To activate them, you need: Events allow to create and manage instance-level evenement. To activate them, you need:

0
styling.md → STYLING.md
View File

35
client.sample.happy-dev.css
View File

@ -108,6 +108,23 @@
--color-chat-grey-1: var(--color-grey-4); --color-chat-grey-1: var(--color-grey-4);
--color-chat-grey-2: var(--color-grey-6); --color-chat-grey-2: var(--color-grey-6);
--color-chat-grey-3: var(--color-grey-10); --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) */ /* 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 { #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); 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);
}

14
docker/config.json
View File

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

16
src/dependencies.pug
View File

@ -8,28 +8,28 @@ script(type="module" src="https://unpkg.com/@startinblox/oidc@0.8" defer)
//- script(type="module" src="/lib/sib-oidc/index.js" defer) //- script(type="module" src="/lib/sib-oidc/index.js" defer)
script(type="module" src="https://unpkg.com/@startinblox/router@0.7" defer) script(type="module" src="https://unpkg.com/@startinblox/router@0.7" defer)
//- script(type="module" src="/lib/sib-router/src/index.js" defer) //- script(type="module" src="/lib/sib-router/src/index.js" defer)
script(type="module" src="https://unpkg.com/@startinblox/component-notifications@0.3" defer) script(type="module" src="https://unpkg.com/@startinblox/component-notifications@0.3" defer)
//- script(type="module" src="/lib/sib-notifications/index.js" defer) //- script(type="module" src="/lib/sib-notifications/index.js" defer)
if endpoints.events || (endpoints.get && endpoints.get.events) if endpoints.events || (endpoints.get && endpoints.get.events)
script(type="module" src="https://unpkg.com/@startinblox/component-event@0.1" defer) script(type="module" src="https://unpkg.com/@startinblox/component-event@0.1" defer)
//- script(type="module" src="/lib/sib-event/sib-event.js" defer) //- script(type="module" src="/lib/sib-event/sib-event.js" defer)
if endpoints.joboffers || (endpoints.get && endpoints.get.joboffers) if endpoints.joboffers || (endpoints.get && endpoints.get.joboffers)
script(type="module" src="https://unpkg.com/@startinblox/component-job-board@0.3" defer) script(type="module" src="https://unpkg.com/@startinblox/component-job-board@0.3" defer)
script(type="module" src="https://unpkg.com/@startinblox/component-conversation@0.3" defer) script(type="module" src="https://unpkg.com/@startinblox/component-conversation@0.3" defer)
//- script(type="module" src="/lib/sib-job-board/sib-job-board.js" defer) //- script(type="module" src="/lib/sib-job-board/sib-job-board.js" defer)
//- script(type="module" src="/lib/sib-conversation/sib-conversation.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="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) if endpoints.dashboards || (endpoints.get && endpoints.get.dashboards)
script(type="module" src="https://unpkg.com/@startinblox/component-dashboard@0.1" defer) script(type="module" src="https://unpkg.com/@startinblox/component-dashboard@0.1" defer)
//- script(type="module" src="/lib/sib-dashboard/sib-dashboard.js" defer) //- script(type="module" src="/lib/sib-dashboard/sib-dashboard.js" defer)
if endpoints.users || (endpoints.get && endpoints.get.users) if endpoints.users || (endpoints.get && endpoints.get.users)
script(type="module" src="https://unpkg.com/@startinblox/component-chat@0.6" defer) script(type="module" src="https://unpkg.com/@startinblox/component-chat@0.6" defer)

6
src/header.pug
View File

@ -24,11 +24,9 @@ details#user-controls.notLoggedIn
#user-controls__panel #user-controls__panel
nav(role="user's functionalities menu") nav(role="user's functionalities menu")
ul 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 li
sib-link(next='my-profile') Mon profil sib-link(next='profile') Mon profil
//-li
sib-link(next='user-settings') Settings
li li
sib-link(next='admin') Administration sib-link(next='admin') Administration
button(role='log out' onclick="document.querySelector('sib-auth').logout();") Se déconnecter button(role='log out' onclick="document.querySelector('sib-auth').logout();") Se déconnecter

10
src/index.pug
View File

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

32
src/menu-left.pug
View File

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

5
src/page-profile.pug Normal file
View File

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

53
src/scripts/reactive-store.js
View File

@ -3,7 +3,7 @@ function refreshSibDisplays(resourceId, clearCache = true) {
let cacheCleared = false; let cacheCleared = false;
Array.from(document.querySelectorAll("sib-display")) 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) => { .forEach(async (e) => {
//clear cache if we were unable to before //clear cache if we were unable to before
if ((clearCache && !cacheCleared) && e.component.resource != null) { if ((clearCache && !cacheCleared) && e.component.resource != null) {
@ -25,6 +25,13 @@ async function updateSources(resource) {
refreshSibDisplays(res.join('/'),cacheCleared); 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 //auxiliary function updates displays using a given resource
//NOTE: this is a temporary workaround and should be replaced by a reactive storage //NOTE: this is a temporary workaround and should be replaced by a reactive storage
//https://git.startinblox.com/framework/sib-core/issues/524 //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 // if of the edited resource || id of the container of the created resource
const resourceId = event.detail.resource["@id"] || event.target.dataset.src; const resourceId = event.detail.resource["@id"] || event.target.dataset.src;
updateSources(resourceId, event); 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) //special cases updating users/X/circles for the left-side-menu (leaving or joining circle)
let user = await document.querySelector('sib-auth').getUser(); let user = await document.querySelector('sib-auth').getUser();
@ -82,6 +56,11 @@ async function refreshResource(event) {
if(resourceId.includes('users')) { if(resourceId.includes('users')) {
refreshSibDisplays(resourceId.split('/').slice(0, 3).join('/') + '/users/'); refreshSibDisplays(resourceId.split('/').slice(0, 3).join('/') + '/users/');
refreshSibDisplays(resourceId.split('/').slice(0, 3).join('/') + '/sources/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 //clear cache on this resource

3
src/styles/base/main.scss
View File

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

25
src/styles/base/menu-left.scss
View File

@ -137,6 +137,7 @@
sib-display.nosub>nav { sib-display.nosub>nav {
text-align: center; text-align: center;
overflow: hidden;
display: grid; display: grid;
grid-template-columns: auto 50% auto; grid-template-columns: auto 50% auto;
grid-template-areas: "left middle right"; grid-template-areas: "left middle right";
@ -247,23 +248,23 @@
&.jsLeftMenu { &.jsLeftMenu {
@include breakpoint(sm) { display: none;
display: none;
@include breakpoint(lg) {
display: block;
} }
} }
&.jsLeftMenu[open] { &.jsLeftMenu[open] {
@include breakpoint(sm) { display: block;
display: block; bottom: 0;
bottom: 0; box-shadow: 0 2px 8px 0 rgba(65, 69, 73, 0.5);
box-shadow: 0 2px 8px 0 rgba(65, 69, 73, 0.5); min-width: 80%;
min-width: 80%; position: fixed;
position: fixed; right: 0;
right: 0; top: 0;
top: 0; z-index: 1;
z-index: 1;
}
} }
} }

5
src/styles/components/sidebar.scss
View File

@ -1,6 +1,9 @@
.no-sidebar { .no-sidebar {
flex: 1; flex: 1;
@extend %padding-main;
&.with-padding {
@extend %padding-main;
}
} }
.with-sidebar { .with-sidebar {

4
src/styles/layout/dashboard/dashboard.scss
View File

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