From eea356e5c14ff3471af32ea41a68122f685e9b1a Mon Sep 17 00:00:00 2001
From: hay-kot <hay-kot@pm.me>
Date: Sat, 27 Feb 2021 11:32:15 -0900
Subject: [PATCH] code cleanup

---
 .../components/Admin/Theme/NewThemeDialog.vue | 28 ++++--
 .../src/components/Admin/Theme/ThemeCard.vue  | 92 ++++++++++++-----
 frontend/src/pages/Admin/Theme/index.vue      | 99 +++----------------
 3 files changed, 105 insertions(+), 114 deletions(-)

diff --git a/frontend/src/components/Admin/Theme/NewThemeDialog.vue b/frontend/src/components/Admin/Theme/NewThemeDialog.vue
index f9b7f8d74..af072170b 100644
--- a/frontend/src/components/Admin/Theme/NewThemeDialog.vue
+++ b/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-dialog v-model="dialog" width="400">
+    <v-btn text color="info" @click="dialog = true">
+      {{ $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"),
       },
     };
   },
diff --git a/frontend/src/components/Admin/Theme/ThemeCard.vue b/frontend/src/components/Admin/Theme/ThemeCard.vue
index e0f5e9058..15a973917 100644
--- a/frontend/src/components/Admin/Theme/ThemeCard.vue
+++ b/frontend/src/components/Admin/Theme/ThemeCard.vue
@@ -1,38 +1,82 @@
 <template>
-  <v-card flat outlined class="ma-2">
-    <v-card-text class="mb-n5 mt-n2">
-      <h3>{{ theme.name }} {{ current ? "(Current)" : ""}}</h3>
-    </v-card-text>
-    <v-card-text>
-      <v-row dense>
-        <v-card
-          v-for="(color, index) in theme.colors"
-          :key="index"
-          class="mx-1"
-          height="34"
-          width="36"
-          :color="color"
-        >
-        </v-card>
-      </v-row>
-    </v-card-text>
-    <v-divider></v-divider>
-    <v-card-actions>
-      <v-btn text color="error">Delete</v-btn>
-      <v-spacer></v-spacer>
-      <v-btn text color="success">Apply</v-btn>
-    </v-card-actions>
-  </v-card>
+  <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>
+      </v-card-text>
+      <v-card-text>
+        <v-row dense>
+          <v-card
+            v-for="(color, index) in theme.colors"
+            :key="index"
+            class="mx-1"
+            height="34"
+            width="36"
+            :color="color"
+          >
+          </v-card>
+        </v-row>
+      </v-card-text>
+      <v-divider></v-divider>
+      <v-card-actions>
+        <v-btn text color="error" @click="confirmDelete"> Delete </v-btn>
+        <v-spacer></v-spacer>
+        <!-- <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>
 
diff --git a/frontend/src/pages/Admin/Theme/index.vue b/frontend/src/pages/Admin/Theme/index.vue
index e79264367..6129706b9 100644
--- a/frontend/src/pages/Admin/Theme/index.vue
+++ b/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();
-    this.selectedTheme = this.$store.getters.getActiveTheme;
+    await this.getAllThemes();
+
     this.selectedDarkMode = this.$store.getters.getDarkMode;
   },
 
-  methods: {
-    /**
-     * Open the delete confirmation.
-     */
-    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();
-        }
-      }
+  computed: {
+    selectedTheme() {
+      return this.$store.getters.getActiveTheme;
     },
-    /**
-     * 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
-        );
-      }
+      await api.themes.update(
+        this.selectedTheme.name,
+        this.selectedTheme.colors
+      );
     },
   },
 };