jacob1123/budgeteer
1
1
Fork 0
Code Issues 12 Pull Requests 1 Packages Releases 1 Wiki Activity

Try to use tailwind

Browse Source
This commit is contained in:
Jan Bader 2022-02-04 16:34:16 +00:00
parent f7dfc7b455
commit d825379a01
9 changed files with 78 additions and 136 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
web/src/App.vue
View File

@ -24,30 +24,27 @@ export default defineComponent({
</script> </script>
<template> <template>
<v-app> <div class="flex-row">
<v-app-bar app> <div class="flex w-full">
<v-app-bar-nav-icon @click="toggleMenu" /> <span class="flex-1" @click="toggleMenu">Home</span>
<v-app-bar-title>{{$store.getters.CurrentBudget.Name}}</v-app-bar-title> <span class="flex-1">{{$store.getters.CurrentBudget.Name}}</span>
<v-spacer></v-spacer> <div class="flex flex-1 flex-row">
<router-link class="flex-1" v-if="loggedIn" to="/">Dashboard</router-link>
<router-link class="flex-1" v-if="!loggedIn" to="/login">Login</router-link>
<a class="flex-1" v-if="loggedIn" @click="logout">Logout</a>
</div>
</div>
<v-btn v-if="loggedIn"><router-link to="/">Dashboard</router-link></v-btn> <div :class="$store.state.ShowMenu ? 'visible' : 'hidden'">
<v-spacer></v-spacer>
<v-btn v-if="!loggedIn"><router-link to="/login">Login</router-link></v-btn>
<v-btn v-if="loggedIn"><a @click="logout">Logout</a></v-btn>
</v-app-bar>
<v-navigation-drawer app v-model="$store.state.ShowMenu">
<router-view name="sidebar"></router-view> <router-view name="sidebar"></router-view>
</v-navigation-drawer> </div>
<v-main> <div>
<router-view></router-view> <router-view></router-view>
</v-main> </div>
</v-app> </div>
</template> </template>
<style> <style>
@ -55,8 +52,5 @@ export default defineComponent({
font-family: Avenir, Helvetica, Arial, sans-serif; font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
} }
</style> </style>

79
web/src/dialogs/NewBudget.vue
View File

@ -1,75 +1,40 @@
<script>import { NEW_BUDGET } from "../store/action-types"; <script lang="ts">
import { defineComponent } from "vue";
import { NEW_BUDGET } from "../store/action-types";
export default { export default defineComponent({
data () { data() {
return { return {
dialog: false, dialog: false,
budgetName: "" budgetName: ""
} }
}, },
methods: { methods: {
saveBudget () { saveBudget() {
this.$store.dispatch(NEW_BUDGET, this.$data.budgetName); this.$store.dispatch(NEW_BUDGET, this.$data.budgetName);
this.$data.dialog = false; this.$data.dialog = false;
}, },
newBudget () { newBudget() {
this.$data.dialog = true; this.$data.dialog = true;
} }
} }
} })
</script> </script>
<template> <template>
<v-row justify="center"> <button color="primary" dark @click="newBudget">New Budget</button>
<v-dialog <div v-if="dialog" justify="center">
v-model="dialog" <div>
> <div>
<template v-slot:activator="{ on, attrs }">
<v-btn
color="primary"
dark
v-bind="attrs"
@click="newBudget"
>
New Budget
</v-btn>
</template>
<v-card>
<v-card-title>
<span class="text-h5">New Budget</span> <span class="text-h5">New Budget</span>
</v-card-title> </div>
<v-card-text> <div>
<v-container> <input type="text" v-model="budgetName" label="Budget name" required />
<v-row> </div>
<v-col> <div>
<v-text-field <button color="blue darken-1" text @click="dialog = false">Close</button>
v-model="budgetName" <button color="blue darken-1" text @click="saveBudget">Save</button>
label="Budget name" </div>
required </div>
></v-text-field> </div>
</v-col>
</v-row>
</v-container>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn
color="blue darken-1"
text
@click="dialog = false"
>
Close
</v-btn>
<v-btn
color="blue darken-1"
text
@click="saveBudget"
>
Save
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</v-row>
</template> </template>

3
web/src/index.css Normal file
View File

@ -0,0 +1,3 @@
@tailwind base;
@tailwind components;
@tailwind utilities;

6
web/src/main.ts
View File

@ -1,17 +1,13 @@
import { createApp } from 'vue' import { createApp } from 'vue'
import App from './App.vue' import App from './App.vue'
import './index.css'
import router from './router/routes.js' import router from './router/routes.js'
import { store, key } from './store/index.js' import { store, key } from './store/index.js'
import vuetify from './plugins/vuetify'
import { loadFonts } from './plugins/webfontloader'
import { SET_CURRENT_ACCOUNT, SET_CURRENT_BUDGET } from './store/action-types' import { SET_CURRENT_ACCOUNT, SET_CURRENT_BUDGET } from './store/action-types'
loadFonts()
const app = createApp(App) const app = createApp(App)
app.use(router) app.use(router)
app.use(store, key) app.use(store, key)
app.use(vuetify)
app.mount('#app') app.mount('#app')
router.beforeEach(async (to, from, next) => { router.beforeEach(async (to, from, next) => {

12
web/src/pages/Dashboard.vue
View File

@ -10,13 +10,13 @@ export default defineComponent({
<template> <template>
<h1>Budgets</h1> <h1>Budgets</h1>
<v-container> <div>
<v-card v-for="budget in $store.getters.Budgets" class="budget-item"> <div v-for="budget in $store.getters.Budgets" class="budget-item">
<v-card-title class="text-h5 grey lighten-2"> <div class="text-h5 grey lighten-2">
<router-link v-bind:to="'/budget/'+budget.ID">{{budget.Name}}{{budget.ID == budgetid ? " *" : ""}}</router-link> <router-link v-bind:to="'/budget/'+budget.ID">{{budget.Name}}{{budget.ID == budgetid ? " *" : ""}}</router-link>
</v-card-title> </div>
<v-card-text><span class="time"></span></v-card-text> <v-card-text><span class="time"></span></v-card-text>
</v-card> </div>
<NewBudget /> <NewBudget />
</v-container> </div>
</template> </template>

8
web/src/pages/Index.vue
View File

@ -7,12 +7,12 @@ export default defineComponent({
</script> </script>
<template> <template>
<v-container> <div>
<div class="container col-md-8 col-ld-8" id="content"> <div class="font-bold" id="content">
Willkommen bei Budgeteer, der neuen App für's Budget! Willkommen bei Budgeteer, der neuen App für's Budget!
</div> </div>
<div class="container col-md-4" id="login"> <div class="container col-md-4" id="login">
<a href="/login">Login</a> or <a href="/login">register</a> <router-link to="/login">Login</router-link> or <router-link to="/login">register</router-link>
</div>
</div> </div>
</v-container>
</template> </template>

33
web/src/pages/Login.vue
View File

@ -6,7 +6,7 @@ import { defineComponent } from "vue";
export default defineComponent({ export default defineComponent({
data() { data() {
return { return {
error: [], error: "",
login: { login: {
user: "", user: "",
password: "" password: ""
@ -18,14 +18,14 @@ export default defineComponent({
this.$store.commit(TITLE, "Login"); this.$store.commit(TITLE, "Login");
}, },
methods: { methods: {
formSubmit(e) { formSubmit(e : MouseEvent) {
e.preventDefault(); e.preventDefault();
this.$store.dispatch(LOGIN, this.$data.login) this.$store.dispatch(LOGIN, this.$data.login)
.then(x => { .then(x => {
this.$data.error = ""; this.$data.error = "";
this.$router.replace("/dashboard"); this.$router.replace("/dashboard");
}) })
.catch(x => this.$data.error = ["The entered credentials are invalid!"]); .catch(x => this.$data.error = "The entered credentials are invalid!");
// TODO display invalidCredentials // TODO display invalidCredentials
// TODO redirect to dashboard on success // TODO redirect to dashboard on success
@ -35,29 +35,14 @@ export default defineComponent({
</script> </script>
<template> <template>
<v-container> <div>
<v-row> <input type="text" v-model="login.user" label="Username" />
<v-col cols="12"> <input type="password" v-model="login.password" label="Password" />
<v-text-field v-model="login.user" type="text" label="Username" /> </div>
</v-col> <div>{{ error }}</div>
<v-col cols="12"> <button type="submit" @click="formSubmit">Login</button>
<v-text-field
v-model="login.password"
label="Password"
:append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
:type="showPassword ? 'text' : 'password'"
@click:append="showPassword = showPassword"
:error-message="error"
error-count="2"
error
/>
</v-col>
</v-row>
<div class="form-group">{{ error }}</div>
<v-btn type="submit" @click="formSubmit">Login</v-btn>
<p> <p>
New user? New user?
<router-link to="/register">Register</router-link>instead! <router-link to="/register">Register</router-link>instead!
</p> </p>
</v-container>
</template> </template>

5
web/tailwind.config.js
View File

@ -1,5 +1,8 @@
module.exports = { module.exports = {
content: [], content: [
"./index.html",
"./src/**/*.{vue,js,ts,jsx,tsx}"
],
theme: { theme: {
extend: {}, extend: {},
}, },

4
web/vite.config.js
View File

@ -1,6 +1,5 @@
import { defineConfig } from 'vite' import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue' import vue from '@vitejs/plugin-vue'
import vuetify from '@vuetify/vite-plugin'
import path from 'path' import path from 'path'
@ -9,9 +8,6 @@ export default defineConfig({
plugins: [ plugins: [
vue(), vue(),
// https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vite-plugin // https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vite-plugin
vuetify({
autoImport: true,
}),
], ],
define: { 'process.env': {} }, define: { 'process.env': {} },
resolve: { resolve: {