update: making join leave works

This commit is contained in:
Jean-Baptiste Pasquier 2019-11-14 13:27:04 +01:00
parent a342e5d431
commit 0c3b74bcaf
No known key found for this signature in database
GPG Key ID: F2702E6D22ED4D62
10 changed files with 145 additions and 146 deletions

View File

@ -15,8 +15,8 @@ nav#main__menu
//- sib-route.menu(name='job-offers', rdf-type='hd:joboffer') //- sib-route.menu(name='job-offers', rdf-type='hd:joboffer')
//- div.menu-label Job offers //- div.menu-label Job offers
//- div.menu-icon.icon-briefcase //- div.menu-icon.icon-briefcase
//- sib-route(name='job-offer-create') //- sib-route(name='job-offer-create', hidden)
//- sib-route(name='job-offer-edit', use-id) //- sib-route(name='job-offer-edit', use-id, hidden)
//- div.divider //- div.divider
//- div.menu-wrapper //- div.menu-wrapper
//- div.menu //- div.menu
@ -24,7 +24,7 @@ nav#main__menu
//- div.menu-icon.icon-arrow-up //- div.menu-icon.icon-arrow-up
//- div.menu-label Projects //- div.menu-label Projects
//- div.menu-icon.icon-folder-alt //- div.menu-icon.icon-folder-alt
//- sib-route(name='project', rdf-type='hd:project', use-id='') //- sib-route(name='project', rdf-type='hd:project', use-id='', hidden)
//- div.sub-menu.menu-notification //- div.sub-menu.menu-notification
//- sib-display( //- sib-display(
//- data-src=`${endpoints.projects}` //- data-src=`${endpoints.projects}`
@ -35,7 +35,8 @@ nav#main__menu
//- search-fields='team' //- search-fields='team'
//- search-widget-team='sib-form-hidden' //- search-widget-team='sib-form-hidden'
//- search-value-team='-' //- search-value-team='-'
//- set-user-id='search-value-team' //- hd-inherit-user-id='search-value-team'
//- hd-inherit-widgets
//- widget-badge='hd-counter' //- widget-badge='hd-counter'
//- action-badge='badge' //- action-badge='badge'
//- ) //- )
@ -46,7 +47,7 @@ nav#main__menu
div.menu-icon.icon-arrow-up div.menu-icon.icon-arrow-up
div.menu-label Circles div.menu-label Circles
div.menu-icon.icon-folder-alt div.menu-icon.icon-folder-alt
sib-route(name='circle', rdf-type='hd:circle', use-id='') 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(
data-src=`${endpoints.circles}` data-src=`${endpoints.circles}`
@ -59,7 +60,8 @@ nav#main__menu
search-fields='team' search-fields='team'
search-widget-team='sib-form-hidden' search-widget-team='sib-form-hidden'
search-value-team='-' search-value-team='-'
set-user-id='search-value-team' hd-inherit-user-id='search-value-team'
hd-inherit-widgets
order-by='name' order-by='name'
next='circle' next='circle'
) )
@ -70,7 +72,7 @@ nav#main__menu
div.menu-icon.icon-arrow-up div.menu-icon.icon-arrow-up
div.menu-label Chat div.menu-label Chat
div.menu-icon.icon-envelope-letter div.menu-icon.icon-envelope-letter
sib-route(name='messages', rdf-type='foaf:user', use-id='') sib-route(name='messages', rdf-type='foaf:user', use-id='', hidden)
div.sub-menu.menu-notification div.sub-menu.menu-notification
sib-display( sib-display(
data-src=`${endpoints.users}` data-src=`${endpoints.users}`
@ -82,7 +84,7 @@ nav#main__menu
next='messages' next='messages'
) )
sib-route(name='admin') sib-route(name='admin', hidden)
//- div.divider //- div.divider
//- sib-route.menu(hidden, name='my-profile', rdf-type='foaf:user', use-id='') //- sib-route.menu(hidden, name='my-profile', rdf-type='foaf:user', use-id='')

View File

@ -7,11 +7,13 @@ div.content-box__info
sib-form.block( sib-form.block(
data-src=`${endpoints.circles}` data-src=`${endpoints.circles}`
fields='name, description' fields='name, description'
class-name='form-label is-light is-full-width' class-name='form-label is-light is-full-width'
class-description='form-label is-light is-full-width' class-description='form-label is-light is-full-width'
next='admin-circle-list'
submit-button='Save' submit-button='Save'
) )

View File

@ -1,5 +1,5 @@
.content-box.full-width.with-form .content-box.full-width.with-form
sib-router(class='hidden' default-route='admin-circle-list') sib-router(default-route='admin-circle-list', hidden)
sib-route(name='admin-circle-list') sib-route(name='admin-circle-list')
sib-route(name='admin-circle-create') sib-route(name='admin-circle-create')
@ -10,32 +10,6 @@
#admin-circle-list(hidden) #admin-circle-list(hidden)
sib-widget(name="circle-admin-leave-button-template")
template
sib-ac-checker(
permission="acl:Delete"
data-src="${value['@id']}"
)
sib-delete(
class='button text-bold text-uppercase reversed button-dark bordered with-icon icon-close'
data-src="${value['@id']}"
data-label='Leave'
)
sib-widget(name="circle-admin-join-button-template")
template
//- BUG: Populate event trigger before the view is fully loaded! - https://git.happy-dev.fr/startinblox/framework/sib-core/issues/521
sib-form.circle-admin-join-button(
data-src="${src}"
nested-field='members'
fields='user'
widget-user='sib-form-dropdown'
label-user=''
range-user=`${endpoints.users}`
submit-button='Join'
set-user-id-select="user"
)
include templates/hd-user-avatar.pug include templates/hd-user-avatar.pug
sib-widget(name='circle-owner') sib-widget(name='circle-owner')
@ -49,7 +23,7 @@
div.content-box__info div.content-box__info
div.admin-header div.admin-header
div.admin-header__title Circles div.admin-header__title Circles
@ -66,36 +40,62 @@
div Admins div Admins
div Join div Join
//-fields="name, own(owner.account.picture, owner.name), buttons(members, button)" sib-widget(name='admin-circle-leave-button')
//-sib-display.table-body.test( template
data-src=`${endpoints.circles}` sib-delete(
fields='name, own(owner.account.picture, sup(owner.name), sub(owner.username)), buttons(members, button)' class='button btn-margin-left text-bold text-uppercase reversed button-dark bordered with-icon icon-close'
data-src="${src}"
data-label='Leave circle'
)
multiple-groups="" sib-widget(name='admin-circle-join-button')
widget-members="circle-admin-leave-button-template" template
multiple-members="" button.button.btn-margin-left.text-bold.text-uppercase.reversed.button-dark.bordered.with-icon.icon-arrow-right-circle.test
sib-form(
data-src=''
nested-field='members'
widget-button="circle-admin-join-button-template" fields='user.@id'
action-button="button" label-user.@id=''
value-user.@id=''
widget-user.@id='sib-form-hidden'
widget-owner.account.picture='hd-user-avatar' hd-inherit-bind-user2input="input[name='user.@id']"
) hd-inherit-widgets
submit-button='Join Circle'
)
sib-widget(name="admin-circle-buttons")
template
sib-display(
data-src='${src}'
nested-field='members'
fields='relation'
action-relation='relation'
widget-relation='admin-circle-leave-button'
search-fields='user'
search-widget-user='sib-form-hidden'
search-value-user="-"
empty-widget='admin-circle-join-button'
hd-inherit-bind-resources='admin-circle-join-button'
hd-inherit-user-id="search-value-user"
hd-inherit-widgets
)
sib-display( sib-display(
class='table-body' class='table-body'
data-src=`${endpoints.circles}` data-src=`${endpoints.circles}`
fields='name, owner, buttons(members, button)' fields='name, owner, buttons'
class-name='w33 cell border' class-name='w33 cell border'
class-owner='w33 cell border' class-owner='w33 cell border'
multiple-groups=""
widget-members="circle-admin-leave-button-template"
multiple-members=""
widget-button="circle-admin-join-button-template" widget-buttons="admin-circle-buttons"
action-button="button" action-buttons="buttons"
hd-inherit-widgets
hd-inherit-widgets-multiple
widget-owner='circle-owner' widget-owner='circle-owner'
) )

View File

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

View File

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

View File

@ -17,7 +17,7 @@ div.content-box__info
multiple-groups='' multiple-groups=''
widget-groups='hd-user-groups' widget-groups='hd-user-groups'
) )
sib-ac-checker( sib-ac-checker(
class='w50 cell border' class='w50 cell border'
permission="acl:Delete" permission="acl:Delete"
@ -42,7 +42,7 @@ div.content-box__info
sib-form.block.circle-edit-form( sib-form.block.circle-edit-form(
bind-resources bind-resources
fields='block-circle__info(name, owner), description' fields='block-circle__info(name, owner), description'
range-owner=`${endpoints.users}` range-owner=`${endpoints.users}`
@ -82,7 +82,7 @@ div.content-box__info
div.table-header.grey-color div.table-header.grey-color
div Name div Name
div Access div Access
//-class='table-body' //-class='table-body'
sib-display( sib-display(
class='table-body' class='table-body'

View File

@ -11,8 +11,8 @@ sib-router(default-route='circle-profile', hidden)
bind-resources bind-resources
fields='creationDateSet(title, creationDate)' fields='creationDateSet(title, creationDate)'
value-title='Creation date:' value-title='Creation date: '
widget-creationDate='sib-display-date' widget-creationDate='sib-display-date'
) )
sib-ac-checker.testblock.circle-edit-button(permission='acl:Write', bind-resources) sib-ac-checker.testblock.circle-edit-button(permission='acl:Write', bind-resources)
@ -37,40 +37,48 @@ sib-router(default-route='circle-profile', hidden)
data-label='Delete Circle' data-label='Delete Circle'
) )
sib-widget(name='join-leave-circle-button') sib-widget(name='circle-leave-button')
template template
sib-ac-checker( sib-delete(
permission="acl:Delete" class='button btn-margin-left text-bold text-uppercase reversed button-dark bordered with-icon icon-close'
data-src="${value['@id']}" data-src="${src}"
data-label='Leave Circle'
) )
sib-delete(
class='button btn-margin-left text-bold text-uppercase reversed button-dark bordered with-icon icon-close' sib-widget(name='circle-join-button')
data-src="${value['@id']}" template
data-label='Leave circle' button.button.btn-margin-left.text-bold.text-uppercase.reversed.button-dark.bordered.with-icon.icon-arrow-right-circle.test
sib-form(
data-src=''
nested-field='members'
fields='user.@id'
label-user.@id=''
value-user.@id=''
widget-user.@id='sib-form-hidden'
hd-inherit-bind-user2input="input[name='user.@id']"
hd-inherit-widgets
submit-button='Join Circle'
) )
sib-display( sib-display(
bind-resources bind-resources
fields='members' nested-field='members'
fields='relation'
multiple-members='' action-relation='relation'
widget-members='join-leave-circle-button' widget-relation='circle-leave-button'
search-fields='user'
search-widget-user='sib-form-hidden'
search-value-user=""
empty-widget='circle-join-button'
hd-inherit-bind-resources='circle-join-button'
hd-inherit-user-id="search-value-user"
hd-inherit-widgets
) )
button.button.btn-margin-left.text-bold.text-uppercase.reversed.button-dark.bordered.with-icon.icon-arrow-right-circle.test
sib-form(
bind-resources
nested-field='members'
fields='user'
label-user=''
range-user=`${endpoints.users}`
widget-user='sib-form-dropdown'
set-user-id-select="user"
submit-button='Join Circle'
)
#circle-edit(hidden) #circle-edit(hidden)
include page-circle-edit.pug include page-circle-edit.pug

View File

@ -10,7 +10,7 @@
value-const-title1='N°', value-const-title1='N°',
value-const-title2='-', value-const-title2='-',
value-entitled='Creation date:' value-entitled='Creation date: '
value-label-description='DESCRIPTION:', value-label-description='DESCRIPTION:',
widget-customer.logo='sib-display-img', widget-customer.logo='sib-display-img',

View File

@ -1,11 +1,45 @@
function querySelectorParentChild(el, selector) { function recursiveAdaptWidgets(prefix, element, user) {
while(el !== document.body) { //- This function is a workaround for the currently unworking populate
if(el.querySelector(selector)) { //- Feel free to see examples on page-circles-
break;
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']);
}
//- 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");
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', "");
});
} }
el = el.parentNode;
} }
return el.querySelector(selector);
//- 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);
});
});
} }
document.addEventListener('DOMContentLoaded', function (event) { document.addEventListener('DOMContentLoaded', function (event) {
@ -35,44 +69,18 @@ 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.resource.clearCache();
});
});
});
document.querySelector('sib-auth').getUser().then(user => { document.querySelector('sib-auth').getUser().then(user => {
if(user !== null) { if (user !== null) {
// Hide login button if already logged // Hide login button if already logged
document.querySelector('button[role="log in"]').setAttribute('style', 'display:none !important'); document.querySelector('button[role="log in"]').setAttribute('style', 'display:none !important');
// Set current user id on set-user-id of sib-display // Set current user id on set-user-id of sib-display
for(sibDisplay of document.querySelectorAll('sib-display[set-user-id]')) { recursiveAdaptWidgets("hd-inherit", document, user);
sibDisplay.setAttribute(sibDisplay.getAttribute('set-user-id'), user['@id']); for (leaveBtn of document.querySelectorAll('admin-circle-leave > sib-ac-checker:not([hidden])')) {
}
for(sibForm of document.querySelectorAll('[set-user-id-select]')) {
sibForm.addEventListener('populate', () => {
// BUG: Populate event trigger before the view is fully loaded! - https://git.happy-dev.fr/startinblox/framework/sib-core/issues/521
document.querySelectorAll('sib-ac-checker:not([hidden]) > sib-delete[data-label^="Leave"]').forEach((el)=>{
querySelectorParentChild(el, 'sib-form[submit-button^="Join"]').setAttribute('style', 'display:none !important');
});
for(select of sibForm.querySelectorAll('select[name="'+sibForm.getAttribute('set-user-id-select')+'"]')) {
for(option of select.options) {
option.selected = (option.getAttribute('value') == '{"@id": "'+user['@id']+'"}');
}
}
});
}
for(leaveBtn of document.querySelectorAll('admin-circle-leave > sib-ac-checker:not([hidden])')) {
leaveBtn.parentNode.parentNode.parentNode.nextElementSibling.setAttribute('style', 'display:none !important'); // Hide Join button leaveBtn.parentNode.parentNode.parentNode.nextElementSibling.setAttribute('style', 'display:none !important'); // Hide Join button
} }
} }
}).catch(error => console.log(error)); }).catch(error => console.log(error));
}); });

View File

@ -6,25 +6,4 @@
.admin-header__title { .admin-header__title {
@extend h3; @extend h3;
} }
} }
.circle-admin-join-button select[name='user'] {
display: none;
}
#admin-circle-list{
/*
>sib-set-default[name='buttons'] {
display: flex;
justify-content: center;
>sib-multiple {
align-items: center;
display: flex;
}
}
}*/
}