ShuffleEventsAndNewsBlock

Vue.component("shuffleblock", {
  props: [
    "lang",
    "newsRequest",
    "eventsRequest",
    "newsRequestUrl",
    "eventsRequestUrl",
    "newsText",
    "titleText",
    "moreEventsText",
    "moreNewsText",
    "moreEventsUrl",
    "moreNewsUrl",
    "nrOfItems"
  ],
  data() {
    return {
      newsReq: this.newsRequest,
      eventsReq: this.eventsRequest,
      newsUrl: this.newsRequestUrl,
      eventsUrl: this.eventsRequestUrl,
      newsTxt: this.newsText,
      titleTxt: this.titleText,
      moreEventsTxt: this.moreEventsText,
      moreNewsTxt: this.moreNewsText,
      eventsTxtUrl: this.moreEventsUrl,
      newsTxtUrl: this.moreNewsUrl,
      nrItems: this.nrOfItems,
      loading: false,
      items: [],
      tall: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
    };
  },
  async created() {
    try {
      this.loading = true;


      // START FETCH NEWS ITEMS
      let news = await axios.post(this.newsUrl, JSON.parse(this.newsReq));
      let {
        Events: NewsEvents,
        CurrentPageIndex: newsCurrentPageIndex,
        NextPageIndex: newsNextPageIndex
      } = news.data.d;
      NewsEvents.map(event => {
        event.isNews = true;
        if (event.PublishedDate) {
          event.PublishedDate = moment(event.PublishedDate).toDate();
          event.FormattedDate = moment(event.PublishedDate).locale(this.lang).format("dddd D MMMM YYYY");
        }
      });
      let newsItems = _.orderBy(NewsEvents, "PublishedDate", ["desc"]);
      console.log({ newsItems: newsItems })
      // END FETCH NEWS ITEMS


      // START FETCH CALENDAR ITEMS
      let events = await axios.post(this.eventsUrl, JSON.parse(this.eventsReq));
      let {
        Events: CalendarEvents,
        CurrentPageIndex: calendarPageIndex,
        NextPageIndex: calendarNextPageIndex
      } = events.data.d;
      CalendarEvents.map(event => {
        event.isNews = false;
        if (event.EventStartDate) {
          event.EventStartDate = moment(event.EventStartDate).toDate();
          event.FormattedDate = moment(event.EventStartDate).locale(this.lang).format("dddd D MMMM YYYY");
          event.CaptionDate = moment(event.EventStartDate).locale(this.lang).format("ddd D MMM");
        }
      });

      let calendarItems = _.orderBy(CalendarEvents, "EventStartDate", ["asc"]);
      console.log({ calendarItems: calendarItems })
      // END FETCH CALENDAR ITEMS


      // START SHUFFLE ARRAYS
      let combined_array = newsItems.reduce((item, i, ind) => item.push(i, calendarItems[ind]) && item, []);
      var filtered = combined_array.filter(el => {
        return el != null || undefined;
      })
      if (filtered.length > 0) {
        this.items = filtered;
      }
      // END SHUFFLE ARRAYS


      this.loading = false;
    } catch (error) {
      this.loading = false;
      console.log({ "Can't fetch news and calendars": error })
      throw new Error(error, false);
    }
  },
  template: `
      <div class="shuffleblock vld-parent w-100">
          <vloading :height="35" :width="35" :color="'#404040'" :is-full-page="false" :active.sync="loading"></vloading>
            <div class="d-flex flex-row  title-wrapper mb-md justify-content-between">

                  <h2 v-if="titleTxt" class="heading-level-2 mb-0" >
                    {{titleTxt}}
                  </h2>
                  <div class="float-right shuffle-links">
                    <a :href="eventsTxtUrl" class="ml-auto mr-md">{{moreEventsTxt}}</a>
                    <a :href="newsTxtUrl">{{moreNewsTxt}}</a>
                  </div>
            </div>
          <div class="row">
              <div class="col-12 col-md-4" v-for="(item, index) in items" :key="item.UniqueId ? item.UniqueId : item.Url" v-if="index < nrItems">
                  <article class="article-shuffle" v-if="item.isNews">
                      <a :href="item.Url" :title="item.Title" class="article-shuffle-img" v-if="item.ImageData">
                          <div class="img-with-caption">
                              <div class="img-caption lazyload" :alt="item.ImageText ? item.ImageText : item.Title" :data-bg="item.ImageData"></div>
                              <span class="caption">{{newsTxt}}</span>
                          </div>
                      </a>
                      <a :href="item.Url" :title="item.Title" class="article-shuffle-info">
                          <span class="caption article-shuffle-caption-mobile">{{newsTxt}}</span>
                          <h2 class="heading-level-3" v-html="item.Title" />
                          <p class="mb-0  shuffle-date-mobile" v-if="item.FormattedDate">{{item.FormattedDate | capitalize}}</p>
                          </a>
                          <p class="shuffle-intro" v-if="item.Intro" v-html="item.Intro" />
                          <p class="mb-0  shuffle-date" v-if="item.FormattedDate">{{item.FormattedDate | capitalize}}</p>
                  </article>
                  <article class="article-shuffle" v-else>
                      <a :href="item.Url" :title="item.Title" class="article-shuffle-img" v-if="item.ImageData">
                          <div class="img-with-caption">
                              <div class="img-caption lazyload" :alt="item.ImageText ? item.ImageText : item.Title" :data-bg="item.ImageData"></div>
                              <span class="caption">{{item.CaptionDate | capitalize}}</span>
                          </div>
                      </a>
                      <a :href="item.Url" :title="item.Title" class="article-shuffle-info">
                          <span class="caption article-shuffle-caption-mobile">{{item.CaptionDate}}</span>
                          <h2 class="heading-level-3" v-html="item.Title" />
                          <p class="mb-0 shuffle-date-mobile" v-if="item.FormattedDate">
                              <template v-if="item.CaptionDate">{{item.CaptionDate | capitalize}}<template v-if="item.CaptionDate && item.StartTime && item.StopTime">, </template></template>
                              <template v-if="item.StartTime && item.StopTime">kl {{item.StartTime}} - {{item.StopTime}}<template v-if="item.City && item.StartTime && item.StopTime">, </template></template>
                              <template v-if="item.City && item.CaptionDate && !item.StopTime || !item.StartTime">, </template><template v-if="item.City">{{item.City}}</template>
                          </p>
                          </a>
                          <p class="shuffle-intro" v-if="item.Intro" v-html="item.Intro" />
                          <p class="mb-0 shuffle-date" v-if="item.FormattedDate">
                              <template v-if="item.CaptionDate">{{item.CaptionDate | capitalize}}<template v-if="item.CaptionDate && item.StartTime && item.StopTime">, </template></template>
                              <template v-if="item.StartTime && item.StopTime">kl {{item.StartTime}} - {{item.StopTime}}<template v-if="item.City && item.StartTime && item.StopTime">, </template></template>
                              <template v-if="item.City && item.CaptionDate && !item.StopTime || !item.StartTime">, </template><template v-if="item.City">{{item.City}}</template>
                          </p>
                  </article>
              </div>
          </div>
          <div class="row action-links-shuffle mt-xs mb-md" v-if="!loading">
            <div class="col-12 align-self-end">
              <div class="col">
                <div class="float-right">
                    <a :href="eventsTxtUrl">{{moreEventsTxt}}</a>
                    <a :href="newsTxtUrl" class="ml-sm">{{moreNewsTxt}}</a>
                </div>
              </div>
            </div>
          </div>
      </div>
  `
});