Create a Submit Snapshot Form and Main Menu Item to select it.

[entrotech]

Overview

Users should be able to go to a page where all of their completed forms are available to be selected and submitted to LA City Planning Department for review.

Action Items

• The web api endpoint /api/projects/submit was implemented under Issue Create Web API endpoints to support Submitting a Project for Approval #1704.

• Create Snapshot Submittal Form page.
  

• Create successful submission modal.
  

• Review with product and dev. Update if needed based on feedback

• Once finalized, add before and after images to the staging deck on this slide

• Get Stakeholder sign-off via the stakeholder meeting slide deck.

Resources/Instructions

Figma
Requirements for submission

• The web api endpoint was implemented under Issue Create Web API endpoints to support Submitting a Project for Approval #1704 and PR Web API Implementation for Submitting Projects #1753

[entrotech]

@heejung-hong was stuck on how to get the target vs earned points for each project (it's not easy) and submitted a partial solution for me to help with on 10/30/24. I have not been able to work on this yet, but it may require us to to save the calculation result to the database when a project is modified, instead of trying to re-compute all the projects when they appear on this page (this is also a problem on the My Projects Page), to improve performance and simplify issues that need to process sets of calculations based on elements in the results of the calculation.

[entrotech]

I did not mean to close this issue, as we still need work on the User Interface for the Submit Snapshot form to make it look like the designed wireframes.

[entrotech]

1. To complete this issue, I modified the Save Project feature in the Calculation Wizard to store the target points, earned points and project level in the project table. This makes these values available wherever they are needed for each project without having to run the engine on each project each time we want to get these values.

2. However, to populate these new columns for existing projects, I has to create a "temporary" feature that can be run to fetch every existing project, run the calculation engine to calculate these three values and store the result back to the project table. This feature needs to be run only once after the change in paragraph 1 above is run for each environment. This "populate totals" feature is enabled by setting the ENABLE_UPDATE_TOTALS constant in the Constants.js file to a value of true. When this constant is set, a new button labelled "T" is added to the MultiProjectToolbar on the My Projects page. Selecting one or more displayed projects and pressing the button will recalculate target points, earned points and project level for the selected projects. So to recalculate all the projects, you need to set the My Projects filters to their default values, but change the Visibility filter to "All" (i.e. Visible and Hidden) and the Status Filter to "Draft and Snapshot" and set "Show Deleted" on the Status Filter drop-down to include all projects. Then set the items per page to All and select the checkbox in the first column header to select all projects. Then press the "T" button to initiate the calculation. You can open you dev tools and watch the network calls to see progress as each project is recalculated. With this feature enables, an extra column is added to the My Project grid that shows the x/y/z, where x is the target points, y is the earned points, and z is the project level. After the recalculation is complete, you should be able to refresh the page and see that this column confirms the calculated values have been computed.

3. Once the totals have been populated as above, be sure to disable this feature by re-setting the ENABLE_UPDATE_TOTALS value to false, to hide the "T" button and extra column on the My Projects page. The corresponding code could be deleted at some future time.

[entrotech]

This is partially complete, but I'm going to put this back in the Backlog and let someone else take over this issue to finish the UI:

1. Make the page layout look like the wireframe in the description. It should be responsive to changes in device width, and design elements should conform to the style guide.
2. The wireframe in the description of this issue is a "Ready for Submission" warning dialog, but the one in the design Issue Create separate form for submission #1407 is just a "Thank You for Your Submission" after completing the submission - which one is right, and are they compliant with the style guide?
   What's implemented in this issue:
   

[ExperimentsInHonesty]

@heejung-hong Please provide update

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures or links* (if necessary): "Add any pictures or links that will help illustrate what you are working on."

• remember to add links to the top of the issue if they are going to be needed again.

[heejung-hong]

1. Progress: The submit snapshot button is implemented and the date submitted fields are updated.
2. Blockers: There is a question about the modal design that needs to be clarified by the Stakeholders. Should it have a okay and cancel button?
3. Availability: Weekdays after 7pm
4. ETA: Waiting for design feedback

[thetanmancan]

@heejung-hong

"Ready for your submission!" modal

Temp "Ready for your submission!" modal

The proposed modal above has a number of design issues.

1. There shouldn't be an X button in the top-right corner.
2. The icon does not use a shade of green we have in our design system.
3. The icon implies a successful submission rather than warning about an action.
4. The title should not have punctuation that isn't a question mark.
5. Modals should have the primary button on the right and the secondary button on the left.
6. The primary and secondary buttons are not styled correctly.

I will need to write an issue to have someone on the design team fix these problems. I will update this issue with a comment once one has been written. If you'd like, you can make this issue dependent on that issue once I've written it.

I will also have to make sure that the updated modal design is included in #1977 .

Submit Snapshot tables UI

From a functional perspective, it looks like the tables on the Submit Snapshot page on the Dev site work as shown in the #1407 mockup.

Mockup from #1407

However, stylistically, there are a few mismatches between the Dev site and the mockup, namely header labels not being bold, columns and tables not having consistent or enough spacing, and snapshot names not having links.

Screenshot of the current Submit Snapshot page in Dev

If you'd like, we can write these as separate bugs.

Please also be aware that design changes are also forthcoming for the tables on the Submit Snapshot page via #2004 , though that issue applies specifically to table headers.

[thetanmancan]

@heejung-hong The "Ready for your submission!" modal design issue has been written as #2031 .

[heejung-hong]

Hi @thetanmancan, I'll wait for the modal and table design to be completed, to finish this issue. Thank you

[thetanmancan]

Sounds good, @heejung-hong . Would you like me to add those dependencies to this issue and move this to the ice box?

[heejung-hong]

Hi @thetanmancan, This issue doesn't need to be added to the ice box at this time. The dependencies are already referenced, so I'm good. Thank you

[ExperimentsInHonesty]

@heejung-hong we are going to close this issue because it's going to take 3 weeks for design to come up with a new table design. So we will just make a new issue for it and also take care of the modal on another issue

• Design a "Ready to Submit" modal #2031
• Design: Update Submit Snapshot tables #2004

[Rabia2219]

Appeared in the 2024-12-03 Stakeholder deck and was approved.

Has been added to the Approved by Stakeholder, To be Pushed to Prod deck