Skip to content

Commit

Permalink
Merge pull request #607 from sunbird-cb/explorebyColection
Browse files Browse the repository at this point in the history
Exploreby colection
  • Loading branch information
christyfernandes authored Nov 14, 2022
2 parents a1dd06f + 6fb847c commit dffe0d5
Show file tree
Hide file tree
Showing 31 changed files with 1,305 additions and 56 deletions.
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<ng-container *ngIf="!showActivities; else activities">
<!-- <div class="mat-toolbar px-4 sm:px-8 md:px-0 py-4 flex items-center">
<!-- <div class="mat-toolbar px-4 sm:px-8 md:px-0 py-4 flex items-center">
<ws-widget-user-image class="user-image" [email]="userEmail"></ws-widget-user-image>
<h3>
<ng-container i18n>Hey, </ng-container>
Expand All @@ -11,63 +11,56 @@ <h3>

<!-- <mat-card class="flex-1 remove-botton-radius card-min-hei"> -->
<div class="flex-1 remove-botton-radius card-min-hei">
<!-- <mat-card-header>
<!-- <mat-card-header>
<mat-card-title class="margin-l-0 f-medium">
<span class="mat-subheading-1 mat-subheading-1-1">Explore courses</span>
</mat-card-title>
</mat-card-header> -->
<mat-card-content class="margin-left-m mb-0-imp">
<mat-card-content class="margin-left-m mb-0-imp">

<!-- <ng-container *ngFor="let post of data.posts | pipeFilter:'index': '0'"> -->
<!-- <h4 class="w-full title-margin ws-mat-black60-text">
<!-- <ng-container *ngFor="let post of data.posts | pipeFilter:'index': '0'"> -->
<!-- <h4 class="w-full title-margin ws-mat-black60-text">
Explore Career Options
</h4> -->
<!-- </ng-container> -->
<!-- </ng-container> -->

</mat-card-content>
<mat-card-actions align="left" class="marg">
<button mat-button type="button" class="explore_btn margin-left-xs margin-right-xs small-button blue-border flex-auto-display" (click)="goToTaxonomyHome()">
<mat-icon class="ws-mat-default-text icon-margin mat-icon notranslate material-icons mat-icon-no-color">
school
</mat-icon>
<span class="ws-mat-default-text" i18n>Explore by topic</span>
</button>
</mat-card-content>
<mat-card-actions align="left" class="marg">

<button mat-button type="button" class="explore_btn margin-left-xs small-button blue-border flex-auto-display" (click)="goToCompentencyBrowse()">
<mat-icon class="ws-mat-default-text icon-margin mat-icon notranslate material-icons mat-icon-no-color">
extension
</mat-icon>
<span class="ws-mat-default-text" i18n>
Explore by competency
</span>
</button>
<ng-container *ngFor="let btn of exploreBtns; let i = index">
<button *ngIf="i===0" mat-button type="button" class="explore_btn margin-left-xs margin-right-xs small-button blue-border flex-auto-display"
[routerLink]="btn.route">
<mat-icon class="ws-mat-default-text icon-margin mat-icon notranslate material-icons mat-icon-no-color">
{{btn.icon}}
</mat-icon>
<span class="ws-mat-default-text" i18n>
{{btn.name}}
</span>
</button>
<button *ngIf="i>=1" mat-button type="button" class="explore_btn margin-left-xs small-button blue-border flex-auto-display"
[routerLink]="(btn.route)">
<mat-icon class="ws-mat-default-text icon-margin mat-icon notranslate material-icons mat-icon-no-color">
{{btn.icon}}
</mat-icon>
<span class="ws-mat-default-text" i18n>
{{btn.name}}
</span>
</button>
</ng-container>

<button mat-button type="button" class="explore_btn margin-left-xs small-button blue-border flex-auto-display" (click)="goToProviderBrowse()">
<mat-icon class="ws-mat-default-text icon-margin mat-icon notranslate material-icons mat-icon-no-color">
scatter_plot
</mat-icon>
<span class="ws-mat-default-text" i18n>
Explore by provider
</span>
</button>
</mat-card-actions>

<!-- <button mat-button color="default" type="button" class="margin-left-xs small-button blue-border flex-auto-display">
<span class="ws-mat-default-text" i18n>Explore by compentency</span>
</button> -->

</mat-card-actions>

<!-- </mat-card> -->
<!-- </mat-card> -->
</div>

<ng-template #activities>
<div class="px-4 sm:px-8 md:px-0 py-4 my-1">
<div class="px-4 sm:px-8 md:px-0 py-4 my-1">

<!-- <h2 class="title" i18n>Welcome,
<!-- <h2 class="title" i18n>Welcome,
<ng-container>{{ givenName }}</ng-container>
</h2> -->
<div class="row-justify flex-wrap">
<ws-widget-activity-card *ngFor="let card of activityCards" [widgetData]="{
<div class="row-justify flex-wrap">
<ws-widget-activity-card *ngFor="let card of activityCards" [widgetData]="{
id : card.id,
title : card.title,
description : card.description,
Expand All @@ -77,7 +70,7 @@ <h3>
tag : card.tag,
class: 'activity-learning-card'
}">
</ws-widget-activity-card>
</div>
</ws-widget-activity-card>
</div>
</div>
</ng-template>
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { Component, HostBinding, Input, OnInit } from '@angular/core'
import { Router } from '@angular/router'
import { Router, ActivatedRoute } from '@angular/router'
import { NsWidgetResolver, WidgetBaseComponent } from '@sunbird-cb/resolver'
import { ConfigurationsService } from '@sunbird-cb/utils'

Expand All @@ -25,11 +25,13 @@ export class CardLearnComponent extends WidgetBaseComponent
isNewUser = false
showActivities = false
keyTag: string[] = []
exploreBtns = []
@HostBinding('id')
public id = 'w-card-learn'
constructor(
private configSvc: ConfigurationsService,
private router: Router,
private activateroute: ActivatedRoute,
// private activitiesSvc: ActivitiesService,
// private snackBar: MatSnackBar,
) {
Expand Down Expand Up @@ -60,19 +62,16 @@ export class CardLearnComponent extends WidgetBaseComponent
})
return returnValue
}
goToTaxonomyHome() {
this.router.navigate(['/app/taxonomy/home'])
}

goToCompentencyBrowse() {
this.router.navigate(['/app/learn/browse-by/competency/all-competencies'])
}

goToProviderBrowse() {
this.router.navigate(['/app/learn/browse-by/provider/all-providers'])
}

ngOnInit() {
if (
this.activateroute.snapshot.parent
&& this.activateroute.snapshot.parent.data
&& this.activateroute.snapshot.data.pageData
&& this.activateroute.snapshot.data.pageData.data
&& this.activateroute.snapshot.data.pageData.data.ExploreButtons
) {
this.exploreBtns = this.activateroute.snapshot.data.pageData.data.ExploreButtons
}
if (this.showActivities) {
// this.activitiesSvc.fetchLearnActivites().then((result: IActivity) => {
// if (result.activities.length !== 0) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import { TourModule } from '../_common/tour-guide/tour-guide.module'
import { UserImageModule } from '../_common/user-image/user-image.module'
import { CardLearnComponent } from '././card-learn.component'
import { ChallengeModule } from '../challenge/challenge.module'
import { RouterModule } from '@angular/router'

@NgModule({
declarations: [CardLearnComponent],
Expand All @@ -24,6 +25,7 @@ import { ChallengeModule } from '../challenge/challenge.module'
ActivityCardModule,
TourModule,
ChallengeModule,
RouterModule,
],
entryComponents: [CardLearnComponent],
schemas: [NO_ERRORS_SCHEMA],
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -284,6 +284,10 @@ export class AppTocHomeComponent implements OnInit, OnDestroy, AfterViewChecked,
const finalUrl = `/app/learn/browse-by/competency/all-competencies`
// tslint:disable-next-line: max-line-length
this.breadcrumbs = { url: 'home', titles: [{ title: 'all competencies', url: finalUrl }, { title: 'Details', url: 'none' }] }
} else if (this.historyData.path === 'curatedCollections') {
const finalUrl = `/app/curatedCollections/home`
// tslint:disable-next-line: max-line-length
this.breadcrumbs = { url: 'home', titles: [{ title: 'curated collections', url: finalUrl }, { title: 'Details', url: 'none' }] }
} else {
// tslint:disable-next-line:max-line-length
this.breadcrumbs = { url: 'home', titles: [{ title: 'Learn', url: '/page/learn', icon: 'school' }, { title: 'Details', url: 'none' }] }
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<div class="cursor-pointer card2 flex item-center single_provider_card mat-card "
[routerLink]="['/app/curatedCollections', collection?.identifier]">
<div class="w-full flex flex-col card-container items-center justify-center">
<div class="name-container flex flex-col">
<div class="" role="link" tabindex="0"><!---->
<div class="name ws-mat-black-text cursor-pointer mat-subheading-1">
{{collection?.name}}
</div>
</div>
</div>
<!-- <div class="provider-image-container flex margin-bottom-s">
<img src="fusion-assets/images/lbs_logo.png" class="sb-certificatePage-loader-img" alt="LBSNAA" />
</div>
<p class="mat-body-2 text-center margin-remove">{{provider?.slug}}</p> -->
</div>
</div>
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
.single_provider_card {
height: 315px;
width: 275px;
padding: 24px 24px;
box-sizing: border-box;
flex-direction: row;
align-items: center;
justify-content: center;
}
.name-container {
height: 70px;
overflow: hidden;
width: 100%;
text-align: left;
}
.provider-image-container {
width: 150px;
height: 150px;
border-radius: 4px 4px;
overflow: hidden;
align-items: center;
display: flex;
border: 1px solid rgba(0,0,0,.08);

img {
height: 120px;
width: 120px;
margin: 15px auto;
}
}


// Remove this when card 2 is not needed
.card2.single_provider_card {
// height: 315px;
height: auto;
width: 275px;
padding: 24px 24px;
box-sizing: border-box;
flex-direction: row;
align-items: center;
justify-content: center;
.name-container {
// height: 70px;
height: 92px;
overflow: hidden;
width: 100%;
text-align: left;
}
.provider-image-container {
width: 150px;
height: 150px;
border-radius: 4px 4px;
overflow: hidden;
align-items: center;
display: flex;
border: 1px solid rgba(0,0,0,.08);

img {
height: 120px;
width: 120px;
margin: 15px auto;
}
}
.mat-subheading-1 {
margin: 0;
}

}
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing'

import { CuratedCollectionCardComponent } from './curated-collection-card.component'

describe('CuratedCollectionCardComponent', () => {
let component: CuratedCollectionCardComponent
let fixture: ComponentFixture<CuratedCollectionCardComponent>

beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [CuratedCollectionCardComponent],
})
.compileComponents()
}))

beforeEach(() => {
fixture = TestBed.createComponent(CuratedCollectionCardComponent)
component = fixture.componentInstance
fixture.detectChanges()
})

it('should create', () => {
expect(component).toBeTruthy()
})
})
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import { Component, OnInit, Input } from '@angular/core'

@Component({
selector: 'ws-app-curated-collection-card',
templateUrl: './curated-collection-card.component.html',
styleUrls: ['./curated-collection-card.component.scss'],
})
export class CuratedCollectionCardComponent implements OnInit {
@Input() collection!: any
constructor() { }

ngOnInit() {

}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
<div class="cursor-pointer card-box card_gradient bg_color_blue" [routerLink]="['/app/curatedCollections', collection?.identifier]">

<img src="fusion-assets/images/provider.svg">
<div class="card_text_box">
<!-- <p class="mat-subheading-1 text-white margin-bottom-m">{{provider?.slug}}</p>
<p class="mat-body-2 text-white">{{provider?.orgName}}</p> -->
<p class="mat-subheading-1 text-white margin-bottom-m">{{collection?.name}}</p>
</div>

</div>
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
.card-box {
width: 275px;
height: 130px;
// margin-bottom: 25px;
border-radius: 8px 8px;
overflow: hidden;
// background-image: url("https://igot.blob.core.windows.net/content/content/do_11327647746152857614136/artifact/do_11327647746152857614136_1620663753379_introtoeconomics11602651204113.jpg");
// background-position: center;
// background-repeat: no-repeat;
// background-size: cover;
// padding: 16px 16px;
box-sizing: border-box;
position: relative;

img {
height: 100%;
width: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: absolute;
z-index: -1;

}
.card_text_box {
padding: 16px 16px;
width: 100%;
position: relative;
z-index: 9;
box-sizing: border-box;
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing'

import { CuratedPopularCardComponent } from './curated-popular-card.component'

describe('CuratedPopularCardComponent', () => {
let component: CuratedPopularCardComponent
let fixture: ComponentFixture<CuratedPopularCardComponent>

beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [CuratedPopularCardComponent],
})
.compileComponents()
}))

beforeEach(() => {
fixture = TestBed.createComponent(CuratedPopularCardComponent)
component = fixture.componentInstance
fixture.detectChanges()
})

it('should create', () => {
expect(component).toBeTruthy()
})
})
Loading

0 comments on commit dffe0d5

Please sign in to comment.