telekom / scale

Scale is the digital design system for Telekom products and experiences.
https://telekom.github.io/scale/
Other
375 stars 82 forks source link

telekom-profile-menu #2331

Closed EdsonT-Systems closed 3 weeks ago

EdsonT-Systems commented 3 months ago

Scale Version Latest

Framework and version Angular latest with auto-generated scale wrapper packages

Current Behavior A clear description of what the bug is and how it manifests.

Expected Behavior

Code Reproduction

Desktop (please complete the following information):

tshimber commented 2 months ago

hi @EdsonT-Systems ! 1) I've checked: no serviceLinks should work fine, but it fails without userInfo. I've pushed a fix, we will deploy new release in a while. If it fails for you with userInfo, please provide usage example, I'll check again

If you wanna provide userInfo in Angular: template: [userInfo]="userInfo" ts: get userInfo() { return { name: 'Alexander Dreyer', email: 'alexander.dreyer@t-online.de', }; }

2) also provide the example how you use logoutHandler, please. For me it works fine in Angular: template: [logoutHandler]="handlerFunc" ts: handlerFunc(): void { console.log('LOGOUT'); }

note that if you provide logoutHandler, logoutUrl won't work -- these are alternative options

EAristiguieta commented 2 months ago

Hi @tshimber

Well, after trying many options, I decided to use personalize component because the option you mentioned using the function works in the case of the console.log, but the navigation I am trying to do doesn't work properly since it doesn't render the rest of the components correctly. It's hard to explain with images, but basically, I tried the navigation using that function in that component, and it didn't work. I did it with custom components, and it worked fine.

Example:

1-Using the [logoutHandler]="handlerFunc"

-Ts: image

-Html: image

-Ui:

image

-At this moment when the log out its clicked image

The navigation result when the button its clicked is this:

image

2-Using the personalize button component

-Ts:

image

-Html:

image

-Ui:

The result when the button its clicked:

image

EAristiguieta commented 2 months ago

Besides of that, the component without serviceLinks does not render.

Html: image

UI: image

-With the service links:

Html: image

Ui:

image

Even if they are empty, I need to have them; otherwise, it won't render.

Ts: image

tshimber commented 2 months ago

hi @EdsonT-Systems ! about serviceLinks - i've got it, it's ok with no serviceLinks, but fails with no serviceLinks + hide-login-settings="true", I haven't checked this case, same as previous developers I guess. I'll fix it.

as for handlerFunc- I guess more debugging is needed for your case:( func itself works fine, context is in there if you use arrow func, so it's not smth with logoutHandler prop itself, but with further logic?..

image --> image

EAristiguieta commented 2 months ago

Thanks!

About the handler func, its tricky, and I haven't find a solution using the scale component only. Using the handlerFunc on other component like a normal button with a click action and it works fine, but using it on the scale component and it does not :(.

EdsonT-Systems commented 2 months ago

Hi again @tshimber , after a lot of testing, I haven't found a solution to make the logout function work correctly so that the navigation functions properly and the other components have enough time to render.

The ts and the template look like this:

image

Ui: image

-The behavior is that it redirects you and displays the console msg, and it also executes the internal logic. However, when the navigation occurs, the surrounding components do not render correctly.

Example:

image

Ui: image

-However, when the same action is triggered by a click event (in parentheses), it executes without any issues, performing the same action and rendering the rest of the components properly.

Example:

image

EdsonT-Systems commented 2 months ago

Would it be possible for you or one of the members of the Scale team to have a brief call where I can explain this? It's just that in the internal project I'm working on, the team really needs this functionality. @tshimber @acstll @felix-ico @amir-ba