NewsPage: Prod

Vue.component("newspagecomponent", {
  props: ["url", "request", "showMoreText"],
  data() {
    return {
      cPageIndex: 0,
      nPageIndex: 0,
      fetchUrl: "",
      news: [],
      promotedNewsItem: "",
      loading: false,
      loadingMore: false,
      pageIndex: 0,
    };
  },
  mounted() {
    if (this.url && this.request) {
      this.fetchUrl = this.url;
      this.init(this.url, JSON.parse(this.request));
      console.log({ "showMoreText": this.showMoreText })
    }
  },
  methods: {
    userWantsToFetchMore() {
      this.pageIndex++;
      let curReq = JSON.parse(this.request);

      console.log({ curReq: curReq })
      let request = {
        request: {
          Settings: {
            PageIndex: this.pageIndex,
            ImageHeight: curReq.request.Settings.ImageHeight,
            ImageWidth: curReq.request.Settings.ImageWidth,
            DefaultCity: curReq.request.Settings.DefaultCity,
            LanguageId: this.lang,
            MonthFilterCount: curReq.request.Settings.MonthFilterCount,
            NewsPageId: curReq.request.Settings.NewsPageId,
            PageSize: curReq.request.Settings.PageSize,
            PreviewLength: curReq.request.Settings.PreviewLength,
            IsPersonalized: curReq.request.Settings.IsPersonalized,
            Location: curReq.request.Settings.Location,
            Groups: curReq.request.Settings.Groups
          }
        }
      };
      this.fetchMore(this.fetchUrl, request);
    },
    async fetchMore(url, req) {
      try {
        this.loadingMore = true;
        const response = await fetch(url, {
          method: "post",
          headers: {
            Accept: "application/json, text/plain, */*",
            "Content-Type": "application/json;charset=UTF-8"
          },
          body: JSON.stringify(req)
        });
        const data = await response.json();
        if (data.d) {
          if (data.d.Events && data.d.Events.length > 0) {
            await data.d.Events.map(event => {
              event.PublishedDate = moment(event.PublishedDate)
                .locale(data.d.Settings.LanguageId)
                .format("dddd D MMMM YYYY");
            });

            this.news.push(...data.d.Events);
          }
          this.cPageIndex = data.d.CurrentPageIndex;
          this.nPageIndex = data.d.NextPageIndex;
        }
        this.loadingMore = false;
        console.log(data);
      } catch (error) {
        console.log(error);
        this.loadingMore = false;
      }
    },
    async init(url, req) {
      try {
        this.loading = true;
        const response = await fetch(url, {
          method: "post",
          headers: {
            Accept: "application/json, text/plain, */*",
            "Content-Type": "application/json;charset=UTF-8"
          },
          body: JSON.stringify(req)
        });
        const data = await response.json();
        if (data.d) {
          if (data.d.PromotedNewsItem) {
            data.d.PromotedNewsItem.PublishedDate = moment(
              data.d.PromotedNewsItem.PublishedDate
            )
              .locale(data.d.Settings.LanguageId)
              .format("dddd D MMMM YYYY");
            this.promotedNewsItem = data.d.PromotedNewsItem;
          }
          if (data.d.Events && data.d.Events.length > 0) {
            await data.d.Events.map(event => {
              event.PublishedDate = moment(event.PublishedDate)
                .locale(data.d.Settings.LanguageId)
                .format("dddd D MMMM YYYY");
            });

            this.news.push(...data.d.Events);
          }
          this.lang = data.d.Settings.LanguageId;
          this.cPageIndex = data.d.CurrentPageIndex;
          this.nPageIndex = data.d.NextPageIndex;
        }
        this.loading = false;
        console.log(data);
      } catch (error) {
        console.log(error);
        this.loading = false;
      }
    }
  },
  template: `
<div class="container mb-5 newspagecomponent vld-parent">
      <vloading :height="32" :width="32" :color="'#404040'" :is-full-page="false" :active.sync="loading"></vloading>
      <newslist :showMore="showMoreText" key="1" :promotedNewsItem="promotedNewsItem" @fetchMore="userWantsToFetchMore" :loadingMore="loadingMore" v-if="news" :loading="loading" :news="news" :cPageIndex="cPageIndex" :nPageIndex="nPageIndex"></newslist>
</div>
  `
});

Vue.component("newslist", {
  props: [
    "news",
    "cPageIndex",
    "nPageIndex",
    "loading",
    "loadingMore",
    "promotedNewsItem",
    "showMore"
  ],
  data() {
    return {
      show: this.showMore
    };
  },
  methods: {
    fetchMore() {
      this.$emit("fetchMore");
    }
  },
  template: `
<div class="row newslist">
  <div class="col-12">
    <ul class="list-unstyled">
      <news-item v-if="this.promotedNewsItem" 
      :id="this.promotedNewsItem.UniqueId" 
      :img="this.promotedNewsItem.ImageData"
      :imgAlt="this.promotedNewsItem.ImageText"
      :url="this.promotedNewsItem.Url"
      :title="this.promotedNewsItem.Title"
      :excerpt="this.promotedNewsItem.Intro"
      :date="this.promotedNewsItem.PublishedDate"
       /> 
      <news-item :id="news.UniqueId" :img="news.ImageData" :imgAlt="news.ImageText" :url="news.Url" :title="news.Title" :excerpt="news.Intro" :date="news.PublishedDate" v-for="news in this.news" :key="news.EventPageId"></news-item>
    </ul>
  </div>
    <div class="col-12" v-if="this.cPageIndex < this.nPageIndex || !this.cPageIndex == this.nPageIndex && !this.loading">
      <transition name="fade" mode="out-in">
        <button key="1" @click="this.fetchMore" class="d-flex align-items-center button-small ml-auto mr-auto" v-if="!this.loadingMore">
          {{show}}
        </button>
        <button key="2" disabled class="d-flex align-items-center button-small ml-auto mr-auto" v-else>
          <i class="material-icons">cached</i>
        </button>
      </transition>
    </div>
</div>
  `
});

Vue.component("news-item", {
  props: ["id", "img", "imgAlt", "url", "title", "excerpt", "date"],
  template: `
<li class="row news-container">
  <article :id="this.id"   class="news-item col-md-10 offset-md-1 col-lg-8 offset-lg-2"  >
  <div class="row">
    <div class="col-12 col-md-3" v-if="this.img">
      <a :href="this.url" class="d-flex flex-row align-items-start" >
        <img :src="this.img" :alt="this.imgAlt" />
      </a>
    </div>
    <div class="col-12 col-md-9">
      <div class="d-flex flex-column" >
        <a :href="this.url" v-if="this.url && this.title">
          <h2 class="heading-level-3">
            {{this.title}}
          </h2>
        </a>
        <p class="mb-0" v-if="this.excerpt">{{this.excerpt}}</p>
        <p class="mb-0 mt-2" v-if="this.date">{{this.date | capitalize}}</p>
      </div>
    </div>
  </div>
  </article>
</li>
  `
});