Skip to content

Commit 6a51fa9

Browse files
indpurveshindpurvesh
committed
wip
1 parent 471cebb commit 6a51fa9

File tree

6 files changed

+179
-47
lines changed

6 files changed

+179
-47
lines changed

‎vue-frontend/src/components/Pagination.vue

+70
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
<template>
2+
<div class="text-gray-500">
3+
{{ t('pagination_result_text', {from: from, to: to, total: total}) }}
4+
</div>
5+
<div class="ml-auto">
6+
<button
7+
type="button"
8+
:disabled="(currentPage === 1)"
9+
:class="!(currentPage === 1) ? 'hover:bg-gray-300' : 'hover:bg-gray-100 opacity-50'"
10+
@click.prevent="$emit('previous')"
11+
class="px-2 py-3 border border-gray-400 text-gray-600 bg-gray-100 rounded-md">
12+
{{ t('previous') }}
13+
</button>
14+
<button
15+
type="button"
16+
:disabled="!hasMorePages"
17+
:class="hasMorePages ? 'hover:bg-gray-300' : 'hover:bg-gray-100 opacity-50'"
18+
@click.prevent="$emit('next')"
19+
class="px-2 py-3 border border-gray-400 text-gray-600 bg-gray-100 rounded-md ml-5"
20+
>
21+
{{ t('next') }}
22+
</button>
23+
</div>
24+
</template>
25+
26+
<script lang="ts">
27+
import { defineComponent } from "vue"
28+
import { useI18n } from "vue-i18n"
29+
30+
export default defineComponent({
31+
props: {
32+
total: {
33+
type: [Number],
34+
required: true,
35+
},
36+
perPage: {
37+
type: [Number],
38+
required: true,
39+
},
40+
currentPage: {
41+
type: [Number],
42+
required: true,
43+
},
44+
from: {
45+
type: [Number],
46+
required: true,
47+
},
48+
to: {
49+
type: [Number],
50+
required: true,
51+
},
52+
lastPage: {
53+
type: [Number],
54+
required: true,
55+
},
56+
hasMorePages: {
57+
type: [Boolean],
58+
required: true,
59+
},
60+
61+
},
62+
setup() {
63+
const { t } = useI18n()
64+
65+
return {
66+
t
67+
}
68+
}
69+
})
70+
</script>

‎vue-frontend/src/components/catalog/AddToCart.vue

+71
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
<template>
2+
<a
3+
@click.prevent="addToCartOnClick"
4+
class="
5+
bg-gray-700
6+
inline-block
7+
px-3
8+
py-3
9+
hover:bg-red-500
10+
transition
11+
duration-300
12+
ease-in-out
13+
"
14+
>
15+
<VueFeather type="shopping-cart" class="transition duration-300 ease-in-out flex justify-center items-center text-gray-100">
16+
Test
17+
</VueFeather>
18+
</a>
19+
</template>
20+
21+
<script lang="ts">
22+
import AddToCartMutation from "@/graphql/AddToCartMutation"
23+
import { defineComponent } from "vue"
24+
import VueFeather from "vue-feather"
25+
import { CART_TOKEN } from "@/constants"
26+
import { useMutation } from "@vue/apollo-composable"
27+
import { get } from "lodash"
28+
29+
30+
type CartVariables = {
31+
slug: string,
32+
qty: number,
33+
visitor_id: string | null
34+
}
35+
36+
export default defineComponent({
37+
components: {
38+
VueFeather,
39+
},
40+
props: {
41+
slug: {
42+
type: [String],
43+
required: true,
44+
},
45+
},
46+
setup(props) {
47+
const { mutate: addToCart } = useMutation(AddToCartMutation)
48+
49+
const addToCartOnClick = async () => {
50+
var variables : CartVariables = {
51+
slug: '',
52+
qty: 1,
53+
visitor_id: ''
54+
}
55+
variables.slug = props.slug
56+
57+
if (localStorage.getItem(CART_TOKEN)) {
58+
variables.visitor_id = localStorage.getItem(CART_TOKEN)
59+
}
60+
const result = await addToCart(variables)
61+
const items = get(result, 'addToCart', [])
62+
console.log(items)
63+
localStorage.setItem(CART_TOKEN, get(items, '0.visitor_id', ''))
64+
}
65+
66+
return {
67+
addToCartOnClick,
68+
}
69+
}
70+
})
71+
</script>

‎vue-frontend/src/router/index.ts

+4-9
Original file line numberDiff line numberDiff line change
@@ -15,15 +15,10 @@ const router = createRouter({
1515
{
1616
path: '/category/:slug',
1717
name: 'category',
18-
component: () => import('../views/HomeView.vue'),
18+
component: () => import('../views/Category.vue'),
1919
meta: {'middleware': 'guest', 'layout': 'app' }
2020
},
21-
{
22-
path: '/about',
23-
name: 'about',
24-
component: () => import('@/views/AboutView.vue'),
25-
meta: {'middleware': 'guest', 'layout': 'app' }
26-
},{
21+
{
2722
path: '/product/:slug',
2823
name: 'product.show',
2924
component: () => import('../views/HomeView.vue'),
@@ -32,7 +27,7 @@ const router = createRouter({
3227
{
3328
path: '/cart',
3429
name: 'cart',
35-
component: () => import('../views/HomeView.vue'),
30+
component: () => import('../views/Cart.vue'),
3631
meta: {'middleware': 'guest', 'layout': 'app' }
3732
},
3833
{
@@ -75,7 +70,7 @@ const router = createRouter({
7570
{
7671
path: '/logout',
7772
name: 'logout',
78-
component: () => import('../views/HomeView.vue'),
73+
component: () => import('../views/auth/Logout.vue'),
7974
meta: {'middleware': 'guest', 'layout': 'app' }
8075
},
8176

‎vue-frontend/src/views/Cart.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -145,11 +145,11 @@
145145
import CartItemAllQuery from '@/graphql/CartItemAllQuery'
146146
import { defineComponent } from 'vue'
147147
import VueFeather from 'vue-feather'
148-
import { useMutation, useQuery } from '@urql/vue'
149148
import { useI18n } from 'vue-i18n'
150149
import { CART_TOKEN } from '@/constants'
151150
import DeleteCartMutation from '@/graphql/DeleteCartMutation'
152151
import UpdateCartMutation from '@/graphql/UpdateCartMutation'
152+
import { useMutation, useQuery } from '@vue/apollo-composable'
153153
154154
type CartItem = {
155155
id: string,

‎vue-frontend/src/views/Category.vue

+24-25
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
<template>
2-
<div v-if="!fetching" class="">
2+
<div v-if="!loading" class="">
33
<section class="px-10 mt-5 w-full mx-auto">
44
<h1 class="my-5 text-4xl font-semibold text-red-700">
5-
{{ data.category.name }}
5+
{{ result.category.name }}
66
</h1>
77
<div class="grid grid-cols-4 gap-6">
88
<div
9-
v-for="(card, index) in data.category.products.data"
9+
v-for="(card, index) in result.category.products.data"
1010
:key="`product-card-${index}`"
1111
class="
1212
shadow
@@ -81,13 +81,13 @@
8181
<Pagination
8282
@previous="previousButtonOnClick"
8383
@next="nextButtonOnClick"
84-
:total="data.category.products.total"
85-
:per-page="data.category.products.per_page"
86-
:current-page="data.category.products.current_page"
87-
:from="data.category.products.from"
88-
:to="data.category.products.to"
89-
:last-page="data.category.products.last_page"
90-
:has-more-pages="data.category.products.has_more_pages"
84+
:total="result.category.products.total"
85+
:per-page="result.category.products.per_page"
86+
:current-page="result.category.products.current_page"
87+
:from="result.category.products.from"
88+
:to="result.category.products.to"
89+
:last-page="result.category.products.last_page"
90+
:has-more-pages="result.category.products.has_more_pages"
9191
/>
9292
</div>
9393
</section>
@@ -109,10 +109,7 @@ import { useQuery } from "@vue/apollo-composable"
109109
const slug = ref(router.currentRoute.value.params.slug)
110110
const page = ref(1)
111111
112-
const {loading, result } = useQuery({
113-
query: GetCategoryQuery,
114-
variables: { slug: slug, page: page },
115-
})
112+
const {loading, result } = useQuery(GetCategoryQuery, { slug: slug, page: page })
116113
117114
// watch(router.currentRoute, (newValue) => {
118115
// slug.value = newValue.params.slug
@@ -122,16 +119,18 @@ import { useQuery } from "@vue/apollo-composable"
122119
// requestPolicy: "network-only",
123120
// })
124121
// })
125-
// const nextButtonOnClick = () => {
126-
// page.value += 1
127-
// console.log('page ' + page.value)
128-
// result.executeQuery({
129-
// variables: { slug: slug, page: page },
130-
// requestPolicy: "network-only",
131-
// })
132-
// }
133-
// const previousButtonOnClick = () => {
134-
122+
const nextButtonOnClick = () => {
123+
console.log('next')
124+
// page.value += 1
125+
// console.log('page ' + page.value)
126+
// result.executeQuery({
127+
// variables: { slug: slug, page: page },
128+
// requestPolicy: "network-only",
129+
// })
130+
}
131+
const previousButtonOnClick = () => {
132+
133+
console.log('prev')
135134
// page.value -= 1
136135
// if (page.value < 0) {
137136
// page.value = 0
@@ -141,6 +140,6 @@ import { useQuery } from "@vue/apollo-composable"
141140
// variables: { slug: slug, page: page },
142141
// requestPolicy: "network-only",
143142
// })
144-
// }
143+
}
145144
146145
</script>

‎vue-frontend/src/views/auth/Logout.vue

+9-12
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,16 @@
11
<template>
22
<div></div>
33
</template>
4-
<script lang="ts">
5-
import { AUTH_TOKEN } from "@/constants"
6-
import { defineComponent, onMounted } from "vue"
4+
<script setup lang="ts">
5+
import { AUTH_TOKEN, CUSTOMER_LOGGED_IN } from "@/constants"
6+
import { onMounted } from "vue"
77
import { useRouter } from "vue-router"
8-
9-
10-
export default defineComponent({
11-
setup() {
12-
onMounted(() => {
13-
const router = useRouter()
8+
console.log('sdfdsfds')
9+
10+
onMounted(() => {
11+
const router = useRouter()
1412
localStorage.removeItem(AUTH_TOKEN)
13+
localStorage.removeItem(CUSTOMER_LOGGED_IN)
1514
router.push({name: 'home'})
1615
})
17-
}
18-
})
19-
</script>
16+
</script>

0 commit comments

Comments
 (0)