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

update: Cleanup circle information

Browse Source
This commit is contained in:
Jean-Baptiste Pasquier 2019-10-25 15:35:14 +02:00 committed by Gaëlle Morin
parent c53f4c8d94
commit 9db2e1b99b
10 changed files with 253 additions and 161 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/page-circle-edit.pug
View File

@ -3,7 +3,7 @@ div.content-box__info
include templates/hd-user-avatar.pug
sib-widget(name='hd-user-groups')
template ${await value.name}
template ${value.name}
sib-widget(name='team-template-edit')
template
@ -16,20 +16,20 @@ div.content-box__info
multiple-groups=''
widget-groups='hd-user-groups'
)
sib-ac-checker(
permission="acl:Delete"
data-src="${await value['@id']}"
data-src="${value['@id']}"
)
sib-delete(
data-src="${await value['@id']}"
data-src="${value['@id']}"
data-label='Leave the circle'
)
//- Only to show the table grid
sib-ac-checker(
no-permission="acl:Delete"
data-src="${await value['@id']}"
data-src="${value['@id']}"
)
sib-link(class="backlink", bind-resources, next='circle-profile') Back

101
src/page-circle-profile.pug
View File

@ -7,49 +7,96 @@
include templates/hd-circle-team.pug
div.content-box__header.with-edit
sib-display(
bind-resources
fields='name'
sib-ac-checker(permission='acl:Read', bind-resources)
sib-display(
bind-resources
fields='name'
class-name='name'
)
sib-link(class="editlink", next="circle-edit" bind-resources)
class-name='name'
)
div.content-box__info
sib-display.block(
bind-resources
fields='label-description, description, entitled(title, creationDate)'
sib-ac-checker(permission='acl:Read', bind-resources)
sib-ac-checker(permission='acl:Write', bind-resources)
sib-link(class="right-btn", next="circle-edit", bind-resources) Edit and add Members
value-label-description='Description: '
sib-display.block(
bind-resources
fields='creationDateSet(title, creationDate), label-description, description'
default-description='No description available.'
value-label-description='Description: '
value-title='Creation date:'
)
default-description='No description available.'
sib-ac-checker(permission='acl:Write' bind-resources, nested-field='team')
value-title='Creation date:'
)
h2(name="label-team") Members:
//- TODO: sib-ac-checker unworking - https://git.happy-dev.fr/startinblox/framework/sib-core/issues/517
//- sib-ac-checker(permission='acl:Write', bind-resources, nested-field='team')
sib-form.block.team-form(
bind-resources
fields='team'
range-team=`${endpoints.users}`
partial=''
nested-field='members'
fields='user'
range-user=`${endpoints.users}`
class-team='team form-label is-dark'
label-team='Members:'
widget-team='sib-form-auto-completion'
class-user='team form-label is-dark'
label-user=''
widget-user='sib-form-auto-completion'
submit-button='Add a member'
)
sib-display.block(
bind-resources
fields='team'
sib-display.block(
bind-resources
fields='team'
multiple-team=''
widget-team='team-template'
)
multiple-team=''
widget-team='circle-team-template'
)
sib-ac-checker(permission='acl:Delete', bind-resources)
sib-delete(
bind-resources
data-label='Delete Circle'
class='right-btn reversed-btn'
)
sib-widget(name='join-leave-circle-button')
template
sib-ac-checker(
permission="acl:Delete"
data-src="${value['@id']}"
)
sib-delete(
data-src="${value['@id']}"
data-label='Leave circle'
)
sib-display(
bind-resources
fields='members'
multiple-members=''
widget-members='join-leave-circle-button'
)
sib-form.block.team-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

2
src/page-project-profile.pug
View File

@ -25,7 +25,7 @@
widget-captain='captain-template',
value-label-team='TEAM:',
widget-members='team-template',
widget-members='project-team-template',
multiple-members,
bind-resources

17
src/scripts/index.js
View File

@ -43,7 +43,24 @@ document.addEventListener('DOMContentLoaded', function (event) {
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', () => {
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';
}
// 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')+'"]')) {
for(option of select.options) {
option.selected = (option.getAttribute('value') == '{"@id": "'+user['@id']+'"}');
}
}
});
}
}
}).catch(error => console.log(error));
});

27
src/styles/base/form.scss
View File

@ -86,7 +86,7 @@
}
}
input[type='submit'] {
input[type='submit'], .right-btn, sib-delete.right-btn button {
background-color: $color-233-18-29;
border: none;
border-radius: 100em;
@ -100,6 +100,31 @@
text-transform: uppercase;
}
.reversed-btn, sib-delete.reversed-btn button {
background-color: transparent;
border: 1px solid #6157e5;
color: #6157e5;
}
sib-delete.right-btn {
border: none;
border-radius: 0;
margin: 0;
padding: 0;
}
sib-form[set-user-id-select] {
input[type="submit"] {
margin-left: 0;
margin-top: 0;
}
select {
display: none;
}
}
/* CLASSES Peut-être à sortir de .content-box */
.block.team-form>form { /* circle-profile */

243
src/styles/layout/circle/circle-edit.scss
View File

@ -1,149 +1,146 @@
h2 {
font-size: 1.7rem;
font-weight: bold;
text-transform: uppercase;
}
#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%;
}
.member-select.color {
>*:last-of-type {
border-left: 1px solid white;
.ss-main {
color: $color-233-18-29;
}
}
sib-multiple[widget='team-template-edit'] {
label {
display: none;
@media (max-width: 1220px) {
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);
.table-body div team-template-edit {
display: flex;
justify-content: space-between;
>[name='account.picture'] {
>* {
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;
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%;
}
@media (max-width: 1220px) {
display: none;
}
}
}
object {
height: 45%;
width: 45%;
}
.member-select.color {
.ss-main {
color: $color-233-18-29;
}
}
sib-multiple[widget='team-template-edit'] {
label {
display: none;
}
>[name='sup'] {
align-self: end;
display: flex;
grid-column: 2 / span 1;
grid-row: 1 / span 1;
margin-bottom: 0.50rem;
>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='name'] {
font-weight: 600;
margin-right: 1rem;
}
sib-multiple {
>[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;
[name='groups'] {
@extend %user-role;
img {
background-color: white;
height: 100%;
left: 0;
object-fit: cover;
position: absolute;
top: 0;
width: 100%;
}
object {
height: 45%;
width: 45%;
}
}
}
>[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;
>[name='sup'] {
align-self: end;
display: flex;
grid-column: 2 / span 1;
grid-row: 1 / span 1;
margin-bottom: 0.50rem;
&::before {
color: $color-43-100-50;
margin-right: 0.50rem;
[name='name'] {
font-weight: 600;
margin-right: 1rem;
}
sib-multiple {
display: flex;
[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;
}
}
}
}
}
}
}

8
src/styles/layout/circle/circle-profile.scss
View File

@ -1,5 +1,11 @@
#circle-information, #circle-edit {
h2 {
font-size: 1.7rem;
font-weight: bold;
text-transform: uppercase;
}
.content-box__info {
@extend %padding-block;
@ -58,7 +64,7 @@
display: none;
}
>div>team-template[name='team']>sib-display>div {
>div>circle-team-template[name='team']>sib-display>div {
display: grid;
grid-column-gap: 1.6rem;
grid-template-columns: 7vh auto;

2
src/styles/layout/project-profile/project-profile.scss
View File

@ -193,7 +193,7 @@
}
}
team-template[name='members'], captain-template[name='captain'] {
project-team-template[name='members'], captain-template[name='captain'] {
display: grid;
grid-column-gap: 1.6rem;
grid-template-columns: 7vh auto;

2
src/templates/hd-circle-team.pug
View File

@ -1,6 +1,6 @@
include hd-user-avatar.pug
sib-widget(name='team-template')
sib-widget(name='circle-team-template')
template
sib-display(
data-src="${await value}"

2
src/templates/template-team.pug
View File

@ -1,6 +1,6 @@
include hd-user-avatar.pug
sib-widget(name='team-template')
sib-widget(name='project-team-template')
template
sib-display.project-profile-user-avatar(
data-src="${value.user ? value.user['@id'] : ''}"