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..b921d982 --- /dev/null +++ b/src/app/demo/admin-panel/README.md @@ -0,0 +1,24 @@ +**Note:** *This README file is maintained to ensure the product structure aligns with the Pro version, making migration to Pro seamless when you choose to upgrade. This alignment aims to provide a smoother experience during the upgrade, especially regarding directory structure. You may notice these files and folders appearing throughout the project where they are part of the Pro version. While this might feel slightly inconvenient, it is intended to simplify your migration process and provide assistance. If these files are unnecessary for your use case, you can easily remove them.* + +Please continue reading below to explore the features of the Pro version: + +# Datta Able Admin Panel - Unlock Premium Features with the Pro Version + +Looking for more advanced features and pages? This page(folder) is part of the premium version of our 4.0.0 template. Upgrade to the Pro version to access these exclusive pages and take your project to the next level! + +## Included in the Pro Version: + +- [Dashboard](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/dashboard/default) : Interactive and insightful dashboards with essential data visualizations. +- [Widget](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/widget/statistic) : Pre-built widgets to enhance functionality and speed up development. +- [Admin Panel](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/online-course/dashboard) : Fully responsive and user-friendly admin panel for efficient management. +- [Component](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/basic/alert) : A diverse library of reusable and customizable UI components. +- [Icons](https://feathericons.com/) : A variety of icons for intuitive navigation and design. +- [Forms](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/forms/basic) : Dynamic forms with validation and customization options. +- [Table](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/bootstrap/basicTable) : Structured and sortable tables for data management. +- [Chart](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/chart/apex-chart) : Beautifully rendered charts to present data visually. +- [Authentication](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/auth/signup) : Secure authentication pages with login, signup, and password recovery. +- [To Do List](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/todo/basic) : A functional and intuitive task manager. +- [Rating](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/advance/rating) : Integrated rating components for user feedback. +- [Toasts](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/basic/toasts) : Notification system for alerts and messages. + +👉 [Explore the Pro version now](https://codedthemes.com/item/datta-able-angular/?utm_source=free_demo&utm_medium=codedthemes&utm_campaign=button_download_premium) - and supercharge your development experience! diff --git a/src/app/demo/application/README.md b/src/app/demo/application/README.md new file mode 100644 index 00000000..b921d982 --- /dev/null +++ b/src/app/demo/application/README.md @@ -0,0 +1,24 @@ +**Note:** *This README file is maintained to ensure the product structure aligns with the Pro version, making migration to Pro seamless when you choose to upgrade. This alignment aims to provide a smoother experience during the upgrade, especially regarding directory structure. You may notice these files and folders appearing throughout the project where they are part of the Pro version. While this might feel slightly inconvenient, it is intended to simplify your migration process and provide assistance. If these files are unnecessary for your use case, you can easily remove them.* + +Please continue reading below to explore the features of the Pro version: + +# Datta Able Admin Panel - Unlock Premium Features with the Pro Version + +Looking for more advanced features and pages? This page(folder) is part of the premium version of our 4.0.0 template. Upgrade to the Pro version to access these exclusive pages and take your project to the next level! + +## Included in the Pro Version: + +- [Dashboard](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/dashboard/default) : Interactive and insightful dashboards with essential data visualizations. +- [Widget](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/widget/statistic) : Pre-built widgets to enhance functionality and speed up development. +- [Admin Panel](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/online-course/dashboard) : Fully responsive and user-friendly admin panel for efficient management. +- [Component](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/basic/alert) : A diverse library of reusable and customizable UI components. +- [Icons](https://feathericons.com/) : A variety of icons for intuitive navigation and design. +- [Forms](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/forms/basic) : Dynamic forms with validation and customization options. +- [Table](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/bootstrap/basicTable) : Structured and sortable tables for data management. +- [Chart](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/chart/apex-chart) : Beautifully rendered charts to present data visually. +- [Authentication](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/auth/signup) : Secure authentication pages with login, signup, and password recovery. +- [To Do List](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/todo/basic) : A functional and intuitive task manager. +- [Rating](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/advance/rating) : Integrated rating components for user feedback. +- [Toasts](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/basic/toasts) : Notification system for alerts and messages. + +👉 [Explore the Pro version now](https://codedthemes.com/item/datta-able-angular/?utm_source=free_demo&utm_medium=codedthemes&utm_campaign=button_download_premium) - and supercharge your development experience! 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..b921d982 --- /dev/null +++ b/src/app/demo/extension/README.md @@ -0,0 +1,24 @@ +**Note:** *This README file is maintained to ensure the product structure aligns with the Pro version, making migration to Pro seamless when you choose to upgrade. This alignment aims to provide a smoother experience during the upgrade, especially regarding directory structure. You may notice these files and folders appearing throughout the project where they are part of the Pro version. While this might feel slightly inconvenient, it is intended to simplify your migration process and provide assistance. If these files are unnecessary for your use case, you can easily remove them.* + +Please continue reading below to explore the features of the Pro version: + +# Datta Able Admin Panel - Unlock Premium Features with the Pro Version + +Looking for more advanced features and pages? This page(folder) is part of the premium version of our 4.0.0 template. Upgrade to the Pro version to access these exclusive pages and take your project to the next level! + +## Included in the Pro Version: + +- [Dashboard](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/dashboard/default) : Interactive and insightful dashboards with essential data visualizations. +- [Widget](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/widget/statistic) : Pre-built widgets to enhance functionality and speed up development. +- [Admin Panel](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/online-course/dashboard) : Fully responsive and user-friendly admin panel for efficient management. +- [Component](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/basic/alert) : A diverse library of reusable and customizable UI components. +- [Icons](https://feathericons.com/) : A variety of icons for intuitive navigation and design. +- [Forms](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/forms/basic) : Dynamic forms with validation and customization options. +- [Table](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/bootstrap/basicTable) : Structured and sortable tables for data management. +- [Chart](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/chart/apex-chart) : Beautifully rendered charts to present data visually. +- [Authentication](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/auth/signup) : Secure authentication pages with login, signup, and password recovery. +- [To Do List](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/todo/basic) : A functional and intuitive task manager. +- [Rating](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/advance/rating) : Integrated rating components for user feedback. +- [Toasts](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/basic/toasts) : Notification system for alerts and messages. + +👉 [Explore the Pro version now](https://codedthemes.com/item/datta-able-angular/?utm_source=free_demo&utm_medium=codedthemes&utm_campaign=button_download_premium) - and supercharge your development experience! diff --git a/src/app/demo/layout/README.md b/src/app/demo/layout/README.md new file mode 100644 index 00000000..b921d982 --- /dev/null +++ b/src/app/demo/layout/README.md @@ -0,0 +1,24 @@ +**Note:** *This README file is maintained to ensure the product structure aligns with the Pro version, making migration to Pro seamless when you choose to upgrade. This alignment aims to provide a smoother experience during the upgrade, especially regarding directory structure. You may notice these files and folders appearing throughout the project where they are part of the Pro version. While this might feel slightly inconvenient, it is intended to simplify your migration process and provide assistance. If these files are unnecessary for your use case, you can easily remove them.* + +Please continue reading below to explore the features of the Pro version: + +# Datta Able Admin Panel - Unlock Premium Features with the Pro Version + +Looking for more advanced features and pages? This page(folder) is part of the premium version of our 4.0.0 template. Upgrade to the Pro version to access these exclusive pages and take your project to the next level! + +## Included in the Pro Version: + +- [Dashboard](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/dashboard/default) : Interactive and insightful dashboards with essential data visualizations. +- [Widget](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/widget/statistic) : Pre-built widgets to enhance functionality and speed up development. +- [Admin Panel](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/online-course/dashboard) : Fully responsive and user-friendly admin panel for efficient management. +- [Component](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/basic/alert) : A diverse library of reusable and customizable UI components. +- [Icons](https://feathericons.com/) : A variety of icons for intuitive navigation and design. +- [Forms](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/forms/basic) : Dynamic forms with validation and customization options. +- [Table](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/bootstrap/basicTable) : Structured and sortable tables for data management. +- [Chart](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/chart/apex-chart) : Beautifully rendered charts to present data visually. +- [Authentication](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/auth/signup) : Secure authentication pages with login, signup, and password recovery. +- [To Do List](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/todo/basic) : A functional and intuitive task manager. +- [Rating](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/advance/rating) : Integrated rating components for user feedback. +- [Toasts](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/basic/toasts) : Notification system for alerts and messages. + +👉 [Explore the Pro version now](https://codedthemes.com/item/datta-able-angular/?utm_source=free_demo&utm_medium=codedthemes&utm_campaign=button_download_premium) - and supercharge your development experience! 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..b921d982 --- /dev/null +++ b/src/app/demo/widget/README.md @@ -0,0 +1,24 @@ +**Note:** *This README file is maintained to ensure the product structure aligns with the Pro version, making migration to Pro seamless when you choose to upgrade. This alignment aims to provide a smoother experience during the upgrade, especially regarding directory structure. You may notice these files and folders appearing throughout the project where they are part of the Pro version. While this might feel slightly inconvenient, it is intended to simplify your migration process and provide assistance. If these files are unnecessary for your use case, you can easily remove them.* + +Please continue reading below to explore the features of the Pro version: + +# Datta Able Admin Panel - Unlock Premium Features with the Pro Version + +Looking for more advanced features and pages? This page(folder) is part of the premium version of our 4.0.0 template. Upgrade to the Pro version to access these exclusive pages and take your project to the next level! + +## Included in the Pro Version: + +- [Dashboard](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/dashboard/default) : Interactive and insightful dashboards with essential data visualizations. +- [Widget](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/widget/statistic) : Pre-built widgets to enhance functionality and speed up development. +- [Admin Panel](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/online-course/dashboard) : Fully responsive and user-friendly admin panel for efficient management. +- [Component](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/basic/alert) : A diverse library of reusable and customizable UI components. +- [Icons](https://feathericons.com/) : A variety of icons for intuitive navigation and design. +- [Forms](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/forms/basic) : Dynamic forms with validation and customization options. +- [Table](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/bootstrap/basicTable) : Structured and sortable tables for data management. +- [Chart](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/chart/apex-chart) : Beautifully rendered charts to present data visually. +- [Authentication](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/auth/signup) : Secure authentication pages with login, signup, and password recovery. +- [To Do List](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/todo/basic) : A functional and intuitive task manager. +- [Rating](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/advance/rating) : Integrated rating components for user feedback. +- [Toasts](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/basic/toasts) : Notification system for alerts and messages. + +👉 [Explore the Pro version now](https://codedthemes.com/item/datta-able-angular/?utm_source=free_demo&utm_medium=codedthemes&utm_campaign=button_download_premium) - and supercharge your development experience! 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