Merge branch 'master' into 7068-dashboard-list-accordion

README.md

@@ -2,7 +2,6 @@
 [![Build Status](https://travis-ci.org/open-learning-exchange/planet.svg?branch=master)](https://travis-ci.org/open-learning-exchange/planet)
 [![Docker Stars](https://img.shields.io/docker/stars/treehouses/planet.svg?maxAge=604800)](https://store.docker.com/community/images/treehouses/planet)
 [![Docker Pulls](https://img.shields.io/docker/pulls/treehouses/planet.svg?maxAge=604800)](https://store.docker.com/community/images/treehouses/planet)
-[![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/open-learning-exchange/chat?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
 
 
 # **Planet Learning**
@@ -109,3 +108,6 @@ sudo npm install --unsafe-perm
 ```
 
 The second is to rebuild the application. First you need to cancel the app in the screen with `screen -x` then CTRL-C. Then you can bring the app back up with one of the above commands or in another screen session with `screen -dmS build bash -c 'cd /vagrant; ng serve'`.
+
+---
+This project is tested with [BrowserStack](https://www.browserstack.com/).

package.json

@@ -1,6 +1,6 @@
 {
  "name": "planet-app",
- "version": "0.13.13",
+ "version": "0.13.16",
  "license": "AGPL-3.0",
  "scripts": {
  "ng": "ng",
@@ -56,6 +56,7 @@
  "@types/cropperjs": "^1.3.0",
  "chart.js": "^2.9.3",
  "cropperjs": "^1.5.6",
+ "date-fns": "^2.29.2",
  "export-to-csv": "^0.2.1",
  "html-to-pdfmake": "^1.2.0",
  "jszip": "^3.2.2",
@@ -67,6 +68,7 @@
  "pouchdb": "^7.1.1",
  "pouchdb-authentication": "^1.1.3",
  "pouchdb-find": "^7.1.1",
+ "ramda": "^0.28.0",
  "rxjs": "6.5.4",
  "showdown": "1.9.1",
  "tslib": "^1.10.0",

src/app/app.module.ts

@@ -14,10 +14,12 @@ import { PlanetDialogsModule } from './shared/dialogs/planet-dialogs.module';
 
 import { FullCalendarModule } from '@fullcalendar/angular';
 import dayGridPlugin from '@fullcalendar/daygrid';
+import timeGridPlugin from '@fullcalendar/timegrid';
 import interactionPlugin from '@fullcalendar/interaction';
 
 FullCalendarModule.registerPlugins([ // register FullCalendar plugins
  dayGridPlugin,
+ timeGridPlugin,
  interactionPlugin
 ]);
 

src/app/community/community.component.html

@@ -4,7 +4,7 @@
  <span>{{configuration?.name}}</span>
  </mat-toolbar>
  <div class="community-news">
- <mat-tab-group class="tabs-padding">
+ <mat-tab-group class="tabs-padding" (selectedTabChange)="tabChanged($event)">
  <mat-tab i18n-label label="News">
  <h3>
  <span>{{configuration?.name}} <ng-container i18n>News</ng-container></span>
@@ -58,11 +58,11 @@ <h3>
  <mat-tab i18n-label label="Reports">
  <planet-teams-reports [reports]="reports" [editable]="isCommunityLeader && !planetCode" [team]="team" (reportsChanged)="dataChanged()"></planet-teams-reports>
  </mat-tab>
- <mat-tab i18n-label label="Calendar" *ngIf="isCalendarInTabs">
- <planet-calendar [link]="{ teams: teamId }" [sync]="{ type: 'sync', planetCode: planetCode || configuration.code }"></planet-calendar>
+ <mat-tab i18n-label label="Calendar" *ngIf="isMobile">
+ <planet-calendar [resizeCalendar]="resizeCalendar" [link]="{ teams: teamId }" [sync]="{ type: 'sync', planetCode: planetCode || configuration.code }"></planet-calendar>
  </mat-tab>
  </mat-tab-group>
  </div>
- <planet-calendar *ngIf="!isCalendarInTabs" [link]="{ teams: teamId }" [sync]="{ type: 'sync', planetCode: planetCode || configuration.code }"></planet-calendar>
+ <planet-calendar *ngIf="!isMobile" [link]="{ teams: teamId }" [sync]="{ type: 'sync', planetCode: planetCode || configuration.code }"></planet-calendar>
  </div>
 </div>

src/app/community/community.component.ts

@@ -18,6 +18,7 @@ import { ActivatedRoute, ParamMap } from '@angular/router';
 import { CustomValidators } from '../validators/custom-validators';
 import { environment } from '../../environments/environment';
 import { planetAndParentId } from '../manager-dashboard/reports/reports.utils';
+import { CheckMobileService } from '../shared/checkMobile.service';
 
 @Component({
  selector: 'planet-community',
@@ -44,7 +45,8 @@ export class CommunityComponent implements OnInit, OnDestroy {
  planetCode: string | null;
  shareTarget: string;
  servicesDescriptionLabel: 'Add' | 'Edit';
- isCalendarInTabs = window.innerWidth < 800;
+ resizeCalendar: any = false;
+ isMobile: boolean = this.checkMobileService.checkIsMobile();
 
  constructor(
  private dialog: MatDialog,
@@ -57,7 +59,8 @@ export class CommunityComponent implements OnInit, OnDestroy {
  private couchService: CouchService,
  private planetMessageService: PlanetMessageService,
  private userService: UserService,
- private usersService: UsersService
+ private usersService: UsersService,
+ private checkMobileService: CheckMobileService
  ) {}
 
  ngOnInit() {
@@ -80,7 +83,7 @@ export class CommunityComponent implements OnInit, OnDestroy {
  }
 
  @HostListener('window:resize') onResize() {
- this.isCalendarInTabs = window.innerWidth < 800;
+ this.isMobile = this.checkMobileService.checkIsMobile();
  }
 
  ngOnDestroy() {
@@ -309,4 +312,11 @@ export class CommunityComponent implements OnInit, OnDestroy {
  );
  }
 
+ tabChanged({ index }) {
+ if (index === 5) {
+ this.resizeCalendar = true;
+ } else {
+ this.resizeCalendar = false;
+ }
+ }
 }

src/app/community/community.scss

@@ -14,13 +14,20 @@
  "news calendar";
  gap: 0.5rem;
 
- @media only screen and (max-width: 800px) {
+ @media only screen and (max-width: #{$screen-sm}) {
  grid-template-columns: 1fr;
  grid-template-areas:
  "links"
  "news";
  }
 
+ @media only screen and (max-width: 1080px) {
+ .fc .fc-toolbar {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ }
+ }
 }
 
 .view-container mat-toolbar {

src/app/courses/add-courses/courses-add.scss

@@ -18,4 +18,40 @@
  .actions-container {
  align-self: center;
  }
+
+ @media (max-width: $screen-sm) {
+ .form-container {
+ width: auto;
+ }
+
+ .form-spacing {
+ width: auto;
+ }
+
+ .view-container {
+ grid-template-columns: 1fr;
+ // grid-row-gap: 1rem;
+ grid-template-rows: 1fr 1fr 1fr;
+ grid-template-areas:
+ 'steps-area steps-area'
+ 'form-area form-area'
+ 'actions-area actions-area';
+ > * {
+ overflow-y: visible;
+ } 
+ }
+
+ .steps-container {
+ grid-area: steps-area;
+ }
+
+ .form-container {
+ grid-area: form-area;
+ margin-top: 5rem;
+ }
+
+ .actions-container{
+ grid-area: actions-area;
+ }
+ }
 }

src/app/courses/courses.component.ts

@@ -29,7 +29,6 @@ import { DialogsLoadingService } from '../shared/dialogs/dialogs-loading.service
 import { TagsService } from '../shared/forms/tags.service';
 import { PlanetTagInputComponent } from '../shared/forms/planet-tag-input.component';
 import { SearchService } from '../shared/forms/search.service';
-import { DialogsRatingsComponent } from '../shared/dialogs/dialogs-ratings.component';
 import { CoursesViewDetailDialogComponent } from './view-courses/courses-view-detail.component';
 
 @Component({

src/app/courses/progress-courses/courses-progress-leader.component.html

@@ -11,14 +11,17 @@
  </span>
  <span class="toolbar-fill"></span>
  <planet-selector *ngIf="planetCodes.length > 1" [planetCodes]="planetCodes" (selectionChange)="planetSelectionChange($event)"></planet-selector>
- <button mat-raised-button color="accent" class="margin-lr-3" *ngIf="selectedStep !== undefined" (click)="resetToFullCourse()" i18n>Show full course</button>
  <mat-form-field *ngIf="submittedExamSteps?.length > 1">
  <mat-select i18n-placeholder placeholder="View Test Progress" [value]="selectedStep" (selectionChange)="onStepChange($event.value)">
  <mat-option *ngFor="let step of submittedExamSteps" [value]="step" i18n>
  {{ step.stepTitle || 'Step ' + (step.index + 1) }}
  </mat-option>
  </mat-select>
  </mat-form-field>
+ <button mat-raised-button color="accent" class="margin-lr-3" *ngIf="selectedStep !== undefined" (click)="resetToFullCourse()" i18n>Show full course</button>
+ <button class="margin-lr-10" color="accent" mat-raised-button i18n (click)="exportChartData()">
+ Export
+ </button>
  </mat-toolbar>
  <div class="view-container view-full-height">
  <planet-courses-progress-chart *ngIf="chartData?.length; else noProgress" [label]="chartLabel" [inputs]="chartData" [height]="yAxisLength" [showAvatar]="true" (clickAction)="memberClick($event)" (changeData)="changeData($event)">

src/app/courses/progress-courses/courses-progress-leader.component.ts

@@ -5,6 +5,7 @@ import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { CoursesService } from '../courses.service';
 import { SubmissionsService } from '../../submissions/submissions.service';
+import { CsvService } from '../../shared/csv.service';
 import { dedupeShelfReduce, dedupeObjectArray } from '../../shared/utils';
 import { DialogsLoadingService } from '../../shared/dialogs/dialogs-loading.service';
 import { findDocuments } from '../../shared/mangoQueries';
@@ -23,6 +24,7 @@ export class CoursesProgressLeaderComponent implements OnInit, OnDestroy {
  selectedStep: any;
  allChartData: any[] = [];
  chartData: any[];
+ csvChartData: any[];
  submissions: any[] = [];
  progress: any[] = [];
  onDestroy$ = new Subject<void>();
@@ -36,6 +38,7 @@ export class CoursesProgressLeaderComponent implements OnInit, OnDestroy {
  private route: ActivatedRoute,
  private coursesService: CoursesService,
  private submissionsService: SubmissionsService,
+ private csvService: CsvService,
  private dialogsLoadingService: DialogsLoadingService,
  private dialog: MatDialog
  ) {
@@ -105,7 +108,7 @@ export class CoursesProgressLeaderComponent implements OnInit, OnDestroy {
  }
 
  answerErrorCount(answer) {
- return answer.grade === undefined ? '' : answer.mistakes || (1 - answer.grade);
+ return answer?.grade === undefined ? '' : answer?.mistakes || (1 - answer?.grade);
  }
 
  userCourseAnswers(user: any, step: any, index: number, submissions: any[]) {
@@ -209,4 +212,25 @@ export class CoursesProgressLeaderComponent implements OnInit, OnDestroy {
  });
  }
 
+ structureChartData(data) {
+ const dataArr = [];
+ data.forEach(element => {
+ const dataDict = {};
+ dataDict['Username'] = element.label;
+ for (let i = 0; i < element.items.length; i++) {
+ dataDict[`Step ${(i + 1)}`] = element.items[i].number;
+ }
+
+ dataArr.push(dataDict);
+ });
+ return dataArr;
+ }
+
+ exportChartData() {
+ this.csvService.exportCSV({
+ data: this.structureChartData(this.chartData),
+ title: $localize`Course Progress Data`
+ });
+ }
+
 }

src/app/courses/view-courses/courses-view.scss

@@ -1,3 +1,5 @@
+@import '../../variables';
+
 :host {
  .course-container {
  display: grid;
@@ -24,4 +26,23 @@
  grid-column-gap: 0;
  }
 
+ @media (max-width: $screen-sm) {
+ .course-container {
+ grid-template-columns: 1fr;
+ grid-template-areas: 
+ 'view'
+ 'detail';
+ grid-row-gap: 1rem;
+ }
+
+ .full-view-container.course-container {
+ grid-template-columns: 1fr;
+ grid-template-rows: 0 1fr;
+ } 
+
+ .course-detail, .course-view {
+ overflow: visible;
+ }
+ }
+
 }

src/app/home/home-router.module.ts

@@ -12,6 +12,7 @@ import { HealthListComponent } from '../health/health-list.component';
 import { CommunityComponent } from '../community/community.component';
 import { myDashboardRoute } from './router-constants';
 import { CoursesProgressLearnerComponent } from '../courses/progress-courses/courses-progress-learner.component';
+import { LandingComponent } from '../landing/landing.component';
 
 export function dashboardPath(route): string {
  return `${myDashboardRoute}/${route}`;
@@ -72,7 +73,9 @@ const routes: Routes = [
  loadChildren: () => import('../resources/resources.module').then(m => m.ResourcesModule), data: { view: 'myPersonals' }
  }
  ]
- }
+ },
+ { path: 'landing', component: LandingComponent },
+ { path: 'landing', loadChildren: () => import('../landing/landing.module').then(m => m.LandingModule) }
 ];
 
 @NgModule({

src/app/home/home.module.ts

@@ -69,7 +69,7 @@ import { CoursesViewDetailModule } from '../courses/view-courses/courses-view-de
  CommunityComponent,
  CommunityLinkDialogComponent,
  PlanetComponent,
- HealthListComponent
+ HealthListComponent,
  ]
 })
 export class HomeModule { }

src/app/landing/helpers/timeFormat.ts

@@ -0,0 +1,9 @@
+import { formatDistance } from 'date-fns';
+import { es } from 'date-fns/locale';
+
+export function formatTimeAgo(date) {
+ if (!date) {
+ return '';
+ }
+ return formatDistance(new Date(date), new Date(), { addSuffix: true, locale: es });
+}

src/app/landing/landing-footer/landing-footer.component.html

@@ -0,0 +1,6 @@
+<div class="image-card">
+ <img src="assets/landing-page/logos/ole.svg" width="100" height="100" alt="ole-logo" />
+ <img src="assets/landing-page/logos/uaiki.svg" width="100" height="100" alt="uaiki-logo" />
+ <img src="assets/landing-page/logos/onu.svg" width="100" height="100" alt="onu-logo" />
+ <img src="assets/landing-page/logos/usaid.svg" width="100" height="100" alt="usaid-logo" />
+</div>

src/app/landing/landing-footer/landing-footer.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'planet-landing-footer',
+ templateUrl: './landing-footer.component.html',
+ styleUrls: [ './landing-footer.scss' ]
+})
+
+export class LandingFooterComponent {
+
+}

src/app/landing/landing-footer/landing-footer.scss

@@ -0,0 +1,16 @@
+.image-card {
+ display: flex;
+ background: #F4F4F4;
+ justify-content: space-around;
+ width: 100%;
+ flex-wrap: wrap;
+ padding: 8px;
+ & img {
+ margin: 12px;
+ max-height: 50px;
+ width: auto;
+ };
+ position: absolute;
+ bottom: 0;
+ min-height: 5.5rem;
+}