diff --git a/angular-hub/src/app/components/cards/community-card.component.ts b/angular-hub/src/app/components/cards/community-card.component.ts index ac45c72e..4b871643 100644 --- a/angular-hub/src/app/components/cards/community-card.component.ts +++ b/angular-hub/src/app/components/cards/community-card.component.ts @@ -1,42 +1,243 @@ -import { ChangeDetectionStrategy, Component, input } from '@angular/core'; -import { NgOptimizedImage, TitleCasePipe } from '@angular/common'; +import { + ChangeDetectionStrategy, + Component, + computed, + input, +} from '@angular/core'; +import { DatePipe, NgOptimizedImage, TitleCasePipe } from '@angular/common'; import { Community } from '../../../models/community.model'; +import community from '../../../server/routes/v1/community'; @Component({ selector: 'app-community-card', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, - imports: [NgOptimizedImage, TitleCasePipe], + imports: [NgOptimizedImage, TitleCasePipe, DatePipe], template: ` -
- +
+
+ {{ community().type | titlecase }} + @if (upcomingEventLength() > 0) { + + {{ upcomingEventLength() }} upcoming event(s) + + } + @if (inactive()) { + + inactive since {{ inactiveSince() | date: 'MMMM y' }} + + } +
+
-
- {{ - community().type | titlecase - }} -

+
+

{{ community().name }}

{{ community().location }}
- + +

+
+ @if (community().eventsUrl) { + + + + } + @if (community().websiteUrl) { + + + + } + @if (community().organizersUrl) { + + + + } + @if (community().youtubeUrl) { + + + + } + @if (community().twitterUrl) { + + + + } + @if (community().linkedinUrl) { + + + + } +
`, styles: [ @@ -44,17 +245,43 @@ import { Community } from '../../../models/community.model'; :host { display: block; padding-block: 0.5rem; - cursor: pointer; + } - &:hover { - h3 { - @apply text-secondary underline; - } - } + .type { + top: -0.7rem; + left: 1.2rem; } `, ], }) export class CommunityCardComponent { community = input.required(); + + upcomingEventLength = computed(() => { + return this.community().events?.filter( + (event) => new Date(event.date).getTime() > new Date().getTime(), + ).length; + }); + + inactive = computed(() => { + const inactivityLimit = new Date(); + inactivityLimit.setMonth(inactivityLimit.getMonth() - 6); + + const newestEvent = this.community().events?.sort( + (a, b) => new Date(b.date).getTime() - new Date(a.date).getTime(), + )[0]; + + return newestEvent + ? new Date(newestEvent.date).getTime() < inactivityLimit.getTime() && + this.community().type === 'meetup' + : false; + }); + + inactiveSince = computed(() => { + const event = this.community().events?.sort( + (a, b) => new Date(b.date).getTime() - new Date(a.date).getTime(), + )[0]; + + return event ? new Date(event.date) : null; + }); } diff --git a/angular-hub/src/app/components/event-section.component.ts b/angular-hub/src/app/components/event-section.component.ts index a745cc6a..c0a0a2bf 100644 --- a/angular-hub/src/app/components/event-section.component.ts +++ b/angular-hub/src/app/components/event-section.component.ts @@ -8,9 +8,7 @@ import { EventCardComponent } from './cards/event-card.component';

{{ title() }}