Feat(options-tool): enterprise Select

OchiengPaul442 commented 1 month ago

Description

Enterprise Selection: Introduced a new enterprise-select module to streamline enterprise selection.
Data Management: Developed a v4 schema file to incorporate enterprise and _created_at fields, enhancing data categorization and sorting capabilities.
UI Improvements: Enhanced the Enterprise list user interface by integrating relevant images for a more intuitive user experience.

Note:

Not worked on the translate for the changes made

Discussion

This PR provides a resolution for Issue #255. closes #255

Preview

Link to app preview if relevant

Screenshots / Videos

https://github.com/e-picsa/picsa-apps/assets/97807374/be77d639-b59a-49d4-8dd3-cc27170ae6e7

chrismclarke commented 1 month ago

@OchiengPaul442 Just noticed this PR is open, but has a work in progress label and you have not requested for review. Just to make sure I don't accidentally miss something you want me to look at, could you mark this as draft if not ready for review (using the revert to draft button in the top-right of the page), or tag me as a reviewer if you want me to take a look. Thanks

OchiengPaul442 commented 1 month ago

Hi @chrismclarke, The PR is not ready for Review yet, am yet to push other changes but will convert it to a draft for now. Thanks

OchiengPaul442 commented 1 month ago

Hi @chrismclarke, Am facing an issue with locating the "_created_at" field from the response that I can use to sort the table data. I have created it within the new schema but it seems to not be visible on the response data am a bit confused as to why that's happening.

Also am still working on improving the display of the lists displayed. I was thinking of having the different enterprises with their associated image on cards just like what was implemented on the budget tool for Enterprises. I have looked through the code but I am finding difficulty locating the images to use and how to use them accordingly

chrismclarke commented 1 month ago

Thanks @Pamella014

Hi @chrismclarke, Am facing an issue with locating the "_created_at" field from the response that I can use to sort the table data. I have created it within the new schema but it seems to not be visible on the response data am a bit confused as to why that's happening.

I'm not quite sure how you were testing for the field, but when I look I can see the schema and migration show as expected and I can find the property so not really sure what issue you were facing. I've added 3f8ff9f to sort the data by the new _created_at field so that newest items appear at the top

Also am still working on improving the display of the lists displayed. I was thinking of having the different enterprises with their associated image on cards just like what was implemented on the budget tool for Enterprises. I have looked through the code but I am finding difficulty locating the images to use and how to use them accordingly

Nice idea - the icons are mostly stored in libs\data within various child svgs folders - I started to write some documentation for this but forgot to push the changes and they're on my computer back in Vancouver so I probably won't rewrite just now, but basically the easiest way to import icons into a specific project is via the project.json file (mentioned in libs\data\README.md)

Although given that for the enterprise select you will only need 3 icons to represent crop, livestock and livelihood (and I don't think we have existing icons to use), I'd probably recommend just adding to the local assets folder and importing as regular images with a src property, e.g. <img src='assets/svgs/crop-options.svg /> and just use any generic svgs you can find online for now (can redesign in the future).

Otherwise I think things are looking mostly good. I've added a small tidying commit with d31bca1, I'd recommend renaming the option-list page and component to enterprise-select (avoid confusing the words option and enterprise), and then once you've added the images should be good to go.

OchiengPaul442 commented 1 month ago

Hi @chrismclarke, Thank you for unblocking the process. I will proceed to make the remaining changes.

OchiengPaul442 commented 1 month ago

Thanks @chrismclarke, Looked through the changes you pushed and all was understandable thanks again. As for the images i see why you suggest to use the <img src='assets/svgs/crop-options.svg /> it kinda got complex as i followed the code 😅, because i tried to recreate icon store for enterprise in the lib/data but as i was following along the code i kinda got confused at the section on how your using the forms i think to access the icons. just that part made me revert changes haha😂

chrismclarke commented 1 month ago

As for the images i see why you suggest to use the <img src='assets/svgs/crop-options.svg /> it kinda got complex as i followed the code 😅, because i tried to recreate icon store for enterprise in the lib/data but as i was following along the code i kinda got confused at the section on how your using the forms i think to access the icons. just that part made me revert changes haha😂

Yeah it's an interesting feature of angular - you can use the angular.json (or in a monorepo project.json) file to support copying any files from any source folder to any target folder, so you could use a statement like the one below to copy shared svg files and then refer to them as if they had always been placed in the local assets folder. Super convenient but adds a layer of abstraction that makes card harder to follow

"assets": [
          {
            "glob": "*.svg",
            "input": "libs/data/weather/svgs",
            "output": "assets/svgs/weather"
          }

There is then another layer of abstraction if you want to be able to use svgs as part of mat-icon, which is what the data-packs system does. The main benefit of this is for some additional styling and colour options (e.g. match the svg to the material primary colour), however doesn't really have any benefit when wanting to use the image as-is.

e-picsa / picsa-apps