Do api call from within the component itself.

This commit is contained in:
2021-02-18 21:14:34 +01:00
parent 011aec3dea
commit 72c1896747

View File

@@ -5,37 +5,47 @@
<section class="requested-wines-container"> <section class="requested-wines-container">
<p v-if="wines == undefined || wines.length == 0">Ingen har foreslått noe enda!</p> <p v-if="wines == undefined || wines.length == 0">Ingen har foreslått noe enda!</p>
<RequestedWineCard v-for="requestedEl in wines" :key="requestedEl.wine._id" :requestedElement="requestedEl" @wineDeleted="filterOutDeletedWine" :showDeleteButton="isAdmin"/> <RequestedWineCard
v-for="requestedWine in wines"
:key="requestedWine.wine._id"
:requestedElement="requestedWine"
@wineDeleted="filterOutDeletedWine"
:showDeleteButton="isAdmin"
/>
</section> </section>
</main> </main>
</template> </template>
<script> <script>
import { allRequestedWines } from "@/api";
import RequestedWineCard from "@/ui/RequestedWineCard"; import RequestedWineCard from "@/ui/RequestedWineCard";
export default { export default {
components: { components: {
RequestedWineCard RequestedWineCard
}, },
data(){ data() {
return{ return {
wines: undefined, wines: undefined,
canRequest: true,
isAdmin: false isAdmin: false
} };
},
methods: {
filterOutDeletedWine(wine){
this.wines = this.wines.filter(item => item.wine._id !== wine._id)
},
async refreshData(){
[this.wines, this.isAdmin] = await allRequestedWines() || [[], false]
}
}, },
mounted() { mounted() {
this.refreshData() this.fetchRequestedWines();
},
methods: {
filterOutDeletedWine(wine) {
this.wines = this.wines.filter(item => item.wine._id !== wine._id);
},
fetchRequestedWines() {
return fetch("/api/requests")
.then(resp => {
this.isAdmin = resp.headers.get("vinlottis-admin") == "true";
return resp;
})
.then(resp => resp.json())
.then(response => (this.wines = response.wines));
} }
} }
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@@ -56,7 +66,7 @@ h1 {
font-weight: normal; font-weight: normal;
} }
.requested-wines-container{ .requested-wines-container {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-gap: 2rem; grid-gap: 2rem;