Skip to content

V
vue-sample-test
Commit 6fce5dd1 authored by Sanga Raju Gupta Bonagiri's avatar Sanga Raju Gupta Bonagiri
Browse files
Options

add header and footer from comp library

parent d0577a9e
Hide whitespace changes
Inline Side-by-side
Showing with 392 additions and 572 deletions
README.md
View file @ 6fce5dd1
......@@ -4,13 +4,7 @@ To create a shopping cart using fake Json api
This template should help get you started developing with Vue 3 in Vite.
## Recommended IDE Setup
[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
## Customize configuration
See [Vite Configuration Reference](https://vitejs.dev/config/).
## Project Setup
......
package-lock.json
View file @ 6fce5dd1
......@@ -11,6 +11,7 @@
"@sangarajuguptanisum/vue-custom-components": "^0.0.3",
"axios": "^1.6.2",
"vue": "^3.3.10",
"vue-header-footer-mfe": "^0.0.7",
"vue-router": "^4.2.5",
"vuex": "^4.1.0"
},
......@@ -9518,6 +9519,67 @@
"eslint": ">=6.0.0"
}
},
"node_modules/vue-header-footer-mfe": {
"version": "0.0.7",
"resolved": "https://registry.npmjs.org/vue-header-footer-mfe/-/vue-header-footer-mfe-0.0.7.tgz",
"integrity": "sha512-QOGDOUAjx0CqMMul+4eq5cWEKbmiD4N0j2pKFYPU5JqiaZSeBPks5Xic9TAUJRwnFAd9izcpjarFas6cGMQwTw==",
"dependencies": {
"@sangarajuguptanisum/vue-custom-components": "^0.0.3",
"pinia": "^2.1.7",
"vue": "^3.3.11",
"vue-router": "^4.2.5"
}
},
"node_modules/vue-header-footer-mfe/node_modules/pinia": {
"version": "2.1.7",
"resolved": "https://registry.npmjs.org/pinia/-/pinia-2.1.7.tgz",
"integrity": "sha512-+C2AHFtcFqjPih0zpYuvof37SFxMQ7OEG2zV9jRI12i9BOy3YQVAHwdKtyyc8pDcDyIc33WCIsZaCFWU7WWxGQ==",
"dependencies": {
"@vue/devtools-api": "^6.5.0",
"vue-demi": ">=0.14.5"
},
"funding": {
"url": "https://github.com/sponsors/posva"
},
"peerDependencies": {
"@vue/composition-api": "^1.4.0",
"typescript": ">=4.4.4",
"vue": "^2.6.14 || ^3.3.0"
},
"peerDependenciesMeta": {
"@vue/composition-api": {
"optional": true
},
"typescript": {
"optional": true
}
}
},
"node_modules/vue-header-footer-mfe/node_modules/pinia/node_modules/vue-demi": {
"version": "0.14.6",
"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.6.tgz",
"integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==",
"hasInstallScript": true,
"bin": {
"vue-demi-fix": "bin/vue-demi-fix.js",
"vue-demi-switch": "bin/vue-demi-switch.js"
},
"engines": {
"node": ">=12"
},
"funding": {
"url": "https://github.com/sponsors/antfu"
},
"peerDependencies": {
"@vue/composition-api": "^1.0.0-rc.1",
"vue": "^3.0.0-0 || ^2.6.0"
},
"peerDependenciesMeta": {
"@vue/composition-api": {
"optional": true
}
}
},
"node_modules/vue-router": {
"version": "4.2.5",
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.2.5.tgz",
......
package.json
View file @ 6fce5dd1
......@@ -15,6 +15,7 @@
"@sangarajuguptanisum/vue-custom-components": "^0.0.3",
"axios": "^1.6.2",
"vue": "^3.3.10",
"vue-header-footer-mfe": "^0.0.7",
"vue-router": "^4.2.5",
"vuex": "^4.1.0"
},
......
src/App.vue
View file @ 6fce5dd1
<template>
<Header></Header>
<CHeader :kartItems="$store.state.cart.length"> </CHeader>
<div class="content">
<router-view class="content" />
<router-view />
</div>
<CFooter></CFooter>
</template>
<script>
import Header from '../src/components/Header/Header.vue'
import { CHeader, CFooter } from 'vue-header-footer-mfe'
export default {
name: "App",
components: {
Header
name: 'App',
data() {
return {}
},
components: {},
methods: {},
created() {
this.$store.dispatch('getProductsAction')
......@@ -21,4 +22,8 @@ export default {
}
</script>
<style scoped></style>
<style scoped>
.content {
min-height: 100vh;
}
</style>
src/Views/About/About.vue
View file @ 6fce5dd1
<template>
<h1>About page loaded</h1>
<SButton isLoading="true"></SButton>
<h1>About page loaded</h1>
<SButton isLoading="true"></SButton>
</template>
<script>
import {SButton} from '@sangarajuguptanisum/vue-custom-components';
import { SButton } from '@sangarajuguptanisum/vue-custom-components'
export default {
name: "About",
components: {
},
data() {
return {}
},
methods: {}
name: 'About',
components: {},
data() {
return {}
},
methods: {}
}
</script>
\ No newline at end of file
</script>
src/Views/Cart/Cart.vue
View file @ 6fce5dd1
<template>
<div v-if="$store.state.cart.length == 0">
shopping cart is empty
</div>
<div v-else>
<table class=" min-w-full divide-y divide-gray-200 dark:divide-gray-700">
<thead>
<tr>
<th v-for="heading in headings" scope="col"
class="px-6 py-3 text-start text-xs font-medium text-gray-500 uppercase">{{ heading }}</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200 dark:divide-gray-700">
<tr v-for="(product, index) in $store.state.cart">
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800 dark:text-gray-200">{{ index + 1 }}</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800 dark:text-gray-200">{{ product.title }}
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800 w-20 dark:text-gray-200"><img
:src="product.image" />
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800 dark:text-gray-200">{{ product.category }}
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800 dark:text-gray-200">{{ product.price }}
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium"><button type="button"
class="bg-red-500 my-2 hover:bg-red-700 text-white font-bold py-2 px-4 rounded"
@click="removeProduct(product.id)">Delete</button>
</td>
</tr>
</tbody>
</table>
</div>
<div v-if="$store.state.cart.length == 0">shopping cart is empty</div>
<div v-else>
<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
<thead>
<tr>
<th
v-for="heading in headings"
scope="col"
class="px-6 py-3 text-start text-xs font-medium text-gray-500 uppercase"
>
{{ heading }}
</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200 dark:divide-gray-700">
<tr v-for="(product, index) in $store.state.cart" :key="product.key">
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800 dark:text-gray-200">
{{ index + 1 }}
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800 dark:text-gray-200">
{{ product.title }}
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800 w-20 dark:text-gray-200">
<img :src="product.image" />
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800 dark:text-gray-200">
{{ product.category }}
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800 dark:text-gray-200">
{{ product.price }}
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
<button
type="button"
class="bg-red-500 my-2 hover:bg-red-700 text-white font-bold py-2 px-4 rounded"
@click="removeProduct(product.id)"
>
Delete
</button>
</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
name: "Cart",
data() {
return {
cartItems: {},
headings: ["", "Name", "Image", "Category", "price", "Action"]
}
},
methods: {
removeProduct(productId) {
this.$store.commit('removeProductFromCart', productId)
}
},
beforeMount() {
},
name: 'Cart',
data() {
return {
cartItems: {},
headings: ['', 'Name', 'Image', 'Category', 'price', 'Action']
}
},
methods: {
removeProduct(productId) {
this.$store.commit('removeProductFromCart', productId)
}
},
beforeMount() {}
}
</script>
\ No newline at end of file
</script>
src/Views/CategoriesList/CategoriesList.spec.js
View file @ 6fce5dd1
import { shallowMount } from "@vue/test-utils";
import { jest } from '@jest/globals';
import CategoriesList from "../CategoriesList/CategoriesList.vue";
import { shallowMount } from '@vue/test-utils'
import { jest } from '@jest/globals'
import CategoriesList from '../CategoriesList/CategoriesList.vue'
const product = {
id: 1,
title: "Fjallraven - Foldsack No. 1 Backpack, Fits 15 Laptops",
title: 'Fjallraven - Foldsack No. 1 Backpack, Fits 15 Laptops',
price: 109.95,
description: "Your perfect pack for everyday use and walks in the forest. Stash your laptop (up to 15 inches) in the padded sleeve, your everyday",
description:
'Your perfect pack for everyday use and walks in the forest. Stash your laptop (up to 15 inches) in the padded sleeve, your everyday',
category: "men's clothing",
image: "https://fakestoreapi.com/img/81fPKd-2AYL._AC_SL1500_.jpg",
image: 'https://fakestoreapi.com/img/81fPKd-2AYL._AC_SL1500_.jpg',
rating: {
rate: 3.9,
count: 120
......@@ -37,15 +38,11 @@ const wrapper = shallowMount(CategoriesList, {
}
})
describe("Catergory", () => {
it("To check the component redendered or not", () => {
console.log(wrapper.html(),"fsd")
expect(wrapper.contains('product-card-stub')).toBe(true);
expect((wrapper.find('product-card-stub')).attributes('product')).toBe();
describe('Catergory', () => {
it('To check the component redendered or not', () => {
console.log(wrapper.html(), 'fsd')
expect(wrapper.contains('product-card-stub')).toBe(true)
expect(wrapper.find('product-card-stub').attributes('product')).toBe()
})
})
\ No newline at end of file
})
src/Views/CategoriesList/CategoriesList.vue
View file @ 6fce5dd1
<template>
<p class="text-xl pb-8"><router-link class="underline" to="/">Home</router-link> / {{ $route.params.product }} </p>
<p class="text-xl pb-8">
<router-link class="underline" to="/">Home</router-link> / {{ $route.params.product }}
</p>
<div>
<!-- Display products catelog -->
<div class="grid grid-cols-4 gap-8">
<!-- Rendering product card by passing prop -->
<ProductCard v-for="product in products" :key="product.id" :product="product"></ProductCard>
</div>
<div>
<!-- Display products catelog -->
<div class="grid grid-cols-4 gap-8">
<!-- Rendering product card by passing prop -->
<ProductCard v-for="product in products" :key="product.id" :product="product"></ProductCard>
</div>
</div>
</template>
<script>
import ProductCard from '../../components/ProductCard/ProductCard.vue';
import ProductCard from '../../components/ProductCard/ProductCard.vue'
export default {
name: "CategoriesList",
components:{ProductCard},
data() {
return {
products: [],
categoeryName: ""
};
},
methods: {
async getProductsByCategory() {
// const { data } = await axios.get("https://fakestoreapi.com/products");
this.products = this.$store.state.products.filter((item) => (item.category).toLowerCase() === (this.$route.params.product).toLowerCase());
// console.log("test", this.products, "sample")
},
},
beforeMount() {
this.categoeryName = this.$route.params.product
this.getProductsByCategory();
},
name: 'CategoriesList',
components: { ProductCard },
data() {
return {
products: [],
categoeryName: ''
}
},
methods: {
async getProductsByCategory() {
// const { data } = await axios.get("https://fakestoreapi.com/products");
this.products = this.$store.state.products.filter(
(item) => item.category.toLowerCase() === this.$route.params.product.toLowerCase()
)
// console.log("test", this.products, "sample")
}
},
beforeMount() {
this.categoeryName = this.$route.params.product
this.getProductsByCategory()
}
}
</script>
<style lang="scss" scoped>
</style>
\ No newline at end of file
<style lang="scss" scoped></style>
src/Views/Contact/Contact.spec.js
View file @ 6fce5dd1
import { mount } from "@vue/test-utils"
import Contact from "../Contact/Contact.vue";
import { mount } from '@vue/test-utils'
import Contact from '../Contact/Contact.vue'
describe("notification.vue", () => {
test("sample", () => {
const wrapper = mount(Contact);
expect(wrapper.text()).toEqual(
"Contact page Loaded"
);
});
});
\ No newline at end of file
describe('notification.vue', () => {
test('sample', () => {
const wrapper = mount(Contact)
expect(wrapper.text()).toEqual('Contact page Loaded')
})
})
src/Views/Contact/Contact.vue
View file @ 6fce5dd1
<template>
<h1>
Contact page Loaded
</h1>
<h1>Contact page Loaded</h1>
</template>
<script>
export default {
name: "Contact",
components: {},
data() {
return {}
}
name: 'Contact',
components: {},
data() {
return {}
}
}
</script>
<style scoped></style>
\ No newline at end of file
<style scoped></style>
src/Views/Home/Home.vue
View file @ 6fce5dd1
<template>
<h1 class="mt-4 mb-10 text-4xl" >Categories</h1>
<div class= "grid grid-cols-4 gap-2">
<!-- <div class="border-double border-8 border-green-600">Electronics</div> -->
<router-link to="/categories/electronics">
<button class="cat-btn bg-teal-500 hover:bg-teal-700 text-white font-bold py-2 px-4 rounded">
Electronics
</button>
</router-link>
<router-link to="/categories/Jewelery">
<button class=" cat-btn bg-teal-500 hover:bg-teal-700 text-white font-bold py-2 px-4 rounded">
Jewelery
</button>
</router-link>
<router-link to="/categories/Men's clothing">
<button class=" cat-btn bg-teal-500 hover:bg-teal-700 text-white font-bold py-2 px-4 rounded">
Men's clothing
</button>
</router-link>
<router-link to="/categories/Women's clothing">
<button class=" cat-btn bg-teal-500 hover:bg-teal-700 text-white font-bold py-2 px-4 rounded">
Women's clothing
</button>
</router-link>
</div>
<h1 class="mt-4 mb-10 text-4xl">Categories</h1>
<div class="grid grid-cols-4 gap-2">
<!-- <div class="border-double border-8 border-green-600">Electronics</div> -->
<router-link to="/categories/electronics">
<button class="cat-btn bg-teal-500 hover:bg-teal-700 text-white font-bold py-2 px-4 rounded">
Electronics
</button>
</router-link>
<router-link to="/categories/Jewelery">
<button class="cat-btn bg-teal-500 hover:bg-teal-700 text-white font-bold py-2 px-4 rounded">
Jewelery
</button>
</router-link>
<router-link to="/categories/Men's clothing">
<button class="cat-btn bg-teal-500 hover:bg-teal-700 text-white font-bold py-2 px-4 rounded">
Men's clothing
</button>
</router-link>
<router-link to="/categories/Women's clothing">
<button class="cat-btn bg-teal-500 hover:bg-teal-700 text-white font-bold py-2 px-4 rounded">
Women's clothing
</button>
</router-link>
</div>
</template>
<script>
export default {
name: "Home",
components: {}
name: 'Home',
components: {}
}
</script>
<style scoped>
.cat-btn{
height: 15rem;
width: 15rem;
.cat-btn {
height: 15rem;
width: 15rem;
}
</style>
\ No newline at end of file
</style>
src/Views/ProductDetail/ProductDetail.vue
View file @ 6fce5dd1
<template>
<p class="text-xl pb-8"><router-link class="underline" :to="`/categories/${product.category}`">Home/{{ product.category
}}</router-link>/{{ product.id }} </p>
<router-link :to="`/categories/${product.category}/${product.id}`"></router-link>
<p class="text-xl font-bold py-8 ">Product Detail</p>
<div class="max-w-sm w-full lg:max-w-full lg:flex">
<div class="h-48 lg:h-auto lg:w-48 flex-none bg-cover rounded-t lg:rounded-t-none lg:rounded-l text-center overflow-hidden"
:style="{ backgroundImage: `url('${product.image}')` }" title="Woman holding a mug">
</div>
<div
class="border-r border-b border-l border-gray-400 lg:border-l-0 lg:border-t lg:border-gray-400 bg-white rounded-b lg:rounded-b-none lg:rounded-r p-4 flex flex-col justify-between leading-normal">
<div class="mb-8">
<div class="font-bold text-xl py-4">Description:</div>
<div class="font-bold">{{ product.title }}</div>
<div class="text-gray-900 mb-2">{{ product.description }}</div>
<p class="text-gray-700 text-base">${{ product.price }}</p>
</div>
<div>
<button @click="addToCart(product)"
class="bg-teal-500 my-2 hover:bg-teal-700 text-white font-bold py-2 px-4 rounded">Add to Cart</button>
</div>
</div>
<p class="text-xl pb-8">
<router-link class="underline" :to="`/categories/${product.category}`"
>Home/{{ product.category }}</router-link
>/{{ product.id }}
</p>
<router-link :to="`/categories/${product.category}/${product.id}`"></router-link>
<p class="text-xl font-bold py-8">Product Detail</p>
<div class="max-w-sm w-full lg:max-w-full lg:flex">
<div
class="h-48 lg:h-auto lg:w-48 flex-none bg-cover rounded-t lg:rounded-t-none lg:rounded-l text-center overflow-hidden"
:style="{ backgroundImage: `url('${product.image}')` }"
title="Woman holding a mug"
></div>
<div
class="border-r border-b border-l border-gray-400 lg:border-l-0 lg:border-t lg:border-gray-400 bg-white rounded-b lg:rounded-b-none lg:rounded-r p-4 flex flex-col justify-between leading-normal"
>
<div class="mb-8">
<div class="font-bold text-xl py-4">Description:</div>
<div class="font-bold">{{ product.title }}</div>
<div class="text-gray-900 mb-2">{{ product.description }}</div>
<p class="text-gray-700 text-base">${{ product.price }}</p>
</div>
<div>
<button
@click="addToCart(product)"
class="bg-teal-500 my-2 hover:bg-teal-700 text-white font-bold py-2 px-4 rounded"
>
Add to Cart
</button>
</div>
</div>
</div>
</template>
<script>
export default {
name: "ProductDetail",
data() {
return {
product: {}
}
},
methods: {
async getProductById() {
console.log("thisss",this.$store.state.products)
this.product = this.$store.state.products.find(item => item.id === parseInt(this.$route.params.id));
console.log("thisid", this.$route.params.id,this.product);
},
addToCart(product) {
this.$store.commit('addProductsToCart', product)
}
},
beforeMount() {
this.getProductById();
name: 'ProductDetail',
data() {
return {
product: {}
}
},
methods: {
async getProductById() {
console.log('thisss', this.$store.state.products)
this.product = this.$store.state.products.find(
(item) => item.id === parseInt(this.$route.params.id)
)
console.log('thisid', this.$route.params.id, this.product)
},
addToCart(product) {
this.$store.commit('addProductsToCart', product)
}
},
beforeMount() {
this.getProductById()
}
}
</script>
<style></style>
\ No newline at end of file
<style></style>
src/assets/main.css
View file @ 6fce5dd1
......@@ -11,7 +11,7 @@
font-weight: normal;
}
.content {
margin: 0 1rem;
margin: 0 1rem;
padding: 2rem;
}
......
src/components/CustomInput/CustomInput.vue deleted 100644 → 0
View file @ d0577a9e
<template>
<label>
{{ label }}
<input
class="border w-full py-2 px-2 rounded shadow hover:border-teal-600 ring-1 ring-inset ring-gray-300 font-mono"
:name="name" :type="type" :value="value" @input="updateValue" />
</label>
</template>
<script >
export default {
name: "CustomInput",
props: {
label: String,
name: String,
type: {
type: String,
default: 'text',
},
value: String
},
methods: {
updateValue(event) {
console.log("testttt custim", event.target.value)
this.$emit('input-test', event.target.value)
},
},
data() {
return {
}
}
}
</script>
\ No newline at end of file
src/components/Header/Header.vue deleted 100644 → 0
View file @ d0577a9e
<template>
<nav class="flex items-center justify-between flex-wrap bg-teal-500 p-6 sticky top-0">
<!-- <div class="flex items-center flex-shrink-0 text-white mr-6">
<span class="font-semibold text-xl tracking-tight">Shopping Cart</span>
</div> -->
<div class="w-full block flex-grow lg:flex lg:items-center lg:w-auto">
<div class="text-sm lg:flex-grow text-white ">
<router-link class="block mt-4 text-3xl lg:inline-block lg:mt-0 text-white hover:text-teal-200 mr-4" to="/">
Shopping Cart
</router-link>
<router-link class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4" to="/about">
About
</router-link>
<router-link class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4" to="/contact">
Contact
</router-link>
<router-link
class="inline-block text-sm px-4 py-2 leading-none border rounded text-white border-white hover:border-transparent hover:text-teal-500 hover:bg-white mt-4 lg:mt-0" to="/cart" >Cart{{$store.state.cart.length>0? $store.state.cart.length:""}}</router-link>
</div>
<div>
<p class="text-xl text-white capitalize" v-if="user">{{ user }}</p>
<SLogin v-else loginText="CustomLogin Button" @user-login="setUserInfo"></SLogin>
</div>
</div>
</nav>
</template>
<script>
// import Login from '../Login/Login.vue'
import {SLogin} from '@sangarajuguptanisum/vue-custom-components';
export default{
name:"Header",
data(){
return{
user:""
}
},
components:{
// Login
},
methods:{
setUserInfo(data){
this.user = data.user.name;
console.log(data);
}
}
}
</script>
\ No newline at end of file
src/components/Login-not-used/Login-not-used.vue deleted 100644 → 0
View file @ d0577a9e
<template>
<div class="fixed right-0 inline-block " @mouseover="isVisible = true" @mouseleave="isVisible = false"
@keydown.enter="isVisible = !isVisible">
<button type="button"
class="inline-block relative -top-4 right-2 text-sm px-4 py-2 leading-none border rounded text-white border-white hover:border-transparent hover:text-teal-500 hover:bg-white mt-4 lg:mt-0">
<span class="flex-shrink-0">Login</span>
</button>
<transition enter-active-class="transition duration-300 ease-out transform"
enter-class="-translate-y-3 scale-95 opacity-0" enter-to-class="translate-y-0 scale-100 opacity-100"
leave-active-class="transition duration-150 ease-in transform" leave-class="translate-y-0 opacity-100"
leave-to-class="-translate-y-3 opacity-0">
<div v-show="isVisible" class="fixed right-0 pt-2">
<div class="relative py-1 bg-white border border-gray-200 rounded-md shadow-xl">
<div class="relative">
<div class='flyout-width flex items-center justify-center min-h-screen'>
<div class='w-full max-w-lg px-10 py-8 mx-auto bg-teal-500 border rounded-lg shadow-2xl'>
<div class='max-w-md mx-auto space-y-3'>
<h3 class="text-lg font-semibold">Account {{ this.buttonName.toLowerCase() ==='proceed'? '':this.buttonName }} Form</h3>
<div>
<form>
<CustomInput label="Email:" name="email" :value="email"
@input-test="updateEmail">
</CustomInput>
<CustomInput v-if="userRegistration === true" label="username" name="username"
:value="username" @input-test="updateuserName"></CustomInput>
<CustomInput v-if="userLogin === true || userRegistration === true " label="Password" name="password"
:value="password" type="password" @input-test="updatePassword"></CustomInput>
</form>
</div>
<div class="flex gap-3 pt-3 items-center">
<button
class="border hover:border-teal-600 px-4 py-2 rounded-lg shadow ring-1 ring-inset ring-gray-300"
@click="handle_function_call(buttonName)">{{ buttonName }}</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</transition>
</div>
</template>
<script>
import CustomInput from '../CustomInput/CustomInput.vue'
export default {
name: "Login",
components: {
CustomInput
},
data() {
return {
buttonName: "proceed",
isVisible: false,
email: "",
password: "",
password1:"",
username: "",
userLogin: false,
userRegistration: false,
testingEmails: ['sanga@gmail.com', 'raju@gmail.com', 'gupta@gmail.com']
}
},
methods: {
updateEmail(val) {
this.email = val;
console.log("email", this.email);
},
updatePassword(val) {
this.password = val;
},
updateuserName(val){
this.username = val
},
proceed() {
console.log("proceed entered",this.email)
if (this.testingEmails.includes(this.email)) {
this.buttonName = "Login"
this.userLogin = true;
this.userRegistration = false;
}
else {
this.buttonName = "Register"
this.userLogin = false;
this.userRegistration = true;
}
},
register(){
this.password = "";
this.email="";
this.username = ""
},
login(){
this.password = "";
this.email="";
},
handle_function_call(function_name) {
console.log(function_name, "function_name",function_name.toLowerCase() == 'proceed');
const fun = function_name.toLowerCase();
if (fun === 'proceed') {
this.proceed();
}
else if(fun === 'register'){
this.register();
console.log("resgister",this.username,this.email,this.password)
}
else if(fun === 'login'){
console.log("login")
}
},
},
}
</script>
<style scoped>.flyout-width {
width: 35rem;
}</style>
\ No newline at end of file
src/components/ProductCard/ProductCard.spec.js
View file @ 6fce5dd1
import {shallowMount} from '@vue/test-utils';
import ProductCard from '../ProductCard/ProductCard.vue';
import { shallowMount } from '@vue/test-utils'
import ProductCard from '../ProductCard/ProductCard.vue'
// import VueRouter from 'vue-router'
describe('ProductCard',()=>{
const wrapper = shallowMount(ProductCard,{
props:{
product: {
id: 5,
title: "braclet",
price: 695,
description: "From",
category: "jewelery",
image: "https://fakestoreapi.com/img/71pWzhdJNwL._AC_UL640_QL65_ML3_.jpg",
rating: {
rate: 4.6,
count: 400
}
}
describe('ProductCard', () => {
const wrapper = shallowMount(ProductCard, {
props: {
product: {
id: 5,
title: 'braclet',
price: 695,
description: 'From',
category: 'jewelery',
image: 'https://fakestoreapi.com/img/71pWzhdJNwL._AC_UL640_QL65_ML3_.jpg',
rating: {
rate: 4.6,
count: 400
}
}
},
stubs: ['router-link', 'router-view'],
});
it("To test if the component loaded with card details",()=>{
console.log(wrapper.html(),"testing");
expect(wrapper.classes()).toContain('card');
expect(wrapper.find('.card-img').exists()).toBe(true);
const liList = wrapper.findAll('li');
expect(liList.at(0).text()).toBe('braclet');
expect(liList.at(1).text()).toBe("Price:$695");
expect(liList.at(2).text()).toBe("Category: jewelery")
});
it("To test the router link loaded with correct routing value",()=>{
const router = wrapper.find('router-link');
expect(router.attributes('to')).toBe('/categories/jewelery/5')
});
stubs: ['router-link', 'router-view']
})
it('To test if the component loaded with card details', () => {
console.log(wrapper.html(), 'testing')
expect(wrapper.classes()).toContain('card')
expect(wrapper.find('.card-img').exists()).toBe(true)
const liList = wrapper.findAll('li')
expect(liList.at(0).text()).toBe('braclet')
expect(liList.at(1).text()).toBe('Price:$695')
expect(liList.at(2).text()).toBe('Category: jewelery')
})
it('To test the router link loaded with correct routing value', () => {
const router = wrapper.find('router-link')
expect(router.attributes('to')).toBe('/categories/jewelery/5')
})
})
src/components/ProductCard/ProductCard.vue
View file @ 6fce5dd1
<template>
<div class="card">
<div class="max-w-sm rounded overflow-hidden shadow-lg">
<img class="w-full card-img p-10" :src="product.image" alt="Sunset in the mountains">
<div class="px-6 py-4 configure">
<ul class="text-gray-700 text-base">
<li class="text-xl">{{ product.title }}</li>
<li>Price:${{ product.price }}</li>
<li> Category: {{ product.category }}</li>
</ul>
<router-link :to="`/categories/${product.category}/${product.id}`">
<button class="bg-blue-500 my-2 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">More
Details</button>
</router-link>
</div>
</div>
<div class="card">
<div class="max-w-sm rounded overflow-hidden shadow-lg">
<img class="w-full card-img p-10" :src="product.image" alt="Sunset in the mountains" />
<div class="px-6 py-4 configure">
<ul class="text-gray-700 text-base">
<li class="text-xl">{{ product.title }}</li>
<li>Price:${{ product.price }}</li>
<li>Category: {{ product.category }}</li>
</ul>
<router-link :to="`/categories/${product.category}/${product.id}`">
<button class="bg-blue-500 my-2 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
More Details
</button>
</router-link>
</div>
</div>
</div>
</template>
<script>
export default {
name: "ProductCard",
props:['product'],
name: 'ProductCard',
props: ['product']
}
</script>
<style lang="scss" scoped>
.card {
min-height: 35rem;
min-height: 35rem;
.card-img {
height: 20rem;
width: 100%;
}
.configure {
min-height: 15rem;
}
.card-img {
height: 20rem;
width: 100%;
}
.configure {
min-height: 15rem;
}
}
</style>
\ No newline at end of file
</style>
src/main.js
View file @ 6fce5dd1
import '@sangarajuguptanisum/vue-custom-components/dist/index.css';
import '@sangarajuguptanisum/vue-custom-components/dist/style.css';
import 'vue-header-footer-mfe/dist/index.css'
import '@sangarajuguptanisum/vue-custom-components/dist/index.css'
import '@sangarajuguptanisum/vue-custom-components/dist/style.css'
import vueComponents from '@sangarajuguptanisum/vue-custom-components'
import vueCustomComponents from 'vue-header-footer-mfe'
import './assets/main.css'
import { createApp } from 'vue'
import App from './App.vue'
import { createRouter, createWebHistory } from 'vue-router';
import { createRouter, createWebHistory } from 'vue-router'
import store from './store/index.js'
import Home from '../src/views/Home/Home.Vue'
import About from '../src/views/About/About.vue'
import Contact from "../src/views/Contact/Contact.vue"
import CategoriesList from "../src/views/CategoriesList/CategoriesList.vue"
import ProductDetail from "../src/views/ProductDetail/ProductDetail.vue"
import Cart from "../src/views/Cart/Cart.vue"
import Contact from '../src/views/Contact/Contact.vue'
import CategoriesList from '../src/views/CategoriesList/CategoriesList.vue'
import ProductDetail from '../src/views/ProductDetail/ProductDetail.vue'
import Cart from '../src/views/Cart/Cart.vue'
const app = createApp(App);
const app = createApp(App)
const router = createRouter({
history: createWebHistory(),
routes: [
{ name: "Home", path: '/', component: Home },
{ name: "About", path: '/about', component: About },
{ name: "Contact", path: '/contact', component: Contact },
{ name: "Categories", path: '/categories/:product', component: CategoriesList },
{ name: "ProductDetail", path: '/categories/:product/:id', component: ProductDetail },
{ name: "Cart", path: "/cart", component: Cart }
]
history: createWebHistory(),
routes: [
{ name: 'Home', path: '/', component: Home },
{ name: 'About', path: '/about', component: About },
{ name: 'Contact', path: '/contact', component: Contact },
{ name: 'Categories', path: '/categories/:product', component: CategoriesList },
{ name: 'ProductDetail', path: '/categories/:product/:id', component: ProductDetail },
{ name: 'Cart', path: '/cart', component: Cart }
]
})
app.use(vueCustomComponents)
app.use(vueComponents)
app.use(router)
app.use(store)
......
src/store/index.js
View file @ 6fce5dd1
import { createStore } from 'vuex'
import axios from "axios";
import axios from 'axios'
export default createStore({
state: {
products: [],
cart: [],
state: {
products: [],
cart: []
},
mutations: {
getProducts(state, products) {
state.products = products
},
mutations: {
getProducts(state, products) {
state.products = products
},
addProductsToCart(state, products) {
//Mutating the state
state.cart.push(products);
// console.log(state,"steteee")
},
removeProductFromCart(state, productId) {
const index = state.cart.findIndex(item => item.id === productId)
state.cart.splice(index, 1);
}
addProductsToCart(state, products) {
//Mutating the state
state.cart.push(products)
// console.log(state,"steteee")
},
actions: {
async getProductsAction(context) {
const { data } = await axios.get("https://fakestoreapi.com/products");
context.commit('getProducts', data)
}
removeProductFromCart(state, productId) {
const index = state.cart.findIndex((item) => item.id === productId)
state.cart.splice(index, 1)
}
},
actions: {
async getProductsAction(context) {
const { data } = await axios.get('https://fakestoreapi.com/products')
context.commit('getProducts', data)
}
})
\ No newline at end of file
}
})
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment