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,21 +164,12 @@
     }
   }
 
-  [name='block-team'] {
+  [name='block-team'], [name='block-captain'] {
-
-    >sib-multiple {
-
     label {
       display: none;
     }
 
-      >team-template[name='members'] {
+    sib-display.project-profile-user-avatar {
-        display: grid;
-        grid-column-gap: 1.6rem;
-        grid-template-columns: 7vh auto;
-        grid-template-rows: repeat(2, 5.2vh);
-
-        >sib-display:first-child {
       align-self: center;
       grid-column: 1 / span 1;
       grid-row: 1 / span 2;
@@ -204,7 +193,14 @@
       }
     }
 
-        >div:nth-child(2) {
+    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;
@@ -215,9 +211,9 @@
           font-weight: 600;
         }
 
-          span~sib-display {
+        span ~ sib-display {
 
-            >div {
+          > div {
             display: flex;
             margin-left: 1rem;
 
@@ -228,13 +224,20 @@
         }
       }
 
-        >span:nth-child(3) {
+      > 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
+      )
+      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'
     )
-    span ${value.name}