diff --git a/src/dependencies.pug b/src/dependencies.pug
index ec43d249cc956232e46a2b7663431095588bc0cc..4f7189af600192ef9eed33a93066a0fbc46c2444 100644
--- a/src/dependencies.pug
+++ b/src/dependencies.pug
@@ -43,7 +43,5 @@ script(data-default-context, type="application/ld+json")
| "account": "http://happy-dev.fr/owl/#account",
| "jabberID": "foaf:jabberID",
| "picture": "foaf:depiction",
- | "firstName": "http://happy-dev.fr/owl/#first_name",
- | "lastName": "http://happy-dev.fr/owl/#last_name",
| "isAdmin": "http://happy-dev.fr/owl/#is_admin"
| }
diff --git a/src/header.pug b/src/header.pug
index ef567557d4f758673a2db9985ca6ea714a790219..83e9cfb0564bf87782b2cd2e0d5543181aa861f0 100644
--- a/src/header.pug
+++ b/src/header.pug
@@ -17,7 +17,7 @@ include templates/hd-user-avatar.pug
details#user-controls.notLoggedIn
summary(tabindex='0' role='button')
sib-display#user-controls__profile(
- fields='firstName, account.picture'
+ fields='first_name, account.picture'
widget-account.picture='hd-user-avatar'
bind-user
)
diff --git a/src/page-project.pug b/src/page-project.pug
index ffb9269ecbd352e126026ed7622ca787e1d3e141..9600c9e4549bf8c3ba589ce94a6e45ac05e4490f 100644
--- a/src/page-project.pug
+++ b/src/page-project.pug
@@ -23,10 +23,98 @@
#project-information(hidden)
include views/project/page-project-profile.pug
-dialog(id='project-contributions-help').modal
- sib-link(next='project-profile')
- button.icon-close
- img(src='/images/contributions-help.png')
+dialog(id='project-contributions-help').modal.center
+ div.inside
+ sib-link(next='project-profile')
+ button.icon-close
+ img(src='/images/contributions-help.png')
+
+//- NOTE: this form has been duplicated for each parent form it's navigated to, from
+//- workaround for https://git.happy-dev.fr/startinblox/framework/sib-core/issues/587
+
+//- Modales for create- and edit-customer forms
+sib-widget(name='hd-fieldset-title')
+ template
+ label ${label}
+
+dialog(id='customer-create-project-edit').modal.left.with-form
+ div.inside
+ sib-link(next='project-edit')
+ button.icon-close
+ h1.centered Create Customer
+ sib-form.block(
+ class='customer-form-project-edit'
+ data-src=`${endpoints.customers}`
+
+ fields='row1(name, companyRegister, logo, address), fieldset-contact, row2(firstName, lastName, role, email, phone)'
+
+ class-name='form-label is-light is-half-width is-left'
+ class-companyRegister='form-label is-light is-half-width is-right'
+ class-logo='form-label is-light is-full-width is-left'
+ class-address='form-label is-light is-full-width is-right'
+ class-fieldset-contact='fieldset'
+ class-firstName='form-label is-light is-half-width is-left'
+ class-lastName='form-label is-light is-half-width is-right'
+ class-role='form-label is-light is-half-width is-left'
+ class-email='form-label is-light is-half-width is-right'
+ class-phone='form-label is-light is-half-width is-left'
+
+ label-name='Name*'
+ label-companyRegister='Company register'
+ label-logo='Logo'
+ label-address='Address'
+ label-fieldset-contact='Contact within the company'
+ label-firstName='Firstname'
+ label-lastName='Surname'
+ label-role='Role within the company'
+ label-email='Email'
+ label-phone='Phone'
+
+ widget-address='sib-form-textarea'
+ widget-fieldset-contact='hd-fieldset-title'
+ )
+
+dialog(id='customer-edit').modal.left.with-form
+ div.inside
+ sib-link(next='project-edit')
+ button.icon-close
+ h1.centered Edit Customer
+ sib-form.block(
+ class='customer-form-project-edit'
+ bind-resources
+ nested-field='customer'
+
+ fields='debug, row1(name, companyRegister, logo, address), fieldset-contact, row2(firstName, lastName, role, email, phone)'
+
+ class-name='form-label is-light is-half-width is-left'
+ class-companyRegister='form-label is-light is-half-width is-right'
+ class-logo='form-label is-light is-full-width is-left'
+ class-address='form-label is-light is-full-width is-right'
+ class-fieldset-contact='fieldset'
+ class-firstName='form-label is-light is-half-width is-left'
+ class-lastName='form-label is-light is-half-width is-right'
+ class-role='form-label is-light is-half-width is-left'
+ class-email='form-label is-light is-half-width is-right'
+ class-phone='form-label is-light is-half-width is-left'
+
+ label-name='Name*'
+ label-companyRegister='Company register'
+ label-logo='Logo'
+ label-address='Address'
+ label-fieldset-contact='Contact within the company'
+ label-firstName='Firstname'
+ label-lastName='Surname'
+ label-role='Role within the company'
+ label-email='Email'
+ label-phone='Phone'
+
+ widget-debug='hd-debug'
+ widget-address='sib-form-textarea'
+ widget-fieldset-contact='hd-fieldset-title'
+
+ submit-button='Save'
+ )
+//- End of modales
nav.jsRightMenu(role='navigation')
sib-router(default-route='project-chat')
@@ -39,4 +127,6 @@ nav.jsRightMenu(role='navigation')
sib-route(name='project-information')
li
a Information
- sib-route(name='project-contributions-help')
\ No newline at end of file
+ sib-route(name='customer-create-project-edit')
+ sib-route(name='customer-edit')
+ sib-route(name='project-contributions-help')
diff --git a/src/scripts/index.js b/src/scripts/index.js
index 9bd9d141ce7fba47a03ae3b5b8d4a4fa879d194e..0fe3baef0c090c9880c05b8ca23d4dc0aa637171 100644
--- a/src/scripts/index.js
+++ b/src/scripts/index.js
@@ -76,10 +76,10 @@ function openRightMenu() {
}
//auxiliary function clears cache & refreshes sib-displays for a given resource ID
-function refreshSibDisplays(resourceId, clearCache = true) {
+function refreshElements(resourceId, clearCache = true, selector="sib-display") {
let cacheCleared = false;
- Array.from(document.querySelectorAll("sib-display"))
+ Array.from(document.querySelectorAll(selector))
.filter(sibDisplay => sibDisplay.component.resourceId == resourceId) // keep only elements with resource == edited resource
.forEach(e => {
//clear cache if we were unable to before
@@ -98,9 +98,9 @@ async function refreshResource(event) {
// if of the edited resource || id of the container of the created resource
const resourceId = event.detail.resource["@id"] || event.target.dataset.src;
- let resource = document
- .querySelector('[data-src="' + resourceId + '"]')
- .component.resource.getResourceData();
+ let dataUser = document.querySelector('[data-src="' + resourceId + '"]');
+ if(!dataUser || !dataUser.component || !dataUser.component.resource) return;
+ let resource = dataUser.component.resource.getResourceData();
//special case: refresh circles/X/ from circle-members/Y/
let partnerId = null;
@@ -111,16 +111,22 @@ async function refreshResource(event) {
//refresh all resources using the partner ID
if (partnerId != null) {
- refreshSibDisplays(partnerId);
- refreshSibDisplays(partnerId + "members/");
+ refreshElements(partnerId);
+ refreshElements(partnerId + "members/");
}
//special cases updating users/X/circles for the left-side-menu (leaving or joining circle)
let user = await document.querySelector('sib-auth').getUser();
- if(resourceId.includes('circle') && user != null) {
+ if(user != null) {
let userId = user['@id'];
- refreshSibDisplays(userId + "circles/");
- refreshSibDisplays(resourceId.split('/').slice(0,4).join('/')+'/joinable/');
+ if(resourceId.includes('circle')) {
+ refreshElements(userId + "circles/");
+ refreshElements(resourceId.split('/').slice(0,4).join('/')+'/joinable/');
+ }
+ else if(resourceId.includes('project')) {
+ refreshElements(userId + "projects/");
+ refreshElements(resourceId.split('/').slice(0,4).join('/')+'/joinable/');
+ }
}
//clear cache on this resource
@@ -132,7 +138,7 @@ async function refreshResource(event) {
}
//update all displays which use this resource
- refreshSibDisplays(resourceId, cacheCleared);
+ refreshElements(resourceId, cacheCleared);
}
//auxiliary function performs a redirect
@@ -198,6 +204,69 @@ async function updateBadges(element) {
badge.style.display = notifNumber ? 'block' : 'none';
}
})
+//auxiliary function to handle a save on a child form
+//redirect to parent form and update necessary displays
+//parentFormSelector is the JavaScript selector to obtain the parent form
+//fieldName is the field which the child form updated (must be a <select>)
+//saveParentForm indicates whether the parent form should be saved as well
+function handleChildFormSave(event, redirectRoute, parentFormSelector, fieldName, saveParentForm=false) {
+ performRedirect(redirectRoute);
+
+ //fetch the child field and its parent form
+ let parentForm = document.querySelector(parentFormSelector);
+ let childFieldSelect = parentForm.querySelector('[name="' + fieldName + '"]').querySelector("select");
+
+ const resourceId = '{"@id": "' + event.detail.id + '"}';
+ let oldValue = childFieldSelect.value;
+
+ //customer creation
+ if(!oldValue.includes(event.detail.id)) {
+ //append the newly created id to the list of options
+ let option = document.createElement("option");
+ option.text = event.detail.resource['name'];
+ option.value = resourceId;
+ childFieldSelect.appendChild(option);
+
+ //select the new child
+ option.selected = true;
+ childFieldSelect.value = resourceId;
+
+ //may need to trigger a save on this form to update the existing resource's link
+ if(saveParentForm) document.querySelector(parentFormSelector + ' [type="submit"]').click();
+ }
+ else {
+ //update the existing customer option to display the correct name
+ let option = childFieldSelect.querySelector('option:checked');
+ option.text = event.detail.resource['name'];
+
+ //update sib-displays using the value
+ let parentData = parentForm.component.resource.getResourceData();
+ let parentId = parentData['@id'];
+
+ refreshElements(event.detail.id);
+ refreshElements(parentId, false); //no need to clear the cache on parent, just reset it
+
+ //re-render the selects which contain child
+ //NOTE: this step is required because sib-form-auto-completion doesn't refresh on cache change
+ //https://git.happy-dev.fr/startinblox/framework/sib-core/issues/524
+ //this will need to be carried out once new child data has been provided
+ let renderUpdate = (event) => {
+ Array.from(document.querySelectorAll('sib-form-auto-completion'))
+ .forEach((e) => {
+ e.render();
+ });
+ childDisplay.removeEventListener('populate', renderUpdate, false);
+ };
+
+ //get a sib-display which displays this source, or as a nested field
+ let childDisplay = document.querySelector(`[data-src="${event.detail.id}"]`);
+ if(childDisplay == null) {
+ childDisplay = document.querySelector(`[data-src="${parentId}"] [nested-field="${fieldName}"]`);
+ }
+ if(childDisplay == null) return;
+
+ childDisplay.addEventListener('populate', renderUpdate, false);
+ }
}
document.addEventListener("DOMContentLoaded", function(event) {
@@ -345,6 +414,19 @@ document.addEventListener("DOMContentLoaded", function(event) {
const badge = document.querySelector(`sib-fix-badge[data-src="${event.detail.resource['@id']}"]`);
if (badge) badge.style.display = "none";
}
+ //listen for save on customer-create or customer edit, and redirect to project-edit
+ //NOTE: the forms are duplicated based on source. Workaround for https://git.happy-dev.fr/startinblox/framework/sib-core/issues/587
+ Array.from(document.querySelectorAll('.customer-form-project-edit'))
+ .forEach((e) => {
+ e.addEventListener("save", (event) => {
+ handleChildFormSave(event, 'project-edit', '#project-edit-form', 'customer', true);
+ });
+ });
+ Array.from(document.querySelectorAll('.customer-form-project-create'))
+ .forEach((e) => {
+ e.addEventListener("save", (event) => {
+ handleChildFormSave(event, 'admin-project-create', '#project-create-form', 'customer', false);
+ });
});
});
diff --git a/src/styles/base/form.scss b/src/styles/base/form.scss
index 388f1978e6fcc7272c64f791d630beb7a708a706..b53363875495fcd57097510a3e62c2d031a2fb04 100644
--- a/src/styles/base/form.scss
+++ b/src/styles/base/form.scss
@@ -1,407 +1,444 @@
-.content-box {
+.with-form {
- &.with-form {
+ h1 {
+ color: $color-233-18-29;
+ font-weight: bold;
+ font-size: 2rem;
- h1 {
- color: $color-233-18-29;
- font-weight: bold;
- font-size: 2rem;
-
- &.centered {
- text-align: center;
- }
+ &.centered {
+ text-align: center;
}
+ }
+
+ .fieldset {
+ border-bottom: 1px solid $color-221-51-90;
+ color: $color-233-18-29;
+ display: flex;
+ flex: 1 0 100%;
+ font-size: 1.8rem;
+ font-weight: 600;
+ margin: 2.6rem 0 1.8rem;
+ padding-bottom: 0.8rem;
+ }
+
+ p.center {
+ margin: 0;
+ text-align: center;
+ }
+
+ [name$='-text'] {
+ font-size: 1.5rem;
+ margin-bottom: 2rem;
+ }
+
+ [name^='block-'] {
+ margin-bottom: 2.75rem;
+ }
+
+ [name^='line'] {
+ width: 100%;
+ }
+
+ [name^='row'] {
+ margin-bottom: 1.5rem;
+ width: 100%;
+ }
+
+ form {
+ display: flex;
+ flex-direction: column;
+ }
+
+ sib-set-default {
+ clear: both;
+ display: flex!important;
+ flex-wrap: wrap;
+ max-width: 100%;
- .fieldset {
- border-bottom: 1px solid $color-221-51-90;
- color: $color-233-18-29;
- display: flex;
- flex: 1 0 100%;
- font-size: 1.8rem;
- font-weight: 600;
- margin: 2.6rem 0 1.8rem;
- padding-bottom: 0.8rem;
+ sib-form-label-text {
+ float: left;
+ width: 50%;
}
+ }
- p.center {
- margin: 0;
- text-align: center;
- }
+ label {
+ display: flex;
+ flex-direction: column;
- [name$='-text'] {
- font-size: 1.5rem;
- margin-bottom: 2rem;
+ input:not([type='file']),
+ textarea {
+ -webkit-tap-highlight-color: $color-244-73-62;
+ background-color: $color-222-57-95;
+ box-sizing: border-box;
+ border: 2px solid $color-222-57-95;
+ color: $color-233-18-29;
+ /*flex: 1 1 0; Problem on Firefox for input type date*/
+ line-height: 1;
+ min-width: 0;
+ padding: 1rem;
}
- [name^='block-'] {
- margin-bottom: 2.75rem;
- }
+ input:not([type="search"]):not([type="file"]),
+ textarea {
+ border: 2px solid $color-222-57-95;
- form {
- display: flex;
- flex-direction: column;
+ &:focus,
+ &:active {
+ border-bottom: 2px solid $color-244-73-62;
+ }
}
- sib-set-default {
- clear: both;
- display: flex!important;
- flex-wrap: wrap;
- max-width: 100%;
-
- sib-form-label-text {
- float: left;
- width: 50%;
- }
- }
+ textarea {
+ height: 100px;
+ }
+ }
- label {
- display: flex;
- flex-direction: column;
+ sib-form[set-user-id-select] {
- input:not([type='file']),
- textarea {
- -webkit-tap-highlight-color: $color-244-73-62;
- background-color: $color-222-57-95;
- box-sizing: border-box;
- border: 2px solid $color-222-57-95;
- color: $color-233-18-29;
- /*flex: 1 1 0; Problem on Firefox for input type date*/
- line-height: 1;
- min-width: 0;
- padding: 1rem;
- }
+ input[type="submit"] {
+ margin-left: 0;
+ margin-top: 0;
+ }
- input:not([type="search"]):not([type="file"]),
- textarea {
- border: 2px solid $color-222-57-95;
+ select {
+ display: none;
+ }
+ }
- &:focus,
- &:active {
- border-bottom: 2px solid $color-244-73-62;
- }
+ //- Styles for the buttons to add or edit the client of a project.
+ [name='customer-buttons'] {
+ margin-top: auto;
+ padding-bottom: 0.8rem;
+
+ .add-related,
+ customer-edit-link {
+ @extend
+ .button,
+ .btn-margin-left,
+ .text-bold,
+ .text-uppercase,
+ .button-blue,
+ .bordered;
+
+ sib-link::before,
+ a::before {
+ margin-right: 1rem;
}
+ }
- textarea {
- height: 100px;
- }
+ .add-related>sib-link {
+ @include icon('plus');
}
+
+ customer-edit-link a {
+ @include icon('pencil');
+ }
+ }
+ //- End
- sib-form[set-user-id-select] {
- input[type="submit"] {
- margin-left: 0;
- margin-top: 0;
- }
+ /* CLASSES Peut-être à sortir de .content-box */
- select {
- display: none;
- }
- }
+ .block.select-add-member>form { /* circle-profile */
+ display: flex;
+ flex-direction: row;
+ margin-bottom: 2.6rem;
- /* CLASSES Peut-être à sortir de .content-box */
+ label {
+ margin-top: 0;
- .block.select-add-member>form { /* circle-profile */
- display: flex;
- flex-direction: row;
- margin-bottom: 2.6rem;
-
- label {
- margin-top: 0;
-
- >.ss-main {
- font-weight: normal;
- min-width: 35vw;
- text-transform: none;
-
- >.ss-single-selected {
- align-items: center;
- background-color: #ebeffa;
- border: none;
- border-radius: 0px;
- display: flex;
- justify-content: flex-end;
- min-height: 4.2rem;
- padding-left: 1.2rem;
-
- .ss-arrow {
- font-size: 1.8rem;
- margin: 0 18px 0 0;
-
- span {
- border: solid $color-244-73-62;
- border-width: 0 2px 2px 0;
- }
+ >.ss-main {
+ font-weight: normal;
+ min-width: 35vw;
+ text-transform: none;
+
+ >.ss-single-selected {
+ align-items: center;
+ background-color: #ebeffa;
+ border: none;
+ border-radius: 0px;
+ display: flex;
+ justify-content: flex-end;
+ min-height: 4.2rem;
+ padding-left: 1.2rem;
+
+ .ss-arrow {
+ font-size: 1.8rem;
+ margin: 0 18px 0 0;
+
+ span {
+ border: solid $color-244-73-62;
+ border-width: 0 2px 2px 0;
}
}
}
}
+ }
- >input[type='submit'] {
- @extend
- .button,
- .btn-margin-left,
- .text-bold,
- .text-uppercase,
- .button-blue,
- .bordered;
- margin-top: auto;
- margin-bottom: auto;
- }
+ >input[type='submit'] {
+ @extend
+ .button,
+ .btn-margin-left,
+ .text-bold,
+ .text-uppercase,
+ .button-blue,
+ .bordered;
+ margin-top: auto;
+ margin-bottom: auto;
}
+ }
+
+ .form-container>form {
+ margin-top: 2.7rem;
+ }
+
- .form-container>form {
- margin-top: 2.7rem;
+
+ form {
+
+ input[type='submit'] {
+ @extend .button,
+ .text-bold,
+ .text-uppercase,
+ .reversed,
+ .button-dark,
+ .bordered;
+ margin-left: auto;
+ margin-top: 3.2rem;
}
-
- .form-edit {
-
- >form {
-
- input[type='submit'] {
- @extend .button,
- .text-bold,
- .text-uppercase,
- .reversed,
- .button-dark,
- .bordered;
- margin-left: auto;
- margin-top: 3.2rem;
- }
+ }
+
+ .form-label {
+ /*flex: 1 1 auto;*/
+ font-weight: 600;
+
+ &.is-dark label {
+ color: $color-216-4-22;
+ margin-top: 3rem;
+
+ &>*:nth-child(2) {
+ margin-top: 0.8rem;
}
}
- .form-label {
- /*flex: 1 1 auto;*/
- font-weight: 600;
+ &.is-light label {
+ color: $color-244-10-70;
+ margin-top: 1.8rem;
+ text-transform: uppercase;
- &.is-dark label {
- color: $color-216-4-22;
- margin-top: 3rem;
+ &>*:nth-child(2) {
+ margin-top: 0.8rem;
+ }
+ }
+ }
- &>*:nth-child(2) {
- margin-top: 0.8rem;
- }
- }
+ .is-full-width {
+ flex: 1 1 100%;
+ }
- &.is-light label {
- color: $color-244-10-70;
- margin-top: 1.8rem;
- text-transform: uppercase;
+ .is-half-width {
+ box-sizing: border-box;
+ flex: 0 0 50%;
- &>*:nth-child(2) {
- margin-top: 0.8rem;
- }
- }
- }
+ &.is-right {
+ padding-left: 1.7rem;
+ }
- .is-full-width {
- flex: 1 1 100%;
- }
+ &.is-left {
+ padding-right: 1.7rem;
+ }
+ }
- .is-half-width {
- box-sizing: border-box;
- flex: 0 0 50%;
+ /* WIDGETS SIB */
- &:nth-child(even) {
- padding-left: 1.7rem;
- }
+ sib-form-auto-completion.member-select {
+ align-self: flex-end;
- &:nth-child(odd) {
- padding-right: 1.7rem;
- }
- }
+ >label:first-of-type>div {
+ font-weight: 600;
+ }
- /* WIDGETS SIB */
+ .ss-single-selected {
+ background-color: $color-222-57-95;
+ border: none;
+ border-radius: 0px;
+ display: flex;
+ font-weight: normal;
+ margin-top: 0.8rem;
+ min-height: 4.4rem;
+ padding-left: 1rem;
+ text-transform: none;
+
+ .ss-arrow span {
+ border: solid $color-244-73-62;
+ border-width: 0 2px 2px 0;
+ }
+ }
- sib-form-auto-completion.member-select {
- align-self: flex-end;
+ .ss-content .ss-list .ss-option {
+ font-weight: normal;
+ text-transform: none;
+ }
+ }
- >label:first-of-type>div {
- font-weight: 600;
+ sib-form-date {
+ input[type="date"] {
+ background-image: url("/images/calendar.svg");
+ background-position: right 12px top 50%;
+ background-repeat: no-repeat;
+ background-size: 1.4rem;
+ color: $color-213-4-50;
+ cursor: default;
+ font-size: 1.4rem;
+ margin-top: 1.6rem;
+ max-width: 50vw;
+ padding-right: 3rem; /* Needed to replace the close icon in FF when you are selecting a date */
+ padding-top: 1.2rem; /* Needed to center the close icon in FF when you are selecting a date */
+ position: relative;
+
+ &::-webkit-calendar-picker-indicator {
+ cursor: pointer;
+ opacity: 0;
+ position: absolute;
+ right: 8px;
}
- .ss-single-selected {
- background-color: $color-222-57-95;
- border: none;
- border-radius: 0px;
- display: flex;
- font-weight: normal;
- margin-top: 0.8rem;
- min-height: 4.4rem;
- padding-left: 1rem;
- text-transform: none;
-
- .ss-arrow span {
- border: solid $color-244-73-62;
- border-width: 0 2px 2px 0;
- }
+ &::-webkit-clear-button {
+ cursor: pointer;
+ margin-bottom: 5px; /* Needed to compensate padding-top: 1.2rem; for the close icon in FF */
+ margin-right: 5px;
}
- .ss-content .ss-list .ss-option {
- font-weight: normal;
- text-transform: none;
+ &::-webkit-inner-spin-button {
+ display: none;
}
}
+ }
- sib-form-date {
- input[type="date"] {
- background-image: url("/images/calendar.svg");
- background-position: right 12px top 50%;
- background-repeat: no-repeat;
- background-size: 1.4rem;
- color: $color-213-4-50;
- cursor: default;
- font-size: 1.4rem;
- margin-top: 1.6rem;
- max-width: 50vw;
- padding-right: 3rem; /* Needed to replace the close icon in FF when you are selecting a date */
- padding-top: 1.2rem; /* Needed to center the close icon in FF when you are selecting a date */
- position: relative;
-
- &::-webkit-calendar-picker-indicator {
- cursor: pointer;
- opacity: 0;
- position: absolute;
- right: 8px;
- }
+ sib-form-file {
- &::-webkit-clear-button {
- cursor: pointer;
- margin-bottom: 5px; /* Needed to compensate padding-top: 1.2rem; for the close icon in FF */
- margin-right: 5px;
- }
+ label {
+ align-items: baseline;
+ clear: both;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ max-width: 100%;
- &::-webkit-inner-spin-button {
- display: none;
- }
+ div {
+ width: 100%;
+ }
+
+ input[type='text'] {
+ box-sizing: border-box;
+ flex: 0 0 50%;
+ }
+
+ input[type='file'] {
+ box-sizing: border-box;
+ flex: 0 0 20%;
+ color: $color-244-73-62;
+ cursor: pointer;
+ padding-left: 3rem;
}
}
+ }
- sib-form-file {
+ sib-multiple-form {
+ margin-top: 1.8rem;
+ }
- label {
- align-items: baseline;
- clear: both;
- display: flex;
- flex-direction: row;
- flex-wrap: wrap;
- max-width: 100%;
+ sib-multiple-select {
- div {
- width: 100%;
- }
+ sib-form-auto-completion > label {
+ display: flex;
+ flex-direction: column;
- input[type='text'] {
- box-sizing: border-box;
- flex: 0 0 50%;
- }
+ .ss-main {
+ font-weight: normal;
+ margin-bottom: 7.8rem;
+ margin-top: 1.6rem;
+ max-width: 50vw;
+ text-transform: none;
- input[type='file'] {
- box-sizing: border-box;
- flex: 0 0 20%;
- color: $color-244-73-62;
- cursor: pointer;
- padding-left: 3rem;
- }
- }
- }
+ .ss-multi-selected {
+ align-items: center;
+ background-color: $color-222-57-95;
+ border: none;
+ border-radius: 0px;
+ display: flex;
+ justify-content: flex-end;
+ min-height: 4.2rem;
+ padding-left: 1.2rem;
- sib-multiple-form {
- margin-top: 1.8rem;
- }
+ .ss-add {
+ font-size: 1.8rem;
+ margin: 0 18px 0 0;
- sib-multiple-select {
-
- sib-form-auto-completion > label {
- display: flex;
- flex-direction: column;
-
- .ss-main {
- font-weight: normal;
- margin-bottom: 7.8rem;
- margin-top: 1.6rem;
- max-width: 50vw;
- text-transform: none;
-
- .ss-multi-selected {
- align-items: center;
- background-color: $color-222-57-95;
- border: none;
- border-radius: 0px;
- display: flex;
- justify-content: flex-end;
- min-height: 4.2rem;
- padding-left: 1.2rem;
-
- .ss-add {
- font-size: 1.8rem;
- margin: 0 18px 0 0;
-
- span.ss-plus {
- background: $color-244-73-62;
+ span.ss-plus {
+ background: $color-244-73-62;
- &::after {
- background: $color-244-73-62;
- }
+ &::after {
+ background: $color-244-73-62;
}
}
+ }
- .ss-values {
- background: transparent;
+ .ss-values {
+ background: transparent;
+ position: absolute;
+ top: 6rem;
+ width: 100%;
+
+ .ss-disabled {
+ color: transparent;
+ font-size: 1.4rem;
+ left: calc(1.2rem - 5px);
position: absolute;
- top: 6rem;
- width: 100%;
-
- .ss-disabled {
- color: transparent;
- font-size: 1.4rem;
- left: calc(1.2rem - 5px);
- position: absolute;
- top: calc(-6rem + 7px);
-
- &::before {
- color: $color-213-4-50;
- content: "Select skills";
- font-weight: normal;
- }
+ top: calc(-6rem + 7px);
+
+ &::before {
+ color: $color-213-4-50;
+ content: "Select skills";
+ font-weight: normal;
}
+ }
- .ss-value {
- @extend .skill;
- display: flex;
+ .ss-value {
+ @extend .skill;
+ display: flex;
- .ss-value-delete {
- font-weight: normal;
- }
+ .ss-value-delete {
+ font-weight: normal;
}
}
}
}
}
}
+ }
- /* CUSTOM WIDGETS */
+ /* CUSTOM WIDGETS */
- hd-member-form {
- width: 100%;
+ hd-member-form {
+ width: 100%;
- form {
- display: flex;
- flex-direction: column;
+ form {
+ display: flex;
+ flex-direction: column;
- [name='member-form__input'] {
- margin-bottom: 1rem;
- }
+ [name='member-form__input'] {
+ margin-bottom: 1rem;
+ }
- sib-form-auto-completion {
- float: left;
- }
+ sib-form-auto-completion {
+ float: left;
+ }
- input[type='submit'] {
- background-color: transparent;
- border: 1px solid $color-244-73-62;
- color: $color-244-73-62;
- }
+ input[type='submit'] {
+ background-color: transparent;
+ border: 1px solid $color-244-73-62;
+ color: $color-244-73-62;
}
}
}
diff --git a/src/styles/base/header.scss b/src/styles/base/header.scss
index b33026620533fe886380e48db3ea1e133a2a553d..093cfcd30674e33e755d85450e867f057cbb5914 100644
--- a/src/styles/base/header.scss
+++ b/src/styles/base/header.scss
@@ -169,7 +169,7 @@
width: 45%;
}
- sib-display-value[name='firstName'] {
+ sib-display-value[name='first_name'] {
@include icon('arrow-down');
align-items: center;
display: flex;
@@ -241,7 +241,7 @@
div {
- sib-display-value[name='firstName'] {
+ sib-display-value[name='first_name'] {
@include icon('close');
&::before {
diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss
index 32b1174e01a99c2d6c3ec7ca6f045d7da018772e..a3de4fbd6ee8796121762144ed180dbfd6477438 100644
--- a/src/styles/base/main.scss
+++ b/src/styles/base/main.scss
@@ -257,12 +257,31 @@ h5 {
}
}
+.flex {
+ display: flex;
+}
+
.modal {
- color: white;
- margin: 75px;
- padding: 40px;
- max-height: 85vh;
- text-align: center;
+ background-color: rgba(0, 0, 0, 0.3);
+ border: none;
+ height: 96vh;
+ width: 100vw;
+
+ .inside {
+ background-color: white;
+ margin: 0 auto;
+ padding: 40px;
+ position: relative;
+ width: 80%;
+ }
+
+ &.center {
+ text-align: center;
+ }
+
+ &.left {
+ text-align: left;
+ }
img {
max-width: 75%;
@@ -335,6 +354,10 @@ h5 {
margin-right: 0.60rem;
}
+.w100 {
+ width: 100%;
+}
+
// Compatibility layer for non-updated components
@import 'compat';
// Other base components
diff --git a/src/styles/index.scss b/src/styles/index.scss
index b2b17ba64408c1dad23691c1344ad11f6d95fed6..912d48846ce4c0dbc183ec6be7807cdebc6155ff 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -18,7 +18,7 @@ div#viewport {
@import 'components/index';
@import 'layout/members/index';
@import 'layout/job-offers/index';
- @import 'layout/project-profile/index';
+ @import 'layout/project/index';
@import 'layout/circle/index';
@import 'layout/user/index';
@import 'layout/events/index';
diff --git a/src/styles/layout/job-offers/job-offers.scss b/src/styles/layout/job-offers/job-offers.scss
index 172e863c38957cfa9fc2d27ce52f13d869763c79..64c41fef906d79162203a31142df0ad0f87e4b94 100644
--- a/src/styles/layout/job-offers/job-offers.scss
+++ b/src/styles/layout/job-offers/job-offers.scss
@@ -75,7 +75,7 @@ sib-job-board {
margin: 0.25em;
}
- [name='author.firstName'] {
+ [name='author.first_name'] {
color: $color-0-0-29;
font-weight: 600;
}
diff --git a/src/styles/layout/project-profile/_index.scss b/src/styles/layout/project/_index.scss
similarity index 100%
rename from src/styles/layout/project-profile/_index.scss
rename to src/styles/layout/project/_index.scss
diff --git a/src/styles/layout/project-profile/project-profile.scss b/src/styles/layout/project/project-profile.scss
similarity index 100%
rename from src/styles/layout/project-profile/project-profile.scss
rename to src/styles/layout/project/project-profile.scss
diff --git a/src/styles/layout/project-profile/project.scss b/src/styles/layout/project/project.scss
similarity index 100%
rename from src/styles/layout/project-profile/project.scss
rename to src/styles/layout/project/project.scss
diff --git a/src/templates/hd-customer.pug b/src/templates/hd-customer.pug
index 813aa81ac56b09dec28b75a8b2cc23b2e3620781..04e891f245e08a7a0ad0785b211eb634b75a7f05 100644
--- a/src/templates/hd-customer.pug
+++ b/src/templates/hd-customer.pug
@@ -10,7 +10,7 @@ sib-widget(name='hd-customer')
div
h3 Contact:
ul
- li #[span(class='mdi-account-outline') ${await value.firstName} ${await value.lastName ? await value.lastName : ""}]${await value.role ? `, ${await value.role}` : ""}
+ li #[span(class='mdi-account-outline') ${await value.first_name} ${await value.last_name ? await value.last_name : ""}]${await value.role ? `, ${await value.role}` : ""}
li
span(class='link-color norm-weight mdi-email-outline')
a(href='mailto:${await value.email}') ${await value.email}
diff --git a/src/views/admin/page-admin-projects-create.pug b/src/views/admin/page-admin-projects-create.pug
index 6875d1180941be4651e17df04e68fcefb6dd9ff6..a6ab188b004dbe36b5bf39146b7e3e1ca920aced 100644
--- a/src/views/admin/page-admin-projects-create.pug
+++ b/src/views/admin/page-admin-projects-create.pug
@@ -1,11 +1,21 @@
-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")
+ //- WIDGETS
+ sib-widget(name='hd-template-project-title')
+ template
+ p ${label}
+
+ //- NOTE: workaround for https://git.happy-dev.fr/startinblox/framework/sib-core/issues/577
+ //- intermediary for linking one sib-form to another
+ sib-widget(name='customer-edit-link')
+ template
+ sib-link(
+ bind-resources
+ next='customer-edit'
+ )
+ a.change-related ${label}
+
+ sib-widget(name='admin-project-add-user')
template
sib-form(
data-holder
@@ -16,44 +26,73 @@ div.content-box__info
naked
)
- h1.centered New project
+ sib-widget(name='hd-toto')
+ template
+ sib-link(next='project-contributions-help').button-question__position
+ button(aria-label='modal activator').icon-question.button-question__color
+ //- END WIDGETS
+
+
+ //-FORM
+ sib-link(class="backlink" next='admin-project-list') Back
+
+ h1.centered Create a new project
sib-form.block(
data-src=`${endpoints.projects || endpoints.post.projects}`
-
- fields='line-1(customer, name), line-3(project.description), fieldset-fee, line-4(businessProvider.name, businessProvider.fee), fieldset-captain, line-10(captain)'
- class-fieldset-fee='fieldset'
- value-fieldset-fee='Fee'
- widget-fieldset-fee='hd-template-project-title'
-
- class-fieldset-captain='fieldset'
- value-fieldset-captain='Captain'
- widget-fieldset-captain='hd-template-project-title'
+ sib-link(class="backlink" next='admin-project-list') Back
- label-customer='Customer'
- class-customer='member-select form-label is-light is-half-width'
- range-customer=`${endpoints.customers || endpoints.get.customers}`
- widget-customer='sib-form-auto-completion'
-
- label-name='Project\'s name*'
- class-name='form-label is-light is-half-width'
+ h1.centered Create a new project
- label-project.description='Project description'
- class-project.description='form-label is-light is-full-width'
- widget-project.description='sib-form-textarea'
+ sib-form.block(
+ data-src=`${endpoints.projects || endpoints.post.projects}`
- label-businessProvider.name='Business provider*'
- class-businessProvider.name='form-label is-light is-half-width'
+ fields='row1(customer, customer-buttons(customer-create, customer-edit)), fieldset-info, row2(line1(name), captain, number), fieldset-contribution, toto, row4(businessProvider, businessProvider.fee)'
- label-businessProvider.fee='Amount of the contribution'
- class-businessProvider.fee='form-label is-light is-half-width'
+ id='project-create-form'
+ class-customer='member-select form-label is-light is-half-width is-left'
+ class-customer-create='add-related'
+ class-fieldset-info='fieldset'
+ class-name='form-label is-light is-half-width is-left'
+ class-captain='member-select form-label is-light is-half-width is-left'
+ class-number='form-label is-light is-half-width is-right'
+ class-fieldset-contribution='fieldset'
+ class-businessProvider='member-select form-label is-light is-half-width is-left'
+ class-businessProvider.fee='form-label is-light is-half-width is-right'
+ class-fieldset-captain='fieldset'
+
+ label-customer='Client\'s name*'
+ label-customer-create='Add new client'
+ label-customer-edit='Edit selected client'
+ label-fieldset-info='Project Information'
+ label-name='Project\'s name*'
+ label-number='Project\'s number'
+ label-fieldset-contribution='Contribution'
+ label-businessProvider='Business provider'
+ label-businessProvider.fee='Amount of the contribution'
+ label-toto='?'
+
+ range-customer=`${endpoints.customers || endpoints.get.customers}`
range-captain=`${endpoints.users || endpoints.get.users}`
- class-captain='member-select form-label is-light is-half-width'
+ range-businessProvider=`${endpoints.businessproviders || endpoints.get.businessproviders}`
+
+ value-customer-create="customer-create-project-create"
+
+ widget-customer='sib-form-auto-completion'
+ widget-customer-create="sib-action"
+ widget-customer-edit='customer-edit-link'
+ widget-fieldset-info='hd-template-project-title'
widget-captain='sib-form-auto-completion'
-
+ widget-number='sib-form-number'
+ widget-fieldset-contribution='hd-template-project-title'
+ widget-fieldset-captain='hd-template-project-title'
+ widget-businessProvider='sib-form-auto-completion'
+ widget-businessProvider.fee='sib-form-number'
+ widget-toto='hd-toto'
+
next='admin-project-list'
-
+
submit-button='Save'
)
diff --git a/src/views/admin/page-admin-projects.pug b/src/views/admin/page-admin-projects.pug
index d93aa33202ab59cf52b5922402359a9923ebcf9c..09ce2c0897b10a317a3d07d68c205a7cf37caeaf 100644
--- a/src/views/admin/page-admin-projects.pug
+++ b/src/views/admin/page-admin-projects.pug
@@ -3,6 +3,64 @@
sib-route(name='admin-project-list')
sib-route(name='admin-project-create')
sib-route(name='project-left')
+ sib-route(name='customer-create-project-create')
+
+
+
+ dialog(id='project-contributions-help').modal.center
+ div.inside
+ sib-link(next='project-profile')
+ button.icon-close
+ img(src='../images/contributions-help.png')
+
+
+
+
+ //- NOTE: this form has been duplicated for each parent form it's navigated to, from
+ //- workaround for https://git.happy-dev.fr/startinblox/framework/sib-core/issues/587
+
+ //- Modale for create-customer form
+ sib-widget(name='hd-fieldset-title')
+ template
+ label ${label}
+
+ dialog(id='customer-create-project-create').modal.left.with-form
+ div.inside
+ sib-link(next='admin-project-create')
+ button.icon-close
+ h1.centered Create Customer
+ sib-form.block(
+ class='customer-form-project-create'
+ data-src=`${endpoints.customers}`
+
+ fields='row1(name, companyRegister, logo, address), fieldset-contact, row2(firstName, lastName, role, email, phone)'
+
+ class-name='form-label is-light is-half-width is-left'
+ class-companyRegister='form-label is-light is-half-width is-right'
+ class-logo='form-label is-light is-full-width'
+ class-address='form-label is-light is-full-width'
+ class-fieldset-contact='fieldset'
+ class-firstName='form-label is-light is-half-width is-left'
+ class-lastName='form-label is-light is-half-width is-right'
+ class-role='form-label is-light is-half-width is-left'
+ class-email='form-label is-light is-half-width is-right'
+ class-phone='form-label is-light is-half-width is-left'
+
+ label-name='Name*'
+ label-companyRegister='Company register'
+ label-logo='Logo'
+ label-address='Address'
+ label-fieldset-contact='Contact within the company'
+ label-firstName='Firstname'
+ label-lastName='Surname'
+ label-role='Role within the company'
+ label-email='Email'
+ label-phone='Phone'
+
+ widget-address='sib-form-textarea'
+ widget-fieldset-contact='hd-fieldset-title'
+ )
+ //- end modale
div.content-box__header.with-description
h1.title-left.without-margin Administration
diff --git a/src/views/project/page-project-edit.pug b/src/views/project/page-project-edit.pug
index 61e5aa2e8eb2b41aa496e894e4eb7bb1ddad629a..626a0f2bd927e7da4a6711ed8c5aa853994ef669 100644
--- a/src/views/project/page-project-edit.pug
+++ b/src/views/project/page-project-edit.pug
@@ -2,39 +2,82 @@ div.content-box__info
include ../../templates/hd-user-avatar.pug
+ //- WIDGETS
sib-widget(name='hd-fieldset-title')
template
label ${label}
-
+
+ //- NOTE: workaround for https://git.happy-dev.fr/startinblox/framework/sib-core/issues/577
+ //- intermediary for linking one sib-form to another
+ sib-widget(name='customer-edit-link')
+ template
+ sib-link(
+ bind-resources
+ next='customer-edit'
+ )
+ a.change-related ${label}
+
+ //- NOTE: workaround while unable to refresh the cache without a sib-display on the resource
+ //- an empty sib-display with the customers resource
+ //- https://git.happy-dev.fr/startinblox/framework/sib-core/issues/524
+ sib-display(
+ bind-resources
+ nested-field='customer'
+ fields=''
+ )
+ //- END WIDGETS
+
+
+ //- FORM
sib-link(class='backlink', bind-resources, next='project-profile') Back
- h1 Edit your project
+ h1.centered Edit your project
+ //-fields='row1(customer-frame(customer, customer-buttons(customer-create, customer-edit)), name), row2(captain), row3(description), fieldset-fee, row4(businessProvider, businessProvider.fee)'
sib-form.block.form-edit(
bind-resources
-
- fields='fieldset-info, block-project__info(customer, name, description), fieldset-fee, block-project__fee(businessProvider, businessProviderFee)'
-
- class-customer='member-select form-label is-light is-half-width'
- widget-customer='sib-form-auto-completion'
- class-name='form-label is-light is-half-width'
- class-description='form-label is-light is-full-width'
- label-fieldset-info=''
- label-customer='Customer'
- range-customer=`${endpoints.customers || endpoints.get.customers}`
- label-name='Project\'s name*'
- label-description='Project description'
- widget-fieldset-info='hd-fieldset-title'
- widget-description='sib-form-textarea'
-
- class-fieldset-fee='fieldset'
- class-businessprovider='form-label is-light is-half-width'
- class-businessproviderfee='form-label is-light is-half-width'
- label-fieldset-fee='Fee'
- label-businessprovider='Business provider'
- label-businessproviderfee='Amount of the contribution'
- widget-fieldset-fee='hd-fieldset-title'
+ fields='row1(customer.name, customer-buttons(customer-create, customer-edit)), fieldset-info, row2(line1(name), captain, number), fieldset-contribution, toto, row4(businessProvider, businessProvider.fee)'
+
+ id='project-edit-form'
+
+ class-customer.name='form-label is-light is-half-width is-left'
+ class-customer-create='add-related'
+ class-fieldset-info='fieldset'
+ class-name='form-label is-light is-half-width is-left'
+ class-captain='member-select form-label is-light is-half-width is-left'
+ class-number='form-label is-light is-half-width is-right'
+ class-fieldset-contribution='fieldset'
+ class-businessprovider='member-select form-label is-light is-half-width is-left'
+ class-businessprovider.fee='form-label is-light is-half-width is-right'
+
+ label-customer.name='Client\'s name*'
+ label-customer-create='Add new client'
+ label-customer-edit='Edit selected client'
+ label-fieldset-info='Project Information'
+ label-name='Project\'s name*'
+ label-number='Project\'s number'
+ label-fieldset-contribution='Contribution'
+ label-businessProvider='Business provider'
+ label-businessProvider.fee='Amount of the contribution'
+ label-toto='?'
+
+ range-captain=`${endpoints.users || endpoints.get.users}`
+ range-businessProvider=`${endpoints.businessproviders || endpoints.get.businessproviders}`
+
+ value-customer-create="customer-create-project-edit"
+
+ widget-customer-create="sib-action"
+ widget-customer-edit='customer-edit-link'
+ widget-fieldset-info='hd-template-project-title'
+ widget-captain='sib-form-auto-completion'
+ widget-number='sib-form-number'
+ widget-fieldset-contribution='hd-template-project-title'
+ widget-fieldset-captain='hd-template-project-title'
+ widget-businessProvider='sib-form-auto-completion'
+ widget-businessProvider.fee='sib-form-number'
+ widget-toto='hd-toto'
+
submit-button='Save'
)
diff --git a/src/views/project/page-project-profile.pug b/src/views/project/page-project-profile.pug
index 62ac1d668d14358455f7940f1f2f5b136d6b0cfa..c93adf03f4d4b10613685dfd45f71e86ab658101 100644
--- a/src/views/project/page-project-profile.pug
+++ b/src/views/project/page-project-profile.pug
@@ -22,8 +22,8 @@ sib-router(default-route='project-profile', hidden)
widget-creationDate='sib-display-date'
)
- sib-ac-checker(permission='acl:Append', bind-resources, nested-field='members')
- sib-link(class='button text-bold text-uppercase reversed button-blue bordered with-icon icon-pencil' next='project-edit' bind-resources) Edit and add Members
+ //-sib-ac-checker(permission='acl:Append', bind-resources, nested-field='members')
+ sib-link(class='button text-bold text-uppercase reversed button-blue bordered with-icon icon-pencil' next='project-edit' bind-resources) Edit and add Members
.space-between