add basic functionality
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/push Build is passing
Details
parent
ff2dea6a76
commit
d5b29bdc91
@ -0,0 +1,49 @@
|
||||
<script setup lang="ts">
|
||||
import { useShoppingListStore } from '../store/shoppingList';
|
||||
import { ref, reactive } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
const store = useShoppingListStore();
|
||||
const router = useRouter();
|
||||
|
||||
const isValid = ref(false);
|
||||
const item = reactive({
|
||||
name: '',
|
||||
price: 0.99,
|
||||
user: '',
|
||||
});
|
||||
|
||||
const form = ref(null);
|
||||
|
||||
const submit = () => {
|
||||
store.items.push({
|
||||
name: item.name,
|
||||
price: item.price * 100,
|
||||
user: store.users.find(user => user.name === item.user),
|
||||
});
|
||||
router.push('/shopping-list');
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-form ref="form" v-model="isValid" lazy-validation>
|
||||
<v-text-field
|
||||
label="Item Name"
|
||||
required
|
||||
v-model="item.name"
|
||||
/>
|
||||
<v-text-field
|
||||
label="Price"
|
||||
suffix="€"
|
||||
required
|
||||
v-model="item.price"
|
||||
/>
|
||||
<v-select
|
||||
label="User"
|
||||
:items="store.users.map(user => user.name)"
|
||||
required
|
||||
v-model="item.user"
|
||||
/>
|
||||
<v-btn color="primary" @click="submit()">add item</v-btn>
|
||||
</v-form>
|
||||
</template>
|
||||
@ -0,0 +1,39 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, defineProps } from 'vue';
|
||||
|
||||
defineProps({
|
||||
tabs: Array,
|
||||
title: String,
|
||||
});
|
||||
const tab = ref(null);
|
||||
|
||||
const back = () => {
|
||||
window.history.back();
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-app-bar
|
||||
:collapse="false"
|
||||
:collapse-on-scroll="true"
|
||||
absolute
|
||||
color="blue accent-4"
|
||||
dark
|
||||
scroll-target="#scrolling-techniques-6"
|
||||
>
|
||||
<v-btn icon @click="back()">
|
||||
<v-icon>mdi-arrow-left</v-icon>
|
||||
</v-btn>
|
||||
<v-toolbar-title>{{ title }}</v-toolbar-title>
|
||||
<template v-if="tabs?.length" v-slot:extension>
|
||||
<v-tabs align-with-title v-model="tab">
|
||||
<slot name="tabs">
|
||||
<v-tab v-for="tab of tabs" :value="tab.name.toLowerCase().replaceAll(' ', '-')">{{ tab.name }}</v-tab>
|
||||
</slot>
|
||||
</v-tabs>
|
||||
</template>
|
||||
</v-app-bar>
|
||||
<v-main>
|
||||
<slot :tab="tab"/>
|
||||
</v-main>
|
||||
</template>
|
||||
@ -1,152 +0,0 @@
|
||||
<template>
|
||||
<v-container>
|
||||
<v-row class="text-center">
|
||||
<v-col cols="12">
|
||||
<v-img
|
||||
:src="logo"
|
||||
class="my-3"
|
||||
contain
|
||||
height="200"
|
||||
/>
|
||||
</v-col>
|
||||
|
||||
<v-col class="mb-4">
|
||||
<h1 class="display-2 font-weight-bold mb-3">
|
||||
Welcome to the Vuetify 3 Beta
|
||||
</h1>
|
||||
|
||||
<h4>Vite Preview</h4>
|
||||
|
||||
<p class="subheading font-weight-regular">
|
||||
For help and collaboration with other Vuetify developers,
|
||||
<br>please join our online
|
||||
<a
|
||||
href="https://community.vuetifyjs.com"
|
||||
target="_blank"
|
||||
>Discord Community</a>
|
||||
</p>
|
||||
</v-col>
|
||||
|
||||
<v-col
|
||||
class="mb-5"
|
||||
cols="12"
|
||||
>
|
||||
<h2 class="headline font-weight-bold mb-5">
|
||||
What's next?
|
||||
</h2>
|
||||
|
||||
<v-row justify="center">
|
||||
<a
|
||||
v-for="(next, i) in whatsNext"
|
||||
:key="i"
|
||||
:href="next.href"
|
||||
class="subheading mx-3"
|
||||
target="_blank"
|
||||
>
|
||||
{{ next.text }}
|
||||
</a>
|
||||
</v-row>
|
||||
</v-col>
|
||||
|
||||
<v-col
|
||||
class="mb-5"
|
||||
cols="12"
|
||||
>
|
||||
<h2 class="headline font-weight-bold mb-5">
|
||||
Important Links
|
||||
</h2>
|
||||
|
||||
<v-row justify="center">
|
||||
<a
|
||||
v-for="(link, i) in importantLinks"
|
||||
:key="i"
|
||||
:href="link.href"
|
||||
class="subheading mx-3"
|
||||
target="_blank"
|
||||
>
|
||||
{{ link.text }}
|
||||
</a>
|
||||
</v-row>
|
||||
</v-col>
|
||||
|
||||
<v-col
|
||||
class="mb-5"
|
||||
cols="12"
|
||||
>
|
||||
<h2 class="headline font-weight-bold mb-5">
|
||||
Ecosystem
|
||||
</h2>
|
||||
|
||||
<v-row justify="center">
|
||||
<a
|
||||
v-for="(eco, i) in ecosystem"
|
||||
:key="i"
|
||||
:href="eco.href"
|
||||
class="subheading mx-3"
|
||||
target="_blank"
|
||||
>
|
||||
{{ eco.text }}
|
||||
</a>
|
||||
</v-row>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import logo from '../assets/logo.svg'
|
||||
|
||||
export default {
|
||||
name: 'HelloWorld',
|
||||
|
||||
data: () => ({
|
||||
ecosystem: [
|
||||
{
|
||||
text: 'vuetify-loader',
|
||||
href: 'https://github.com/vuetifyjs/vuetify-loader/tree/next',
|
||||
},
|
||||
{
|
||||
text: 'github',
|
||||
href: 'https://github.com/vuetifyjs/vuetify/tree/next',
|
||||
},
|
||||
{
|
||||
text: 'awesome-vuetify',
|
||||
href: 'https://github.com/vuetifyjs/awesome-vuetify',
|
||||
},
|
||||
],
|
||||
importantLinks: [
|
||||
{
|
||||
text: 'Chat',
|
||||
href: 'https://community.vuetifyjs.com',
|
||||
},
|
||||
{
|
||||
text: 'Made with Vuetify',
|
||||
href: 'https://madewithvuejs.com/vuetify',
|
||||
},
|
||||
{
|
||||
text: 'Twitter',
|
||||
href: 'https://twitter.com/vuetifyjs',
|
||||
},
|
||||
{
|
||||
text: 'Articles',
|
||||
href: 'https://medium.com/vuetify',
|
||||
},
|
||||
],
|
||||
logo,
|
||||
whatsNext: [
|
||||
{
|
||||
text: 'Explore components',
|
||||
href: 'https://vuetifyjs.com',
|
||||
},
|
||||
{
|
||||
text: 'Roadmap',
|
||||
href: 'https://vuetifyjs.com/introduction/roadmap/',
|
||||
},
|
||||
{
|
||||
text: 'Frequently Asked Questions',
|
||||
href: 'https://vuetifyjs.com/getting-started/frequently-asked-questions',
|
||||
},
|
||||
],
|
||||
}),
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,23 @@
|
||||
<script setup lang="ts">
|
||||
import { defineProps } from 'vue';
|
||||
import { groupItemsByUser } from '../store/shoppingList';
|
||||
|
||||
defineProps({
|
||||
items: Array,
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-list v-if="items.length" lines="theee" select-strategy="multiple">
|
||||
<div v-for="(items, user) of groupItemsByUser(items)">
|
||||
<v-list-subheader>{{ user }}</v-list-subheader>
|
||||
<div v-for="item in items">
|
||||
<v-list-item @click="item.isBought = !item.isBought">
|
||||
<v-list-item-title>{{ item.name }}</v-list-item-title>
|
||||
<v-list-item-subtitle>{{ item.price / 100 }} €</v-list-item-subtitle>
|
||||
</v-list-item>
|
||||
</div>
|
||||
</div>
|
||||
</v-list>
|
||||
<p v-else>There are no items in this list.</p>
|
||||
</template>
|
||||
@ -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,
|
||||
},
|
||||
];
|
||||
@ -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<ShoppingItem>,
|
||||
users: users as Array<User>,
|
||||
};
|
||||
},
|
||||
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;
|
||||
}, {});
|
||||
@ -0,0 +1,12 @@
|
||||
<script setup lang="ts">
|
||||
import DefaultPage from '../components/DefaultPage.vue';
|
||||
import AddItemForm from '../components/AddItemForm.vue';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DefaultPage title="Add Item">
|
||||
<v-container>
|
||||
<AddItemForm/>
|
||||
</v-container>
|
||||
</DefaultPage>
|
||||
</template>
|
||||
@ -0,0 +1,36 @@
|
||||
<script setup lang="ts">
|
||||
import DefaultPage from '../components/DefaultPage.vue';
|
||||
import ItemList from '../components/ItemList.vue';
|
||||
import { useShoppingListStore } from '../store/shoppingList';
|
||||
|
||||
const store = useShoppingListStore();
|
||||
|
||||
const tabs = [
|
||||
{ name: 'open items' },
|
||||
{ name: 'bought items' },
|
||||
];
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DefaultPage :tabs="tabs" v-slot="slot" title="Shopping List">
|
||||
<v-container>
|
||||
<v-window v-model="slot.tab">
|
||||
<v-window-item value="open-items">
|
||||
<ItemList :items="store.openItems"></ItemList>
|
||||
</v-window-item>
|
||||
<v-window-item value="bought-items">
|
||||
<ItemList :items="store.boughtItems"></ItemList>
|
||||
</v-window-item>
|
||||
</v-window>
|
||||
</v-container>
|
||||
<v-card-text style="display: flex; justify-content: end">
|
||||
<v-btn
|
||||
icon="mdi-plus"
|
||||
color="red"
|
||||
to="/add-item"
|
||||
elevation="8"
|
||||
size="large"
|
||||
/>
|
||||
</v-card-text>
|
||||
</DefaultPage>
|
||||
</template>
|
||||
Loading…
Reference in new issue