article-list.vue

<template>
  <div class="list row">
    <div class="col-md-8">
      <div class="input-group mb-3">
        <input
          type="text"
          class="form-control"
          placeholder="Search by title"
          v-model="title"
        />
        <div class="input-group-append">
          <button
            class="btn btn-outline-secondary"
            type="button"
            @click="searchTitle"
          >
            Search
          </button>
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <h4>Article List</h4>
      <ul class="list-group">
        <li
          class="list-group-item"
          :class="{ active: index == currentIndex }"
          v-for="(article, index) in articles"
          :key="index"
          @click="setActiveArticle(article, index)"
        >
          {{ article.title }}
        </li>
      </ul>

      <button class="m-3 btn btn-sm btn-danger" @click="removeAllArticles">
        Remove All
      </button>
    </div>
    <div class="col-md-6">
      <div v-if="currentArticle.id">
        <h4>Article</h4>
        <div>
          <label><strong>Title:</strong></label> {{ currentArticle.title }}
        </div>
        <div>
          <label><strong>Description:</strong></label>
          {{ currentArticle.description }}
        </div>
        <div>
          <label><strong>Status:</strong></label>
          {{ currentArticle.published ? "Published" : "Pending" }}
        </div>

        <a
          class="badge badge-warning"
          :href="'/articles/' + currentArticle.id"
        >
          Edit
        </a>
      </div>
      <div v-else>
        <br />
        <p>Please click on a Article...</p>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import ArticleService from "@/services/ArticleService";
import Article from "@/types/Article";

@Component
export default class ArticleList extends Vue {
  private articles: Article[] = [];
  private currentArticle: Article = {};
  private currentIndex = -1;
  private title = "";

  retrieveArticles() {
    ArticleService.getAll()
      .then((response) => {
        this.articles = response.data;
      })
      .catch((e) => {
        console.log(e);
      });
  }

  refreshList() {
    this.retrieveArticles();
    this.currentArticle = {};
    this.currentIndex = -1;
  }

  setActiveArticle(article: Article, index: number) {
    this.currentArticle = article;
    this.currentIndex = index;
  }

  removeAllArticles() {
    ArticleService.deleteAll()
      .then((response) => {
        this.refreshList();
      })
      .catch((e) => {
        console.log(e);
      });
  }

  searchTitle() {
    ArticleService.findByTitle(this.title)
      .then((response) => {
        this.articles = response.data;
      })
      .catch((e) => {
        console.log(e);
      });
  }

  mounted() {
    this.retrieveArticles();
  }
}
</script>

<style scoped>
.list {
  text-align: left;
  max-width: 750px;
  margin: auto;
}
</style>