file reorganize

frontend/src/components/Settings/Theme/NewThemeDialog.vue

@@ -0,0 +1,73 @@
+<template>
+  <div>
+    <v-btn text color="success" @click="dialog = true"> New </v-btn>
+    <v-dialog v-model="dialog" width="400">
+      <v-card>
+        <v-card-title> Add a New Theme </v-card-title>
+        <v-card-text>
+          <v-text-field
+            label="Theme Name"
+            v-model="themeName"
+            :rules="[rules.required]"
+          ></v-text-field>
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer></v-spacer>
+          <v-btn color="grey" text @click="dialog = false"> Cancel </v-btn>
+          <v-btn color="success" text @click="Select" :disabled="!themeName">
+            Create
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    buttonText: String,
+    value: String,
+  },
+  data() {
+    return {
+      dialog: false,
+      themeName: "",
+      rules: {
+        required: (val) => !!val || "Required.",
+      },
+    };
+  },
+
+  watch: {
+    color() {
+      this.updateColor();
+    },
+  },
+  methods: {
+    randomColor() {
+      return "#" + Math.floor(Math.random() * 16777215).toString(16);
+    },
+    Select() {
+      const newTheme = {
+        name: this.themeName,
+        colors: {
+          primary: "#E58325",
+          accent: "#00457A",
+          secondary: "#973542",
+          success: "#5AB1BB",
+          info: "#4990BA",
+          warning: "#FF4081",
+          error: "#EF5350",
+        },
+      };
+
+      this.$emit("new-theme", newTheme);
+      this.dialog = false;
+    },
+  },
+};
+</script>
+
+<style>
+</style>