@unipin/angular-applet 18.9.3 → 18.9.4

package/projects/unipin-angular/src/lib/components/infinite-scroll/infinite-scroll.stories.ts

@@ -0,0 +1,80 @@
+import {
+  argsToTemplate,
+  moduleMetadata,
+  type Meta,
+  type StoryObj,
+} from '@storybook/angular';
+import { InfiniteScrollComponent } from './infinite-scroll.component';
+
+const meta: Meta<InfiniteScrollComponent> = {
+  title: 'Infinite Scroll',
+  component: InfiniteScrollComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [InfiniteScrollComponent],
+    }),
+  ],
+  argTypes: {
+    loadingText: {
+      defaultValue: undefined,
+      description: 'Text to display when loading more items.',
+      control: {
+        type: 'text',
+      },
+      table: {
+        category: 'Input',
+      },
+      type: {
+        name: 'string',
+      },
+    },
+    loadingIcon: {
+      defaultValue: 'crescent',
+      description: 'Icon to display while loading more items.',
+      control: {
+        type: 'select',
+      },
+      options: [
+        'bubbles',
+        'circles',
+        'circular',
+        'crescent',
+        'dots',
+        'lines',
+        'lines-sharp',
+        'lines-sharp-small',
+        'lines-small',
+      ],
+      table: {
+        category: 'Input',
+      },
+      type: {
+        name: 'string',
+      },
+    },
+    scroll: {
+      control: { disable: true },
+      table: { disable: true },
+    },
+    onScrollThreshold: {
+      control: { disable: true },
+      table: { disable: true },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<InfiniteScrollComponent>;
+
+export const Default: Story = {
+  args: {
+    loadingText: 'Loading more...',
+    loadingIcon: 'dots',
+  },
+  render: (args) => ({
+    props: args,
+    template: `
+      <up-infinite-scroll ${argsToTemplate(args)} />
+    `,
+  }),
+};

package/{lib/components/tabs/index.d.ts → projects/unipin-angular/src/lib/components/tabs/index.ts}

@@ -1,6 +1,7 @@
 export { TabGroupComponent } from './tab-group/tab-group.component';
 export { TabContentComponent } from './tab-content/tab-content.component';
+
 export interface TabsChangedEvent {
-    index: number;
-    fragment: string | null;
+  index: number;
+  fragment: string | null;
 }

package/projects/unipin-angular/src/lib/components/tabs/tab-content/tab-content.component.html

@@ -0,0 +1,3 @@
+<div class="tab-content" [hidden]="!isActive">
+    <ng-content />
+</div>

package/projects/unipin-angular/src/lib/components/tabs/tab-content/tab-content.component.scss

@@ -0,0 +1,6 @@
+:host {
+    overflow: auto;
+}
+.tab-content {
+    height: 100%;
+}

package/projects/unipin-angular/src/lib/components/tabs/tab-content/tab-content.component.ts

@@ -0,0 +1,56 @@
+import { AfterContentInit, Attribute, ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, ElementRef, HostBinding, Input } from '@angular/core';
+
+@Component({
+  standalone: true,
+  selector: 'up-tab-content',
+  styleUrl: './tab-content.component.scss',
+  templateUrl: './tab-content.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class TabContentComponent implements AfterContentInit {
+
+  /**
+   * A flag variable that used to hide or show the content of the tab. Default value is false.
+   * @type {boolean}
+   */
+  @HostBinding('class.flex-grow-1') public isActive: boolean = false;
+
+  /**
+   * An input variable that used to give label for tabs.
+   * @type {string}
+   */
+  @Input({ required: false }) public header!: string;
+
+  /**
+   * A content child variable to receive HTML element from parent component that will be displayed 
+   * as tab header / label on ion-segment-button.
+   * @type {ElementRef<HTMLDivElement>}
+   */
+  @ContentChild('header') public customHeader?: ElementRef<HTMLDivElement>;
+
+  constructor(
+    @Attribute('fragment') public fragment: string,
+    protected readonly ch: ChangeDetectorRef
+  ) {}
+
+  /**
+   * Angular lifecycle hook that executed after the content projected to this component is initialized.
+   * It checks if customHeader is not undefined will hide the element to prevent it appear to the content section,
+   * and make sure the customHeader only displayed on the ion-segment-button as tab header / label.
+   */
+  public ngAfterContentInit(): void{
+    if (this.customHeader) {
+      this.customHeader.nativeElement.style.cssText = 'display: none !important';
+    }
+  }
+  
+  /**
+   * A method that control show or hide the content of the tab. If the param value is true, the
+   * content will shown. If the param value is false, the content will be hidden.
+   * @param {boolean} s - Contain boolean value for show or hide the content. Default value is true.
+   */
+  public toggleVisibility(s: boolean = true): void{
+    this.isActive = s;
+    this.ch.markForCheck();
+  }
+}

package/projects/unipin-angular/src/lib/components/tabs/tab-group/tab-group.component.html

@@ -0,0 +1,24 @@
+<ion-segment 
+    [scrollable]="true" 
+    [value]="activeFragment"
+>
+    @for (c of content(); track c.fragment) {
+        <ion-segment-button
+            [value]="c.fragment" 
+            (click)="changeTab(c.fragment, $index)"
+        >
+            @if (!c.customHeader) {
+                {{ c.header }}
+            }
+            @else {
+                <div 
+                    class="{{ c.customHeader.nativeElement.className }}"
+                    [innerHTML]="c.customHeader.nativeElement.innerHTML"
+                >
+                </div>
+            }
+        </ion-segment-button>
+    }
+</ion-segment>
+
+<ng-content />

package/projects/unipin-angular/src/lib/components/tabs/tab-group/tab-group.component.scss

@@ -0,0 +1,39 @@
+:host {
+    display: flex;
+    flex-direction: column;
+}
+ion-segment {
+    display: flex;
+    flex-shrink: 0;
+    padding-bottom: 16px;
+
+    &::-webkit-scrollbar { 
+        height: 0; 
+    }
+}
+ion-segment-button {
+    --color: #9E9E9E;
+    --color-checked: #424242;
+    --indicator-color: #ED6B26;
+    border: none;
+    height: 34px;
+    font-weight: 400;
+    min-width: 100px;
+    min-height: 34px;
+    width: fit-content;
+    text-transform: none;
+    letter-spacing: normal;
+    border-radius: 0.25rem;
+
+    &.segment-button-checked { 
+        font-weight: 500; 
+    }
+    &::part(native) { 
+        border-radius: 4px; 
+    } 
+    &::part(indicator-background) {
+        margin: auto;
+        max-width: 25%;
+        border-radius: 8px;
+    }
+}

package/projects/unipin-angular/src/lib/components/tabs/tab-group/tab-group.component.ts

@@ -0,0 +1,92 @@
+import { AfterContentInit, ChangeDetectionStrategy, Component, contentChildren, output, OutputEmitterRef, Signal } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { IonicModule } from '@ionic/angular';
+import { TabContentComponent } from '../tab-content/tab-content.component';
+import { TabsChangedEvent } from '..';
+
+@Component({
+  standalone: true,
+  selector: 'up-tab-group',
+  styleUrl: './tab-group.component.scss',
+  templateUrl: './tab-group.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    IonicModule
+  ],
+})
+export class TabGroupComponent implements AfterContentInit {
+
+  /**
+   * @deprecated - Use `changed` instead. Will be removed in next major release.
+   * 
+   * An output variable that used to emits event of type string or null when value changed. This
+   * output variable, when subscribed to, emits events containing instances of string or null
+   * or its subclass.
+   * @type {OutputEmitterRef<TabsChangedEvent>}
+   */
+  public readonly onChange: OutputEmitterRef<TabsChangedEvent> = output();
+
+  /**
+   * An output variable that used to emits event of type string or null when value changed. This
+   * output variable, when subscribed to, emits events containing instances of string or null
+   * or its subclass.
+   * @type {OutputEmitterRef<TabsChangedEvent>}
+   */
+  public readonly changed: OutputEmitterRef<TabsChangedEvent> = output();
+
+  /**
+   * A list of tab content components
+   * @type {Signal<readonly TabContentComponent[]>}
+   */
+  public readonly content: Signal<readonly TabContentComponent[]> = contentChildren(TabContentComponent);
+
+  /**
+   * A flag variable that used to set value of ion-segment for represents the current selected tab.
+   * @type {string | null | undefined}
+   */
+  public activeFragment: string | null | undefined;
+
+  constructor(
+    protected readonly router: Router,
+    protected readonly activeRoute: ActivatedRoute
+  ) { }
+
+  public ngAfterContentInit(): void{
+    const f = this.activeRoute.snapshot.fragment;
+    
+    this.changeTab(
+      f,
+      this.content().findIndex(({ fragment }) => fragment === f)
+    );
+  }
+
+  /**
+   * A method when the tab is changed, it will emit onChange variable, change route
+   * based on fragment value in param, and search if tabs have the fragment value.
+   * If it's found, it'll show the tab's content. If it's not, it'll show empty content.
+   * 
+   * @param {string | null} f - Contain value of the fragment that currently selected.
+   * @param {string | null} i - Fragment index.
+   */
+  public changeTab(f: string | null, i: number): void{
+    this.changed.emit({ fragment: f, index: i });
+    this.onChange.emit({ fragment: f, index: i });
+    
+    this.router.navigate([], { relativeTo: this.activeRoute, fragment: f || undefined, replaceUrl: true });
+
+    let found: boolean = false;
+    this.content().forEach((tab) => {
+      if (tab.fragment !== f) tab.toggleVisibility(false);
+      else {
+        found = true;
+        this.activeFragment = f;
+        tab.toggleVisibility(true);
+      }      
+    });
+
+    if (!found) {
+      this.content()[0].toggleVisibility(true);
+      this.activeFragment = this.content()[0].fragment;
+    }
+  }
+}

package/projects/unipin-angular/src/lib/components/tabs/tab.stories.ts

@@ -0,0 +1,117 @@
+import { ActivatedRoute } from '@angular/router';
+import { applicationConfig, moduleMetadata, type Meta, type StoryObj } from '@storybook/angular';
+import { expect } from '@storybook/jest';
+import { userEvent, within } from '@storybook/testing-library';
+import { TabGroupComponent } from './tab-group/tab-group.component';
+import { TabContentComponent } from './tab-content/tab-content.component';
+
+const meta: Meta<TabContentComponent> = {
+  title: 'Tabs/Tab',
+  tags: [ 'autodocs' ],
+  component: TabContentComponent,
+  decorators: [
+    applicationConfig({
+      providers: [ 
+        {
+          provide: ActivatedRoute,
+          useValue: {
+            snapshot: {
+              paramMap: {
+                get(): string { 
+                  return 'tab-content'; 
+                },
+              },
+            },
+          },
+        }
+      ],
+    }),
+    moduleMetadata({
+      imports: [
+        TabGroupComponent,
+        TabContentComponent,
+      ]
+    })
+  ],
+  argTypes: {
+    fragment: {
+      defaultValue: undefined,
+      description: 'Identifier for the tab content, displayed with `#` in the URL when the tab is active.',
+      control: { type: 'text' },
+      table: {
+        category: 'Input',
+        subcategory: 'Attribute'
+      }
+    },
+    header: {
+      defaultValue: undefined,
+      description: 'Header text for the tab content',
+      table: {
+        category: 'Input'
+      },
+      type: {
+        required: false,
+        name: 'string'
+      }
+    },
+    customHeader: {
+      defaultValue: undefined,
+      description: 'Custom header for the tab content',
+      table: {
+        category: 'ContentChild'
+      },
+      type: {
+        required: false,
+        name: 'ElementRef<HTMLDivElement>' as any
+      }
+    },
+    isActive: {
+      control: { disable: true },
+      table: { disable: true }
+    },
+    toggleVisibility: {
+      control: { disable: true },
+      table: { disable: true }
+    }
+  }
+};
+
+export default meta;
+type Story = StoryObj<TabContentComponent>;
+
+export const ActiveTab: Story = {
+  name: 'Active Tab',
+  render: () => ({
+    template: `
+      <up-tab-group>
+        <up-tab-content header="Detail" fragment="detail">
+          <p>Detail content</p>
+        </up-tab-content>
+
+        <up-tab-content header="Audit" fragment="audit">
+          <p>Audit content</p>
+        </up-tab-content>
+
+        <up-tab-content fragment="timeline">
+          <div class="d-flex align-items-center gap-3" #header>
+            <div>Custom Header</div>
+            <span class="badge bg-danger">20</span>
+          </div>
+
+          <p>Custom header Content</p>
+        </up-tab-content>
+      </up-tab-group>
+    `
+  }),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    await expect(canvas.getByText('Detail content')).toContainHTML('Detail content');
+
+    await userEvent.click(canvas.getByText('Audit'));
+    await expect(canvas.getByText('Audit content')).toHaveTextContent('Audit content');
+
+    await userEvent.click(canvas.getAllByText('Timeline')[0]);
+    await expect(canvas.getByText('Timeline Content')).toHaveTextContent('Timeline Content');
+  }
+}

package/projects/unipin-angular/src/lib/guards/auth/auth.guard.ts

@@ -0,0 +1,11 @@
+import { inject } from '@angular/core';
+import { AuthResolver } from '../../resolvers';
+
+export const AuthGuard: () => boolean = (): boolean => {
+  const resolver = inject(AuthResolver);
+  
+  if (!resolver.isUserLoggedIn()) {
+    location.href = '/auth/login';
+  }
+  return true;
+};

package/projects/unipin-angular/src/lib/interceptors/header/header.interceptor.ts

@@ -0,0 +1,36 @@
+import { Injectable } from '@angular/core';
+import { HttpEvent, HttpHandler, HttpHandlerFn, HttpInterceptor, HttpInterceptorFn, HttpRequest } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { AuthService } from '../../services';
+
+export const headerInterceptor: HttpInterceptorFn = (
+  request: HttpRequest<any>,
+  next: HttpHandlerFn
+): Observable<HttpEvent<any>> => {
+  return next(
+    request.clone({
+      headers: request.headers,
+      setHeaders: {
+        project: 'unipin',
+        authorization: AuthService.authToken,
+      },
+    })
+  );
+};
+
+/**
+ * @deprecated - DI based interceptor will be removed at v19.0.0, use function based interceptor instead
+ */
+@Injectable()
+export class HeaderInterceptor implements HttpInterceptor {
+
+  public intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>>{
+    return next.handle(request.clone({
+      headers: request.headers,
+      setHeaders: {
+        authorization: AuthService.authToken,
+        project: 'unipin'
+      }
+    }));
+  }
+}

package/projects/unipin-angular/src/lib/interceptors/refresh-token/refresh-token.interceptor.ts

@@ -0,0 +1,123 @@
+import { inject, Injectable } from '@angular/core';
+import { HttpEvent, HttpHandler, HttpHandlerFn, HttpInterceptor, HttpInterceptorFn, HttpRequest } from '@angular/common/http';
+import { Router } from '@angular/router';
+import { catchError, Observable, switchMap, throwError } from 'rxjs';
+import { AuthService } from '../../services';
+
+export const refreshTokenInterceptor: HttpInterceptorFn = (
+  request: HttpRequest<any>, 
+  next: HttpHandlerFn
+): Observable<HttpEvent<any>> => {
+  const router = inject(Router);
+  const authService = inject(AuthService);
+
+  return next(request).pipe(
+    catchError(({ error: { errors } }) => {
+      if (errors[0].extensions.code !== 'USER_INVALID_TOKEN') {
+        return throwError(() => errors[0]);
+      }
+
+      return authService.refreshToken({ refreshToken: AuthService.refreshToken }).pipe(
+        switchMap(({ data }) => {
+          const { accessToken, refreshToken } = data!.authMsRefreshAccessToken;
+
+          AuthService.authToken = accessToken!;
+          AuthService.refreshToken = refreshToken!;
+
+          localStorage.setItem('authToken', accessToken!);
+          localStorage.setItem('refreshToken', refreshToken!);
+
+          return next(
+            request.clone(
+              {
+                setHeaders: {
+                  authorization: accessToken!,
+                },
+              }
+            )
+          );
+        }),
+        catchError(() => {
+          localStorage.removeItem('roles');
+          localStorage.removeItem('userGuid');
+          localStorage.removeItem('authToken');
+          localStorage.removeItem('refreshToken');
+
+          AuthService.authToken = '';
+          AuthService.refreshToken = '';
+          authService.user = undefined;
+
+          setTimeout(
+            () => {
+              location.href = `/auth/login?url=${ encodeURIComponent(router.url + location.hash) }`;
+            }, 
+            250
+          );
+          return throwError(() => errors[0]);
+        })
+      );
+    })
+  );
+};
+
+/**
+ * @deprecated - DI based interceptor will be removed at v19.0.0, use function based interceptor instead
+ */
+@Injectable()
+export class RefreshTokenInterceptor implements HttpInterceptor {
+
+  constructor(
+    protected readonly router: Router,
+    protected readonly authService: AuthService,
+  ) { }
+
+  public intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>>{
+    return next.handle(request).pipe(
+      catchError(({ error: { errors } }) => {
+        if (errors[0].extensions.code === 'USER_INVALID_TOKEN') {
+          return this.authService.refreshToken({ refreshToken: AuthService.refreshToken }).pipe(
+            switchMap(({ data }) => {
+              const { accessToken, refreshToken } = data!.authMsRefreshAccessToken;
+
+              AuthService.authToken = accessToken!;
+              AuthService.refreshToken = refreshToken!;
+
+              localStorage.setItem('authToken', accessToken!);
+              localStorage.setItem('refreshToken', refreshToken!);
+
+              return next.handle(
+                request.clone(
+                  {
+                    setHeaders: {
+                      authorization: accessToken!
+                    }
+                  }
+                )
+              );
+            }),
+            catchError(() => {
+              localStorage.removeItem('roles');
+              localStorage.removeItem('userGuid');
+              localStorage.removeItem('authToken');
+              localStorage.removeItem('refreshToken');
+
+              AuthService.authToken = '';
+              AuthService.refreshToken = '';
+              this.authService.user = undefined;
+
+              setTimeout(
+                () => {
+                  location.href = `/auth/login?url=${ encodeURIComponent(this.router.url + location.hash) }`;
+                }, 
+                250
+              );
+              return throwError(() => errors[0]);
+            })
+          );
+        }
+
+        return throwError(() => errors[0]);
+      })
+    );
+  }
+}

package/projects/unipin-angular/src/lib/interfaces/user/user.interface.ts

@@ -0,0 +1,27 @@
+export interface User {
+  birthday: string;
+  category?: string | null;
+  email: string;
+  gender: string;
+  guid: string;
+  mobileNumber?: string | null;
+  name: string;
+  photo: string;
+  roles: {
+    guid: string;
+    code: string;
+    name: string;
+    status: string;
+    isInternal: boolean;
+  }[];
+  departments: {
+    department: {
+      guid: string;
+      hierarchyCode: string;
+      hierarchyPath: string;
+      name: string;
+      status: string;
+    };
+    isLead: boolean;
+  }[];
+}

package/projects/unipin-angular/src/lib/modules/index.ts

@@ -0,0 +1,11 @@
+export { bootstrap } from './micro-frontend';
+export {
+    PermissionDirective,
+    PermissionGuard,
+    PermissionService,
+    UnauthorizedPage,
+
+    LoadingConfig,
+    provideLoadingConfig,
+    LoadingPage,
+} from './permission';