From 09f35bd3c0a66cbe939eb1b98633853a3034a9c1 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Pasquier Date: Fri, 25 Oct 2019 19:15:45 +0200 Subject: [PATCH] update: add administration & circle creation --- src/index.pug | 3 + src/menu-left.pug | 11 +- src/page-admin-circles-create.pug | 19 ++ src/page-admin-circles.pug | 56 +++++ src/page-admin-projects.pug | 10 + src/page-admin-users.pug | 18 ++ src/page-admin.pug | 21 ++ src/page-circle-create.pug | 26 -- src/page-user-panel.pug | 4 +- src/scripts/index.js | 9 +- src/styles/layout/circle/circle-edit.scss | 293 +++++++++++----------- 11 files changed, 285 insertions(+), 185 deletions(-) create mode 100644 src/page-admin-circles-create.pug create mode 100644 src/page-admin-circles.pug create mode 100644 src/page-admin-projects.pug create mode 100644 src/page-admin-users.pug create mode 100644 src/page-admin.pug delete mode 100644 src/page-circle-create.pug diff --git a/src/index.pug b/src/index.pug index cf0f8d0..ab13cbd 100644 --- a/src/index.pug +++ b/src/index.pug @@ -37,6 +37,9 @@ html(lang="en") #messages(hidden).with-sidebar include page-messages.pug + + #admin(hidden).with-sidebar + include page-admin.pug //- #my-profile(hidden).no-sidebar //- include page-user-profile.pug diff --git a/src/menu-left.pug b/src/menu-left.pug index 1213473..bff3dd5 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(hidden, name='job-offer-create') - //- sib-route(hidden, name='job-offer-edit', use-id) + //- sib-route(name='job-offer-create') + //- sib-route(name='job-offer-edit', use-id) //- 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(hidden,name='project', id-prefix=`${endpoints.projects}`, rdf-type='hd:project', use-id='') + //- sib-route(name='project', rdf-type='hd:project', use-id='') //- div.sub-menu.menu-notification //- sib-display( //- data-src=`${endpoints.projects}` @@ -46,7 +46,7 @@ nav#main__menu div.menu-icon.icon-arrow-up div.menu-label Circles div.menu-icon.icon-folder-alt - sib-route(hidden,name='circle', id-prefix=`${endpoints.circles}`, rdf-type='hd:circle', use-id='') + sib-route(name='circle', rdf-type='hd:circle', use-id='') div.sub-menu.menu-notification sib-display( data-src=`${endpoints.circles}` @@ -70,7 +70,7 @@ nav#main__menu div.menu-icon.icon-arrow-up div.menu-label Chat div.menu-icon.icon-envelope-letter - sib-route(hidden, name='messages', id-prefix=`${endpoints.users}`, rdf-type='foaf:user', use-id='') + sib-route(name='messages', rdf-type='foaf:user', use-id='') div.sub-menu.menu-notification sib-display( data-src=`${endpoints.users}` @@ -82,6 +82,7 @@ nav#main__menu next='messages' ) + sib-route(name='admin') //- 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 new file mode 100644 index 0000000..6cba7b2 --- /dev/null +++ b/src/page-admin-circles-create.pug @@ -0,0 +1,19 @@ +div.content-box__info + sib-link(class="backlink", next='admin-circle-list') Back + + h1 New circle + + p.center Here you can create a new circle according to your interests, what you want to share, etc. + + 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' + + widget-description='sib-form-textarea' + + submit-button='Save' + ) diff --git a/src/page-admin-circles.pug b/src/page-admin-circles.pug new file mode 100644 index 0000000..635a760 --- /dev/null +++ b/src/page-admin-circles.pug @@ -0,0 +1,56 @@ +.content-box.full-width.with-form + sib-router(default-route='admin-circle-list') + sib-route(name='admin-circle-list') + sib-route(name='admin-circle-create') + + div.content-box__header + h2 Administration + + + #admin-circle-list(hidden) + sib-widget(name="admin-circle-leave") + template + sib-ac-checker( + permission="acl:Delete" + data-src="${value['@id']}" + ) + sib-delete( + data-src="${value['@id']}" + data-label='Leave' + ) + + sib-widget(name="admin-circle-join") + template + sib-form( + data-src="${src}" + nested-field='members' + fields='user' + label-user='' + range-user=`${endpoints.users}` + widget-user='sib-form-dropdown' + + set-user-id-select="user" + + submit-button='Join' + ) + + + div.content-box__info + sib-link(class="right-btn", next="admin-circle-create") Create a new circle + h3 Circles + sib-display.block( + data-src=`${endpoints.circles}` + fields="name, owner.name, buttons(members, button)" + search-fields="name" + search-label-name="Search a Circle" + + multiple-groups="" + widget-members="admin-circle-leave" + multiple-members="" + widget-button="admin-circle-join" + action-button="button" + ) + + + #admin-circle-create(hidden) + include page-admin-circles-create.pug \ No newline at end of file diff --git a/src/page-admin-projects.pug b/src/page-admin-projects.pug new file mode 100644 index 0000000..3ce1145 --- /dev/null +++ b/src/page-admin-projects.pug @@ -0,0 +1,10 @@ +.content-box.full-width.with-form + sib-router(default-route='admin-project-list') + sib-route(name='admin-project-list') + sib-route(name='admin-project-create') + + + #admin-project-list(hidden) + + + #admin-project-create(hidden) \ No newline at end of file diff --git a/src/page-admin-users.pug b/src/page-admin-users.pug new file mode 100644 index 0000000..0a7a1fe --- /dev/null +++ b/src/page-admin-users.pug @@ -0,0 +1,18 @@ +.content-box.full-width.with-form + sib-router(default-route='admin-users-list') + sib-route(name='admin-users-list') + sib-route(name='admin-users-create') + + div.content-box__header + h2 Administration + + #admin-users-list(hidden) + div.content-box__info + sib-display.block( + data-src=`${endpoints.users}` + fields="account.picture, name, username, email, groups" + multiple-groups="" + ) + + + #admin-users-create(hidden) diff --git a/src/page-admin.pug b/src/page-admin.pug new file mode 100644 index 0000000..15fdfd1 --- /dev/null +++ b/src/page-admin.pug @@ -0,0 +1,21 @@ +.views-container + #admin-circles(hidden) + include page-admin-circles.pug +//- #admin-users(hidden) +//- include page-admin-users.pug +//- #admin-projects(hidden) +//- include page-admin-projects.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 + sib-route(name='admin-circles') + li + a Circles + //- sib-route(name='admin-projects') + li + a Projects diff --git a/src/page-circle-create.pug b/src/page-circle-create.pug deleted file mode 100644 index 6ad81a1..0000000 --- a/src/page-circle-create.pug +++ /dev/null @@ -1,26 +0,0 @@ -.content-box.with-padding.with-form.full-width - h1 New group - p Here you can create a new group according to your interests, what you want to share, etc. - - sib-form( - data-src=`${endpoints.circles}`, - range-owner=`${endpoints.users}`, - range-team=`${endpoints.users}` - - fields='name, description, description-text, owner, owner-text, team, team-text, jabberRoom, foaf:jabberID', - - label-name="Channel's name", - label-description='Description', - label-owner='Owner of this channel', - label-foaf:jabberID='Chatroom id', - label-team='Member(s) of this channel', - - value-description-text='You can write a short description like "Here, we are like Pinky and the Brain, we talk about strategy to conquer the world".', - value-owner-text='The one who will admin this channel', - value-team-text='Add any members as you want.', - - - widget-description='sib-form-textarea', - widget-jabberRoom='sib-form-checkbox', - ) - //- widget-team='sib-form-multiple-dropdown' diff --git a/src/page-user-panel.pug b/src/page-user-panel.pug index d3491ac..6e6c310 100644 --- a/src/page-user-panel.pug +++ b/src/page-user-panel.pug @@ -4,6 +4,6 @@ nav(role="user's functionalities menu") //- sib-link(next='my-profile') My profile //-li sib-link(next='user-settings') Settings - //-li - sib-link(name='user-admin') Admin + li + sib-link(next='admin') Admin button(role='log out' onclick="document.querySelector('sib-auth').logout();") Log out diff --git a/src/scripts/index.js b/src/scripts/index.js index f587c65..edb1ecc 100644 --- a/src/scripts/index.js +++ b/src/scripts/index.js @@ -46,9 +46,9 @@ document.addEventListener('DOMContentLoaded', function (event) { for(sibForm of document.querySelectorAll('[set-user-id-select]')) { sibForm.addEventListener('populate', () => { - document.querySelector('sib-form[submit-button="Join Circle"]').style.display = 'none'; - if(document.querySelectorAll('sib-ac-checker:not([hidden]) > sib-delete[data-label="Leave circle"]').length == 0) { - document.querySelector('sib-form[submit-button="Join Circle"]').style.display = 'inline-block'; + document.querySelectorAll('sib-form[submit-button^="Join"]').forEach(el=>el.style.display = 'none'); + if(document.querySelectorAll('sib-ac-checker:not([hidden]) > sib-delete[data-label="^Leave"]').length == 0) { + document.querySelectorAll('sib-form[submit-button^="Join"]').forEach(el=>el.style.display = 'inline-block'); } // BUG: Populate event trigger before the view is fully loaded! - https://git.happy-dev.fr/startinblox/framework/sib-core/issues/521 for(select of sibForm.querySelectorAll('select[name="'+sibForm.getAttribute('set-user-id-select')+'"]')) { @@ -58,6 +58,9 @@ document.addEventListener('DOMContentLoaded', function (event) { } }); } + for(leaveBtn of document.querySelectorAll('admin-circle-leave > sib-ac-checker:not([hidden])')) { + leaveBtn.parentNode.parentNode.parentNode.nextElementSibling.style.display = "none"; // Hide Join button + } } }).catch(error => console.log(error)); diff --git a/src/styles/layout/circle/circle-edit.scss b/src/styles/layout/circle/circle-edit.scss index 8db982e..972700b 100644 --- a/src/styles/layout/circle/circle-edit.scss +++ b/src/styles/layout/circle/circle-edit.scss @@ -1,178 +1,173 @@ #circle-edit { - -.table-header { - background: $color-228-25-79; - color: white; - display: flex; - font-size: 1.6rem; - font-weight: 600; - justify-content: space-around; - text-align: center; - - >*{ - border-right: 1px solid $color-228-25-79; - flex: 1; - padding: 1rem; - width: 50%; - } - - >*:last-of-type { - border-left: 1px solid white; - - @media (max-width: 1220px) { - display: none; - } - } -} - -.table-body div team-template-edit { - display: flex; - justify-content: space-between; - - >* { - border-bottom: 1px solid $color-228-25-79; - flex: 1; - width: 50%; - } - - sib-display { - border-left: 1px solid $color-228-25-79; - border-right: 1px solid $color-228-25-79; - padding: 0 2.2rem; - } - - sib-ac-checker { - align-items: center; - border-right: 1px solid $color-228-25-79; + .table-header { + background: $color-228-25-79; + color: white; display: flex; - justify-content: flex-end; - padding: 2.7rem 2.2rem; + font-size: 1.6rem; + font-weight: 600; + justify-content: space-around; + text-align: center; - @media (max-width: 1220px) { - display: none; - } + >*{ + border-right: 1px solid $color-228-25-79; + flex: 1; + padding: 1rem; + width: 50%; + } + + >*:last-of-type { + border-left: 1px solid white; + + @media (max-width: 1220px) { + display: none; + } + } } .table-body div team-template-edit { - display: flex; - justify-content: space-between; - - >* { - border-bottom: 1px solid $color-228-25-79; - flex: 1; - width: 50%; - } - - >*:nth-child(odd) { - border-left: 1px solid $color-228-25-79; - border-right: 1px solid $color-228-25-79; - padding: 0 2.2rem; - } - - >*:nth-child(even) { display: flex; - border-right: 1px solid $color-228-25-79; - justify-content: flex-end; - padding: 2.7rem 2.2rem; - } - } + justify-content: space-between; - .member-select.color { + >* { + border-bottom: 1px solid $color-228-25-79; + flex: 1; + width: 50%; + } - .ss-main { - color: $color-233-18-29; - } - } + sib-display { + border-left: 1px solid $color-228-25-79; + border-right: 1px solid $color-228-25-79; + padding: 0 2.2rem; + } - sib-multiple[widget='team-template-edit'] { - - label { - display: none; - } - - >div>team-template-edit>sib-display>div { - display: grid; - grid-column-gap: 1.6rem; - grid-template-columns: 7vh auto; - grid-template-rows: repeat(2, 5.2vh); - - >[name='account.picture'] { + sib-ac-checker { align-items: center; - align-self: center; - background-color: $color-213-20-91; - border-radius: 50%; + border-right: 1px solid $color-228-25-79; display: flex; - grid-column: 1 / span 1; - grid-row: 1 / span 2; - height: 7vh; - justify-content: center; - overflow: hidden; - position: relative; - width: 7vh; + justify-content: flex-end; + padding: 2.7rem 2.2rem; - img { - background-color: white; - height: 100%; - left: 0; - object-fit: cover; - position: absolute; - top: 0; - width: 100%; - } - -<<<<<<< HEAD:src/styles/layout/circle-profile/circle-edit.scss - object { - height: 45%; - width: 45%; - } -======= - [name='name'] { - font-weight: 600; - margin-right: 1rem; ->>>>>>> 81d885730dd7673ee424a72b6f0c663c7c1cc5b7:src/styles/layout/circle/circle-edit.scss + @media (max-width: 1220px) { + display: none; + } } - >[name='sup'] { - align-self: end; + .table-body div team-template-edit { display: flex; -<<<<<<< HEAD:src/styles/layout/circle-profile/circle-edit.scss - grid-column: 2 / span 1; - grid-row: 1 / span 1; - margin-bottom: 0.50rem; -======= ->>>>>>> 81d885730dd7673ee424a72b6f0c663c7c1cc5b7:src/styles/layout/circle/circle-edit.scss + justify-content: space-between; - [name='name'] { - font-weight: 600; + >* { + border-bottom: 1px solid $color-228-25-79; + flex: 1; + width: 50%; + } + + >*:nth-child(odd) { + border-left: 1px solid $color-228-25-79; + border-right: 1px solid $color-228-25-79; + padding: 0 2.2rem; + } + + >*:nth-child(even) { + display: flex; + border-right: 1px solid $color-228-25-79; + justify-content: flex-end; + padding: 2.7rem 2.2rem; + } + } + + .member-select.color { + + .ss-main { + color: $color-233-18-29; + } + } + + sib-multiple[widget='team-template-edit'] { + + label { + display: none; } - sib-multiple { - display: flex; - margin-left: 1rem; + >div>team-template-edit>sib-display>div { + display: grid; + grid-column-gap: 1.6rem; + grid-template-columns: 7vh auto; + grid-template-rows: repeat(2, 5.2vh); - [name='groups'] { - @extend %user-role; + >[name='account.picture'] { + align-items: center; + align-self: center; + background-color: $color-213-20-91; + border-radius: 50%; + display: flex; + grid-column: 1 / span 1; + grid-row: 1 / span 2; + height: 7vh; + justify-content: center; + overflow: hidden; + position: relative; + width: 7vh; + + img { + background-color: white; + height: 100%; + left: 0; + object-fit: cover; + position: absolute; + top: 0; + width: 100%; + } + + object { + height: 45%; + width: 45%; + } + [name='name'] { + font-weight: 600; + margin-right: 1rem; } - } - } - >[name='sub'] { - align-self: start; - grid-column: 2 / span 1; - grid-row: 2 / span 1; - margin-top: 0.50rem; + >[name='sup'] { + align-self: end; + display: flex; + grid-column: 2 / span 1; + grid-row: 1 / span 1; + margin-bottom: 0.50rem; - >[name$='profile.city']:not(:empty) { - @include mdi('atom'); - align-items: center; - display: flex; + [name='name'] { + font-weight: 600; + } - &::before { - color: $color-43-100-50; - margin-right: 0.50rem; + sib-multiple { + display: flex; + margin-left: 1rem; + + [name='groups'] { + @extend %user-role; + } + } + } + + >[name='sub'] { + align-self: start; + grid-column: 2 / span 1; + grid-row: 2 / span 1; + margin-top: 0.50rem; + + >[name$='profile.city']:not(:empty) { + @include mdi('atom'); + align-items: center; + display: flex; + + &::before { + color: $color-43-100-50; + margin-right: 0.50rem; + } + } } } } } } -} \ No newline at end of file +}