diff --git a/src/app/cube/browse/browse.component.html b/src/app/cube/browse/browse.component.html index 02da5d5fb..8bba80531 100644 --- a/src/app/cube/browse/browse.component.html +++ b/src/app/cube/browse/browse.component.html @@ -1,67 +1,176 @@
-
- -
-
+ + + +
+ {{ copy.RESULTS }} ({{ this.totalLearningObjects ? this.totalLearningObjects : '0' }}) + {{ + copy.CLEARSEARCH }} + + +
+ + +
+
+ + + + +
+ +
+
    +
  • + +
    • +
- + +
+ +
+
    +
  • + +
    • +
+
+
-
- - + +
+ +
+
    +
  • + +
    • +
+
-
-
-
- {{ copy.RESULTS }} ({{ this.totalLearningObjects ? this.totalLearningObjects : - '0' }}) - {{ - copy.CLEARSEARCH }} - - -
- - - Search for non-curricular resources - + + +
+ +
+
    +
  • + +
    • +
+
+
+ + + + + +
+ Search for non-curricular resources +
+ + +
+
    +
  • + Newest +
    • +
  • + Most Downloaded +
    • +
+
- - - -
-
    -
  • - Date (Newest first) -
    • -
  • - Date (Oldest first) -
    • -
  • - Downloads -
    • -
-
- -
-

{{ copy.NORESULTS }}

-
+ + +
+
+ +
+

Filter

+
+ + +
+ +
+ + +
+ + +
+
+
+ + +
+

{{ copy.NORESULTS }}

+
+ +
+
+ +
  • span .svg-inline--fa { - margin-left: 10px; + &:hover { + color: $dark-grey; + background: rgba(0, 0, 0, 0.04); } + &:focus { + outline: 2px solid $blue-accent; + outline-offset: 2px; + } + } + } - .results-options { - display: flex; - flex-direction: row; - - & > *:not(:last-child), .search-CARD { - margin-right: 20px; + // Body - scrollable + .filter-modal-body { + overflow-y: auto; + overflow-x: hidden; + flex: 1; + padding: 20px; + -webkit-overflow-scrolling: touch; + + ::ng-deep { + // Filter section styles + clark-filter-section { + display: block; + margin-bottom: 12px; + padding-bottom: 12px; + border-bottom: 1px solid $light-grey; + + &:last-child { + margin-bottom: 0; + padding-bottom: 0; + border-bottom: none; } } - .sort, - .mobile-filters { - font-size: $normal; - cursor: pointer; - display: flex; - align-items: center; + .filter-section { + padding-left: 0 !important; + + .header { + padding: 8px 0; + margin-bottom: 8px; + cursor: pointer; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + user-select: none; + + p { + font-weight: 600; + color: $darker-grey; + font-size: $normal; + margin: 0; + flex: 1; + } + + span { + display: flex; + align-items: center; + justify-content: flex-end; + flex-shrink: 0; + margin-left: 12px; - .svg-inline--fa { - font-size: $smaller; - margin: 0 5px; + i { + color: $dark-grey; + font-size: $smaller; + } + } } - & > .svg-inline--fa { - margin-left: 20px; + hr { + display: none; } - .removeSort { - color: $error-red; - margin-right: 10px; + .filter-wrapper { + padding: 0; + display: block; + + .filter { + display: flex; + align-items: flex-start; + margin-bottom: 8px; - & > * { - @include vert-center; - font-size: $small; + &:last-child { + margin-bottom: 0; + } + + clark-checkbox { + margin-right: 10px; + flex-shrink: 0; + } } } + } - &.mobile-filters { - display: none; + // Checkbox styles inside modal + clark-checkbox { + --checkbox-size: 16px; - & > .svg-inline--fa { - font-size: $small; - margin-left: 12px; + input[type='checkbox'] { + width: var(--checkbox-size); + height: var(--checkbox-size); + margin-right: 8px; + } + + label { + font-size: $normal; + color: $dark-grey; + margin: 0; + cursor: pointer; + line-height: 1.5; + font-weight: normal; + + &:hover { + color: $darker-grey; } } } } + } - clark-learning-object-component { - width: 100%; + // Footer - sticky to bottom + .filter-modal-footer { + display: flex; + gap: 12px; + padding: 16px 24px; + border-top: 1px solid $light-grey; + background: white; + flex-shrink: 0; + box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.04); + } +} - &:not(:last-child) { - margin-bottom: 15px; - } +// Filter footer buttons +.filter-footer-btn { + flex: 1; + border: none; + cursor: pointer; + transition: all 0.2s ease; + display: flex; + align-items: center; + justify-content: center; + gap: 6px; + white-space: nowrap; + + .button-text { + flex-shrink: 0; + display: inline; + } + + .result-count { + font-weight: 500; + opacity: 0.95; + } + + &.primary-btn { + background: $light-blue; + color: white; + border-radius: 4px; + padding: 11px 20px; + font-size: $small; + font-weight: normal; + text-transform: uppercase; + box-shadow: none; + + &:hover:not(:disabled) { + opacity: 0.8; + background: $light-blue; + } + + &:active:not(:disabled) { + opacity: 0.9; + } + + &:focus-visible { + outline: 2px solid $light-blue; + outline-offset: 2px; + } + + &:disabled { + opacity: 0.5; + cursor: not-allowed; + } + } + + &.secondary-btn { + background: white; + color: $dark-grey; + border: 1px solid $dark-grey; + border-radius: 4px; + padding: 11px 20px; + font-size: $small; + font-weight: normal; + text-transform: uppercase; + + &:hover:not(:disabled) { + opacity: 0.8; + } + + &:focus-visible { + outline: 2px solid $light-blue; + outline-offset: 2px; + } + + &:disabled { + opacity: 0.5; + cursor: not-allowed; } } } -::ng-deep .popup.dropdown li.active { - background: $blue-accent; - color: white !important; +// Results container +.results-container { + padding: 30px 0; + min-height: 300px; + + .no-results { + text-align: center; + color: $dark-grey; + padding: 40px 20px; + } } -.paginationCtrl { - margin-top: 40px; +// Responsive grid layout +.results-grid { + display: grid; + // Large desktop: 5-wide grid + grid-template-columns: repeat(5, minmax(0, 1fr)); + gap: 20px; margin-bottom: 30px; + clark-learning-object-component { + min-height: 350px; + } +} + +// Pagination +.paginationCtrl { + margin: 40px 0 30px; + ul { margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; + flex-wrap: wrap; + gap: 5px; li { color: $homepage-light-blue; @@ -196,15 +629,15 @@ $learning-object-width: 820px; font-size: 15px; background: transparent; padding: 5px 10px; - margin: 0 5px; list-style-type: none; text-align: center; border-radius: 4px; cursor: pointer; + transition: all 0.15s ease; svg { padding: 0px 10px; - } + } &.gone { color: $homepage-pagination; @@ -214,104 +647,132 @@ $learning-object-width: 820px; &:not(.active):not(:disabled):hover { opacity: 80%; cursor: pointer; - } + } &.active { background: $box-background; color: $homepage-light-blue; + font-weight: 600; } } } } -// mobile styles -@media (max-width: 750px) { +// Responsive breakpoints +@media (max-width: 1600px) { + .results-grid { + grid-template-columns: repeat(4, 1fr); + } +} - clark-filter { - width: 100%; +@media (max-width: 1200px) { + .results-grid { + grid-template-columns: repeat(2, 1fr); } +} - .mobile-filters { - display: inline-flex !important; +@media (max-width: 750px) { + .container { + padding: 15px; } - .browse-columns { + .filter-bar { + gap: 8px; - .sidebar-wrapper { - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - visibility: hidden; - opacity: 0; - transform: scale(0.9); - transition: all 0.15s ease; - background: white; - max-width: none !important; - display: flex; - flex-direction: column; - align-items: flex-start; - justify-content: flex-start; + .filter-btn, + .filter-dropdown-btn, + .sort-btn { + padding: 6px 10px; + font-size: $smaller; + } + + .filter-bar-actions { width: 100%; - padding: 20px; - height: 100%; - box-sizing: border-box; - padding-top: 80px; + margin-left: 0; + margin-top: 10px; - .column-title { - width: 100%; + .search-card-link { + display: none; } - .filters-clear-all { - display: none; + .sort-btn { + flex: 1; } + } + } - &.active { - opacity: 1; - transform: scale(1); - visibility: visible; - z-index: 4; - overflow: scroll; + .results-grid { + grid-template-columns: 1fr; + gap: 15px; + } - .btn-group { - display: flex; - margin-top: 25px; - width: 100%; + // Keep modal left-aligned (not right or bottom-sheet) on mobile too + .filter-modal-wrapper { + align-items: stretch; + justify-content: flex-start; + } - & > *:not(:last-child) { - margin-left: 15px; - } - } - } + .filter-modal { + max-width: 100%; + border-radius: 0; + transform: translateX(-100%); + box-shadow: 2px 0 12px rgba(0, 0, 0, 0.15); + + .filter-modal-header { + padding: 16px; } - .content .column-title { - background: transparent; - box-shadow: none; - padding: 0; - flex-direction: column; + .filter-modal-body { + padding: 16px; + } - & > span { - background: white; - padding: 15px; - text-align: center; - box-shadow: 0 0 6px 1px rgba(0, 0, 0, 0.03); - } + .filter-modal-footer { + padding: 12px 16px; + gap: 8px; + flex-direction: row; + } + } - .results-options { - padding: 15px 0 10px; - background: transparent; - justify-content: space-between; + .filter-modal-wrapper.active .filter-modal { + transform: translateX(0); + } - & > * { - background: transparent; - } - } + .filter-footer-btn { + padding: 10px 12px; + font-size: $small; + flex: 1; + + .button-text { + display: inline; } + + .result-count { + display: inline; + } + + &.secondary-btn { + flex: 0.8; + } + } + + .page-header { + padding: 15px 0; + } +} + +// Tablet +@media (min-width: 751px) and (max-width: 1024px) { + .filter-modal { + max-width: 600px; } } +// Utility .selected { - color: $homepage-light-blue; + color: $homepage-light-blue; +} + +::ng-deep .popup.dropdown li.active { + background: $blue-accent; + color: white !important; } diff --git a/src/app/cube/browse/browse.component.ts b/src/app/cube/browse/browse.component.ts index 17bf4a596..e175cf37b 100644 --- a/src/app/cube/browse/browse.component.ts +++ b/src/app/cube/browse/browse.component.ts @@ -1,18 +1,22 @@ -import { debounceTime, takeUntil } from 'rxjs/operators'; import { AfterViewInit, ChangeDetectorRef, Component, HostListener, OnDestroy, + Renderer2, + ViewChild } from '@angular/core'; import { ActivatedRoute, Router } from '@angular/router'; import { LearningObject } from '@entity'; -import { COPY } from './browse.copy'; -import { Observable, Subject } from 'rxjs'; -import { OrderBy, Query, SortType } from '../../interfaces/query'; import { NavbarService } from 'app/core/client-module/navbar.service'; import { SearchService } from 'app/core/learning-object-module/search/search.service'; +import { Observable, Subject } from 'rxjs'; +import { debounceTime, takeUntil } from 'rxjs/operators'; +import { OrderBy, Query, SortType } from '../../interfaces/query'; +import { COPY } from './browse.copy'; +import { FilterSectionInfo } from './components/filter-section/filter-section.component'; +import { FilterComponent } from './components/filter/filter.component'; @Component({ selector: 'cube-browse', @@ -21,14 +25,14 @@ import { SearchService } from 'app/core/learning-object-module/search/search.ser }) export class BrowseComponent implements AfterViewInit, OnDestroy { copy = COPY; - learningObjects: LearningObject[]; + learningObjects: LearningObject[] = []; totalLearningObjects = 0; outcomeSources: any[]; query: Query = { text: '', currPage: 1, - limit: 10, + limit: 15, length: [], noGuidelines: '', guidelines: [], @@ -72,9 +76,17 @@ export class BrowseComponent implements AfterViewInit, OnDestroy { shouldResetPage = false; sortMenuDown: boolean; - showClearSort: boolean; sortText = 'Newest'; + // Filter dropdown management + activeFilterDropdown: string | null = null; + topicFilter: FilterSectionInfo; + levelFilter: FilterSectionInfo; + durationFilter: FilterSectionInfo; + materialsFilter: FilterSectionInfo; + + @ViewChild(FilterComponent) filterComponent: FilterComponent; + @HostListener('window:resize', ['$event']) handelResize(event) { this.windowWidth = event.target.innerWidth; @@ -87,6 +99,7 @@ export class BrowseComponent implements AfterViewInit, OnDestroy { private router: Router, private cd: ChangeDetectorRef, private navService: NavbarService, + private renderer: Renderer2, ) { this.windowWidth = window.innerWidth; this.cd.detach(); @@ -110,9 +123,109 @@ export class BrowseComponent implements AfterViewInit, OnDestroy { this.sortText = this.query.text && this.query.orderBy === OrderBy.None ? '' : this.sortText; await this.fetchLearningObjects(this.query); + // Initialize filter dropdowns after filter component is initialized + this.initializeFilterDropdowns(); }); } + /** + * Initialize filter dropdown data from the filter component + */ + private initializeFilterDropdowns() { + // Wait for filter component to be ready (with retries) + let attempts = 0; + const maxAttempts = 30; // Increased for materials filter which may load slower + const checkInterval = setInterval(() => { + attempts++; + if (this.filterComponent && this.filterComponent.topicFilter) { + this.topicFilter = this.filterComponent.topicFilter; + this.levelFilter = this.filterComponent.levelFilter; + this.durationFilter = this.filterComponent.lengthFilter; + + // Try to get materials filter (tag-based) + const materialsTagFilter = this.filterComponent.getMaterialsTagFilter(); + if (materialsTagFilter && materialsTagFilter.filters && materialsTagFilter.filters.length > 0) { + this.materialsFilter = materialsTagFilter; + console.log('Materials filter initialized with', materialsTagFilter.filters.length, 'options'); + } else if (attempts === maxAttempts) { + // Log if materials filter never loaded + console.warn('Materials filter not available after max attempts'); + } + + this.cd.detectChanges(); + + // Only clear interval if we have the basic filters + if (this.topicFilter && this.levelFilter && this.durationFilter) { + clearInterval(checkInterval); + } + } else if (attempts >= maxAttempts) { + clearInterval(checkInterval); + } + }, 100); + } + + /** + * Toggle a filter dropdown + */ + toggleFilterDropdown(filterName: string | null, event?: Event) { + if (event) { + event.stopPropagation(); + } + + if (this.activeFilterDropdown === filterName) { + // Close if clicking the same button + this.activeFilterDropdown = null; + } else { + // Open the requested dropdown + this.activeFilterDropdown = filterName; + } + + this.cd.detectChanges(); + } + + @HostListener('document:click', ['$event']) + onDocumentClick(event: MouseEvent) { + const target = event.target as HTMLElement; + + // Close filter dropdowns when clicking outside + if (this.activeFilterDropdown && !target.closest('.filter-dropdown-container') && !target.closest('.filter-dropdown-btn')) { + this.activeFilterDropdown = null; + this.cd.detectChanges(); + } + + // Close sort dropdown when clicking outside + if (this.sortMenuDown && !target.closest('.sort-dropdown-container')) { + this.sortMenuDown = false; + this.cd.detectChanges(); + } + } + + /** + * Toggle a filter option in a dropdown + */ + toggleFilterOption(filterType: string, option: any) { + // Toggle the option's active state + option.active = !option.active; + + // Update the main filter component's state to keep everything in sync + if (this.filterComponent) { + this.filterComponent.sendFilterChanges(); + } + + // Perform the search with the updated filters + this.performSearch(true); + this.cd.detectChanges(); + } + + /** + * Handle changes from filter dropdowns + */ + handleFilterChange() { + this.performSearch(true); + this.activeFilterDropdown = null; + this.cd.detectChanges(); + } + get isMobile(): boolean { return this.windowWidth < 750; } @@ -197,6 +310,7 @@ export class BrowseComponent implements AfterViewInit, OnDestroy { toggleFilters() { this.filtersDownMobile = !this.filtersDownMobile; + this.updateBodyScroll(); this.cd.detectChanges(); } @@ -204,6 +318,26 @@ export class BrowseComponent implements AfterViewInit, OnDestroy { this.toggleFilters(); } + /** + * Handle backdrop click to close modal + */ + onBackdropClick(event: MouseEvent) { + if (event.target === event.currentTarget) { + this.closeFilters(); + } + } + + /** + * Prevent/allow body scroll when modal is open + */ + private updateBodyScroll() { + if (this.filtersDownMobile) { + this.renderer.setStyle(document.body, 'overflow', 'hidden'); + } else { + this.renderer.removeStyle(document.body, 'overflow'); + } + } + /** * This is used only on modal layouts, injects the tempFilter storage into the query object and sends it */ @@ -243,6 +377,21 @@ export class BrowseComponent implements AfterViewInit, OnDestroy { } clearAllFilters(sendFilters: boolean = true) { + // Reset query object to default state + this.query = { + ...this.query, + length: [], + level: [], + topics: [], + guidelines: [], + noGuidelines: '', + collection: '', + tags: [], + fileTypes: [], + standardOutcomes: [] + }; + + // Clear filter objects in the filter component this.filterClearSubject$.next(); if (sendFilters) { @@ -290,22 +439,13 @@ export class BrowseComponent implements AfterViewInit, OnDestroy { toggleSort(val) { if (val !== null) { - this.showClearSort = true; - - if (val === 'da') { - this.sortText = 'Oldest'; - } else if (val === 'dd') { + if (val === 'dd') { this.sortText = 'Newest'; + this.query.orderBy = OrderBy.Date; + this.query.sortType = SortType.Descending; } else if (val === 'w') { - this.sortText = 'Downloads '; - } - const sort = val.charAt(0); - const dir = val.charAt(1); - this.query.orderBy = sort.charAt(0) === 'w' ? OrderBy.Downloads : OrderBy.Date; - if (sort.charAt(0) === 'd') { - this.query.sortType = - dir === 'd' ? SortType.Descending : SortType.Ascending; - } else { + this.sortText = 'Most Downloaded'; + this.query.orderBy = OrderBy.Downloads; this.query.sortType = SortType.Descending; } // remove date filters if previously set @@ -314,17 +454,8 @@ export class BrowseComponent implements AfterViewInit, OnDestroy { this.performSearch(); } - } - clearSort(event) { - this.showClearSort = false; - event.stopPropagation(); - delete this.query.orderBy; - delete this.query.sortType; - delete this.query.start; - delete this.query.end; - this.sortText = ''; - this.performSearch(); + this.toggleSortMenu(false); } /** @@ -358,7 +489,7 @@ export class BrowseComponent implements AfterViewInit, OnDestroy { this.query = { text: params.text, currPage: parseIntOrDefault(params.currPage, 1), - limit: parseIntOrDefault(params.limit, 10), + limit: parseIntOrDefault(params.limit, 15), length: toStringArray(params.length), level: toStringArray(params.level), guidelines: toStringArray(params.guidelines), @@ -409,16 +540,20 @@ export class BrowseComponent implements AfterViewInit, OnDestroy { ngOnDestroy() { this.unsubscribe.next(); + // Clean up body scroll if modal was open + this.renderer.removeStyle(document.body, 'overflow'); } trackByIndex(index, item) { return index; } - /** Returns true if any of the filter fields in the query are not empty */ + /** Returns true if any of the filter fields in the query are not empty or if any filters are active in the modal */ public anyFiltersSelected(): boolean { const q = this.query; - return !!( + + // Check query object for applied filters + const queryFiltersActive = !!( (q.collection && q.collection !== '') || q.length?.length || q.topics?.length || @@ -426,7 +561,57 @@ export class BrowseComponent implements AfterViewInit, OnDestroy { q.guidelines?.length || q.noGuidelines || q.standardOutcomes?.length || - q.fileTypes?.length + q.fileTypes?.length || + q.tags?.length ); + + // Also check if any filters are selected in the modal (but not yet applied) + const modalFiltersActive = + this.getTopicsCount() > 0 || + this.getLevelsCount() > 0 || + this.getDurationCount() > 0 || + this.getMaterialsCount() > 0; + + return queryFiltersActive || modalFiltersActive; + } + + /** + * Get the count of selected topics + */ + getTopicsCount(): number { + if (this.topicFilter?.filters) { + return this.topicFilter.filters.filter(f => f.active).length; + } + return this.query.topics?.length || 0; + } + + /** + * Get the count of selected levels + */ + getLevelsCount(): number { + if (this.levelFilter?.filters) { + return this.levelFilter.filters.filter(f => f.active).length; + } + return this.query.level?.length || 0; + } + + /** + * Get the count of selected duration options + */ + getDurationCount(): number { + if (this.durationFilter?.filters) { + return this.durationFilter.filters.filter(f => f.active).length; + } + return this.query.length?.length || 0; + } + + /** + * Get the count of selected material tags + */ + getMaterialsCount(): number { + if (this.materialsFilter?.filters) { + return this.materialsFilter.filters.filter(f => f.active).length; + } + return this.query.tags?.length || 0; } } diff --git a/src/app/cube/browse/components/filter-section/filter-section.component.html b/src/app/cube/browse/components/filter-section/filter-section.component.html index 823dd1cb7..25a69c3a1 100644 --- a/src/app/cube/browse/components/filter-section/filter-section.component.html +++ b/src/app/cube/browse/components/filter-section/filter-section.component.html @@ -9,7 +9,7 @@ [attr.aria-expanded]="!collapsed" [attr.aria-controls]="(info.section | lowercase) + '-panel'" > -

    {{ info.section }}

    +

    {{ info.section }} ({{ getActiveCount() }})

    @@ -18,22 +18,23 @@
-
- - - - {{ f.name }}  {{f.description}} - -
+ + +
+ + + + {{ f.name }}  {{f.description}} + +
+
- -
diff --git a/src/app/cube/browse/components/filter-section/filter-section.component.scss b/src/app/cube/browse/components/filter-section/filter-section.component.scss index ee94d5603..5eb46086f 100644 --- a/src/app/cube/browse/components/filter-section/filter-section.component.scss +++ b/src/app/cube/browse/components/filter-section/filter-section.component.scss @@ -6,29 +6,63 @@ justify-content: space-between; align-items: center; cursor: pointer; + padding: 8px 0; + margin-bottom: 8px; p { - margin: 5px 0; + margin: 0; + flex: 0 0 auto; + font-weight: 600; + color: $darker-grey; + font-size: $normal; + + .filter-count { + display: inline; + font-weight: 400; + color: $dark-grey; + font-size: $normal; + margin-left: 0; + } + } + + span { + display: flex; + align-items: center; + justify-content: flex-end; + flex-shrink: 0; + margin-left: 12px; + + i { + color: $dark-grey; + font-size: $smaller; + } } -} -hr { - height: 1px; - background-color: $light-grey; - border: none; + &.clickable { + &:hover { + p { + color: $darker-grey; + } + } + } } .filter-wrapper { - padding: 10px 0; + padding: 0; .filter { - font-size: $small; + font-size: $normal; display: inline; flex-wrap: nowrap; &.filter-checkbox { display: flex; flex-direction: row; + margin-bottom: 8px; + + &:last-child { + margin-bottom: 0; + } clark-checkbox { @include vert-center; @@ -38,12 +72,21 @@ hr { .checkbox-grid { display: inline-grid; - grid-template-columns: auto auto; - align-items: start !important; + grid-template-columns: auto 1fr; + gap: 8px 12px; + align-items: center; + width: 100%; clark-checkbox { - align-self: start; - margin-top: 2px; + align-self: center; + } + + .label { + font-size: $normal; + line-height: 1.5; + color: $dark-grey; + font-weight: normal; + align-self: center; } } } diff --git a/src/app/cube/browse/components/filter-section/filter-section.component.ts b/src/app/cube/browse/components/filter-section/filter-section.component.ts index 1f099b6da..bc44c38f4 100644 --- a/src/app/cube/browse/components/filter-section/filter-section.component.ts +++ b/src/app/cube/browse/components/filter-section/filter-section.component.ts @@ -1,4 +1,4 @@ -import { ChangeDetectorRef, Component, OnInit, Input, Output, EventEmitter, DoCheck } from '@angular/core'; +import { ChangeDetectorRef, Component, DoCheck, EventEmitter, Input, OnInit, Output } from '@angular/core'; @Component({ selector: 'clark-filter-section', templateUrl: './filter-section.component.html', @@ -10,18 +10,8 @@ export class FilterSectionComponent implements OnInit, DoCheck { @Input() set info(value: FilterSectionInfo | undefined) { this._info = value; - // default is collapsed = true unless this is the Length or Level section - this.collapsed = !this.isLockedSection(value); - - // If any filter is already active, force open - if (value?.filters?.some(f => f.active)) { - this.collapsed = false; - } - - // If this is Length or Level, lock open - if (this.isLockedSection(value)) { - this.collapsed = false; - } + // Default: all sections are open (expanded) + this.collapsed = false; this.cd.detectChanges(); } @@ -31,7 +21,7 @@ export class FilterSectionComponent implements OnInit, DoCheck { @Output() change = new EventEmitter(); - collapsed = true; + collapsed = false; constructor( private cd: ChangeDetectorRef, @@ -55,10 +45,6 @@ export class FilterSectionComponent implements OnInit, DoCheck { * @param collapsed The boolean to set the collapsed value to */ toggleCollapsed(collapsed: boolean) { - if (this.isLockedSection(this.info)) { - this.collapsed = false; // ignore attempts to collapse - return; - } this.collapsed = collapsed; this.cd.detectChanges(); } @@ -72,6 +58,7 @@ export class FilterSectionComponent implements OnInit, DoCheck { * @param value The value that was selected */ selectOption(value: string) { + if (!this.info) return; const index = this.info.filters.findIndex(filter => filter.value === value); if (index >= 0) { this.info.filters[index].active = true; @@ -89,6 +76,7 @@ export class FilterSectionComponent implements OnInit, DoCheck { * @param value The value that was deselected */ deselectOption(value: string) { + if (!this.info) return; const index = this.info.filters.findIndex(filter => filter.value === value); if (index >= 0) { this.info.filters[index].active = false; @@ -101,6 +89,16 @@ export class FilterSectionComponent implements OnInit, DoCheck { const s = v?.section?.trim().toLowerCase(); return s === 'length' || s === 'level'; } + + /** + * Get the count of active (selected) filters in this section + */ + getActiveCount(): number { + if (!this.info?.filters) { + return 0; + } + return this.info.filters.filter(f => f.active).length; + } } export interface FilterSectionInfo { diff --git a/src/app/cube/browse/components/filter/filter.component.html b/src/app/cube/browse/components/filter/filter.component.html index 62ac45cbd..864281b06 100644 --- a/src/app/cube/browse/components/filter/filter.component.html +++ b/src/app/cube/browse/components/filter/filter.component.html @@ -1,17 +1,29 @@
- - - - - - - - + + +
+ +
+ - + + + + + + + + + + Advanced ({{ guidelineFilter.length }} Selected) @@ -24,21 +36,10 @@
-
-
-

- FILTER BY TAG - [Beta] -

- - -
- \ No newline at end of file + diff --git a/src/app/cube/browse/components/filter/filter.component.scss b/src/app/cube/browse/components/filter/filter.component.scss index 1f3c01cd2..c2ad8ba1b 100644 --- a/src/app/cube/browse/components/filter/filter.component.scss +++ b/src/app/cube/browse/components/filter/filter.component.scss @@ -2,4 +2,45 @@ .beta { color: $light-blue; +} + +// Topic pills/chips (used in the All Filters modal via `clark-filter`) +// The pills are rendered inside the filter-section's optional content area +.topic-pills-container { + display: flex; + flex-wrap: wrap; + gap: 8px; + padding: 0; + margin-top: 4px; +} + +.topic-pill { + border: 1px solid $light-grey; + background: white; + color: $dark-grey; + border-radius: 999px; + padding: 8px 12px; + font-size: $normal; + cursor: pointer; + transition: all 0.15s ease; + line-height: 1.4; + user-select: none; + font-weight: normal; + + &:hover { + border-color: $dark-grey; + background: $primary-white; + } + + &.active { + border-color: $light-blue; + color: $light-blue; + background: rgba(28, 112, 221, 0.1); + font-weight: 600; + } + + &:focus { + outline: 2px solid $light-blue; + outline-offset: 2px; + } } \ No newline at end of file diff --git a/src/app/cube/browse/components/filter/filter.component.ts b/src/app/cube/browse/components/filter/filter.component.ts index 4fc5ace6f..1e3c16828 100644 --- a/src/app/cube/browse/components/filter/filter.component.ts +++ b/src/app/cube/browse/components/filter/filter.component.ts @@ -1,14 +1,14 @@ -import { ChangeDetectorRef, Component, OnInit, Output, EventEmitter, OnDestroy, Input } from '@angular/core'; +import { ChangeDetectorRef, Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core'; import { LearningObject } from '@entity'; +import { AuthService } from 'app/core/auth-module/auth.service'; import { CollectionService } from 'app/core/collection-module/collections.service'; +import { TagsService } from 'app/core/learning-object-module/tags/tags.service'; +import { TopicsService } from 'app/core/learning-object-module/topics/topics.service'; import { GuidelineService } from 'app/core/standard-guidelines-module/standard-guidelines.service'; import { Observable, Subject } from 'rxjs'; import { debounceTime, takeUntil } from 'rxjs/operators'; -import { FilterSectionInfo } from '../filter-section/filter-section.component'; import { Query } from '../../../../interfaces/query'; -import { TopicsService } from 'app/core/learning-object-module/topics/topics.service'; -import { TagsService } from 'app/core/learning-object-module/tags/tags.service'; -import { AuthService } from 'app/core/auth-module/auth.service'; +import { FilterSectionInfo } from '../filter-section/filter-section.component'; @Component({ selector: 'clark-filter', @@ -80,14 +80,14 @@ export class FilterComponent implements OnInit, OnDestroy { */ private parseSelected() { if (this.selected) { - this.parseCategorySelected(this.selected.length, this.lengthFilter.filters); - this.parseCategorySelected(this.selected.level, this.levelFilter.filters); - this.parseCategorySelected(this.selected.topics, this.topicFilter.filters); - this.parseCategorySelected(this.selected.tags, this.tagFilter.filters); - this.parseCategorySelected(this.selected.fileTypes, this.materialFilter.filters); - this.parseCategorySelected(this.selected.guidelines, this.frameworkFilter.filters); - this.parseCategorySelected(this.selected.noGuidelines, this.noGuidelineFilter.filters); - this.parseCategorySelected(this.selected.collection, this.collectionFilter.filters); + if (this.lengthFilter?.filters) this.parseCategorySelected(this.selected.length, this.lengthFilter.filters); + if (this.levelFilter?.filters) this.parseCategorySelected(this.selected.level, this.levelFilter.filters); + if (this.topicFilter?.filters) this.parseCategorySelected(this.selected.topics, this.topicFilter.filters); + if (this.tagFilter?.filters) this.parseCategorySelected(this.selected.tags, this.tagFilter.filters); + if (this.materialFilter?.filters) this.parseCategorySelected(this.selected.fileTypes, this.materialFilter.filters); + if (this.frameworkFilter?.filters) this.parseCategorySelected(this.selected.guidelines, this.frameworkFilter.filters); + if (this.noGuidelineFilter?.filters) this.parseCategorySelected(this.selected.noGuidelines, this.noGuidelineFilter.filters); + if (this.collectionFilter?.filters) this.parseCategorySelected(this.selected.collection, this.collectionFilter.filters); } } @@ -126,14 +126,14 @@ export class FilterComponent implements OnInit, OnDestroy { */ clearFilters() { // Clear each category filter - this.clearFilterCategory(this.collectionFilter.filters); - this.clearFilterCategory(this.lengthFilter.filters); - this.clearFilterCategory(this.levelFilter.filters); - this.clearFilterCategory(this.materialFilter.filters); - this.clearFilterCategory(this.topicFilter.filters); - this.clearFilterCategory(this.tagFilter.filters); - this.clearFilterCategory(this.noGuidelineFilter.filters); - this.clearFilterCategory(this.frameworkFilter.filters); + if (this.collectionFilter?.filters) this.clearFilterCategory(this.collectionFilter.filters); + if (this.lengthFilter?.filters) this.clearFilterCategory(this.lengthFilter.filters); + if (this.levelFilter?.filters) this.clearFilterCategory(this.levelFilter.filters); + if (this.materialFilter?.filters) this.clearFilterCategory(this.materialFilter.filters); + if (this.topicFilter?.filters) this.clearFilterCategory(this.topicFilter.filters); + if (this.tagFilter?.filters) this.clearFilterCategory(this.tagFilter.filters); + if (this.noGuidelineFilter?.filters) this.clearFilterCategory(this.noGuidelineFilter.filters); + if (this.frameworkFilter?.filters) this.clearFilterCategory(this.frameworkFilter.filters); this.guidelineFilter = []; // Detect changes and resend the filter object @@ -157,14 +157,14 @@ export class FilterComponent implements OnInit, OnDestroy { const query = {}; // Creates the query - this.checkFilter('collection', this.collectionFilter.filters, query); - this.checkFilter('length', this.lengthFilter.filters, query); - this.checkFilter('level', this.levelFilter.filters, query); - this.checkFilter('fileTypes', this.materialFilter.filters, query); - this.checkFilter('topics', this.topicFilter.filters, query); - this.checkFilter('tags', this.tagFilter.filters, query); - this.checkFilter('guidelines', this.frameworkFilter.filters, query); - this.checkFilter('noGuidelines', this.noGuidelineFilter.filters, query); + if (this.collectionFilter?.filters) this.checkFilter('collection', this.collectionFilter.filters, query); + if (this.lengthFilter?.filters) this.checkFilter('length', this.lengthFilter.filters, query); + if (this.levelFilter?.filters) this.checkFilter('level', this.levelFilter.filters, query); + if (this.materialFilter?.filters) this.checkFilter('fileTypes', this.materialFilter.filters, query); + if (this.topicFilter?.filters) this.checkFilter('topics', this.topicFilter.filters, query); + if (this.tagFilter?.filters) this.checkFilter('tags', this.tagFilter.filters, query); + if (this.frameworkFilter?.filters) this.checkFilter('guidelines', this.frameworkFilter.filters, query); + if (this.noGuidelineFilter?.filters) this.checkFilter('noGuidelines', this.noGuidelineFilter.filters, query); if (this.guidelineFilter && this.guidelineFilter.length > 0) { query['standardOutcomes'] = this.guidelineFilter; } @@ -194,6 +194,53 @@ export class FilterComponent implements OnInit, OnDestroy { this.filterChanged$.next(); } + /** + * Toggle a topic selection when rendered as pills/chips. + * Keeps the existing filter state logic intact by mutating `topicFilter.filters[].active` + * and then using the existing debounced `registerChange()` pipeline. + */ + toggleTopicFilter(topic: { active: boolean; name: string; value: string }) { + topic.active = !topic.active; + this.cd.detectChanges(); + this.registerChange(); + } + + /** + * Toggle a material selection when rendered as pills/chips. + * Keeps the existing filter state logic intact by mutating tag filter active state + * and then using the existing debounced `registerChange()` pipeline. + */ + toggleMaterialFilter(material: { active: boolean; name: string; value: string }) { + material.active = !material.active; + this.cd.detectChanges(); + this.registerChange(); + } + + /** + * Get Materials filter from tags (specifically "material" tag type) + */ + getMaterialsTagFilter(): FilterSectionInfo | undefined { + // Return undefined if tagFilter is not initialized yet + if (!this.tagFilter?.filters) { + return undefined; + } + + // Get tags of type 'material' + const materialTags = this.tagFilter.filters.filter((t) => + t.tagType?.includes('material'), + ); + + // If no material tags, return undefined + if (materialTags.length < 1) { + return undefined; + } + + return { + section: 'Materials', + filters: materialTags + }; + } + /** * Get a list of tags based on a provided tag type. * @param {string} providedType The type of tag you want to filter by @@ -202,6 +249,11 @@ export class FilterComponent implements OnInit, OnDestroy { * @returns An object named after the providedType with a list of tags filtered by that providedType */ getFilteredTags(providedType: { name: string, value: string }): { section?: string; filters?: any[] } { + // Return undefined if tagFilter is not initialized yet + if (!this.tagFilter?.filters) { + return undefined; + } + // Get the tags that are of type `providedType`. // i.e. if you want tags with type 'code', this will only return // the tags that include the tag type 'code'. @@ -230,7 +282,7 @@ export class FilterComponent implements OnInit, OnDestroy { async getCollectionFilters() { const collections = await this.collectionService.getCollections(); this.collectionFilter = { - section: 'Collection', + section: 'Collections', filters: collections.map(collection => ({ name: collection.name, value: collection.abvName, @@ -252,37 +304,37 @@ export class FilterComponent implements OnInit, OnDestroy { */ getLengthFilters() { this.lengthFilter = { - section: 'Length', + section: 'Duration', filters: [ { name: 'Nanomodule', value: 'nanomodule', active: false, - description: '(< 1 hour)' + description: '< 1 hour' }, { name: 'Micromodule', value: 'micromodule', active: false, - description: '(1-4 hours)' + description: '1-4 hours' }, { name: 'Module', value: 'module', active: false, - description: '(4-10 hours)' + description: '4-10 hours' }, { name: 'Unit', value: 'unit', active: false, - description: '(Over 10 hours)' + description: '10+ hours' }, { name: 'Course', value: 'course', active: false, - description: '(15 weeks)' + description: '15 weeks' }, ], }; @@ -294,7 +346,7 @@ export class FilterComponent implements OnInit, OnDestroy { async getTopicFilters() { const topics = await this.topicsService.getTopics(); this.topicFilter = { - section: 'Topic', + section: 'Topics', filters: topics.map((topic) => ({ name: topic.name, value: topic._id, @@ -343,7 +395,7 @@ export class FilterComponent implements OnInit, OnDestroy { */ getLevelFilters() { this.levelFilter = { - section: 'Level', + section: 'Levels', filters: Object.values(LearningObject.Level).map(level => ({ name: level.replace( /\w\S*/g, ((txt) => { @@ -362,7 +414,7 @@ export class FilterComponent implements OnInit, OnDestroy { async getFrameworkFilters() { const frameworks = await this.guidelineService.getFrameworks({ limit: 100, page: 1 }); this.frameworkFilter = { - section: 'Guidelines', + section: 'Frameworks', filters: frameworks.map(framework => ({ name: framework.name, value: framework.name, diff --git a/src/app/cube/shared/learning-object/learning-object.component.html b/src/app/cube/shared/learning-object/learning-object.component.html index 152be729b..fd4c383c0 100644 --- a/src/app/cube/shared/learning-object/learning-object.component.html +++ b/src/app/cube/shared/learning-object/learning-object.component.html @@ -9,55 +9,12 @@
-
{{ collection }}
+
+ + DCWF Aligned +
-
-
- -
- {{ learningObject.length.toUpperCase() }} -
-
- - UP TO ONE HOUR -
-
- - 1 - 4 HOURS -
-
- - 4 - 10 HOURS -
-
- - OVER 10 HOURS -
-
- - 15 WEEKS -
-
-
- -
-
-
- {{ truncateText(learningObject.name, 45) }} - - - -
- -
-
{{ learningObject.length.toUpperCase() }} @@ -84,27 +41,46 @@
+
+ {{ truncateText(learningObject.name, 80) }} + + + +
+ +
+
+ +
Updated {{ learningObject.date | date: 'mediumDate' }}
+ +
+
+ {{ learningObject.contributors[0]?.name | titlecase }} + {{ + learningObject.contributors?.length - 1 + ? 'and ' + (learningObject.contributors.length - 1) + ' more' + : '' + }} +
+
+ {{ organizationFormat(learningObject.contributors[0]?.organization) }} +
+
+
-   +
{{ downloadsCount | number }}
-
- - {{ learningObject.contributors[0]?.name | titlecase }} at - {{ organizationFormat(learningObject.contributors[0]?.organization) }} - {{ - learningObject.contributors?.length - 1 - ? 'and ' + (learningObject.contributors.length - 1) + ' more' - : '' - }} - -
Updated {{ learningObject.date | date: 'mediumDate' }}
-
-
+
+ {{ tagName }} +
diff --git a/src/app/cube/shared/learning-object/learning-object.component.scss b/src/app/cube/shared/learning-object/learning-object.component.scss index 2065469e3..32ec4a6e4 100755 --- a/src/app/cube/shared/learning-object/learning-object.component.scss +++ b/src/app/cube/shared/learning-object/learning-object.component.scss @@ -16,49 +16,29 @@ a { .image { width: 100%; + min-width: 100%; + max-width: 100%; height: 150px; - padding: 10px 0px; + min-height: 150px; + flex: 0 0 150px; + padding: 15px; + overflow: hidden; + box-sizing: border-box; + .logo{ - max-height: 60px; + max-height: 90px; + max-width: 100%; + width: auto; + height: auto; object-fit: contain; } - - .card-collection { - font-size: $normal; - } } .learning-object-content { - - /* Trending highlight */ - .learning-object.trending { - border-left: 4px solid $orange; - box-shadow: 0 1px 0 rgba(0,0,0,0.04); - } - flex: 1; + display: flex; + flex-direction: column; - .details { - margin-bottom: 10px; - - .author { - overflow-x: hidden; - text-overflow: ellipsis; - width: 100%; - } - } - .length { - display: none; - } - .time { - display: none; - } - .length_tall{ - display: inline; - } - .time_tall{ - display: inline; - } .download-btn{ display: none; @@ -66,8 +46,21 @@ a { color: $light-blue; } } - .download-btn-card { - display: inline; + + .pills { + display: flex; + gap: 10px; + flex-wrap: wrap; + margin-bottom: 10px; + } + + .tags-container { + margin-top: auto; + + .tag-pill { + font-size: $smaller; + padding: 2px 6px; + } } } } @@ -89,34 +82,29 @@ a { font-size: $small !important; } - .goals { - display: none; - } - .image { width: 100px !important; min-height: 100%; max-height: 100% !important; - padding: 10px 0px; + padding: 10px; .logo{ - max-height: 60px; + max-height: 70px; object-fit: contain; } - .card-collection { - font-size: $smaller !important; + .framework-badge { + font-size: 9px; + padding: 2px 6px; + top: 4px; + right: 4px; + gap: 3px; + + &.dcwf-badge i { + font-size: 10px; + } } } - .length_tall { - display: none; - } - .time_tall { - display: none; - } - .download-btn-card { - display: none; - } } } @@ -171,22 +159,16 @@ a { :host.card { .image { - max-height: 120px; - padding: 10px 0px; - } - - .goals { - white-space: normal !important; + height: 150px; + min-height: 150px; + max-height: 150px; + padding: 15px; + overflow: hidden; } .learning-object-content{ width: auto !important; } - - .download-btn-card { - padding: 0 5px; - margin-right: -5px; - } } .learning-object { @@ -209,33 +191,55 @@ a { .image { background: $primary-white; width: 175px; - flex: 0 0 1; + min-width: 175px; + max-width: 175px; + flex: 0 0 175px; position: relative; display: flex; flex-direction: column; justify-content: center; - flex-grow: 0; - flex-shrink: 0; align-items: center; - padding: 10px 0px; + padding: 15px; + overflow: hidden; + box-sizing: border-box; ::ng-deep canvas { opacity: 0.4; + max-width: 100%; + max-height: 100%; } .logo{ - max-height: 60px; - max-width: 135px; + max-height: 80px; + max-width: 145px; object-fit: contain; - margin-bottom: 15px; + width: auto; + height: auto; } - .card-collection { - color: $darker-grey; - font-size: $normal; - text-align: center; - padding: 5px; - z-index: 2; + .framework-badge { + position: absolute; + top: 8px; + right: 8px; + padding: 4px 10px; + border-radius: 4px; + font-size: $smaller; + font-weight: 600; + text-transform: uppercase; + z-index: 10; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); + display: flex; + align-items: center; + gap: 4px; + + &.dcwf-badge { + background: #25215f; + color: white; + + i { + font-size: 14px; + } + } } &:after { @@ -256,10 +260,13 @@ a { min-width: 0; position: relative; width: 100%; + display: flex; + flex-direction: column; .rating-stars-container { - margin-top: 8px; - margin-bottom: 8px; + display: flex; + align-items: center; + gap: 8px; .downloads-indicator { display: inline-flex; @@ -281,20 +288,15 @@ a { } } - .content__topbar { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 10px; - } - .title { font-size: $normal; color: $darker-grey; - padding-bottom: 8px; + font-weight: 600; + padding-bottom: 10px; display: flex; flex-direction: row; justify-content: space-between; + line-height: 1.4; .download-btn { border: 0; @@ -312,64 +314,22 @@ a { } } - .length_tall { - background: $homepage-light-blue; - padding: 2px 5px; - margin-bottom: 8px; - margin-right: 15px; - border-radius: 3px; - display: inline-block; - position: relative; - color: white; - font-size: $smaller; - font-weight: 400; - display: none; - } - - .time_tall { - background: $primary-white; - padding: 2px 5px; - margin-bottom: 8px; - border-radius: 3px; - border: 1px solid $secondary-white; - display: inline-block; - position: relative; - color: $darker-grey; - font-size: $smaller; - font-weight: 400; - display: none; - - svg { - padding-right: 5px; - } - } - - .download-btn-card { - border: 0; - background: rgba(0, 0, 0, 0); - transition: all 0.2s ease; - -webkit-transform: translateZ(0); - outline: 0; - color: $medium-grey; - display: none; - font-size: 16px; - - &:hover { - transform: scale(1.1); - color: $blue-accent; - } + .date { + font-size: $small; + color: $dark-grey; + margin-bottom: 6px; } .length { - background: $homepage-light-blue; + background: rgba(70, 144, 255, 0.12); padding: 2px 5px; - margin-right: 15px; + margin-right: 0; border-radius: 3px; display: inline-block; position: relative; - color: white; + color: $homepage-light-blue; font-size: $smaller; - font-weight: 400; + font-weight: 500; } .time { background: $primary-white; @@ -390,17 +350,54 @@ a { .details { font-size: $small; color: $dark-grey; - margin-top: 8px; + margin-bottom: 10px; + + .author { + overflow-x: hidden; + text-overflow: ellipsis; + width: 100%; + display: block; + margin-bottom: 2px; + } + + .organization { + overflow-x: hidden; + text-overflow: ellipsis; + width: 100%; + display: block; + color: $medium-grey; + font-size: $smaller; + } } - .goals { - font-size: $small; - color: $dark-grey; - margin-top: 8px; - white-space: nowrap; - text-overflow: ellipsis; - min-width: 0; - overflow: hidden; + .rating-stars-container { + margin-bottom: 10px; + } + + .pills { + display: flex; + gap: 6px; + flex-wrap: wrap; + margin-bottom: 10px; + } + + .tags-container { + margin-top: auto; + padding-top: 12px; + display: flex; + flex-wrap: wrap; + gap: 6px; + + .tag-pill { + background: $primary-white; + border: 1px solid $light-grey; + padding: 3px 8px; + border-radius: 12px; + font-size: $smaller; + color: $darker-grey; + font-weight: 400; + display: inline-block; + } } } &:hover{ diff --git a/src/app/cube/shared/learning-object/learning-object.component.ts b/src/app/cube/shared/learning-object/learning-object.component.ts index cf8195bb3..4cc29d0f6 100644 --- a/src/app/cube/shared/learning-object/learning-object.component.ts +++ b/src/app/cube/shared/learning-object/learning-object.component.ts @@ -11,8 +11,10 @@ import { SimpleChanges } from '@angular/core'; import { LearningObject } from '@entity'; +import { TagsService } from 'app/core/learning-object-module/tags/tags.service'; import { MetricService } from 'app/core/metric-module/metric.service'; import { RatingService } from 'app/core/rating-module/rating.service'; +import { Tag } from 'entity/tag/tag'; import { titleCase } from 'title-case'; import { AuthService } from '../../../core/auth-module/auth.service'; import { CollectionService } from '../../../core/collection-module/collections.service'; @@ -47,6 +49,11 @@ export class LearningObjectListingComponent implements OnInit, OnChanges, OnDest isTrending = false; TRENDING_THRESHOLD = 5; // downloads in last 30 days to be considered trending + isDCWFAligned = false; + tagNames: string[] = []; + private static allTags: Tag[] = []; + private static tagsPromise: Promise | null = null; + constructor( private hostEl: ElementRef, private renderer: Renderer2, @@ -55,7 +62,8 @@ export class LearningObjectListingComponent implements OnInit, OnChanges, OnDest private metricService: MetricService, public auth: AuthService, private collectionService: CollectionService, - private cd: ChangeDetectorRef + private cd: ChangeDetectorRef, + private tagsService: TagsService ) { } ngOnChanges(changes: SimpleChanges) { @@ -66,6 +74,14 @@ export class LearningObjectListingComponent implements OnInit, OnChanges, OnDest this.renderer.removeClass(this.hostEl.nativeElement, 'loading'); } } + + // When learningObject changes, reset and recalculate all derived properties + if (changes.learningObject && !changes.learningObject.firstChange) { + this.isDCWFAligned = false; + this.tagNames = []; + this.checkDCWFAlignment(); + this.resolveTagNames(); + } } async ngOnInit() { @@ -76,6 +92,12 @@ export class LearningObjectListingComponent implements OnInit, OnChanges, OnDest this.onResize(); }); + // Check for DCWF framework alignment + this.checkDCWFAlignment(); + + // Resolve tag IDs to tag names + await this.resolveTagNames(); + const ratings = await this.ratingService.getLearningObjectRatings(this.learningObject.cuid, this.learningObject.version); this.averageRating = ratings.avgValue; this.reviewsCount = ratings.ratings?.length; @@ -206,6 +228,64 @@ export class LearningObjectListingComponent implements OnInit, OnChanges, OnDest } } + /** + * Check if the learning object has DCWF framework mappings in its guidelines + */ + checkDCWFAlignment() { + if (this.learningObject?.guidelines && this.learningObject.guidelines.length > 0) { + this.isDCWFAligned = this.learningObject.guidelines.some(guideline => + guideline.source && + (guideline.source.toLowerCase().includes('dcwf') || + guideline.source.toLowerCase().includes('dod cyber workforce') || + guideline.frameworkName?.toLowerCase().includes('dcwf') || + guideline.frameworkName?.toLowerCase().includes('dod cyber workforce')) + ); + } + } + + /** + * Resolve tag IDs to tag names for display + */ + async resolveTagNames() { + if (!this.learningObject?.tags || this.learningObject.tags.length === 0) { + this.tagNames = []; + return; + } + + try { + const firstTag = this.learningObject.tags[0]; + + // Check if tags are already objects with a name property + if (firstTag && typeof firstTag === 'object') { + const tagObj = firstTag as any; + if ('name' in tagObj) { + // Tags are already full objects + this.tagNames = this.learningObject.tags.map((tag: any) => tag.name); + return; + } + } + + // Fetch all tags if not already loaded, using a shared promise to avoid multiple fetches + if (LearningObjectListingComponent.allTags.length === 0) { + if (!LearningObjectListingComponent.tagsPromise) { + LearningObjectListingComponent.tagsPromise = this.tagsService.getTags(); + } + LearningObjectListingComponent.allTags = await LearningObjectListingComponent.tagsPromise; + } + + // Create a map for quick lookup + const tagMap = new Map(LearningObjectListingComponent.allTags.map(tag => [tag._id, tag.name])); + + // Resolve tag IDs to names + this.tagNames = this.learningObject.tags + .map((tagId: string) => tagMap.get(tagId)) + .filter(name => name !== undefined) as string[]; + } catch (e) { + console.error('Error resolving tag names:', e); + this.tagNames = []; + } + } + ngOnDestroy() { this.cd.detach(); } diff --git a/src/assets/images/dcwf_logo.png b/src/assets/images/dcwf_logo.png new file mode 100644 index 000000000..ec62c6c91 Binary files /dev/null and b/src/assets/images/dcwf_logo.png differ