parsley/app/javascript/components/TheRecipeList.vue

<template>
  <div>
    <h1 class="title">Recipes</h1>

    <router-link v-if="isLoggedIn" :to="{name: 'new_recipe'}" class="button is-primary">Create Recipe</router-link>

    <app-pager :current-page="currentPage" :total-pages="totalPages" paged-item-name="recipe" @changePage="changePage"></app-pager>

    <app-loading v-if="localLoading"></app-loading>




    <table class="table is-fullwidth" :class="{ small: mediaQueries.touch }">
      <thead>
      <tr>
        <th v-for="h in tableHeader" :key="h.name">
          <a v-if="h.sort" href="#" @click.prevent="setSort(h.name)">
            {{h.label}}
            <app-icon v-if="search.sortColumn === h.name" size="sm" :icon="search.sortDirection === 'asc' ? 'caret-bottom' : 'caret-top'"></app-icon>
          </a>
          <span v-else>{{h.label}}</span>
        </th>
        <th></th>
      </tr>
      <tr>
        <td>
          <div class="field">
            <div class="control">
              <input type="text" class="input" placeholder="search names" v-model="search.name">
            </div>
          </div>
        </td>
        <td>
          <div class="field">
            <div class="control">
              <input type="text" class="input" placeholder="search tags" v-model="search.tags">
            </div>
          </div>
        </td>
        <td colspan="5"></td>
      </tr>
      </thead>
      <transition-group name="fade" tag="tbody">
      <tr v-for="r in recipes" :key="r.id">
        <td><router-link :to="{name: 'recipe', params: { id: r.id } }">{{r.name}}</router-link></td>
        <td>
          <div class="tags">
            <span class="tag" v-for="tag in r.tags" :key="tag">{{tag}}</span>
          </div>
        </td>
        <td>
          <app-rating v-if="r.rating !== null" :value="r.rating" readonly></app-rating>
          <span v-else>--</span>
        </td>
        <td>{{ r.yields }}</td>
        <td class="recipe-time">{{ formatRecipeTime(r.total_time, r.active_time) }}</td>
        <td><app-date-time :date-time="r.created_at" :show-time="false"></app-date-time></td>
        <td>
          <app-dropdown hover v-if="isLoggedIn" class="is-right">
            <button slot="button" class="button">
              <app-icon icon="menu"></app-icon>
            </button>

            <div class="dropdown-item">
              <router-link :to="{name: 'new_log', params: { recipeId: r.id } }" class="button is-primary is-fullwidth">
                <app-icon icon="star" size="md"></app-icon> <span>Add Log Entry</span>
              </router-link>
            </div>

            <div class="dropdown-item">
              <router-link :to="{name: 'edit_recipe', params: { id: r.id } }" class="button is-primary is-fullwidth">
                <app-icon icon="pencil" size="md"></app-icon> <span>Edit Recipe</span>
              </router-link>
            </div>

            <div class="dropdown-item">
              <button type="button" class="button is-danger is-fullwidth" @click="deleteRecipe(r)">
                <app-icon icon="x" size="md"></app-icon> <span>Delete Recipe</span>
              </button>
            </div>

          </app-dropdown>
        </td>
      </tr>
      </transition-group>
    </table>

    <app-pager :current-page="currentPage" :total-pages="totalPages" paged-item-name="recipe" @changePage="changePage"></app-pager>
    <app-confirm :open="showConfirmRecipeDelete" :message="confirmRecipeDeleteMessage" :cancel="recipeDeleteCancel" :confirm="recipeDeleteConfirm"></app-confirm>

  </div>
</template>

<script>

  import api from "../lib/Api";
  import debounce from "lodash/debounce";
  import { mapMutations, mapState } from "vuex";
  import AppLoading from "./AppLoading";

  export default {
    data() {
      return {
        recipeData: null,
        recipeForDeletion: null,
        search: {
          sortColumn: 'created_at',
          sortDirection: 'desc',
          page: 1,
          per: 25,
          name: null,
          tags: null
        }
      };
    },

    computed: {
      ...mapState([
        "mediaQueries"
      ]),
      recipes() {
        if (this.recipeData) {
          return this.recipeData.recipes;
        } else {
          return [];
        }
      },

      tableHeader() {
        return [
          {name: 'name', label: 'Name', sort: true},
          {name: 'tags', label: 'Tags', sort: false},
          {name: 'rating', label: 'Rating', sort: true},
          {name: 'yields', label: 'Yields', sort: false},
          {name: 'total_time', label: 'Time', sort: true},
          {name: 'created_at', label: 'Created', sort: true}
        ]
      },

      totalPages() {
        if (this.recipeData) {
          return this.recipeData.total_pages;
        }
        return 0;
      },

      currentPage() {
        if (this.recipeData) {
          return this.recipeData.current_page;
        }
        return 0;
      },

      showConfirmRecipeDelete() {
        return this.recipeForDeletion !== null;
      },

      confirmRecipeDeleteMessage() {
        if (this.showConfirmRecipeDelete) {
          return `Are you sure you want to delete ${this.recipeForDeletion.name}?`;
        } else {
          return "??";
        }
      }
    },

    methods: {
      ...mapMutations([
        "setInitialLoad"
      ]),

      changePage(idx) {
        this.search.page = idx;
      },

      setSort(col) {
        if (this.search.sortColumn === col) {
          this.search.sortDirection = this.search.sortDirection === "desc" ? "asc" : "desc";
        } else {
          this.search.sortColumn = col;
          this.search.sortDirection = "asc";
        }
      },

      deleteRecipe(recipe) {
        this.recipeForDeletion = recipe;
      },

      recipeDeleteConfirm() {
        if (this.recipeForDeletion !== null) {
          this.loadResource(
            api.deleteRecipe(this.recipeForDeletion.id).then(() => {
              this.recipeForDeletion = null;
              return this.getList();
            })
          );
        }
      },

      recipeDeleteCancel() {
        this.recipeForDeletion = null;
      },

      getList: debounce(function() {
        return this.loadResource(
          api.getRecipeList(this.search.page, this.search.per, this.search.sortColumn, this.search.sortDirection, this.search.name, this.search.tags, data => this.recipeData = data)
        );
      }, 500, {leading: true, trailing: true}),

      formatRecipeTime(total, active) {
        let str = "";

        if (total && total > 0) {
          str += total;
        }

        if (active && active > 0) {
          if (str.length) {
            str += " (" + active + ")";
          } else {
            str += active;
          }
        }

        return str;
      }
    },

    created() {
      this.$watch("search",
        () => this.getList().then(() => this.setInitialLoad(true)),
        {
          deep: true,
          immediate: true
        }
      );
    },

    components: {
      AppLoading
    }
  }

</script>

<style lang="scss" scoped>
  .recipe-time {
    white-space: nowrap;
  }

  .table th {
    white-space: nowrap;
  }

  .table.small {
    td, th {
      &:nth-of-type(3), &:nth-of-type(4), &:nth-of-type(5), &:nth-of-type(6) {
        display: none;
      }
    }
  }

</style>