From 38574a958f48367e674e293101509380c09e36f9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=87etin?=
 <69278826+cetincakiroglu@users.noreply.github.com>
Date: Thu, 23 Dec 2021 10:03:33 +0300
Subject: [PATCH] update steps and tabmenu

---
 src/app/app-routing.module.ts                 | 13 ++++++++-
 src/app/app.module.ts                         | 10 ++++++-
 .../view/menu/confirmationdemo.component.ts   | 15 ++++++++++
 .../demo/view/menu/paymentdemo.component.ts   | 15 ++++++++++
 .../demo/view/menu/personaldemo.component.ts  | 15 ++++++++++
 src/app/demo/view/menu/seatdemo.component.ts  | 15 ++++++++++
 src/app/demo/view/menusdemo.component.html    |  6 ++--
 src/app/demo/view/menusdemo.component.ts      | 29 +++++--------------
 8 files changed, 93 insertions(+), 25 deletions(-)
 create mode 100644 src/app/demo/view/menu/confirmationdemo.component.ts
 create mode 100644 src/app/demo/view/menu/paymentdemo.component.ts
 create mode 100644 src/app/demo/view/menu/personaldemo.component.ts
 create mode 100644 src/app/demo/view/menu/seatdemo.component.ts

diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 7af8497..5a0d5fc 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -24,6 +24,10 @@ import {InvalidStateDemoComponent} from './demo/view/invalidstatedemo.component'
 import {AppTimelineDemoComponent} from './pages/app.timelinedemo.component';
 import {IconsDemoComponent} from './demo/view/iconsdemo.component';
 
+import {SeatDemoComponent} from './demo/view/menu/seatdemo.component';
+import {PersonalDemoComponent} from './demo/view/menu/personaldemo.component';
+import {ConfirmationDemoComponent} from './demo/view/menu/confirmationdemo.component';
+import {PaymentDemoComponent} from './demo/view/menu/paymentdemo.component';
 @NgModule({
     imports: [
         RouterModule.forRoot([
@@ -41,7 +45,14 @@ import {IconsDemoComponent} from './demo/view/iconsdemo.component';
                     {path: 'uikit/tree', component: TreeDemoComponent},
                     {path: 'uikit/panel', component: PanelsDemoComponent},
                     {path: 'uikit/overlay', component: OverlaysDemoComponent},
-                    {path: 'uikit/menu', component: MenusDemoComponent},
+                    {path: 'uikit/menu', component: MenusDemoComponent,
+                        children: [
+                            {path:'', component: PersonalDemoComponent },
+                            {path:'seat', component: SeatDemoComponent },
+                            {path:'payment', component: PaymentDemoComponent },
+                            {path:'confirmation', component: ConfirmationDemoComponent },
+                        ]
+                    },
                     {path: 'uikit/message', component: MessagesDemoComponent},
                     {path: 'uikit/misc', component: MiscDemoComponent},
                     {path: 'uikit/charts', component: ChartsDemoComponent},
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 0e93817..42acb76 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -119,6 +119,10 @@ import {AppCrudComponent} from './pages/app.crud.component';
 import {AppTimelineDemoComponent} from './pages/app.timelinedemo.component';
 import {IconsDemoComponent} from './demo/view/iconsdemo.component';
 import {AppBlocksDemoComponent} from './demo/view/app.blocksdemo.component';
+import {SeatDemoComponent} from './demo/view/menu/seatdemo.component';
+import {PaymentDemoComponent} from './demo/view/menu/paymentdemo.component';
+import {PersonalDemoComponent} from './demo/view/menu/personaldemo.component';
+import {ConfirmationDemoComponent} from './demo/view/menu/confirmationdemo.component';
 
 import {CountryService} from './demo/service/countryservice';
 import {CustomerService} from './demo/service/customerservice';
@@ -260,7 +264,11 @@ FullCalendarModule.registerPlugins([
         AppCrudComponent,
         AppTimelineDemoComponent,
         AppBlocksDemoComponent,
-        BlockViewer
+        BlockViewer,
+        SeatDemoComponent,
+        PaymentDemoComponent,
+        PersonalDemoComponent,
+        ConfirmationDemoComponent
     ],
     providers: [
         {provide: LocationStrategy, useClass: HashLocationStrategy},
diff --git a/src/app/demo/view/menu/confirmationdemo.component.ts b/src/app/demo/view/menu/confirmationdemo.component.ts
new file mode 100644
index 0000000..e4a809d
--- /dev/null
+++ b/src/app/demo/view/menu/confirmationdemo.component.ts
@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-confirmationdemo',
+  template: `
+  <div class="flex align-items-center py-5 px-3">
+    <i class="pi pi-fw pi-check mr-2 text-2xl"></i>
+    <p class="m-0 text-lg">Confirmation Component Content via Child Route</p>
+  </div>
+  `
+})
+export class ConfirmationDemoComponent {
+
+  constructor() { }
+}
diff --git a/src/app/demo/view/menu/paymentdemo.component.ts b/src/app/demo/view/menu/paymentdemo.component.ts
new file mode 100644
index 0000000..39a6421
--- /dev/null
+++ b/src/app/demo/view/menu/paymentdemo.component.ts
@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-paymentdemo',
+  template: `
+    <div class="flex align-items-center py-5 px-3">
+      <i class="pi pi-fw pi-money-bill mr-2 text-2xl"></i>
+      <p class="m-0 text-lg">Payment Component Content via Child Route</p>
+    </div>
+  `
+})
+export class PaymentDemoComponent{
+
+  constructor() { }
+}
diff --git a/src/app/demo/view/menu/personaldemo.component.ts b/src/app/demo/view/menu/personaldemo.component.ts
new file mode 100644
index 0000000..9988593
--- /dev/null
+++ b/src/app/demo/view/menu/personaldemo.component.ts
@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-personaldemo',
+  template: `
+  <div class="flex align-items-center py-5 px-3">
+    <i class="pi pi-fw pi-user mr-2 text-2xl"></i>
+    <p class="m-0 text-lg">Personal Component Content via Child Route</p>
+  </div>
+  `
+})
+export class PersonalDemoComponent{
+
+  constructor() { }
+}
diff --git a/src/app/demo/view/menu/seatdemo.component.ts b/src/app/demo/view/menu/seatdemo.component.ts
new file mode 100644
index 0000000..633bf40
--- /dev/null
+++ b/src/app/demo/view/menu/seatdemo.component.ts
@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-seatdemo',
+  template: `
+    <div class="flex align-items-center py-5 px-3">
+      <i class="pi pi-fw pi-ticket mr-2 text-2xl"></i>
+      <p class="m-0 text-lg">Seat Component Content via Child Route</p>
+    </div>
+  `
+})
+export class SeatDemoComponent{
+
+  constructor() { }
+}
diff --git a/src/app/demo/view/menusdemo.component.html b/src/app/demo/view/menusdemo.component.html
index f990bb9..c3ccec3 100755
--- a/src/app/demo/view/menusdemo.component.html
+++ b/src/app/demo/view/menusdemo.component.html
@@ -23,14 +23,16 @@
     <div class="col-12 md:col-6">
         <div class="card card-w-title">
             <h5>Steps</h5>
-            <p-steps [model]="stepsItems" [activeIndex]="1"></p-steps>
+            <p-steps [model]="routeItems" [readonly]="false" (activeIndexChange)="pageIndex = $event" [activeIndex]="pageIndex"></p-steps>
+            <router-outlet></router-outlet>
         </div>
     </div>
 
     <div class="col-12 md:col-6">
         <div class="card card-w-title">
             <h5>TabMenu</h5>
-            <p-tabMenu [model]="tabMenuItems" [activeItem]="tabMenuItems[0]"></p-tabMenu>
+            <p-tabMenu [model]="routeItems" [activeItem]="routeItems[0]"></p-tabMenu>
+            <router-outlet></router-outlet>
         </div>
     </div>
 
diff --git a/src/app/demo/view/menusdemo.component.ts b/src/app/demo/view/menusdemo.component.ts
index 0c6f98b..f6c2b2f 100755
--- a/src/app/demo/view/menusdemo.component.ts
+++ b/src/app/demo/view/menusdemo.component.ts
@@ -13,7 +13,7 @@ export class MenusDemoComponent implements OnInit {
 
     items: MenuItem[];
 
-    tabMenuItems: MenuItem[];
+    routeItems: MenuItem[];
 
     megaMenuItems: MegaMenuItem[];
 
@@ -27,6 +27,8 @@ export class MenusDemoComponent implements OnInit {
 
     plainMenuItems: MenuItem[];
 
+    pageIndex: number = 0;
+
     ngOnInit() {
 
         this.tieredItems = [
@@ -282,11 +284,11 @@ export class MenusDemoComponent implements OnInit {
         this.breadcrumbItems.push({ label: 'Backpacks' });
         this.breadcrumbItems.push({ label: 'Item' });
 
-        this.tabMenuItems = [
-            {label: 'Personal'},
-            {label: 'Seat'},
-            {label: 'Payment'},
-            {label: 'Confirmation'}
+        this.routeItems = [
+            {label: 'Personal',routerLink:''},
+            {label: 'Seat', routerLink:'seat'},
+            {label: 'Payment', routerLink:'payment'},
+            {label: 'Confirmation', routerLink:'confirmation'},
         ];
 
         this.megaMenuItems = [
@@ -466,21 +468,6 @@ export class MenusDemoComponent implements OnInit {
                 ]
             }
         ];
-
-        this.stepsItems = [
-            {
-                label: 'Personal'
-            },
-            {
-                label: 'Seat'
-            },
-            {
-                label: 'Payment'
-            },
-            {
-                label: 'Confirmation'
-            }
-        ];
     }
 
 }