Skip to content

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

Push existing project to GitLab

parents
Hide whitespace changes
Inline Side-by-side
Showing with 703 additions and 0 deletions
.eslintrc.cjs 0 → 100644
View file @ f3cb4073
/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution')
module.exports = {
root: true,
'extends': [
'plugin:vue/vue3-essential',
'eslint:recommended',
'@vue/eslint-config-prettier/skip-formatting'
],
parserOptions: {
ecmaVersion: 'latest'
},
// rules: {"vue/multi-word-component-names": "off"}
}
.gitignore 0 → 100644
View file @ f3cb4073
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
.DS_Store
dist
dist-ssr
coverage
*.local
/cypress/videos/
/cypress/screenshots/
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
*.tsbuildinfo
.prettierrc.json 0 → 100644
View file @ f3cb4073
{
"$schema": "https://json.schemastore.org/prettierrc",
"semi": false,
"tabWidth": 2,
"singleQuote": true,
"printWidth": 100,
"trailingComma": "none"
}
\ No newline at end of file
.vscode/extensions.json 0 → 100644
View file @ f3cb4073
{
"recommendations": [
"Vue.volar",
"Vue.vscode-typescript-vue-plugin",
"dbaeumer.vscode-eslint",
"esbenp.prettier-vscode"
]
}
README.md 0 → 100644
View file @ f3cb4073
# vue-project-poc
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
```sh
npm install
```
### Compile and Hot-Reload for Development
```sh
npm run dev
```
### Compile and Minify for Production
```sh
npm run build
```
### Lint with [ESLint](https://eslint.org/)
```sh
npm run lint
```
index.html 0 → 100644
View file @ f3cb4073
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sample vue app</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
jsconfig.json 0 → 100644
View file @ f3cb4073
{
"compilerOptions": {
"paths": {
"@/*": ["./src/*"]
}
},
"exclude": ["node_modules", "dist"]
}
package-lock.json 0 → 100644
View file @ f3cb4073
This source diff could not be displayed because it is too large. You can view the blob instead.
package.json 0 → 100644
View file @ f3cb4073
{
"name": "vue-project-poc",
"version": "0.0.0",
"private": true,
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview",
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
"format": "prettier --write src/"
},
"dependencies": {
"axios": "^1.6.2",
"vue": "^3.3.10",
"vue-router": "^4.2.5",
"vuex": "^4.1.0"
},
"devDependencies": {
"@rushstack/eslint-patch": "^1.3.3",
"@vitejs/plugin-vue": "^4.5.1",
"@vue/eslint-config-prettier": "^8.0.0",
"autoprefixer": "^10.4.16",
"eslint": "^8.49.0",
"eslint-plugin-vue": "^9.17.0",
"postcss": "^8.4.32",
"prettier": "^3.0.3",
"sass": "^1.69.5",
"tailwindcss": "^3.3.6",
"vite": "^5.0.5"
}
}
postcss.config.js 0 → 100644
View file @ f3cb4073
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
src/App.vue 0 → 100644
View file @ f3cb4073
<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 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4" to="/">
Home
</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>
</div>
<div>
<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>
</nav>
<div class="content">
<router-view class="content" />
</div>
</template>
<script>
export default {
name:"App",
created(){
this.$store.dispatch('getProductsAction')
}
}
</script>
<style scoped>
</style>
src/Views/About/About.vue 0 → 100644
View file @ f3cb4073
<template>
<h1>About page loaded</h1>
</template>
<script>
export default {
name: "About",
components: {
},
data() {
return {}
},
methods: {}
}
</script>
\ No newline at end of file
src/Views/Cart/Cart.vue 0 → 100644
View file @ f3cb4073
<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>
</template>
<script>
export default {
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
src/Views/Contact/Contact.vue 0 → 100644
View file @ f3cb4073
<template>
<h1>
Contact page Loaded
</h1>
</template>
<script>
export default {
name: "Contact",
components: {},
data() {
return {}
}
}
</script>
<style scoped></style>
\ No newline at end of file
src/Views/Home/Home.vue 0 → 100644
View file @ f3cb4073
<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>
</template>
<script>
export default {
name: "Home",
components: {}
}
</script>
<style scoped>
.cat-btn{
height: 15rem;
width: 15rem;
}
</style>
\ No newline at end of file
src/Views/ProductDetail/ProductDetail.vue 0 → 100644
View file @ f3cb4073
<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>
</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();
},
}
</script>
<style></style>
\ No newline at end of file
src/assets/base.css 0 → 100644
View file @ f3cb4073
/* color palette from <https://github.com/vuejs/theme> */
:root {
--vt-c-white: #ffffff;
--vt-c-white-soft: #f8f8f8;
--vt-c-white-mute: #f2f2f2;
--vt-c-black: #181818;
--vt-c-black-soft: #222222;
--vt-c-black-mute: #282828;
--vt-c-indigo: #2c3e50;
--vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
--vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
--vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
--vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
--vt-c-text-light-1: var(--vt-c-indigo);
--vt-c-text-light-2: rgba(60, 60, 60, 0.66);
--vt-c-text-dark-1: var(--vt-c-white);
--vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
}
/* semantic color variables for this project */
:root {
--color-background: var(--vt-c-white);
--color-background-soft: var(--vt-c-white-soft);
--color-background-mute: var(--vt-c-white-mute);
--color-border: var(--vt-c-divider-light-2);
--color-border-hover: var(--vt-c-divider-light-1);
--color-heading: var(--vt-c-text-light-1);
--color-text: var(--vt-c-text-light-1);
--section-gap: 160px;
}
@media (prefers-color-scheme: dark) {
:root {
--color-background: var(--vt-c-black);
--color-background-soft: var(--vt-c-black-soft);
--color-background-mute: var(--vt-c-black-mute);
--color-border: var(--vt-c-divider-dark-2);
--color-border-hover: var(--vt-c-divider-dark-1);
--color-heading: var(--vt-c-text-dark-1);
--color-text: var(--vt-c-text-dark-2);
}
}
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
font-weight: normal;
}
body {
min-height: 100vh;
color: var(--color-text);
background: var(--color-background);
transition:
color 0.5s,
background-color 0.5s;
line-height: 1.6;
font-family:
Inter,
-apple-system,
BlinkMacSystemFont,
'Segoe UI',
Roboto,
Oxygen,
Ubuntu,
Cantarell,
'Fira Sans',
'Droid Sans',
'Helvetica Neue',
sans-serif;
font-size: 15px;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
src/assets/logo.svg 0 → 100644
View file @ f3cb4073
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
src/assets/main.css 0 → 100644
View file @ f3cb4073
@import './base.css';
@tailwind base;
@tailwind components;
@tailwind utilities;
#app {
/* max-width: 1280px; */
/* margin: 0 1rem;
padding: 2rem; */
font-weight: normal;
}
.content {
margin: 0 1rem;
padding: 2rem;
}
/* a,
.green {
text-decoration: none;
color: hsla(160, 100%, 37%, 1);
transition: 0.4s;
padding: 3px;
} */
@media (hover: hover) {
/* a:hover {
background-color: hsla(160, 100%, 37%, 0.2);
} */
}
@media (min-width: 1024px) {
/* body {
display: flex;
place-items: center;
} */
/* #app {
display: grid;
grid-template-columns: 1fr 1fr;
padding: 0 2rem;
} */
}
src/components/Categories/Categories.vue 0 → 100644
View file @ f3cb4073
<template>
<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">
<div class="card" v-for="product in products" :key="product.id">
<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 config">
<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>
</div>
</div>
</template>
<script>
export default {
name: "Categories",
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>
.card {
min-height: 35rem;
.card-img {
height: 20rem;
width: 100%;
}
.config {
min-height: 15rem;
}
}
</style>
\ No newline at end of file
src/main.js 0 → 100644
View file @ f3cb4073
import './assets/main.css'
import { createApp } from 'vue'
import App from './App.vue'
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 Categories from "../src/components/Categories/Categories.vue"
import ProductDetail from "../src/Views/ProductDetail/ProductDetail.vue"
import Cart from "../src/views/Cart/Cart.vue"
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: Categories },
{ name: "ProductDetail", path: '/categories/:product/:id', component: ProductDetail },
{ name: "Cart", path: "/cart", component: Cart }
]
})
app.use(router)
app.use(store)
app.mount('#app')
src/store/index.js 0 → 100644
View file @ f3cb4073
import { createStore } from 'vuex'
import axios from "axios";
export default createStore({
state: {
products: [],
cart: [],
},
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);
}
},
actions: {
async getProductsAction(context) {
const { data } = await axios.get("https://fakestoreapi.com/products");
context.commit('getProducts', data)
}
}
})
\ No newline at end of file
tailwind.config.js 0 → 100644
View file @ f3cb4073
/** @type {import('tailwindcss').Config} */
export default {
content: [],
purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx,css}'],
theme: {
extend: {},
},
plugins: [],
}
vite.config.js 0 → 100644
View file @ f3cb4073
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
})
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