Add new budget dialog

web/src/dialogs/NewBudget.vue

@@ -0,0 +1,76 @@
+<script>
+  export default {
+    data () {
+      return {
+        dialog: false,
+        budgetName: ""
+      }
+    },
+    methods: {
+      saveBudget () {
+        console.log(this.$data.budgetName);
+        this.$store.dispatch("newBudget", this.$data.budgetName);
+        this.$data.dialog = false;
+        
+      },
+      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>
+</template>