CalendarBlock: Productionstjanst

Vue.component("modal", {
  data() {
    return {
      show: false
    };
  },
  template: `
  <transition name="modal" mode="out-in">
  <div class="modal-mask" >
    <div class="modal-wrapper" @click="$emit('close')">
      <div class="modal-container" @click.stop>

        <div class="modal-header d-flex flex-row align-items-center">
          <div class="d-flex align-items-center">
            <slot name="header">
            </slot>
          </div>
          <div class="ml-auto">
            <button @click="$emit('close')" class="button-close d-flex align-items-center">
                <i class="material-icons">clear</i>
            </button>
          </div>
        </div>

        <div class="modal-body">
          <slot name="body">
          </slot>
        </div>

        
      </div>
    </div>
  </div>
</transition>
  `
});

Vue.component("calendarblock", {
  template: `
  <div  class="calendar-block " v-cloak >
  <div class="block-header" >
    <slot name="header">
  </slot>
  </div>
  <div class="row">
      <div class="col-12" v-for="(item, index) in items" :key="index" v-if="!loading && index <= 8">
          <article role="article">
              <a href="#" class="d-flex" v-bind:class="{'article--image': item.ImageData}"
                  v-bind:style="{ backgroundImage: 'url(' + item.ImageData + ')' }">
                  <div class="caption mt-auto" v-if="!item.CalendarPageId">
                      Nyhet
                  </div>
                  <div class="caption mt-auto" v-else>
                      \{{item.EventStartDate}}
                  </div>
              </a>
              <h2 class="heading-level-3"><a :href="item.Url">\{{item.Title}}</a></h2>
              <p v-if="item.Intro">\{{item.Intro}}</p>
              <div class="d-flex flex-row" v-if="item.CalendarPageId">
                  <p class="small-font">\{{item.EventStartDate}}, kl. \{{item.StartTime}}-\{{item.StopTime}}
                      <br>\{{item.City}}, \{{item.Location}}</p>

              </div>
              <div v-else class="d-flex flex-row">
                  <p class="small-font">\{{item.PublishedDate}}</p>
              </div>
          </article>
      </div>
      <div class="col-12" v-for="i in 6" :key="i" v-if="loading">
          <article class="fake--article ">
              <div class="fake--image loading"></div>
              <div class="fake--title loading mt-xs mb-xs"></div>
              <div class="fake--text  mb-xs">
                  <div class="loading"></div>
                  <div class="loading"></div>
                  <div class="loading"></div>
              </div>
          </article>
      </div>
  </div>

</div>
  `,
  data() {
    return {
      url: "",
      loading: false,
      items: [],
      events: [],
      showModal: false,
      news: [],
      eventRequest: {
        request: {
          Settings: {
            IsInit: true,
            PageIndex: 0
          }
        }
      }
    };
  },
  mounted() {
    if (document.getElementById("calendarblock")) {
      this.waitForUrlBeforeFetch();
    }
  },
  methods: {
    isLoading(bool) {
      this.loading = bool;
    },
    fetchMore() {
      if (this.eventRequest.request.Settings.PageIndex < this.items.PageCount) {
        this.eventRequest.request.Settings.PageIndex += 1;
        this.fetchData(this.url, this.eventRequest);
      } else {
        this.error = true;
        this.errorText = "Det finns inga fler evenemang.";
      }
    },
    async waitForUrlBeforeFetch() {
      if (document.getElementById("calendarblock")) {
        this.isLoading(true);
        let page = document.getElementById("calendarblock");
        if (page) {
          //Get Event Props
          let eventsUrl = page.getAttribute("fetch-events-url");
          let eventProps = {
            ImageHeight: page.getAttribute("event-image-height"),
            ImageWidth: page.getAttribute("event-image-width"),
            City: page.getAttribute("event-default-city"),
            LanguageId: page.getAttribute("event-language-id"),
            MonthFilterCount: page.getAttribute("event-month-filter-count"),
            PageSize: page.getAttribute("event-page-size"),
            PreviewLength: page.getAttribute("event-preview-length"),
            CalendarPageId: page.getAttribute("event-calendarpage-id")
          };

          if (eventProps) {
            this.eventRequest.request.Settings = {
              ...this.eventRequest.request.Settings,
              ...eventProps
            };
            await this.fetchEvents(eventsUrl, this.eventRequest);

            this.formatDateAndFilterByDate(this.events);
          }
        }
      }
    },
    async formatDateAndFilterByDate(arr) {
      if (arr) {
        try {
          arr.forEach(element => {
            if (element.CalendarPageId) {
              let momentDate = element.EventStartDate.slice(6, -2);
              let converMomentToDate = new Date(parseInt(momentDate, 10));
              let newMomentDate = moment(converMomentToDate)
                .locale("sv")
                .format("LL");
              element.EventStartDate = newMomentDate;

              let momentDate1 = element.ChangedDate.slice(6, -2);
              let converMomentToDate1 = new Date(parseInt(momentDate1, 10));
              let newMomentDate1 = moment(converMomentToDate1)
                .locale("sv")
                .format("LL");
              element.ChangedDate = newMomentDate1;
              element.date = converMomentToDate1;
              console.log(element);
            }
          });
          let data = arr;
          console.log({ "before sort": data });
          data.sort(
            (a, b) => new Date(a.EventStartDate) - new Date(b.EventStartDate)
          );
          console.log({ "after sort": data });
          this.items = data;
          this.isLoading(false);
        } catch (error) {
          this.isLoading(false);
        }
      }
    },
    async fetchEvents(url, req) {
      try {
        let response = await fetch(url, {
          method: "post",
          headers: {
            Accept: "application/json",
            "Content-Type": "application/json"
          },
          body: JSON.stringify(req)
        });
        let data = await response.json();
        if (data.d) {
          console.log({ "data d": data.d });
          this.events = data.d.Events;
        } else {
          this.events = data.Events;
        }
      } catch (error) {
        this.isLoading(false);
      }
    }
  }
});