Design Mockup: Redesign the My Projects Filtering UI

[Biuwa]

Overview

We need to redesign the filter button (icon) so that the button to open and close the filter slide-in remains in the same position (not moving from right to left as it currently does) when a user clicks on it.

Action Items

• [x] Change the funnel icon (e.g to an arrow)
• [x] Let the placement of the icon change with the user's interaction (e.g right facing to open, left facing to close

Resources/Instructions

[yiranshan]

1. Progress: communicated with teammates about how to approach this problem. Watched the weekly video recording and thought maybe the whole search panel should be moved to the side like the other pages.
2. Blockers: Not sure what criteria are final for the project page. mock-up and test site should have different items.
3. Availability: most nights from 9 pm to 11 pm.
4. ETA: after the next weekly meeting, once all questions cleared and talked to teammates, we should be able to finish all 3 issues around search functions.

[yiranshan]

Progress

1. made a new filter button option based on the current design and setup. (see image 1 and 2)
2. designed a new version of searching and filtering inspired by LinkedIn and Google sheet (see image 3 and 4) Blockers
3. still need to confirm what items would be included in the chart
4. don't know if it's doable for dev team Availability 6 hours min ETA hopefully the end of the week.

[yiranshan]

Meeting summary:

1. focus on the google Sheets version
2. main search bar can search name, address, description, alt#
3. take in the toolbox that’s been developed into the mock-up
4. move the search bar to the top right side
5. create a search box for each column name
6. default items for each page with a selection of how many items to add

Update issue on Github 02.13.2024: Progress:

• finalized version 3 which it simulates google sheets on the filtering system

• changed page selection and added items per page option

• pulled in the box on left corner

• updated keywords in the general search box

  Click here for prototype.

Blockers: not sure how the toolbox would interact with the table Availability: unsure ETA: depends on the user feedback

[ExperimentsInHonesty]

Permit Number Format

https://www.permitla.org/ipars/permit_help.cfm#:~:text=The%2010%2Ddigit%20number%2C%20with,the%20plans%20were%20first%20submitted

This is a 10-digit number assigned by the PCIS system when an applicant first applies for a permit. The purpose of this number is to identify the plans that are associated with the application or permit. There is a "one-to-many" relationship between the plan check number and the associated application or permit number(s). If an application or permit does not require plan check, this number is referred to as a "Job Number". Otherwise, it is referred to as a "Plan Check Number" (PC Number) . The 10-digit number, with the format TYYOO#####, has the following meaning:

  | T = The type of plans that were checked (B = Building, E = Electrical, G = Grading, M = Mechanical, X = Express Permit [no plan check required]).   | YY = The 2-digit year when the plans were first submitted.   | OO = A 2-digit code that corresponds to the LADBS branch office where the plans were submitted (and usually reviewed). It can have the following values: LA = Metro, VN = Van Nuys, WL = West LA, SP = San Pedro, SL = South LA.   | ##### = A 5-digit sequential number so the entire 10-

[yiranshan]

02.15.2024 before meeting Progress: changed sort by for each filter added states for sort buttons added top labels for different types of projects autocomplete for some filters

Prototype link (old)

02.15.2024 after the meeting: Progress: changed sort by for some filters auto-complete follow Google sheet added modified and deleted items added page drawer got rid of top labels

Updated prototype link

[Biuwa]

2023-02-20 STAKEHOLDERS MEETING NOTES:

• In Items per page, the largest amount needs to be ALL, not 100 as it currently shows.

---

• Bring back the three dots on the right of each line, that represents the More menu (As it shows in the image below) The three dots when clicked showed a list of options like print summary etc., see Figma for the approved list of options

---

• Emily asked for a select all and clear all (see screenshot)

---

• Abbreviate Development to Dev in the header (also make it singular) and remove the Development Review from the content (e.g., Valley Development Review becomes Valley).
• Don’t color the header if sort order chosen.
• On address drop down, currently it shows left and right scroll bars, please make the box wider up to the right margin, when content requires it. If the item still doesn't fit on the line, wrap.
• Add submitted date column (shows up blank if they have not submitted) - it should be the second to last column
• Move the Dev Review Office to the last column
• Remove the word On from Created On and Modified On
• The Dev Review office column will not have any content unless the project is submitted

In admin view

• Add a notes column to the far right, it should have two mutually exclusive icons, one for making a note and one for seeing/editing an existing note
• Dev Review Office is a drop-down select

[yiranshan]

Update issue on Github 02.22.2024: Progress: for user view: Edited item per page to include “all” Added the 3 dots back to the right added select all and clear all to address the filter and increased the width to remove the scroll bar Abbreviated DRO and removed development review Add submitted removed “on” in created and modified no content for non-submitted projects for certain columns Prototype link

[yiranshan]

Update issue on Github 02.29.2024: Progress: for user view:

• change page to right justified

• add a scroll bar to the bottom (don’t include the check box and the 3 dots)

• change “clear selection” to “clear all selection”

• Keep “DRO” as is for now and see if need to update

• Make a mock-up for a long address wrap

• Add updated 3 dots menu

  Please see the [Prototype Here](https://www.figma.com/proto/nD9QK56Mzq7xNSaSUoeGx0/TDM-Calculator?type=design&node-id=12173-2052&t=9jie4ZgndIHK1zt4-1&scaling=scale-down&page-id=2499%3A11472&starting-point-node-id=11997%3A885&mode=design).
  

(address filter might need a refresh page to look proper)

for admin view -- in progress

[Biuwa]

2023-03-05 STAKEHOLDERS' MEETING FEEDBACK NOTES

• [x] Change name of page to My Projects, not active projects
• [x] Gray out the trashcan or other top icon if it's not available
• [x] Move the showing and hiding options for deleted projects to the status drop-down making it a separate option from what Draft/Snapshot/Both radio button

[yiranshan]

Got it! Thank you!

On Sat, Mar 9, 2024 at 6:05 PM Ebi Imafidon @.***> wrote:

2023-03-05 STAKEHOLDERS' MEETING FEEDBACK NOTES

• Change name of page to My Projects, not active projects
• Gray out the trashcan or other top icon if it's not available
• Move the showing and hiding options for deleted projects to the status drop-down making it a separate option from what Draft/Snapshot/Both radio button

— Reply to this email directly, view it on GitHub https://github.com/hackforla/tdm-calculator/issues/1578#issuecomment-1987004154, or unsubscribe https://github.com/notifications/unsubscribe-auth/ATA2DDV2GSXZJF5QNRW7M7DYXOIT3AVCNFSM6AAAAABB2FPVG2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSOBXGAYDIMJVGQ . You are receiving this because you were assigned.Message ID: @.***>

[ExperimentsInHonesty]

@yiranshan are these changes completed? 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.

[yiranshan]

Progress: for user view:  Change the name of the page to My Projects, not active projects  Gray out the trashcan or other top icon if it's not available Move the showing and hiding options for deleted projects to the status drop-down making it a separate option from what Draft/Snapshot/Both radio button

Blockers:
not sure if status should use radio buttons not sure if DRO should stay abbreviated

Availability: had flu the past 2 weeks, should be able to 6 hrs per week onward ETA: next week

Link to the prototype.

[yiranshan]

Hi Bonnie,

So sorry for the delay, I just updated the issue.

Thanks, Yiran

On Mar 21, 2024, at 4:44 PM, Bonnie Wolfe @.***> wrote:

@yiranshan https://github.com/yiranshan are these changes completed? Please provide update

Progress: "What is the current status of your project? What have you completed and what is left to do?" Blockers: "Difficulties or errors encountered." Availability: "How much time will you have this week to work on this issue?" ETA: "When do you expect this issue to be completed?" 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. — Reply to this email directly, view it on GitHub https://github.com/hackforla/tdm-calculator/issues/1578#issuecomment-2013699175, or unsubscribe https://github.com/notifications/unsubscribe-auth/ATA2DDQ24R3SWEGKN4AE623YZNBEVAVCNFSM6AAAAABB2FPVG2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDAMJTGY4TSMJXGU. You are receiving this because you were mentioned.

[ExperimentsInHonesty]

snapshot will have icon next to it if its shared "(deleted)" notation will be moved to the Status

[yiranshan]

Update issue on Github 03.28.2024: Progress: for user view:  - [x] snapshot will have icon next to it if its shared  - [x] "(deleted)" notation will be moved to the Status  - [x] grey out deleted option for snapshot only selection

Blockers:

Availability: 6 hrs

Link to the prototype: https://www.figma.com/proto/nD9QK56Mzq7xNSaSUoeGx0/TDM-Calculator?type=design&node-id=12173-2052&t=wQuxLI1JbOw0OzLn-1&scaling=scale-down&page-id=2499%3A11472&starting-point-node-id=11997%3A885&mode=design

[Parisajf]

The issue reopened to let the Dev ask their questions.

[ExperimentsInHonesty]

• The new issue for clarifications and questions is https://github.com/hackforla/tdm-calculator/issues/1816