From 1fdb777f1738b5dbf0408578412ebd448beb714e Mon Sep 17 00:00:00 2001 From: DIKSHIT MORADIYA Date: Tue, 24 Dec 2024 10:42:26 +0530 Subject: [PATCH 1/3] Angular 19 upgrade done and new folder structure add --- angular.json | 42 +- eslint.config.mjs | 46 + package.json | 69 +- src/app/app-config.ts | 4 - src/app/app-routing.module.ts | 4 +- src/app/app.component.ts | 14 +- src/app/app.module.ts | 49 - src/app/demo/admin-panel/README.md | 32 + src/app/demo/application/README.md | 32 + .../demo/dashboard/dashboard.component.html | 18 +- src/app/demo/dashboard/dashboard.component.ts | 62 +- src/app/demo/extension/README.md | 32 + src/app/demo/layout/README.md | 32 + .../apex-chart/apex-chart.component.html | 0 .../apex-chart/apex-chart.component.scss | 0 .../apex-chart/apex-chart.component.ts | 54 +- .../basic-collapse.component.html | 4 +- src/app/demo/widget/README.md | 32 + .../theme/layout/admin/admin.component.html | 10 +- src/app/theme/layout/admin/admin.component.ts | 25 +- .../configuration/configuration.component.ts | 1 + .../admin/nav-bar/nav-bar.component.html | 9 +- .../layout/admin/nav-bar/nav-bar.component.ts | 41 +- .../nav-bar/nav-left/nav-left.component.html | 20 +- .../nav-bar/nav-left/nav-left.component.ts | 40 +- .../nav-search/nav-search.component.html | 2 +- .../nav-search/nav-search.component.ts | 9 +- .../nav-bar/nav-right/nav-right.component.ts | 23 +- .../nav-collapse/nav-collapse.component.html | 44 +- .../nav-collapse/nav-collapse.component.ts | 27 +- .../nav-content/nav-content.component.html | 33 +- .../nav-content/nav-content.component.ts | 36 +- .../nav-group/nav-group.component.html | 17 +- .../nav-group/nav-group.component.ts | 28 +- .../nav-item/nav-item.component.html | 47 +- .../nav-item/nav-item.component.ts | 36 +- .../nav-logo/nav-logo.component.html | 4 +- .../navigation/nav-logo/nav-logo.component.ts | 9 +- .../navigation/navigation.component.html | 4 +- .../admin/navigation/navigation.component.ts | 20 +- .../layout/admin/navigation/navigation.ts | 16 +- src/app/theme/layout/guest/guest.component.ts | 2 + .../breadcrumbs/breadcrumbs.component.html | 9 +- .../breadcrumbs/breadcrumbs.component.ts | 128 +- .../components/card/card.component.html | 6 +- .../shared/components/card/card.component.ts | 18 +- .../full-screen/toggle-full-screen.ts | 7 +- .../components/spinner/spinner.component.html | 6 +- .../components/spinner/spinner.component.ts | 18 +- src/app/theme/shared/directive/README.md | 32 + src/app/theme/shared/filters/README.md | 32 + src/app/theme/shared/helpers/README.md | 32 + src/app/theme/shared/service/README.md | 32 + src/app/theme/shared/shared.module.ts | 27 +- src/main.ts | 15 +- src/scss/theme-elements/_progress.scss | 39 + src/scss/theme-elements/_theme-elements.scss | 1 + yarn.lock | 6677 +++++++++-------- 58 files changed, 4593 insertions(+), 3515 deletions(-) create mode 100644 eslint.config.mjs delete mode 100644 src/app/app.module.ts create mode 100644 src/app/demo/admin-panel/README.md create mode 100644 src/app/demo/application/README.md create mode 100644 src/app/demo/extension/README.md create mode 100644 src/app/demo/layout/README.md rename src/app/demo/{chart => pages/core-chart}/apex-chart/apex-chart.component.html (100%) rename src/app/demo/{chart => pages/core-chart}/apex-chart/apex-chart.component.scss (100%) rename src/app/demo/{chart => pages/core-chart}/apex-chart/apex-chart.component.ts (82%) create mode 100644 src/app/demo/widget/README.md create mode 100644 src/app/theme/shared/directive/README.md create mode 100644 src/app/theme/shared/filters/README.md create mode 100644 src/app/theme/shared/helpers/README.md create mode 100644 src/app/theme/shared/service/README.md create mode 100644 src/scss/theme-elements/_progress.scss diff --git a/angular.json b/angular.json index 66b2b8a5..fff7647f 100644 --- a/angular.json +++ b/angular.json @@ -17,16 +17,27 @@ "build": { "builder": "@angular-devkit/build-angular:browser", "options": { - "allowedCommonJsDependencies": ["apexcharts"], + "allowedCommonJsDependencies": [ + "apexcharts" + ], "outputPath": "dist", "index": "src/index.html", "main": "src/main.ts", "polyfills": "src/polyfills.ts", "tsConfig": "tsconfig.app.json", "inlineStyleLanguage": "scss", - "assets": ["src/favicon.ico", "src/assets", "src/fake-data"], - "styles": ["node_modules/bootstrap/scss/bootstrap.scss", "src/styles.scss"], - "scripts": ["node_modules/apexcharts/dist/apexcharts.min.js"] + "assets": [ + "src/favicon.ico", + "src/assets", + "src/fake-data" + ], + "styles": [ + "node_modules/bootstrap/scss/bootstrap.scss", + "src/styles.scss" + ], + "scripts": [ + "node_modules/apexcharts/dist/apexcharts.min.js" + ] }, "configurations": { "production": { @@ -87,15 +98,32 @@ "tsConfig": "tsconfig.spec.json", "karmaConfig": "karma.conf.js", "inlineStyleLanguage": "scss", - "assets": ["src/favicon.ico", "src/assets"], - "styles": ["src/styles.scss"], + "assets": [ + "src/favicon.ico", + "src/assets" + ], + "styles": [ + "src/styles.scss" + ], "scripts": [] } + }, + "lint": { + "builder": "@angular-eslint/builder:lint", + "options": { + "lintFilePatterns": [ + "src/**/*.ts", + "src/**/*.html" + ] + } } } } }, "cli": { - "analytics": "0eaad924-6e2a-434b-aad5-51d9f46776fc" + "analytics": "0eaad924-6e2a-434b-aad5-51d9f46776fc", + "schematicCollections": [ + "angular-eslint" + ] } } diff --git a/eslint.config.mjs b/eslint.config.mjs new file mode 100644 index 00000000..926b2ac4 --- /dev/null +++ b/eslint.config.mjs @@ -0,0 +1,46 @@ +import path from "node:path"; +import { fileURLToPath } from "node:url"; +import js from "@eslint/js"; +import { FlatCompat } from "@eslint/eslintrc"; + +const __filename = fileURLToPath(import.meta.url); +const __dirname = path.dirname(__filename); +const compat = new FlatCompat({ + baseDirectory: __dirname, + recommendedConfig: js.configs.recommended, + allConfig: js.configs.all +}); + +export default [{ + ignores: ["projects/**/*"], +}, ...compat.extends( + "eslint:recommended", + "plugin:@typescript-eslint/recommended", + "plugin:@angular-eslint/recommended", + "plugin:@angular-eslint/template/process-inline-templates", +).map(config => ({ + ...config, + files: ["**/*.ts"], +})), { + files: ["**/*.ts"], + + rules: { + "@angular-eslint/directive-selector": ["error", { + type: "attribute", + prefix: "app", + style: "camelCase", + }], + + "@angular-eslint/component-selector": ["error", { + type: "element", + prefix: "app", + style: "kebab-case", + }], + }, +}, ...compat.extends("plugin:@angular-eslint/template/recommended").map(config => ({ + ...config, + files: ["**/*.html"], +})), { + files: ["**/*.html"], + rules: {}, +}]; \ No newline at end of file diff --git a/package.json b/package.json index bb8a17fe..d6a2119c 100644 --- a/package.json +++ b/package.json @@ -8,44 +8,53 @@ "build": "ng build", "build-prod": "ng build --configuration production --base-href /demos/admin-templates/datta-able/angular/free/", "watch": "ng build --watch --configuration development", - "test": "ng test" + "test": "ng test", + "lint": "ng lint", + "lint:fix": "ng lint --fix", + "prettier": "prettier --write ./src" }, "private": false, "dependencies": { - "@angular/animations": "^18.0.5", - "@angular/cdk": "^18.0.5", - "@angular/common": "^18.0.5", - "@angular/compiler": "^18.0.5", - "@angular/core": "^18.0.5", - "@angular/forms": "^18.0.5", - "@angular/localize": "^18.0.5", - "@angular/platform-browser": "^18.0.5", - "@angular/platform-browser-dynamic": "^18.0.5", - "@angular/router": "^18.0.5", - "@ng-bootstrap/ng-bootstrap": "^17.0.0", - "@popperjs/core": "^2.11.8", - "apexcharts": "^3.49.2", - "bootstrap": "^5.3.3", - "ng-apexcharts": "^1.11.0", - "ngx-scrollbar": "^15.0.1", + "@angular/animations": "19.0.5", + "@angular/cdk": "19.0.4", + "@angular/common": "19.0.5", + "@angular/compiler": "19.0.5", + "@angular/core": "19.0.5", + "@angular/forms": "19.0.5", + "@angular/localize": "19.0.5", + "@angular/platform-browser": "19.0.5", + "@angular/platform-browser-dynamic": "19.0.5", + "@angular/router": "19.0.5", + "@ng-bootstrap/ng-bootstrap": "18.0.0", + "@popperjs/core": "2.11.8", + "apexcharts": "3.49.2", + "bootstrap": "5.3.3", + "ng-apexcharts": "1.11.0", + "ngx-scrollbar": "16.1.1", "rxjs": "~7.8.1", - "screenfull": "^6.0.2", - "tslib": "^2.6.3", - "zone.js": "~0.14.7" + "screenfull": "6.0.2", + "tslib": "2.8.1", + "zone.js": "~0.15.0" }, "devDependencies": { - "@angular-devkit/build-angular": "^18.0.6", - "@angular/cli": "~18.0.6", - "@angular/compiler-cli": "^18.0.5", - "@types/jasmine": "~5.1.4", - "@types/node": "^20.14.9", - "jasmine-core": "~5.1.2", - "karma": "~6.4.3", + "@angular-devkit/build-angular": "19.0.6", + "@angular/cli": "19.0.6", + "@angular/compiler-cli": "19.0.5", + "@eslint/eslintrc": "3.2.0", + "@eslint/js": "9.17.0", + "@types/jasmine": "~5.1.5", + "@types/lodash": "4.17.13", + "@types/node": "22.10.2", + "angular-eslint": "19.0.2", + "eslint": "^9.16.0", + "jasmine-core": "~5.5.0", + "karma": "~6.4.4", "karma-chrome-launcher": "~3.2.0", "karma-coverage": "~2.2.1", "karma-jasmine": "~5.1.0", "karma-jasmine-html-reporter": "~2.1.0", - "prettier": "3.3.2", - "typescript": "5.4" + "prettier": "3.4.2", + "typescript": "5.6.3", + "typescript-eslint": "8.18.0" } -} +} \ No newline at end of file diff --git a/src/app/app-config.ts b/src/app/app-config.ts index 5dc26835..e69de29b 100644 --- a/src/app/app-config.ts +++ b/src/app/app-config.ts @@ -1,4 +0,0 @@ -export class DattaConfig { - static layout: string = 'vertical'; - static isCollapseMenu: Boolean = false; -} diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 0a9c9677..dbc56f9b 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -15,7 +15,7 @@ const routes: Routes = [ }, { path: 'dashboard', - loadComponent: () => import('./demo/dashboard/dashboard.component') + loadComponent: () => import('./demo/dashboard/dashboard.component').then((c) => c.DashboardComponent) }, { path: 'basic', @@ -31,7 +31,7 @@ const routes: Routes = [ }, { path: 'apexchart', - loadComponent: () => import('./demo/chart/apex-chart/apex-chart.component') + loadComponent: () => import('./demo/pages/core-chart/apex-chart/apex-chart.component') }, { path: 'sample-page', diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 4e620726..d3dbe45a 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,16 +1,22 @@ -import { Component, OnInit } from '@angular/core'; -import { NavigationEnd, Router } from '@angular/router'; +// Angular import +import { Component, OnInit, inject } from '@angular/core'; +import { NavigationEnd, Router, RouterModule } from '@angular/router'; + +// project import +import { SpinnerComponent } from './theme/shared/components/spinner/spinner.component'; @Component({ selector: 'app-root', + imports: [SpinnerComponent, RouterModule], templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent implements OnInit { - title = 'datta-able'; + private router = inject(Router); - constructor(private router: Router) {} + title = 'datta-able'; + // life cycle hook ngOnInit() { this.router.events.subscribe((evt) => { if (!(evt instanceof NavigationEnd)) { diff --git a/src/app/app.module.ts b/src/app/app.module.ts deleted file mode 100644 index 17369129..00000000 --- a/src/app/app.module.ts +++ /dev/null @@ -1,49 +0,0 @@ -// angular import -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; -import { FormsModule, ReactiveFormsModule } from '@angular/forms'; -import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; -import { AppRoutingModule } from './app-routing.module'; - -// project import -import { AppComponent } from './app.component'; -import { SharedModule } from './theme/shared/shared.module'; -import { GuestComponent } from './theme/layout/guest/guest.component'; -import { AdminComponent } from './theme/layout/admin/admin.component'; -import { ConfigurationComponent } from './theme/layout/admin/configuration/configuration.component'; -import { NavBarComponent } from './theme/layout/admin/nav-bar/nav-bar.component'; -import { NavigationComponent } from './theme/layout/admin/navigation/navigation.component'; -import { NavLeftComponent } from './theme/layout/admin/nav-bar/nav-left/nav-left.component'; -import { NavRightComponent } from './theme/layout/admin/nav-bar/nav-right/nav-right.component'; -import { NavContentComponent } from './theme/layout/admin/navigation/nav-content/nav-content.component'; -import { NavLogoComponent } from './theme/layout/admin/navigation/nav-logo/nav-logo.component'; -import { NavCollapseComponent } from './theme/layout/admin/navigation/nav-content/nav-collapse/nav-collapse.component'; -import { NavGroupComponent } from './theme/layout/admin/navigation/nav-content/nav-group/nav-group.component'; -import { NavItemComponent } from './theme/layout/admin/navigation/nav-content/nav-item/nav-item.component'; -import { NavSearchComponent } from './theme/layout/admin/nav-bar/nav-left/nav-search/nav-search.component'; -import { NavigationItem } from './theme/layout/admin/navigation/navigation'; -import { ToggleFullScreenDirective } from './theme/shared/components/full-screen/toggle-full-screen'; - -@NgModule({ - declarations: [ - AppComponent, - GuestComponent, - AdminComponent, - ConfigurationComponent, - NavBarComponent, - NavigationComponent, - NavLeftComponent, - NavRightComponent, - NavContentComponent, - NavLogoComponent, - NavCollapseComponent, - NavGroupComponent, - NavItemComponent, - NavSearchComponent, - ToggleFullScreenDirective - ], - imports: [BrowserModule, AppRoutingModule, FormsModule, ReactiveFormsModule, SharedModule, BrowserAnimationsModule], - providers: [NavigationItem], - bootstrap: [AppComponent] -}) -export class AppModule {} diff --git a/src/app/demo/admin-panel/README.md b/src/app/demo/admin-panel/README.md new file mode 100644 index 00000000..c94a8ab2 --- /dev/null +++ b/src/app/demo/admin-panel/README.md @@ -0,0 +1,32 @@ +# Admin Panel Demo + +This is a demo of the admin panel for the CodedThemes Angular 19 Admin Template. + +The demo is a fully functional admin panel that showcases the features of the template. It includes a variety of pages and components, including: + +- Dashboard +- Users +- Products +- Settings +- Profile +- Login +- Register +- Forgot Password + +The demo also includes a variety of custom components, including: + +- Sidebar +- Navbar +- Breadcrumbs +- Cards +- Tables +- Forms +- Charts +- Maps +- Notifications + +The demo is built using the latest version of Angular and is fully responsive, meaning it will work on a variety of devices and screen sizes. + +## Running the Demo + +To run the demo, simply clone the repository and run `npm install` followed by `ng serve`. The demo will be available at `http://localhost:4200/`. diff --git a/src/app/demo/application/README.md b/src/app/demo/application/README.md new file mode 100644 index 00000000..c94a8ab2 --- /dev/null +++ b/src/app/demo/application/README.md @@ -0,0 +1,32 @@ +# Admin Panel Demo + +This is a demo of the admin panel for the CodedThemes Angular 19 Admin Template. + +The demo is a fully functional admin panel that showcases the features of the template. It includes a variety of pages and components, including: + +- Dashboard +- Users +- Products +- Settings +- Profile +- Login +- Register +- Forgot Password + +The demo also includes a variety of custom components, including: + +- Sidebar +- Navbar +- Breadcrumbs +- Cards +- Tables +- Forms +- Charts +- Maps +- Notifications + +The demo is built using the latest version of Angular and is fully responsive, meaning it will work on a variety of devices and screen sizes. + +## Running the Demo + +To run the demo, simply clone the repository and run `npm install` followed by `ng serve`. The demo will be available at `http://localhost:4200/`. diff --git a/src/app/demo/dashboard/dashboard.component.html b/src/app/demo/dashboard/dashboard.component.html index c5e0150d..b5e9b5b3 100644 --- a/src/app/demo/dashboard/dashboard.component.html +++ b/src/app/demo/dashboard/dashboard.component.html @@ -15,7 +15,7 @@

- +
@@ -81,14 +81,14 @@

Target: {{ list.target }}
- +
Duration: {{ list.duration }}
- +
@@ -112,15 +112,15 @@
- @for (list of progressing; track list) { + @for (list of progressing; track list; let last = $last) {
{{ list.number }}
{{ list.amount }}
-
- +
+
} @@ -128,7 +128,7 @@
{{ list.amount }}
- +
@@ -148,8 +148,8 @@
} diff --git a/src/app/demo/dashboard/dashboard.component.ts b/src/app/demo/dashboard/dashboard.component.ts index b1943b78..a0496d4f 100644 --- a/src/app/demo/dashboard/dashboard.component.ts +++ b/src/app/demo/dashboard/dashboard.component.ts @@ -1,10 +1,11 @@ // angular import import { Component, OnInit } from '@angular/core'; +import { CommonModule } from '@angular/common'; // project import import { SharedModule } from 'src/app/theme/shared/shared.module'; -declare const AmCharts: any; +declare const AmCharts; import '../../../assets/charts/amchart/amcharts.js'; import '../../../assets/charts/amchart/gauge.js'; @@ -21,12 +22,12 @@ import mapColor from 'src/fake-data/map-color-data.json'; @Component({ selector: 'app-dashboard', - standalone: true, - imports: [SharedModule], + imports: [CommonModule, SharedModule], templateUrl: './dashboard.component.html', styleUrls: ['./dashboard.component.scss'] }) -export default class DashboardComponent implements OnInit { +export class DashboardComponent implements OnInit { + // life cycle event ngOnInit() { setTimeout(() => { const latlong = dataJson; @@ -216,7 +217,7 @@ export default class DashboardComponent implements OnInit { balloon: { drop: true, adjustBorderColor: false, - color: '#ffffff', + color: '#222', fillAlphas: 0.2, bullet: 'round', bulletBorderAlpha: 1, @@ -233,6 +234,7 @@ export default class DashboardComponent implements OnInit { }, 500); } + // public method sales = [ { title: 'Daily Sales', @@ -240,23 +242,26 @@ export default class DashboardComponent implements OnInit { amount: '$249.95', percentage: '67%', progress: 50, - design: 'col-md-6' + design: 'col-md-6', + progress_bg: 'progress-c-theme' }, { title: 'Monthly Sales', icon: 'icon-arrow-down text-c-red', - amount: '$2.942.32', + amount: '$2,942.32', percentage: '36%', progress: 35, - design: 'col-md-6' + design: 'col-md-6', + progress_bg: 'progress-c-theme2' }, { title: 'Yearly Sales', icon: 'icon-arrow-up text-c-green', - amount: '$8.638.32', + amount: '$8,638.32', percentage: '80%', progress: 70, - design: 'col-md-12' + design: 'col-md-12', + progress_bg: 'progress-c-theme' } ]; @@ -284,7 +289,9 @@ export default class DashboardComponent implements OnInit { target: '35,098', progress: 60, duration: '3,539', - progress2: 45 + progress2: 45, + progress_bg: 'progress-c-theme', + progress_bg_2: 'progress-c-theme2' }, { design: 'col-md-6', @@ -295,7 +302,9 @@ export default class DashboardComponent implements OnInit { target: '34,185', progress: 40, duration: '4,567', - progress2: 70 + progress2: 70, + progress_bg: 'progress-c-theme', + progress_bg_2: 'progress-c-theme2' }, { design: 'col-md-6', @@ -306,7 +315,9 @@ export default class DashboardComponent implements OnInit { target: '25,998', progress: 80, duration: '7,753', - progress2: 50 + progress2: 50, + progress_bg: 'progress-c-theme', + progress_bg_2: 'progress-c-theme2' } ]; @@ -314,27 +325,32 @@ export default class DashboardComponent implements OnInit { { number: '5', amount: '384', - progress: 70 + progress: 70, + progress_bg: 'progress-c-theme' }, { number: '4', amount: '145', - progress: 35 + progress: 35, + progress_bg: 'progress-c-theme' }, { number: '3', amount: '24', - progress: 25 + progress: 25, + progress_bg: 'progress-c-theme' }, { number: '2', amount: '1', - progress: 10 + progress: 10, + progress_bg: 'progress-c-theme' }, { number: '1', amount: '0', - progress: 0 + progress: 0, + progress_bg: 'progress-c-theme' } ]; @@ -342,35 +358,35 @@ export default class DashboardComponent implements OnInit { { src: 'assets/images/user/avatar-1.jpg', title: 'Isabella Christensen', - text: 'Lorem Ipsum is simply dummy', + text: 'Requested account activation', time: '11 MAY 12:56', color: 'text-c-green' }, { src: 'assets/images/user/avatar-2.jpg', title: 'Ida Jorgensen', - text: 'Lorem Ipsum is simply', + text: 'Pending document verification', time: '11 MAY 10:35', color: 'text-c-red' }, { src: 'assets/images/user/avatar-3.jpg', title: 'Mathilda Andersen', - text: 'Lorem Ipsum is simply dummy', + text: 'Completed profile setup', time: '9 MAY 17:38', color: 'text-c-green' }, { src: 'assets/images/user/avatar-1.jpg', title: 'Karla Soreness', - text: 'Lorem Ipsum is simply', + text: 'Requires additional information', time: '19 MAY 12:56', color: 'text-c-red' }, { src: 'assets/images/user/avatar-2.jpg', title: 'Albert Andersen', - text: 'Lorem Ipsum is', + text: 'Approved and verified account', time: '21 July 12:56', color: 'text-c-green' } diff --git a/src/app/demo/extension/README.md b/src/app/demo/extension/README.md new file mode 100644 index 00000000..c94a8ab2 --- /dev/null +++ b/src/app/demo/extension/README.md @@ -0,0 +1,32 @@ +# Admin Panel Demo + +This is a demo of the admin panel for the CodedThemes Angular 19 Admin Template. + +The demo is a fully functional admin panel that showcases the features of the template. It includes a variety of pages and components, including: + +- Dashboard +- Users +- Products +- Settings +- Profile +- Login +- Register +- Forgot Password + +The demo also includes a variety of custom components, including: + +- Sidebar +- Navbar +- Breadcrumbs +- Cards +- Tables +- Forms +- Charts +- Maps +- Notifications + +The demo is built using the latest version of Angular and is fully responsive, meaning it will work on a variety of devices and screen sizes. + +## Running the Demo + +To run the demo, simply clone the repository and run `npm install` followed by `ng serve`. The demo will be available at `http://localhost:4200/`. diff --git a/src/app/demo/layout/README.md b/src/app/demo/layout/README.md new file mode 100644 index 00000000..c94a8ab2 --- /dev/null +++ b/src/app/demo/layout/README.md @@ -0,0 +1,32 @@ +# Admin Panel Demo + +This is a demo of the admin panel for the CodedThemes Angular 19 Admin Template. + +The demo is a fully functional admin panel that showcases the features of the template. It includes a variety of pages and components, including: + +- Dashboard +- Users +- Products +- Settings +- Profile +- Login +- Register +- Forgot Password + +The demo also includes a variety of custom components, including: + +- Sidebar +- Navbar +- Breadcrumbs +- Cards +- Tables +- Forms +- Charts +- Maps +- Notifications + +The demo is built using the latest version of Angular and is fully responsive, meaning it will work on a variety of devices and screen sizes. + +## Running the Demo + +To run the demo, simply clone the repository and run `npm install` followed by `ng serve`. The demo will be available at `http://localhost:4200/`. diff --git a/src/app/demo/chart/apex-chart/apex-chart.component.html b/src/app/demo/pages/core-chart/apex-chart/apex-chart.component.html similarity index 100% rename from src/app/demo/chart/apex-chart/apex-chart.component.html rename to src/app/demo/pages/core-chart/apex-chart/apex-chart.component.html diff --git a/src/app/demo/chart/apex-chart/apex-chart.component.scss b/src/app/demo/pages/core-chart/apex-chart/apex-chart.component.scss similarity index 100% rename from src/app/demo/chart/apex-chart/apex-chart.component.scss rename to src/app/demo/pages/core-chart/apex-chart/apex-chart.component.scss diff --git a/src/app/demo/chart/apex-chart/apex-chart.component.ts b/src/app/demo/pages/core-chart/apex-chart/apex-chart.component.ts similarity index 82% rename from src/app/demo/chart/apex-chart/apex-chart.component.ts rename to src/app/demo/pages/core-chart/apex-chart/apex-chart.component.ts index a689b3a6..43dd72a5 100644 --- a/src/app/demo/chart/apex-chart/apex-chart.component.ts +++ b/src/app/demo/pages/core-chart/apex-chart/apex-chart.component.ts @@ -1,47 +1,11 @@ // angular import -import { Component, ViewChild } from '@angular/core'; +import { Component, viewChild } from '@angular/core'; // project import import { SharedModule } from 'src/app/theme/shared/shared.module'; // third party -import { NgApexchartsModule } from 'ng-apexcharts'; - -import { - ApexAxisChartSeries, - ApexNonAxisChartSeries, - ApexChart, - ChartComponent, - ApexDataLabels, - ApexPlotOptions, - ApexYAxis, - ApexResponsive, - ApexLegend, - ApexStroke, - ApexXAxis, - ApexFill, - ApexTooltip, - ApexTitleSubtitle, - ApexGrid -} from 'ng-apexcharts'; - -export type ChartOptions = { - series: ApexAxisChartSeries | ApexNonAxisChartSeries; - chart: ApexChart; - dataLabels: ApexDataLabels; - plotOptions: ApexPlotOptions; - yaxis: ApexYAxis; - xaxis: ApexXAxis; - fill: ApexFill; - tooltip: ApexTooltip; - stroke: ApexStroke; - legend: ApexLegend; - responsive: ApexResponsive[]; - colors: string[]; - labels: string[]; - title: ApexTitleSubtitle; - grid: ApexGrid; -}; +import { ApexOptions, ChartComponent, NgApexchartsModule } from 'ng-apexcharts'; @Component({ selector: 'app-apex-chart', @@ -51,13 +15,13 @@ export type ChartOptions = { styleUrls: ['./apex-chart.component.scss'] }) export default class ApexChartComponent { - @ViewChild('chart') chart: ChartComponent; - barSimpleChart: Partial; - barStackedChart: Partial; - areaAngleChart: Partial; - areaSmoothChart: Partial; - lineAreaChart: Partial; - donutChart: Partial; + chart = viewChild('chart'); + barSimpleChart: Partial; + barStackedChart: Partial; + areaAngleChart: Partial; + areaSmoothChart: Partial; + lineAreaChart: Partial; + donutChart: Partial; constructor() { this.barSimpleChart = { diff --git a/src/app/demo/ui-elements/ui-basic/basic-collapse/basic-collapse.component.html b/src/app/demo/ui-elements/ui-basic/basic-collapse/basic-collapse.component.html index 8bf57e4a..00b3da59 100644 --- a/src/app/demo/ui-elements/ui-basic/basic-collapse/basic-collapse.component.html +++ b/src/app/demo/ui-elements/ui-basic/basic-collapse/basic-collapse.component.html @@ -9,8 +9,10 @@
Basic Collapse
type="button" class="btn btn-primary" (click)="collapse.toggle()" + (keydown)="collapse.toggle()" + (keyup)="collapse.toggle()" [attr.aria-expanded]="!isCollapsed" - aria-controls="collapseExample" + title="Toggle Collapse" > Toggle with Function diff --git a/src/app/demo/widget/README.md b/src/app/demo/widget/README.md new file mode 100644 index 00000000..c94a8ab2 --- /dev/null +++ b/src/app/demo/widget/README.md @@ -0,0 +1,32 @@ +# Admin Panel Demo + +This is a demo of the admin panel for the CodedThemes Angular 19 Admin Template. + +The demo is a fully functional admin panel that showcases the features of the template. It includes a variety of pages and components, including: + +- Dashboard +- Users +- Products +- Settings +- Profile +- Login +- Register +- Forgot Password + +The demo also includes a variety of custom components, including: + +- Sidebar +- Navbar +- Breadcrumbs +- Cards +- Tables +- Forms +- Charts +- Maps +- Notifications + +The demo is built using the latest version of Angular and is fully responsive, meaning it will work on a variety of devices and screen sizes. + +## Running the Demo + +To run the demo, simply clone the repository and run `npm install` followed by `ng serve`. The demo will be available at `http://localhost:4200/`. diff --git a/src/app/theme/layout/admin/admin.component.html b/src/app/theme/layout/admin/admin.component.html index 2dfc40ce..bdc59007 100644 --- a/src/app/theme/layout/admin/admin.component.html +++ b/src/app/theme/layout/admin/admin.component.html @@ -6,16 +6,16 @@ }" (NavCollapse)="this.navCollapsed = !this.navCollapsed" (NavCollapsedMob)="navMobClick()" -> - +/> +
- +
- +
@@ -23,4 +23,4 @@
- + diff --git a/src/app/theme/layout/admin/admin.component.ts b/src/app/theme/layout/admin/admin.component.ts index 6c2b2024..0194b38e 100644 --- a/src/app/theme/layout/admin/admin.component.ts +++ b/src/app/theme/layout/admin/admin.component.ts @@ -1,31 +1,33 @@ // angular import import { Component } from '@angular/core'; -import { Location } from '@angular/common'; +import { RouterModule } from '@angular/router'; +import { CommonModule } from '@angular/common'; // project import -import { DattaConfig } from 'src/app/app-config'; +import { NavBarComponent } from './nav-bar/nav-bar.component'; +import { NavigationComponent } from './navigation/navigation.component'; +import { ConfigurationComponent } from 'src/app/theme/layout/admin/configuration/configuration.component'; +import { BreadcrumbsComponent } from '../../shared/components/breadcrumbs/breadcrumbs.component'; @Component({ selector: 'app-admin', + imports: [NavBarComponent, NavigationComponent, RouterModule, CommonModule, ConfigurationComponent, BreadcrumbsComponent], templateUrl: './admin.component.html', styleUrls: ['./admin.component.scss'] }) export class AdminComponent { - navCollapsed: any; + // public props + navCollapsed; navCollapsedMob: boolean; windowWidth: number; - constructor(private location: Location) { - let current_url = this.location.path(); - if (this.location['_baseHref']) { - current_url = this.location['_baseHref'] + this.location.path(); - } - + // constructor + constructor() { this.windowWidth = window.innerWidth; - this.navCollapsed = this.windowWidth >= 992 ? DattaConfig.isCollapseMenu : false; this.navCollapsedMob = false; } + // public method navMobClick() { if (this.navCollapsedMob && !document.querySelector('app-navigation.pcoded-navbar').classList.contains('mob-open')) { this.navCollapsedMob = !this.navCollapsedMob; @@ -37,6 +39,7 @@ export class AdminComponent { } } + // this is for eslint rule handleKeyDown(event: KeyboardEvent): void { if (event.key === 'Escape') { this.closeMenu(); @@ -45,7 +48,7 @@ export class AdminComponent { closeMenu() { if (document.querySelector('app-navigation.pcoded-navbar').classList.contains('mob-open')) { - document.querySelector('app-navigation.pcoded-navbar')?.classList.remove('mob-open'); + document.querySelector('app-navigation.pcoded-navbar').classList.remove('mob-open'); } } } diff --git a/src/app/theme/layout/admin/configuration/configuration.component.ts b/src/app/theme/layout/admin/configuration/configuration.component.ts index 9d69d4bc..5fe24688 100644 --- a/src/app/theme/layout/admin/configuration/configuration.component.ts +++ b/src/app/theme/layout/admin/configuration/configuration.component.ts @@ -1,3 +1,4 @@ +// angular import import { Component } from '@angular/core'; @Component({ diff --git a/src/app/theme/layout/admin/nav-bar/nav-bar.component.html b/src/app/theme/layout/admin/nav-bar/nav-bar.component.html index 82709ad0..3e1e4b32 100644 --- a/src/app/theme/layout/admin/nav-bar/nav-bar.component.html +++ b/src/app/theme/layout/admin/nav-bar/nav-bar.component.html @@ -1,7 +1,7 @@
+
diff --git a/src/app/theme/layout/admin/nav-bar/nav-bar.component.ts b/src/app/theme/layout/admin/nav-bar/nav-bar.component.ts index 245d8a14..01b10a7e 100644 --- a/src/app/theme/layout/admin/nav-bar/nav-bar.component.ts +++ b/src/app/theme/layout/admin/nav-bar/nav-bar.component.ts @@ -1,18 +1,34 @@ +// angular import +import { Component, output } from '@angular/core'; +import { RouterModule } from '@angular/router'; +import { CommonModule } from '@angular/common'; + // project import -import { Component, EventEmitter, Output } from '@angular/core'; +import { SharedModule } from 'src/app/theme/shared/shared.module'; +import { NavLeftComponent } from './nav-left/nav-left.component'; +import { NavRightComponent } from './nav-right/nav-right.component'; @Component({ selector: 'app-nav-bar', + imports: [SharedModule, NavLeftComponent, NavRightComponent, RouterModule, CommonModule], templateUrl: './nav-bar.component.html', styleUrls: ['./nav-bar.component.scss'] }) export class NavBarComponent { // public props - @Output() NavCollapsedMob = new EventEmitter(); - navCollapsedMob = false; - headerStyle: string = ''; - menuClass: boolean = false; - collapseStyle: string = 'none'; + readonly NavCollapsedMob = output(); + navCollapsedMob; + headerStyle: string; + menuClass: boolean; + collapseStyle: string; + + // constructor + constructor() { + this.navCollapsedMob = false; + this.headerStyle = ''; + this.menuClass = false; + this.collapseStyle = 'none'; + } // public method toggleMobOption() { @@ -20,4 +36,17 @@ export class NavBarComponent { this.headerStyle = this.menuClass ? 'none' : ''; this.collapseStyle = this.menuClass ? 'block' : 'none'; } + + // this is for eslint rule + handleKeyDown(event: KeyboardEvent): void { + if (event.key === 'Escape') { + this.closeMenu(); + } + } + + closeMenu() { + if (document.querySelector('app-navigation.pcoded-navbar').classList.contains('mob-open')) { + document.querySelector('app-navigation.pcoded-navbar').classList.remove('mob-open'); + } + } } diff --git a/src/app/theme/layout/admin/nav-bar/nav-left/nav-left.component.html b/src/app/theme/layout/admin/nav-bar/nav-left/nav-left.component.html index 00f7214e..d26b4c15 100644 --- a/src/app/theme/layout/admin/nav-bar/nav-left/nav-left.component.html +++ b/src/app/theme/layout/admin/nav-bar/nav-left/nav-left.component.html @@ -1,18 +1,20 @@
diff --git a/src/app/theme/layout/admin/nav-bar/nav-left/nav-search/nav-search.component.ts b/src/app/theme/layout/admin/nav-bar/nav-left/nav-search/nav-search.component.ts index 5b9779f5..f56a4d3d 100644 --- a/src/app/theme/layout/admin/nav-bar/nav-left/nav-search/nav-search.component.ts +++ b/src/app/theme/layout/admin/nav-bar/nav-left/nav-search/nav-search.component.ts @@ -1,20 +1,27 @@ // angular import import { Component } from '@angular/core'; +// project import +import { SharedModule } from 'src/app/theme/shared/shared.module'; + @Component({ selector: 'app-nav-search', + imports: [SharedModule], templateUrl: './nav-search.component.html', styleUrls: ['./nav-search.component.scss'] }) export class NavSearchComponent { - searchInterval: any; + // public props + searchInterval; searchWidth: number; searchWidthString: string; + // constructor constructor() { this.searchWidth = 0; } + // public method searchOn() { document.querySelector('#main-search').classList.add('open'); this.searchInterval = setInterval(() => { diff --git a/src/app/theme/layout/admin/nav-bar/nav-right/nav-right.component.ts b/src/app/theme/layout/admin/nav-bar/nav-right/nav-right.component.ts index 6bd24654..7f1484ec 100644 --- a/src/app/theme/layout/admin/nav-bar/nav-right/nav-right.component.ts +++ b/src/app/theme/layout/admin/nav-bar/nav-right/nav-right.component.ts @@ -1,9 +1,26 @@ // angular import -import { Component } from '@angular/core'; +import { Component, inject } from '@angular/core'; + +// bootstrap import +import { NgbDropdownConfig } from '@ng-bootstrap/ng-bootstrap'; + +// project import +import { SharedModule } from 'src/app/theme/shared/shared.module'; @Component({ selector: 'app-nav-right', + imports: [SharedModule], templateUrl: './nav-right.component.html', - styleUrls: ['./nav-right.component.scss'] + styleUrls: ['./nav-right.component.scss'], + providers: [NgbDropdownConfig] }) -export class NavRightComponent {} +export class NavRightComponent { + // public props + + // constructor + constructor() { + const config = inject(NgbDropdownConfig); + + config.placement = 'bottom-right'; + } +} diff --git a/src/app/theme/layout/admin/navigation/nav-content/nav-collapse/nav-collapse.component.html b/src/app/theme/layout/admin/navigation/nav-content/nav-collapse/nav-collapse.component.html index 83827244..edafb39d 100644 --- a/src/app/theme/layout/admin/navigation/nav-content/nav-collapse/nav-collapse.component.html +++ b/src/app/theme/layout/admin/navigation/nav-content/nav-collapse/nav-collapse.component.html @@ -1,25 +1,35 @@ -@if (!item.hidden) { - + + @if (item().icon) { + + + + } + + {{ item().title }} + + +
    - @for (item of item.children; track item) { - @if (item.type == 'group') { - + @for (items of item().children; track items) { + @if (items.type === 'item') { + } - @if (item.type == 'collapse') { - - } - @if (item.type == 'item') { - + @if (items.type === 'collapse') { + } }
- +
} diff --git a/src/app/theme/layout/admin/navigation/nav-content/nav-collapse/nav-collapse.component.ts b/src/app/theme/layout/admin/navigation/nav-content/nav-collapse/nav-collapse.component.ts index f6664ae1..e2fc45d7 100644 --- a/src/app/theme/layout/admin/navigation/nav-content/nav-collapse/nav-collapse.component.ts +++ b/src/app/theme/layout/admin/navigation/nav-content/nav-collapse/nav-collapse.component.ts @@ -1,12 +1,17 @@ // angular import -import { Component, Input } from '@angular/core'; +import { Component, input } from '@angular/core'; import { animate, style, transition, trigger } from '@angular/animations'; +import { RouterModule } from '@angular/router'; +import { CommonModule } from '@angular/common'; // project import import { NavigationItem } from '../../navigation'; +import { SharedModule } from 'src/app/theme/shared/shared.module'; +import { NavItemComponent } from '../nav-item/nav-item.component'; @Component({ selector: 'app-nav-collapse', + imports: [SharedModule, NavItemComponent, RouterModule, CommonModule], templateUrl: './nav-collapse.component.html', styleUrls: ['./nav-collapse.component.scss'], animations: [ @@ -21,14 +26,19 @@ import { NavigationItem } from '../../navigation'; }) export class NavCollapseComponent { // public props + item = input(); visible = false; - @Input() item: NavigationItem; // public method - navCollapse(e) { + navCollapse(e: MouseEvent) { this.visible = !this.visible; - let parent = e.target; - parent = parent.parentElement; + let parent = e.target as HTMLElement; + + if (parent?.tagName === 'SPAN') { + parent = parent.parentElement!; + } + + parent = (parent as HTMLElement).parentElement as HTMLElement; const sections = document.querySelectorAll('.pcoded-hasmenu'); for (let i = 0; i < sections.length; i++) { @@ -36,17 +46,18 @@ export class NavCollapseComponent { sections[i].classList.remove('pcoded-trigger'); } } + let first_parent = parent.parentElement; - let pre_parent = parent.parentElement.parentElement; + let pre_parent = ((parent as HTMLElement).parentElement as HTMLElement).parentElement as HTMLElement; if (first_parent.classList.contains('pcoded-hasmenu')) { do { first_parent.classList.add('pcoded-trigger'); - first_parent = first_parent.parentElement.parentElement.parentElement; + first_parent = ((first_parent as HTMLElement).parentElement as HTMLElement).parentElement as HTMLElement; } while (first_parent.classList.contains('pcoded-hasmenu')); } else if (pre_parent.classList.contains('pcoded-submenu')) { do { pre_parent.parentElement.classList.add('pcoded-trigger'); - pre_parent = pre_parent.parentElement.parentElement.parentElement; + pre_parent = (((pre_parent as HTMLElement).parentElement as HTMLElement).parentElement as HTMLElement).parentElement as HTMLElement; } while (pre_parent.classList.contains('pcoded-submenu')); } parent.classList.toggle('pcoded-trigger'); diff --git a/src/app/theme/layout/admin/navigation/nav-content/nav-content.component.html b/src/app/theme/layout/admin/navigation/nav-content/nav-content.component.html index 1cda248c..c98cb4bc 100644 --- a/src/app/theme/layout/admin/navigation/nav-content/nav-content.component.html +++ b/src/app/theme/layout/admin/navigation/nav-content/nav-content.component.html @@ -1,36 +1,15 @@ + diff --git a/src/app/theme/layout/admin/navigation/nav-content/nav-content.component.ts b/src/app/theme/layout/admin/navigation/nav-content/nav-content.component.ts index 238c9741..a2b1fce3 100644 --- a/src/app/theme/layout/admin/navigation/nav-content/nav-content.component.ts +++ b/src/app/theme/layout/admin/navigation/nav-content/nav-content.component.ts @@ -1,38 +1,36 @@ // angular import -import { Component, EventEmitter, Output } from '@angular/core'; +import { Component, inject, output } from '@angular/core'; import { Location } from '@angular/common'; // project import -import { NavigationItem } from '../navigation'; import { environment } from 'src/environments/environment'; +import { NavigationItem, NavigationItems } from '../navigation'; +import { SharedModule } from 'src/app/theme/shared/shared.module'; +import { NavGroupComponent } from './nav-group/nav-group.component'; @Component({ selector: 'app-nav-content', + imports: [SharedModule, NavGroupComponent], templateUrl: './nav-content.component.html', styleUrls: ['./nav-content.component.scss'] }) export class NavContentComponent { - // public props + private location = inject(Location); + + // public method + // version title = 'Demo application for version numbering'; currentApplicationVersion = environment.appVersion; - @Output() onNavCollapsedMob = new EventEmitter(); - navigation: any; - windowWidth: number; - // constructor - constructor( - public nav: NavigationItem, - private location: Location - ) { - this.windowWidth = window.innerWidth; - this.navigation = this.nav.get(); - } + navigations!: NavigationItem[]; + wrapperWidth: number; + windowWidth = window.innerWidth; - // public method - navMob() { - if (this.windowWidth < 992 && document.querySelector('app-navigation.pcoded-navbar').classList.contains('mob-open')) { - this.onNavCollapsedMob.emit(); - } + NavCollapsedMob = output(); + + // constructor + constructor() { + this.navigations = NavigationItems; } fireOutClick() { diff --git a/src/app/theme/layout/admin/navigation/nav-content/nav-group/nav-group.component.html b/src/app/theme/layout/admin/navigation/nav-content/nav-group/nav-group.component.html index 2760a944..cec1a22a 100644 --- a/src/app/theme/layout/admin/navigation/nav-content/nav-group/nav-group.component.html +++ b/src/app/theme/layout/admin/navigation/nav-content/nav-group/nav-group.component.html @@ -1,16 +1,13 @@ -@if (!item.hidden) { +@if (!item().hidden) { - @for (item of item.children; track item) { - @if (item.type == 'group') { - + @for (items of item().children; track items) { + @if (items.type === 'collapse') { + } - @if (item.type == 'collapse') { - - } - @if (item.type == 'item') { - + @if (items.type === 'item') { + } } } diff --git a/src/app/theme/layout/admin/navigation/nav-content/nav-group/nav-group.component.ts b/src/app/theme/layout/admin/navigation/nav-content/nav-group/nav-group.component.ts index 8391f9b6..e004ead4 100644 --- a/src/app/theme/layout/admin/navigation/nav-content/nav-group/nav-group.component.ts +++ b/src/app/theme/layout/admin/navigation/nav-content/nav-group/nav-group.component.ts @@ -1,24 +1,28 @@ // angular import -import { Component, Input, OnInit } from '@angular/core'; +import { Component, OnInit, inject, input } from '@angular/core'; import { Location } from '@angular/common'; // project import import { NavigationItem } from '../../navigation'; +import { SharedModule } from 'src/app/theme/shared/shared.module'; +import { NavItemComponent } from '../nav-item/nav-item.component'; +import { NavCollapseComponent } from '../nav-collapse/nav-collapse.component'; @Component({ selector: 'app-nav-group', + imports: [SharedModule, NavItemComponent, NavCollapseComponent], templateUrl: './nav-group.component.html', styleUrls: ['./nav-group.component.scss'] }) export class NavGroupComponent implements OnInit { - // public props - @Input() item: NavigationItem; + private location = inject(Location); - // constructor - constructor(private location: Location) {} + // public props + readonly item = input(undefined); // life cycle event ngOnInit() { + // at reload time active and trigger link let current_url = this.location.path(); if (this.location['_baseHref']) { current_url = this.location['_baseHref'] + this.location.path(); @@ -28,15 +32,25 @@ export class NavGroupComponent implements OnInit { if (ele !== null && ele !== undefined) { const parent = ele.parentElement; const up_parent = parent.parentElement.parentElement; - const last_parent = up_parent.parentElement; + const pre_parent = up_parent.parentElement; + const last_parent = up_parent.parentElement.parentElement.parentElement.parentElement; if (parent.classList.contains('pcoded-hasmenu')) { parent.classList.add('pcoded-trigger'); parent.classList.add('active'); } else if (up_parent.classList.contains('pcoded-hasmenu')) { up_parent.classList.add('pcoded-trigger'); up_parent.classList.add('active'); - } else if (last_parent.classList.contains('pcoded-hasmenu')) { + } else if (pre_parent.classList.contains('pcoded-hasmenu')) { + pre_parent.classList.add('pcoded-trigger'); + pre_parent.classList.add('active'); + } + + if (last_parent.classList.contains('pcoded-hasmenu')) { last_parent.classList.add('pcoded-trigger'); + + if (pre_parent.classList.contains('pcoded-hasmenu')) { + pre_parent.classList.add('pcoded-trigger'); + } last_parent.classList.add('active'); } } diff --git a/src/app/theme/layout/admin/navigation/nav-content/nav-item/nav-item.component.html b/src/app/theme/layout/admin/navigation/nav-content/nav-item/nav-item.component.html index dd77b92b..b48b0c48 100644 --- a/src/app/theme/layout/admin/navigation/nav-content/nav-item/nav-item.component.html +++ b/src/app/theme/layout/admin/navigation/nav-content/nav-item/nav-item.component.html @@ -1,31 +1,38 @@ -@if (!item.hidden) { - @if (item.url && !item.external) { -
  • - - @if (item.icon) { - - } - @if (item.icon) { - {{ item.title }} +@if (!item().hidden) { + @if (item().url && !item().external) { +
  • + + + + @if (item().icon) { + {{ item().title }} } @else { - {{ item.title }} + {{ item().title }} } + + {{ item().title }} +
  • } - - @if (item.url && item.external) { -
  • - - @if (item.icon) { - - } - @if (item.icon) { - {{ item.title }} + @if (item().url && item().external) { +
  • + + + @if (item().icon) { + {{ item().title }} } @else { - {{ item.title }} + {{ item().title }} } + + {{ item().title }} +
  • } + + @if (item().icon) { + + } + } diff --git a/src/app/theme/layout/admin/navigation/nav-content/nav-item/nav-item.component.ts b/src/app/theme/layout/admin/navigation/nav-content/nav-item/nav-item.component.ts index 1c3019b5..1a543c03 100644 --- a/src/app/theme/layout/admin/navigation/nav-content/nav-item/nav-item.component.ts +++ b/src/app/theme/layout/admin/navigation/nav-content/nav-item/nav-item.component.ts @@ -1,30 +1,44 @@ // angular import -import { Component, Input } from '@angular/core'; +import { Component, inject, input } from '@angular/core'; +import { Location } from '@angular/common'; +import { RouterModule } from '@angular/router'; // project import import { NavigationItem } from '../../navigation'; +import { SharedModule } from 'src/app/theme/shared/shared.module'; @Component({ selector: 'app-nav-item', + imports: [SharedModule, RouterModule], templateUrl: './nav-item.component.html', styleUrls: ['./nav-item.component.scss'] }) export class NavItemComponent { + private location = inject(Location); + // public props - @Input() item: NavigationItem; + item = input(); + + // constructor // public method - closeOtherMenu(event) { - const ele = event.target; + closeOtherMenu(event: MouseEvent) { + const ele = event.target as HTMLElement; if (ele !== null && ele !== undefined) { - const parent = ele.parentElement; - const up_parent = parent.parentElement.parentElement; - const last_parent = up_parent.parentElement; - const sections = document.querySelectorAll('.pcoded-hasmenu'); - for (let i = 0; i < sections.length; i++) { - sections[i].classList.remove('active'); - sections[i].classList.remove('pcoded-trigger'); + const parent = ele.parentElement as HTMLElement; + const up_parent = ((parent.parentElement as HTMLElement).parentElement as HTMLElement).parentElement as HTMLElement; + const last_parent = (up_parent.parentElement as HTMLElement).parentElement as HTMLElement; + if (last_parent.classList.contains('pcoded-submenu')) { + up_parent.classList.remove('pcoded-trigger'); + up_parent.classList.remove('active'); + } else { + const sections = document.querySelectorAll('.pcoded-hasmenu'); + for (let i = 0; i < sections.length; i++) { + sections[i].classList.remove('active'); + sections[i].classList.remove('pcoded-trigger'); + } } + if (parent.classList.contains('pcoded-hasmenu')) { parent.classList.add('pcoded-trigger'); parent.classList.add('active'); diff --git a/src/app/theme/layout/admin/navigation/nav-logo/nav-logo.component.html b/src/app/theme/layout/admin/navigation/nav-logo/nav-logo.component.html index c192dd29..58d85b7d 100644 --- a/src/app/theme/layout/admin/navigation/nav-logo/nav-logo.component.html +++ b/src/app/theme/layout/admin/navigation/nav-logo/nav-logo.component.html @@ -1,5 +1,5 @@ -
    - +
    +
    diff --git a/src/app/theme/layout/admin/navigation/nav-logo/nav-logo.component.ts b/src/app/theme/layout/admin/navigation/nav-logo/nav-logo.component.ts index 0f9e41b6..fa5a5825 100644 --- a/src/app/theme/layout/admin/navigation/nav-logo/nav-logo.component.ts +++ b/src/app/theme/layout/admin/navigation/nav-logo/nav-logo.component.ts @@ -1,15 +1,20 @@ // angular import -import { Component, EventEmitter, Input, Output } from '@angular/core'; +import { Component, Input, output } from '@angular/core'; +import { RouterModule } from '@angular/router'; + +// project import +import { SharedModule } from 'src/app/theme/shared/shared.module'; @Component({ selector: 'app-nav-logo', + imports: [SharedModule, RouterModule], templateUrl: './nav-logo.component.html', styleUrls: ['./nav-logo.component.scss'] }) export class NavLogoComponent { // public props @Input() navCollapsed: boolean; - @Output() NavCollapse = new EventEmitter(); + NavCollapse = output(); windowWidth = window.innerWidth; // public method diff --git a/src/app/theme/layout/admin/navigation/navigation.component.html b/src/app/theme/layout/admin/navigation/navigation.component.html index db6ac2e0..865dd77f 100644 --- a/src/app/theme/layout/admin/navigation/navigation.component.html +++ b/src/app/theme/layout/admin/navigation/navigation.component.html @@ -1,6 +1,6 @@ diff --git a/src/app/theme/layout/admin/navigation/navigation.component.ts b/src/app/theme/layout/admin/navigation/navigation.component.ts index 1b54597c..a340d46a 100644 --- a/src/app/theme/layout/admin/navigation/navigation.component.ts +++ b/src/app/theme/layout/admin/navigation/navigation.component.ts @@ -1,25 +1,29 @@ // angular import -import { Component, EventEmitter, Output } from '@angular/core'; +import { Component, output } from '@angular/core'; // project import -import { DattaConfig } from 'src/app/app-config'; +import { SharedModule } from 'src/app/theme/shared/shared.module'; +import { NavLogoComponent } from './nav-logo/nav-logo.component'; +import { NavContentComponent } from './nav-content/nav-content.component'; @Component({ selector: 'app-navigation', + imports: [SharedModule, NavLogoComponent, NavContentComponent], templateUrl: './navigation.component.html', styleUrls: ['./navigation.component.scss'] }) export class NavigationComponent { // public props - @Output() NavCollapse = new EventEmitter(); - @Output() NavCollapsedMob = new EventEmitter(); - navCollapsed: any; - navCollapsedMob = false; - windowWidth = window.innerWidth; + NavCollapse = output(); + NavCollapsedMob = output(); + navCollapsed: boolean; + navCollapsedMob: boolean; + windowWidth: number; // constructor constructor() { - this.navCollapsed = this.windowWidth >= 992 ? DattaConfig.isCollapseMenu : false; + this.windowWidth = window.innerWidth; + this.navCollapsedMob = false; } // public method diff --git a/src/app/theme/layout/admin/navigation/navigation.ts b/src/app/theme/layout/admin/navigation/navigation.ts index 7ab5764b..6cd5c183 100644 --- a/src/app/theme/layout/admin/navigation/navigation.ts +++ b/src/app/theme/layout/admin/navigation/navigation.ts @@ -1,5 +1,3 @@ -import { Injectable } from '@angular/core'; - export interface NavigationItem { id: string; title: string; @@ -13,15 +11,10 @@ export interface NavigationItem { external?: boolean; target?: boolean; breadcrumbs?: boolean; - function?: any; - children?: Navigation[]; -} -export interface Navigation extends NavigationItem { children?: NavigationItem[]; } - -const NavigationItems = [ +export const NavigationItems: NavigationItem[] = [ { id: 'navigation', title: 'Navigation', @@ -190,10 +183,3 @@ const NavigationItems = [ ] } ]; - -@Injectable() -export class NavigationItem { - get() { - return NavigationItems; - } -} diff --git a/src/app/theme/layout/guest/guest.component.ts b/src/app/theme/layout/guest/guest.component.ts index 8b02b6c4..812bb48c 100644 --- a/src/app/theme/layout/guest/guest.component.ts +++ b/src/app/theme/layout/guest/guest.component.ts @@ -1,8 +1,10 @@ // angular import import { Component } from '@angular/core'; +import { RouterModule } from '@angular/router'; @Component({ selector: 'app-guest', + imports: [RouterModule], templateUrl: './guest.component.html', styleUrls: ['./guest.component.scss'] }) diff --git a/src/app/theme/shared/components/breadcrumbs/breadcrumbs.component.html b/src/app/theme/shared/components/breadcrumbs/breadcrumbs.component.html index e5fa7ff3..639c5cd5 100644 --- a/src/app/theme/shared/components/breadcrumbs/breadcrumbs.component.html +++ b/src/app/theme/shared/components/breadcrumbs/breadcrumbs.component.html @@ -15,7 +15,12 @@
    - Reject - Approve + Reject + Approve