diff --git a/src/app/app.component.html b/src/app/app.component.html index 1bf107b..0680b43 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,42 +1 @@ -
-
-
- -
-
- -
-
- -
-
- -
-
- -
-
-
- -
-
- - -
-
- {{ tabInfo.get(tabName)?.title }} - {{ tabInfo.get(tabName)?.theme }} -
-
- {{ tabInfo.get(tabName)?.content }} -
-
- Learn more - -
-
- - -
- Download app source. -
+ diff --git a/src/app/app.component.scss b/src/app/app.component.scss index cf1d098..1dd1edc 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -1,145 +1,6 @@ -@use "igniteui-angular/theming" as *; - -$custom-icon-button-theme: icon-button-theme( - $background: #212121, - $foreground: #ffffff, - $disabled-background: #9e9e9e, - $disabled-foreground: #ffffff -); - :host { display: block; width: 100%; height: 100%; margin: auto; } - -.demo-container { - width: 100%; - height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - gap: 24px; - igx-chip { - --igx-chip-hover-background: var(--ig-gray-300); - --igx-chip-focus-background: var(--ig-gray-300); - } -} - -.router-container { - width: 100%; - overflow: hidden; - display: flex; - flex: 1; -} - -.tab-container { - width: 100%; - min-height: 132px; - flex-shrink: 0; - display: flex; - flex-direction: row; - justify-content: space-between; -} - -.tab-item-container { - height: 100%; - display: inline-flex; -} - -.tab-item { - height: 100%; - display: flex; - flex-grow: 1; - flex-basis: 0; - flex-direction: column; - justify-content: space-between; - gap: 8px; - padding: 12px; - cursor: pointer; - user-select: none; - border-bottom: 1px solid var(--ig-gray-300); - - &--selected { - border-bottom: 3px solid var(--ig-primary-500); - } - - &:hover { - background: hsl(from var(--ig-gray-100) h s l/0.5); - } -} - -.tab-header { - display: flex; - flex-direction: row; - gap: 8px; - color: var(--ig-gray-900); - font-size: 20px; - font-weight: 600; - line-height: 24px; - letter-spacing: 0.15px; - --ig-size: var(--ig-size-medium); - - &--disabled { - color: var(--ig-gray-700) !important; - } -} - -.tab-content { - display: flex; - flex-direction: column; - gap: 4px; - color: var(--ig-gray-900); - font-size: 14px; - font-weight: 400; - font-family: "aktiv-grotesk", sans-serif; - line-height: 20px; - letter-spacing: 0.25px; - - &--disabled { - color: var(--ig-gray-700) !important; - } -} - -.tab-actions { - display: flex; - flex-direction: row; - align-items: center; - justify-content: space-between; - --ig-size: var(--ig-size-small); - --disabled-icon-color: #ffffff; - - a { - padding-bottom: 2px; - background: linear-gradient( - 0deg, - var(--ig-primary-500), - var(--ig-primary-500) - ) - no-repeat right bottom / 0 var(--bg-h); - transition: background-size 350ms; - --bg-h: 2px; - - &:where(:hover, :focus-visible) { - background-size: 100% var(--bg-h); - background-position-x: left; - } - } - - .link--disabled { - color: var(--ig-primary-200); - background: none !important; - background-size: 0% var(--bg-h) !important; - } - @include css-vars($custom-icon-button-theme); -} - -.learn-text { - text-decoration: none; - color: var(--ig-primary-500); - font-size: 14px; - font-weight: 700; - font-family: "aktiv-grotesk", sans-serif; - line-height: 20px; -} diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 0c04cb5..9c2ad90 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,79 +1,13 @@ import { CommonModule } from '@angular/common'; import { Component } from '@angular/core'; -import { RouterLinkActive, RouterModule } from '@angular/router'; -import { IgxCardModule, IgxChipComponent, IgxIconButtonDirective, IgxIconComponent, IgxRippleDirective, IgxTabsModule, IgxTooltipDirective, IgxTooltipModule } from 'igniteui-angular'; +import { RouterModule } from '@angular/router'; -interface TabInfo { - title: string; - theme: string; - content: string; - moreLink: string; - downloadLink: string; -} @Component({ selector: 'app-root', - imports: [CommonModule, RouterModule, IgxChipComponent, IgxIconComponent, IgxRippleDirective, - IgxIconButtonDirective, IgxTabsModule, IgxCardModule,RouterLinkActive, IgxTooltipModule ], + imports: [CommonModule, RouterModule ], templateUrl: './app.component.html', styleUrl: './app.component.scss' }) export class AppComponent { title = 'GridDemos'; - public tabInfo = new Map([ - ['inventory', { - title: "ERP/ Inventory", - theme: "Material Light", - content: "Tracking and managing quantity, location and details of products in stock.", - moreLink: "https://github.com/IgniteUI/grid-demos/tree/vnext/projects/erp-hgrid", - downloadLink: "" - }], - ['hr-portal', { - title: "Org Chart/HR Portal", - theme: "Fluent Light", - content: "Displaying company's hierarchical structure and showing employees data.", - moreLink: "https://github.com/IgniteUI/grid-demos/tree/vnext/projects/hr-portal", - downloadLink: "" - }], - ['finance', { - title: "Financial Portfolio", - theme: "Bootstrap Light", - content: "Asset tracking, profit and loss analysis, featuring interactive dynamic charts.", - moreLink: "https://github.com/IgniteUI/grid-demos/tree/vnext/projects/finance-grid", - downloadLink: "" - }], - ['sales', { - title: "Sales Dashboard", - theme: "Indigo Light", - content: "For trend analysis, KPIs and viewing sales summaries by region, product, etc.", - moreLink: "https://github.com/IgniteUI/grid-demos/tree/vnext/projects/sales-grid", - downloadLink: "" - }], - ['fleet', { - title: "Fleet Management", - theme: "Material Dark", - content: "A master-detail grid for managing vehicle acquisition, operations, and maintenance.", - moreLink: "https://github.com/IgniteUI/grid-demos/tree/vnext/projects/fleet-management-grid", - downloadLink: "" - }], - ]); - - public onLinkClick(event: MouseEvent) { - const targetHTML = event.currentTarget as HTMLAnchorElement; - if (!targetHTML.className.includes("--disabled")) { - window.open(targetHTML.href, '_blank')?.focus(); - } - - event.preventDefault(); - event.stopPropagation(); - } - - public onDownloadClick(event: MouseEvent, tabName: string) { - const targetHTML = event.currentTarget as HTMLAnchorElement; - if (!targetHTML.className.includes("--disabled")) { - console.log("Downloading app source!"); - } - - event.preventDefault(); - event.stopPropagation(); - } } diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts index 03e13a0..0da2feb 100644 --- a/src/app/app.routes.ts +++ b/src/app/app.routes.ts @@ -4,12 +4,50 @@ import { HrPortalViewComponent } from './views/hr-portal/hr-portal-view.componen import { FinanceViewComponent } from './views/finance/finance-view.component'; import { ErpHGridViewComponent } from './views/erp-hgrid/erp-hgrid-view.component'; import { FleetManagementViewComponent } from './views/fleet-management/fleet-management-view.component'; +import { HomeComponent } from './views/home/home.component'; export const routes: Routes = [ { path: '', pathMatch: 'full', - redirectTo: 'inventory' + redirectTo: 'home' + }, + { + path: 'home', + title: "home", + component: HomeComponent, + children: [ + { + path: '', + pathMatch: 'full', + redirectTo: 'inventory' + }, + { + path: 'inventory', + title: "Inventory", + component: ErpHGridViewComponent + }, + { + path: 'hr-portal', + title: "HR Portal", + component: HrPortalViewComponent + }, + { + path: 'finance', + title: "Finance", + component: FinanceViewComponent + }, + { + path: 'sales', + title: "Sales", + component: SalesViewComponent + }, + { + path: 'fleet', + title: "Fleet Management", + component: FleetManagementViewComponent + } + ] }, { path: 'inventory', diff --git a/src/app/views/home/home.component.html b/src/app/views/home/home.component.html new file mode 100644 index 0000000..eec5837 --- /dev/null +++ b/src/app/views/home/home.component.html @@ -0,0 +1,42 @@ +
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+ + +
+
+ {{ tabInfo.get(tabName)?.title }} + {{ tabInfo.get(tabName)?.theme }} +
+
+ {{ tabInfo.get(tabName)?.content }} +
+
+ Learn more + +
+
+ + +
+ Download sample. +
diff --git a/src/app/views/home/home.component.scss b/src/app/views/home/home.component.scss new file mode 100644 index 0000000..4d02023 --- /dev/null +++ b/src/app/views/home/home.component.scss @@ -0,0 +1,146 @@ +@use "igniteui-angular/theming" as *; + +$custom-icon-button-theme: icon-button-theme( + $background: #212121, + $foreground: #ffffff, + $disabled-background: #9e9e9e, + $disabled-foreground: #ffffff +); + +:host { + display: block; + width: 100%; + height: 100%; +} + +.demo-container { + width: 100%; + height: 100vh; + display: flex; + flex-direction: column; + align-items: center; + gap: 24px; + igx-chip { + --igx-chip-hover-background: var(--ig-gray-300); + --igx-chip-focus-background: var(--ig-gray-300); + } +} + +.router-container { + width: 100%; + overflow: hidden; + display: flex; + flex: 1; +} + +.tab-container { + width: 100%; + min-height: 132px; + flex-shrink: 0; + padding: 16px; + display: flex; + flex-direction: row; + justify-content: space-between; + background-color: var(--ig-surface-500); +} + +.tab-item-container { + height: 100%; + display: inline-flex; +} + +.tab-item { + height: 100%; + display: flex; + flex-grow: 1; + flex-basis: 0; + flex-direction: column; + justify-content: space-between; + gap: 8px; + padding: 12px; + cursor: pointer; + user-select: none; + border-bottom: 1px solid var(--ig-gray-300); + + &--selected { + border-bottom: 3px solid var(--ig-primary-500); + } + + &:hover { + background: hsl(from var(--ig-gray-100) h s l/0.5); + } +} + +.tab-header { + display: flex; + flex-direction: row; + gap: 8px; + color: var(--ig-gray-900); + font-size: 20px; + font-weight: 600; + line-height: 24px; + letter-spacing: 0.15px; + --ig-size: var(--ig-size-medium); + + &--disabled { + color: var(--ig-gray-700) !important; + } +} + +.tab-content { + display: flex; + flex-direction: column; + gap: 4px; + color: var(--ig-gray-900); + font-size: 14px; + font-weight: 400; + font-family: "aktiv-grotesk", sans-serif; + line-height: 20px; + letter-spacing: 0.25px; + + &--disabled { + color: var(--ig-gray-700) !important; + } +} + +.tab-actions { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + --ig-size: var(--ig-size-small); + --disabled-icon-color: #ffffff; + + a { + padding-bottom: 2px; + background: linear-gradient( + 0deg, + var(--ig-primary-500), + var(--ig-primary-500) + ) + no-repeat right bottom / 0 var(--bg-h); + transition: background-size 350ms; + --bg-h: 2px; + + &:where(:hover, :focus-visible) { + background-size: 100% var(--bg-h); + background-position-x: left; + } + } + + .link--disabled { + color: var(--ig-primary-200); + background: none !important; + background-size: 0% var(--bg-h) !important; + } + @include css-vars($custom-icon-button-theme); +} + +.learn-text { + text-decoration: none; + color: var(--ig-primary-500); + font-size: 14px; + font-weight: 700; + font-family: "aktiv-grotesk", sans-serif; + line-height: 20px; +} diff --git a/src/app/views/home/home.component.ts b/src/app/views/home/home.component.ts new file mode 100644 index 0000000..dee2dac --- /dev/null +++ b/src/app/views/home/home.component.ts @@ -0,0 +1,81 @@ +import { Component, ViewEncapsulation } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { RouterLinkActive, RouterModule } from '@angular/router'; +import { IgxCardModule, IgxChipComponent, IgxIconButtonDirective, IgxIconComponent, IgxRippleDirective, IgxTabsModule, IgxTooltipModule } from 'igniteui-angular'; + +interface TabInfo { + title: string; + theme: string; + content: string; + moreLink: string; + downloadLink: string; +} + +@Component({ + standalone: true, + selector: 'home-view', + imports: [CommonModule, RouterModule, RouterLinkActive, IgxChipComponent, IgxIconComponent, + IgxRippleDirective, IgxIconButtonDirective, IgxTabsModule, IgxTooltipModule], + templateUrl: './home.component.html', + styleUrl: './home.component.scss', + encapsulation: ViewEncapsulation.None +}) +export class HomeComponent { + public tabInfo = new Map([ + ['inventory', { + title: "ERP/ Inventory", + theme: "Material Light", + content: "Tracking and managing quantity, location and details of products in stock.", + moreLink: "https://github.com/IgniteUI/grid-demos/tree/vnext/projects/erp-hgrid", + downloadLink: "" + }], + ['hr-portal', { + title: "Org Chart/HR Portal", + theme: "Fluent Light", + content: "Displaying company's hierarchical structure and showing employees data.", + moreLink: "https://github.com/IgniteUI/grid-demos/tree/vnext/projects/hr-portal", + downloadLink: "" + }], + ['finance', { + title: "Financial Portfolio", + theme: "Bootstrap Light", + content: "Asset tracking, profit and loss analysis, featuring interactive dynamic charts.", + moreLink: "https://github.com/IgniteUI/grid-demos/tree/vnext/projects/finance-grid", + downloadLink: "" + }], + ['sales', { + title: "Sales Dashboard", + theme: "Indigo Light", + content: "For trend analysis, KPIs and viewing sales summaries by region, product, etc.", + moreLink: "https://github.com/IgniteUI/grid-demos/tree/vnext/projects/sales-grid", + downloadLink: "" + }], + ['fleet', { + title: "Fleet Management", + theme: "Material Dark", + content: "A master-detail grid for managing vehicle acquisition, operations, and maintenance.", + moreLink: "https://github.com/IgniteUI/grid-demos/tree/vnext/projects/fleet-management-grid", + downloadLink: "" + }], + ]); + + public onLinkClick(event: MouseEvent) { + const targetHTML = event.currentTarget as HTMLAnchorElement; + if (!targetHTML.className.includes("--disabled")) { + window.open(targetHTML.href, '_blank')?.focus(); + } + + event.preventDefault(); + event.stopPropagation(); + } + + public onDownloadClick(event: MouseEvent, tabName: string) { + const targetHTML = event.currentTarget as HTMLAnchorElement; + if (!targetHTML.className.includes("--disabled")) { + console.log("Downloading app source!"); + } + + event.preventDefault(); + event.stopPropagation(); + } +} diff --git a/src/server.ts b/src/server.ts index 1c32aff..2733db2 100644 --- a/src/server.ts +++ b/src/server.ts @@ -9,70 +9,9 @@ import express from 'express'; import { dirname, resolve } from 'node:path'; import { fileURLToPath } from 'node:url'; -// Non Node.js based server for SSG const angularApp = new AngularAppEngine(); export const reqHandler = createRequestHandler(async (req: Request) => { const res: Response|null = await angularApp.handle(req); return res; }); - -// ------------------------------------------------------ -// Uncomment all bellow for Node.js based server for SSR and comment above. - -// const serverDistFolder = dirname(fileURLToPath(import.meta.url)); -// const browserDistFolder = resolve(serverDistFolder, '../browser'); - -// const app = express(); -// const angularApp = new AngularNodeAppEngine(); - -// /** -// * Example Express Rest API endpoints can be defined here. -// * Uncomment and define endpoints as necessary. -// * -// * Example: -// * ```ts -// * app.get('/api/**', (req, res) => { -// * // Handle API request -// * }); -// * ``` -// */ - -// /** -// * Serve static files from /browser -// */ -// app.use( -// express.static(browserDistFolder, { -// maxAge: '1y', -// index: false, -// redirect: false, -// }), -// ); - -// /** -// * Handle all other requests by rendering the Angular application. -// */ -// app.use('/**', (req, res, next) => { -// angularApp -// .handle(req) -// .then((response) => -// response ? writeResponseToNodeResponse(response, res) : next(), -// ) -// .catch(next); -// }); - -// /** -// * Start the server if this module is the main entry point. -// * The server listens on the port defined by the `PORT` environment variable, or defaults to 4000. -// */ -// if (isMainModule(import.meta.url)) { -// const port = process.env['PORT'] || 4000; -// app.listen(port, () => { -// console.log(`Node Express server listening on http://localhost:${port}`); -// }); -// } - -// /** -// * The request handler used by the Angular CLI (dev-server and during build). -// */ -// export const reqHandler = createNodeRequestHandler(app);