Created
April 5, 2023 12:01
-
-
Save buildbro/1073f477a5d980ae230e8dadc6c634a1 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import firebase from 'firebase'; | |
import { onUnmounted, ref } from 'vue'; | |
const firebaseConfig = { | |
apiKey: "", | |
authDomain: "", | |
projectId: "", | |
storageBucket: "", | |
messagingSenderId: "", | |
appId: "" | |
}; | |
const firebaseApp = firebase.initializeApp(firebaseConfig); | |
const db = firebaseApp.firestore(); | |
const inventoryCollection = db.collection("inventory"); | |
export const createUser = user => { | |
user.created_at = firebase.firestore.Timestamp.now() | |
//const id = usersCollection.doc().id | |
return usersCollection.doc(user.userId).set(user) | |
} | |
export const getInventory = async() => { | |
let inventoryItems = ''; | |
await inventoryCollection.get() | |
.then((querySnapshot) => { | |
console.log(JSON.stringify(querySnapshot)); | |
}) | |
} | |
export const useLoadInventory = () => { | |
const items = ref([]); | |
const close = inventoryCollection.onSnapshot(snapShot => { | |
items.value = snapShot.docs.map(doc => ({id: doc.id, ...doc.data()})); | |
}); | |
onUnmounted(close); | |
console.log(JSON.stringify(items)); | |
return items; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script> | |
import firebase from "firebase"; | |
import { useLoadInventory } from "@/firebase"; | |
import { onMounted, reactive } from "vue"; | |
export default { | |
name: "HomeView", | |
setup() { | |
const inventoryData = useLoadInventory(); | |
return { inventoryData }; | |
}, | |
}; | |
</script> | |
<template> | |
<main> | |
<div class="container"> | |
<h1>A very simple store to get your business online</h1> | |
<div class="row"> | |
<div class="col-8"> | |
<div class="row"> | |
<div class="col-6" v-for="item in inventoryData" :key="item.id"> | |
<img :src="item.photo1" alt="" /> | |
<h3>{{ item.itemName }}</h3> | |
</div> | |
</div> | |
</div> | |
<div class="col-4"> | |
<h3>Menu</h3> | |
<router-link to="/login">Login</router-link> | |
</div> | |
</div> | |
</div> | |
</main> | |
</template> | |
<style> | |
img { | |
max-width: 100%; | |
} | |
</style> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment