npm - @goat-bravos/intern-hub-layout - Versions diffs - 1.0.0 - Mend

@goat-bravos/intern-hub-layout 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (97) hide show

package/src/app/app.routes.ts ADDED Viewed

@@ -0,0 +1,24 @@
+import { Routes } from '@angular/router';
+import { MainLayoutComponent } from '../libs/layouts/main-layout/main-layout.component';
+import { MainLayoutTestComponent } from '../libs/layouts/main-layout-test/main-layout-test.component';
+export const routes: Routes = [
+  {
+    path: '',
+    component: MainLayoutComponent,
+    data: {
+      sidebarItems: [
+        { icon: 'dsi-home-01-line', content: 'Trang Chủ' },
+        { icon: 'dsi-mail-01-line', content: 'Hòm Thư Góp Ý' },
+        { icon: 'dsi-map-01-line', content: 'Lộ Trình Đào Tạo' },
+        { icon: 'dsi-file-01-line', content: 'Tài Liệu' },
+      ],
+    },
+    children: [
+      {
+        path: '',
+        component: MainLayoutTestComponent,
+      },
+    ],
+  },
+];

package/src/app/app.scss ADDED Viewed

File without changes

package/src/app/app.spec.ts ADDED Viewed

@@ -0,0 +1,23 @@
+import { TestBed } from '@angular/core/testing';
+import { App } from './app';
+describe('App', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [App],
+    }).compileComponents();
+  });
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(App);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+  it('should render title', async () => {
+    const fixture = TestBed.createComponent(App);
+    await fixture.whenStable();
+    const compiled = fixture.nativeElement as HTMLElement;
+    expect(compiled.querySelector('h1')?.textContent).toContain('Hello, intern-hub-layout');
+  });
+});

package/src/app/app.ts ADDED Viewed

@@ -0,0 +1,19 @@
+import { Component, inject, signal, OnInit } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+import { DynamicDsService } from 'dynamic-ds';
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [RouterOutlet],
+  templateUrl: './app.html',
+})
+export class App implements OnInit {
+  protected readonly title = signal('shell-app');
+  private readonly themeService = inject(DynamicDsService);
+  ngOnInit() {
+    this.themeService.initializeTheme().subscribe();
+  }
+}

package/src/index.html ADDED Viewed

@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>ShellApp</title>
+    <base href="/" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="FPT_IS_Logo.svg" />
+    <link rel="preconnect" href="https://rsms.me/" />
+    <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
+  </head>
+  <body>
+    <app-root></app-root>
+  </body>
+</html>

package/src/libs/layouts/header/header.component.html ADDED Viewed

@@ -0,0 +1,27 @@
+<header class="app-header">
+  <div class="header-left">
+    <img class="logo" src="FPT-IS-Logo.png" alt="FPT IS Logo" />
+  </div>
+  <div class="header-right">
+    <button class="header-btn" aria-label="Help">
+      <span class="icon">?</span>
+    </button>
+    <button class="header-btn notify-btn" aria-label="Notifications">
+      <span class="icon">🔔</span>
+    </button>
+    <button class="header-btn" aria-label="Settings">
+      <span class="icon">⚙️</span>
+    </button>
+    <div class="header-user">
+      <button class="user-btn">
+        <img class="avatar" src="FPT-IS-Logo.png" alt="User avatar" />
+        <span class="user-name">User Name</span>
+        <span class="caret">▾</span>
+      </button>
+    </div>
+  </div>
+</header>

package/src/libs/layouts/header/header.component.scss ADDED Viewed

@@ -0,0 +1,96 @@
+// Header Component - System Design Format
+.app-header {
+  height: 70px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 8px;
+  width: 100%;
+}
+.header-left {
+  display: flex;
+  align-items: center;
+}
+.logo {
+  height: 46px;
+  width: 93px;
+  object-fit: contain;
+}
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+// Icon Button
+.header-btn {
+  position: relative;
+  width: 36px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border-radius: var(--radius-full);
+  border: none;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+}
+.header-btn:hover {
+  background-color: var(--neutral-color-100);
+}
+.icon {
+  font-size: var(--font-lg);
+}
+// User Section
+.header-user {
+  margin-left: 8px;
+}
+.user-btn {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 8px;
+  background: transparent;
+  border: none;
+  border-radius: var(--radius-full);
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+}
+.user-btn:hover {
+  background-color: var(--neutral-color-100);
+}
+.avatar {
+  width: 28px;
+  height: 28px;
+  border-radius: var(--radius-full);
+  object-fit: cover;
+}
+.user-name {
+  font-size: var(--font-sm);
+  font-weight: 500;
+  color: var(--neutral-color-875);
+  white-space: nowrap;
+}
+.caret {
+  font-size: var(--font-xs);
+  color: var(--neutral-color-600);
+}

package/src/libs/layouts/header/header.component.ts ADDED Viewed

@@ -0,0 +1,13 @@
+import { Component } from "@angular/core";
+@Component({
+  selector: 'app-header-component',
+  standalone: true,
+  templateUrl: './header.component.html',
+  styleUrls: ['./header.component.scss']
+})
+export class HeaderComponent {
+}

package/src/libs/layouts/main-layout/main-layout.component.html ADDED Viewed

@@ -0,0 +1,15 @@
+<div class="web-container">
+  <div class="main-layout">
+    <app-header-component></app-header-component>
+    <div class="layout-body">
+      <div class="layout-body-sidebar">
+        <app-sidebar [menuItems]="sidebarItems"></app-sidebar>
+      </div>
+      <div class="layout-body-content">
+        <router-outlet />
+      </div>
+    </div>
+  </div>
+</div>

package/src/libs/layouts/main-layout/main-layout.component.scss ADDED Viewed

@@ -0,0 +1,35 @@
+// Main Layout Component - System Design Format
+.web-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--brand-100);
+}
+.main-layout {
+  background-color: var(--brand-100);
+  min-height: 100vh; /* Grow with content */
+  display: flex;
+  flex-direction: column;
+  padding: 4px;
+  max-width: 1370px;
+  min-width: 1370px;
+  width: 1370px;
+}
+.layout-body {
+  padding: 16px 8px;
+  margin: 0;
+  display: flex;
+  height: 100%;
+  justify-content: space-between;
+}
+.layout-body-content {
+  flex: 1;
+}
+.layout-body-sidebar {
+  margin-right: 20px;
+}

package/src/libs/layouts/main-layout/main-layout.component.ts ADDED Viewed

@@ -0,0 +1,17 @@
+import { Component, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterOutlet } from '@angular/router';
+import { HeaderComponent } from '../header/header.component';
+import { SidebarComponent, SidebarItem } from '../sidebar/sidebar.component';
+@Component({
+  selector: 'app-main-layout',
+  standalone: true,
+  imports: [CommonModule, RouterOutlet, HeaderComponent, SidebarComponent],
+  templateUrl: './main-layout.component.html',
+  styleUrls: ['./main-layout.component.scss'],
+})
+export class MainLayoutComponent {
+  @Input() sidebarItems: SidebarItem[] = [];
+}

package/src/libs/layouts/main-layout-test/main-layout-test.component.html ADDED Viewed

@@ -0,0 +1,296 @@
+<ng-template #textRight let-content>
+  <p class="text-gray-700">{{ content }}</p>
+</ng-template>
+<ng-template #buttonRight let-onClick="onClick">
+  <button class="px-4 py-2 bg-black text-white rounded hover:bg-gray-800" (click)="onClick()">
+    Xem chi tiết
+  </button>
+</ng-template>
+<!-- DEMO BUTTON AREA -->
+<div class="demo-buttons">
+  <!-- Row 1: Brand buttons -->
+  <app-button-container
+    size="xs"
+    content="XS"
+    backgroundColor="var(--brand-600)"
+    color="#fff"
+    (buttonClick)="onButtonClick('XS Brand')"
+  ></app-button-container>
+  <app-button-container
+    size="sm"
+    content="SM Button"
+    leftIcon="◀"
+    rightIcon="▶"
+    backgroundColor="var(--brand-600)"
+    color="#fff"
+    (buttonClick)="onButtonClick('SM Brand')"
+  ></app-button-container>
+  <app-button-container
+    size="md"
+    content="MD Button"
+    leftIcon="◀"
+    rightIcon="▶"
+    backgroundColor="var(--brand-600)"
+    color="#fff"
+    (buttonClick)="onButtonClick('MD Brand')"
+  ></app-button-container>
+  <app-button-container
+    size="lg"
+    content="LG Button"
+    leftIcon="◀"
+    rightIcon="▶"
+    backgroundColor="var(--brand-600)"
+    color="#fff"
+    (buttonClick)="onButtonClick('LG Brand')"
+  ></app-button-container>
+</div>
+<div class="demo-buttons">
+  <!-- Row 2: Primary buttons -->
+  <app-button-container
+    size="xs"
+    content="XS"
+    backgroundColor="var(--primary-600)"
+    color="#fff"
+    (buttonClick)="onButtonClick('XS Primary')"
+  ></app-button-container>
+  <app-button-container
+    size="sm"
+    content="SM Button"
+    leftIcon="★"
+    rightIcon="★"
+    backgroundColor="var(--primary-600)"
+    color="#fff"
+    (buttonClick)="onButtonClick('SM Primary')"
+  ></app-button-container>
+  <app-button-container
+    size="md"
+    content="MD Button"
+    leftIcon="★"
+    rightIcon="★"
+    backgroundColor="var(--primary-600)"
+    color="#fff"
+    (buttonClick)="onButtonClick('MD Primary')"
+  ></app-button-container>
+  <app-button-container
+    size="lg"
+    content="LG Button"
+    leftIcon="★"
+    rightIcon="★"
+    backgroundColor="var(--primary-600)"
+    color="#fff"
+    (buttonClick)="onButtonClick('LG Primary')"
+  ></app-button-container>
+</div>
+<!-- APPROVAL LIST DEMO -->
+<div class="demo-approval-list">
+  <app-approval-list
+    [rows]="approvalRows"
+    headerContentLeft="Thao tác"
+    headerContentRight="Danh sách chờ duyệt"
+    width="600px"
+  >
+  </app-approval-list>
+</div>
+<!-- INPUT TEXT DEMO SECTION -->
+<div class="demo-section">
+  <h3 class="demo-section-title">INPUT TEXT</h3>
+  <div class="input-text-demo-grid">
+    <!-- Row 1: Basic inputs -->
+    <app-input-text
+      headerInput="Input Label"
+      placeholder="Placeholder..."
+      [required]="true"
+      width="100%"
+      icon="dsi dsi-anchor-line dsi-theme-red-600"
+    ></app-input-text>
+    <app-input-text
+      headerInput="Input Label"
+      placeholder="Placeholder..."
+      [required]="true"
+      width="100%"
+    ></app-input-text>
+    <app-input-text placeholder="Placeholder..." width="100%"></app-input-text>
+    <app-input-text placeholder="Placeholder..." width="100%" [readonly]="true"></app-input-text>
+    <!-- Row 2: With helper text and character limit -->
+    <app-input-text
+      headerInput="Input Label"
+      placeholder="Placeholder..."
+      [required]="true"
+      [maxLength]="500"
+      [showLimit]="true"
+      width="100%"
+    ></app-input-text>
+    <app-input-text
+      headerInput="Input Label"
+      placeholder="Placeholder..."
+      [required]="true"
+      [maxLength]="500"
+      [showLimit]="true"
+      width="100%"
+    ></app-input-text>
+    <app-input-text
+      placeholder="Placeholder..."
+      [maxLength]="500"
+      [showLimit]="true"
+      width="100%"
+    ></app-input-text>
+    <app-input-text
+      placeholder="Placeholder..."
+      [maxLength]="500"
+      [showLimit]="true"
+      width="100%"
+      [readonly]="true"
+    ></app-input-text>
+  </div>
+</div>
+<!-- PASSWORD DEMO SECTION -->
+<div class="demo-section">
+  <h3 class="demo-section-title">PASSWORD INPUT</h3>
+  <div class="input-text-demo-grid">
+    <app-input-text
+      headerInput="Mật khẩu"
+      placeholder="Nhập mật khẩu..."
+      [typeInput]="passwordType"
+      [icon]="passwordIcon"
+      (iconClick)="togglePassword()"
+      [required]="true"
+      width="250px"
+    ></app-input-text>
+    <app-input-text
+      headerInput="Tìm kiếm"
+      placeholder="Tìm kiếm theo tên..."
+      icon="fa-solid fa-magnifying-glass"
+      width="250px"
+    ></app-input-text>
+  </div>
+</div>
+<!-- CALENDAR DEMO SECTION -->
+<div class="demo-section">
+  <h3 class="demo-section-title">CALENDAR INPUT</h3>
+  <div class="input-text-demo-grid">
+    <app-input-calendar
+      headerInput="Ngày sinh"
+      placeholder="dd/mm/yyyy"
+      [required]="true"
+    ></app-input-calendar>
+    <app-input-calendar
+      headerInput="Date Picker"
+      placeholder="dd/mm/yyyy"
+      [required]="true"
+    ></app-input-calendar>
+  </div>
+</div>
+<!-- STEPPER DEMO SECTION -->
+<div class="demo-section">
+  <h3 class="demo-section-title">INPUT STEPPER</h3>
+  <div class="stepper-demo-grid">
+    <!-- Default State -->
+    <app-input-stepper
+      headerInput="Input Label"
+      helperText="Placeholder of hint text to help"
+      [min]="0"
+      [max]="100"
+      [step]="1"
+      [value]="0"
+      [required]="true"
+      width="250px"
+    ></app-input-stepper>
+    <!-- Negative State -->
+    <app-input-stepper
+      headerInput="Input Label"
+      helperText="Placeholder of hint text to help"
+      state="negative"
+      [min]="0"
+      [max]="100"
+      [step]="1"
+      [value]="0"
+      [required]="true"
+      width="250px"
+    ></app-input-stepper>
+    <!-- Positive State -->
+    <app-input-stepper
+      headerInput="Input Label"
+      helperText="Placeholder of hint text to help"
+      state="positive"
+      [min]="0"
+      [max]="100"
+      [step]="1"
+      [value]="0"
+      [required]="true"
+      width="250px"
+    ></app-input-stepper>
+    <!-- Disabled State -->
+    <app-input-stepper
+      headerInput="Input Label"
+      helperText="Placeholder of hint text to help"
+      [disabled]="true"
+      [min]="0"
+      [max]="100"
+      [step]="1"
+      [value]="0"
+      [required]="true"
+      width="250px"
+    ></app-input-stepper>
+  </div>
+</div>
+<!-- TABLE DEMO SECTION -->
+<div class="demo-section">
+  <h3 class="demo-section-title">TABLE</h3>
+  <ng-template #statusTemplate let-status>
+    <app-button-container
+      [content]="status"
+      [backgroundColor]="status === 'Active' ? 'var(--brand-600)' : 'var(--neutral-color-100)'"
+      [color]="status === 'Active' ? 'var(--neutral-color-100)' : 'var(--neutral-color-600)'"
+      borderColor="transparent"
+    ></app-button-container>
+  </ng-template>
+  <table>
+    <thead>
+      <tr app-table-header [columns]="columns" [backgroundColor]="tableBackgroundColor"></tr>
+    </thead>
+    <tbody
+      app-table-body
+      [rows]="rows"
+      [columns]="columns"
+      [columnTemplates]="{ status: statusTemplate }"
+    ></tbody>
+  </table>
+</div>
+<!-- ROUTER CONTENT (keep it for children if any, though likely unused now) -->
+<router-outlet />
+@if (showPopup) {
+  <app-pop-up-confirm
+    imgUrl="/Bộ icon message (1).svg"
+    title="Xác nhận hành động"
+    content="Bạn có chắc chắn muốn thực hiện hành động này không?"
+    colorButton="var(--brand-600)"
+    (confirmClick)="onPopupConfirm()"
+    (cancelClick)="onPopupCancel()"
+  >
+  </app-pop-up-confirm>
+}

package/src/libs/layouts/main-layout-test/main-layout-test.component.scss ADDED Viewed

@@ -0,0 +1,94 @@
+.web-container {
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  background-color: var(--brand-100);
+  min-height: 100vh;
+  width: 100%;
+}
+.main-layout {
+  background-color: var(--brand-100);
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  padding: 4px;
+  width: 100%;
+  max-width: 1370px;
+  margin: 0 auto;
+}
+.main-layout-content {
+  background-color: var(--brand-900);
+}
+.layout-body {
+  padding: 16px 8px;
+  margin: 0;
+  display: flex;
+  flex: 1;
+  width: 100%;
+  justify-content: flex-start;
+}
+.layout-body-sidebar {
+  flex-shrink: 0;
+  width: auto;
+  min-width: 56px;
+}
+.demo-buttons {
+  display: flex;
+  gap: 16px;
+  flex-wrap: wrap;
+  align-items: center;
+  & + .demo-buttons {
+    margin-top: 16px;
+  }
+}
+.layout-body-content {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  margin-left: 12px;
+}
+.stepper-demo-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 24px;
+  padding: 24px;
+  background-color: var(--neutral-color-10);
+  border-radius: var(--radius-md);
+}
+.demo-section {
+  margin-top: 24px;
+  padding: 24px;
+  background-color: var(--neutral-color-10);
+  border-radius: var(--radius-md);
+  border: 2px dashed var(--neutral-color-200);
+}
+.demo-section-title {
+  font-size: var(--font-sm);
+  font-weight: 600;
+  color: var(--neutral-color-600);
+  margin: 0 0 16px 0;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+.input-text-demo-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 24px;
+}
+table {
+  width: 100%;
+  border-collapse: collapse;
+  table-layout: fixed;
+}