list card

<template>
  <div>
    <div v-if="courses.length > 0">
      <div class="list-cards-header">
        <div class="row">
          <div class="col-6">
            <h3 class="align-middle">{{ title }}</h3>
          </div>
          <div class="col-6 text-right type-view">
            <div class="d-flex flex-column bd-highlight mb-3">
              <div
                class="bd-highlight pull-right"
                v-show="cardType === 'card'"
              >
                <button
                  class="btn-transparent"
                  style="outline:none;"
                  @click="learnMore"
                  v-show="course.data.length > 0 && showAll && course.total > course.to"
                >
                  <span class="learn-more">Lihat Semua</span>
                  <i class="fas fa-chevron-right"></i>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <shimmer
      :list-type="cardType"
      :is-loading="isLoading"
      :total-per-slide="totalPerSlide"
    />

    <swiper
      :options="swiperOption"
      ref="mySwiper"
      v-if="cardType === 'card'"
    >
      <div
        v-show="!isLoading && course.data.length === 0"
      >
        <span>
          <div class="card-no-data align-items-center
            justify-content-center d-flex bd-highlight">
            <div class="p-2 flex-fill bd-highlight">
              <span><i class="fas fa-info-circle mb-3" style="font-size:38px;"></i></span>
              <div>
                <b>Belum ada <i>Learning Video</i> maupun <i>In-class Program</i> pada kategori ini</b>
              </div>
            </div>
          </div>
        </span>
      </div>
      <swiper-slide
        v-for="item in courses"
        :key="item.key"
      >
        <div
          :class="listView"
          v-show="!isLoading"
        >
          <card
            :id="item.id"
            :img-cover="getUrlThumbnail(item.type, item)"
            :vid-preview="item.attachment ? item.attachment.url.preview : '' "
            :category="item.category"
            :title="item.title"
            :author="item.author"
            :lastUpdate="formatDate(item.updated_at)"
            :rating="item.rating"
            :total="item.total_participant"
            :style-view="cardView"
            :viewer="item.viewer"
            :type="item.type"
            :startDate="item.start_date"
            :endDate="item.end_date"
            :available="item.quota - item.total_participant"
            :total-participant="item.total_participant"
            :duration="(item.attachment) ? item.attachment.duration : 0"
            :urlTo="(getLink(item.type, item))"
          />
        </div>
      </swiper-slide>
      <div
        class="swiper-button-prev"
        slot="button-prev"
        @click="prev"
      ></div>
      <div
        class="swiper-button-next"
        slot="button-next"
        @click="next"
      ></div>
    </swiper>
    <div
      v-else
      :class="listView"
      v-show="!isLoading"
    >
      <span v-show="course.data.length === 0">
        <div class="card-no-data align-items-center
          justify-content-center d-flex bd-highlight">
          <div class="p-2 flex-fill bd-highlight">
            <span><i class="fas fa-info-circle mb-3" style="font-size:38px;"></i></span>
            <div>
              <b>Belum ada <i>Learning Video</i> maupun <i>In-class Program</i> pada kategori ini</b>
            </div>
          </div>
        </div>
      </span>
      <card
        v-for="item in courses"
        :id="item.id"
        :img-cover="getUrlThumbnail(item.type, item)"
        :vid-preview="item.attachment ? item.attachment.url.preview : '' "
        :key="item.key"
        :category="item.category"
        :title="item.title"
        :author="item.author"
        :lastUpdate="formatDate(item.updated_at)"
        :rating="item.rating"
        :total="item.total_participant"
        :style-view="cardView"
        :viewer="item.viewer"
        :type="item.type"
        :startDate="item.start_date"
        :endDate="item.end_date"
        :available="item.quota - item.total_participant"
        :total-participant="item.total_participant"
        :duration="(item.attachment) ? item.attachment.duration : 0"
        :urlTo="(getLink(item.type, item))"
      />
    </div>
    <div class="" v-if="isLogin() && cardView === 'list' && course !== null">
      <pagination :data="course" :limit=2 @pagination-change-page="fetchData" />
    </div>
  </div>
</template>
<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper';
import store from 'store';
import Pagination from 'laravel-vue-pagination';
import Card from '../Card/Card.vue';
import ApiContent from '../../../services/api/content';
import ApiUser from '../../../services/api/user';
import Shimmer from '../Atomic/ShimmerCard/ShimmerCard.vue';

// eslint-disable-next-line
import 'swiper/dist/css/swiper.css';

export default {
  name: 'ListCards',
  components: {
    Card,
    Shimmer,
    Pagination,
    swiper,
    swiperSlide
  },
  props: {
    title: { type: String, default: '' },
    sizeOfCard: { required: true },
    type: { type: String },
    cardType: { type: String, default: 'card' },
    listType: { type: String, default: 'grid-view' },
    totalPerSlide: { type: Number, default: 3 },
    typeListCard: { type: String, default: 'all' },
    showAll: { type: Boolean, default: true },
    firstLoad: { type: Boolean, default: false }
  },
  data() {
    return {
      firstLoadData: this.firstLoad,
      pageNumber: 1,
      course: null,
      cardView: this.cardType,
      listView: this.listType,
      showViewMore: false,
      isLoading: true,
      swiperOption: {
        slidesPerView: this.totalPerSlide,
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        },
        observer: true,
        observeParents: true
      }
    };
  },
  mounted() {
    if (this.course === null) {
      this.fetchData();
      this.firstLoadData = false;
    }
  },

  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper;
    },
    courses() {
      if (this.course !== null) {
        if (this.type === 'myStudy') {
          const temp = [];
          if (this.course.data.length > 0) {
            this.course.data.forEach((item) => {
              temp.push(item.content);
            });
          }
          return temp;
        }
        return this.course.data;
      }
      return [];
    }
  },

  methods: {
    formatDate(date) {
      if (date == null) return '';
      const splitDate = date.split(' ');
      return splitDate[0];
    },

    async fetch(page = 1, callback) {
      switch (this.type) {
        case 'popular':
          await ApiContent.popular(page, this.sizeOfCard, this.typeListCard)
            .then(callback)
            .catch(() => { this.isLoading = false; });
          break;
        case 'newest':
          await ApiContent.latest(page, this.sizeOfCard, this.typeListCard)
            .then(callback)
            .catch(() => { this.isLoading = false; });
          break;
        case 'bestRated':
          await ApiContent.bestRated(page, this.sizeOfCard, this.typeListCard)
            .then(callback)
            .catch(() => { this.isLoading = false; });
          break;
        case 'myStudy':
          await ApiUser.myStudy(page, this.sizeOfCard, this.typeListCard)
            .then(callback)
            .catch(() => { this.isLoading = false; });
          break;
        default:
          break;
      }
    },

    fetchData(page = 1) {
      this.isLoading = true;
      this.fetch(page, (response) => {
        this.course = response;
        setTimeout(() => {
          this.isLoading = false;
        }, 1000);
      });
    },

    next() {
      this.pageNumber += 1;
    },

    prev() {
      if (this.pageNumber > 1) {
        this.pageNumber -= 1;
      } else {
        this.pageNumber = 1;
      }
    },

    sizeOf(param) {
      this.size = param;
    },

    styleCard(param) {
      this.cardView = param.cardView;
      this.listView = param.listView;
    },
    getUrlThumbnail(param, data) {
      if (param === '1') {
        try {
          return data.attachment.url.thumbnail;
        } catch {
          return 'https://cdn5.f-cdn.com/contestentries/1122631/9339617/59ac19e21539b_thumb900.jpg';
        }
      } else if (param === '2') {
        try {
          return data.attachment.url.original;
        } catch {
          return 'https://cdn5.f-cdn.com/contestentries/1122631/9339617/59ac19e21539b_thumb900.jpg';
        }
      }
      return 'https://cdn5.f-cdn.com/contestentries/1122631/9339617/59ac19e21539b_thumb900.jpg';
    },
    learnMore() {
      if (!this.isLogin()) {
        this.$bvModal.show('login');
        this.pageNumber -= 1;
      } else if (this.type === 'popular') this.$router.push({ name: 'Course-List-Popular' });
      else if (this.type === 'myStudy') this.$router.push({ name: 'Course-List-Study' });
      else if (this.type === 'newest') this.$router.push({ name: 'Course-List-Latest' });
      else this.$router.push({ name: 'Course-List-Best-Rated' });
    },
    isLogin() {
      if (store.get('jwt-token') === '' || typeof store.get('jwt-token') === 'undefined') {
        return false;
      }
      return true;
    },
    getLink(param, item) {
      if (this.isLogin()) {
        if (param === '1') {
          return `/detail_list_video/${item.id}`;
        }
        return `/detail_list_offline_course/${item.id}`;
      }

      return '';
    }
  }
};
</script>

<style lang="scss" scoped>
@import 'style.scss';

.btn-transparent {
  background: transparent;
  padding: 5px;
  border: none;
  margin-left: 10px;
  color: #808080;
}

#view-more:hover {
  color: #ffffff;
  background-color: #1d6499;
  border: 2px solid #ffffff;
}

#view-more {
  visibility: visible;
  opacity: 1;
  transition: visibility 0s linear 0.33s, opacity 10s linear;
  // transition: 0.3s;
  transition-delay: 0s;
  display: inline-block;
  width: 250px;
  margin: 0 14px;
  height: 313px;
  line-height: 313px;
  border: 2px solid #ffffff;
  text-align: center;
  border-radius: 8px;
  color: #1d6499;
  background-color: #ffffff;
  overflow: hidden;
  margin-top: -40px;
  box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.3);
  cursor: pointer;

}
</style>