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

(wip): See more feed list

parent 01e94fd6

src/app/common/components/overlay-modal/overlay-modal.component.ts

+15 −4
Original line number Diff line number Diff line 
import { Component, AfterViewInit, ViewChild, ComponentFactoryResolver, ComponentRef, Input } from '@angular/core';

import {

  Component,

  AfterViewInit,

  ViewChild,

  ComponentFactoryResolver,

  ComponentRef,

  Input,

  Injector, ElementRef

} from '@angular/core';



import { DynamicHostDirective } from '../../directives/dynamic-host.directive';

import { OverlayModalService } from '../../../services/ux/overlay-modal';
@@ -8,7 +16,7 @@ import { OverlayModalService } from '../../../services/ux/overlay-modal'; 
  selector: 'm-overlay-modal',

  template: `

    <div class="m-overlay-modal--backdrop" [hidden]="hidden" (click)="dismiss()"></div>

    <div class="m-overlay-modal {{class}}" [hidden]="hidden">

    <div class="m-overlay-modal {{class}}" [hidden]="hidden" #modalElement>

      <a class="m-overlay-modal--close" (click)="dismiss()"><i class="material-icons">close</i></a>

      <ng-template dynamic-host></ng-template>

    </div>
@@ -25,6 +33,8 @@ export class OverlayModalComponent implements AfterViewInit { 
  private componentRef: ComponentRef<{}>;

  private componentInstance;



  @ViewChild('modalElement', { static: true }) protected modalElement: ElementRef;



  constructor(

    private service: OverlayModalService,

    private _componentFactoryResolver: ComponentFactoryResolver
@@ -34,7 +44,7 @@ export class OverlayModalComponent implements AfterViewInit { 
    this.service.setContainer(this);

  }



  create(componentClass, opts?) {

  create(componentClass, opts?, injector?: Injector) {

    this.dismiss();



    opts = { ...{
@@ -52,8 +62,9 @@ export class OverlayModalComponent implements AfterViewInit { 


    viewContainerRef.clear();



    this.componentRef = viewContainerRef.createComponent(componentFactory);

    this.componentRef = viewContainerRef.createComponent(componentFactory, void 0, injector);

    this.componentInstance = this.componentRef.instance;

    this.componentInstance.parent = this.modalElement.nativeElement;

  }



  setData(data) {

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

0 → 100644
+22 −0
Original line number Diff line number Diff line 
<div class="m-pro--channel-list-modal">

  <div class="m-pro--channel-list-modal--grid">

    <ng-container *ngFor="let entity$ of (entities | async); let i = index">

      <ng-container *ngIf="type === 'images' || type === 'videos' || type === 'blogs'">

        <m-pro--channel-tile *ngIf="entity$ | async as entity"

          [entity]="entity"

          (click)="expand(entity)"

        ></m-pro--channel-tile>

      </ng-container>

    </ng-container>

  </div>



  <infinite-scroll

    distance="25%"

    (load)="loadMore()"

    [moreData]="feedsService.hasMore | async"

    [inProgress]="feedsService.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

0 → 100644
+5 −0
Original line number Diff line number Diff line 
.m-pro--channel-list-modal--grid {

  display: grid;

  grid-gap: 16px;

  grid-template-columns: repeat(3, 1fr);

}

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

0 → 100644
+86 −0
Original line number Diff line number Diff line 
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Injector, ViewChild } from '@angular/core';

import { ProChannelService } from '../channel.service';

import { FeedsService } from '../../../../common/services/feeds.service';

import { ProContentModalComponent } from '../content-modal/modal.component';

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: [OverlayModalService],

})

export class ProChannelListModal {



  type: string;



  algorithm: string;



  query: string;



  parent: HTMLDivElement;



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



  set data({ type, query }) {

    this.type = type;

    this.query = query;

  }



  constructor(

    protected channelService: ProChannelService,

    protected feedsService: FeedsService,

    protected modalService: OverlayModalService,

    protected cd: ChangeDetectorRef,

    protected injector: Injector,

  ) {

  }



  ngAfterViewInit() {

    this.modalService.setContainer(this.overlayModal);



    this.load(true);

  }



  async load(refresh: boolean = false) {

    if (refresh) {

      this.feedsService.clear();

    }



    this.detectChanges();



    try {

      this.feedsService

        .setEndpoint(`api/v2/feeds/channel/${this.channelService.currentChannel.guid}/${this.type}/${this.algorithm}`)

        .setLimit(12)

        .fetch();



    } catch (e) {

      console.error('ProChannelListModal.load', e);

    }

  }



  get entities() {

    return this.feedsService.feed;

  }



  loadMore() {

    this.feedsService.loadMore();

  }



  async expand(entity) {

    if (entity.subtype !== 'video' && entity.subtype !== 'image') {

      return;

    }



    this.modalService.create(ProContentModalComponent, entity, {

      class: 'm-overlayModal--media'

    }, this.injector).present();

  }



  detectChanges() {

    this.cd.markForCheck();

    this.cd.detectChanges();

  }

}

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

+2 −2
Original line number Diff line number Diff line
@@ -48,7 +48,7 @@ 
    <li

      class="m-proChannelListContentList__seeMore"

      *ngIf="entities && displaySeeMoreTile"

      [routerLink]="seeMoreRoute"

      (click)="seeMore()"

      i18n

    >

      See more