Indicators for parent/local doc diff (fixes #1560) (#1620)

Author: lmmrssa

src/app/courses/courses.component.html

@@ -67,6 +67,7 @@
         <h3 class="header"><a [routerLink]="['view', element._id]">{{element.courseTitle}}</a>
         </h3>
         <div class="content"><p>{{ element.description }}</p></div>
+        <planet-local-status [status]="element.localStatus"></planet-local-status>
         <button *ngIf="!parent" class="menu" mat-icon-button [matMenuTriggerFor]="resourceMenu">
           <mat-icon>more_vert</mat-icon>
         </button>

src/app/courses/courses.component.ts

@@ -7,8 +7,8 @@ import { SelectionModel } from '@angular/cdk/collections';
 import { Router, ActivatedRoute, } from '@angular/router';
 import { FormBuilder, FormGroup, } from '@angular/forms';
 import { UserService } from '../shared/user.service';
-import { Subject } from 'rxjs';
-import { switchMap, takeUntil } from 'rxjs/operators';
+import { Subject, of } from 'rxjs';
+import { switchMap, takeUntil, map } from 'rxjs/operators';
 import { filterDropdowns, filterSpecificFields, composeFilterFunctions } from '../shared/table-helpers';
 import * as constants from './constants';
 import { debug } from '../debug-operator';
@@ -86,10 +86,17 @@ export class CoursesComponent implements OnInit, AfterViewInit, OnDestroy {
     this.userShelf = this.userService.shelf;
     this.courses.filterPredicate = composeFilterFunctions([ filterDropdowns(this.filter), filterSpecificFields([ 'courseTitle' ]) ]);
     this.courses.sortingDataAccessor = (item, property) => item[property].toLowerCase();
-    this.coursesService.coursesUpdated$.pipe(takeUntil(this.onDestroy$)).subscribe((courses) => {
-      // Sort in descending createdDate order, so the new courses can be shown on the top
-      courses.sort((a, b) => b.createdDate - a.createdDate);
-      this.courses.data = this.setupList(courses, this.userShelf.courseIds);
+    this.coursesService.coursesUpdated$.pipe(
+      takeUntil(this.onDestroy$),
+      map((courses: any) => {
+        // Sort in descending createdDate order, so the new courses can be shown on the top
+        courses.sort((a, b) => b.createdDate - a.createdDate);
+        this.userShelf = this.userService.shelf;
+        return this.setupList(courses, this.userShelf.courseIds);
+      }),
+      switchMap((courses: any) => this.parent ? this.couchService.localComparison(this.dbName, courses) : of(courses))
+    ).subscribe((courses: any) => {
+      this.courses.data = courses;
     });
   }
 

src/app/courses/courses.module.ts

@@ -17,6 +17,7 @@ import { CoursesProgressLeaderComponent } from './progress-courses/courses-progr
 import { CoursesProgressBarComponent } from './progress-courses/courses-progress-bar.component';
 import { CoursesProgressChartComponent } from './progress-courses/courses-progress-chart.component';
 import { CoursesProgressLearnerComponent } from './progress-courses/courses-progress-learner.component';
+import { SharedComponentsModule } from '../shared/shared-components.module';
 
 @NgModule({
   imports: [
@@ -28,7 +29,8 @@ import { CoursesProgressLearnerComponent } from './progress-courses/courses-prog
     PlanetDialogsModule,
     MaterialModule,
     ResourcesModule,
-    ExamsModule
+    ExamsModule,
+    SharedComponentsModule
   ],
   declarations: [
     CoursesComponent,

src/app/resources/resources.component.html

@@ -61,6 +61,7 @@ <h3 class="header">
             {{tag}}
           </mat-chip>
         </mat-chip-list>
+        <planet-local-status [status]="element.localStatus"></planet-local-status>
         <button *ngIf="!parent" class="menu" mat-icon-button [matMenuTriggerFor]="resourceMenu">
           <mat-icon>more_vert</mat-icon>
         </button>

src/app/resources/resources.component.ts

@@ -5,8 +5,8 @@ import { MatTableDataSource, MatPaginator, MatSort, MatDialog, PageEvent } from
 import { SelectionModel } from '@angular/cdk/collections';
 import { Router, ActivatedRoute } from '@angular/router';
 import { HttpClient } from '@angular/common/http';
-import { takeUntil } from 'rxjs/operators';
-import { Subject } from 'rxjs';
+import { takeUntil, map, switchMap } from 'rxjs/operators';
+import { Subject, of } from 'rxjs';
 import { PlanetMessageService } from '../shared/planet-message.service';
 import { UserService } from '../shared/user.service';
 import { filterSpecificFields, composeFilterFunctions, filterArrayField, filterTags } from '../shared/table-helpers';
@@ -79,12 +79,15 @@ export class ResourcesComponent implements OnInit, AfterViewInit, OnDestroy {
   ) {}
 
   ngOnInit() {
-    this.resourcesService.resourcesUpdated$.pipe(takeUntil(this.onDestroy$))
-    .subscribe((resources) => {
-       // Sort in descending createdDate order, so the new resource can be shown on the top
-      resources.sort((a, b) => b.createdDate - a.createdDate);
+    this.resourcesService.resourcesUpdated$.pipe(takeUntil(this.onDestroy$)).pipe(
+      map((resources) => {
+        // Sort in descending createdDate order, so the new resource can be shown on the top
+        resources.sort((a, b) => b.createdDate - a.createdDate);
+        return this.setupList(resources, this.userService.shelf.resourceIds);
+      }),
+      switchMap((resources) => this.parent ? this.couchService.localComparison(this.dbName, resources) : of(resources))
+    ).subscribe((resources) => {
       this.resources.data = resources;
-      this.setupList(this.resources.data, this.userService.shelf.resourceIds);
     });
     this.resourcesService.updateResources({ opts: this.getOpts });
     this.resources.filterPredicate = composeFilterFunctions(
@@ -109,11 +112,11 @@ export class ResourcesComponent implements OnInit, AfterViewInit, OnDestroy {
   }
 
   setupList(resourcesRes, myLibrarys) {
-    resourcesRes.forEach((resource: any) => {
+    return resourcesRes.map((resource: any) => {
       const myLibraryIndex = myLibrarys.findIndex(resourceId => {
         return resource._id === resourceId;
       });
-      resource.libraryInfo = myLibraryIndex > -1;
+      return { ...resource, libraryInfo: myLibraryIndex > -1 };
     });
   }
 

src/app/resources/resources.module.ts

@@ -10,6 +10,7 @@ import { ResourcesRouterModule } from './resources-router.module';
 import { MaterialModule } from '../shared/material.module';
 import { HttpClientModule, HttpClientJsonpModule } from '@angular/common/http';
 import { PlanetDialogsModule } from '../shared/dialogs/planet-dialogs.module';
+import { SharedComponentsModule } from '../shared/shared-components.module';
 
 @NgModule({
   imports: [
@@ -21,7 +22,8 @@ import { PlanetDialogsModule } from '../shared/dialogs/planet-dialogs.module';
     MaterialModule,
     HttpClientModule,
     HttpClientJsonpModule,
-    PlanetDialogsModule
+    PlanetDialogsModule,
+    SharedComponentsModule
   ],
   declarations: [
     ResourcesComponent,

src/app/shared/couchdb.service.ts

@@ -5,6 +5,7 @@ import { Observable, of } from 'rxjs';
 import { catchError, map, expand, takeWhile, toArray, flatMap } from 'rxjs/operators';
 import { debug } from '../debug-operator';
 import { PlanetMessageService } from './planet-message.service';
+import { findDocuments, inSelector } from './mangoQueries';
 
 @Injectable()
 export class CouchService {
@@ -76,7 +77,21 @@ export class CouchService {
     }));
   }
 
+  localComparison(db: string, parentDocs: any[]) {
+    const ids = parentDocs.map((parentDoc: any) => parentDoc._id);
+    return this.findAll(db, findDocuments({ '_id': inSelector(ids) })).pipe(map((localDocs) => {
+      return parentDocs.map((parentDoc) => {
+        const localDoc: any = localDocs.find((doc: any) => doc._id === parentDoc._id);
+        return {
+          ...parentDoc,
+          localStatus: localDoc !== undefined ? this.compareRev(parentDoc._rev, localDoc._rev) : 0
+        };
+      });
+    }));
+  }
+
   findAll(db: string, query: any, opts?: any) {
+    console.log(query);
     return this.post(db + '/_find', query, opts).pipe(expand((res) => {
       return this.post(db + '/_find', { ...query, bookmark: res.bookmark }, opts);
     }), takeWhile((res) => {
@@ -105,4 +120,13 @@ export class CouchService {
     return this.http.get(urlPrefix + '/' + url, opts);
   }
 
+  private compareRev = (parent, local) => {
+    if (parent === local) {
+      return 'match';
+    }
+    local = parseInt(local.split('-')[0], 10);
+    parent = parseInt(parent.split('-')[0], 10);
+    return (local < parent) ? 'newerAvailable' : (local > parent) ? 'parentOlder' : 'mismatch';
+  }
+
 }

src/app/shared/planet-local-status.component.ts

@@ -0,0 +1,16 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  'selector': 'planet-local-status',
+  'template': `
+    <ng-container [ngSwitch]="status">
+      <mat-icon *ngSwitchCase="'match'" i18n-title title="Upto date">done_all</mat-icon>
+      <mat-icon *ngSwitchCase="'newerAvailable'" i18n-title title="Newer">fiber_new</mat-icon>
+      <mat-icon *ngSwitchCase="'parentOlder'" i18n-title title="Older">timelapse</mat-icon>
+      <mat-icon *ngSwitchCase="'mismatch'" i18n-title title="Does not match">priority_high</mat-icon>
+    </ng-container>
+  `
+})
+export class PlanetLocalStatusComponent {
+  @Input() status: string;
+}

src/app/shared/shared-components.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { PlanetLocalStatusComponent } from './planet-local-status.component';
+import { MaterialModule } from './material.module';
+
+@NgModule({
+  imports: [
+    CommonModule, MaterialModule
+  ],
+  exports: [
+    PlanetLocalStatusComponent
+  ],
+  declarations: [
+    PlanetLocalStatusComponent
+  ]
+})
+export class SharedComponentsModule {}

src/styles.scss

@@ -118,7 +118,8 @@ body {
     display: grid;
     grid-template-areas:
       'hd mn'
-      'cn .';
+      'cn .'
+      'tags tags';
     grid-template-columns: auto 50px;
 
     .header {
@@ -136,6 +137,11 @@ body {
       grid-area: mn;
     }
 
+    .tags-list {
+      grid-area: tags;
+      margin-bottom: 0.5rem;
+    }
+
   }
 
   // the colored stars are placed on top of the uncolored ones