carloshra/nexus-spa
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Code format

Browse Source
This commit is contained in:
Çetin
2025-01-07 17:29:51 +03:00
parent e3bcb0fdb6
commit 44c2361564
49 changed files with 1536 additions and 1723 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
.vscode/extensions.json vendored
View File

@@ -1,4 +0,0 @@
{
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
"recommendations": ["angular.ng-template"]
}

20
.vscode/launch.json vendored
View File

@@ -1,20 +0,0 @@
{
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"name": "ng serve",
"type": "chrome",
"request": "launch",
"preLaunchTask": "npm: start",
"url": "http://localhost:4200/"
},
{
"name": "ng test",
"type": "chrome",
"request": "launch",
"preLaunchTask": "npm: test",
"url": "http://localhost:9876/debug.html"
}
]
}

42
.vscode/tasks.json vendored
View File

@@ -1,42 +0,0 @@
{
// For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
"version": "2.0.0",
"tasks": [
{
"type": "npm",
"script": "start",
"isBackground": true,
"problemMatcher": {
"owner": "typescript",
"pattern": "$tsc",
"background": {
"activeOnStart": true,
"beginsPattern": {
"regexp": "(.*?)"
},
"endsPattern": {
"regexp": "bundle generation complete"
}
}
}
},
{
"type": "npm",
"script": "test",
"isBackground": true,
"problemMatcher": {
"owner": "typescript",
"pattern": "$tsc",
"background": {
"activeOnStart": true,
"beginsPattern": {
"regexp": "(.*?)"
},
"endsPattern": {
"regexp": "bundle generation complete"
}
}
}
}
]
}

1
package.json
View File

@@ -6,6 +6,7 @@
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"format": "prettier --write \"**/*.{js,mjs,ts,mts,d.ts,html}\" --cache",
"test": "ng test"
},
"private": true,

2
src/app.component.ts
View File

@@ -5,6 +5,6 @@ import {RouterModule} from '@angular/router';
selector: 'app-root',
standalone: true,
imports: [RouterModule],
template:`<router-outlet></router-outlet>`,
template: `<router-outlet></router-outlet>`
})
export class AppComponent {}

2
src/app.routes.ts
View File

@@ -19,5 +19,5 @@ export const appRoutes: Routes = [
{ path: 'landing', component: Landing },
{ path: 'notfound', component: Notfound },
{ path: 'auth', loadChildren: () => import('./app/pages/auth/auth.routes') },
{ path: '**', redirectTo: '/notfound' },
{ path: '**', redirectTo: '/notfound' }
];

8
src/app/layout/core/app.configurator.ts
View File

@@ -2,13 +2,13 @@ import { CommonModule, isPlatformBrowser } from '@angular/common';
import { Component, computed, inject, PLATFORM_ID } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { $t, updatePreset, updateSurfacePalette } from '@primeng/themes';
import Aura from '@primeng/themes/aura';
import Lara from '@primeng/themes/lara';
import Material from '@primeng/themes/material';
import Nora from '@primeng/themes/nora';
import { PrimeNG } from 'primeng/config';
import { SelectButtonModule } from 'primeng/selectbutton';
import { LayoutService } from '../service/layout.service';
import Aura from '@primeng/themes/aura';
import Material from '@primeng/themes/material';
import Lara from '@primeng/themes/lara';
import Nora from '@primeng/themes/nora';
const presets = {
Aura,

14
src/app/layout/core/app.floatingconfigurator.ts
View File

@@ -11,21 +11,11 @@ import { LayoutService} from '../service/layout.service';
<div class="fixed flex gap-4 top-8 right-8">
<p-button type="button" (onClick)="toggleDarkMode()" [rounded]="true" [icon]="isDarkTheme() ? 'pi pi-moon' : 'pi pi-sun'" severity="secondary" />
<div class="relative">
<p-button
icon="pi pi-palette"
pStyleClass="@next"
enterFromClass="hidden"
enterActiveClass="animate-scalein"
leaveToClass="hidden"
leaveActiveClass="animate-fadeout"
[hideOnOutsideClick]="true"
type="button"
rounded
/>
<p-button icon="pi pi-palette" pStyleClass="@next" enterFromClass="hidden" enterActiveClass="animate-scalein" leaveToClass="hidden" leaveActiveClass="animate-fadeout" [hideOnOutsideClick]="true" type="button" rounded />
<app-configurator />
</div>
</div>
`,
`
})
export class AppFloatingConfigurator {
LayoutService = inject(LayoutService);

2
src/app/layout/core/app.footer.ts
View File

@@ -6,6 +6,6 @@ import { Component } from '@angular/core';
template: `<div class="layout-footer">
SAKAI by
<a href="https://primeng.org" target="_blank" rel="noopener noreferrer" class="text-primary font-bold hover:underline">PrimeNG</a>
</div>`,
</div>`
})
export class AppFooter {}

12
src/app/layout/core/app.menu.ts
View File

@@ -7,21 +7,15 @@ import { AppMenuitem } from './app.menuitem';
@Component({
selector: 'app-menu',
standalone: true,
imports: [
CommonModule,
AppMenuitem,
RouterModule
],
imports: [CommonModule, AppMenuitem, RouterModule],
template: `<ul class="layout-menu">
<ng-container *ngFor="let item of model; let i = index;">
<ng-container *ngFor="let item of model; let i = index">
<li app-menuitem *ngIf="!item.separator" [item]="item" [index]="i" [root]="true"></li>
<li *ngIf="item.separator" class="menu-separator"></li>
</ng-container>
</ul>
`,
</ul> `
})
export class AppMenu {
model: MenuItem[] = [];
ngOnInit() {

62
src/app/layout/core/app.menuitem.ts
View File

@@ -15,17 +15,29 @@ import { LayoutService } from '../service/layout.service';
template: `
<ng-container>
<div *ngIf="root && item.visible !== false" class="layout-menuitem-root-text">{{ item.label }}</div>
<a *ngIf="(!item.routerLink || item.items) && item.visible !== false" [attr.href]="item.url" (click)="itemClick($event)"
[ngClass]="item.styleClass" [attr.target]="item.target" tabindex="0" pRipple>
<a *ngIf="(!item.routerLink || item.items) && item.visible !== false" [attr.href]="item.url" (click)="itemClick($event)" [ngClass]="item.styleClass" [attr.target]="item.target" tabindex="0" pRipple>
<i [ngClass]="item.icon" class="layout-menuitem-icon"></i>
<span class="layout-menuitem-text">{{ item.label }}</span>
<i class="pi pi-fw pi-angle-down layout-submenu-toggler" *ngIf="item.items"></i>
</a>
<a *ngIf="(item.routerLink && !item.items) && item.visible !== false" (click)="itemClick($event)" [ngClass]="item.styleClass"
[routerLink]="item.routerLink" routerLinkActive="active-route" [routerLinkActiveOptions]="item.routerLinkActiveOptions||{ paths: 'exact', queryParams: 'ignored', matrixParams: 'ignored', fragment: 'ignored' }"
[fragment]="item.fragment" [queryParamsHandling]="item.queryParamsHandling" [preserveFragment]="item.preserveFragment"
[skipLocationChange]="item.skipLocationChange" [replaceUrl]="item.replaceUrl" [state]="item.state" [queryParams]="item.queryParams"
[attr.target]="item.target" tabindex="0" pRipple>
<a
*ngIf="item.routerLink && !item.items && item.visible !== false"
(click)="itemClick($event)"
[ngClass]="item.styleClass"
[routerLink]="item.routerLink"
routerLinkActive="active-route"
[routerLinkActiveOptions]="item.routerLinkActiveOptions || { paths: 'exact', queryParams: 'ignored', matrixParams: 'ignored', fragment: 'ignored' }"
[fragment]="item.fragment"
[queryParamsHandling]="item.queryParamsHandling"
[preserveFragment]="item.preserveFragment"
[skipLocationChange]="item.skipLocationChange"
[replaceUrl]="item.replaceUrl"
[state]="item.state"
[queryParams]="item.queryParams"
[attr.target]="item.target"
tabindex="0"
pRipple
>
<i [ngClass]="item.icon" class="layout-menuitem-icon"></i>
<span class="layout-menuitem-text">{{ item.label }}</span>
<i class="pi pi-fw pi-angle-down layout-submenu-toggler" *ngIf="item.items"></i>
@@ -40,19 +52,24 @@ import { LayoutService } from '../service/layout.service';
`,
animations: [
trigger('children', [
state('collapsed', style({
state(
'collapsed',
style({
height: '0'
})),
state('expanded', style({
})
),
state(
'expanded',
style({
height: '*'
})),
})
),
transition('collapsed <=> expanded', animate('400ms cubic-bezier(0.86, 0, 0.07, 1)'))
])
],
providers: [LayoutService],
providers: [LayoutService]
})
export class AppMenuitem {
@Input() item!: MenuItem;
@Input() index!: number;
@@ -67,15 +84,17 @@ export class AppMenuitem {
menuResetSubscription: Subscription;
key: string = "";
key: string = '';
constructor(public router: Router, private layoutService: LayoutService) {
this.menuSourceSubscription = this.layoutService.menuSource$.subscribe(value => {
constructor(
public router: Router,
private layoutService: LayoutService
) {
this.menuSourceSubscription = this.layoutService.menuSource$.subscribe((value) => {
Promise.resolve(null).then(() => {
if (value.routeEvent) {
this.active = (value.key === this.key || value.key.startsWith(this.key + '-')) ? true : false;
}
else {
this.active = value.key === this.key || value.key.startsWith(this.key + '-') ? true : false;
} else {
if (value.key !== this.key && !value.key.startsWith(this.key + '-')) {
this.active = false;
}
@@ -87,8 +106,7 @@ export class AppMenuitem {
this.active = false;
});
this.router.events.pipe(filter(event => event instanceof NavigationEnd))
.subscribe(params => {
this.router.events.pipe(filter((event) => event instanceof NavigationEnd)).subscribe((params) => {
if (this.item.routerLink) {
this.updateActiveStateFromRoute();
}
@@ -132,7 +150,7 @@ export class AppMenuitem {
}
get submenuAnimation() {
return this.root ? 'expanded' : (this.active ? 'expanded' : 'collapsed');
return this.root ? 'expanded' : this.active ? 'expanded' : 'collapsed';
}
@HostBinding('class.active-menuitem')

9
src/app/layout/core/app.sidebar.ts
View File

@@ -4,13 +4,10 @@ import { AppMenu } from './app.menu';
@Component({
selector: 'app-sidebar',
standalone: true,
imports: [
AppMenu
],
template: `
<div class="layout-sidebar">
imports: [AppMenu],
template: ` <div class="layout-sidebar">
<app-menu></app-menu>
</div>`,
</div>`
})
export class AppSidebar {
constructor(public el: ElementRef) {}

12
src/app/layout/core/app.topbar.ts
View File

@@ -58,15 +58,7 @@ import { LayoutService } from '../service/layout.service';
</div>
</div>
<button
class="layout-topbar-menu-button layout-topbar-action"
pStyleClass="@next"
enterFromClass="hidden"
enterActiveClass="animate-scalein"
leaveToClass="hidden"
leaveActiveClass="animate-fadeout"
[hideOnOutsideClick]="true"
>
<button class="layout-topbar-menu-button layout-topbar-action" pStyleClass="@next" enterFromClass="hidden" enterActiveClass="animate-scalein" leaveToClass="hidden" leaveActiveClass="animate-fadeout" [hideOnOutsideClick]="true">
<i class="pi pi-ellipsis-v"></i>
</button>
@@ -90,7 +82,6 @@ import { LayoutService } from '../service/layout.service';
</div>`
})
export class AppTopbar {
items!: MenuItem[];
constructor(public layoutService: LayoutService) {}
@@ -98,5 +89,4 @@ export class AppTopbar {
toggleDarkMode() {
this.layoutService.layoutConfig.update((state) => ({ ...state, darkTheme: !state.darkTheme }));
}
}

11
src/app/pages/auth/access.ts
View File

@@ -7,15 +7,8 @@ import { AppFloatingConfigurator } from '../../layout/core/app.floatingconfigura
@Component({
selector: 'app-access',
standalone: true,
imports: [
ButtonModule,
RouterModule,
RippleModule,
AppFloatingConfigurator,
ButtonModule,
],
template: `
<app-floating-configurator />
imports: [ButtonModule, RouterModule, RippleModule, AppFloatingConfigurator, ButtonModule],
template: ` <app-floating-configurator />
<div class="bg-surface-50 dark:bg-surface-950 flex items-center justify-center min-h-screen min-w-[100vw] overflow-hidden">
<div class="flex flex-col items-center justify-center">
<div style="border-radius: 56px; padding: 0.3rem; background: linear-gradient(180deg, rgba(247, 149, 48, 0.4) 10%, rgba(247, 149, 48, 0) 30%)">

2
src/app/pages/auth/auth.routes.ts
View File

@@ -6,5 +6,5 @@ import { Error } from './error';
export default [
{ path: 'access', component: Access },
{ path: 'error', component: Error },
{ path: 'login', component: Login},
{ path: 'login', component: Login }
] as Routes;

3
src/app/pages/auth/error.ts
View File

@@ -8,8 +8,7 @@ import { AppFloatingConfigurator } from '../../layout/core/app.floatingconfigura
selector: 'app-error',
imports: [ButtonModule, RippleModule, RouterModule, AppFloatingConfigurator, ButtonModule],
standalone: true,
template: `
<app-floating-configurator />
template: ` <app-floating-configurator />
<div class="bg-surface-50 dark:bg-surface-950 flex items-center justify-center min-h-screen min-w-[100vw] overflow-hidden">
<div class="flex flex-col items-center justify-center">
<div style="border-radius: 56px; padding: 0.3rem; background: linear-gradient(180deg, rgba(233, 30, 99, 0.4) 10%, rgba(33, 150, 243, 0) 30%)">

14
src/app/pages/auth/login.ts
View File

@@ -11,16 +11,7 @@ import { AppFloatingConfigurator } from '../../layout/core/app.floatingconfigura
@Component({
selector: 'app-login',
standalone: true,
imports: [
ButtonModule,
CheckboxModule,
InputTextModule,
PasswordModule,
FormsModule,
RouterModule,
RippleModule,
AppFloatingConfigurator
],
imports: [ButtonModule, CheckboxModule, InputTextModule, PasswordModule, FormsModule, RouterModule, RippleModule, AppFloatingConfigurator],
template: `
<app-floating-configurator />
<div class="bg-surface-50 dark:bg-surface-950 flex items-center justify-center min-h-screen min-w-[100vw] overflow-hidden">
@@ -69,8 +60,7 @@ import { AppFloatingConfigurator } from '../../layout/core/app.floatingconfigura
</div>
</div>
</div>
`,
`
})
export class Login {
email: string = '';

8
src/app/pages/crud/crud.ts
View File

@@ -208,12 +208,12 @@ interface ExportColumn {
<p-confirmdialog [style]="{ width: '450px' }" />
`,
providers: [MessageService, ProductService, ConfirmationService],
providers: [MessageService, ProductService, ConfirmationService]
})
export class Crud implements OnInit {
productDialog: boolean = false;
products = signal<Product[]>([])
products = signal<Product[]>([]);
product!: Product;
@@ -232,7 +232,7 @@ export class Crud implements OnInit {
constructor(
private productService: ProductService,
private messageService: MessageService,
private confirmationService: ConfirmationService,
private confirmationService: ConfirmationService
) {}
exportCSV() {
@@ -294,8 +294,6 @@ export class Crud implements OnInit {
detail: 'Products Deleted',
life: 3000
});
}
});
}

11
src/app/pages/dashboard/components/bestsellingwidget.ts
View File

@@ -6,13 +6,8 @@ import { MenuModule } from 'primeng/menu';
@Component({
standalone: true,
selector: 'app-best-selling-widget',
imports: [
CommonModule,
ButtonModule,
MenuModule,
],
template: `
<div class="card">
imports: [CommonModule, ButtonModule, MenuModule],
template: ` <div class="card">
<div class="flex justify-between items-center mb-6">
<div class="font-semibold text-xl">Best Selling Products</div>
<div>
@@ -94,7 +89,7 @@ import { MenuModule } from 'primeng/menu';
</div>
</li>
</ul>
</div>`,
</div>`
})
export class BestSellingWidget {
menu = null;

7
src/app/pages/dashboard/components/notificationswidget.ts
View File

@@ -5,10 +5,7 @@ import { MenuModule } from 'primeng/menu';
@Component({
standalone: true,
selector: 'app-notifications-widget',
imports: [
ButtonModule,
MenuModule,
],
imports: [ButtonModule, MenuModule],
template: `<div class="card">
<div class="flex items-center justify-between mb-6">
<div class="font-semibold text-xl">Notifications</div>
@@ -73,7 +70,7 @@ import { MenuModule } from 'primeng/menu';
<span class="text-surface-900 dark:text-surface-0 leading-normal"><span class="text-primary font-bold">12</span> users have added your products to their wishlist.</span>
</li>
</ul>
</div>`,
</div>`
})
export class NotificationsWidget {
items = [

14
src/app/pages/dashboard/components/recentsaleswidget.ts
View File

@@ -8,12 +8,7 @@ import { Product, ProductService } from '../../service/product.service';
@Component({
standalone: true,
selector: 'app-recent-sales-widget',
imports: [
CommonModule,
TableModule,
ButtonModule,
RippleModule,
],
imports: [CommonModule, TableModule, ButtonModule, RippleModule],
template: `<div class="card !mb-8">
<div class="font-semibold text-xl mb-4">Recent Sales</div>
<p-table [value]="products" [paginator]="true" [rows]="5" responsiveLayout="scroll">
@@ -28,7 +23,7 @@ import { Product, ProductService } from '../../service/product.service';
<ng-template #body let-product>
<tr>
<td style="width: 15%; min-width: 5rem;">
<img src="https://primefaces.org/cdn/primevue/images/product/{{product.image}}" class="shadow-lg" alt="{{product.name}}" width="50">
<img src="https://primefaces.org/cdn/primevue/images/product/{{ product.image }}" class="shadow-lg" alt="{{ product.name }}" width="50" />
</td>
<td style="width: 35%; min-width: 7rem;">{{ product.name }}</td>
<td style="width: 35%; min-width: 8rem;">{{ product.price | currency: 'USD' }}</td>
@@ -39,15 +34,14 @@ import { Product, ProductService } from '../../service/product.service';
</ng-template>
</p-table>
</div>`,
providers: [ProductService],
providers: [ProductService]
})
export class RecentSalesWidget {
products!: Product[];
constructor(private productService: ProductService) {}
ngOnInit() {
this.productService.getProductsSmall().then(data => this.products = data);
this.productService.getProductsSmall().then((data) => (this.products = data));
}
}

10
src/app/pages/dashboard/components/revenuestreamwidget.ts
View File

@@ -6,13 +6,11 @@ import { LayoutService } from '../../../layout/service/layout.service';
@Component({
standalone: true,
selector: 'app-revenue-stream-widget',
imports: [
ChartModule,
],
imports: [ChartModule],
template: `<div class="card !mb-8">
<div class="font-semibold text-xl mb-4">Revenue Stream</div>
<p-chart type="bar" [data]="chartData" [options]="chartOptions" class="h-80" />
</div>`,
</div>`
})
export class RevenueStreamWidget {
chartData: any;
@@ -22,9 +20,7 @@ export class RevenueStreamWidget {
subscription!: Subscription;
constructor(public layoutService: LayoutService) {
this.subscription = this.layoutService.configUpdate$
.pipe(debounceTime(25))
.subscribe(() => {
this.subscription = this.layoutService.configUpdate$.pipe(debounceTime(25)).subscribe(() => {
this.initChart();
});
}

2
src/app/pages/dashboard/components/statswidget.ts
View File

@@ -64,6 +64,6 @@ import { CommonModule } from '@angular/common';
<span class="text-primary font-medium">85 </span>
<span class="text-muted-color">responded</span>
</div>
</div>`,
</div>`
})
export class StatsWidget {}

2
src/app/pages/dashboard/dashboard.ts
View File

@@ -20,6 +20,6 @@ import { RevenueStreamWidget } from './components/revenuestreamwidget';
<app-notifications-widget />
</div>
</div>
`,
`
})
export class Dashboard {}

63
src/app/pages/documentation/documentation.ts
View File

@@ -10,21 +10,17 @@ import { CommonModule } from '@angular/common';
<div>
<h2>Documentation</h2>
<h4>Getting Started</h4>
<p>Sakai is an application template for Angular and is distributed as a CLI project. Current versions is Angular
v19 with PrimeNG v19. In case CLI is not installed already, use the command below to set it up.</p>
<p>Sakai is an application template for Angular and is distributed as a CLI project. Current versions is Angular v19 with PrimeNG v19. In case CLI is not installed already, use the command below to set it up.</p>
<pre class="app-code"><code>npm install -g &#64;angular/cli</code></pre>
<p>Once CLI is ready in your system, extract the contents of the zip file distribution, cd to the directory,
install the libraries from npm and then execute "ng serve" to run the application in your local
environment.</p>
<p>Once CLI is ready in your system, extract the contents of the zip file distribution, cd to the directory, install the libraries from npm and then execute "ng serve" to run the application in your local environment.</p>
<pre class="app-code"><code>cd sakai
npm install
ng serve</code></pre>
<p>The application should run at <span class="font-semibold">http://localhost:4200/</span>, you may now start
with the development of your application.</p>
<p>The application should run at <span class="font-semibold">http://localhost:4200/</span>, you may now start with the development of your application.</p>
<h5>Important CLI Commands</h5>
<p>Following commands are derived from CLI.</p>
@@ -42,21 +38,18 @@ Run 'ng e2e' to execute the end-to-end tests via [Protractor](http://www.protrac
Run 'ng help' for more options.</code></pre>
<h4>Structure</h4>
<p>Sakai consists of 3 main parts; the application layout, layout assets and PrimeNG component theme assets.
Layout is placed inside the <span class="text-primary font-medium">src/app/layout</span> folder,
and the assets are in the <span class="text-primary font-medium">src/assets/layout</span> folder.
<p>
Sakai consists of 3 main parts; the application layout, layout assets and PrimeNG component theme assets. Layout is placed inside the <span class="text-primary font-medium">src/app/layout</span> folder, and the assets are in the
<span class="text-primary font-medium">src/assets/layout</span> folder.
</p>
<h5>Default Configuration</h5>
<p>Initial layout configuration can be defined at the main app component by injecting the <span
class="text-primary font-medium">LayoutService</span>, this step is optional and only necessary when
customizing the defaults. Note that <span class="text-primary font-medium">theme</span> and
<span class="text-primary font-medium">scale</span> are not reactive since theme is configured outside of
Angular at <strong class="font-semibold">index.html</strong> by default and
initial scale is defined with the <span class="text-primary font-medium">$scale</span> at <strong
class="font-semibold">layout.scss</strong>. When default theme or scale is changed at their files initially,
it is required to configure the layout service with the matching values
to avoid sync issues. </p>
<p>
Initial layout configuration can be defined at the main app component by injecting the <span class="text-primary font-medium">LayoutService</span>, this step is optional and only necessary when customizing the defaults. Note that
<span class="text-primary font-medium">theme</span> and <span class="text-primary font-medium">scale</span> are not reactive since theme is configured outside of Angular at <strong class="font-semibold">index.html</strong> by
default and initial scale is defined with the <span class="text-primary font-medium">$scale</span> at <strong class="font-semibold">layout.scss</strong>. When default theme or scale is changed at their files initially, it is
required to configure the layout service with the matching values to avoid sync issues.
</p>
<pre class="app-code"><code>import &#123; Component, OnInit &#125; from '&#64;angular/core';
import &#123; PrimeNGConfig &#125; from 'primeng/api';
@@ -88,9 +81,10 @@ export class AppComponent implements OnInit &#123;
&#125;</code></pre>
<h5>Menu</h5>
<p>Menu is a separate component defined in <span class="text-primary font-medium">src/app/layout/app.menu.component.ts</span>
file and based on PrimeNG MenuModel API. In order to define the menuitems,
navigate to this file and define your own model as a nested structure.</p>
<p>
Menu is a separate component defined in <span class="text-primary font-medium">src/app/layout/app.menu.component.ts</span> file and based on PrimeNG MenuModel API. In order to define the menuitems, navigate to this file and define
your own model as a nested structure.
</p>
<pre class="app-code"><code>import &#123; OnInit &#125; from '&#64;angular/core';
import &#123; Component &#125; from '&#64;angular/core';
@@ -121,28 +115,24 @@ export class AppMenuComponent implements OnInit &#123;
&#125;</code></pre>
<h4>Integration with Existing Angular CLI Projects</h4>
<p>Sakai structure is designed in a modular way so that it can easily be integrated with your existing
application. We've created a short tutorial with details.</p>
<p>Sakai structure is designed in a modular way so that it can easily be integrated with your existing application. We've created a short tutorial with details.</p>
<div class="video-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/yl2f8KKY204" frameborder="0"
allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/yl2f8KKY204" frameborder="0" allowfullscreen></iframe>
</div>
<h4>Theme</h4>
<p>Sakai provides 34 PrimeNG themes out of the box. Setup of a theme is simple by including the css of theme
to your bundle that are located inside <span
class="text-primary font-medium">assets/layout/styles/theme/</span>
folder such as <span
class="text-primary font-medium">assets/layout/styles/theme/lara-light-indigo/theme.css</span>.</p>
<p>
Sakai provides 34 PrimeNG themes out of the box. Setup of a theme is simple by including the css of theme to your bundle that are located inside <span class="text-primary font-medium">assets/layout/styles/theme/</span> folder such
as <span class="text-primary font-medium">assets/layout/styles/theme/lara-light-indigo/theme.css</span>.
</p>
<p>Another alternative would be creating dynamic bundles, please see the <a
href="https://www.youtube.com/watch?v=5VOuUdDXRsE" class="font-medium text-primary hover:underline">video
tutorial</a> for an example.</p>
<p>Another alternative would be creating dynamic bundles, please see the <a href="https://www.youtube.com/watch?v=5VOuUdDXRsE" class="font-medium text-primary hover:underline">video tutorial</a> for an example.</p>
</div>
</div>
`,
styles: `@media screen and (max-width: 991px) {
styles: `
@media screen and (max-width: 991px) {
.video-container {
position: relative;
width: 100%;
@@ -157,6 +147,7 @@ export class AppMenuComponent implements OnInit &#123;
height: 100%;
}
}
}`
}
`
})
export class Documentation {}

3
src/app/pages/empty/empty.ts
View File

@@ -3,8 +3,7 @@ import { Component } from '@angular/core';
@Component({
selector: 'app-empty',
standalone: true,
template: `
<div class="card">
template: ` <div class="card">
<div class="font-semibold text-xl mb-4">Empty Page</div>
<p>Use this page to start from scratch and place your custom content.</p>
</div>`

9
src/app/pages/landing/components/featureswidget.ts
View File

@@ -4,9 +4,7 @@ import { CommonModule } from '@angular/common';
@Component({
selector: 'features-widget',
standalone: true,
imports: [
CommonModule,
],
imports: [CommonModule],
template: ` <div id="features" class="py-6 px-6 lg:px-20 mt-8 mx-0 lg:mx-20">
<div class="grid grid-cols-12 gap-4 justify-center">
<div class="col-span-12 text-center mt-20 mb-6">
@@ -136,7 +134,6 @@ import { CommonModule } from '@angular/common';
</div>
</div>
</div>
</div>`,
</div>`
})
export class FeaturesWidget {
}
export class FeaturesWidget {}

2
src/app/pages/landing/components/footerwidget.ts
View File

@@ -66,7 +66,7 @@ import { Router, RouterModule } from '@angular/router';
</div>
</div>
</div>
`,
`
})
export class FooterWidget {
constructor(public router: Router) {}

6
src/app/pages/landing/components/herowidget.ts
View File

@@ -20,8 +20,6 @@ import { ButtonModule } from 'primeng/button';
<img src="/demo/images/landing/screen-1.png" alt="Hero Image" class="w-9/12 md:w-auto" />
</div>
</div>
`,
`
})
export class HeroWidget {
}
export class HeroWidget {}

6
src/app/pages/landing/components/highlightswidget.ts
View File

@@ -41,8 +41,6 @@ import { Component } from '@angular/core';
</div>
</div>
</div>
`,
`
})
export class HighlightsWidget {
}
export class HighlightsWidget {}

5
src/app/pages/notfound/notfound.ts
View File

@@ -7,8 +7,7 @@ import { AppFloatingConfigurator } from '../../layout/core/app.floatingconfigura
selector: 'app-notfound',
standalone: true,
imports: [RouterModule, AppFloatingConfigurator, ButtonModule],
template: `
<app-floating-configurator />
template: ` <app-floating-configurator />
<div class="flex items-center justify-center min-h-screen overflow-hidden">
<div class="flex flex-col items-center justify-center">
<svg width="54" height="40" viewBox="0 0 54 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="mb-8 w-32 shrink-0">
@@ -64,6 +63,6 @@ import { AppFloatingConfigurator } from '../../layout/core/app.floatingconfigura
</div>
</div>
</div>
</div>`,
</div>`
})
export class Notfound {}

7
src/app/pages/service/icon.service.ts
View File

@@ -4,7 +4,6 @@ import { map } from 'rxjs/operators';
@Injectable()
export class IconService {
constructor(private http: HttpClient) {}
icons!: any[];
@@ -14,9 +13,11 @@ export class IconService {
apiUrl = 'assets/demo/data/icons.json';
getIcons() {
return this.http.get(this.apiUrl).pipe(map((response: any) => {
return this.http.get(this.apiUrl).pipe(
map((response: any) => {
this.icons = response.icons;
return this.icons;
}));
})
);
}
}

23
src/app/pages/uikit/buttondemo.ts
View File

@@ -1,8 +1,8 @@
import { Component, OnInit } from '@angular/core';
import {ButtonModule} from "primeng/button";
import {ButtonGroupModule} from "primeng/buttongroup";
import {SplitButtonModule} from "primeng/splitbutton";
import {MenuItem} from "primeng/api";
import { ButtonModule } from 'primeng/button';
import { ButtonGroupModule } from 'primeng/buttongroup';
import { SplitButtonModule } from 'primeng/splitbutton';
import { MenuItem } from 'primeng/api';
@Component({
selector: 'app-button-demo',
@@ -174,28 +174,19 @@ import {MenuItem} from "primeng/api";
</div>
</div>
</div>
</div>
`
</div> `
})
export class ButtonDemo implements OnInit {
items: MenuItem[] = [];
loading = [false, false, false, false];
ngOnInit() {
this.items = [
{ label: 'Update', icon: 'pi pi-refresh' },
{ label: 'Delete', icon: 'pi pi-times' },
{ label: 'Angular.io', icon: 'pi pi-info', url: 'http://angular.io' },
{ separator: true },
{ label: 'Setup', icon: 'pi pi-cog' }
];
this.items = [{ label: 'Update', icon: 'pi pi-refresh' }, { label: 'Delete', icon: 'pi pi-times' }, { label: 'Angular.io', icon: 'pi pi-info', url: 'http://angular.io' }, { separator: true }, { label: 'Setup', icon: 'pi pi-cog' }];
}
load(index: number) {
this.loading[index] = true;
setTimeout(() => this.loading[index] = false, 1000);
setTimeout(() => (this.loading[index] = false), 1000);
}
}

65
src/app/pages/uikit/chartdemo.ts
View File

@@ -8,12 +8,9 @@ import { LayoutService } from '../../layout/service/layout.service';
@Component({
selector: 'app-chart-demo',
standalone: true,
imports: [
CommonModule,
ChartModule,
FluidModule
],
template: ` <p-fluid class="grid grid-cols-12 gap-8">
imports: [CommonModule, ChartModule, FluidModule],
template: `
<p-fluid class="grid grid-cols-12 gap-8">
<div class="col-span-12 xl:col-span-6">
<div class="card">
<div class="font-semibold text-xl mb-4">Linear</div>
@@ -51,10 +48,9 @@ import { LayoutService } from '../../layout/service/layout.service';
</div>
</div>
</p-fluid>
`,
`
})
export class ChartDemo {
lineData: any;
barData: any;
@@ -77,9 +73,7 @@ export class ChartDemo {
subscription: Subscription;
constructor(private layoutService: LayoutService) {
this.subscription = this.layoutService.configUpdate$
.pipe(debounceTime(25))
.subscribe(() => {
this.subscription = this.layoutService.configUpdate$.pipe(debounceTime(25)).subscribe(() => {
this.initCharts();
});
}
@@ -141,7 +135,7 @@ export class ChartDemo {
color: surfaceBorder,
drawBorder: false
}
},
}
}
};
@@ -150,17 +144,10 @@ export class ChartDemo {
datasets: [
{
data: [540, 325, 702],
backgroundColor: [
documentStyle.getPropertyValue('--p-indigo-500'),
documentStyle.getPropertyValue('--p-purple-500'),
documentStyle.getPropertyValue('--p-teal-500')
],
hoverBackgroundColor: [
documentStyle.getPropertyValue('--p-indigo-400'),
documentStyle.getPropertyValue('--p-purple-400'),
documentStyle.getPropertyValue('--p-teal-400')
backgroundColor: [documentStyle.getPropertyValue('--p-indigo-500'), documentStyle.getPropertyValue('--p-purple-500'), documentStyle.getPropertyValue('--p-teal-500')],
hoverBackgroundColor: [documentStyle.getPropertyValue('--p-indigo-400'), documentStyle.getPropertyValue('--p-purple-400'), documentStyle.getPropertyValue('--p-teal-400')]
}
]
}]
};
this.pieOptions = {
@@ -183,7 +170,7 @@ export class ChartDemo {
fill: false,
backgroundColor: documentStyle.getPropertyValue('--p-primary-500'),
borderColor: documentStyle.getPropertyValue('--p-primary-500'),
tension: .4
tension: 0.4
},
{
label: 'Second Dataset',
@@ -191,7 +178,7 @@ export class ChartDemo {
fill: false,
backgroundColor: documentStyle.getPropertyValue('--p-primary-200'),
borderColor: documentStyle.getPropertyValue('--p-primary-200'),
tension: .4
tension: 0.4
}
]
};
@@ -222,32 +209,19 @@ export class ChartDemo {
color: surfaceBorder,
drawBorder: false
}
},
}
}
};
this.polarData = {
datasets: [{
data: [
11,
16,
7,
3
],
backgroundColor: [
documentStyle.getPropertyValue('--p-indigo-500'),
documentStyle.getPropertyValue('--p-purple-500'),
documentStyle.getPropertyValue('--p-teal-500'),
documentStyle.getPropertyValue('--p-orange-500')
],
datasets: [
{
data: [11, 16, 7, 3],
backgroundColor: [documentStyle.getPropertyValue('--p-indigo-500'), documentStyle.getPropertyValue('--p-purple-500'), documentStyle.getPropertyValue('--p-teal-500'), documentStyle.getPropertyValue('--p-orange-500')],
label: 'My dataset'
}],
labels: [
'Indigo',
'Purple',
'Teal',
'Orange'
]
}
],
labels: ['Indigo', 'Purple', 'Teal', 'Orange']
};
this.polarOptions = {
@@ -314,5 +288,4 @@ export class ChartDemo {
this.subscription.unsubscribe();
}
}
}

2
src/app/pages/uikit/filedemo.ts
View File

@@ -39,7 +39,6 @@ import { ToastModule } from 'primeng/toast';
providers: [MessageService]
})
export class FileDemo {
uploadedFiles: any[] = [];
constructor(private messageService: MessageService) {}
@@ -55,5 +54,4 @@ export class FileDemo {
onBasicUpload() {
this.messageService.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded with Basic Mode' });
}
}

15
src/app/pages/uikit/formlayoutdemo.ts
View File

@@ -1,10 +1,10 @@
import { Component } from '@angular/core';
import {FluidModule} from "primeng/fluid";
import {InputTextModule} from "primeng/inputtext";
import {ButtonModule} from "primeng/button";
import {SelectModule} from "primeng/select";
import {FormsModule} from "@angular/forms";
import {TextareaModule} from "primeng/textarea";
import { FluidModule } from 'primeng/fluid';
import { InputTextModule } from 'primeng/inputtext';
import { ButtonModule } from 'primeng/button';
import { SelectModule } from 'primeng/select';
import { FormsModule } from '@angular/forms';
import { TextareaModule } from 'primeng/textarea';
@Component({
selector: 'app-formlayout-demo',
@@ -116,7 +116,7 @@ import {TextareaModule} from "primeng/textarea";
</div>
</div>
</div>
</p-fluid>`,
</p-fluid>`
})
export class FormLayoutDemo {
dropdownItems = [
@@ -126,5 +126,4 @@ export class FormLayoutDemo {
];
dropdownItem = null;
}

70
src/app/pages/uikit/inputdemo.ts
View File

@@ -1,30 +1,30 @@
import { Component, inject, OnInit } from '@angular/core';
import {InputTextModule} from "primeng/inputtext";
import {ButtonModule} from "primeng/button";
import {CommonModule} from "@angular/common";
import {FormsModule} from "@angular/forms";
import {CheckboxModule} from "primeng/checkbox";
import {RadioButtonModule} from "primeng/radiobutton";
import {SelectButtonModule} from "primeng/selectbutton";
import {InputGroupModule} from "primeng/inputgroup";
import {FluidModule} from "primeng/fluid";
import {IconFieldModule} from "primeng/iconfield";
import {InputIconModule} from "primeng/inputicon";
import {FloatLabelModule} from "primeng/floatlabel";
import {AutoCompleteModule} from "primeng/autocomplete";
import {InputNumberModule} from "primeng/inputnumber";
import {SliderModule} from "primeng/slider";
import {RatingModule} from "primeng/rating";
import {ColorPickerModule} from "primeng/colorpicker";
import {KnobModule} from "primeng/knob";
import {SelectModule} from "primeng/select";
import {DatePickerModule} from "primeng/datepicker";
import {ToggleSwitchModule} from "primeng/toggleswitch";
import {TreeSelectModule} from "primeng/treeselect";
import {MultiSelectModule} from "primeng/multiselect";
import {ListboxModule} from "primeng/listbox";
import {InputGroupAddonModule} from "primeng/inputgroupaddon";
import {TextareaModule} from "primeng/textarea";
import { InputTextModule } from 'primeng/inputtext';
import { ButtonModule } from 'primeng/button';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { CheckboxModule } from 'primeng/checkbox';
import { RadioButtonModule } from 'primeng/radiobutton';
import { SelectButtonModule } from 'primeng/selectbutton';
import { InputGroupModule } from 'primeng/inputgroup';
import { FluidModule } from 'primeng/fluid';
import { IconFieldModule } from 'primeng/iconfield';
import { InputIconModule } from 'primeng/inputicon';
import { FloatLabelModule } from 'primeng/floatlabel';
import { AutoCompleteModule } from 'primeng/autocomplete';
import { InputNumberModule } from 'primeng/inputnumber';
import { SliderModule } from 'primeng/slider';
import { RatingModule } from 'primeng/rating';
import { ColorPickerModule } from 'primeng/colorpicker';
import { KnobModule } from 'primeng/knob';
import { SelectModule } from 'primeng/select';
import { DatePickerModule } from 'primeng/datepicker';
import { ToggleSwitchModule } from 'primeng/toggleswitch';
import { TreeSelectModule } from 'primeng/treeselect';
import { MultiSelectModule } from 'primeng/multiselect';
import { ListboxModule } from 'primeng/listbox';
import { InputGroupAddonModule } from 'primeng/inputgroupaddon';
import { TextareaModule } from 'primeng/textarea';
import { ToggleButtonModule } from 'primeng/togglebutton';
import { CountryService } from '../service/country.service';
import { NodeService } from '../service/node.service';
@@ -62,8 +62,7 @@ import { TreeNode } from 'primeng/api';
InputGroupAddonModule,
TextareaModule
],
template: `
<p-fluid class="flex flex-col md:flex-row gap-8">
template: ` <p-fluid class="flex flex-col md:flex-row gap-8">
<div class="md:w-1/2">
<div class="card flex flex-col gap-4">
<div class="font-semibold text-xl">InputText</div>
@@ -93,9 +92,7 @@ import { TreeNode } from 'primeng/api';
<textarea pTextarea placeholder="Your Message" [autoResize]="true" rows="3" cols="30"></textarea>
<div class="font-semibold text-xl">AutoComplete</div>
<p-autocomplete [(ngModel)]="selectedAutoValue" [suggestions]="autoFilteredValue" optionLabel="name"
placeholder="Search" dropdown multiple display="chip"
(completeMethod)="searchCountry($event)"/>
<p-autocomplete [(ngModel)]="selectedAutoValue" [suggestions]="autoFilteredValue" optionLabel="name" placeholder="Search" dropdown multiple display="chip" (completeMethod)="searchCountry($event)" />
<div class="font-semibold text-xl">DatePicker</div>
<p-datepicker [showIcon]="true" [showButtonBar]="true" [(ngModel)]="calendarValue"></p-datepicker>
@@ -110,7 +107,6 @@ import { TreeNode } from 'primeng/api';
<p-slider [(ngModel)]="sliderValue" />
<div class="flex flex-row mt-6">
<div class="flex flex-col gap-4 w-1/2">
<div class="font-semibold text-xl">Rating</div>
<p-rating [(ngModel)]="ratingValue" />
@@ -150,8 +146,7 @@ import { TreeNode } from 'primeng/api';
<label for="checkOption1" class="ml-2">Chicago</label>
</div>
<div class="flex items-center">
<p-checkbox id="checkOption2" name="option" value="Los Angeles"
[(ngModel)]="checkboxValue"/>
<p-checkbox id="checkOption2" name="option" value="Los Angeles" [(ngModel)]="checkboxValue" />
<label for="checkOption2" class="ml-2">Los Angeles</label>
</div>
<div class="flex items-center">
@@ -169,8 +164,7 @@ import { TreeNode } from 'primeng/api';
<p-listbox [(ngModel)]="listboxValue" [options]="listboxValues" optionLabel="name" [filter]="true" />
<div class="font-semibold text-xl">Select</div>
<p-select [(ngModel)]="dropdownValue" [options]="dropdownValues" optionLabel="name"
placeholder="Select"/>
<p-select [(ngModel)]="dropdownValue" [options]="dropdownValues" optionLabel="name" placeholder="Select" />
<div class="font-semibold text-xl">MultiSelect</div>
<p-multiselect [(ngModel)]="multiselectValue" [options]="multiselectValues" optionLabel="name" placeholder="Select Countries" [filter]="true">
@@ -304,7 +298,7 @@ export class InputDemo implements OnInit {
toggleValue: boolean = false;
selectButtonValue: any = null
selectButtonValue: any = null;
selectButtonValues: any = [{ name: 'Option 1' }, { name: 'Option 2' }, { name: 'Option 3' }];
@@ -321,7 +315,7 @@ export class InputDemo implements OnInit {
nodeService = inject(NodeService);
ngOnInit() {
this.countryService.getCountries().then(countries => {
this.countryService.getCountries().then((countries) => {
this.autoValue = countries;
});

6
src/app/pages/uikit/messagesdemo.ts
View File

@@ -52,12 +52,11 @@ import { FormsModule } from '@angular/forms';
providers: [MessageService]
})
export class MessagesDemo {
msgs: ToastMessageOptions[] | null = [];
username: string | undefined
username: string | undefined;
email: string | undefined
email: string | undefined;
constructor(private service: MessageService) {}
@@ -96,5 +95,4 @@ export class MessagesDemo {
this.msgs = [];
this.msgs.push({ severity: 'success', summary: 'Success Message', detail: 'Message sent' });
}
}

51
src/app/pages/uikit/panelsdemo.ts
View File

@@ -71,9 +71,9 @@ import { InputIconModule } from 'primeng/inputicon';
<p-accordion-header>Header I</p-accordion-header>
<p-accordion-content>
<p class="m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
</p>
</p-accordion-content>
</p-accordion-panel>
@@ -82,8 +82,9 @@ import { InputIconModule } from 'primeng/inputicon';
<p-accordion-header>Header II</p-accordion-header>
<p-accordion-content>
<p class="m-0">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt
explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non
numquam eius modi.
</p>
</p-accordion-content>
</p-accordion-panel>
@@ -92,8 +93,9 @@ import { InputIconModule } from 'primeng/inputicon';
<p-accordion-header>Header III</p-accordion-header>
<p-accordion-content>
<p class="m-0">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt
explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non
numquam eius modi.
</p>
</p-accordion-content>
</p-accordion-panel>
@@ -110,21 +112,23 @@ import { InputIconModule } from 'primeng/inputicon';
<p-tabpanels>
<p-tabpanel value="0">
<p class="m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
</p>
</p-tabpanel>
<p-tabpanel value="1">
<p class="m-0">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt
explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non
numquam eius modi.
</p>
</p-tabpanel>
<p-tabpanel value="2">
<p class="m-0">
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in
culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident,
similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio
cumque nihil impedit quo minus.
</p>
</p-tabpanel>
</p-tabpanels>
@@ -135,24 +139,16 @@ import { InputIconModule } from 'primeng/inputicon';
<div class="card">
<div class="font-semibold text-xl mb-4">Panel</div>
<p-panel header="Header" [toggleable]="true" class="line-height-3 m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.
</p-panel>
</div>
<div class="card">
<div class="font-semibold text-xl mb-4">Fieldset</div>
<p-fieldset legend="Legend" [toggleable]="true" class="line-height-3 m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.
</p-fieldset>
</div>
@@ -211,7 +207,7 @@ import { InputIconModule } from 'primeng/inputicon';
</p-splitter>
</div>
</div>
`,
`
})
export class PanelsDemo {
items: MenuItem[] = [
@@ -232,5 +228,4 @@ export class PanelsDemo {
icon: 'pi pi-home'
}
];
}

14
src/app/pages/uikit/treedemo.ts
View File

@@ -1,9 +1,9 @@
import { Component, inject, OnInit } from '@angular/core';
import { TreeNode } from 'primeng/api';
import {TreeModule} from "primeng/tree";
import {FormsModule} from "@angular/forms";
import {TreeTableModule} from "primeng/treetable";
import {CommonModule} from "@angular/common";
import { TreeModule } from 'primeng/tree';
import { FormsModule } from '@angular/forms';
import { TreeTableModule } from 'primeng/treetable';
import { CommonModule } from '@angular/common';
import { NodeService } from '../service/node.service';
@Component({
@@ -51,11 +51,11 @@ export class TreeDemo implements OnInit {
cols: any[] = [];
nodeService = inject(NodeService)
nodeService = inject(NodeService);
ngOnInit() {
this.nodeService.getFiles().then(files => this.treeValue = files);
this.nodeService.getFilesystem().then(files => this.treeTableValue = files);
this.nodeService.getFiles().then((files) => (this.treeValue = files));
this.nodeService.getFilesystem().then((files) => (this.treeTableValue = files));
this.cols = [
{ field: 'name', header: 'Name' },

10
src/index.html
View File

@@ -1,18 +1,16 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta charset="utf-8" />
<title>Sakai - PrimeNG</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1.o">
<base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1.o" />
<link rel="preconnect" href="https://primefaces.org" />
<link rel="icon" type="image/x-icon" href="https://primefaces.org/cdn/primeng/images/favicon.png" />
<link href="https://fonts.cdnfonts.com/css/lato" rel="stylesheet">
<link href="https://fonts.cdnfonts.com/css/lato" rel="stylesheet" />
</head>
<body>
<app-root></app-root>
</body>
</html>

4
src/main.ts
View File

@@ -2,6 +2,4 @@ import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app.config';
import { AppComponent } from './app.component';
bootstrapApplication(AppComponent, appConfig)
.catch((err) => console.error(err));
bootstrapApplication(AppComponent, appConfig).catch((err) => console.error(err));