Skip to content

Commit 544a6ba

Browse files
lennyStreaventlennyStreavent
committed
feat: refactor concept detail component with modular sections for improved organization
- Replaced existing sections in the ConceptDetailComponent with standalone components for Event Foundation, Timeline, Speakers, and Pricing Strategy. - Enhanced the HTML structure for better readability and maintainability. - Updated styles for new components to ensure consistent design and responsiveness. - Integrated suggestion handling within each section for a more interactive user experience. - Improved overall code organization by separating concerns into dedicated components.
1 parent 1e87fca commit 544a6ba

16 files changed

+2107
-1494
lines changed

‎client/src/app/features/concept-detail/components/concept-foundation-section/concept-foundation-section.component.html‎

Lines changed: 168 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,168 @@
1+
<!-- Event Foundation -->
2+
<mat-expansion-panel [expanded]="expanded" class="foundation-panel">
3+
<mat-expansion-panel-header>
4+
<mat-panel-title>
5+
<mat-icon class="section-icon">foundation</mat-icon>
6+
<span>Event Foundation</span>
7+
<mat-icon class="completion-icon"
8+
[class.complete]="isComplete()"
9+
[class.incomplete]="!isComplete()"
10+
[class.has-suggestions]="hasSuggestions()"
11+
[title]="hasSuggestions() ? 'Has pending AI suggestions' : (isComplete() ? 'Section complete' : 'Section incomplete')">
12+
{{ hasSuggestions() ? 'auto_awesome' : (isComplete() ? 'check_circle' : 'radio_button_unchecked') }}
13+
</mat-icon>
14+
</mat-panel-title>
15+
</mat-expansion-panel-header>
16+
17+
<div class="panel-content">
18+
<div class="detail-grid">
19+
<div class="detail-item" *ngIf="concept.description">
20+
<div class="detail-label">
21+
<mat-icon>description</mat-icon>
22+
<strong>Description</strong>
23+
</div>
24+
<p class="detail-value">{{ concept.description }}</p>
25+
</div>
26+
27+
<div class="detail-item" *ngIf="concept.eventDetails?.objectives?.length">
28+
<div class="detail-label">
29+
<mat-icon>flag</mat-icon>
30+
<strong>Objectives</strong>
31+
</div>
32+
<ul class="objectives-list">
33+
<li *ngFor="let objective of concept.eventDetails?.objectives">{{ objective }}</li>
34+
</ul>
35+
</div>
36+
37+
<div class="detail-item" *ngIf="concept.eventDetails?.targetAudience">
38+
<div class="detail-label">
39+
<mat-icon>group</mat-icon>
40+
<strong>Target Audience</strong>
41+
</div>
42+
<p class="detail-value">{{ concept.eventDetails?.targetAudience }}</p>
43+
</div>
44+
45+
<div class="detail-row">
46+
<div class="detail-item" *ngIf="concept.eventDetails?.format || getFieldSuggestion('eventDetails.format')">
47+
<div class="detail-label">
48+
<mat-icon>category</mat-icon>
49+
<strong>Format</strong>
50+
</div>
51+
<p class="detail-value" *ngIf="concept.eventDetails?.format">{{ concept.eventDetails?.format }}</p>
52+
53+
<!-- Format Suggestion -->
54+
<div class="suggestion-item" *ngIf="getFieldSuggestion('eventDetails.format') as suggestion">
55+
<div class="suggestion-content">
56+
<div class="suggestion-change">
57+
<span class="current">{{ suggestion.currentValue }}</span>
58+
<mat-icon class="arrow">arrow_forward</mat-icon>
59+
<span class="suggested">{{ suggestion.suggestedValue }}</span>
60+
</div>
61+
<p class="suggestion-reason">{{ suggestion.reasoning }}</p>
62+
<div class="suggestion-actions">
63+
<button mat-icon-button color="primary" (click)="acceptFieldUpdate(suggestion)">
64+
<mat-icon>check</mat-icon>
65+
</button>
66+
<button mat-icon-button color="warn" (click)="rejectFieldUpdate(suggestion)">
67+
<mat-icon>close</mat-icon>
68+
</button>
69+
</div>
70+
</div>
71+
</div>
72+
</div>
73+
74+
<div class="detail-item" *ngIf="concept.eventDetails?.capacity || getFieldSuggestion('eventDetails.capacity')">
75+
<div class="detail-label">
76+
<mat-icon>people</mat-icon>
77+
<strong>Capacity</strong>
78+
</div>
79+
<p class="detail-value" *ngIf="concept.eventDetails?.capacity">{{ concept.eventDetails?.capacity }} attendees</p>
80+
81+
<!-- Capacity Suggestion -->
82+
<div class="suggestion-item" *ngIf="getFieldSuggestion('eventDetails.capacity') as suggestion">
83+
<div class="suggestion-content">
84+
<div class="suggestion-change">
85+
<span class="current">{{ suggestion.currentValue }}</span>
86+
<mat-icon class="arrow">arrow_forward</mat-icon>
87+
<span class="suggested">{{ suggestion.suggestedValue }}</span>
88+
</div>
89+
<p class="suggestion-reason">{{ suggestion.reasoning }}</p>
90+
<div class="suggestion-actions">
91+
<button mat-icon-button color="primary" (click)="acceptFieldUpdate(suggestion)">
92+
<mat-icon>check</mat-icon>
93+
</button>
94+
<button mat-icon-button color="warn" (click)="rejectFieldUpdate(suggestion)">
95+
<mat-icon>close</mat-icon>
96+
</button>
97+
</div>
98+
</div>
99+
</div>
100+
</div>
101+
</div>
102+
103+
<div class="detail-row" *ngIf="concept.eventDetails?.startDate || concept.eventDetails?.endDate">
104+
<div class="detail-item" *ngIf="concept.eventDetails?.startDate">
105+
<div class="detail-label">
106+
<mat-icon>schedule</mat-icon>
107+
<strong>Start Date</strong>
108+
</div>
109+
<p class="detail-value">{{ concept.eventDetails?.startDate | date:'MMM d, y' }}</p>
110+
</div>
111+
112+
<div class="detail-item" *ngIf="concept.eventDetails?.endDate">
113+
<div class="detail-label">
114+
<mat-icon>event</mat-icon>
115+
<strong>End Date</strong>
116+
</div>
117+
<p class="detail-value">{{ concept.eventDetails?.endDate | date:'MMM d, y' }}</p>
118+
</div>
119+
</div>
120+
121+
<div class="detail-item" *ngIf="concept.eventDetails?.duration || getFieldSuggestion('eventDetails.duration')">
122+
<div class="detail-label">
123+
<mat-icon>schedule</mat-icon>
124+
<strong>Duration</strong>
125+
</div>
126+
<p class="detail-value" *ngIf="concept.eventDetails?.duration">{{ concept.eventDetails?.duration }}</p>
127+
128+
<!-- Duration Suggestion -->
129+
<div class="suggestion-item" *ngIf="getFieldSuggestion('eventDetails.duration') as suggestion">
130+
<div class="suggestion-content">
131+
<div class="suggestion-change">
132+
<span class="current">{{ suggestion.currentValue }}</span>
133+
<mat-icon class="arrow">arrow_forward</mat-icon>
134+
<span class="suggested">{{ suggestion.suggestedValue }}</span>
135+
</div>
136+
<p class="suggestion-reason">{{ suggestion.reasoning }}</p>
137+
<div class="suggestion-actions">
138+
<button mat-icon-button color="primary" (click)="acceptFieldUpdate(suggestion)">
139+
<mat-icon>check</mat-icon>
140+
</button>
141+
<button mat-icon-button color="warn" (click)="rejectFieldUpdate(suggestion)">
142+
<mat-icon>close</mat-icon>
143+
</button>
144+
</div>
145+
</div>
146+
</div>
147+
</div>
148+
149+
<div class="detail-item" *ngIf="concept.eventDetails?.location">
150+
<div class="detail-label">
151+
<mat-icon>place</mat-icon>
152+
<strong>Location</strong>
153+
</div>
154+
<p class="detail-value">{{ concept.eventDetails?.location }}</p>
155+
</div>
156+
157+
<div class="detail-item" *ngIf="concept.tags.length > 0">
158+
<div class="detail-label">
159+
<mat-icon>local_offer</mat-icon>
160+
<strong>Tags</strong>
161+
</div>
162+
<div class="tags-container">
163+
<span *ngFor="let tag of concept.tags" class="tag">{{ tag }}</span>
164+
</div>
165+
</div>
166+
</div>
167+
</div>
168+
</mat-expansion-panel>

0 commit comments

Comments
 (0)