Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit 8a204db

Browse files
geromegrignongeromegrignon
committedNov 3, 2024·
refactor: communities listing
1 parent 9b9cfff commit 8a204db

19 files changed

+1015
-503
lines changed
 

‎angular-hub/src/app/components/cards/community-card.component.ts

+264-37
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,287 @@
1-
import { ChangeDetectionStrategy, Component, input } from '@angular/core';
2-
import { NgOptimizedImage, TitleCasePipe } from '@angular/common';
1+
import {
2+
ChangeDetectionStrategy,
3+
Component,
4+
computed,
5+
input,
6+
} from '@angular/core';
7+
import { DatePipe, NgOptimizedImage, TitleCasePipe } from '@angular/common';
38
import { Community } from '../../../models/community.model';
9+
import community from '../../../server/routes/v1/community';
410

511
@Component({
612
selector: 'app-community-card',
713
standalone: true,
814
changeDetection: ChangeDetectionStrategy.OnPush,
9-
imports: [NgOptimizedImage, TitleCasePipe],
15+
imports: [NgOptimizedImage, TitleCasePipe, DatePipe],
1016
template: `
11-
<article>
12-
<a
13-
[href]="community().url ?? '#'"
14-
target="_blank"
15-
class="flex flex-col max-w-36 items-start gap-1"
16-
>
17-
<img
18-
class="rounded-xl"
19-
[src]="community().logo"
20-
height="200"
21-
width="200"
22-
alt=""
23-
/>
24-
<div class="text-start">
25-
<span class="font-bold text-primary" itemprop="type">{{
26-
community().type | titlecase
27-
}}</span>
28-
<h3
29-
[attr.aria-labelledby]="community().name"
30-
class="text-xl font-bold"
31-
itemprop="title"
32-
>
33-
{{ community().name }}
34-
</h3>
35-
<span class="text-gray-500 dark:text-gray-400" itemprop="location">{{
36-
community().location
37-
}}</span>
17+
<article
18+
class="flex items-start md:items-center gap-6 bg-[#20212C] px-6 pt-8 pb-4 rounded-xl relative"
19+
>
20+
<div class="absolute type">
21+
<span
22+
class="font-medium text-sm text-black bg-slate-400 rounded p-1 mr-4"
23+
itemprop="type"
24+
>{{ community().type | titlecase }}</span
25+
>
26+
@if (upcomingEventLength() > 0) {
27+
<span
28+
class="font-medium text-sm text-black bg-green-100 rounded p-1"
29+
itemprop="type"
30+
>
31+
{{ upcomingEventLength() }} upcoming event(s)
32+
</span>
33+
}
34+
@if (inactive()) {
35+
<span
36+
class="font-medium text-sm text-black bg-orange-200 rounded p-1"
37+
itemprop="type"
38+
>
39+
inactive since {{ inactiveSince() | date: 'MMMM y' }}
40+
</span>
41+
}
42+
</div>
43+
<img
44+
class="rounded-xl"
45+
[src]="community().logo"
46+
height="60"
47+
width="60"
48+
alt=""
49+
/>
50+
<div class="flex-1">
51+
<h3 class="text-xl font-bold" itemprop="title">
52+
{{ community().name }}
53+
</h3>
54+
<span class="text-gray-500 dark:text-gray-400" itemprop="location">{{
55+
community().location
56+
}}</span>
57+
<div class="flex md:hidden gap-4 mt-2">
58+
@if (community().eventsUrl) {
59+
<a
60+
class="rounded-xl bg-[#344255] p-2"
61+
[attr.href]="community().eventsUrl"
62+
target="_blank"
63+
title="events URL"
64+
>
65+
<img
66+
ngSrc="/assets/icons/event-icon.svg"
67+
alt=""
68+
height="24"
69+
width="24"
70+
/>
71+
</a>
72+
}
73+
@if (community().websiteUrl) {
74+
<a
75+
class="rounded-xl bg-[#344255] p-2"
76+
[attr.href]="community().websiteUrl"
77+
target="_blank"
78+
title="website URL"
79+
>
80+
<img
81+
ngSrc="/assets/icons/website_link-icon.svg"
82+
alt=""
83+
height="24"
84+
width="24"
85+
/>
86+
</a>
87+
}
88+
@if (community().organizersUrl) {
89+
<a
90+
class="rounded-xl bg-[#344255] p-2"
91+
[attr.href]="community().organizersUrl"
92+
target="_blank"
93+
title="organizers URL"
94+
>
95+
<img
96+
ngSrc="/assets/icons/group-icon.svg"
97+
alt=""
98+
height="24"
99+
width="24"
100+
/>
101+
</a>
102+
}
103+
@if (community().youtubeUrl) {
104+
<a
105+
class="rounded-xl bg-[#344255] p-2"
106+
[attr.href]="community().youtubeUrl"
107+
target="_blank"
108+
title="YouTube URL"
109+
>
110+
<img
111+
ngSrc="/assets/icons/youtube-icon.svg"
112+
alt=""
113+
height="24"
114+
width="24"
115+
/>
116+
</a>
117+
}
118+
@if (community().twitterUrl) {
119+
<a
120+
class="rounded-xl bg-[#344255] p-2"
121+
[attr.href]="community().twitterUrl"
122+
target="_blank"
123+
title="events URL"
124+
>
125+
<img
126+
ngSrc="/assets/icons/twitter-icon.svg"
127+
alt=""
128+
height="24"
129+
width="24"
130+
/>
131+
</a>
132+
}
133+
@if (community().linkedinUrl) {
134+
<a
135+
class="rounded-xl bg-[#6b6e92] p-2"
136+
[attr.href]="community().linkedinUrl"
137+
target="_blank"
138+
>
139+
<img
140+
ngSrc="/assets/icons/linkedin-icon.svg"
141+
alt=""
142+
height="24"
143+
width="24"
144+
/>
145+
</a>
146+
}
38147
</div>
39-
</a>
148+
</div>
149+
<div class="hidden md:flex gap-4 ml-6">
150+
@if (community().eventsUrl) {
151+
<a
152+
class="rounded-xl bg-[#344255] p-2"
153+
[attr.href]="community().eventsUrl"
154+
target="_blank"
155+
title="events URL"
156+
>
157+
<img
158+
ngSrc="/assets/icons/event-icon.svg"
159+
alt=""
160+
height="30"
161+
width="30"
162+
/>
163+
</a>
164+
}
165+
@if (community().websiteUrl) {
166+
<a
167+
class="rounded-xl bg-[#344255] p-2"
168+
[attr.href]="community().websiteUrl"
169+
target="_blank"
170+
title="website URL"
171+
>
172+
<img
173+
ngSrc="/assets/icons/website_link-icon.svg"
174+
alt=""
175+
height="30"
176+
width="30"
177+
/>
178+
</a>
179+
}
180+
@if (community().organizersUrl) {
181+
<a
182+
class="rounded-xl bg-[#344255] p-2"
183+
[attr.href]="community().organizersUrl"
184+
target="_blank"
185+
title="organizers URL"
186+
>
187+
<img
188+
ngSrc="/assets/icons/group-icon.svg"
189+
alt=""
190+
height="30"
191+
width="30"
192+
/>
193+
</a>
194+
}
195+
@if (community().youtubeUrl) {
196+
<a
197+
class="rounded-xl bg-[#344255] p-2"
198+
[attr.href]="community().youtubeUrl"
199+
target="_blank"
200+
title="YouTube URL"
201+
>
202+
<img
203+
ngSrc="/assets/icons/youtube-icon.svg"
204+
alt=""
205+
height="30"
206+
width="30"
207+
/>
208+
</a>
209+
}
210+
@if (community().twitterUrl) {
211+
<a
212+
class="rounded-xl bg-[#344255] p-2"
213+
[attr.href]="community().twitterUrl"
214+
target="_blank"
215+
title="Twitter URL"
216+
>
217+
<img
218+
ngSrc="/assets/icons/twitter-icon.svg"
219+
alt=""
220+
height="30"
221+
width="30"
222+
/>
223+
</a>
224+
}
225+
@if (community().linkedinUrl) {
226+
<a
227+
class="rounded-xl bg-[#344255] p-2"
228+
[attr.href]="community().linkedinUrl"
229+
target="_blank"
230+
title="LinkedIn URL"
231+
>
232+
<img
233+
ngSrc="/assets/icons/linkedin-icon.svg"
234+
alt=""
235+
height="30"
236+
width="30"
237+
/>
238+
</a>
239+
}
240+
</div>
40241
</article>
41242
`,
42243
styles: [
43244
`
44245
:host {
45246
display: block;
46247
padding-block: 0.5rem;
47-
cursor: pointer;
248+
}
48249
49-
&:hover {
50-
h3 {
51-
@apply text-secondary underline;
52-
}
53-
}
250+
.type {
251+
top: -0.7rem;
252+
left: 1.2rem;
54253
}
55254
`,
56255
],
57256
})
58257
export class CommunityCardComponent {
59258
community = input.required<Community>();
259+
260+
upcomingEventLength = computed(() => {
261+
return this.community().events?.filter(
262+
(event) => new Date(event.date).getTime() > new Date().getTime(),
263+
).length;
264+
});
265+
266+
inactive = computed(() => {
267+
const inactivityLimit = new Date();
268+
inactivityLimit.setMonth(inactivityLimit.getMonth() - 6);
269+
270+
const newestEvent = this.community().events?.sort(
271+
(a, b) => new Date(b.date).getTime() - new Date(a.date).getTime(),
272+
)[0];
273+
274+
return newestEvent
275+
? new Date(newestEvent.date).getTime() < inactivityLimit.getTime() &&
276+
this.community().type === 'meetup'
277+
: false;
278+
});
279+
280+
inactiveSince = computed(() => {
281+
const event = this.community().events?.sort(
282+
(a, b) => new Date(b.date).getTime() - new Date(a.date).getTime(),
283+
)[0];
284+
285+
return event ? new Date(event.date) : null;
286+
});
60287
}

‎angular-hub/src/app/components/event-section.component.ts

+1-3
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,7 @@ import { EventCardComponent } from './cards/event-card.component';
88
<h3 class="mb-4">{{ title() }}</h3>
99
<ul class="flex flex-col gap-4 justify-start items-stretch w-full">
1010
@for (event of events(); track event.url) {
11-
<li
12-
class="flex flex-col gap-2 bg-[#20212C] px-2 rounded-xl md:min-w-[400px]"
13-
>
11+
<li class="bg-[#20212C] p-6 rounded-xl md:min-w-[400px]">
1412
<a [attr.href]="event.url" target="_blank">
1513
<app-event-card [event]="event" />
1614
</a>

‎angular-hub/src/app/components/navigation/navigation.component.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<nav
22
class="hidden min-w-72 px-8 pt-4 lg:flex flex-col items-center bg-[#20212C] drop-shadow-r-2xl"
33
>
4-
<a class="flex items-center gap-2" routerLink="/">
4+
<a class="flex items-center gap-4" routerLink="/">
55
<img class="h-12" src="/assets/images/logo.webp" alt="" />
6-
<span class="title text-3xl">HUB</span>
6+
<span class="title text-5xl">HUB</span>
77
</a>
88

99
<ul class="flex flex-col gap-2 mt-12">

0 commit comments

Comments
 (0)
Please sign in to comment.