Do api call from within the component itself.
This commit is contained in:
		| @@ -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; | ||||||
|   | |||||||
		Reference in New Issue
	
	Block a user