From 0c3b74bcafcc31fc78b5ad7dadeff162dd21fd0e Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Pasquier Date: Thu, 14 Nov 2019 13:27:04 +0100 Subject: [PATCH] update: making join leave works --- src/menu-left.pug | 18 +++-- src/page-admin-circles-create.pug | 4 +- src/page-admin-circles.pug | 92 +++++++++++----------- src/page-admin-projects.pug | 2 +- src/page-admin-users.pug | 2 +- src/page-circle-edit.pug | 6 +- src/page-circle-profile.pug | 62 ++++++++------- src/page-project-profile.pug | 2 +- src/scripts/index.js | 80 ++++++++++--------- src/styles/layout/circle/circle-admin.scss | 23 +----- 10 files changed, 145 insertions(+), 146 deletions(-) diff --git a/src/menu-left.pug b/src/menu-left.pug index bff3dd5..11546f3 100644 --- a/src/menu-left.pug +++ b/src/menu-left.pug @@ -15,8 +15,8 @@ nav#main__menu //- 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') - //- sib-route(name='job-offer-edit', use-id) + //- sib-route(name='job-offer-create', hidden) + //- sib-route(name='job-offer-edit', use-id, hidden) //- div.divider //- div.menu-wrapper //- div.menu @@ -24,7 +24,7 @@ nav#main__menu //- div.menu-icon.icon-arrow-up //- div.menu-label Projects //- 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 //- sib-display( //- data-src=`${endpoints.projects}` @@ -35,7 +35,8 @@ nav#main__menu //- search-fields='team' //- search-widget-team='sib-form-hidden' //- search-value-team='-' - //- set-user-id='search-value-team' + //- hd-inherit-user-id='search-value-team' + //- hd-inherit-widgets //- widget-badge='hd-counter' //- action-badge='badge' //- ) @@ -46,7 +47,7 @@ nav#main__menu div.menu-icon.icon-arrow-up div.menu-label Circles 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 sib-display( data-src=`${endpoints.circles}` @@ -59,7 +60,8 @@ nav#main__menu search-fields='team' search-widget-team='sib-form-hidden' search-value-team='-' - set-user-id='search-value-team' + hd-inherit-user-id='search-value-team' + hd-inherit-widgets order-by='name' next='circle' ) @@ -70,7 +72,7 @@ nav#main__menu div.menu-icon.icon-arrow-up div.menu-label Chat 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 sib-display( data-src=`${endpoints.users}` @@ -82,7 +84,7 @@ nav#main__menu next='messages' ) - sib-route(name='admin') + sib-route(name='admin', hidden) //- div.divider //- sib-route.menu(hidden, name='my-profile', rdf-type='foaf:user', use-id='') diff --git a/src/page-admin-circles-create.pug b/src/page-admin-circles-create.pug index 66cdfb9..4be5618 100644 --- a/src/page-admin-circles-create.pug +++ b/src/page-admin-circles-create.pug @@ -7,11 +7,13 @@ div.content-box__info sib-form.block( data-src=`${endpoints.circles}` - + fields='name, description' class-name='form-label is-light is-full-width' class-description='form-label is-light is-full-width' + next='admin-circle-list' + submit-button='Save' ) diff --git a/src/page-admin-circles.pug b/src/page-admin-circles.pug index 57e15c8..e478630 100644 --- a/src/page-admin-circles.pug +++ b/src/page-admin-circles.pug @@ -1,5 +1,5 @@ .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-create') @@ -10,32 +10,6 @@ #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 sib-widget(name='circle-owner') @@ -49,7 +23,7 @@ div.content-box__info - + div.admin-header div.admin-header__title Circles @@ -66,36 +40,62 @@ div Admins div Join - //-fields="name, own(owner.account.picture, owner.name), buttons(members, button)" - //-sib-display.table-body.test( - data-src=`${endpoints.circles}` - fields='name, own(owner.account.picture, sup(owner.name), sub(owner.username)), buttons(members, button)' + sib-widget(name='admin-circle-leave-button') + template + sib-delete( + 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="" - widget-members="circle-admin-leave-button-template" - multiple-members="" + sib-widget(name='admin-circle-join-button') + template + 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" - action-button="button" + fields='user.@id' + 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( class='table-body' data-src=`${endpoints.circles}` - fields='name, owner, buttons(members, button)' + fields='name, owner, buttons' class-name='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" - action-button="button" + widget-buttons="admin-circle-buttons" + action-buttons="buttons" + hd-inherit-widgets + hd-inherit-widgets-multiple widget-owner='circle-owner' ) diff --git a/src/page-admin-projects.pug b/src/page-admin-projects.pug index 3ce1145..80f8d3f 100644 --- a/src/page-admin-projects.pug +++ b/src/page-admin-projects.pug @@ -1,5 +1,5 @@ .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-create') diff --git a/src/page-admin-users.pug b/src/page-admin-users.pug index 0a7a1fe..7085fe7 100644 --- a/src/page-admin-users.pug +++ b/src/page-admin-users.pug @@ -1,5 +1,5 @@ .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-create') diff --git a/src/page-circle-edit.pug b/src/page-circle-edit.pug index b9d1f67..3cc10e3 100644 --- a/src/page-circle-edit.pug +++ b/src/page-circle-edit.pug @@ -17,7 +17,7 @@ div.content-box__info multiple-groups='' widget-groups='hd-user-groups' ) - + sib-ac-checker( class='w50 cell border' permission="acl:Delete" @@ -42,7 +42,7 @@ div.content-box__info sib-form.block.circle-edit-form( bind-resources - + fields='block-circle__info(name, owner), description' range-owner=`${endpoints.users}` @@ -82,7 +82,7 @@ div.content-box__info div.table-header.grey-color div Name div Access - + //-class='table-body' sib-display( class='table-body' diff --git a/src/page-circle-profile.pug b/src/page-circle-profile.pug index 6df4ebc..8846ae8 100644 --- a/src/page-circle-profile.pug +++ b/src/page-circle-profile.pug @@ -11,8 +11,8 @@ sib-router(default-route='circle-profile', hidden) bind-resources fields='creationDateSet(title, creationDate)' - value-title='Creation date:' - + value-title='Creation date: ' + widget-creationDate='sib-display-date' ) 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' ) - sib-widget(name='join-leave-circle-button') + sib-widget(name='circle-leave-button') template - sib-ac-checker( - permission="acl:Delete" - data-src="${value['@id']}" + sib-delete( + class='button btn-margin-left text-bold text-uppercase reversed button-dark bordered with-icon icon-close' + 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' - data-src="${value['@id']}" - data-label='Leave circle' + + sib-widget(name='circle-join-button') + template + 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( bind-resources - fields='members' - - multiple-members='' - widget-members='join-leave-circle-button' + nested-field='members' + fields='relation' + action-relation='relation' + 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) include page-circle-edit.pug diff --git a/src/page-project-profile.pug b/src/page-project-profile.pug index 5f75c70..0510d97 100644 --- a/src/page-project-profile.pug +++ b/src/page-project-profile.pug @@ -10,7 +10,7 @@ value-const-title1='N°', value-const-title2='-', - value-entitled='Creation date:' + value-entitled='Creation date: ' value-label-description='DESCRIPTION:', widget-customer.logo='sib-display-img', diff --git a/src/scripts/index.js b/src/scripts/index.js index 6b7e65b..9091310 100644 --- a/src/scripts/index.js +++ b/src/scripts/index.js @@ -1,11 +1,45 @@ -function querySelectorParentChild(el, selector) { - while(el !== document.body) { - if(el.querySelector(selector)) { - break; +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']); + } + + //- 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) { @@ -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 => { - if(user !== null) { + if (user !== null) { // Hide login button if already logged document.querySelector('button[role="log in"]').setAttribute('style', 'display:none !important'); // Set current user id on set-user-id of sib-display - for(sibDisplay of document.querySelectorAll('sib-display[set-user-id]')) { - sibDisplay.setAttribute(sibDisplay.getAttribute('set-user-id'), user['@id']); - } - - 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])')) { + recursiveAdaptWidgets("hd-inherit", document, user); + 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 } } }).catch(error => console.log(error)); - + }); \ No newline at end of file diff --git a/src/styles/layout/circle/circle-admin.scss b/src/styles/layout/circle/circle-admin.scss index c959349..d3241dc 100644 --- a/src/styles/layout/circle/circle-admin.scss +++ b/src/styles/layout/circle/circle-admin.scss @@ -6,25 +6,4 @@ .admin-header__title { @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; - } - } - }*/ -} +} \ No newline at end of file