diff --git a/package-lock.json b/package-lock.json index 0e6d487..5f255c6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,6 +16,8 @@ "@angular/platform-browser": "^18.0.0", "@angular/platform-browser-dynamic": "^18.0.0", "@angular/router": "^18.0.0", + "primeicons": "^7.0.0", + "primeng": "^17.18.0", "rxjs": "~7.8.0", "tslib": "^2.3.0" }, @@ -12914,6 +12916,26 @@ "url": "https://github.com/chalk/ansi-styles?sponsor=1" } }, + "node_modules/primeicons": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/primeicons/-/primeicons-7.0.0.tgz", + "integrity": "sha512-jK3Et9UzwzTsd6tzl2RmwrVY/b8raJ3QZLzoDACj+oTJ0oX7L9Hy+XnVwgo4QVKlKpnP/Ur13SXV/pVh4LzaDw==" + }, + "node_modules/primeng": { + "version": "17.18.0", + "resolved": "https://registry.npmjs.org/primeng/-/primeng-17.18.0.tgz", + "integrity": "sha512-EcvU/0Ex9QoBR6g6db9fDTCTAmzokW70TV5Oroy2gdvXRr3eqlflnOBoArQsmxTaw1oxSsu68YVj3RvcKYWhTg==", + "dependencies": { + "tslib": "^2.3.0" + }, + "peerDependencies": { + "@angular/common": "^17.0.0 || ^18.0.0", + "@angular/core": "^17.0.0 || ^18.0.0", + "@angular/forms": "^17.0.0 || ^18.0.0", + "rxjs": "^6.0.0 || ^7.8.1", + "zone.js": "~0.14.0" + } + }, "node_modules/proc-log": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/proc-log/-/proc-log-4.2.0.tgz", diff --git a/package.json b/package.json index d8c94b7..9fe82ca 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,8 @@ "@angular/platform-browser": "^18.0.0", "@angular/platform-browser-dynamic": "^18.0.0", "@angular/router": "^18.0.0", + "primeicons": "^7.0.0", + "primeng": "^17.18.0", "rxjs": "~7.8.0", "tslib": "^2.3.0" }, diff --git a/src/app/app.component.html b/src/app/app.component.html index 7911c13..aba7bee 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,3 +1,2 @@ -

Hello world!

- + diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts index 1eea701..0fbaeab 100644 --- a/src/app/app.component.spec.ts +++ b/src/app/app.component.spec.ts @@ -19,6 +19,6 @@ describe('AppComponent', () => { it(`should have the right title`, () => { const fixture = TestBed.createComponent(AppComponent); const app = fixture.componentInstance; - expect(app.title).toEqual('component-library-demo'); + expect(app.title).toEqual('121 Portal | Component Library Demo'); }); }); diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 076eee4..c3a9c8d 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,14 +1,15 @@ import { ChangeDetectionStrategy, Component } from '@angular/core'; import { RouterOutlet } from '@angular/router'; +import { HeaderComponent } from './components/header/header.component'; @Component({ selector: 'app-root', standalone: true, - imports: [RouterOutlet], + imports: [RouterOutlet, HeaderComponent], templateUrl: './app.component.html', styleUrl: './app.component.scss', changeDetection: ChangeDetectionStrategy.OnPush, }) export class AppComponent { - title = 'component-library-demo'; + title = '121 Portal | Component Library Demo'; } diff --git a/src/app/app.config.ts b/src/app/app.config.ts index a143f71..6e23405 100644 --- a/src/app/app.config.ts +++ b/src/app/app.config.ts @@ -3,6 +3,7 @@ import { provideExperimentalZonelessChangeDetection, } from '@angular/core'; import { provideRouter } from '@angular/router'; +import { provideAnimations } from '@angular/platform-browser/animations'; import { routes } from './app.routes'; @@ -10,5 +11,6 @@ export const appConfig: ApplicationConfig = { providers: [ provideRouter(routes), provideExperimentalZonelessChangeDetection(), + provideAnimations(), ], }; diff --git a/src/app/components/header/header.component.html b/src/app/components/header/header.component.html new file mode 100644 index 0000000..30aeb06 --- /dev/null +++ b/src/app/components/header/header.component.html @@ -0,0 +1,38 @@ + + + +

121 Portal

+ + +
+ + + +
+ + + +

Sidebar

+

Lorem ipsum dolor sit amet...

+ diff --git a/src/app/components/header/header.component.scss b/src/app/components/header/header.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/components/header/header.component.spec.ts b/src/app/components/header/header.component.spec.ts new file mode 100644 index 0000000..0e0ddc7 --- /dev/null +++ b/src/app/components/header/header.component.spec.ts @@ -0,0 +1,24 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { HeaderComponent } from './header.component'; +import { provideExperimentalZonelessChangeDetection } from '@angular/core'; + +describe('HeaderComponent', () => { + let component: HeaderComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [HeaderComponent], + providers: [provideExperimentalZonelessChangeDetection()], + }).compileComponents(); + + fixture = TestBed.createComponent(HeaderComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/header/header.component.ts b/src/app/components/header/header.component.ts new file mode 100644 index 0000000..3d13889 --- /dev/null +++ b/src/app/components/header/header.component.ts @@ -0,0 +1,16 @@ +import { ChangeDetectionStrategy, Component } from '@angular/core'; +import { ButtonModule } from 'primeng/button'; +import { ToolbarModule } from 'primeng/toolbar'; +import { SidebarModule } from 'primeng/sidebar'; + +@Component({ + selector: 'app-header', + standalone: true, + imports: [ButtonModule, ToolbarModule, SidebarModule], + templateUrl: './header.component.html', + styleUrl: './header.component.scss', + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class HeaderComponent { + sidebarVisible = false; +} diff --git a/src/app/pages/homepage/homepage.component.html b/src/app/pages/homepage/homepage.component.html index 1dc1d5a..5813e5b 100644 --- a/src/app/pages/homepage/homepage.component.html +++ b/src/app/pages/homepage/homepage.component.html @@ -1 +1,43 @@ -

homepage works!

+
+
+ +
+
+
+
+
+ + +
+ + + +
+
+ +
+ + + + + +
+
+
diff --git a/src/app/pages/homepage/homepage.component.ts b/src/app/pages/homepage/homepage.component.ts index 7af5a74..ee0d163 100644 --- a/src/app/pages/homepage/homepage.component.ts +++ b/src/app/pages/homepage/homepage.component.ts @@ -1,11 +1,85 @@ import { ChangeDetectionStrategy, Component } from '@angular/core'; +import { MenuItem } from 'primeng/api'; +import { ButtonModule } from 'primeng/button'; +import { TabMenuModule } from 'primeng/tabmenu'; +import { IconFieldModule } from 'primeng/iconfield'; +import { InputIconModule } from 'primeng/inputicon'; +import { InputTextModule } from 'primeng/inputtext'; +import { DropdownModule } from 'primeng/dropdown'; +import { FormsModule } from '@angular/forms'; +import { TabViewModule } from 'primeng/tabview'; +import { SelectButtonModule } from 'primeng/selectbutton'; +import { SplitButtonModule } from 'primeng/splitbutton'; +import { MenubarModule } from 'primeng/menubar'; @Component({ selector: 'app-homepage', standalone: true, - imports: [], + imports: [ + FormsModule, + ButtonModule, + TabMenuModule, + TabViewModule, + SelectButtonModule, + IconFieldModule, + InputIconModule, + InputTextModule, + DropdownModule, + SplitButtonModule, + MenubarModule, + ], templateUrl: './homepage.component.html', styleUrl: './homepage.component.scss', changeDetection: ChangeDetectionStrategy.OnPush, }) -export class HomepageComponent {} +export class HomepageComponent { + navMenuItems: MenuItem[] = [ + { + label: 'Overview | Participants', + }, + { + label: 'Payments', + routerLink: '/', // Just throwing this in there to make one selected by default + }, + { + label: 'Monitoring', + }, + ]; + + paymentStatuses = [ + { + label: 'All payments', + value: 'all', + }, + { + label: 'Waiting for approval', + value: 'waiting', + }, + { + label: 'In progress', + value: 'in-progress', + }, + { + label: 'Completed', + value: 'completed', + }, + ]; + selectedPaymentStatus = 'all'; + + sortOptions = [ + { + name: 'Sort By: Last Updated', + value: 'newest', + }, + { + name: 'Sort By: Name', + value: 'name', + }, + ]; + selectedSortOption = 'newest'; + + downloadOptions = [ + { label: 'Unused Vouchers' }, + { label: 'Debit Card Usage' }, + ]; +} diff --git a/src/styles.scss b/src/styles.scss index d3a1a9a..db65506 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1,4 +1,15 @@ -/* You can add global styles to this file, and also import other style files */ -@tailwind base; -@tailwind components; -@tailwind utilities; +@layer tailwind-base, primeng, tailwind-utilities; + +// Please take note of the order in which these are imported +@import "tailwindcss/base.css" layer(tailwind-base); + +@import "primeng/resources/primeng.css"; +@import "primeng/resources/themes/tailwind-light/theme.css"; +@import "primeicons/primeicons.css"; + +@import "tailwindcss/components.css" layer(tailwind-utilities); +@import "tailwindcss/utilities.css" layer(tailwind-utilities); + +body { + @apply bg-grey-100; +}