UnivateProperties/src/components/admin/misc/carouselList.vue

<template>
  <!-- eslint-disable max-len -->
  <div>
    <div class="container">
      <div class="container">
        <div class="row">
          <div class="col-md-12 col-lg-8">
            <div class="title-box-d">
              <br />
              <h1 class="title-d" style="text-align:left; font-size: 250%">Carousel Items</h1>
            </div>
            <br />
          </div>
        </div>
      </div>
    </div>
    <div class="container">
      <button type="button" @click="New()" class="btn btn-b-n" style="width: 85px; height:40px;">New</button>
    </div>
    <div class="container">
      <table class="table table-bordered">
        <thead>
          <tr>
            <th>Image</th>
            <th>Header</th>
            <th>Type</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, i) in carouselList" :key="i">
            <td>
              <img :src="item.image" style="height:100px; width:100px; object-fit: cover;" />
            </td>
            <td>{{ item.header }}</td>
            <td v-if="item.propertyId">Property</td>
            <td v-else>Timeshare Week</td>
            <td>
              <button
                type="button"
                @click="Delete(item.id)"
                class="btn"
                style="margin:2px; color: #60CBEB"
              >Delete</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <br />
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';

export default {
  name: 'CarouselList',
  data() {
    return {};
  },
  methods: {
    ...mapActions('carousel', ['getCarouselList', 'deleteCarousel']),
    New() {
      this.$router.push('/carousel/details/0');
    },
    Edit(itemID) {
      this.$router.push({
        path: `/carousel/details/${itemID}`,
      });
    },
    Delete(id) {
      this.deleteCarousel(id);
    },
  },
  mounted() {
    this.getCarouselList();
  },
  computed: {
    ...mapState('carousel', ['carouselList']),
  },
};
</script>