Merge branch 'project-admin' into 'staging'

Project admin listing & project creation

See merge request startinblox/applications/sib-app!88

src/dependencies.pug

@@ -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"
     | }

src/menu-left.pug

@@ -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.divider
-    div.menu-wrapper
+    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')

src/page-admin-circles-create.pug

@@ -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.
 

src/page-admin-circles.pug

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

src/page-admin-projects-create.pug

@@ -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'
+  )

src/page-admin-projects.pug

@@ -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
 
-  #admin-project-create(hidden)
+      .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

src/page-admin.pug

@@ -1,10 +1,10 @@
 .views-container
   #admin-circles(hidden)
     include page-admin-circles.pug
-//-   #admin-users(hidden)
+  #admin-projects(hidden)
-//-     include page-admin-users.pug
+    include page-admin-projects.pug
-//-   #admin-projects(hidden)
+  //- #admin-users(hidden)
-//-     include page-admin-projects.pug
+    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

src/page-circle-edit.pug

@@ -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'

src/page-circle-profile.pug

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

src/page-project-create.pug

@@ -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'
-  )
-    

src/page-project-drive.pug

@@ -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'
-    )

src/page-project.pug

@@ -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)
+      sib-route(name='project-contributions-help')
-        li 
-          a Drive
-      sib-route(name='project-contributions-help')

src/styles/base/form.scss

@@ -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 {

src/styles/base/main.scss

@@ -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';
 

src/styles/base/menu-left.scss

@@ -92,50 +92,64 @@
 
     .sub-menu {
 
-      sib-set-default[name='project'] {
+      /* Specific styles for the "Projects" tab */
-        padding: 1rem 1rem 1rem 3.2rem;
 
-        .project-customer,
+      .project-tab>div>sib-display>div:nth-child(1) {
-        .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;
 
         sib-set-default[name='project'] {
-          background-color: $color-233-20-17;
+          padding: 1rem 1rem 1rem 3.2rem;
-          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;
 
           .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 {
 

src/styles/base/table.scss

@@ -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;
+    }
+  }
+}

src/styles/components/sidebar.scss

@@ -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');
+          }
         }
       }
     }

src/styles/layout/circle/_index.scss

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

src/styles/layout/circle/admin-circle-create.scss

@@ -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;
-  }
-}

src/styles/layout/circle/circle.scss

@@ -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%;
       }
@@ -66,22 +72,21 @@
       .w50 {
         width: 50%;
       }
-      
+
-      [name="buttons"] {
+      .hashtag::before {
-        @extend .border;
+        content: '#';
-        @extend .cell;
-        @extend .w33;
       }
     }
 
-    .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,
+    .cell-with-id-card>div, /* for the table in circle-edit */
-    [name='owner']>sib-display>div {
+    .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;