some playing around
This commit is contained in:
parent
fd028047d6
commit
b454960676
@ -3,6 +3,50 @@
|
|||||||
<div id="app">
|
<div id="app">
|
||||||
<div>
|
<div>
|
||||||
|
|
||||||
|
<b-row>
|
||||||
|
<b-col>
|
||||||
|
<b-input v-model="query" @change="refreshData"></b-input>
|
||||||
|
</b-col>
|
||||||
|
</b-row>
|
||||||
|
|
||||||
|
<b-row class="mt-5">
|
||||||
|
<b-col>
|
||||||
|
<ul>
|
||||||
|
|
||||||
|
<b-media tag="li" v-for="d in data" v-bind:key="d.id">
|
||||||
|
<template #aside>
|
||||||
|
<b-img-lazy thumbnail width="64" alt="placeholder" :src="d.image"></b-img-lazy>
|
||||||
|
</template>
|
||||||
|
<h5 class="mt-0 mb-1">{{ d.name }}</h5>
|
||||||
|
<p class="mb-0">
|
||||||
|
Cras sit amet nibh libero, in gravida nulla.
|
||||||
|
</p>
|
||||||
|
<p class="float-right">
|
||||||
|
<b-button class="ml-1">1</b-button>
|
||||||
|
<b-button class="ml-1">1</b-button>
|
||||||
|
<b-button class="ml-1">1</b-button>
|
||||||
|
</p>
|
||||||
|
</b-media>
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
|
||||||
|
</b-col>
|
||||||
|
</b-row>
|
||||||
|
|
||||||
|
<b-row>
|
||||||
|
<b-col class="text-center align-items-center">
|
||||||
|
<b-pagination
|
||||||
|
v-model="current_page"
|
||||||
|
:total-rows="items_total"
|
||||||
|
:per-page="items_per_page"
|
||||||
|
aria-controls="data_table"
|
||||||
|
align="center"
|
||||||
|
@change="refreshData"
|
||||||
|
></b-pagination>
|
||||||
|
</b-col>
|
||||||
|
</b-row>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -19,6 +63,7 @@ import BetaWarning from "@/components/BetaWarning.vue";
|
|||||||
import {ApiApiFactory} from "@/utils/openapi/api";
|
import {ApiApiFactory} from "@/utils/openapi/api";
|
||||||
import GenericMultiselect from "@/components/GenericMultiselect.vue";
|
import GenericMultiselect from "@/components/GenericMultiselect.vue";
|
||||||
import GenericModalForm from "@/components/Modals/GenericModalForm.vue";
|
import GenericModalForm from "@/components/Modals/GenericModalForm.vue";
|
||||||
|
import {Models} from "@/utils/models";
|
||||||
|
|
||||||
|
|
||||||
Vue.use(BootstrapVue)
|
Vue.use(BootstrapVue)
|
||||||
@ -30,13 +75,33 @@ export default {
|
|||||||
components: {},
|
components: {},
|
||||||
computed: {},
|
computed: {},
|
||||||
data() {
|
data() {
|
||||||
return {}
|
return {
|
||||||
|
active_model: Models.FOOD,
|
||||||
|
|
||||||
|
data: [],
|
||||||
|
query: "",
|
||||||
|
|
||||||
|
items_per_page: 25,
|
||||||
|
items_total: 0,
|
||||||
|
current_page: 1,
|
||||||
|
|
||||||
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.$i18n.locale = window.CUSTOM_LOCALE
|
this.$i18n.locale = window.CUSTOM_LOCALE
|
||||||
|
|
||||||
|
this.refreshData()
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
refreshData: function () {
|
||||||
|
let apiClient = new ApiApiFactory()
|
||||||
|
apiClient.listFoods(this.query, 0, 0, this.current_page, this.items_per_page, {query: {extended: 1}}).then(result => {
|
||||||
|
this.items_total = result.data.count
|
||||||
|
this.data = result.data.results
|
||||||
|
}).catch((err) => {
|
||||||
|
StandardToasts.makeStandardToast(this, StandardToasts.FAIL_FETCH, err)
|
||||||
|
})
|
||||||
|
}
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
Loading…
Reference in New Issue
Block a user