Solves #145: add project captains to project page

src/page-project-profile.pug

@@ -3,9 +3,10 @@
   include templates/template-business-provider.pug
   include templates/template-customer.pug
   include templates/template-team.pug
+  include templates/template-captain.pug
 
   sib-display(
-    fields='block-title(const-title1, number, customer.name, const-title2, name, entitled, creationDate), infos(block-description(label-description, description), block-logo(customer.logo)), block-lead, block-fee(label-fee, businessProvider), block-customer(label-customer, customer), block-team(label-team, members)',
+    fields='block-title(const-title1, number, customer.name, const-title2, name, entitled, creationDate), infos(block-description(label-description, description), block-logo(customer.logo)), block-lead, block-fee(label-fee, businessProvider), block-customer(label-customer, customer), block-captain(label-captain, captain), block-team(label-team, members)',
     
     value-const-title1='N°',
     value-const-title2='-',
@@ -20,10 +21,12 @@
     value-label-customer='CUSTOMER INFORMATIONS:',
     widget-customer='customer-template',
 
+    value-label-captain='CAPTAIN:',
+    widget-captain='captain-template',
+
     value-label-team='TEAM:',
     widget-members='team-template',
-    multiple-members='',
+    multiple-members,
 
     bind-resources
   )
-

src/styles/layout/project-profile/project-profile.scss

@@ -98,9 +98,7 @@
 
   #clientBox {
     display: flex;
-    margin-left: auto;
+    margin: 1.7rem auto;
-    margin-right: auto;
-    margin-top: 1.7rem;
     max-width: 100%;
 
     >* {
@@ -166,75 +164,80 @@
     }
   }
 
-  [name='block-team'] {
+  [name='block-team'], [name='block-captain'] {
+    label {
+      display: none;
+    }
 
-    >sib-multiple {
+    sib-display.project-profile-user-avatar {
+      align-self: center;
+      grid-column: 1 / span 1;
+      grid-row: 1 / span 2;
 
-      label {
+      div {
-        display: none;
+        background-color: $color-0-0-100;
+        border-radius: 50%;
+        height: 7vh;
+        overflow: hidden;
+        position: relative;
+        width: 7vh;
+
+        img {
+          height: 100%;
+          left: 0;
+          object-fit: cover;
+          position: absolute;
+          top: 0;
+          width: 100%;
+        }
+      }
+    }
+
+    team-template[name='members'], captain-template[name='captain'] {
+      display: grid;
+      grid-column-gap: 1.6rem;
+      grid-template-columns: 7vh auto;
+      grid-template-rows: repeat(2, 5.2vh);
+
+
+      > div:nth-child(2) {
+        align-self: end;
+        display: flex;
+        grid-column: 2 / span 1;
+        grid-row: 1 / span 1;
+
+        span {
+          align-self: center;
+          font-weight: 600;
+        }
+
+        span ~ sib-display {
+
+          > div {
+            display: flex;
+            margin-left: 1rem;
+
+            sib-multiple [name='name'] {
+              @extend %user-role;
+            }
+          }
+        }
       }
 
-      >team-template[name='members'] {
+      > span:nth-child(3) {
-        display: grid;
+        align-self: start;
-        grid-column-gap: 1.6rem;
+        grid-column: 2 / span 1;
-        grid-template-columns: 7vh auto;
+        grid-row: 2 / span 1;
-        grid-template-rows: repeat(2, 5.2vh);
-
-        >sib-display:first-child {
-          align-self: center;
-          grid-column: 1 / span 1;
-          grid-row: 1 / span 2;
-
-          div {
-            background-color: $color-0-0-100;
-            border-radius: 50%;
-            height: 7vh;
-            overflow: hidden;
-            position: relative;
-            width: 7vh;
-
-            img {
-              height: 100%;
-              left: 0;
-              object-fit: cover;
-              position: absolute;
-              top: 0;
-              width: 100%;
-            }
-          }
-        }
-
-        >div:nth-child(2) {
-          align-self: end;
-          display: flex;
-          grid-column: 2 / span 1;
-          grid-row: 1 / span 1;
-
-          span {
-            align-self: center;
-            font-weight: 600;
-          }
-
-          span~sib-display {
-
-            >div {
-              display: flex;
-              margin-left: 1rem;
-
-              sib-multiple [name='name'] {
-                @extend %user-role;
-              }
-            }
-          }
-        }
-
-        >span:nth-child(3) {
-          align-self: start;
-          grid-column: 2 / span 1;
-          grid-row: 2 / span 1;
-        }
       }
     }
   }
 
+  .project-profile-user-avatar {
+    display: inline;
+
+    * {
+      height: 100%;
+      width: 100%;
+    }
+  }
 }

src/templates/template-captain.pug

@@ -0,0 +1,23 @@
+include hd-user-avatar.pug
+
+sib-widget(name='captain-template')
+  template
+    sib-display.project-profile-user-avatar(
+      data-src="${value ? value['@id'] : ''}"
+      fields='account.picture',
+      widget-account.picture='hd-user-avatar'
+    )
+    div(name='user.thumb')
+      sib-display(
+        data-src="${value ? value['@id'] : ''}"
+        fields='name'
+      )
+      sib-display(
+        data-src="${value ? value['@id'] : ''}",
+        fields='name'
+        nested-field="groups"
+      )
+    sib-display(
+      data-src="${value ? value['@id'] : ''}"
+      fields='username'
+    )

src/templates/template-team.pug

@@ -2,16 +2,22 @@ include hd-user-avatar.pug
 
 sib-widget(name='team-template')
   template
-    sib-display(
+    sib-display.project-profile-user-avatar(
-      data-src="${value.user['@id']}"
+      data-src="${value.user ? value.user['@id'] : ''}"
       fields='account.picture',
       widget-account.picture='hd-user-avatar'
     )
     div(name='user.thumb')
-      span ${value.user.name}
       sib-display(
-        data-src="${value.user.groups['@id']}",
+        data-src="${value.user ? value.user['@id'] : ''}"
-        fields='name',
+        fields='name'
-        multiple-name
       )
-    span ${value.name}
+      sib-display(
+        data-src="${value.user ? value.user['@id'] : ''}",
+        fields='name'
+        nested-field="groups"
+      )
+    sib-display(
+      data-src="${value.user ? value.user['@id'] : ''}"
+      fields='username'
+    )