diff --git a/package-lock.json b/package-lock.json index e9f83a6..7d8be78 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,7 @@ "version": "0.0.0", "dependencies": { "@mdi/font": "5.9.55", + "pinia": "^2.0.28", "roboto-fontface": "*", "sass": "^1.57.1", "typescript": "^4.9.4", @@ -1696,6 +1697,56 @@ "url": "https://github.com/sponsors/jonschlinkert" } }, + "node_modules/pinia": { + "version": "2.0.28", + "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.0.28.tgz", + "integrity": "sha512-YClq9DkqCblq9rlyUual7ezMu/iICWdBtfJrDt4oWU9Zxpijyz7xB2xTwx57DaBQ96UGvvTMORzALr+iO5PVMw==", + "dependencies": { + "@vue/devtools-api": "^6.4.5", + "vue-demi": "*" + }, + "funding": { + "url": "https://github.com/sponsors/posva" + }, + "peerDependencies": { + "@vue/composition-api": "^1.4.0", + "typescript": ">=4.4.4", + "vue": "^2.6.14 || ^3.2.0" + }, + "peerDependenciesMeta": { + "@vue/composition-api": { + "optional": true + }, + "typescript": { + "optional": true + } + } + }, + "node_modules/pinia/node_modules/vue-demi": { + "version": "0.13.11", + "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz", + "integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==", + "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/pkg-dir": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz", @@ -3548,6 +3599,23 @@ "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==" }, + "pinia": { + "version": "2.0.28", + "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.0.28.tgz", + "integrity": "sha512-YClq9DkqCblq9rlyUual7ezMu/iICWdBtfJrDt4oWU9Zxpijyz7xB2xTwx57DaBQ96UGvvTMORzALr+iO5PVMw==", + "requires": { + "@vue/devtools-api": "^6.4.5", + "vue-demi": "*" + }, + "dependencies": { + "vue-demi": { + "version": "0.13.11", + "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz", + "integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==", + "requires": {} + } + } + }, "pkg-dir": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz", diff --git a/package.json b/package.json index 8708f0d..a2ceaca 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ }, "dependencies": { "@mdi/font": "5.9.55", + "pinia": "^2.0.28", "roboto-fontface": "*", "sass": "^1.57.1", "typescript": "^4.9.4", diff --git a/src/App.vue b/src/App.vue index 3d65cce..0380699 100644 --- a/src/App.vue +++ b/src/App.vue @@ -7,64 +7,6 @@ const drawer = ref(); diff --git a/src/components/AddItemForm.vue b/src/components/AddItemForm.vue new file mode 100644 index 0000000..13cf66f --- /dev/null +++ b/src/components/AddItemForm.vue @@ -0,0 +1,49 @@ + + + diff --git a/src/components/DefaultPage.vue b/src/components/DefaultPage.vue new file mode 100644 index 0000000..8435ad8 --- /dev/null +++ b/src/components/DefaultPage.vue @@ -0,0 +1,39 @@ + + + diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue deleted file mode 100644 index ad8b290..0000000 --- a/src/components/HelloWorld.vue +++ /dev/null @@ -1,152 +0,0 @@ - - - diff --git a/src/components/ItemList.vue b/src/components/ItemList.vue new file mode 100644 index 0000000..81b68c3 --- /dev/null +++ b/src/components/ItemList.vue @@ -0,0 +1,23 @@ + + + diff --git a/src/main.js b/src/main.js index 6168e19..cb38729 100644 --- a/src/main.js +++ b/src/main.js @@ -3,10 +3,12 @@ import App from './App.vue' import vuetify from './plugins/vuetify' import { loadFonts } from './plugins/webfontloader' import router from './router'; +import { createPinia } from 'pinia'; loadFonts() createApp(App) .use(router) .use(vuetify) + .use(createPinia()) .mount('#app') diff --git a/src/router/index.ts b/src/router/index.ts index 40925b1..6728da9 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -1,5 +1,7 @@ import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'; import HomeView from '../views/HomeView.vue'; +import ShoppingList from '../views/ShoppingList.vue'; +import AddItem from '../views/AddItem.vue'; const routes: Array = [ { @@ -7,6 +9,16 @@ const routes: Array = [ name: "home", component: HomeView, }, + { + path: "/shopping-list", + name: "shopping-list", + component: ShoppingList, + }, + { + path: "/add-item", + name: "add-item", + component: AddItem, + }, ]; const router = createRouter({ diff --git a/src/store/dummyData.ts b/src/store/dummyData.ts new file mode 100644 index 0000000..daf0013 --- /dev/null +++ b/src/store/dummyData.ts @@ -0,0 +1,30 @@ +const lukas = { + name: 'lukas', +}; + +const laura = { + name: 'laura' +}; + +export const users = [ lukas, laura ]; + +export const dummyList = [ + { + name: 'Banana', + price: 200, + user: lukas, + isBought: false, + }, + { + name: 'Apple', + price: 150, + user: lukas, + isBought: false, + }, + { + name: 'Butter', + price: 149, + user: laura, + isBought: false, + }, +]; diff --git a/src/store/shoppingList.ts b/src/store/shoppingList.ts new file mode 100644 index 0000000..af0a168 --- /dev/null +++ b/src/store/shoppingList.ts @@ -0,0 +1,36 @@ +import { defineStore } from 'pinia'; +import { dummyList, users } from './dummyData'; + +type User = { + name: string; +}; + +type ShoppingItem = { + name: string; + price: number; + isBought: boolean; + user: User; +}; + +export const useShoppingListStore = defineStore('shoppingList', { + state() { + return { + items: dummyList as Array, + users: users as Array, + }; + }, + actions: {}, + getters: { + openItems: state => state.items.filter(item => !item.isBought), + boughtItems: state => state.items.filter(item => !!item.isBought), + itemsByUser: state => groupItemsByUser(state.items), + openItemsByUser: state => groupItemsByUser(state.items.filter(item => !item.isBought)), + boughtItemsByUser: state => groupItemsByUser(state.items.filter(item => !!item.isBought)), + }, +}); + +export const groupItemsByUser = items => items.reduce((groups, item) => { + if (!groups[item.user.name]) groups[item.user.name] = []; + groups[item.user.name].push(item); + return groups; +}, {}); diff --git a/src/views/AddItem.vue b/src/views/AddItem.vue new file mode 100644 index 0000000..261990c --- /dev/null +++ b/src/views/AddItem.vue @@ -0,0 +1,12 @@ + + + diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue index 4438778..e7745e3 100644 --- a/src/views/HomeView.vue +++ b/src/views/HomeView.vue @@ -3,16 +3,15 @@

- Hallo World + Welcome :D

- bla bla + a simple app to organize your shopping list

- Login - Chat + get started diff --git a/src/views/ShoppingList.vue b/src/views/ShoppingList.vue new file mode 100644 index 0000000..d39b1b0 --- /dev/null +++ b/src/views/ShoppingList.vue @@ -0,0 +1,36 @@ + + +