fix(openchallenges): create pipe to map enum values of challenge prop…

…erties to labels (#2612)

libs/openchallenges/challenge-search/src/lib/challenge-search-filters.ts

@@ -1,11 +1,11 @@
-import {
-  ChallengeCategory,
-  ChallengeIncentive,
-  ChallengeSort,
-  ChallengeStatus,
-  ChallengeSubmissionType,
-} from '@sagebionetworks/openchallenges/api-client-angular';
 import { Filter } from '@sagebionetworks/openchallenges/ui';
+import {
+  ChallengeCategoriesOptions,
+  ChallengeIncentivesOptions,
+  ChallengeStatusOptions,
+  ChallengeSubmissionTypesOptions,
+  ChallengeSortOptions,
+} from '@sagebionetworks/openchallenges/util';
 
 const thisYear = new Date().getFullYear();
 
@@ -55,113 +55,13 @@ export const challengeStartYearRangeFilter: Filter[] = [
   },
 ];
 
-export const challengeStatusFilter: Filter[] = [
-  {
-    value: ChallengeStatus.Active,
-    label: 'Active',
-  },
-  {
-    value: ChallengeStatus.Upcoming,
-    label: 'Upcoming',
-  },
-  {
-    value: ChallengeStatus.Completed,
-    label: 'Completed',
-  },
-];
-
-export const challengeSubmissionTypesFilter: Filter[] = [
-  {
-    value: ChallengeSubmissionType.ContainerImage,
-    label: 'Container Image',
-  },
-  {
-    value: ChallengeSubmissionType.Mlcube,
-    label: 'MLCube',
-  },
-  {
-    value: ChallengeSubmissionType.Notebook,
-    label: 'Notebook',
-  },
-  {
-    value: ChallengeSubmissionType.PredictionFile,
-    label: 'Prediction File',
-  },
-  {
-    value: ChallengeSubmissionType.Other,
-    label: 'Other',
-  },
-];
-
-export const challengeIncentivesFilter: Filter[] = [
-  {
-    value: ChallengeIncentive.Monetary,
-    label: 'Monetary',
-  },
-  {
-    value: ChallengeIncentive.Publication,
-    label: 'Publication',
-  },
-  {
-    value: ChallengeIncentive.SpeakingEngagement,
-    label: 'Speaking Engagement',
-  },
-  {
-    value: ChallengeIncentive.Other,
-    label: 'Other',
-  },
-];
-
-export const challengePlatformsFilter: Filter[] = [];
-
+export const challengeCategoriesFilter: Filter[] = ChallengeCategoriesOptions;
+export const challengeIncentivesFilter: Filter[] = ChallengeIncentivesOptions;
 export const challengeInputDataTypesFilter: Filter[] = [];
-
-export const challengeCategoriesFilter: Filter[] = [
-  {
-    value: ChallengeCategory.Featured,
-    label: 'Featured',
-  },
-  {
-    value: ChallengeCategory.Benchmark,
-    label: 'Benchmark',
-  },
-  {
-    value: ChallengeCategory.Hackathon,
-    label: 'Hackathon',
-  },
-  {
-    value: ChallengeCategory.StartingSoon,
-    label: 'Starting Soon',
-  },
-  {
-    value: ChallengeCategory.EndingSoon,
-    label: 'Closing Soon',
-  },
-  {
-    value: ChallengeCategory.RecentlyStarted,
-    label: 'Recently Launched',
-  },
-  {
-    value: ChallengeCategory.RecentlyEnded,
-    label: 'Recently Completed',
-  },
-];
-
 export const challengeOrganizationsFilter: Filter[] = [];
-
 export const challengeOrganizersFilter: Filter[] = [];
-
-export const challengeSortFilter: Filter[] = [
-  {
-    value: ChallengeSort.Relevance,
-    label: 'Relevance',
-  },
-  {
-    value: ChallengeSort.StartDate,
-    label: 'Start Date',
-  },
-  {
-    value: ChallengeSort.Starred,
-    label: 'Most Starred',
-  },
-];
+export const challengePlatformsFilter: Filter[] = [];
+export const challengeSortFilter: Filter[] = ChallengeSortOptions;
+export const challengeStatusFilter: Filter[] = ChallengeStatusOptions;
+export const challengeSubmissionTypesFilter: Filter[] =
+  ChallengeSubmissionTypesOptions;

libs/openchallenges/challenge/src/lib/challenge-overview/challenge-overview.component.html

@@ -26,7 +26,7 @@ <h3 class="section-title">Challenge Details</h3>
         </tr>
         <tr>
           <td class="text-right">Status</td>
-          <td>{{ prettify(challenge.status) }}</td>
+          <td>{{ challenge.status | challengeStatusLabel }}</td>
         </tr>
         <tr>
           <td class="text-right">Platform</td>
@@ -58,7 +58,7 @@ <h3 class="section-title">Challenge Details</h3>
               nowrap
               *ngFor="let submissionType of challenge.submissionTypes; let isLast = last"
             >
-              {{ prettify(submissionType) }}{{ isLast ? '' : ', ' }}</span
+              {{ submissionType | challengeSubmissionTypeLabel }}{{ isLast ? '' : ', ' }}</span
             >
           </td>
           <ng-template #na_subs>
@@ -69,7 +69,7 @@ <h3 class="section-title">Challenge Details</h3>
           <td class="text-right">Incentive(s)</td>
           <td *ngIf="challenge.incentives && challenge.incentives.length > 0; else na_prize">
             <span nowrap *ngFor="let incentive of challenge.incentives; let isLast = last">
-              {{ prettify(incentive) }}{{ isLast ? '' : ', ' }}</span
+              {{ incentive | challengeIncentiveLabel }}{{ isLast ? '' : ', ' }}</span
             >
           </td>
           <ng-template #na_prize>

libs/openchallenges/challenge/src/lib/challenge-overview/challenge-overview.component.ts

@@ -5,28 +5,31 @@ import {
   MOCK_ORGANIZATION_CARDS,
   OrganizationCard,
 } from '@sagebionetworks/openchallenges/ui';
-import { MatIconModule } from '@angular/material/icon';
 
+import { MatIconModule } from '@angular/material/icon';
+import {
+  ChallengeIncentiveLabelPipe,
+  ChallengeStatusLabelPipe,
+  ChallengeSubmissionTypeLabelPipe,
+} from '@sagebionetworks/openchallenges/util';
 @Component({
   selector: 'openchallenges-challenge-overview',
   standalone: true,
-  imports: [CommonModule, MatIconModule],
+  imports: [
+    ChallengeIncentiveLabelPipe,
+    ChallengeStatusLabelPipe,
+    ChallengeSubmissionTypeLabelPipe,
+    CommonModule,
+    MatIconModule,
+  ],
   templateUrl: './challenge-overview.component.html',
   styleUrls: ['./challenge-overview.component.scss'],
 })
 export class ChallengeOverviewComponent {
   @Input({ required: true }) challenge!: Challenge;
   organizationCards: OrganizationCard[] = MOCK_ORGANIZATION_CARDS;
-  // mockTopics = ['breast', 'cancer'];
 
   useNaIfFalsey(str: string | null | undefined) {
-    return str || 'Not available';
-  }
-
-  prettify(camel: string | undefined) {
-    return camel
-      ? camel.charAt(0).toUpperCase() +
-          camel.slice(1).replace(/_/g, ' ').toLowerCase()
-      : undefined;
+    return str ?? 'Not available';
   }
 }

libs/openchallenges/ui/src/lib/challenge-card/challenge-card.component.html

@@ -28,9 +28,17 @@
     </div>
     <div class="card-footer">
       <mat-icon aria-hidden="true" class="card-icon">emoji_events</mat-icon>
-      <div class="difficulty-tag mat-small">
-        {{ incentives }}
+      <div
+        class="incentive-tag mat-small"
+        *ngIf="challenge.incentives.length > 0; else noIncentives"
+      >
+        <ng-container *ngFor="let incentive of challenge.incentives; let isLast = last">
+          {{ incentive | challengeIncentiveLabel }}{{ isLast ? '' : ', ' }}
+        </ng-container>
       </div>
     </div>
+    <ng-template #noIncentives>
+      <div class="incentive-tag mat-small">No incentives listed</div>
+    </ng-template>
   </div>
 </div>

libs/openchallenges/ui/src/lib/challenge-card/challenge-card.component.scss

@@ -32,7 +32,7 @@
 }
 
 // FOOTER
-.difficulty-tag {
+.incentive-tag {
   display: flex;
   align-items: center;
   flex: 1;

libs/openchallenges/ui/src/lib/challenge-card/challenge-card.component.ts

@@ -7,13 +7,18 @@ import {
   Image,
   ImageService,
 } from '@sagebionetworks/openchallenges/api-client-angular';
-// import { startCase } from 'lodash';
+import { ChallengeIncentiveLabelPipe } from '@sagebionetworks/openchallenges/util';
 import { Observable } from 'rxjs';
 
 @Component({
   selector: 'openchallenges-challenge-card',
   standalone: true,
-  imports: [CommonModule, MatIconModule, RouterModule],
+  imports: [
+    ChallengeIncentiveLabelPipe,
+    CommonModule,
+    MatIconModule,
+    RouterModule,
+  ],
   templateUrl: './challenge-card.component.html',
   styleUrls: ['./challenge-card.component.scss'],
 })
@@ -22,7 +27,6 @@ export class ChallengeCardComponent implements OnInit {
   banner$: Observable<Image> | undefined;
   status!: string | undefined;
   desc!: string;
-  incentives!: string;
   statusClass!: string;
   time_info!: string | number;
 
@@ -35,17 +39,6 @@ export class ChallengeCardComponent implements OnInit {
       this.desc = this.challenge.headline
         ? this.challenge.headline
         : this.challenge.description;
-      this.incentives =
-        this.challenge.incentives.length === 0
-          ? 'No incentives listed'
-          : this.challenge.incentives
-              .map(function (s) {
-                return (
-                  s.charAt(0).toUpperCase() +
-                  s.slice(1).replace(/_/g, ' ').toLowerCase()
-                );
-              })
-              .join(', ');
       this.banner$ = this.challenge.avatarUrl
         ? this.imageService.getImage({
             objectKey: this.challenge.avatarUrl,

libs/openchallenges/util/src/index.ts

@@ -4,3 +4,5 @@ export * from './lib/handle-http-error';
 export * from './lib/http-status-redirect';
 export * from './lib/is-api-client-error';
 export * from './lib/page-title.service';
+export * from './lib/pipe/challenge-property-label.pipe';
+export * from './lib/pipe/challenge-property-options';

libs/openchallenges/util/src/lib/pipe/challenge-property-label.pipe.ts

@@ -0,0 +1,76 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import {
+  ChallengeCategory,
+  ChallengeIncentive,
+  ChallengeSort,
+  ChallengeStatus,
+  ChallengeSubmissionType,
+} from '@sagebionetworks/openchallenges/api-client-angular';
+import {
+  ChallengeCategoriesOptions,
+  ChallengeIncentivesOptions,
+  ChallengeSortOptions,
+  ChallengeStatusOptions,
+  ChallengeSubmissionTypesOptions,
+} from './challenge-property-options';
+
+@Pipe({
+  name: 'challengeCategoryLabel',
+  standalone: true,
+})
+export class ChallengeCategoryLabelPipe implements PipeTransform {
+  transform(category: ChallengeCategory): string | undefined {
+    const option = ChallengeCategoriesOptions.find(
+      (item) => item.value === category
+    );
+    return option ? option.label : undefined;
+  }
+}
+
+@Pipe({
+  name: 'challengeIncentiveLabel',
+  standalone: true,
+})
+export class ChallengeIncentiveLabelPipe implements PipeTransform {
+  transform(incentive: ChallengeIncentive): string | undefined {
+    const option = ChallengeIncentivesOptions.find(
+      (item) => item.value === incentive
+    );
+    return option ? option.label : undefined;
+  }
+}
+
+@Pipe({
+  name: 'challengeSortLabel',
+  standalone: true,
+})
+export class ChallengeSortLabelPipe implements PipeTransform {
+  transform(sort: ChallengeSort): string | undefined {
+    const option = ChallengeSortOptions.find((item) => item.value === sort);
+    return option ? option.label : undefined;
+  }
+}
+
+@Pipe({
+  name: 'challengeStatusLabel',
+  standalone: true,
+})
+export class ChallengeStatusLabelPipe implements PipeTransform {
+  transform(status: ChallengeStatus): string | undefined {
+    const option = ChallengeStatusOptions.find((item) => item.value === status);
+    return option ? option.label : undefined;
+  }
+}
+
+@Pipe({
+  name: 'challengeSubmissionTypeLabel',
+  standalone: true,
+})
+export class ChallengeSubmissionTypeLabelPipe implements PipeTransform {
+  transform(submissionType: ChallengeSubmissionType): string | undefined {
+    const option = ChallengeSubmissionTypesOptions.find(
+      (item) => item.value === submissionType
+    );
+    return option ? option.label : undefined;
+  }
+}