ui(job-offer-create): #issue89 Job-offer-create

Add and style datafields.
Add a custom widget.
Add styles to sib-autocompletion.
Add back button.
fix bug in members and project-profile pages (displaying userinfos and members of a project).

src/dependencies.pug

@@ -33,6 +33,7 @@ link(rel='stylesheet', href='https://fonts.googleapis.com/css?family=Open+Sans:3
 //link(rel='import', href='/lib/sib-chat/sib-chat.html')
 
 //- cdn
+//- don't forget to change version in hd-widgets.js
 script(type="module" src="https://unpkg.com/@startinblox/core@0.5")
 script(type="module" src="https://unpkg.com/@startinblox/router@latest")
 script(type="module" src="https://unpkg.com/@startinblox/component-chat@0.1")

src/page-job-offer-create.pug

@@ -1,12 +1,27 @@
-//#job-offer-create
-div
-  h1 New job offer
+.frame-form
+  sib-link(next='job-offers' class='back') Back
+  h1 Post a new job offer
+  p.form-goal This form allows you to share an offer to all members of the network.
   .form-view
     sib-form.block(
       data-src=`${sdn}/job-offers/`,
-      data-fields='title, description, skills',
       range-skills= `${sdn}/skills/`,
       range-author= `${sdn}/users/`,
-      widget-skills='sib-form-multiple-dropdown'
+
+      data-fields='title, title-text, description, description-text, skills',
+
+      label-title='Title*',
+
+      value-title-text='Be clear and specific with the name of your offer. You can indicate which skill is important, the start date or the name of the client. Ex: "Looking for a plumber for planet Mars ASAP".',
+      widget-title-text='hdapp-form-text',
+
+      label-description='Description*',
+      
+      value-description-text='Be specific and exhaustive to avoid answering too many questions later. Indicate what is the best way to fill the offer, the prerequisites...',
+      widget-description-text='hdapp-form-text',
+      
+      label-skills='The required skills for this mission:*',
+      widget-skills='sib-form-auto-completion',
+      
       next="job-offers"
     )

src/page-project-create.pug

@@ -1,6 +1,6 @@
 .frame-form
   h1 New project
-  p Here you can create your project, add members and assign them a job.
+  p.form-goal Here you can create your project, add members and assign them a job.
   .form-view
     sib-form(
       data-src=`${sdn}/projects/`,
@@ -12,17 +12,17 @@
       set-block-team=`team, members`,
       set-block-fee=`businessProvider, businessProviderFee`,
       
-      'label-customer,name'='Business name',
+      label-customer.name='Business name',
       label-name='Project name',
       label-description='Project description',
-      'label-customer,logo'='Customer logo',
-      'label-customer,companyRegister'='Company register',
-      'label-customer,address'='Customer address',
-      'label-customer,firstName'='Contact firstname',
-      'label-customer,lastName'='Contact lastname',
-      'label-customer,role'='Contact role',
-      'label-customer,email'='Contact email',
-      'label-customer,phone'='Contact phone',
+      label-customer.logo='Customer logo',
+      label-customer.companyRegister='Company register',
+      label-customer.address='Customer address',
+      label-customer.firstName='Contact firstname',
+      label-customer.lastName='Contact lastname',
+      label-customer.role='Contact role',
+      label-customer.email='Contact email',
+      label-customer.phone='Contact phone',
       label-businessProvider='Business provider',
       label-businessProviderFee='Fee (%)',
       label-foaf:jabberID='Chatroom id',

src/page-project-edit.pug

@@ -1,8 +1,8 @@
 .frame-form
   h1 Edit your project
-  p Here you can edit your projet's details
+  p.form-goal Here you can edit your projet's details
   .form-view
-    sib-form(
+    sib-form.block(
       range-team=`${sdn}/users/`,
       range-members=`${sdn}/project-members/`,
 
@@ -10,17 +10,17 @@
       set-block-team=`team, members`,
       set-block-fee=`businessProvider, businessProviderFee`,
 
-      'label-customer,name'='Business name',
+      label-customer.name='Business name',
       label-name='Project name',
       label-description='Project description',
-      'label-customer,logo'='Customer logo',
-      'label-customer,companyRegister'='Company register',
-      'label-customer,address'='Customer address',
-      'label-customer,firstName'='Contact firstname',
-      'label-customer,lastName'='Contact lastname',
-      'label-customer,role'='Contact role',
-      'label-customer,email'='Contact email',
-      'label-customer,phone'='Contact phone',
+      label-customer.logo='Customer logo',
+      label-customer.companyRegister='Company register',
+      label-customer.address='Customer address',
+      label-customer.firstName='Contact firstname',
+      label-customer.lastName='Contact lastname',
+      label-customer.role='Contact role',
+      label-customer.email='Contact email',
+      label-customer.phone='Contact phone',
       label-businessProvider='Business provider',
       label-businessProviderFee='Fee (%)',
       label-foaf:jabberID='Chatroom id',

src/scripts/hd-widgets.js

@@ -1,4 +1,4 @@
-import {Helpers, SIBWidget, SIBDisplayLookupList, store} from 'https://unpkg.com/@startinblox/core@0.5.7';
+import {Helpers, SIBWidget, SIBDisplayLookupList, store} from 'https://unpkg.com/@startinblox/core@0.5';
 
 class HDAppUserInfo extends SIBDisplayLookupList {
   get parentElement() {
@@ -127,6 +127,16 @@ class HDAppLinkMore extends SIBWidget {
   }
 }
 
+class HDAppFormText extends SIBWidget {
+  get template() {
+    return `<p name="${this.name}">${this.value}</p>`;
+  }
+
+  render() {
+    this.innerHTML = this.template;
+  }
+}
+
 customElements.define('hdapp-userinfo', HDAppUserInfo);
 customElements.define('hdapp-mail', HDAppMail);
 customElements.define('hdapp-member', HDAppMember);
@@ -134,4 +144,5 @@ customElements.define('hdapp-author', HDAppAuthor);
 customElements.define('hdapp-closing-date', HDAppClosingDate);
 customElements.define('hdapp-available', HDAppAvailable);
 customElements.define('hdapp-hyperlink', HDAppHyperlink);
-customElements.define('hdapp-link-more', HDAppLinkMore);
+customElements.define('hdapp-link-more', HDAppLinkMore);
+customElements.define('hdapp-form-text', HDAppFormText);

src/styles/form.scss

@@ -1,4 +1,9 @@
 .frame-form {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  margin: 0 auto;
+  min-height: 100%;
   padding: 4em 5em 6em;
   @extend %frame;
   
@@ -8,6 +13,7 @@
   }
 }
 
+#job-offer-create,
 #project-create,
 #project-edit {
   font-size: 17px;
@@ -19,11 +25,16 @@
     text-align: center;
   }
 
-  p {
+  p.form-goal {
     margin-bottom: 4em;
     text-align: center;
   }
 
+  p[name$='-text'] {
+    font-size: 15px;
+    margin-bottom: 2em;
+  }
+
   div[name^='block-'] {
     display: flex;
     
@@ -32,6 +43,7 @@
     }
   }
   
+  sib-form-auto-completion,
   sib-form-checkbox,
   sib-form-label-text,
   sib-form-multiple-dropdown,
@@ -57,7 +69,6 @@
 
     input,
     textarea {
-      margin-bottom: 2em;
       padding: 1em;
     }
 
@@ -67,6 +78,40 @@
     }
   }
 
+  sib-form-auto-completion {
+
+    label {
+      color: $color-dark-lava;
+    }
+
+    div.choices__inner {
+      background-color: inherit;
+      border: none;
+      display: flex;
+      flex-direction: column-reverse;
+      padding-left: 0;
+
+      div.choices__list {
+        margin-top: 1em;
+
+        div.choices__item {
+          @extend %skill;
+
+          button.choices__button {
+            border-left: 1px solid $color-selective-yellow;
+            opacity: 1;
+            padding-left: 0;
+          }
+        }
+      }
+
+      input[type='text'].choices__input {
+        max-width: 16em;
+        min-width: 16em;
+      }
+    }
+  }
+
   sib-form-checkbox {
     flex-direction: row;
 
@@ -132,6 +177,15 @@
 
   input[type='submit'] {
     margin-top: 3.5em;
-    @extend %button-form;
+    @extend %submit-form;
+  }
+}
+
+#project-create,
+#project-edit {
+
+  input,
+  textarea {
+    margin-bottom: 2em;
   }
 }

src/styles/main.scss

@@ -201,9 +201,12 @@ sib-link {
 }
 
 sib-link.back {
+  color: $color-purple-dark;
   display: block;
-  @include icon('arrow-left');
-  @extend h1;
+  font-size: 20px;
+  font-weight: bold;
+  text-align: right;
+  @include icon('arrow-left-circle');
 }
 
 .containerH {
@@ -276,13 +279,7 @@ sib-display-lookuplist {
   }
 
   li[name*='skills'] {
-    padding: 0.3em 1.2em;
-    border: 1px solid;
-    border-radius: 2em;
-    margin: 0.25em;
-    background-color: $color-selective-yellow;
-    color: $color-white;
-    font-weight: bold;
+    @extend %skill;
   }
 }
 

src/styles/variables.scss

@@ -29,19 +29,7 @@ $color-majorelle-blue:   hsl(244, 73%, 62%);
   border: none;
   border-radius: 100em;
   font-weight: normal;
-}
-
-%button-form {
-  background-color: $color-purple-dark;
-  color: $color-white;
-  float: right;
-  font-weight: bold;
-  text-transform: uppercase;
-}
-
-%shadow {
-  box-shadow: 0 0 8px 0 hsla(212, 7%, 55%, 0.19);
-}
+}  
 
 %content-padding {
   padding: 2.6em;
@@ -50,6 +38,21 @@ $color-majorelle-blue:   hsl(244, 73%, 62%);
 %frame {
   @extend %shadow;
   background-color: $color-white;
+}  
+
+%shadow {
+  box-shadow: 0 0 8px 0 hsla(212, 7%, 55%, 0.19);
+}
+
+%skill {
+  background-color: $color-selective-yellow;
+  border: 1px solid $color-selective-yellow;
+  border-radius: 2em;
+  color: $color-white;
+  font-size: 16px;
+  font-weight: bold;
+  margin: 0.25em;
+  padding: 0.3em 1.2em;
 }
 
 %status-open {
@@ -62,6 +65,14 @@ $color-majorelle-blue:   hsl(244, 73%, 62%);
   padding: 0.5em 1em;
 }
 
+%submit-form {
+  background-color: $color-purple-dark;
+  color: $color-white;
+  float: right;
+  font-weight: bold;
+  text-transform: uppercase;
+} 
+
 $breakpoints: (
   phone: 480px,
   tablet: 768px,