Skip to content

Commit 8ac42a8

Browse files
StubyProjectsStubyProjects
committed
componentified listing creation
1 parent 7b9947d commit 8ac42a8

File tree

7 files changed

+148
-51
lines changed

7 files changed

+148
-51
lines changed

‎components/TheHeader.vue

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
<template>
22
<header>
33
<nav :class="{'scrolled': !view.atTopOfPage}">
4+
45
<div class="items-center justify-between bg-white hidden px-5 md:flex md:pt-3 lg:py-5">
56
<div class="flex-none pr-2">
67
<span class="font-bold text-xl text-anthrazit px-4">Unicircle</span>
78
</div>
8-
<div class="hidden lg:flex w-6/12 justify-between">
9+
<div v-if="$route.path !== '/catalog/newlisting'" class="hidden lg:flex w-6/12 justify-between">
910

10-
<div class="flex justify-end w-2/6 text-anthrazit font-bold">
11+
<div class="flex justify-end w-2/6 text-anthrazit font-bold">
1112
<a href="#" class="rounded-full block hover:text-white hover:bg-primary px-4 py-2 mr-2">
1213
Katalog
1314
</a>
@@ -53,8 +54,7 @@
5354
</div>
5455
</div>
5556

56-
<div class="bg-white px-5 sm:flex py-5 md:py-3 lg:py-5 lg:hidden">
57-
57+
<div v-if="$route.path !== '/catalog/newlisting'" class="bg-white px-5 sm:flex py-5 md:py-3 lg:py-5 lg:hidden">
5858
<div class="hidden sm:inline-block text-anthrazit font-bold sm:w-1/6">
5959
<a href="#" class="rounded-full block hover:text-white hover:bg-primary px-4 py-2 mr-2">
6060
Katalog
@@ -78,6 +78,7 @@
7878
</button>
7979
</div>
8080
</div>
81+
8182
</nav>
8283
</header>
8384
</template>

‎components/catalog/NewListing/CreateListing.vue

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<template>
2+
<div class="mt-5 w-1/2">
3+
<div class="flex">
4+
5+
<label for="title">Titel
6+
<input id="title" v-model="title" class="mt-2 mr-10 rounded shadow h-10 pl-4 pr-8 pb-1 focus:outline-none"
7+
type="text" name="title" placeholder="Titel">
8+
</label>
9+
10+
<label class="block" for="author">Autor
11+
<input id="author" v-model="author" class="mt-2 rounded shadow h-10 pl-4 pr-8 pb-1 focus:outline-none"
12+
type="text" name="author" placeholder="Autor">
13+
</label>
14+
</div>
15+
16+
<!--pre>{{getSelectedProduct}}</pre-->
17+
</div>
18+
</template>
19+
20+
<script>
21+
import { mapGetters } from "vuex"
22+
23+
export default {
24+
data() {
25+
return {
26+
title: "",
27+
author: ""
28+
}
29+
},
30+
computed: {
31+
...mapGetters('listing',["getSelectedProduct"])
32+
}
33+
}
34+
</script>
35+
36+
<style scoped>
37+
38+
</style>

‎components/catalog/NewListing/SearchBook.vue

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
<template>
2+
<div>
3+
<h1 class="text-2xl text-anthrazit">Buch verkaufen</h1>
4+
<h1 class="font-bold text-xl text-primary">Schritt 1</h1>
5+
6+
<div class="mt-5">
7+
8+
<label for="searchbook" class="block">Suche dein Buch</label>
9+
<input id="searchbook" v-model="searchTerm" @keyup="searchBook()" class="w-full mt-4 rounded shadow h-10 pl-4 pr-8 pb-1 focus:outline-none"
10+
type="search" name="name" placeholder="ISBN, Titel, Autor">
11+
12+
<div v-if="searchTerm.length > 0" class="p-5 shadow w-full">
13+
14+
<div @click="selectBook(result)" v-for="result in getSearchResults" :key="result.id" class="flex mb-3 cursor-pointer hover:text-primary">
15+
<img class="h-22 w-16 border rounded" v-if="result.volumeInfo.imageLinks" :src="result.volumeInfo.imageLinks.smallThumbnail" alt="book-cover">
16+
17+
<div class="ml-4">
18+
19+
<h3 class="font-bold text-lg">{{result.volumeInfo.title}}</h3>
20+
<h4>{{result.volumeInfo.subtitle}}</h4>
21+
22+
<div class="flex text-xs">
23+
<span class="mr-5" v-for="author in result.volumeInfo.authors">
24+
{{author}},
25+
</span>
26+
27+
<span class="mr-5" v-for="identifier in result.volumeInfo.industryIdentifiers">
28+
{{identifier.type}}: {{identifier.identifier}}
29+
</span>
30+
</div>
31+
32+
<div class="flex text-xs">
33+
<span>
34+
Verlag: {{result.volumeInfo.publisher}}
35+
</span>
36+
</div>
37+
38+
</div>
39+
</div>
40+
</div>
41+
</div>
42+
</div>
43+
</template>
44+
45+
<script>
46+
import { mapActions, mapGetters, mapState, mapMutations } from 'vuex'
47+
48+
export default {
49+
data() {
50+
return {
51+
searchTerm: ""
52+
}
53+
},
54+
computed: {
55+
...mapGetters("listing",["getSearchResults"]),
56+
...mapState("listing",["finishedLoading"])
57+
},
58+
methods: {
59+
...mapMutations("listing", ["SELECT_PRODUCT"]),
60+
...mapActions('listing',['search']),
61+
searchBook() {
62+
if (this.timer) {
63+
clearTimeout(this.timer);
64+
this.timer = null;
65+
}
66+
this.timer = setTimeout(() => {
67+
this.search(this.searchTerm)
68+
}, 600);
69+
},
70+
selectBook(result) {
71+
this.searchTerm = "";
72+
this.SELECT_PRODUCT(result)
73+
}
74+
}
75+
}
76+
</script>
77+
78+
<style scoped>
79+
80+
</style>

‎pages/catalog/newListing/index.vue

Lines changed: 14 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,24 @@
11
<template>
2-
<div class="container mx-auto">
3-
<h1 class="text-2xl text-anthrazit">Buch verkaufen</h1>
4-
<h1 class="font-bold text-xl text-primary">Schritt 1</h1>
5-
6-
<div class="mt-5">
7-
<label for="searchbook" class="block">Suche dein Buch</label>
8-
<input id="searchbook" v-model="searchTerm" @keyup="searchBook()" class="w-1/2 mt-4 rounded shadow h-10 pl-4 pr-8 pb-1 focus:outline-none"
9-
type="search" name="name" placeholder="ISBN, Titel, Autor">
10-
<div class="mt-5">
11-
<div v-for="result in getSearchResults" :key="result.id" class="flex mt-3">
12-
<!--img v-if="getResultsLoaded" class="h-20 w-14" :src="result.volumeInfo.imageLinks.smallThumbnail" alt="book-cover"-->
13-
{{result}}
14-
</div>
15-
</div>
16-
</div>
17-
2+
<div class="max-w-4xl mx-auto">
3+
<app-search-book></app-search-book>
4+
<app-create-listing></app-create-listing>
185
</div>
196
</template>
207

218
<script>
22-
import { mapActions, mapGetters } from 'vuex'
9+
import SearchBook from "@/components/catalog/NewListing/SearchBook";
10+
import CreateListing from "@/components/catalog/NewListing/CreateListing";
11+
import { mapGetters } from "vuex"
2312
24-
export default {
25-
data() {
26-
return {
27-
searchTerm: ""
28-
}
29-
},
30-
computed: {
31-
...mapGetters("listing",["getSearchResults"])
32-
},
33-
methods: {
34-
...mapActions('listing',['search']),
35-
searchBook() {
36-
if(this.searchTerm.length > 0) {
37-
if (this.timer) {
38-
clearTimeout(this.timer);
39-
this.timer = null;
40-
}
41-
this.timer = setTimeout(() => {
42-
this.search(this.searchTerm)
43-
}, 600);
44-
}
45-
}
46-
}
13+
export default {
14+
components: {
15+
appSearchBook: SearchBook,
16+
appCreateListing: CreateListing
17+
},
18+
computed: {
19+
...mapGetters('listing',["getSelectedProduct"])
4720
}
21+
}
4822
</script>
4923

5024
<style scoped>

‎pages/index.vue

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
<template>
22
<div>
33

4-
{{getProducts}}
5-
64
<div class="mt-12">
75
<h1 class="m-4">Produkt erstellen</h1>
86

‎store/catalog.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ export const getters = {
66
getProducts: state => {
77
return state.products
88
}
9-
109
}
1110

1211
export const mutations = {

‎store/listing.js

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,30 @@
11
export const state = () => ({
2-
searchResults: []
2+
searchResults: [],
3+
selectedProduct: {}
34
})
45

56
export const getters = {
67
getSearchResults: state => {
78
return state.searchResults
9+
},
10+
getSelectedProduct: state => {
11+
return state.selectedProduct
812
}
913
}
1014

1115
export const mutations = {
1216
SET_SEARCH_RESULTS(state, results) {
1317
state.searchResults = results
1418
},
19+
SELECT_PRODUCT(state, product) {
20+
state.selectedProduct = product;
21+
}
1522
}
1623

1724
export const actions = {
1825
async search({commit,state}, term) {
19-
20-
let response = await this.$axios.get(`/products/search/${term}`)
21-
commit('SET_SEARCH_RESULTS', response.data.items);
26+
this.$axios.get(`/products/search/${term}`).then( (response) => {
27+
commit('SET_SEARCH_RESULTS', response.data.items);
28+
})
2229
}
2330
}

0 commit comments

Comments
 (0)