search

kimai / kimai

Kimai is a web-based multi-user time-tracking application. Works great for everyone: freelancers, companies, organizations - everyone can track their times, generate reports, create invoices and do so much more. SaaS version available at https://www.kimai.cloud
https://www.kimai.org
GNU Affero General Public License v3.0
3.01k stars 529 forks source link

Colored Dots in Dropdowns #3109

Open kulturbande opened 2 years ago

kulturbande commented 2 years ago

Is your feature request related to a problem? Please describe. I have several Projects that have the same name but different hourly rates. For that reason I use a color code to make easier, which is working fine in the timesheet view. But it is confusing if I'm creating the timesheet entry, because the projects have the same name in the current select2 component.

Describe the solution you'd like I would like to add a colored dot before the name on all entities that supports a color (Customer, Project, etc.).

Describe alternatives you've considered A custom CSS or an own plugin to patch the behavior.

Screenshot Aufnahme 2022-01-30 at 22 18 39@2x

I already forked the project and was trying to add these function. I currently try to figure out how to use the webpack version in my Kimai Docker Setup.

kevinpapst commented 2 years ago

You can check this code as example (color chooser): https://github.com/kevinpapst/kimai2/blob/master/assets/js/plugins/KimaiFormSelect.js#L124

I guess the code cannot be re-used, because the data project collection uses the color field.

And this activates the color renderer: https://github.com/kevinpapst/kimai2/blob/master/src/Form/Type/ColorChoiceType.php#L77

Should be supported in all fields: https://github.com/kevinpapst/kimai2/blob/master/src/Form/Type/ActivityType.php https://github.com/kevinpapst/kimai2/blob/master/src/Form/Type/ProjectType.php https://github.com/kevinpapst/kimai2/blob/master/src/Form/Type/CustomerType.php

kulturbande commented 2 years ago

Thx for the hint. Currently I have some trouble to get Symfony deliver the newly created assets, but I will figure that out. I will provide a PR for that feature.

kulturbande commented 2 years ago

Hey, sorry, I don't get it. I have my system up and running and looked into the code, but I have not idea how the different form types are rendered. I tried to add a color data - attribute, but it doesn't worked out. Do you have more hints for me?

kevinpapst commented 2 years ago

Share what you have tried and we can talk about it.

kulturbande commented 2 years ago

I tried multiple things:

  1. My first thought was, that the selects are API driven, because I saw the color field in the API responses. So I extended the Select Plugin https://github.com/kevinpapst/kimai2/blob/master/assets/js/plugins/KimaiFormSelect.js#L124
  2. Then I took a look into the mentioned form types. I was able to extend the default data config to enable the color field in the select2 - component: https://github.com/kevinpapst/kimai2/blob/master/src/Form/Type/ActivityType.php#L88
  3. My main issue is, that I can't extend the option itself. It always contains an id and a name, but I couldn't find a way to extend the option. I took a look into the QueryBuilder and the corosponding repository. For example here: https://github.com/kevinpapst/kimai2/blob/master/src/Form/Type/CustomerType.php#L64
  4. Then I moved to the templates to see how the data will be provided in the frontend, but I'm ended for example in the timesheet edit and I have no idea how form_row(form.customer) will be resolved: https://github.com/kevinpapst/kimai2/blob/master/templates/timesheet/layout-edit.html.twig#L46
  5. Lastly I took a look into the entities but it seems that thy are only used for the API hydration and I saw that the ColorTrait will be used on all color related entities: https://github.com/kevinpapst/kimai2/blob/master/src/Entity/ColorTrait.php

Thats it. I want to find out how to decorate the select option / or the Select2 related options with some kind of data-color attribute, that could then be shown.