From d825379a0162ecfc68ae13c5cda25a28181f779b Mon Sep 17 00:00:00 2001
From: Jan Bader <jan@javil.eu>
Date: Fri, 4 Feb 2022 16:34:16 +0000
Subject: [PATCH] Try to use tailwind

---
 web/src/App.vue               | 36 ++++++-------
 web/src/dialogs/NewBudget.vue | 99 +++++++++++------------------------
 web/src/index.css             |  3 ++
 web/src/main.ts               |  6 +--
 web/src/pages/Dashboard.vue   | 12 ++---
 web/src/pages/Index.vue       | 16 +++---
 web/src/pages/Login.vue       | 33 ++++--------
 web/tailwind.config.js        |  5 +-
 web/vite.config.js            |  4 --
 9 files changed, 78 insertions(+), 136 deletions(-)
 create mode 100644 web/src/index.css

diff --git a/web/src/App.vue b/web/src/App.vue
index fe08b65..680443b 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -24,30 +24,27 @@ export default defineComponent({
 </script>
 
 <template>
-  <v-app>
-    <v-app-bar app>
-      <v-app-bar-nav-icon @click="toggleMenu" />
+  <div class="flex-row">
+    <div class="flex w-full">
+      <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>
-
-      <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">
+    <div :class="$store.state.ShowMenu ? 'visible' : 'hidden'">
       <router-view name="sidebar"></router-view>
-    </v-navigation-drawer>
+    </div>
   
-    <v-main>
+    <div>
       <router-view></router-view>
-    </v-main>
-  </v-app>
+    </div>
+  </div>
 </template>
 
 <style>
@@ -55,8 +52,5 @@ export default defineComponent({
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
 }
 </style>
diff --git a/web/src/dialogs/NewBudget.vue b/web/src/dialogs/NewBudget.vue
index 07caffc..5556f28 100644
--- a/web/src/dialogs/NewBudget.vue
+++ b/web/src/dialogs/NewBudget.vue
@@ -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 {
-    data () {
-      return {
-        dialog: false,
-        budgetName: ""
-      }
+export default defineComponent({
+  data() {
+    return {
+      dialog: false,
+      budgetName: ""
+    }
+  },
+  methods: {
+    saveBudget() {
+      this.$store.dispatch(NEW_BUDGET, this.$data.budgetName);
+      this.$data.dialog = false;
     },
-    methods: {
-      saveBudget () {
-        this.$store.dispatch(NEW_BUDGET, this.$data.budgetName);
-        this.$data.dialog = false;
-      },
-      newBudget () {
-        this.$data.dialog = true;
-      }
+    newBudget() {
+      this.$data.dialog = true;
     }
   }
-
+})
 </script>
 
 <template>
-  <v-row justify="center">
-    <v-dialog
-      v-model="dialog"
-    >
-      <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>
-        </v-card-title>
-        <v-card-text>
-          <v-container>
-            <v-row>
-              <v-col>
-                <v-text-field
-                  v-model="budgetName"
-                  label="Budget name"
-                  required
-                ></v-text-field>
-              </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>
+  <button color="primary" dark @click="newBudget">New Budget</button>
+  <div v-if="dialog" justify="center">
+    <div>
+      <div>
+        <span class="text-h5">New Budget</span>
+      </div>
+      <div>
+        <input type="text" v-model="budgetName" label="Budget name" required />
+      </div>
+      <div>
+        <button color="blue darken-1" text @click="dialog = false">Close</button>
+        <button color="blue darken-1" text @click="saveBudget">Save</button>
+      </div>
+    </div>
+  </div>
 </template>
\ No newline at end of file
diff --git a/web/src/index.css b/web/src/index.css
new file mode 100644
index 0000000..bd6213e
--- /dev/null
+++ b/web/src/index.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
\ No newline at end of file
diff --git a/web/src/main.ts b/web/src/main.ts
index e6b7cdd..bd28323 100644
--- a/web/src/main.ts
+++ b/web/src/main.ts
@@ -1,17 +1,13 @@
 import { createApp } from 'vue'
 import App from './App.vue'
+import './index.css'
 import router from './router/routes.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'
 
-loadFonts()
-
 const app = createApp(App)
 app.use(router)
 app.use(store, key)
-app.use(vuetify)
 app.mount('#app')
 
 router.beforeEach(async (to, from, next) => {
diff --git a/web/src/pages/Dashboard.vue b/web/src/pages/Dashboard.vue
index 1bfd725..6965b05 100644
--- a/web/src/pages/Dashboard.vue
+++ b/web/src/pages/Dashboard.vue
@@ -10,13 +10,13 @@ export default defineComponent({
 
 <template>
     <h1>Budgets</h1>
-    <v-container>
-        <v-card v-for="budget in $store.getters.Budgets" class="budget-item">
-            <v-card-title class="text-h5 grey lighten-2">
+    <div>
+        <div v-for="budget in $store.getters.Budgets" class="budget-item">
+            <div class="text-h5 grey lighten-2">
                 <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>
+        </div>
         <NewBudget />
-    </v-container>
+    </div>
 </template>
\ No newline at end of file
diff --git a/web/src/pages/Index.vue b/web/src/pages/Index.vue
index e58bec6..7dc6d55 100644
--- a/web/src/pages/Index.vue
+++ b/web/src/pages/Index.vue
@@ -7,12 +7,12 @@ export default defineComponent({
 </script>
 
 <template>
-	<v-container>
-		<div class="container col-md-8 col-ld-8" id="content">
-			Willkommen bei Budgeteer, der neuen App für's Budget!
-		</div>
-		<div class="container col-md-4" id="login">
-			<a href="/login">Login</a> or <a href="/login">register</a>
-		</div>
-	</v-container>
+  <div>
+    <div class="font-bold" id="content">
+      Willkommen bei Budgeteer, der neuen App für's Budget!
+    </div>
+    <div class="container col-md-4" id="login">
+      <router-link to="/login">Login</router-link> or <router-link to="/login">register</router-link>
+    </div>
+  </div>
 </template>
\ No newline at end of file
diff --git a/web/src/pages/Login.vue b/web/src/pages/Login.vue
index f3905be..a3ce283 100644
--- a/web/src/pages/Login.vue
+++ b/web/src/pages/Login.vue
@@ -6,7 +6,7 @@ import { defineComponent } from "vue";
 export default defineComponent({
     data() {
         return {
-            error: [],
+            error: "",
             login: {
                 user: "",
                 password: ""
@@ -18,14 +18,14 @@ export default defineComponent({
         this.$store.commit(TITLE, "Login");
     },
     methods: {
-        formSubmit(e) {
+        formSubmit(e : MouseEvent) {
             e.preventDefault();
             this.$store.dispatch(LOGIN, this.$data.login)
                 .then(x => {
                     this.$data.error = "";
                     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 redirect to dashboard on success
@@ -35,29 +35,14 @@ export default defineComponent({
 </script>
 
 <template>
-    <v-container>
-        <v-row>
-            <v-col cols="12">
-                <v-text-field v-model="login.user" type="text" label="Username" />
-            </v-col>
-            <v-col cols="12">
-                <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>
+        <div>
+            <input type="text"      v-model="login.user"     label="Username" />
+            <input type="password"  v-model="login.password" label="Password" />
+        </div>
+        <div>{{ error }}</div>
+        <button type="submit" @click="formSubmit">Login</button>
         <p>
             New user?
             <router-link to="/register">Register</router-link>instead!
         </p>
-    </v-container>
 </template>
\ No newline at end of file
diff --git a/web/tailwind.config.js b/web/tailwind.config.js
index 9843c05..8b26c47 100644
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@@ -1,5 +1,8 @@
 module.exports = {
-  content: [],
+  content: [
+    "./index.html",
+    "./src/**/*.{vue,js,ts,jsx,tsx}"
+  ],
   theme: {
     extend: {},
   },
diff --git a/web/vite.config.js b/web/vite.config.js
index e39209e..8e1b264 100644
--- a/web/vite.config.js
+++ b/web/vite.config.js
@@ -1,6 +1,5 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
-import vuetify from '@vuetify/vite-plugin'
 
 import path from 'path'
 
@@ -9,9 +8,6 @@ export default defineConfig({
   plugins: [
     vue(),
     // https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vite-plugin
-    vuetify({
-      autoImport: true,
-    }),
   ],
   define: { 'process.env': {} },
   resolve: {