Event creating W.I.P

frontend/src/app/app.routes.ts

@@ -29,10 +29,22 @@ const protectedRoutes: Routes = [
   },
   {
     path: 'event',
-    loadComponent: () =>
-      import('./pages/event-root/event-root.component').then(
-        (m) => m.EventRootComponent
-      ),
+    children: [
+      {
+        path: '',
+        loadComponent: () =>
+          import('./pages/event-root/event-root.component').then(
+            (m) => m.EventRootComponent
+          ),
+      },
+      {
+        path: 'create',
+        loadComponent: () =>
+          import('./pages/event-root/create-event/create-event.component').then(
+            (m) => m.CreateEventComponent
+          ),
+      },
+    ],
   },
 ];
 

frontend/src/app/layout/main-layout/layout.component.html

@@ -144,10 +144,7 @@
       </div>
     </header>
 
-    <div [ngStyle]="mainContent" class="px-8 py-4 flex-grow text-2xl p-4">
-      <p>isCollapsed: {{ isCollapsed }}</p>
-      <P>isDesktopCollapsed: {{ isDesktopCollapsed }}</P>
-      <P>showMobileMenu: {{ showMobileMenu }}</P>
+    <div [ngStyle]="mainContent" class="overflow-y-auto h-screen">
       <router-outlet></router-outlet>
     </div>
   </div>

frontend/src/app/pages/event-root/create-event/create-event.component.html

@@ -0,0 +1,32 @@
+<div class="flex flex-col h-full">
+  <div class="flex-grow overflow-y-auto px-8 py-8">
+    <div class="w-full flex flex-col">
+      <div class="">
+        @if (currentStep() === 0) {
+          <app-basic-step></app-basic-step>
+        }
+      </div>
+    </div>
+  </div>
+
+  <div
+    [ngStyle]="actionbar"
+    class="w-full max-w-full bg-primary sticky bottom-0 z-50">
+    <!-- <button type="button" class="btn btn-primary" (click)="prevStep()">
+      Prev
+    </button>
+    <button type="button" class="btn btn-primary" (click)="nextStep()">
+      Next
+    </button> -->
+
+    <ul class="steps steps-horizontal w-full">
+      @for (step of steps; track $index) {
+        <li
+          [class.step-accent]="$index <= currentStep()"
+          class="step text-sm md:text-base">
+          <span>{{ step }}</span>
+        </li>
+      }
+    </ul>
+  </div>
+</div>

frontend/src/app/pages/event-root/create-event/create-event.component.ts

@@ -0,0 +1,76 @@
+import { CommonModule } from '@angular/common';
+import {
+  Component,
+  ChangeDetectionStrategy,
+  signal,
+  WritableSignal,
+  ElementRef,
+  OnInit,
+} from '@angular/core';
+
+import {
+  BackgroundPatternService,
+  ThemeService,
+} from '../../../shared/service';
+
+import { BasicStepComponent } from './steps/basic-step.component';
+
+@Component({
+  selector: 'app-create-event',
+  standalone: true,
+  providers: [],
+  imports: [BasicStepComponent, CommonModule],
+  templateUrl: './create-event.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CreateEventComponent implements OnInit {
+  public actionbar: { 'background-image': string } | null = null;
+  public currentStep: WritableSignal<number> = signal(0);
+  public readonly steps: string[] = ['Basic', 'Tickets', 'Review'];
+
+  public constructor(
+    private readonly backgroundPatternService: BackgroundPatternService,
+    private readonly themeService: ThemeService,
+    private readonly el: ElementRef
+  ) {}
+
+  public ngOnInit(): void {
+    this.setBackground();
+  }
+
+  public setBackground(): void {
+    const theme = this.themeService.getTheme();
+    let opacity: number;
+
+    if (theme === 'dark') {
+      opacity = 0.05;
+    } else {
+      opacity = 0.1;
+    }
+
+    const colorPrimaryC = getComputedStyle(
+      this.el.nativeElement
+    ).getPropertyValue('--pc');
+
+    const svgUrlActionbar = this.backgroundPatternService.getBankNotePattern(
+      colorPrimaryC,
+      opacity
+    );
+
+    this.actionbar = {
+      'background-image': `url("${svgUrlActionbar}")`,
+    };
+  }
+
+  public nextStep(): void {
+    if (this.currentStep() < this.steps.length - 1) {
+      this.currentStep.set(this.currentStep() + 1);
+    }
+  }
+
+  public prevStep(): void {
+    if (this.currentStep() > 0) {
+      this.currentStep.set(this.currentStep() - 1);
+    }
+  }
+}

frontend/src/app/pages/event-root/create-event/steps/basic-step.component.html

@@ -0,0 +1,85 @@
+<form class="flex flex-col">
+  <h2 class="text-2xl font-bold mb-6">Event Basic Information</h2>
+
+  <div class="form-control mb-4">
+    <label class="label" for="event-title">
+      <span class="label-text">Event Title</span>
+    </label>
+    <input
+      type="text"
+      id="event-title"
+      placeholder="Enter your event title"
+      class="input input-bordered w-full" />
+  </div>
+
+  <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
+    <div class="form-control">
+      <label class="label" for="event-date">
+        <span class="label-text">Date</span>
+      </label>
+      <input type="date" id="event-date" class="input input-bordered" />
+    </div>
+    <div class="form-control">
+      <label class="label" for="event-time">
+        <span class="label-text">Time</span>
+      </label>
+      <input type="time" id="event-time" class="input input-bordered" />
+    </div>
+  </div>
+
+  <div class="form-control mb-4">
+    <label class="label" for="location-title">
+      <span class="label-text">Location</span>
+    </label>
+    <input
+      type="text"
+      id="location-title"
+      placeholder="Enter your event title"
+      class="input input-bordered w-full" />
+  </div>
+
+  <div class="form-control mb-4">
+    <label class="label" for="event-street">
+      <span class="label-text">Street</span>
+    </label>
+    <input
+      type="text"
+      id="event-street"
+      placeholder="Street name"
+      class="input input-bordered" />
+  </div>
+
+  <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
+    <div class="form-control">
+      <label class="label" for="event-number">
+        <span class="label-text">Street Number</span>
+      </label>
+      <input
+        type="text"
+        id="event-number"
+        placeholder="Street number"
+        class="input input-bordered" />
+    </div>
+    <div class="form-control">
+      <label class="label" for="event-zip">
+        <span class="label-text">Postal Code</span>
+      </label>
+      <input
+        type="text"
+        id="event-zip"
+        placeholder="Postal code"
+        class="input input-bordered" />
+    </div>
+  </div>
+
+  <div class="form-control mb-6">
+    <label class="label" for="event-city">
+      <span class="label-text">City</span>
+    </label>
+    <input
+      type="text"
+      id="event-city"
+      placeholder="City"
+      class="input input-bordered" />
+  </div>
+</form>

frontend/src/app/pages/event-root/create-event/steps/basic-step.component.ts

@@ -0,0 +1,13 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'app-basic-step',
+  standalone: true,
+  templateUrl: './basic-step.component.html',
+  providers: [],
+  imports: [],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class BasicStepComponent {
+  public constructor() {}
+}

frontend/src/app/pages/event-root/event-empty-state/event-empty-state.component.html

@@ -0,0 +1,24 @@
+<div class="flex justify-center w-full h-full items-center">
+  <div class="hero-content text-center">
+    <div class="max-w-xl">
+      <h1 class="text-5xl font-bold">No Events Yet</h1>
+
+      <blockquote class="py-2">
+        <p class="text-sm font-semibold">
+          Every great event starts with a single step. Take yours today!
+        </p>
+      </blockquote>
+
+      <p class="pt-4 pb-8">
+        Create your first event and start
+        <br />
+        selling tickets today!
+      </p>
+      <button
+        (click)="navigateToCreateEvent()"
+        class="btn btn-primary animate-shake animate-once animate-duration-300 animate-delay-[2000ms] animate-ease-linear animate-fill-both">
+        <p>Create Your First Event</p>
+      </button>
+    </div>
+  </div>
+</div>

frontend/src/app/pages/event-root/event-empty-state/event-empty-state.component.ts

@@ -0,0 +1,17 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-event-empty-state',
+  standalone: true,
+  templateUrl: './event-empty-state.component.html',
+  providers: [],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class EventEmptyStateComponent {
+  public constructor(private readonly router: Router) {}
+
+  public navigateToCreateEvent(): void {
+    this.router.navigate(['/event/create']);
+  }
+}

frontend/src/app/pages/event-root/event-root.component.html

@@ -1 +1 @@
-<h1>Event Root Works</h1>
+<app-event-empty-state></app-event-empty-state>

frontend/src/app/pages/event-root/event-root.component.ts

@@ -1,10 +1,12 @@
 import { CommonModule } from '@angular/common';
 import { Component, ChangeDetectionStrategy } from '@angular/core';
 
+import { EventEmptyStateComponent } from './event-empty-state/event-empty-state.component';
+
 @Component({
   selector: 'app-event-root',
   standalone: true,
-  imports: [CommonModule],
+  imports: [CommonModule, EventEmptyStateComponent],
   providers: [],
   templateUrl: './event-root.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,

package.json

@@ -1,6 +1,9 @@
 {
   "name": "mvp-ticket",
   "version": "1.0.0",
+  "engines": {
+    "node": "18.17.1"
+  },
   "description": "",
   "main": "index.js",
   "scripts": {