Feature: Create Event - First Step Frontend #17
|
@ -29,10 +29,22 @@ const protectedRoutes: Routes = [
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: 'event',
|
path: 'event',
|
||||||
loadComponent: () =>
|
children: [
|
||||||
import('./pages/event-root/event-root.component').then(
|
{
|
||||||
(m) => m.EventRootComponent
|
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
|
||||||
|
),
|
||||||
|
},
|
||||||
|
],
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|
|
@ -144,10 +144,7 @@
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<div [ngStyle]="mainContent" class="px-8 py-4 flex-grow text-2xl p-4">
|
<div [ngStyle]="mainContent" class="overflow-y-auto h-screen">
|
||||||
<p>isCollapsed: {{ isCollapsed }}</p>
|
|
||||||
<P>isDesktopCollapsed: {{ isDesktopCollapsed }}</P>
|
|
||||||
<P>showMobileMenu: {{ showMobileMenu }}</P>
|
|
||||||
<router-outlet></router-outlet>
|
<router-outlet></router-outlet>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -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>
|
|
@ -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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -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>
|
|
@ -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() {}
|
||||||
|
}
|
|
@ -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>
|
|
@ -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']);
|
||||||
|
}
|
||||||
|
}
|
|
@ -1 +1 @@
|
||||||
<h1>Event Root Works</h1>
|
<app-event-empty-state></app-event-empty-state>
|
||||||
|
|
|
@ -1,10 +1,12 @@
|
||||||
import { CommonModule } from '@angular/common';
|
import { CommonModule } from '@angular/common';
|
||||||
import { Component, ChangeDetectionStrategy } from '@angular/core';
|
import { Component, ChangeDetectionStrategy } from '@angular/core';
|
||||||
|
|
||||||
|
import { EventEmptyStateComponent } from './event-empty-state/event-empty-state.component';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-event-root',
|
selector: 'app-event-root',
|
||||||
standalone: true,
|
standalone: true,
|
||||||
imports: [CommonModule],
|
imports: [CommonModule, EventEmptyStateComponent],
|
||||||
providers: [],
|
providers: [],
|
||||||
templateUrl: './event-root.component.html',
|
templateUrl: './event-root.component.html',
|
||||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||||
|
|
|
@ -1,6 +1,9 @@
|
||||||
{
|
{
|
||||||
"name": "mvp-ticket",
|
"name": "mvp-ticket",
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
|
"engines": {
|
||||||
|
"node": "18.17.1"
|
||||||
|
},
|
||||||
"description": "",
|
"description": "",
|
||||||
"main": "index.js",
|
"main": "index.js",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
|
|
Loading…
Reference in New Issue