Investment project stages #395

feedmypixel · 2017-07-31T12:46:10Z

NOTE - the Investment Project flow itself is in discussion at present as we need some discovery to confirm we are meeting user needs. However the work here can be easily repurposed and is still valid

This work involves the first part of the investment creation project flow.

Of Note (see commits for more detailed information)

Rework investment project flow to work with CTI, FDI and Non-FDI types (see flow diagram below)
Improve url structure for the create flow
Add new form macros to Investment project creation flow
Add project stage progress component to show current position in the flow, progress component #423
Add move project stage component to move between stages, move between investment project stages #422
Add middleware for storing information under a namespace in the session
Add date component pattern Date Fieldset component #425

TODO

There are a number of UX issues to address, this will be addressed in the next piece of work.
- what you need to do to proceed to the next stage
- position of stage info/message box
- Requirements and Value forms asking to much
- forms too big
Please note stronger test coverage will be coming in a future PR.

Create Investment project journey flow diagram

Investment project journey (uk and foreign)

teneightfive · 2017-07-31T13:15:32Z

assets/stylesheets/components/_progress.scss

+    z-index: 20;
+  }
+
+  &.c-progress__bar--prospect-stage {


I'd be tempted not to use class names that relate to investment progress only. Maybe modifiers that relate to the percentage complete?

teneightfive · 2017-07-31T13:18:10Z

assets/stylesheets/components/_progress.scss

+  }
+}
+
+.c-progress__stage--active {


This feels more like a state class than a modifier. Maybe just is-active.

teneightfive · 2017-07-31T13:19:00Z

assets/stylesheets/components/_progress.scss

+  left: $section-width * 4;
+}
+
+@include media($min-width: 1060px) {


What does 1060px relate to? Don't think we've used this breakpoint before.

Might also be worth looking at on smaller screens. Feels like the center aligned text for first and last items could get cut off at certain resolutions too.

1060px is when they can become centre aligned. The declaration on line 88 controls how they behave on smaller screens (pulling them in)

teneightfive · 2017-07-31T13:23:11Z

assets/stylesheets/components/_progress.scss

+}
+
+.c-progress__stage--active {
+  @include bold-font(16);


Not sure about the font size jump for current item. Think bold font weight might be enough.

yeah was thinking about colourblind people and making it apparent enough that something has changed

Maybe we need more than colour change on the icon. Could be filled for current state and empty for other states?

tyom · 2017-07-31T13:23:55Z

Wonder if the investor company and code should be flipped to be consistent with investment projects pipeline layout.

tyom · 2017-07-31T13:24:51Z

Initial sorting selection seems to have gone in investment pipeline.

teneightfive · 2017-07-31T13:32:02Z

assets/stylesheets/components/form/_form-control.scss

+  max-width: 4em;
+}
+
+.c-form-control--small {


Maybe we should tweak the current .c-form-control--short to be .c-form-control--long, add .c-form-control--medium and then set .c-form-control--short to be 2.6em?

Avoids us mixing short and small then.

tyom · 2017-07-31T13:33:50Z

assets/stylesheets/components/form/_form-control.scss

+  max-width: 4em;
+}
+
+.c-form-control--small {


We use small and smaller to adjust input size, e.g. radio buttons and checkboxes.

You should pick something different. We already have short. Maybe shorter and shortest?
See above for existing rule .c-form-control--short.

Do

short

shorter

shortest

provide enough meaning when they are by themselves?

tyom · 2017-07-31T13:34:23Z

assets/stylesheets/components/_status-bar.scss

  }
 }

 .status-bar__section-title {
-  font-weight: 700;
+  color: $grey-1;
+  font-size: 16px;


Apparently we're using core-font mixin until we do a review of our typography.

enforced 👮 🚨

tyom · 2017-07-31T13:37:40Z

src/templates/_components/investment-status.njk

@@ -14,28 +13,18 @@
 #}

 {% if projectCode %}
-  <div class="status-bar grid-row">
-    <dl class="status-bar__section column-one-quarter">
+  <div class="status-bar l-container">


Wonder if we can reuse c-meta-item here which is used on investment collection page and do away with status-bar altogether?

sounds like a refactor/alignment for after this PR is in

tyom · 2017-07-31T13:37:54Z

src/templates/_layouts/datahub-base.njk

 {% from "_macros/form.njk" import Fieldset, TextField, MultipleChoiceField, HiddenField %}
+{% from "_macros/form.njk" import DateField %}


Merge it with the line above?

was wondering if we need to denote a difference between form elements and form patterns. The DateField felt more "patterny" (for want of a real word) than the others

I'm not sure we need that kind of separation at this point. MultipleChoiceField is also quite "patterny" but to the end user (developer) it just a component/macro with certain inputs.

tyom · 2017-07-31T13:39:29Z

src/templates/_macros/elements.njk

+ # @param {string} props.text - Anchor text
+ # @param {string} [props.target=_self] - Anchor target
+ #}
+{% macro Link(props) %}


Not sure how useful this macro is. It's just an HTML element with a couple of attributes that are already restricted to certain values. I think you could justify having it if it had custom classes or wrapper.

agreed - the reason it was built is the having to send it in to the hint for the radios on the investment-type page. I initially just sent in a html string with | safe but it felt really hacky. This felt a little cleaner. Open to changing if your good with that.

tyom · 2017-07-31T13:40:09Z

src/templates/_macros/form.njk

+  {% set buttonText = props.buttonText or 'Submit' %}
+
+  {{ ErrorSummary(props.errors) }}
+  <form


Can you reuse existing Form macro here?

So differences from Form:

Error summary outside of form

Button displayed inside form (not in a form group)

It felt like adding flags to the existing form to handle this was the wrong approach.

Hmm. But you're forking the form here so every time there are global changes to form we must remember to update this one as well. Perhaps we should add a flag to disable ErrorSummary. You can already disable form submit button.

Perhaps we should add a flag to disable ErrorSummary.

yeah sure could do it was more then wrapping of the submit button. But same could add a flag to not wrap it in c-form-group c-form-group--actions

So the InlineForm macro has now gone, after a rethink there is no need for this macro

tyom · 2017-07-31T14:09:44Z

src/apps/investment-projects/views/create/investment-type.njk

+      {
+        value: form.options.investmentTypesObj.fdi.value,
+        label: form.options.investmentTypesObj.fdi.label,
+        hint: Link({


You could just save that link in a variable and pass it along to macro to avoid creating a new macro.

{% set investmentTypeFdiLink %} <a href="/investment-projects/create/investment-type/info#fdi">Is this an FDI project?</a> {% endset %}

Also, what is info target? The target is meant to be a frame name. I think you meant _blank to open in a new window. Maybe we can do an XHR to open inline? Perhaps a follow-up.

target: 'info' is to open in new window named info so that it doesn't just open different blank pages when clicking different links

You could just save that link in a variable and pass it along to macro to avoid creating a new macro.

This answers the above around creating a macro - will do

feedmypixel · 2017-07-31T15:13:09Z

Wonder if the investor company and code should be flipped to be consistent with investment projects pipeline layout.

is there a component that can be shared with this?

feedmypixel · 2017-07-31T16:03:31Z

Initial sorting selection seems to have gone in investment pipeline.

@tyom where is this? I can't track it down

tyom · 2017-08-11T09:49:30Z

src/apps/investment-projects/views/_details-form.njk

+      label: 'Type of investment',
+      value: form.state['investment_type'],
+      error: form.errors.messages['investment_type'],
+      children:  [


You don't need children. You can just call that macro and nest stuff in it. We should avoid multiple ways of doing the same thing.

An example of call.

You don't need children.

do you mean use caller?

We should avoid multiple ways of doing the same thing.

This select pattern is the same pattern used for radio and checkbox when using the MultipleChoiceField macro

Use case is on the create form

will align this work to use caller rather than children

tyom · 2017-08-11T09:53:43Z

src/templates/_macros/form.njk

@@ -429,6 +438,10 @@
      </option>
    {% endfor %}
  </select>
+
+  {% for child in fieldChildren %}


I'm not convinced this is needed.

teneightfive · 2017-08-11T12:01:41Z

assets/stylesheets/components/_meta-list.scss

+
+.c-meta-list {
+  .c-meta-item {
+    margin-right: $default-spacing-unit;


A left margin when there is a sibling might be better here. But could be addressed later during a spacing review.

.c-meta-item + .c-meta-item { margin-left: $default-spacing-unit; }

added new form macros, improved url structure, added new controllers, views and routes, updated tests

… session under a namespace, provide accessors for this infromation

updates to global styles, display in /components, tests, added date pattern into investment-projects flow

…ave been met

tests, display in /components,

feedmypixel requested a review from tyom July 31, 2017 12:46

ztolley temporarily deployed to datahub-beta2-pr-395 July 31, 2017 12:46 Inactive

feedmypixel requested review from ztolley, jim68000 and teneightfive July 31, 2017 12:46

feedmypixel force-pushed the feature/investment-project-stages branch from e3f28ce to 56479d7 Compare July 31, 2017 12:47

ztolley temporarily deployed to datahub-beta2-pr-395 July 31, 2017 12:48 Inactive

teneightfive reviewed Jul 31, 2017

View reviewed changes

tyom suggested changes Jul 31, 2017

View reviewed changes

This was referenced Jul 31, 2017

elements macro namespace #396

Closed

date macro pattern #397

Closed

investment project stage component, styles and middleware #398

Closed

feedmypixel added the multipart label Jul 31, 2017

tyom reviewed Jul 31, 2017

View reviewed changes

teneightfive assigned feedmypixel Jul 31, 2017

ztolley temporarily deployed to datahub-beta2-pr-395 July 31, 2017 15:41 Inactive

feedmypixel force-pushed the feature/investment-project-stages branch from 2fe7354 to ab13e05 Compare July 31, 2017 15:42

ztolley temporarily deployed to datahub-beta2-pr-395 July 31, 2017 15:43 Inactive

feedmypixel force-pushed the feature/investment-project-stages branch from ab13e05 to 27be423 Compare July 31, 2017 15:44

ztolley temporarily deployed to datahub-beta2-pr-395 July 31, 2017 15:44 Inactive

ztolley had a problem deploying to datahub-beta2-pr-395 July 31, 2017 16:44 Failure

feedmypixel force-pushed the feature/investment-project-stages branch from 1e2264b to 98473e7 Compare July 31, 2017 16:53

feedmypixel force-pushed the feature/investment-project-stages branch from 260c8a1 to 662195d Compare August 10, 2017 13:18

ztolley temporarily deployed to datahub-beta2-pr-395 August 10, 2017 14:19 Inactive

feedmypixel force-pushed the feature/investment-project-stages branch from e33a194 to 6e70288 Compare August 11, 2017 09:22

ztolley temporarily deployed to datahub-beta2-pr-395 August 11, 2017 09:22 Inactive

ztolley temporarily deployed to datahub-beta2-pr-395 August 11, 2017 09:38 Inactive

feedmypixel force-pushed the feature/investment-project-stages branch from 2595104 to 92ffa00 Compare August 11, 2017 09:42

ztolley temporarily deployed to datahub-beta2-pr-395 August 11, 2017 09:42 Inactive

ztolley temporarily deployed to datahub-beta2-pr-395 August 11, 2017 09:49 Inactive

tyom suggested changes Aug 11, 2017

View reviewed changes

ztolley temporarily deployed to datahub-beta2-pr-395 August 11, 2017 11:40 Inactive

feedmypixel removed the multipart label Aug 11, 2017

feedmypixel force-pushed the feature/investment-project-stages branch from 2b59a39 to 385ee23 Compare August 11, 2017 11:48

ztolley temporarily deployed to datahub-beta2-pr-395 August 11, 2017 11:48 Inactive

tyom approved these changes Aug 11, 2017

View reviewed changes

feedmypixel force-pushed the feature/investment-project-stages branch from 385ee23 to 7401ccc Compare August 11, 2017 11:57

ztolley temporarily deployed to datahub-beta2-pr-395 August 11, 2017 11:57 Inactive

teneightfive reviewed Aug 11, 2017

View reviewed changes

teneightfive approved these changes Aug 11, 2017

View reviewed changes

feedmypixel added 6 commits August 11, 2017 13:46

new investment flow work,

91e4817

added new form macros, improved url structure, added new controllers, views and routes, updated tests

store middleware for holding form information during a journey in the…

495fcb5

… session under a namespace, provide accessors for this infromation

DateFieldset component,

f3e14e7

updates to global styles, display in /components, tests, added date pattern into investment-projects flow

updates to investment status component

5f885bc

move investment projects to the next stage after all qualifications h…

3f98eab

…ave been met

progress component,

1c6470e

tests, display in /components,

feedmypixel force-pushed the feature/investment-project-stages branch from 7401ccc to 1c6470e Compare August 11, 2017 12:46

ztolley deployed to datahub-beta2-pr-395 August 11, 2017 12:46 View deployment

feedmypixel changed the title ~~Base branch: Investment project stages~~ Investment project stages Aug 11, 2017

feedmypixel merged commit 75ef34e into develop Aug 11, 2017

feedmypixel deleted the feature/investment-project-stages branch August 11, 2017 12:49

		{% from "_macros/form.njk" import Fieldset, TextField, MultipleChoiceField, HiddenField %}
		{% from "_macros/form.njk" import DateField %}

Investment project stages #395

Investment project stages #395

Conversation

feedmypixel commented Jul 31, 2017 • edited Loading

Of Note (see commits for more detailed information)

TODO

Create Investment project journey flow diagram

Investment project journey (uk and foreign)

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tyom commented Jul 31, 2017

tyom commented Jul 31, 2017 • edited Loading

Choose a reason for hiding this comment

tyom Jul 31, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tyom Jul 31, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

feedmypixel Jul 31, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

feedmypixel Jul 31, 2017 • edited Loading

Choose a reason for hiding this comment

feedmypixel commented Jul 31, 2017

feedmypixel commented Jul 31, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

feedmypixel Aug 11, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

feedmypixel commented Jul 31, 2017 •

edited

Loading

tyom commented Jul 31, 2017 •

edited

Loading

tyom Jul 31, 2017 •

edited

Loading

tyom Jul 31, 2017 •

edited

Loading

feedmypixel Jul 31, 2017 •

edited

Loading

feedmypixel Jul 31, 2017 •

edited

Loading

feedmypixel Aug 11, 2017 •

edited

Loading