Skip to content

Commit 163fc20

Browse files
santoshyadavdevsantoshyadavdev
committed
feat: add event component
1 parent d274046 commit 163fc20

File tree

5 files changed

+228
-0
lines changed

5 files changed

+228
-0
lines changed

‎apps/frontend/src/app/app.routes.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,11 @@ export const appRoutes: Route[] = [
3535
),
3636
canActivate: [authGuard],
3737
},
38+
{
39+
path: 'event',
40+
loadComponent: () =>
41+
import('./pages/event/event.component').then((m) => m.EventComponent),
42+
},
3843
{ path: 'landing', redirectTo: '', pathMatch: 'full' },
3944
{ path: '**', redirectTo: '' },
4045
];

‎apps/frontend/src/app/pages/event/event.component.css‎

Whitespace-only changes.

‎apps/frontend/src/app/pages/event/event.component.html‎

Lines changed: 161 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,161 @@
1+
<div class="min-h-screen bg-gray-50 py-8 px-4 sm:px-6 lg:px-8">
2+
<div class="max-w-2xl mx-auto">
3+
<div class="bg-white shadow-lg rounded-lg px-8 py-10">
4+
<div class="text-center mb-8">
5+
<h1 class="text-3xl font-bold text-gray-900 mb-2">Add a New Event</h1>
6+
<p class="text-gray-600">Create an exciting event for the community</p>
7+
</div>
8+
9+
<form [formGroup]="eventForm" (ngSubmit)="onSubmit()" class="space-y-6">
10+
<!-- Conference Selection -->
11+
<div>
12+
<label
13+
for="conference"
14+
class="block text-sm font-medium text-gray-700 mb-2"
15+
>
16+
Conference <span class="text-red-500">*</span>
17+
</label>
18+
<select
19+
formControlName="conference"
20+
id="conference"
21+
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors duration-200 bg-white"
22+
>
23+
<option value="" disabled selected>Select Conference</option>
24+
@for(conf of conferences; track conf.id) {
25+
<option [value]="conf.id">{{ conf.name }}</option>
26+
}
27+
</select>
28+
</div>
29+
30+
<!-- Event Name -->
31+
<div>
32+
<label
33+
for="eventName"
34+
class="block text-sm font-medium text-gray-700 mb-2"
35+
>
36+
Event Name <span class="text-red-500">*</span>
37+
</label>
38+
<input
39+
id="eventName"
40+
formControlName="name"
41+
type="text"
42+
placeholder="Enter event name"
43+
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors duration-200"
44+
/>
45+
</div>
46+
47+
<!-- Event Location -->
48+
<div>
49+
<label
50+
for="eventLocation"
51+
class="block text-sm font-medium text-gray-700 mb-2"
52+
>
53+
Event Location <span class="text-red-500">*</span>
54+
</label>
55+
<input
56+
id="eventLocation"
57+
formControlName="location"
58+
type="text"
59+
placeholder="Enter event location"
60+
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors duration-200"
61+
/>
62+
</div>
63+
64+
<!-- Event Description -->
65+
<div>
66+
<label
67+
for="eventDescription"
68+
class="block text-sm font-medium text-gray-700 mb-2"
69+
>
70+
Event Description
71+
</label>
72+
<textarea
73+
id="eventDescription"
74+
formControlName="description"
75+
rows="4"
76+
placeholder="Describe your event..."
77+
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors duration-200 resize-vertical"
78+
></textarea>
79+
</div>
80+
81+
<!-- Date and Time Row -->
82+
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
83+
<!-- Event Date -->
84+
<div>
85+
<label
86+
for="eventDate"
87+
class="block text-sm font-medium text-gray-700 mb-2"
88+
>
89+
Event Date <span class="text-red-500">*</span>
90+
</label>
91+
<input
92+
id="eventDate"
93+
formControlName="date"
94+
type="date"
95+
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors duration-200"
96+
/>
97+
</div>
98+
99+
<!-- Event Time -->
100+
<div>
101+
<label
102+
for="eventTime"
103+
class="block text-sm font-medium text-gray-700 mb-2"
104+
>
105+
Event Time <span class="text-red-500">*</span>
106+
</label>
107+
<input
108+
id="eventTime"
109+
formControlName="time"
110+
type="time"
111+
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors duration-200"
112+
/>
113+
</div>
114+
</div>
115+
116+
<!-- Event Capacity -->
117+
<div>
118+
<label
119+
for="eventCapacity"
120+
class="block text-sm font-medium text-gray-700 mb-2"
121+
>
122+
Event Capacity
123+
</label>
124+
<input
125+
id="eventCapacity"
126+
formControlName="capacity"
127+
type="number"
128+
min="1"
129+
placeholder="Maximum number of participants"
130+
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors duration-200"
131+
/>
132+
</div>
133+
134+
<!-- Submit Button -->
135+
<div class="pt-6">
136+
<button
137+
type="submit"
138+
class="w-full bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white font-semibold py-3 px-6 rounded-lg transition-all duration-200 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 shadow-lg"
139+
>
140+
<span class="flex items-center justify-center">
141+
<svg
142+
class="w-5 h-5 mr-2"
143+
fill="none"
144+
stroke="currentColor"
145+
viewBox="0 0 24 24"
146+
>
147+
<path
148+
stroke-linecap="round"
149+
stroke-linejoin="round"
150+
stroke-width="2"
151+
d="M12 6v6m0 0v6m0-6h6m-6 0H6"
152+
></path>
153+
</svg>
154+
Create Event
155+
</span>
156+
</button>
157+
</div>
158+
</form>
159+
</div>
160+
</div>
161+
</div>

‎apps/frontend/src/app/pages/event/event.component.spec.ts‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { ComponentFixture, TestBed } from '@angular/core/testing';
2+
import { EventComponent } from './event.component';
3+
4+
describe('EventComponent', () => {
5+
let component: EventComponent;
6+
let fixture: ComponentFixture<EventComponent>;
7+
8+
beforeEach(async () => {
9+
await TestBed.configureTestingModule({
10+
imports: [EventComponent],
11+
}).compileComponents();
12+
13+
fixture = TestBed.createComponent(EventComponent);
14+
component = fixture.componentInstance;
15+
fixture.detectChanges();
16+
});
17+
18+
it('should create', () => {
19+
expect(component).toBeTruthy();
20+
});
21+
});

‎apps/frontend/src/app/pages/event/event.component.ts‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import { Component } from '@angular/core';
2+
import { CommonModule } from '@angular/common';
3+
import {
4+
FormControl,
5+
FormGroup,
6+
ReactiveFormsModule,
7+
Validators,
8+
} from '@angular/forms';
9+
10+
@Component({
11+
selector: 'app-event',
12+
imports: [CommonModule, ReactiveFormsModule],
13+
templateUrl: './event.component.html',
14+
styleUrl: './event.component.css',
15+
})
16+
export class EventComponent {
17+
conferences = [
18+
{ id: 1, name: 'Angular Connect' },
19+
{ id: 2, name: 'ng-conf' },
20+
{ id: 3, name: 'ngVikings' },
21+
];
22+
23+
eventForm = new FormGroup({
24+
conference: new FormControl('', Validators.required),
25+
eventType: new FormControl('', Validators.required),
26+
date: new FormControl('', Validators.required),
27+
location: new FormControl('', Validators.required),
28+
name: new FormControl('', Validators.required),
29+
description: new FormControl('', Validators.required),
30+
time: new FormControl('', Validators.required),
31+
capacity: new FormControl('', Validators.required),
32+
});
33+
34+
onSubmit() {
35+
if (this.eventForm.valid) {
36+
console.log(this.eventForm.value);
37+
} else {
38+
console.log('Form is invalid');
39+
}
40+
}
41+
}

0 commit comments

Comments
 (0)