135 lines
3.6 KiB
Vue
135 lines
3.6 KiB
Vue
<template>
|
|
<div>
|
|
<h1 class="title">Recipes</h1>
|
|
|
|
<router-link :to="{name: 'new_recipe'}" class="button is-primary">Create Recipe</router-link>
|
|
|
|
<table class="table">
|
|
<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 === 'desc' ? '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>
|
|
<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>{{r.rating}}</td>
|
|
<td>{{r.yields}}</td>
|
|
<td>{{r.total_time}} ({{r.active_time}})</td>
|
|
<td>{{r.created_at}}</td>
|
|
<td>
|
|
<router-link :to="{name: 'edit_recipe', params: { id: r.id } }" class="button">Edit</router-link>
|
|
<button type="button" class="button">Delete</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import api from "../lib/Api";
|
|
import debounce from "lodash/debounce";
|
|
import AppIcon from "./AppIcon";
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
recipeData: null,
|
|
search: {
|
|
sortColumn: 'name',
|
|
sortDirection: 'desc',
|
|
page: 1,
|
|
per: 25,
|
|
name: null,
|
|
tags: null
|
|
}
|
|
};
|
|
},
|
|
|
|
computed: {
|
|
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}
|
|
]
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
setSort(col) {
|
|
if (this.search.sortColumn === col) {
|
|
this.search.sortDirection = this.search.sortDirection === "desc" ? "asc" : "desc";
|
|
} else {
|
|
this.search.sortColumn = col;
|
|
this.search.sortDirection = "desc";
|
|
}
|
|
},
|
|
|
|
getList: debounce(function() {
|
|
this.loadResource(
|
|
api.getRecipeList(this.search.page, this.search.per, this.search.sortColumn, this.search.sortDirection, this.search.name, this.search.tags)
|
|
.then(data => this.recipeData = data)
|
|
);
|
|
}, 500, {leading: true, trailing: true})
|
|
},
|
|
|
|
created() {
|
|
this.$watch("search",
|
|
() => this.getList(),
|
|
{
|
|
deep: true,
|
|
immediate: true
|
|
}
|
|
);
|
|
},
|
|
|
|
components: {
|
|
AppIcon
|
|
}
|
|
}
|
|
|
|
</script> |