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

(refactor): Infinite modals

parent da9f4630

src/app/modules/pro/channel/list-modal/list-modal.component.html

deleted100644 → 0
+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>

src/app/modules/pro/channel/list-modal/list-modal.component.scss

deleted100644 → 0
+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;

      }

    }

  }

}

src/app/modules/pro/channel/list-modal/list-modal.component.ts

deleted100644 → 0
+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();

  }

}

src/app/modules/pro/channel/list/list.component.html

+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>

src/app/modules/pro/channel/list/list.component.scss

+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%;

        }

        }