fix: use datepipe for date formating by lukynmatuska · Pull Request #115 · rudickamladez/cutetix-admin

lukynmatuska · 2025-09-30T11:04:42Z

No description provided.

netlify · 2025-09-30T11:04:48Z

✅ Deploy Preview for cutetix-admin ready!

Name	Link
🔨 Latest commit	`dd02cea`
🔍 Latest deploy log	https://app.netlify.com/projects/cutetix-admin/deploys/68de3dfeb01b2f0008de4dea
😎 Deploy Preview	https://deploy-preview-115--cutetix-admin.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

sy-filis

Ta DatePipe ti to naformátuje.
Části metody #formatCountdown jsou k ničemu...

sy-filis · 2025-09-30T14:32:10Z

Mrkni se sem: https://github.com/sy-filis/norcus/blob/0e6e1308e54bdad2b1d5a619f6b49244a9bd19ff/frontend/src/app/modules/private/modules/produce/components/info-panel/info-panel.component.html#L105-L120

…ce-tokenů

lukynmatuska · 2025-10-01T23:51:37Z

Ale to mi neukáže počet dní, nebo jo?
https://angular.dev/api/common/DatePipe#pre-defined-format-options

sy-filis · 2025-10-02T06:39:52Z

Ukáže...
Ty si můžeš nastavit komplet svůj formát.

lukynmatuska · 2025-10-02T06:42:40Z

I den ve smyslu odpočtu? Povedlo se mi tam nacpat den konce platnosti tokenu.

sy-filis · 2025-10-02T07:16:27Z

Tak ten rozdíl si musíš samozřejmě vypočítat, uložit si jej jako Date nebo number a pak to pomocí té pipe naformátovat ve view.

lukynmatuska · 2025-10-02T07:20:09Z

Rozdíl už mám v těch diff proměnných, nebo ne?

…ce-tokenů

Copilot

Pull request overview

Updates the user info UI to rely on Angular’s date pipe for formatting token expiration timestamps and countdown displays, with a configurable date format passed from the profile page.

Changes:

Adds a date_format input to UserInfoComponent and passes it from user-profile.
Switches token expiration rendering from Intl.DateTimeFormat to the Angular date pipe.
Changes countdown values from formatted strings to Date values and formats them via the date pipe.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 9 comments.

File	Description
src/app/user-profile/user-profile.component.html	Passes a date format input into `app-user-info`.
src/app/components/user-info/component.ts	Adds `@Input` + lifecycle hook, changes expiration/countdown types to `Date`, removes Intl formatting, adds interval init.
src/app/components/user-info/component.html	Uses Angular `date` pipe to format expiration timestamps and countdown displays.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-02-28T16:12:49Z

src/app/components/user-info/component.ts

@@ -25,45 +27,31 @@ export class UserInfoComponent implements OnDestroy {
        const at_exp = this.#auth.getDecodedAccessToken()?.exp as number | undefined;
        const rt_exp = this.#auth.getDecodedRefreshToken()?.exp as number | undefined;
        if (!at_exp) {
-            this.time_to_access_token_expire = 'exp is not defined';
+            this.time_to_access_token_expire = new Date();
            return;
        }
        if (!rt_exp) {
-            this.time_to_refresh_token_expire = 'exp is not defined';
+            this.time_to_refresh_token_expire = new Date();
            return;
        }


The early return when at_exp is missing prevents the refresh-token countdown from updating (and vice versa). Update access/refresh countdowns independently so one missing/expired token doesn’t leave the other field stale.

Copilot · 2026-02-28T16:12:49Z

src/app/components/user-info/component.ts

-        return `${m}:${pad(s)}`;
+        this.time_to_access_token_expire = new Date(at_diff);
+        this.time_to_refresh_token_expire = new Date(rt_diff);
+        console.log(this.time_to_refresh_token_expire, rt_exp, rt_diff);


Leftover console.log(...) in #updateCountdown() will spam the console every second and can leak token timing data. Please remove this or replace it with an appropriate, gated logging mechanism.

Suggested change

console.log(this.time_to_refresh_token_expire, rt_exp, rt_diff);

Copilot · 2026-02-28T16:12:50Z

src/app/components/user-info/component.ts

        if (at_diff <= 0) {
-            this.time_to_access_token_expire = 'EXPIRED';
+            this.time_to_access_token_expire = new Date();
            return;
        }

        if (rt_diff <= 0) {
-            this.time_to_refresh_token_expire = 'EXPIRED';
+            this.time_to_refresh_token_expire = new Date();
            return;


When the countdown is expired (*_diff <= 0), time_to_*_expire is set to new Date(), which will render as a valid time/duration instead of “EXPIRED”. Prefer null plus a fallback string (or a dedicated status field) so the UI reflects the expired state accurately.

Copilot · 2026-02-28T16:12:50Z

src/app/components/user-info/component.ts

-
-    constructor() {
-        this.#refreshingInterval = window.setInterval(() => { this.#updateCountdown(); }, 1_000)
+    @Input() date_format: string = 'medium';


date_format as an @Input name (and corresponding attribute) deviates from the codebase’s existing camelCase input naming (e.g., autosaveDebounce, placeholder). Consider renaming this input to dateFormat and updating call sites accordingly for consistency and to better align with Angular style.

Suggested change

@Input() date_format: string = 'medium';

@Input() dateFormat: string = 'medium';

Copilot · 2026-02-28T16:12:50Z

src/app/components/user-info/component.html

+<div class="info" label="Access token expires on">{{access_token_expire | date: date_format}} ‒
+    {{time_to_access_token_expire | date: "m:ss" : "+0000" }}</div>
+<div class="info" label="Refresh token expires on">{{refresh_token_expire | date: date_format}} ‒
+    {{time_to_refresh_token_expire | date: "d:hh:mm:ss" : "+0000"}}</div>


The countdown values are being represented as new Date(at_diff) / new Date(rt_diff) and then formatted with the date pipe. This treats the remaining milliseconds as an absolute timestamp since the Unix epoch, which leads to incorrect duration rendering (minutes wrap every hour, and d is day-of-month rather than “days remaining”). Consider keeping the prior explicit duration formatting logic or introducing a dedicated “duration” formatter (pipe/helper) that formats a millisecond delta into d hh:mm:ss reliably.

Suggested change

{{time_to_refresh_token_expire | date: "d:hh:mm:ss" : "+0000"}}</div>

{{time_to_refresh_token_expire | date: "HH:mm:ss" : "+0000"}}</div>

Copilot · 2026-02-28T16:12:50Z

src/app/components/user-info/component.ts

        const at_exp = this.#auth.getDecodedAccessToken()?.exp as number | undefined;
        const rt_exp = this.#auth.getDecodedRefreshToken()?.exp as number | undefined;
        if (!at_exp) {
-            this.time_to_access_token_expire = 'exp is not defined';
+            this.time_to_access_token_expire = new Date();
            return;
        }
        if (!rt_exp) {
-            this.time_to_refresh_token_expire = 'exp is not defined';
+            this.time_to_refresh_token_expire = new Date();
            return;


When at_exp/rt_exp are missing, the code sets time_to_*_expire to new Date(), which will render as “now” (misleading). Prefer a sentinel like null plus a template fallback (e.g., "exp is not defined") or a separate status field.

Copilot · 2026-02-28T16:12:50Z

src/app/user-profile/user-profile.component.html

 <div class="details">
  <h1>User details</h1>
-  <app-user-info></app-user-info>
+  <app-user-info date_format="full"></app-user-info>


Passing date_format as a component attribute introduces a snake_case input name that appears inconsistent with other component inputs in this codebase (which use camelCase). If the input is renamed to dateFormat, update this usage as well.

Suggested change

<app-user-info date_format="full"></app-user-info>

<app-user-info dateFormat="full"></app-user-info>

Copilot · 2026-02-28T16:12:51Z

src/app/components/user-info/component.ts

    get access_token_expire() {
        const exp = this.#auth.getDecodedAccessToken()?.exp;
        if (!exp) return 'undefined';
-
-        const userLocale = navigator.languages?.[0] || navigator.language || 'cs-CZ';
-        return new Intl.DateTimeFormat(
-            userLocale,
-            {
-                dateStyle: 'short',
-                timeStyle: 'medium'
-            }
-        ).format(new Date(exp * 1000));
+        return new Date(exp * 1000);


access_token_expire returns the string 'undefined' when exp is missing, but the template now pipes access_token_expire through the date pipe. Piping a non-date value can trigger an InvalidPipeArgument runtime error. Return null/undefined (or Date | null) instead and handle the missing case in the template.

Copilot · 2026-02-28T16:12:51Z

src/app/components/user-info/component.ts

    get refresh_token_expire() {
        const exp = this.#auth.getDecodedRefreshToken()?.exp;
        if (!exp) return 'undefined';
-
-        const userLocale = navigator.languages?.[0] || navigator.language || 'cs-CZ';
-        return new Intl.DateTimeFormat(
-            userLocale,
-            {
-                dateStyle: 'short',
-                timeStyle: 'medium'
-            }
-        ).format(new Date(exp * 1000));
+        return new Date(exp * 1000);


refresh_token_expire returns the string 'undefined' when exp is missing, but the template pipes it through the date pipe. Return null/undefined (or Date | null) and render a non-piped fallback string in the template for the missing case.

…ipe-na-zobrazení-expirace-tokenů

netlify · 2026-02-28T16:30:43Z

✅ Deploy Preview for cutetix-admin ready!

Name	Link
🔨 Latest commit	`e253cc0`
🔍 Latest deploy log	https://app.netlify.com/projects/cutetix-admin/deploys/69a31c177120ed0008d814a8
😎 Deploy Preview	https://deploy-preview-115--cutetix-admin.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

fix: use datepipe for date formating

0a7a208

lukynmatuska requested a review from sy-filis September 30, 2025 11:04

lukynmatuska linked an issue Sep 30, 2025 that may be closed by this pull request

Používat date pipe na zobrazení expirace tokenů #114

Open

lukynmatuska marked this pull request as ready for review September 30, 2025 12:05

sy-filis requested changes Sep 30, 2025

View reviewed changes

Merge branch 'master' into 114-používat-date-pipe-na-zobrazení-expira…

f99a0e4

…ce-tokenů

lukynmatuska added 2 commits October 2, 2025 10:55

Merge branch 'master' into 114-používat-date-pipe-na-zobrazení-expira…

c992fd5

…ce-tokenů

wip

dd02cea

lukynmatuska added enhancement New feature or request help wanted Extra attention is needed labels Oct 2, 2025

lukynmatuska marked this pull request as draft October 3, 2025 20:32

lukynmatuska requested a review from Copilot February 28, 2026 16:09

Copilot started reviewing on behalf of lukynmatuska February 28, 2026 16:10 View session

Copilot AI reviewed Feb 28, 2026

View reviewed changes

Merge remote-tracking branch 'origin/master' into 114-používat-date-p…

4aa9e9a

…ipe-na-zobrazení-expirace-tokenů

lukynmatuska added 2 commits February 28, 2026 16:38

update

d04e868

fix: remove unused param

e253cc0

	@Input() date_format: string = 'medium';
	@Input() dateFormat: string = 'medium';

	{{time_to_refresh_token_expire \| date: "d:hh:mm:ss" : "+0000"}}</div>
	{{time_to_refresh_token_expire \| date: "HH:mm:ss" : "+0000"}}</div>

	<app-user-info date_format="full"></app-user-info>
	<app-user-info dateFormat="full"></app-user-info>

Conversation

lukynmatuska commented Sep 30, 2025

Uh oh!

netlify bot commented Sep 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for cutetix-admin ready!

Uh oh!

sy-filis left a comment

Choose a reason for hiding this comment

Uh oh!

sy-filis commented Sep 30, 2025

Uh oh!

lukynmatuska commented Oct 1, 2025

Uh oh!

sy-filis commented Oct 2, 2025

Uh oh!

lukynmatuska commented Oct 2, 2025

Uh oh!

sy-filis commented Oct 2, 2025

Uh oh!

lukynmatuska commented Oct 2, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Feb 28, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 28, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 28, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 28, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 28, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 28, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 28, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 28, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 28, 2026

Choose a reason for hiding this comment

Uh oh!

netlify bot commented Feb 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for cutetix-admin ready!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

netlify bot commented Sep 30, 2025 •

edited

Loading

netlify bot commented Feb 28, 2026 •

edited

Loading