65528: Renaming/Moving according to feedback; style and links added; chevrons fixed

src/app/community-list-page/CommunityListDataSource.ts

@@ -1,131 +0,0 @@
-import { combineLatest as observableCombineLatest } from 'rxjs/internal/observable/combineLatest';
-import { PaginatedList } from '../core/data/paginated-list';
-import { RemoteData } from '../core/data/remote-data';
-import { hasValue, isNotEmpty } from '../shared/empty.util';
-import { CommunityListService } from './CommunityListService';
-import { CollectionViewer, DataSource } from '@angular/cdk/typings/collections';
-import { BehaviorSubject, Observable, of as observableOf } from 'rxjs';
-import {
-  catchError,
-  filter,
-  finalize,
-  map,
-  switchMap,
-  take,
-} from 'rxjs/operators';
-import { Community } from '../core/shared/community.model';
-import { Collection } from '../core/shared/collection.model';
-
-export interface FlatNode {
-  isExpandable: boolean;
-  name: string;
-  id: string;
-  level: number;
-  isExpanded?: boolean;
-  parent?: FlatNode;
-  payload: Community | Collection;
-}
-
-const combineAndFlatten = (obsList: Array<Observable<FlatNode[]>>) =>
-  observableCombineLatest(...obsList).pipe(
-    map((matrix: FlatNode[][]) =>
-      matrix.reduce((combinedList, currentList: FlatNode[]) => [...combinedList, ...currentList]))
-  );
-
-const toFlatNode = (
-  c: Community | Collection,
-  level: number,
-  isExpanded: boolean,
-  parent?: FlatNode
-): FlatNode => ({
-  isExpandable: c instanceof Community,
-  name: c.name,
-  id: c.id,
-  level: level,
-  isExpanded,
-  parent,
-  payload: c,
-});
-
-export class CommunityListDataSource implements DataSource<FlatNode> {
-
-  private communityList$ = new BehaviorSubject<FlatNode[]>([]);
-  private loading$ = new BehaviorSubject<boolean>(false);
-
-  constructor(private communityListService: CommunityListService) {
-  }
-
-  connect(collectionViewer: CollectionViewer): Observable<FlatNode[]> {
-    return this.communityList$.asObservable();
-  }
-
-  disconnect(collectionViewer: CollectionViewer): void {
-    this.communityList$.complete();
-    this.loading$.complete();
-  }
-
-  loadCommunities(expandedNodes: FlatNode[]): void {
-    this.loading$.next(true);
-
-    this.communityListService.communities$
-      .pipe(
-        take(1),
-        switchMap((result: Community[]) => {
-          return this.transformListOfCommunities(result, 0, null, expandedNodes);
-        }),
-        catchError(() => observableOf([])),
-        finalize(() => this.loading$.next(false)),
-      ).subscribe((flatNodes: FlatNode[]) => this.communityList$.next(flatNodes));
-  };
-
-  private transformListOfCommunities(listOfCommunities: Community[],
-                                     level: number,
-                                     parent: FlatNode,
-                                     expandedNodes: FlatNode[]): Observable<FlatNode[]> {
-    if (isNotEmpty(listOfCommunities)) {
-      const obsList = listOfCommunities
-        .map((community: Community) =>
-          this.transformCommunity(community, level, parent, expandedNodes));
-
-      return combineAndFlatten(obsList);
-    } else {
-      return observableOf([]);
-    }
-  }
-
-  private transformCommunity(community: Community, level: number, parent: FlatNode, expandedNodes: FlatNode[]): Observable<FlatNode[]> {
-    let isExpanded = false;
-    if (isNotEmpty(expandedNodes)) {
-      isExpanded = hasValue(expandedNodes.find((node) => (node.id === community.id)));
-    }
-
-    const communityFlatNode = toFlatNode(community, level, isExpanded, parent);
-
-    let obsList = [observableOf([communityFlatNode])];
-
-    if (isExpanded) {
-      const subCommunityNodes$ = community.subcommunities.pipe(
-        filter((rd: RemoteData<PaginatedList<Community>>) => rd.hasSucceeded),
-        take(1),
-        switchMap((rd: RemoteData<PaginatedList<Community>>) =>
-          this.transformListOfCommunities(rd.payload.page, level + 1, communityFlatNode, expandedNodes))
-      );
-
-      obsList = [...obsList, subCommunityNodes$];
-
-      const collectionNodes$ = community.collections.pipe(
-        filter((rd: RemoteData<PaginatedList<Collection>>) => rd.hasSucceeded),
-        take(1),
-        map((rd: RemoteData<PaginatedList<Collection>>) =>
-          rd.payload.page
-            .map((collection: Collection) => toFlatNode(collection, level + 1, false, parent))
-        )
-      );
-
-      obsList = [...obsList, collectionNodes$];
-    }
-
-    return combineAndFlatten(obsList);
-  }
-
-}

src/app/community-list-page/CommunityListService.ts

@@ -1,37 +0,0 @@
-import {Injectable} from '@angular/core';
-import {Observable, of} from 'rxjs';
-import {CommunityDataService} from '../core/data/community-data.service';
-import {PaginationComponentOptions} from '../shared/pagination/pagination-component-options.model';
-import {SortDirection, SortOptions} from '../core/cache/models/sort-options.model';
-import { map, take, tap } from 'rxjs/operators';
-import {Community} from '../core/shared/community.model';
-
-@Injectable()
-export class CommunityListService {
-
-    communities$: Observable<Community[]>;
-
-    config: PaginationComponentOptions;
-    sortConfig: SortOptions;
-
-    constructor(private cds: CommunityDataService) {
-        this.config = new PaginationComponentOptions();
-        this.config.id = 'top-level-pagination';
-        this.config.pageSize = 10;
-        this.config.currentPage = 1;
-        this.sortConfig = new SortOptions('dc.title', SortDirection.ASC);
-        this.initTopCommunityList()
-    }
-
-    private initTopCommunityList(): void {
-        this.communities$ = this.cds.findTop({
-            currentPage: this.config.currentPage,
-            elementsPerPage: this.config.pageSize,
-            sort: { field: this.sortConfig.field, direction: this.sortConfig.direction }
-        }).pipe(
-          take(1),
-          map((results) => results.payload.page),
-        );
-    }
-
-}

src/app/community-list-page/community-list-adapter.ts

@@ -0,0 +1,134 @@
+import {Injectable} from '@angular/core';
+import {combineLatest as observableCombineLatest} from 'rxjs/internal/observable/combineLatest';
+import {Observable, of as observableOf} from 'rxjs';
+import {CommunityDataService} from '../core/data/community-data.service';
+import {PaginationComponentOptions} from '../shared/pagination/pagination-component-options.model';
+import {SortDirection, SortOptions} from '../core/cache/models/sort-options.model';
+import {catchError, filter, map, switchMap, take} from 'rxjs/operators';
+import {Community} from '../core/shared/community.model';
+import {Collection} from '../core/shared/collection.model';
+import {hasValue, isNotEmpty} from '../shared/empty.util';
+import {RemoteData} from '../core/data/remote-data';
+import {PaginatedList} from '../core/data/paginated-list';
+
+export interface FlatNode {
+    isExpandable: boolean;
+    name: string;
+    id: string;
+    level: number;
+    isExpanded?: boolean;
+    parent?: FlatNode;
+    payload: Community | Collection;
+}
+
+export const combineAndFlatten = (obsList: Array<Observable<FlatNode[]>>): Observable<FlatNode[]> =>
+    observableCombineLatest(...obsList).pipe(
+        map((matrix: FlatNode[][]) =>
+            matrix.reduce((combinedList, currentList: FlatNode[]) => [...combinedList, ...currentList]))
+    );
+
+export const toFlatNode = (
+    c: Community | Collection,
+    level: number,
+    isExpanded: boolean,
+    parent?: FlatNode
+): FlatNode => ({
+    isExpandable: c instanceof Community,
+    name: c.name,
+    id: c.id,
+    level: level,
+    isExpanded,
+    parent,
+    payload: c,
+});
+
+@Injectable()
+export class CommunityListAdapter {
+
+    communities$: Observable<Community[]>;
+
+    config: PaginationComponentOptions;
+    sortConfig: SortOptions;
+
+    constructor(private cds: CommunityDataService) {
+        this.config = new PaginationComponentOptions();
+        this.config.id = 'top-level-pagination';
+        this.config.pageSize = 50;
+        this.config.currentPage = 1;
+        this.sortConfig = new SortOptions('dc.title', SortDirection.ASC);
+        this.initTopCommunityList()
+    }
+
+    private initTopCommunityList(): void {
+        this.communities$ = this.cds.findTop({
+            currentPage: this.config.currentPage,
+            elementsPerPage: this.config.pageSize,
+            sort: {field: this.sortConfig.field, direction: this.sortConfig.direction}
+        }).pipe(
+            take(1),
+            map((results) => results.payload.page),
+        );
+    }
+
+    loadCommunities(expandedNodes: FlatNode[]): Observable<FlatNode[]> {
+        return this.communities$
+            .pipe(
+                take(1),
+                switchMap((result: Community[]) => {
+                    return this.transformListOfCommunities(result, 0, null, expandedNodes);
+                }),
+                catchError(() => observableOf([]))
+            );
+    };
+
+    private transformListOfCommunities(listOfCommunities: Community[],
+                                       level: number,
+                                       parent: FlatNode,
+                                       expandedNodes: FlatNode[]): Observable<FlatNode[]> {
+        if (isNotEmpty(listOfCommunities)) {
+            const obsList = listOfCommunities
+                .map((community: Community) =>
+                    this.transformCommunity(community, level, parent, expandedNodes));
+
+            return combineAndFlatten(obsList);
+        } else {
+            return observableOf([]);
+        }
+    }
+
+    private transformCommunity(community: Community, level: number, parent: FlatNode, expandedNodes: FlatNode[]): Observable<FlatNode[]> {
+        let isExpanded = false;
+        if (isNotEmpty(expandedNodes)) {
+            isExpanded = hasValue(expandedNodes.find((node) => (node.id === community.id)));
+        }
+
+        const communityFlatNode = toFlatNode(community, level, isExpanded, parent);
+
+        let obsList = [observableOf([communityFlatNode])];
+
+        if (isExpanded) {
+            const subCommunityNodes$ = community.subcommunities.pipe(
+                filter((rd: RemoteData<PaginatedList<Community>>) => rd.hasSucceeded),
+                take(1),
+                switchMap((rd: RemoteData<PaginatedList<Community>>) =>
+                    this.transformListOfCommunities(rd.payload.page, level + 1, communityFlatNode, expandedNodes))
+            );
+
+            obsList = [...obsList, subCommunityNodes$];
+
+            const collectionNodes$ = community.collections.pipe(
+                filter((rd: RemoteData<PaginatedList<Collection>>) => rd.hasSucceeded),
+                take(1),
+                map((rd: RemoteData<PaginatedList<Collection>>) =>
+                    rd.payload.page
+                        .map((collection: Collection) => toFlatNode(collection, level + 1, false, parent))
+                )
+            );
+
+            obsList = [...obsList, collectionNodes$];
+        }
+
+        return combineAndFlatten(obsList);
+    }
+
+}

src/app/community-list-page/community-list-datasource.ts

@@ -0,0 +1,33 @@
+import {CommunityListAdapter, FlatNode} from './community-list-adapter';
+import {CollectionViewer, DataSource} from '@angular/cdk/typings/collections';
+import {BehaviorSubject, Observable,} from 'rxjs';
+import {finalize, take,} from 'rxjs/operators';
+
+export class CommunityListDatasource implements DataSource<FlatNode> {
+
+    private communityList$ = new BehaviorSubject<FlatNode[]>([]);
+    private loading$ = new BehaviorSubject<boolean>(false);
+
+    constructor(private communityListService: CommunityListAdapter) {
+    }
+
+    connect(collectionViewer: CollectionViewer): Observable<FlatNode[]> {
+        this.loadCommunities(null);
+        return this.communityList$.asObservable();
+    }
+
+    loadCommunities(expandedNodes: FlatNode[]) {
+        this.loading$.next(true);
+
+        this.communityListService.loadCommunities(expandedNodes).pipe(
+            take(1),
+            finalize(() => this.loading$.next(false)),
+            ).subscribe((flatNodes: FlatNode[]) => this.communityList$.next(flatNodes));
+    }
+
+    disconnect(collectionViewer: CollectionViewer): void {
+        this.communityList$.complete();
+        this.loading$.complete();
+    }
+
+}

src/app/community-list-page/community-list-page.component.html

@@ -1,2 +1,4 @@
-<h2>{{ 'communityList.title' | translate }}</h2>
+<div class="container">
-<ds-community-list></ds-community-list>
+    <h2>{{ 'communityList.title' | translate }}</h2>
+    <ds-community-list></ds-community-list>
+</div>

src/app/community-list-page/community-list-page.routing.module.ts

@@ -3,7 +3,7 @@ import { RouterModule } from '@angular/router';
 import {CdkTreeModule} from '@angular/cdk/tree';
 
 import {CommunityListPageComponent} from './community-list-page.component';
-import {CommunityListService} from './CommunityListService';
+import {CommunityListAdapter} from './community-list-adapter';
 
 @NgModule({
     imports: [
@@ -12,6 +12,6 @@ import {CommunityListService} from './CommunityListService';
         ]),
         CdkTreeModule,
     ],
-    providers: [CommunityListService]
+    providers: [CommunityListAdapter]
 })
 export class CommunityListPageRoutingModule { }

src/app/community-list-page/community-list/community-list.component.html

@@ -1,25 +1,38 @@
 <cdk-tree [dataSource]="dataSource" [treeControl]="treeControl">
-  <!-- This is the tree node template for leaf nodes -->
+    <!-- This is the tree node template for leaf nodes -->
-  <cdk-tree-node *cdkTreeNodeDef="let node" cdkTreeNodePadding
+    <cdk-tree-node *cdkTreeNodeDef="let node" cdkTreeNodePadding
-                 [style.display]="shouldRender(node) ? 'flex' : 'none'"
+                   [style.display]="shouldRender(node) ? 'flex' : 'none'"
-                 class="example-tree-node">
+                   class="example-tree-node">
-    <!-- use a disabled button to provide padding for tree leaf -->
+        <!-- use a disabled button to provide padding for tree leaf -->
-    <button type="button" class="btn btn-default" [style.visibility]="'hidden'"></button>
+        <button type="button" class="btn btn-default" [style.visibility]="'hidden'"></button>
-    <h5 class="align-middle">{{node.name}}</h5>
+        <h6 class="align-middle">
-  </cdk-tree-node>
+            <a [routerLink]="['/collections/' + node.payload.id]" class="lead">
-  <!-- This is the tree node template for expandable nodes -->
+                {{node.name}}
-  <cdk-tree-node *cdkTreeNodeDef="let node; when: hasChild" cdkTreeNodePadding
+            </a>
-                 [style.display]="shouldRender(node) ? 'flex' : 'none'"
+        </h6>
-                 class="example-tree-node">
+        <div class="text-muted">
-    <div class="btn-group">
+            {{node.payload.shortDescription}}
-      <button type="button" class="btn btn-default" cdkTreeNodeToggle
+        </div>
-              [attr.aria-label]="'toggle ' + node.name"
+    </cdk-tree-node>
-              (click)="toggleExpanded(node)"
+    <!-- This is the tree node template for expandable nodes -->
-              [style.visibility]="node.isExpandable ? 'visible' : 'hidden'">
+    <cdk-tree-node *cdkTreeNodeDef="let node; when: hasChild" cdkTreeNodePadding
-      <span class="{{treeControl.isExpanded(node) ? 'fa fa-chevron-down' : 'fa fa-chevron-right'}}" aria-hidden="true">
+                   class="example-tree-node">
-      </span>
+        <div class="btn-group">
-      </button>
+            <button type="button" class="btn btn-default" cdkTreeNodeToggle
-      <h5 class="align-middle pt-2">{{node.name}}</h5>
+                    [attr.aria-label]="'toggle ' + node.name"
-    </div>
+                    (click)="toggleExpanded(node)"
-  </cdk-tree-node>
+                    [style.visibility]="node.isExpandable ? 'visible' : 'hidden'">
+                <span class="{{node.isExpanded ? 'fa fa-chevron-down' : 'fa fa-chevron-right'}}"
+                      aria-hidden="true"></span>
+            </button>
+            <h5 class="align-middle pt-2">
+                <a [routerLink]="['/communities/' + node.payload.id]" class="lead">
+                    {{node.name}}
+                </a>
+            </h5>
+        </div>
+        <div class="text-muted pl-4">
+            {{node.payload.shortDescription}}
+        </div>
+    </cdk-tree-node>
 </cdk-tree>

src/app/community-list-page/community-list/community-list.component.ts

@@ -1,46 +1,47 @@
 import {Component, OnInit} from '@angular/core';
-import {CommunityListService} from '../CommunityListService';
+import {CommunityListAdapter, FlatNode} from '../community-list-adapter';
-import {FlatNode, CommunityListDataSource} from '../CommunityListDataSource';
+import {CommunityListDatasource} from '../community-list-datasource';
 import {FlatTreeControl} from '@angular/cdk/tree';
 
 @Component({
-  selector: 'ds-community-list',
+    selector: 'ds-community-list',
-  templateUrl: './community-list.component.html',
+    templateUrl: './community-list.component.html',
-  styleUrls: ['./community-list.component.scss']
+    styleUrls: ['./community-list.component.scss']
 })
 export class CommunityListComponent implements OnInit {
 
-  private expandedNodes: FlatNode[] = [];
+    private expandedNodes: FlatNode[] = [];
 
-  treeControl = new FlatTreeControl<FlatNode>(
+    treeControl = new FlatTreeControl<FlatNode>(
-      (node) => node.level, (node) => node.isExpandable
+        (node) => node.level, (node) => node.isExpandable
-  );
+    );
 
-  dataSource: CommunityListDataSource;
+    dataSource: CommunityListDatasource;
 
-  constructor(private communityListService: CommunityListService) { }
+    constructor(private communityListService: CommunityListAdapter) {
-
+    }
-  ngOnInit() {
+
-    this.dataSource = new CommunityListDataSource(this.communityListService);
+    ngOnInit() {
-    this.dataSource.loadCommunities(null);
+        this.dataSource = new CommunityListDatasource(this.communityListService);
-  }
+        this.dataSource.loadCommunities(null);
-
+    }
-  hasChild = (_: number, node: FlatNode) => node.isExpandable;
+
-
+    hasChild = (_: number, node: FlatNode) => node.isExpandable;
-  shouldRender(node: FlatNode) {
+
-    const parent = node.parent;
+    shouldRender(node: FlatNode) {
-    return !parent || parent.isExpanded;
+        const parent = node.parent;
-  }
+        return !parent || parent.isExpanded;
-
+    }
-  toggleExpanded(node: FlatNode) {
+
-    if (node.isExpanded) {
+    toggleExpanded(node: FlatNode) {
-      this.expandedNodes = this.expandedNodes.filter((node2) => node2.name !== node.name);
+        if (node.isExpanded) {
-      node.isExpanded = false;
+            this.expandedNodes = this.expandedNodes.filter((node2) => node2.name !== node.name);
-    } else {
+            node.isExpanded = false;
-      this.expandedNodes.push(node);
+        } else {
-      node.isExpanded = true;
+            this.expandedNodes.push(node);
+            node.isExpanded = true;
+        }
+        this.dataSource.loadCommunities(this.expandedNodes);
     }
-    this.dataSource.loadCommunities(this.expandedNodes);
-  }
 
 }