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

Merge branch 'project-admin' into 'staging'

Browse Source 
Project admin listing & project creation

See merge request startinblox/applications/sib-app!88
This commit is contained in:
Jean-Baptiste Pasquier 2020-01-10 19:59:38 +00:00
commit 7b1eab139e
20 changed files with 479 additions and 129 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/dependencies.pug
View File

@ -33,5 +33,6 @@ script(data-default-context, type="application/ld+json")
| "jabberID": "foaf:jabberID",
| "picture": "foaf:depiction",
| "firstName": "http://happy-dev.fr/owl/#first_name",
| "lastName": "http://happy-dev.fr/owl/#last_name"
| "lastName": "http://happy-dev.fr/owl/#last_name",
| "isAdmin": "http://happy-dev.fr/owl/#is_admin"
| }

9
src/menu-left.pug
View File

@ -18,11 +18,12 @@ nav#main__menu
//- div.menu-icon.icon-briefcase
//- sib-route(name='job-offer-create', hidden)
//- sib-route(name='job-offer-edit', use-id, hidden)
div.divider
div.menu-wrapper
//- div.divider
div
div.menu
div.menu-chevron
div.menu-icon.icon-arrow-up
sib-link(next='admin-project-list')
div.menu-icon.icon-arrow-right
div.menu-label Projects
div.menu-icon.icon-folder-alt
sib-route(name='project', rdf-type='hd:project', use-id='', hidden)
@ -45,7 +46,7 @@ nav#main__menu
next='project'
)
div.divider
div.menu-wrapper
div
div.menu
div.menu-chevron
sib-link(next='admin-circle-list')

2
src/page-admin-circles-create.pug
View File

@ -1,7 +1,7 @@
div.content-box__info
sib-link(class="backlink", next='admin-circle-list') Back
h1 New circle
h1.centered New circle
p.center Here you can create a new circle according to your interests, what you want to share, etc.

8
src/page-admin-circles.pug
View File

@ -4,8 +4,7 @@
sib-route(name='admin-circle-create')
div.content-box__header.with-description
div
p.name Administration
h1.title-left.without-margin Administration
#admin-circle-list(hidden)
@ -89,8 +88,9 @@
data-src=`${endpoints.circles}`
fields='name, owner, buttons'
class-name='w33 cell border'
class-owner='w33 cell border'
class-name='w33 cell border cell-with-name'
class-owner='w33 cell border cell-with-id-card'
class-buttons='w33 cell border cell-with-buttons'
widget-buttons="admin-circle-buttons"
action-buttons="buttons"

86
src/page-admin-projects-create.pug Normal file
View File

@ -0,0 +1,86 @@
sib-widget(name='hd-template-project-title')
template
p ${value}
div.content-box__info
sib-link(class="backlink" next='admin-project-list') Back
sib-widget(name="admin-project-add-user")
template
sib-form(
data-holder
fields='user, project'
range-user=`${endpoints.users}`
value-project='${src}'
widget-project='sib-form-hidden'
naked
)
h1.centered New project
sib-form.block(
data-src=`${endpoints.projects}`
fields='line-1(customer.name, name), line-2(customer.logo), line-3(project.description), fieldset-fee, line-4(businessProvider.name, businessProvider.fee), fieldset-customer, line-5(customer.companyRegister), line-6(customer.address), line-7(customer.firstName, customer.lastName), line-8(customer.role), line-9(customer.email, customer.phone), fieldset-captain, line-10(captain)'
class-fieldset-fee='fieldset'
value-fieldset-fee='Fee'
widget-fieldset-fee='hd-template-project-title'
class-fieldset-customer='fieldset'
value-fieldset-customer='Customer\'s information'
widget-fieldset-customer='hd-template-project-title'
class-fieldset-captain='fieldset'
value-fieldset-captain='Captain'
widget-fieldset-captain='hd-template-project-title'
label-customer.name='Customer\'s name*'
class-customer.name='form-label is-light is-half-width'
label-name='Project\'s name*'
class-name='form-label is-light is-half-width'
label-customer.logo='Customer\'s logo'
class-customer.logo='form-label is-light is-half-width'
label-project.description='Project description'
class-project.description='form-label is-light is-full-width'
widget-project.description='sib-form-textarea'
label-businessProvider.name='Business provider*'
class-businessProvider.name='form-label is-light is-half-width'
label-businessProvider.fee='Amount of the contribution'
class-businessProvider.fee='form-label is-light is-half-width'
label-customer.companyregister='Company register'
class-customer.companyregister='form-label is-light is-half-width'
label-customer.address='Address'
class-customer.address='form-label is-light is-full-width'
widget-customer.address='sib-form-textarea'
label-customer.firstName='Name of the contact'
class-customer.firstName='form-label is-light is-half-width'
label-customer.lastName='Firstname of the contact'
class-customer.lastName='form-label is-light is-half-width'
label-customer.role='Role within the company'
class-customer.role='form-label is-light is-half-width'
label-customer.email='Email'
class-customer.email='form-label is-light is-half-width'
label-customer.phone='Phone'
class-customer.phone='form-label is-light is-half-width'
range-captain=`${endpoints.users}`
class-captain='member-select form-label is-light is-half-width'
widget-captain='sib-form-auto-completion'
next='admin-project-list'
submit-button='Save'
)

81
src/page-admin-projects.pug
View File

@ -3,8 +3,89 @@
sib-route(name='admin-project-list')
sib-route(name='admin-project-create')
div.content-box__header.with-description
h1.title-left.without-margin Administration
#admin-project-list(hidden)
include templates/hd-user-avatar.pug
div.content-box__info
div.admin-header
div.admin-header__title Projects
sib-link(
class='button text-bold text-uppercase reversed button-yellow bordered with-icon icon-plus'
next='admin-project-create'
) Create a new project
.table
div.table-header.grey-color
div Name
div Admins
div Captain
div Leave
sib-widget(name="admin-project-leave-button")
template
sib-delete(
class='button text-bold text-uppercase reversed button-dark bordered with-icon icon-close'
data-src="${src}"
data-label='Leave'
)
sib-widget(name='project-captain')
template
sib-display(
data-src='${await value}'
fields='account.picture, sup(name), sub(username)'
widget-account.picture='hd-user-avatar'
)
sib-widget(name='project-admins')
template
sib-display(
data-src='${value}'
fields='user'
search-fields='isAdmin'
search-value-isAdmin='true'
search-widget-isAdmin='sib-form-hidden'
widget-user='project-captain'
)
sib-widget(name="admin-project-buttons")
template
sib-display(
data-src='${src}'
nested-field='members'
fields='relation'
action-relation='relation'
widget-relation='admin-project-leave-button'
search-fields='user'
search-widget-user='sib-form-hidden'
search-value-user="-"
hd-inherit-user-id="search-value-user"
hd-inherit-widgets
)
sib-display(
class='table-body'
data-src=`${endpoints.projects}`
fields='name, members, captain, buttons'
class-name='w25 cell border cell-with-name hashtag'
class-members='w25 cell border'
class-captain='w25 cell border cell-with-id-card'
class-buttons='w25 cell border cell-with-buttons'
widget-buttons="admin-project-buttons"
action-buttons="buttons"
hd-inherit-widgets
hd-inherit-widgets-multiple
widget-captain='project-captain'
widget-members='project-admins'
)
#admin-project-create(hidden)
include page-admin-projects-create.pug

10
src/page-admin.pug
View File

@ -1,10 +1,10 @@
.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
#admin-projects(hidden)
include page-admin-projects.pug
//- #admin-users(hidden)
include page-admin-users.pug
nav.jsRightMenu(role='navigation')
sib-router(default-route='admin-circles')
ul
@ -16,6 +16,6 @@ nav.jsRightMenu(role='navigation')
sib-route(name='admin-circles')
li
a Circles
//- sib-route(name='admin-projects')
sib-route(name='admin-projects')
li
a Projects

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

@ -8,7 +8,7 @@ div.content-box__info
sib-widget(name='team-template-edit')
template
sib-display(
class='w50 cell border'
class='w50 cell border cell-with-id-card'
data-src='${await value.user}'
fields='account.picture, sup(name, groups), sub(profile.city)'
@ -64,7 +64,7 @@ div.content-box__info
h2 Members list
sib-ac-checker(permission='acl:Append', bind-resources, nested-field='team')
sib-ac-checker(permission='acl:Append', bind-resources, nested-field='members')
sib-form.block.team-form(
bind-resources
nested-field='members'

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

@ -25,10 +25,10 @@ sib-router(default-route='circle-profile', hidden)
sib-display.block(
bind-resources
fields='members'
fields='members.user'
multiple-members=''
widget-members='circle-team-template'
multiple-members.user=''
widget-members.user='circle-team-template'
)
div.box-button

30
src/page-project-create.pug
View File

@ -1,30 +0,0 @@
.content-box.with-padding.with-form.full-width
h1 New project
p Here you can create your project, add members and assign them a job.
sib-form.block(
data-src=`${endpoints.projects}`,
range-members=`${endpoints.users}`,
range-team=`${endpoints.users}`,
fields='block-project__info(customer.name, name, customer.logo, description), block-project__fee(fieldset-fee, businessProvider, businessProviderFee), block-project__customer(fieldset-customer, customer.companyRegister, customer.address, customer.firstName, customer.lastName, customer.role, customer.email, customer.phone)',
label-customer.name='Customer\'s name',
label-name='Project\'s name',
label-customer.logo='Customer\'s logo',
label-description='Project description',
widget-fieldset-fee='hd-template-project-title',
label-businessProvider='Business provider',
label-businessProviderFee='Amount of the contribution',
widget-fieldset-customer='hd-template-project-title',
label-customer.companyRegister='Company register',
label-customer.address='Address',
label-customer.firstName='Name of the contact at the customer\'s premises',
label-customer.lastName='Firstname of the contact at the customer\'s premises',
label-customer.role='Role within the company',
label-customer.email='Email',
label-customer.phone='Phone'
)

11
src/page-project-drive.pug
View File

@ -1,11 +0,0 @@
sib-widget(name='hd-drive')
template
iframe.drive.chat-view(
src='https://drive.google.com/embeddedfolderview?id=${value}'
)
.content-box.with-padding.full-width.chat-view
sib-display(
bind-resources=""
fields="driveID"
widget-driveID='hd-drive'
)

5
src/page-project.pug
View File

@ -19,8 +19,6 @@
include page-project-chat.pug
#project-information(hidden)
include page-project-profile.pug
#project-drive(hidden)
include page-project-drive.pug
dialog(id='project-contributions-help').modal
sib-link(next='project-profile')
@ -38,7 +36,4 @@ nav.jsRightMenu(role='navigation')
sib-route(name='project-information')
li
a Information
sib-route(name='project-drive', use-id)
li
a Drive
sib-route(name='project-contributions-help')

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

@ -6,7 +6,10 @@
color: $color-233-18-29;
font-weight: bold;
font-size: 2rem;
text-align: center;
&.centered {
text-align: center;
}
}
.fieldset {
@ -16,7 +19,8 @@
flex: 1 0 100%;
font-size: 1.8rem;
font-weight: 600;
padding-bottom: 1rem;
margin: 2.6rem 0 1.8rem;
padding-bottom: 0.8rem;
}
p.center {

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

@ -34,7 +34,8 @@ $breakpoints: (phone: 480px,
/* Quick fix. Will be removed later */
#admin-circles {
#admin-circles,
#admin-projects {
display: contents;
}
@ -75,6 +76,10 @@ h1, .h1-like {
color: $color-233-18-29;
font-size: 2rem;
text-transform: uppercase;
&.without-margin {
margin: 0;
}
}
h2, .h2-like {
@ -104,6 +109,21 @@ h5 {
padding: 3.2rem;
}
#admin-circle-create,
#admin-project-create {
input[type='submit'] {
@extend .button,
.text-bold,
.text-uppercase,
.reversed,
.button-dark,
.bordered;
margin-left: auto;
margin-top: 3.2rem;
}
}
.content-box {
@include window-style-modal();
display: flex;
@ -235,6 +255,7 @@ h5 {
@import 'compat';
// Other base components
@import 'form';
@import 'table';
@import 'header';
@import 'menu-left';

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

@ -92,50 +92,64 @@
.sub-menu {
sib-set-default[name='project'] {
padding: 1rem 1rem 1rem 3.2rem;
/* Specific styles for the "Projects" tab */
.project-customer,
.project-name {
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.project-customer {
font-weight: bold;
width: 150px;
}
.project-name {
padding-left: 14px;
width: calc(150px - 10px);
/* 10px = padding of the sib-set-default = better alignment */
}
}
.project-tab>div>sib-display[fields='project(customer.name, name), badge']>div:hover {
background-color: $color-233-20-17;
.project-tab>div>sib-display>div:nth-child(1) {
sib-set-default[name='project'] {
background-color: $color-233-20-17;
box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.26);
color: $color-218-100-98;
/* transition: all 0.6s cubic-bezier(0.39, 0.575, 0.565, 1); Need better animation */
width: auto;
z-index: 1000;
padding: 1rem 1rem 1rem 3.2rem;
.project-customer,
.project-name {
width: auto;
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.project-customer {
font-weight: bold;
width: 150px;
}
.project-name {
font-weight: normal;
padding-left: 14px;
width: calc(150px - 10px);
/* 10px = padding of the sib-set-default = better alignment */
}
}
hd-counter {
margin-top: 16px;
margin-left: 8px;
}
&:hover {
background-color: $color-233-20-17;
box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.26);
sib-set-default[name='project'] {
background-color: $color-233-20-17;
color: $color-218-100-98;
/* transition: all 0.6s cubic-bezier(0.39, 0.575, 0.565, 1); Need better animation */
z-index: 1000;
.project-customer,
.project-name {
width: auto;
}
.project-name {
font-weight: normal;
}
}
hd-counter {
display: none;
}
}
}
/* End of specific styles of "Projects" tab */
sib-display>div {

193
src/styles/base/table.scss Normal file
View File

@ -0,0 +1,193 @@
#circle-information,
#circle-edit,
#admin-circle-list,
#admin-circle-create,
#admin-project-list,
#admin-project-create {
.content-box__info {
@extend %padding-block;
display: flex;
flex-direction: column;
.backlink {
text-align: right;
display: block;
}
}
.table {
.table-header {
display: flex;
flex: 1;
font-size: 1.6rem;
font-weight: 600;
justify-content: space-around;
text-align: center;
&.grey-color {
background: $color-228-25-79;
color: white;
}
>* {
border-right: 1px solid white;
flex: 1;
padding: 2.1rem 0;
text-align: center;
}
>*:last-of-type {
border-right: 1px solid $color-228-25-79;
}
}
.table-body {
>div:first-of-type>sib-display>div,
team-template-edit[name='members'] {
display: flex;
border-left: 1px solid $color-228-25-79;
}
.border {
border-bottom: 1px solid $color-228-25-79;
border-right: 1px solid $color-228-25-79;
}
.cell {
text-align: center;
word-wrap: break-word;
}
.w25 {
width: 25%;
}
.w33 {
width: 33.3333%;
}
.w50 {
width: 50%;
}
.hashtag::before {
content: '#';
}
}
.cell-with-name {
color: $color-233-18-29;
font-weight: 600;
padding-top: 2.5rem;
}
.cell-with-id-card>div,
/* for the table in circle-edit */
.cell-with-id-card>sib-display>div,
project-captain[name='user']>sib-display>div {
/* for the captain's cell in project-admin */
display: grid;
grid-column-gap: 1.6rem;
grid-template-columns: 7vh auto;
grid-template-rows: repeat(2, 5.2vh);
padding: 0 2.2rem;
>[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='sup'] {
align-self: end;
display: flex;
grid-column: 2 / span 1;
grid-row: 1 / span 1;
margin-bottom: 0.50rem;
[name$='name'] {
color: #7A7F85;
font-weight: 600;
margin-right: 1rem;
}
sib-multiple>div {
display: flex;
[name='groups'] {
@extend %tag-role;
}
}
}
>[name='sub'] {
align-self: start;
grid-column: 2 / span 1;
grid-row: 2 / span 1;
margin-top: 0.50rem;
>[name$='username']:not(:empty) {
align-items: center;
display: flex;
&::before {
content: '@';
}
}
}
}
.cell-with-buttons {
align-items: center;
display: flex;
justify-content: center;
[name='button'] {
input[type='submit'] {
@extend .button,
.text-bold,
.text-uppercase,
.reversed,
.button-blue,
.bordered,
.btn-margin-left;
}
}
}
sib-ac-checker {
align-items: center;
display: flex;
justify-content: center;
}
}
}

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

@ -72,7 +72,7 @@
}
&[name*='circle'],
&[name^='project'] {
&[name*='project'] {
>li::before {
font-size: 4rem;
@ -102,6 +102,10 @@
&[name='admin-circles']>li {
@include ci('bubble-add');
}
&[name='admin-projects']>li {
@include ci('add');
}
}
}
}

1
src/styles/layout/circle/_index.scss
View File

@ -2,4 +2,3 @@
@import 'circle-profile';
@import 'circle-edit';
@import 'circle-admin';
@import 'admin-circle-create';

13
src/styles/layout/circle/admin-circle-create.scss
View File

@ -1,13 +0,0 @@
#admin-circle-create {
input[type='submit'] {
@extend .button,
.text-bold,
.text-uppercase,
.reversed,
.button-dark,
.bordered;
margin-left: auto;
margin-top: 3.2rem;
}
}

23
src/styles/layout/circle/circle.scss
View File

@ -1,7 +1,9 @@
#circle-information,
#circle-edit,
#admin-circle-list,
#admin-circle-create {
#admin-circle-create,
#admin-project-list,
#admin-project-create {
.content-box__info {
@extend %padding-block;
@ -59,6 +61,10 @@
word-wrap: break-word;
}
.w25 {
width: 25%;
}
.w33 {
width: 33.3333%;
}
@ -67,21 +73,20 @@
width: 50%;
}
[name="buttons"] {
@extend .border;
@extend .cell;
@extend .w33;
.hashtag::before {
content: '#';
}
}
.table-body>div>sib-display>div>sib-display-value[name='name'] {
.cell-with-name {
color: $color-233-18-29;
font-weight: 600;
padding-top: 2.5rem;
}
[name='members']>sib-display>div,
[name='owner']>sib-display>div {
.cell-with-id-card>div, /* for the table in circle-edit */
.cell-with-id-card>sib-display>div,
project-captain[name='user']>sib-display>div { /* for the captain's cell in project-admin */
display: grid;
grid-column-gap: 1.6rem;
grid-template-columns: 7vh auto;
@ -158,7 +163,7 @@
}
}
admin-circle-buttons[name='buttons'] {
.cell-with-buttons {
align-items: center;
display: flex;
justify-content: center;