Indicate completed TDF process steps

[fstrauf]

Requirement

Show if a designphase has data entered into it. So we can show the user which steps have been completed or worked on.

Functional

1. Whenever a screen has data added to it, the Element should be set to 'in progress' (we'd have to check if formik has a way to verify this, via validation)
2. a user should be able to mark a phase as completed, via a button, that should set the designElement to 'completed'
3. the status of every designElement should be indicated with a color (white=no status, orange=in progress, green=completed).
4. Add a string field to the DesignElement Entitty that should only be filled with the values of a corresponding enum.
5. Create an enum in helper.ts similar to postStatus called designElementStatus with three types 'new', 'in progress', 'completed'
6. The status should be reflected in newDesign create and update.

[fstrauf]

@masonfasco at what stage could we indicate it as complete/or at least in progress?

[masonfasco]

I don't think we can assume when a designPhase is completed since some steps acts more like ongoing workspaces, especially sections like the mechanisms.

We can definitely have a check for entered data in a designPhase and a simple In Progress on the UI

As for the Complete status, I think that has to be user prompted, we could have a Mark step as completed button on each step, which would be reflected in the UI also.

Will provide UI example for this tomorrow

[masonfasco]

See here for wireframe

[fstrauf]

@yudiz-kanti-lal for simplicity, let's do the following. If a user just opens a new phase screen, we set the designElement to in progress. No need to check for any touched status in formik.

[ghost]

@fstrauf @masonfasco all done as per our wireframe.

[fstrauf]

@yudiz-kanti-lal the current solution does not cover all phases. Business Model and Token Evaluation do not work for instance.

There is a bit of a weird check in TDFGenericOneField.

Generally please avoid hardcoded phaseIds whenever possible. The following function in every phase-screen should give you the correct context const designPhase = getActiveDesignPhase(props.designPhases, activePhase)

[fstrauf]

Also sidebar texts are now left aligned, please center them to how they looked before.

[fstrauf]

clicking on tokn evaluation, marks users as in progress.

[masonfasco]

@yudiz-kanti-lal @fstrauf

I have a different experience for the above issue mentioned "clicking on tokn evaluation, marks users as in progress." See: https://www.loom.com/share/4c95202638d74c5b8c314ce020e471cd

Issue 1: Steps that have already had info added to them show up as "New" and only when clicking into to the step does it update and show In Progress Issue 2: Business Model step shows has info added to it but the indicator shows "New". It doesn't change to "In Progress" when I add new info to it either Issue 3: Token Evaluation indicator does not react to data added in field. It does not update to "In Progress" after adding text to field Issue 4: There is a glitch when scrolling, feel like it happens when page is loading

All issues can be observed in the linked video

[ghost]

@masonfasco are you using the main db? because some phases are not available in the test db. but I will cover it.