Refreshing recipes table after adding recipe

This commit is contained in:
Artur Nowakowski 2020-01-19 18:10:48 +01:00
parent c3fe7cf286
commit 092824bb7b
3 changed files with 13 additions and 6 deletions

View File

@ -155,6 +155,7 @@
.then(() => { .then(() => {
this.$Message.success('Sukces!'); this.$Message.success('Sukces!');
this.active = false; this.active = false;
this.$emit('recipe-added');
this.resetForm(); this.resetForm();
}) })
.catch(() => { .catch(() => {

View File

@ -8,7 +8,7 @@
<h2>Znalezione przepisy: {{ total }}</h2> <h2>Znalezione przepisy: {{ total }}</h2>
</Row> </Row>
<Row style="margin-bottom: 10px;"> <Row style="margin-bottom: 10px;">
<Table border :columns="columns" :data="recipes"></Table> <Table border :columns="columns" :data="recipes" :loading="loading"></Table>
</Row> </Row>
<Row style="margin-bottom: 10px;"> <Row style="margin-bottom: 10px;">
<Page :current.sync="current_page" :total="total" @on-change="getRecipes"/> <Page :current.sync="current_page" :total="total" @on-change="getRecipes"/>
@ -62,7 +62,7 @@
], ],
debounceTimer: 0, debounceTimer: 0,
page: 0, page: 0,
limit: 6, limit: 10,
nextPage: true, nextPage: true,
prevPage: false, prevPage: false,
total: 0, total: 0,
@ -100,12 +100,13 @@
}) })
.then((response) => { .then((response) => {
const data = response.data.data.recipes; const data = response.data.data.recipes;
this.recipes = this.recipes.concat(data.data); this.recipes = data.data;
this.total = data.total; this.total = data.total;
this.nextPage = data.next_page_url != null; this.nextPage = data.next_page_url != null;
this.prevPage = data.prev_page_url != null; this.prevPage = data.prev_page_url != null;
this.last_page = data.data.last_page; this.last_page = data.data.last_page;
this.current_page = data.current_page; this.current_page = data.current_page;
this.loading = false;
}) })
.catch((error) => { .catch((error) => {
console.log(error); console.log(error);
@ -123,4 +124,4 @@
<style scoped> <style scoped>
</style> </style>

View File

@ -1,10 +1,10 @@
<template> <template>
<div style="width: 100%"> <div style="width: 100%">
<Row type="flex" justify="center"> <Row type="flex" justify="center">
<AddRecipeModal style="margin-bottom: 20px"/> <AddRecipeModal style="margin-bottom: 20px" @recipe-added="refreshRecipeTable"/>
</Row> </Row>
<Row type="flex" justify="center"> <Row type="flex" justify="center">
<SearchRecipe style="width: 80%"/> <SearchRecipe ref="recipes" style="width: 80%"/>
</Row> </Row>
</div> </div>
</template> </template>
@ -19,6 +19,11 @@
components: { components: {
AddRecipeModal, AddRecipeModal,
SearchRecipe SearchRecipe
},
methods: {
refreshRecipeTable(){
this.$refs.recipes.getRecipes();
}
} }
}; };
</script> </script>