code cleanup

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

@@ -1,9 +1,22 @@
 <template>
   <div>
-    <v-btn text color="info" @click="dialog = true"> {{$t('general.new')}} </v-btn>
+    <v-btn text color="info" @click="dialog = true">
-    <v-dialog v-model="dialog" width="400">
+      {{ $t("settings.add-a-new-theme") }}
+    </v-btn>
+    <v-dialog v-model="dialog" width="500">
       <v-card>
-        <v-card-title> {{$t('settings.add-a-new-theme')}} </v-card-title>
+        <v-app-bar dense dark color="primary mb-2">
+          <v-icon large left class="mt-1">
+            mdi-format-color-fill
+          </v-icon>
+
+          <v-toolbar-title class="headline">
+            {{ $t("settings.add-a-new-theme") }}
+          </v-toolbar-title>
+
+          <v-spacer></v-spacer>
+        </v-app-bar>
+        <v-card-title> </v-card-title>
         <v-card-text>
           <v-text-field
             :label="$t('settings.theme.theme-name')"
@@ -13,9 +26,11 @@
         </v-card-text>
         <v-card-actions>
           <v-spacer></v-spacer>
-          <v-btn color="grey" text @click="dialog = false"> {{$t('general.cancel')}} </v-btn>
+          <v-btn color="grey" text @click="dialog = false">
+            {{ $t("general.cancel") }}
+          </v-btn>
           <v-btn color="success" text @click="Select" :disabled="!themeName">
-            {{$t('general.create')}}
+            {{ $t("general.create") }}
           </v-btn>
         </v-card-actions>
       </v-card>
@@ -34,7 +49,8 @@ export default {
       dialog: false,
       themeName: "",
       rules: {
-        required: (val) => !!val || this.$t("settings.theme.theme-name-is-required"),
+        required: val =>
+          !!val || this.$t("settings.theme.theme-name-is-required"),
       },
     };
   },

frontend/src/components/Admin/Theme/ThemeCard.vue

@@ -1,7 +1,16 @@
 <template>
+  <div>
+    <Confirmation
+      :title="$t('settings.theme.delete-theme')"
+      :message="$t('settings.theme.are-you-sure-you-want-to-delete-this-theme')"
+      color="error"
+      icon="mdi-alert-circle"
+      ref="deleteThemeConfirm"
+      v-on:confirm="deleteSelectedTheme()"
+    />
     <v-card flat outlined class="ma-2">
       <v-card-text class="mb-n5 mt-n2">
-      <h3>{{ theme.name }} {{ current ? "(Current)" : ""}}</h3>
+        <h3>{{ theme.name }} {{ current ? "(Current)" : "" }}</h3>
       </v-card-text>
       <v-card-text>
         <v-row dense>
@@ -18,21 +27,56 @@
       </v-card-text>
       <v-divider></v-divider>
       <v-card-actions>
-      <v-btn text color="error">Delete</v-btn>
+        <v-btn text color="error" @click="confirmDelete"> Delete </v-btn>
         <v-spacer></v-spacer>
-      <v-btn text color="success">Apply</v-btn>
+        <!-- <v-btn text color="accent" @click="editTheme">Edit</v-btn> -->
+        <v-btn text color="success" @click="saveThemes">Apply</v-btn>
       </v-card-actions>
     </v-card>
+  </div>
 </template>
 
 <script>
+import Confirmation from "@/components/UI/Confirmation";
+import api from "@/api";
+
+const DELETE_EVENT = "delete";
+const APPLY_EVENT = "apply";
+const EDIT_EVENT = "edit";
 export default {
+  components: {
+    Confirmation,
+  },
   props: {
     theme: Object,
     current: {
       default: false,
     },
   },
+  methods: {
+    confirmDelete() {
+      if (this.theme.name === "default") {
+        // Notify User Can't Delete Default
+      } else if (this.theme !== {}) {
+        this.$refs.deleteThemeConfirm.open();
+      }
+    },
+    async deleteSelectedTheme() {
+      //Delete Theme from DB
+      await api.themes.delete(this.theme.name);
+
+      //Get the new list of available from DB
+      this.availableThemes = await api.themes.requestAll();
+      this.$emit(DELETE_EVENT);
+    },
+    async saveThemes() {
+      this.$store.commit("setTheme", this.theme);
+      this.$emit(APPLY_EVENT, this.theme);
+    },
+    editTheme() {
+      this.$emit(EDIT_EVENT);
+    },
+  },
 };
 </script>
 

frontend/src/pages/Admin/Theme/index.vue

@@ -56,42 +56,6 @@
         }}
       </p>
 
-      <v-form ref="form" lazy-validation>
-        <v-row dense align="center">
-          <v-col cols="12" md="4" sm="3">
-            <v-select
-              :label="$t('settings.theme.saved-color-theme')"
-              :items="availableThemes"
-              item-text="name"
-              return-object
-              v-model="selectedTheme"
-              @change="themeSelected"
-              :rules="[v => !!v || $t('settings.theme.theme-is-required')]"
-              required
-            >
-            </v-select>
-          </v-col>
-          <v-col>
-            <v-btn-toggle group class="mt-n5">
-              <NewThemeDialog @new-theme="appendTheme" class="mt-1" />
-              <v-btn text color="error" @click="deleteSelectedThemeValidation">
-                {{ $t("general.delete") }}
-              </v-btn>
-            </v-btn-toggle>
-            <Confirmation
-              :title="$t('settings.theme.delete-theme')"
-              :message="
-                $t('settings.theme.are-you-sure-you-want-to-delete-this-theme')
-              "
-              color="error"
-              icon="mdi-alert-circle"
-              ref="deleteThemeConfirm"
-              v-on:confirm="deleteSelectedTheme()"
-            />
-          </v-col>
-          <v-spacer></v-spacer>
-        </v-row>
-      </v-form>
       <v-row dense align-content="center" v-if="selectedTheme.colors">
         <v-col>
           <ColorPickerDialog
@@ -152,12 +116,14 @@
           <ThemeCard
             :theme="theme"
             :current="selectedTheme.name == theme.name ? true : false"
+            @delete="getAllThemes"
           />
         </v-col>
       </v-row>
     </v-card-text>
 
     <v-card-actions>
+      <NewThemeDialog @new-theme="appendTheme" class="mt-1" />
       <v-spacer></v-spacer>
       <v-btn color="success" @click="saveThemes" class="mr-2">
         <v-icon left> mdi-content-save </v-icon>
@@ -171,61 +137,35 @@
 import api from "@/api";
 import ColorPickerDialog from "@/components/Admin/Theme/ColorPickerDialog";
 import NewThemeDialog from "@/components/Admin/Theme/NewThemeDialog";
-import Confirmation from "@/components/UI/Confirmation";
 import ThemeCard from "@/components/Admin/Theme/ThemeCard";
 
 export default {
   components: {
     ColorPickerDialog,
-    Confirmation,
     NewThemeDialog,
     ThemeCard,
   },
   data() {
     return {
-      selectedTheme: {},
       selectedDarkMode: "system",
       availableThemes: [],
     };
   },
   async mounted() {
-    this.availableThemes = await api.themes.requestAll();
+    await this.getAllThemes();
-    this.selectedTheme = this.$store.getters.getActiveTheme;
+
     this.selectedDarkMode = this.$store.getters.getDarkMode;
   },
 
-  methods: {
+  computed: {
-    /**
+    selectedTheme() {
-     * Open the delete confirmation.
+      return this.$store.getters.getActiveTheme;
-     */
+    },
-    deleteSelectedThemeValidation() {
-      if (this.$refs.form.validate()) {
-        if (this.selectedTheme.name === "default") {
-          // Notify User Can't Delete Default
-        } else if (this.selectedTheme !== {}) {
-          this.$refs.deleteThemeConfirm.open();
-        }
-      }
   },
-    /**
-     * Delete the selected Theme
-     */
-    async deleteSelectedTheme() {
-      //Delete Theme from DB
-      await api.themes.delete(this.selectedTheme.name);
 
-      //Get the new list of available from DB
+  methods: {
+    async getAllThemes() {
       this.availableThemes = await api.themes.requestAll();
-
-      //Change to default if deleting current theme.
-      if (
-        !this.availableThemes.some(
-          theme => theme.name === this.selectedTheme.name
-        )
-      ) {
-        await this.$store.dispatch("resetTheme");
-        this.selectedTheme = this.$store.getters.getActiveTheme;
-      }
     },
     /**
      * Create the new Theme and select it.
@@ -233,14 +173,8 @@ export default {
     async appendTheme(NewThemeDialog) {
       await api.themes.create(NewThemeDialog);
       this.availableThemes.push(NewThemeDialog);
-      this.selectedTheme = NewThemeDialog;
+      this.$store.commit("setTheme", NewThemeDialog);
     },
-
-    themeSelected() {
-      //TODO Revamp Theme selection.
-      //console.log("this.activeTheme", this.selectedTheme);
-    },
-
     setStoresDarkMode() {
       this.$store.commit("setDarkMode", this.selectedDarkMode);
     },
@@ -248,13 +182,10 @@ export default {
      * This will save the current colors and make the selected theme live.
      */
     async saveThemes() {
-      if (this.$refs.form.validate()) {
-        this.$store.commit("setTheme", this.selectedTheme);
       await api.themes.update(
         this.selectedTheme.name,
         this.selectedTheme.colors
       );
-      }
     },
   },
 };