Commit af8f9600 authored by Emiliano Balbuena's avatar Emiliano Balbuena
Browse files

(refactor): Infinite modals

parent da9f4630
Loading
Loading
Loading
Loading
+0 −33
Original line number Original line Diff line number Diff line
<div class="m-pro--channel-list-modal">
  <div
    class="m-pro--channel-list-modal--grid"
    [class.m-pro--channel-list-modal--activities-grid]="type === 'activities'"
  >
    <ng-container *ngFor="let entity$ of (entities$ | async); let i = index">
      <ng-container *ngIf="entity$ | async as entity">
        <ng-container *ngIf="type === 'all' || type === 'images' || type === 'videos' || type === 'blogs'">
          <m-pro--channel-tile
            [entity]="entity"
            (click)="expand(entity)"
          ></m-pro--channel-tile>
        </ng-container>

        <ng-container *ngIf="type === 'activities'">
          <minds-activity
            [object]="entity"
          ></minds-activity>
        </ng-container>
      </ng-container>
    </ng-container>
  </div>

  <infinite-scroll
    distance="25%"
    (load)="loadMore()"
    [moreData]="hasMore$ | async"
    [inProgress]="inProgress$ | async"
    [scrollSource]="this.parent"
  ></infinite-scroll>
</div>

<m-overlay-modal #overlayModal></m-overlay-modal>
+0 −29
Original line number Original line Diff line number Diff line
.m-pro--channel-list-modal {
  margin-top: 48px;
}

.m-pro--channel-list-modal--grid {
  display: grid;
  grid-gap: 16px;
  grid-template-columns: repeat(2, 1fr);

  &.m-pro--channel-list-modal--activities-grid {
    grid-template-columns: repeat(1, 1fr);
    max-width: 500px;
    margin: 0 auto;
  }
}

m-overlay-modal {
  .m-overlayModal--seeMore {
    background-color: var(--m-pro--plain-background-color) !important;

    a.m-overlay-modal--close {
      background-color: var(--m-pro--transparent-background-color) !important;

      i {
        color: var(--m-pro--text-color) !important;
      }
    }
  }
}
+0 −114
Original line number Original line Diff line number Diff line
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Injector, ViewChild } from '@angular/core';
import { ProChannelService } from '../channel.service';
import { FeedsService } from '../../../../common/services/feeds.service';
import { OverlayModalService } from '../../../../services/ux/overlay-modal';
import { OverlayModalComponent } from '../../../../common/components/overlay-modal/overlay-modal.component';

@Component({
  selector: 'm-pro--channel-list-modal',
  changeDetection: ChangeDetectionStrategy.OnPush,
  templateUrl: 'list-modal.component.html',
  providers: [FeedsService, OverlayModalService],
})
export class ProChannelListModal {

  type: string;

  algorithm: string;

  query: string;

  hashtag: string;

  parent: HTMLDivElement;

  @ViewChild('overlayModal', { static: true }) protected overlayModal: OverlayModalComponent;

  set data({ type, query, hashtag }) {
    this.type = type;
    this.query = query;
    this.hashtag = hashtag;
  }

  constructor(
    protected channelService: ProChannelService,
    protected feedsService: FeedsService,
    protected modalService: OverlayModalService,
    protected element: ElementRef,
    protected cd: ChangeDetectorRef,
    protected injector: Injector,
  ) {
  }

  ngAfterViewInit() {
    this.modalService
      .setContainer(this.overlayModal)
      .setRoot(this.element.nativeElement);

    this.load(true);
  }

  async load(refresh: boolean = false) {
    if (refresh) {
      this.feedsService.clear();
    }

    this.detectChanges();

    let url = `api/v2/feeds/channel/${this.channelService.currentChannel.guid}/${this.type}/${this.algorithm}`;

    let params = [];

    if (this.query && this.query !== '') {
      params.push(`query=${this.query}`);
    }

    if (this.hashtag && this.hashtag !== 'all') {
      params.push(`hashtags=${this.hashtag}`);
    }

    if (params.length > 0) {
      url += '?' + params.join('&');
    }


    try {
      this.feedsService
        .setEndpoint(url)
        .setLimit(12)
        .fetch();

    } catch (e) {
      console.error('ProChannelListModal.load', e);
    }
  }

  get entities$() {
    return this.feedsService.feed;
  }

  get hasMore$() {
    return this.feedsService.hasMore;
  }

  get inProgress$() {
    return this.feedsService.inProgress;
  }

  loadMore() {
    this.feedsService.loadMore();
  }

  expand(entity: any) {
    return this.channelService.open(entity, this.modalService);
  }

  private getType(entity: any) {
    return entity.type === 'object' ? `${entity.type}:${entity.subtype}` : entity.type;
  }

  detectChanges() {
    this.cd.markForCheck();
    this.cd.detectChanges();
  }
}
+45 −36
Original line number Original line Diff line number Diff line
@@ -5,19 +5,22 @@
></m-pro--channel--categories>
></m-pro--channel--categories>


<div class="m-proChannelList__tools" *ngIf="query !== ''">
<div class="m-proChannelList__tools" *ngIf="query !== ''">
  <div class="m-proChannelListTools__searchResult"> <!--TODO add ngif after enable algorithm *ngIf="query !== ''"-->
  <div class="m-proChannelListTools__searchResult">
    <span> Showing results for: <strong> {{query}}</strong></span>
    <span> Showing results for: <strong> {{query}}</strong></span>
  </div>
  </div>
</div>
</div>


<div class="m-proChannelList__content" *ngIf="!(inProgress$ | async); else inProgressLoader">
<div class="m-proChannelList__content">
  <ul class="m-proChannelListContent__list" [class.m-proChannelListContent__normalList]="type === 'activities'">
  <ul class="m-proChannelListContent__list" [class.m-proChannelListContent__normalList]="type === 'activities'">
    <li *ngFor="let entity of entities; let i = index">
    <li *ngFor="let entity$ of (entities$ | async); let i = index">
      <ng-container *ngIf="entity$ | async as entity">
        <ng-container *ngIf="type === 'all' || type === 'images' || type === 'videos' || type === 'blogs'">
        <ng-container *ngIf="type === 'all' || type === 'images' || type === 'videos' || type === 'blogs'">
          <m-pro--channel-tile
          <m-pro--channel-tile
            [entity]="entity"
            [entity]="entity"
            (click)="onTileClicked(entity)"
          ></m-pro--channel-tile>
          ></m-pro--channel-tile>
        </ng-container>
        </ng-container>

        <ng-container *ngIf="type === 'groups'">
        <ng-container *ngIf="type === 'groups'">
          <m-pro--channel--group-tile
          <m-pro--channel--group-tile
            [entity]="entity"
            [entity]="entity"
@@ -31,25 +34,31 @@
            [object]="entity"
            [object]="entity"
          ></minds-activity>
          ></minds-activity>
        </ng-container>
        </ng-container>
    <li
      </ng-container>
      class="m-proChannelListContentList__seeMore"
      *ngIf="entities && displaySeeMoreTile"
      (click)="seeMore()"
      i18n
    >
      <span>See more&hellip;</span>
    </li>
    </li>
  </ul>
  </ul>
  <ng-container *ngIf="entities.length == 0">

    <div class="m-proChannelListContent__noContent" i18n>There's nothing to show</div>
  <ng-container *ngIf="!(inProgress$ | async)">
  </ng-container>
    <div
  <ng-container *ngIf="type === 'activities'">
      *ngIf="hasMore$ | async; else noMore"
    <pre *ngFor="let entity of entities"></pre>
      class="m-proChannelListContent__loadMore"
    <!-- talk to Emi about this -->
      (click)="loadMore()"
  </ng-container>
      i18n
    >
      Click to load more
    </div>
    </div>
<ng-template #inProgressLoader>

  <div class="m-proChannelList__loader">
    <ng-template #noMore>
    <div class="mdl-spinner mdl-js-spinner is-active" [mdl]></div>
      <div
        class="m-proChannelListContent__loadMore"
        i18n
      >
        Click to load more
      </div>
      </div>
    </ng-template>
    </ng-template>
  </ng-container>

  <div class="m-proChannelList__loader" *ngIf="inProgress$ | async">
    <div class="mdl-spinner mdl-js-spinner is-active" [mdl]></div>
  </div>
</div>
+9 −15
Original line number Original line Diff line number Diff line
@@ -71,21 +71,19 @@ m-pro--channel-list {
    color: var(--m-pro--text-color);
    color: var(--m-pro--text-color);
  }
  }


  .m-proChannelListContentList__seeMore {
  .m-proChannelListContent__loadMore {
    width: 100%;
    font-size: 20px;
    padding: 16px;
    margin-top: 32px;
    cursor: pointer;
    text-align: center;
    font-weight: 300;
    color: var(--m-pro--text-color);
    color: var(--m-pro--text-color);
    background-color: var(--m-pro--transparent-background-color);
    background-color: var(--m-pro--transparent-background-color);


    font-size: 30px;
    &.m-proChannelListContent__noMore {
    text-align: center;
    vertical-align: middle;


    cursor: pointer;

    min-height: 220px;

    > span {
      display: block;
      width: 100%;
    }
    }
  }
  }


@@ -103,10 +101,6 @@ m-pro--channel-list {
        max-width: 500px;
        max-width: 500px;
        justify-self: center;
        justify-self: center;


        &.m-proChannelListContentList__seeMore {
          width: 500px;
        }

        minds-activity {
        minds-activity {
          min-width: 100%;
          min-width: 100%;
        }
        }
Loading