Skip to content

Commit f1fc422

Browse files
alexwpenginealexwpengine
committed
WIP
1 parent 7e45e10 commit f1fc422

22 files changed

+1519
-241
lines changed

‎examples/angular/template-hierarchy-data-fetching/example-app/src/app/assets/scss/reset.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,9 @@ h2,
3636
h3 {
3737
margin-bottom: 1.5rem;
3838
}
39+
p {
40+
word-wrap: break-word;
41+
}
3942
a {
4043
text-decoration: none;
4144
color: inherit;

‎examples/angular/template-hierarchy-data-fetching/example-app/src/app/components/comments/comment-form/comment-form.component.html‎

Lines changed: 154 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,154 @@
1+
<form
2+
id="comment-form"
3+
class="comment-form"
4+
(ngSubmit)="onSubmit($event)"
5+
#commentForm="ngForm"
6+
>
7+
<!-- Reply indication -->
8+
<div *ngIf="replyData" class="reply-to">
9+
<div>Replying to <strong>{{ replyData.author }}</strong></div>
10+
</div>
11+
12+
<!-- Loading state -->
13+
<div *ngIf="isSubmitting()" class="submitting-overlay">
14+
<p>Submitting your comment...</p>
15+
</div>
16+
17+
<!-- Error message -->
18+
<div *ngIf="formError()" class="error-message">
19+
<p>{{ formError()?.message || "Error submitting comment" }}</p>
20+
<button type="button" (click)="clearError()" class="close-error">×</button>
21+
</div>
22+
23+
<!-- Success message -->
24+
<div *ngIf="showSuccess()" class="success-message">
25+
<p>Comment submitted successfully but waiting for approval!</p>
26+
</div>
27+
28+
<!-- Author name -->
29+
<div class="form-group">
30+
<label for="author">Name *</label>
31+
<input
32+
type="text"
33+
id="author"
34+
name="author"
35+
[(ngModel)]="formData.author"
36+
required
37+
maxlength="245"
38+
placeholder="Your name"
39+
[disabled]="isSubmitting()"
40+
#authorField="ngModel"
41+
/>
42+
<div
43+
*ngIf="authorField.invalid && commentForm.submitted && !isSubmitting()"
44+
class="field-error"
45+
>
46+
<span *ngIf="authorField.errors?.['required']">Name is required</span>
47+
<span *ngIf="authorField.errors?.['maxlength']"
48+
>Name must be less than 245 characters</span
49+
>
50+
</div>
51+
</div>
52+
53+
<!-- Author email -->
54+
<div class="form-group">
55+
<label for="email">Email *</label>
56+
<input
57+
type="email"
58+
id="email"
59+
name="email"
60+
[(ngModel)]="formData.email"
61+
required
62+
maxlength="100"
63+
placeholder="[email protected]"
64+
[disabled]="isSubmitting()"
65+
#emailField="ngModel"
66+
/>
67+
<div
68+
*ngIf="emailField.invalid && commentForm.submitted && !isSubmitting()"
69+
class="field-error"
70+
>
71+
<span *ngIf="emailField.errors?.['required']">Email is required</span>
72+
<span *ngIf="emailField.errors?.['email']"
73+
>Please enter a valid email</span
74+
>
75+
<span *ngIf="emailField.errors?.['maxlength']"
76+
>Email must be less than 100 characters</span
77+
>
78+
</div>
79+
</div>
80+
81+
<!-- Author website (optional) -->
82+
<div class="form-group">
83+
<label for="url">Website</label>
84+
<input
85+
type="url"
86+
id="url"
87+
name="url"
88+
[(ngModel)]="formData.url"
89+
maxlength="200"
90+
placeholder="https://yourwebsite.com"
91+
[disabled]="isSubmitting()"
92+
#urlField="ngModel"
93+
/>
94+
<div
95+
*ngIf="urlField.invalid && commentForm.submitted && !isSubmitting()"
96+
class="field-error"
97+
>
98+
<span *ngIf="urlField.errors?.['url']">Please enter a valid URL</span>
99+
<span *ngIf="urlField.errors?.['maxlength']"
100+
>URL must be less than 200 characters</span
101+
>
102+
</div>
103+
</div>
104+
105+
<!-- Comment content -->
106+
<div class="form-group">
107+
<label for="content">Comment *</label>
108+
<textarea
109+
id="content"
110+
name="content"
111+
[(ngModel)]="formData.content"
112+
required
113+
rows="6"
114+
placeholder="Write your comment here..."
115+
[disabled]="isSubmitting()"
116+
#contentField="ngModel"
117+
></textarea>
118+
<div
119+
*ngIf="contentField.invalid && commentForm.submitted && !isSubmitting()"
120+
class="field-error"
121+
>
122+
<span *ngIf="contentField.errors?.['required']"
123+
>Comment content is required</span
124+
>
125+
</div>
126+
</div>
127+
128+
<!-- Submit button -->
129+
<div class="form-actions text-center">
130+
<button
131+
type="submit"
132+
[disabled]="commentForm.invalid || isSubmitting()"
133+
class="button button-primary submit-comment"
134+
>
135+
{{
136+
isSubmitting()
137+
? "Submitting..."
138+
: replyData
139+
? "Post Reply"
140+
: "Post Comment"
141+
}}
142+
</button>
143+
144+
<button
145+
*ngIf="replyData"
146+
type="button"
147+
(click)="onCancel()"
148+
class="button button-secondary cancel-comment"
149+
[disabled]="isSubmitting()"
150+
>
151+
Cancel Reply
152+
</button>
153+
</div>
154+
</form>

‎examples/angular/template-hierarchy-data-fetching/example-app/src/app/components/comments/comment-form/comment-form.component.scss‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
#comment-form {
2+
display: flex;
3+
flex-direction: column;
4+
gap: 1rem;
5+
background-color: #f9f9f9;
6+
padding: 1rem;
7+
margin-top: 1rem;
8+
}
9+
.message-container {
10+
margin-bottom: 1rem;
11+
}
12+
.reply-to {
13+
text-align: center;
14+
}
15+
.success-message,
16+
.error-message {
17+
display: flex;
18+
align-items: center;
19+
justify-content: space-between;
20+
padding: 12px 16px;
21+
border-radius: 4px;
22+
margin-bottom: 1rem;
23+
}
24+
25+
.success-message {
26+
background-color: #d4edda;
27+
border: 1px solid #c3e6cb;
28+
color: #155724;
29+
}
30+
31+
.error-message {
32+
background-color: #f8d7da;
33+
border: 1px solid #f5c6cb;
34+
color: #721c24;
35+
}
36+
37+
.message-content {
38+
display: flex;
39+
align-items: center;
40+
gap: 8px;
41+
}
42+
43+
.message-icon {
44+
font-weight: bold;
45+
font-size: 1.1em;
46+
}
47+
48+
.message-text {
49+
flex: 1;
50+
}
51+
52+
.dismiss-button {
53+
background: none;
54+
border: none;
55+
font-size: 1.2em;
56+
cursor: pointer;
57+
padding: 0;
58+
width: 20px;
59+
height: 20px;
60+
display: flex;
61+
align-items: center;
62+
justify-content: center;
63+
opacity: 0.7;
64+
}
65+
66+
.dismiss-button:hover {
67+
opacity: 1;
68+
}
69+
70+
.success-message .dismiss-button {
71+
color: #155724;
72+
}
73+
74+
.error-message .dismiss-button {
75+
color: #721c24;
76+
}
77+
input, textarea {
78+
width: 100%;
79+
padding: 0.5rem;
80+
border: 1px solid #ccc;
81+
border-radius: 4px;
82+
box-sizing: border-box;
83+
}

0 commit comments

Comments
 (0)