Improvement of Orders.Web

[dbeuchler]

• restores color codes from older UIs Operation state indicator is always black #1080
• added SuccessCount back, fixed tooltips Missing Success-count and broken progress in Orders.Web #1079
• added hide-completed selection (known from wpf UIs) Restore hide-completed selector on Orders.Web #1095
• Operations are sorted by their index and then by PlannedStart Operations are not sorted by their index #1081
• Added side-nav for internal module tools
• reused progress-bar in begin-dialog and operations

close #1080 #1079 #1095 #1081

[1nf0rmagician]

Could we split this PR in the fixes and the addtion of the hide/diplay completed feature? The fixes seam fine to me, even though the html part is really hard to review the way github shows the diff unfortunately 🙈

The design of hide-completed feature directly violates the material design guideline, however. As only one FAB button should be displayed per screen, source. Also adding the feature should already take into account that there is another pending feature request to filter orders e.g. by product, recipe, operation number which serve a similar purpose and hence belong into a coherent "how do we display filter options" concept for the UI.
@MathoMathiasCamara would be interested in your thoughts on that matter. Maybe a top-bar (like shifts UI), maybe a bottom-bar? The products UI has filters in the left component, which is unfortunately not applicable here. The Visual Instructions UI basically filters instructions by client, which is configured through a settings button in the top right...

Also, considering that there are more filter options coming, I think separating the local storage interaction into a service would be nice

[MathoMathiasCamara]

Could we split this PR in the fixes and the addtion of the hide/diplay completed feature? The fixes seam fine to me, even though the html part is really hard to review the way github shows the diff unfortunately 🙈

The design of hide-completed feature directly violates the material design guideline, however. As only one FAB button should be displayed per screen, source. Also adding the feature should already take into account that there is another pending feature request to filter orders e.g. by product, recipe, operation number which serve a similar purpose and hence belong into a coherent "how do we display filter options" concept for the UI. @MathoMathiasCamara would be interested in your thoughts on that matter. Maybe a top-bar (like shifts UI), maybe a bottom-bar? The products UI has filters in the left component, which is unfortunately not applicable here. The Visual Instructions UI basically filters instructions by client, which is configured through a settings button in the top right...

Also, considering that there are more filter options coming, I think separating the local storage interaction into a service would be nice

Yes i think having the top bar here is a good idea.

[dbeuchler]

discussed with @MathoMathiasCamara we will add a top bar like in jobs or workplans.

[dbeuchler]

@MathoMathiasCamara proposal

[dbeuchler]

next iteration after discussion with @MathoMathiasCamara

[MathoMathiasCamara]

next iteration after discussion with @MathoMathiasCamara

For the main navigation inside a module this is good.

[dbeuchler]

@MathoMathiasCamara I have clean everything and extracted the progress-bar into a component for reuse. The only thing which I don't like is that the side-bar-nav style is currently "self-written". The density settings makes it hard to use existing components like buttons. The style of the side-bar was mainly designed like here: https://m3.material.io

After our UX discussion we have better ideas where we want to go.

Could you review the code for me?

[MathoMathiasCamara]

@MathoMathiasCamara I have clean everything and extracted the progress-bar into a component for reuse. The only thing which I don't like is that the side-bar-nav style is currently "self-written". The density settings makes it hard to use existing components like buttons. The style of the side-bar was mainly designed like here: https://m3.material.io

After our UX discussion we have better ideas where we want to go.

Could you review the code for me?

This looks nice. we could prepare this as a template for the other UIs.